mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-28 18:00:09 +00:00
moved examples to examples.js
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
456faa8028
commit
0336afda01
@ -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 $('<div>')
|
||||
.css({
|
||||
position: 'relative',
|
||||
background: 'white',
|
||||
height: '300px',
|
||||
padding: '20px',
|
||||
})
|
||||
.append($('<h1>')
|
||||
.text(h || 'Drawer example...'))
|
||||
.append($('<p>')
|
||||
.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($('<div>')
|
||||
.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($('<div class="mark partition">'), 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 = $('<div class="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'),
|
||||
$('<div>')
|
||||
.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($('<span>')
|
||||
.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 })
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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 $('<div>')
|
||||
.css({
|
||||
position: 'relative',
|
||||
background: 'white',
|
||||
height: '300px',
|
||||
padding: '20px',
|
||||
})
|
||||
.append($('<h1>')
|
||||
.text(h || 'Drawer test...'))
|
||||
.append($('<p>')
|
||||
.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($('<div>')
|
||||
.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($('<div class="mark partition">'), 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 = $('<div class="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'),
|
||||
$('<div>')
|
||||
.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($('<span>')
|
||||
.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 })
|
||||
|
||||
@ -49,6 +49,6 @@
|
||||
},
|
||||
"scripts": {
|
||||
"build-css": "lessc css/layout.less css/layout.css",
|
||||
"start": "nw ."
|
||||
"start": "electron e.js"
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user