diff --git a/ui (gen4)/features/examples.js b/ui (gen4)/features/examples.js index 6a59e14f..fd8ca7a1 100755 --- a/ui (gen4)/features/examples.js +++ b/ui (gen4)/features/examples.js @@ -12,6 +12,7 @@ var actions = require('lib/actions') var features = require('lib/features') var core = require('features/core') +var widgets = require('features/ui-widgets') @@ -27,10 +28,11 @@ var ExampleActions = actions.Actions({ // XXX should an action be able to overload the doc??? // ...the intuitive thing to do here is make the doc "write-once" // i.e. once defined it can't be overwritten... - exampleAction: ['- Test/', + exampleAction: ['Test/Action', function(){ - // XXX - }], + console.log('>>>', [].slice.call(arguments)) + return function(){ + console.log('<<<', [].slice.call(arguments)) }}], exampleActionFull: ['- Test/', core.doc`Example full action long documentation string `, @@ -78,8 +80,6 @@ var ExampleActions = actions.Actions({ // 2) callbacks change state // // XXX add example argument handling... - // XXX .showDoc(..): get the actual handler code and not the toggler - // code... exampleToggler: ['Test/Example toggler', core.doc`Example toggler... @@ -280,6 +280,540 @@ module.Example = core.ImageGridFeatures.Feature({ +//--------------------------------------------------------------------- + +var ExampleUIActions = actions.Actions({ + exampleActionDisabled: ['Test/$Disabled example action', + {browseMode: function(){ return 'disabled' }}, + function(){ + console.log('Disabled action called:', [].slice.call(arguments)) }], + + // Usage Examples: + // .exampleDrawer() - show html in base drawer... + // .exampleDrawer('Header', 'paragraph') - show html with custom text... + // .exampleDrawer('Overlay') - show html in overlay... + // .exampleDrawer('Overlay', 'Header', 'paragraph') + // - show html in overlay with + // custom text... + exampleDrawer: ['Test/99: D$rawer widget example...', + widgets.makeUIDialog('Drawer', + function(h, txt){ + return $('
') + .css({ + position: 'relative', + background: 'white', + height: '300px', + padding: '20px', + }) + .append($('

') + .text(h || 'Drawer example...')) + .append($('

') + .text(txt || 'With some text.')) + }, + // pass custom configuration to container... + { + background: 'white', + focusable: true, + })], + // XXX show new features... + exampleBrowse: ['Test/-99: Demo $new style dialog...', + widgets.makeUIDialog(function(){ + var actions = this + + console.log('>>> args:', [].slice.call(arguments)) + + return browse.makeLister(null, function(path, make){ + var that = this + + make('select last') + .on('open', function(){ + that.select(-1) + }) + + make('do nothing') + .addClass('selected') + + make('nested dialog...', + { + shortcut_key: 'n', + }) + .on('open', function(){ + actions.exampleBrowse() + }) + + make('---') + + + make('$close parent') + .on('open', function(){ + that.parent.close() + }) + + make('...') + + // NOTE: the dialog's .parent is not yet set at this point... + + // This will finalize the dialog... + // + // NOTE: this is not needed here as the dialog is drawn + // on sync, but for async dialogs this will align + // the selected field correctly. + make.done() + }) + // NOTE: this is not a dialog event, it is defined by the + // container to notify us that we are closing... + .on('close', function(){ + console.log('Dialog closing...') + }) + })], + exampleBrowseCloud: ['Test/Demo $cloud dialog...', + widgets.makeUIDialog(function(){ + var actions = this + + console.log('>>> args:', [].slice.call(arguments)) + + return browse.makeLister(null, function(path, make){ + var that = this + + var words = 'Lorem ipsum dolor sit amet, audiam sensibus ' + +'an mea. Accusam blandit ius in, te magna dolorum ' + +'moderatius pro, sit id dicant imperdiet definiebas. ' + +'Ad duo quod mediocrem, movet laudem discere te mel, ' + +'sea ipsum habemus gloriatur at. Sonet prodesset ' + +'democritum in vis, brute vitae recusabo pri ad, ' + +'--- ' + +'latine civibus efficiantur at his. At duo lorem ' + +'legimus, errem constituam contentiones sed ne, ' + +'cu has corpora definitionem.' + + var res = [] + words + .split(/\s+/g) + .unique() + .forEach(function(c){ + var e = make(c) + // toggle opacity... + .on('open', function(){ + var e = $(this).find('.text') + e.css('opacity', + e.css('opacity') == 0.3 ? '' : 0.3) + }) + res.push(e[0]) + }) + + $(res).parent() + .append($('

') + .sortable() + .append($(res))) + + make.done() + }, + // make the dialog a cloud... + { cloudView: true }) + // NOTE: this is not a dialog event, it is defined by the + // container to notify us that we are closing... + .on('close', function(){ + console.log('Dialog closing...') + }) + })], + exampleBrowsrItems: ['Test/-99: Demo browse $items...', + widgets.makeUIDialog(function(){ + var actions = this + + var editable_list = ['x', 'y', 'z'] + + return browse.makeLister(null, function(path, make){ + var that = this + + make.Heading('Heading:', { + doc: 'Heading doc string...', + }) + + make.Group([ + make('Normal item'), + + // this is the same as make('...') + make.Separator(), + + make.Editable('Editable (Select to edit)'), + + make.Editable('Editable (Enter to edit, cleared)...', { + start_on: 'open', + clear_on_edit: true, + }), + ]) + + make.Heading('List:') + make.List(['a', 'b', 'c']) + + make.Heading(' Editable list:') + make.EditableList(editable_list) + + make.Heading('More:') + make.Action('Editable list demos...') + .on('open', function(){ actions.exampleList() }) + make.Action('Pinned list demo...') + .on('open', function(){ actions.examplePinnedList() }) + + // NOTE: the dialog's .parent is not yet set at this point... + + // This will finalize the dialog... + // + // NOTE: this is not needed here as the dialog is drawn + // on sync, but for async dialogs this will align + // the selected field correctly. + make.done() + }) + // NOTE: this is not a dialog event, it is defined by the + // container to notify us that we are closing... + .on('close', function(){ + }) + })], + exampleList: ['Test/-99: Demo $lists editors in dialog...', + widgets.makeUIDialog(function(){ + var actions = this + + // NOTE: passing things other than strings into a list editor + // is not supported... + var numbers = ['1', '2', '3', '4'] + var letters = ['a', 'b', 'c', 'd'] + + return browse.makeLister(null, function(path, make){ + var that = this + + make.Heading('Numbers:', { + doc: 'List editor with all the buttons enabled...', + }) + make.EditableList(numbers, { + list_id: 'numbers', + item_order_buttons: true, + to_top_button: true, + to_bottom_button: true, + }) + + make.Heading('Letters:', { + doc: 'Sortable list, use sort handle to the right to sort...' + }) + make.EditableList(letters, { + list_id: 'letters', + sortable: 'y', + }) + + // NOTE: the dialog's .parent is not yet set at this point... + + // This will finalize the dialog... + // + // NOTE: this is not needed here as the dialog is drawn + // on sync, but for async dialogs this will align + // the selected field correctly. + make.done() + }) + // NOTE: this is not a dialog event, it is defined by the + // container to notify us that we are closing... + .on('close', function(){ + console.log(core.doc`Lists: + - Numbers: ${numbers.join(', ')} + - Letters: ${letters.join(', ')}`) + }) + })], + examplePinnedList: ['Test/-99: Demo $pinned lists in dialog...', + widgets.makeUIDialog(function(){ + var actions = this + + // NOTE: passing things other than strings into a list editor + // is not supported... + var pins = ['b', 'a'] + var letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g'] + + return browse.makeLister(null, function(path, make){ + var that = this + + make.Heading('Numbers:', { + doc: 'List editor with all the buttons enabled...', + }) + make.EditablePinnedList(letters, pins, { + list_id: 'letters', + //pins_sortable: false, + }) + + // NOTE: the dialog's .parent is not yet set at this point... + + // This will finalize the dialog... + // + // NOTE: this is not needed here as the dialog is drawn + // on sync, but for async dialogs this will align + // the selected field correctly. + make.done() + }) + // NOTE: this is not a dialog event, it is defined by the + // container to notify us that we are closing... + .on('close', function(){ + console.log(core.doc`Lists: + - Pins: ${pins.join(', ')} + - Letters: ${letters.join(', ')}`) + }) + })], + + exampleProgress: ['Test/Demo $progress bar...', + function(text){ + var done = 0 + var max = 10 + var text = text || 'Progress bar demo' + var that = this + + this.showProgress(text) + + var step = function(){ + that.showProgress(text, done++, max) + + max = done < 8 ? max + 5 + : max <= 50 && done < 30 ? max + 2 + : done > 30 ? max - 3 + : max + + // NOTE: we add 10 here to compensate for changing max value... + done < max+10 + && setTimeout(step, 200) + } + + setTimeout(step, 1000) + }], + + // XXX make this a toggler.... + partitionByMonth: ['Test/', + function(){ + var that = this + + this.toggleImageSort('?') != 'Date' && this.sortImages('Date') + + this.on('updateImage', function(_, gid){ this.placeMonthPartition(gid) }) + }], + // XXX this should be .updateImage(..) in a real feature... + placeMonthPartition: ['Test/', + function(image){ + var month = [ + 'January', 'February', 'March', 'April', + 'May', 'June', 'July', 'August', + 'September', 'October', 'November', 'December' + ] + + var gid = this.data.getImage(image) + var next = this.data.getImage(gid, 'next') + + cur = this.images[gid] + next = this.images[next] + + if(cur && next && cur.birthtime.getMonth() != next.birthtime.getMonth()){ + this.ribbons.getImageMarks(gid).filter('.partition').remove() + this.ribbons.getImage(gid) + .after(this.ribbons.elemGID($('
'), gid) + .attr('text', month[next.birthtime.getMonth()])) + } + }], + + + exampleEmbededLister: ['Test/50: Lister example (embeded)/*', + function(path, make){ + make('a/') + make('b/') + make('c/') + }], + exampleFloatingLister: ['Test/50:Lister example (floating)...', + function(path){ + // we got an argument and can exit... + if(path){ + console.log('PATH:', path) + return + } + + // load the UI... + var that = this + var list = function(path, make){ + + make('a/') + make('b/') + make('c/') + } + + var o = overlay.Overlay(this.dom, + browse.makePathList(null, { + 'a/*': list, + 'b/*': list, + 'c/*': list, + }) + .open(function(evt, path){ + o.close() + + that.exampleFloatingLister(path) + })) + + return o + }], + + + // XXX migrate to the dialog framework... + // XXX use this.dom as base... + // XXX BUG: when using this.dom as base some actions leak + // between the two viewers... + showTaggedInDrawer: ['- Test/Show tagged in drawer', + function(tag){ + tag = tag || 'bookmark' + var that = this + var H = '200px' + + var viewer = $('
') + .css({ + height: H, + background: 'black', + }) + // XXX use this.dom as base... + // XXX when using viewer zoom and other stuff get leaked... + var widget = drawer.Drawer($('body'), + $('
') + .css({ + position: 'relative', + height: H, + }) + .append(viewer), + { + focusable: true, + }) + + var data = this.data.crop(this.data.getTaggedByAll(tag), true) + + var b = new core.ImageGrid() + + // used switch experimental actions on (set to true) or off (unset or false)... + //a.experimental = true + + // setup actions... + core.ImageGridFeatures.setup(b, [ + 'viewer-testing', + ]) + + // setup the viewer... + // XXX for some reason if we load this with data and images + // the images will not show up... + b.load({ + viewer: viewer, + }) + + // load some testing data... + // NOTE: we can (and do) load this in parts... + b + .load({ + data: data, + images: this.images, + }) + // this is needed when loading legacy sources that do not have tags + // synced... + // do not do for actual data... + //.syncTags() + .fitImage(1) + + // link navigation... + .on('focusImage', function(){ + that.focusImage(this.current) + }) + + // XXX setup keyboard... + var keyboard = require('lib/keyboard') + + // XXX move this to the .config... + var kb = { + 'Basic Control': { + pattern: '*', + + Home: { + default: 'firstImage!', + }, + End: { + default: 'lastImage!', + }, + Left: { + default: 'prevImage!', + ctrl: 'prevScreen!', + // XXX need to prevent default on mac + browser... + meta: 'prevScreen!', + }, + PgUp: 'prevScreen!', + PgDown: 'nextScreen!', + Right: { + default: 'nextImage!', + ctrl: 'nextScreen!', + // XXX need to prevent default on mac + browser... + meta: 'nextScreen!', + }, + } + } + + widget.dom + // XXX + .keydown( + keyboard.dropRepeatingkeys( + keyboard.makeKeyboardHandler( + kb, + function(k){ + window.DEBUG && console.log(k) + }, + b), + function(){ + return that.config['max-key-repeat-rate'] + })) + + // XXX STUB + window.b = b + + return b + }], + showBookmarkedInDrawer: ['Test/Show bookmarked in drawer', + function(){ this.showTaggedInDrawer('bookmark') }], + showSelectedInDrawer: ['Test/Show selected in drawer', + function(){ this.showTaggedInDrawer('selected') }], + + + makePartitionAfter: ['Test/Make Partition after image', + function(image, text){ + var gid = this.data.getImage(image || 'current') + var attrs = { + gid: gid + } + if(text){ + attrs.text = text + } + this.ribbons.getImage(gid) + .after($('') + .addClass('mark partition') + .attr(attrs)) + }], + +}) + +var ExampleUI = +module.ExampleUI = core.ImageGridFeatures.Feature({ + title: '', + doc: '', + + tag: 'ui-action-examples', + depends: [ + 'ui-browse-actions', + ], + actions: ExampleUIActions, + + handlers: [ + ], +}) + + + +//--------------------------------------------------------------------- + +core.ImageGridFeatures.Feature('examples', [ + 'action-examples', + 'ui-action-examples', +]) + + /********************************************************************** * vim:set ts=4 sw=4 : */ return module }) diff --git a/ui (gen4)/features/meta.js b/ui (gen4)/features/meta.js index 03756808..cde7dc28 100755 --- a/ui (gen4)/features/meta.js +++ b/ui (gen4)/features/meta.js @@ -56,7 +56,7 @@ core.ImageGridFeatures.Feature('viewer-testing', [ 'index-format', // XXX - 'action-examples', + 'examples', 'collections', @@ -139,7 +139,6 @@ core.ImageGridFeatures.Feature('viewer-testing', [ 'ui-browse-actions', 'ui-context-action-menu', - 'ui-widget-test', // slideshow... 'ui-slideshow', diff --git a/ui (gen4)/features/ui-widgets.js b/ui (gen4)/features/ui-widgets.js index d0be9787..5e557cec 100755 --- a/ui (gen4)/features/ui-widgets.js +++ b/ui (gen4)/features/ui-widgets.js @@ -2139,540 +2139,5 @@ module.Buttons = core.ImageGridFeatures.Feature({ -//--------------------------------------------------------------------- -// XXX make this not applicable to production... - - -var WidgetTestActions = actions.Actions({ - testAction: ['Test/Test action', - function(){ - console.log('>>>', [].slice.call(arguments)) - return function(){ - console.log('<<<', [].slice.call(arguments)) }}], - testActionDisabled: ['Test/$Disabled test action', - {browseMode: function(){ return 'disabled' }}, - function(){ - console.log('Disabled action called:', [].slice.call(arguments)) }], - - // Usage Examples: - // .testDrawer() - show html in base drawer... - // .testDrawer('Header', 'paragraph') - show html with custom text... - // .testDrawer('Overlay') - show html in overlay... - // .testDrawer('Overlay', 'Header', 'paragraph') - // - show html in overlay with - // custom text... - testDrawer: ['Test/99: D$rawer widget test...', - makeUIDialog('Drawer', - function(h, txt){ - return $('
') - .css({ - position: 'relative', - background: 'white', - height: '300px', - padding: '20px', - }) - .append($('

') - .text(h || 'Drawer test...')) - .append($('

') - .text(txt || 'With some text.')) - }, - // pass custom configuration to container... - { - background: 'white', - focusable: true, - })], - // XXX show new features... - testBrowse: ['Test/-99: Demo $new style dialog...', - makeUIDialog(function(){ - var actions = this - - console.log('>>> args:', [].slice.call(arguments)) - - return browse.makeLister(null, function(path, make){ - var that = this - - make('select last') - .on('open', function(){ - that.select(-1) - }) - - make('do nothing') - .addClass('selected') - - make('nested dialog...', - { - shortcut_key: 'n', - }) - .on('open', function(){ - actions.testBrowse() - }) - - make('---') - - - make('$close parent') - .on('open', function(){ - that.parent.close() - }) - - make('...') - - // NOTE: the dialog's .parent is not yet set at this point... - - // This will finalize the dialog... - // - // NOTE: this is not needed here as the dialog is drawn - // on sync, but for async dialogs this will align - // the selected field correctly. - make.done() - }) - // NOTE: this is not a dialog event, it is defined by the - // container to notify us that we are closing... - .on('close', function(){ - console.log('Dialog closing...') - }) - })], - testBrowseCloud: ['Test/Demo $cloud dialog...', - makeUIDialog(function(){ - var actions = this - - console.log('>>> args:', [].slice.call(arguments)) - - return browse.makeLister(null, function(path, make){ - var that = this - - var words = 'Lorem ipsum dolor sit amet, audiam sensibus ' - +'an mea. Accusam blandit ius in, te magna dolorum ' - +'moderatius pro, sit id dicant imperdiet definiebas. ' - +'Ad duo quod mediocrem, movet laudem discere te mel, ' - +'sea ipsum habemus gloriatur at. Sonet prodesset ' - +'democritum in vis, brute vitae recusabo pri ad, ' - +'--- ' - +'latine civibus efficiantur at his. At duo lorem ' - +'legimus, errem constituam contentiones sed ne, ' - +'cu has corpora definitionem.' - - var res = [] - words - .split(/\s+/g) - .unique() - .forEach(function(c){ - var e = make(c) - // toggle opacity... - .on('open', function(){ - var e = $(this).find('.text') - e.css('opacity', - e.css('opacity') == 0.3 ? '' : 0.3) - }) - res.push(e[0]) - }) - - $(res).parent() - .append($('

') - .sortable() - .append($(res))) - - make.done() - }, - // make the dialog a cloud... - { cloudView: true }) - // NOTE: this is not a dialog event, it is defined by the - // container to notify us that we are closing... - .on('close', function(){ - console.log('Dialog closing...') - }) - })], - testBrowsrItems: ['Test/-99: Demo browse $items...', - makeUIDialog(function(){ - var actions = this - - var editable_list = ['x', 'y', 'z'] - - return browse.makeLister(null, function(path, make){ - var that = this - - make.Heading('Heading:', { - doc: 'Heading doc string...', - }) - - make.Group([ - make('Normal item'), - - // this is the same as make('...') - make.Separator(), - - make.Editable('Editable (Select to edit)'), - - make.Editable('Editable (Enter to edit, cleared)...', { - start_on: 'open', - clear_on_edit: true, - }), - ]) - - make.Heading('List:') - make.List(['a', 'b', 'c']) - - make.Heading(' Editable list:') - make.EditableList(editable_list) - - make.Heading('More:') - make.Action('Editable list demos...') - .on('open', function(){ actions.testList() }) - make.Action('Pinned list demo...') - .on('open', function(){ actions.testPinnedList() }) - - // NOTE: the dialog's .parent is not yet set at this point... - - // This will finalize the dialog... - // - // NOTE: this is not needed here as the dialog is drawn - // on sync, but for async dialogs this will align - // the selected field correctly. - make.done() - }) - // NOTE: this is not a dialog event, it is defined by the - // container to notify us that we are closing... - .on('close', function(){ - }) - })], - testList: ['Test/-99: Demo $lists editors in dialog...', - makeUIDialog(function(){ - var actions = this - - // NOTE: passing things other than strings into a list editor - // is not supported... - var numbers = ['1', '2', '3', '4'] - var letters = ['a', 'b', 'c', 'd'] - - return browse.makeLister(null, function(path, make){ - var that = this - - make.Heading('Numbers:', { - doc: 'List editor with all the buttons enabled...', - }) - make.EditableList(numbers, { - list_id: 'numbers', - item_order_buttons: true, - to_top_button: true, - to_bottom_button: true, - }) - - make.Heading('Letters:', { - doc: 'Sortable list, use sort handle to the right to sort...' - }) - make.EditableList(letters, { - list_id: 'letters', - sortable: 'y', - }) - - // NOTE: the dialog's .parent is not yet set at this point... - - // This will finalize the dialog... - // - // NOTE: this is not needed here as the dialog is drawn - // on sync, but for async dialogs this will align - // the selected field correctly. - make.done() - }) - // NOTE: this is not a dialog event, it is defined by the - // container to notify us that we are closing... - .on('close', function(){ - console.log(core.doc`Lists: - - Numbers: ${numbers.join(', ')} - - Letters: ${letters.join(', ')}`) - }) - })], - testPinnedList: ['Test/-99: Demo $pinned lists in dialog...', - makeUIDialog(function(){ - var actions = this - - // NOTE: passing things other than strings into a list editor - // is not supported... - var pins = ['b', 'a'] - var letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g'] - - return browse.makeLister(null, function(path, make){ - var that = this - - make.Heading('Numbers:', { - doc: 'List editor with all the buttons enabled...', - }) - make.EditablePinnedList(letters, pins, { - list_id: 'letters', - //pins_sortable: false, - }) - - // NOTE: the dialog's .parent is not yet set at this point... - - // This will finalize the dialog... - // - // NOTE: this is not needed here as the dialog is drawn - // on sync, but for async dialogs this will align - // the selected field correctly. - make.done() - }) - // NOTE: this is not a dialog event, it is defined by the - // container to notify us that we are closing... - .on('close', function(){ - console.log(core.doc`Lists: - - Pins: ${pins.join(', ')} - - Letters: ${letters.join(', ')}`) - }) - })], - - testProgress: ['Test/Demo $progress bar...', - function(text){ - var done = 0 - var max = 10 - var text = text || 'Progress bar demo' - var that = this - - this.showProgress(text) - - var step = function(){ - that.showProgress(text, done++, max) - - max = done < 8 ? max + 5 - : max <= 50 && done < 30 ? max + 2 - : done > 30 ? max - 3 - : max - - // NOTE: we add 10 here to compensate for changing max value... - done < max+10 - && setTimeout(step, 200) - } - - setTimeout(step, 1000) - }], - - // XXX make this a toggler.... - partitionByMonth: ['Test/', - function(){ - var that = this - - this.toggleImageSort('?') != 'Date' && this.sortImages('Date') - - this.on('updateImage', function(_, gid){ this.placeMonthPartition(gid) }) - }], - // XXX this should be .updateImage(..) in a real feature... - placeMonthPartition: ['Test/', - function(image){ - var month = [ - 'January', 'February', 'March', 'April', - 'May', 'June', 'July', 'August', - 'September', 'October', 'November', 'December' - ] - - var gid = this.data.getImage(image) - var next = this.data.getImage(gid, 'next') - - cur = this.images[gid] - next = this.images[next] - - if(cur && next && cur.birthtime.getMonth() != next.birthtime.getMonth()){ - this.ribbons.getImageMarks(gid).filter('.partition').remove() - this.ribbons.getImage(gid) - .after(this.ribbons.elemGID($('
'), gid) - .attr('text', month[next.birthtime.getMonth()])) - } - }], - - - // XXX this is just a test... - embededListerTest: ['Test/50: Lister test (embeded)/*', - function(path, make){ - make('a/') - make('b/') - make('c/') - }], - floatingListerTest: ['Test/50:Lister test (floating)...', - function(path){ - // we got an argument and can exit... - if(path){ - console.log('PATH:', path) - return - } - - // load the UI... - var that = this - var list = function(path, make){ - - make('a/') - make('b/') - make('c/') - } - - var o = overlay.Overlay(this.dom, - browse.makePathList(null, { - 'a/*': list, - 'b/*': list, - 'c/*': list, - }) - .open(function(evt, path){ - o.close() - - that.floatingListerTest(path) - })) - - return o - }], - - - // XXX migrate to the dialog framework... - // XXX use this.dom as base... - // XXX BUG: when using this.dom as base some actions leak - // between the two viewers... - showTaggedInDrawer: ['- Test/Show tagged in drawer', - function(tag){ - tag = tag || 'bookmark' - var that = this - var H = '200px' - - var viewer = $('
') - .css({ - height: H, - background: 'black', - }) - // XXX use this.dom as base... - // XXX when using viewer zoom and other stuff get leaked... - var widget = drawer.Drawer($('body'), - $('
') - .css({ - position: 'relative', - height: H, - }) - .append(viewer), - { - focusable: true, - }) - - var data = this.data.crop(this.data.getTaggedByAll(tag), true) - - var b = new core.ImageGrid() - - // used switch experimental actions on (set to true) or off (unset or false)... - //a.experimental = true - - // setup actions... - core.ImageGridFeatures.setup(b, [ - 'viewer-testing', - ]) - - // setup the viewer... - // XXX for some reason if we load this with data and images - // the images will not show up... - b.load({ - viewer: viewer, - }) - - // load some testing data... - // NOTE: we can (and do) load this in parts... - b - .load({ - data: data, - images: this.images, - }) - // this is needed when loading legacy sources that do not have tags - // synced... - // do not do for actual data... - //.syncTags() - .fitImage(1) - - // link navigation... - .on('focusImage', function(){ - that.focusImage(this.current) - }) - - // XXX setup keyboard... - var keyboard = require('lib/keyboard') - - // XXX move this to the .config... - var kb = { - 'Basic Control': { - pattern: '*', - - Home: { - default: 'firstImage!', - }, - End: { - default: 'lastImage!', - }, - Left: { - default: 'prevImage!', - ctrl: 'prevScreen!', - // XXX need to prevent default on mac + browser... - meta: 'prevScreen!', - }, - PgUp: 'prevScreen!', - PgDown: 'nextScreen!', - Right: { - default: 'nextImage!', - ctrl: 'nextScreen!', - // XXX need to prevent default on mac + browser... - meta: 'nextScreen!', - }, - } - } - - widget.dom - // XXX - .keydown( - keyboard.dropRepeatingkeys( - keyboard.makeKeyboardHandler( - kb, - function(k){ - window.DEBUG && console.log(k) - }, - b), - function(){ - return that.config['max-key-repeat-rate'] - })) - - // XXX STUB - window.b = b - - return b - }], - showBookmarkedInDrawer: ['Test/Show bookmarked in drawer', - function(){ this.showTaggedInDrawer('bookmark') }], - showSelectedInDrawer: ['Test/Show selected in drawer', - function(){ this.showTaggedInDrawer('selected') }], - - - makePartitionAfter: ['Test/Make Partition after image', - function(image, text){ - var gid = this.data.getImage(image || 'current') - var attrs = { - gid: gid - } - if(text){ - attrs.text = text - } - this.ribbons.getImage(gid) - .after($('') - .addClass('mark partition') - .attr(attrs)) - }], - -}) - -var WidgetTest = -module.WidgetTest = core.ImageGridFeatures.Feature({ - title: '', - doc: '', - - tag: 'ui-widget-test', - depends: [ - 'ui-browse-actions', - ], - actions: WidgetTestActions, - - handlers: [ - ], -}) - - - - /********************************************************************** * vim:set ts=4 sw=4 : */ return module }) diff --git a/ui (gen4)/package.json b/ui (gen4)/package.json index bfe20b6f..4d05998f 100755 --- a/ui (gen4)/package.json +++ b/ui (gen4)/package.json @@ -49,6 +49,6 @@ }, "scripts": { "build-css": "lessc css/layout.less css/layout.css", - "start": "nw ." + "start": "electron e.js" } }