mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 02:10:08 +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 features = require('lib/features')
|
||||||
|
|
||||||
var core = require('features/core')
|
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???
|
// XXX should an action be able to overload the doc???
|
||||||
// ...the intuitive thing to do here is make the doc "write-once"
|
// ...the intuitive thing to do here is make the doc "write-once"
|
||||||
// i.e. once defined it can't be overwritten...
|
// i.e. once defined it can't be overwritten...
|
||||||
exampleAction: ['- Test/',
|
exampleAction: ['Test/Action',
|
||||||
function(){
|
function(){
|
||||||
// XXX
|
console.log('>>>', [].slice.call(arguments))
|
||||||
}],
|
return function(){
|
||||||
|
console.log('<<<', [].slice.call(arguments)) }}],
|
||||||
exampleActionFull: ['- Test/',
|
exampleActionFull: ['- Test/',
|
||||||
core.doc`Example full action long documentation string
|
core.doc`Example full action long documentation string
|
||||||
`,
|
`,
|
||||||
@ -78,8 +80,6 @@ var ExampleActions = actions.Actions({
|
|||||||
// 2) callbacks change state
|
// 2) callbacks change state
|
||||||
//
|
//
|
||||||
// XXX add example argument handling...
|
// XXX add example argument handling...
|
||||||
// XXX .showDoc(..): get the actual handler code and not the toggler
|
|
||||||
// code...
|
|
||||||
exampleToggler: ['Test/Example toggler',
|
exampleToggler: ['Test/Example toggler',
|
||||||
core.doc`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 })
|
* vim:set ts=4 sw=4 : */ return module })
|
||||||
|
|||||||
@ -56,7 +56,7 @@ core.ImageGridFeatures.Feature('viewer-testing', [
|
|||||||
'index-format',
|
'index-format',
|
||||||
|
|
||||||
// XXX
|
// XXX
|
||||||
'action-examples',
|
'examples',
|
||||||
|
|
||||||
'collections',
|
'collections',
|
||||||
|
|
||||||
@ -139,7 +139,6 @@ core.ImageGridFeatures.Feature('viewer-testing', [
|
|||||||
|
|
||||||
'ui-browse-actions',
|
'ui-browse-actions',
|
||||||
'ui-context-action-menu',
|
'ui-context-action-menu',
|
||||||
'ui-widget-test',
|
|
||||||
|
|
||||||
// slideshow...
|
// slideshow...
|
||||||
'ui-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 })
|
* vim:set ts=4 sw=4 : */ return module })
|
||||||
|
|||||||
@ -49,6 +49,6 @@
|
|||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build-css": "lessc css/layout.less css/layout.css",
|
"build-css": "lessc css/layout.less css/layout.css",
|
||||||
"start": "nw ."
|
"start": "electron e.js"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user