mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-12-17 08:41:40 +00:00
now viewer ui is a feature...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
014dcc80a0
commit
2240025747
@ -453,6 +453,14 @@ var DataPrototype = {
|
||||
|
||||
/*********************************************** Introspection ***/
|
||||
|
||||
get length(){
|
||||
return this.order.length
|
||||
},
|
||||
get ribbonLength(){
|
||||
return this.getImages(this.getRibbon()).len
|
||||
},
|
||||
|
||||
|
||||
// Get image
|
||||
//
|
||||
// Get current image:
|
||||
@ -522,16 +530,18 @@ var DataPrototype = {
|
||||
// NOTE: If gid|order is not given, current image is assumed.
|
||||
// Similarly, if list|ribbon is not given then the current
|
||||
// ribbon is used.
|
||||
// NOTE: if input gid is invalid this will return -1 (XXX is this good???)
|
||||
// NOTE: the folowing are equivalent:
|
||||
// NOTE: if input gid is invalid this will return -1
|
||||
// NOTE: the following are equivalent:
|
||||
// D.getImage('current', -1, R)
|
||||
// D.getImage('before', R)
|
||||
// D.getImage('current', 'before', R)
|
||||
// where D is a Data object and R a ribbon id/index different
|
||||
// from the current ribbon (see next note for details).
|
||||
// from the current ribbon, i.e. the current image is not present
|
||||
// in R (see next note for details).
|
||||
// NOTE: in before/after modes, if the target image is found then it
|
||||
// will be returned, use offset to explicitly get the image
|
||||
// before/after target.
|
||||
// will be returned, thus the mode has no effect unless the
|
||||
// target image is not loaded.
|
||||
// Use offset to explicitly get the image before/after target.
|
||||
//
|
||||
// XXX most of the complexity here comes from argument DSL parsing,
|
||||
// might be good to revise argument syntax and handling...
|
||||
|
||||
@ -100,7 +100,8 @@ module.setupActions = function(viewer){
|
||||
viewer = viewer == null ? $('.viewer') : viewer
|
||||
//r = r == null ? makeTestRibbons(viewer, images) : r
|
||||
|
||||
var vv = Object.create(v.Viewer)
|
||||
//var vv = Object.create(v.Viewer)
|
||||
var vv = Object.create(v.Client)
|
||||
|
||||
// XXX need to automate this...
|
||||
vv.config = Object.create(vv.config || {})
|
||||
|
||||
@ -242,16 +242,10 @@ $(function(){
|
||||
|
||||
// XXX
|
||||
window.a = testing.setupActions()
|
||||
.load({
|
||||
viewer: $('.viewer')
|
||||
})
|
||||
|
||||
// used switch experimental actions on (set to true) or off (unset or false)...
|
||||
//a.experimental = true
|
||||
|
||||
// XXX for some reason this is not visible when loading...
|
||||
a.setEmptyMsg('Loading...')
|
||||
|
||||
viewer.ImageGridFeatures.setup(a, [
|
||||
'viewer-testing',
|
||||
|
||||
@ -266,10 +260,11 @@ $(function(){
|
||||
// NOTE: we can load this in parts...
|
||||
a
|
||||
.load({
|
||||
//viewer: $('.viewer'),
|
||||
viewer: $('.viewer'),
|
||||
data: data.Data(testing.mock_data),
|
||||
images: testing.makeTestImages(),
|
||||
})
|
||||
.setEmptyMsg('Loading...')
|
||||
// this is needed when loading legacy sources that do not have tags
|
||||
// synced...
|
||||
// do not do for actual data...
|
||||
|
||||
@ -274,28 +274,10 @@ actions.Actions({
|
||||
// basic navigation...
|
||||
//
|
||||
focusImage: ['Navigate/Focus image',
|
||||
/* XXX same structure as action but instead of a function uses
|
||||
a list of args...
|
||||
// aliases...
|
||||
{
|
||||
'firstImage': ['Navigate/First image in current ribbon', [ 'first' ]],
|
||||
'lastImage': ['Navigate/Last image in current ribbon', [ 'last' ]],
|
||||
'firstGlobalImage': ['Navigate/First globally image', [ 0 ]],
|
||||
'lastGlobalImage': ['Navigate/Last globally image', [ -1 ]],
|
||||
},
|
||||
*/
|
||||
function(img, list){
|
||||
this.data.focusImage(img, list)
|
||||
}],
|
||||
focusRibbon: ['Navigate/Focus Ribbon',
|
||||
/*
|
||||
{
|
||||
firstRibbon: ['Navigate/First ribbon', [ 'first' ]],
|
||||
lastRibbon: ['Navigate/Last ribbon', [ 'last' ]],
|
||||
prevRibbon: ['Navigate/Previous ribbon', [ 'before' ]],
|
||||
nextRibbon: ['Navigate/Next ribbon', [ 'after' ]],
|
||||
},
|
||||
*/
|
||||
function(target){
|
||||
var data = this.data
|
||||
var r = data.getRibbon(target)
|
||||
@ -800,25 +782,19 @@ actions.Actions({
|
||||
|
||||
|
||||
|
||||
// XXX do partial loading...
|
||||
var Viewer =
|
||||
module.Viewer =
|
||||
actions.Actions(Client, {
|
||||
/*********************************************************************/
|
||||
|
||||
config: {
|
||||
// The maximum screen width allowed when zooming...
|
||||
'max-screen-images': 30,
|
||||
var ImageGridFeatures =
|
||||
module.ImageGridFeatures = Object.create(features.FeatureSet)
|
||||
|
||||
// A step (multiplier) used by .zoomIn()/.zoomOut() actions.
|
||||
// NOTE: this is rounded to the nearest whole screen width in images
|
||||
// and current fit-overflow added.
|
||||
'zoom-step': 1.2,
|
||||
|
||||
// added to odd number of images to fit to indicate scroll ability...
|
||||
// ...this effectively sets the closest distance an image can be from
|
||||
// the viewer edge...
|
||||
'fit-overflow': 0.2,
|
||||
},
|
||||
|
||||
//---------------------------------------------------------------------
|
||||
|
||||
var ViewerActions =
|
||||
module.ViewerActions =
|
||||
//actions.Actions(Client, {
|
||||
actions.Actions({
|
||||
|
||||
/*
|
||||
// Images...
|
||||
@ -1317,12 +1293,31 @@ actions.Actions(Client, {
|
||||
|
||||
})
|
||||
|
||||
var Viewer =
|
||||
module.Viewer = features.Feature(ImageGridFeatures, {
|
||||
title: 'Graphical User Interface',
|
||||
|
||||
tag: 'ui',
|
||||
|
||||
/*********************************************************************/
|
||||
priority: 'high',
|
||||
|
||||
var ImageGridFeatures =
|
||||
module.ImageGridFeatures = Object.create(features.FeatureSet)
|
||||
config: {
|
||||
// The maximum screen width allowed when zooming...
|
||||
'max-screen-images': 30,
|
||||
|
||||
// A step (multiplier) used by .zoomIn()/.zoomOut() actions.
|
||||
// NOTE: this is rounded to the nearest whole screen width in images
|
||||
// and current fit-overflow added.
|
||||
'zoom-step': 1.2,
|
||||
|
||||
// added to odd number of images to fit to indicate scroll ability...
|
||||
// ...this effectively sets the closest distance an image can be from
|
||||
// the viewer edge...
|
||||
'fit-overflow': 0.2,
|
||||
},
|
||||
|
||||
actions: ViewerActions,
|
||||
})
|
||||
|
||||
|
||||
|
||||
@ -1333,6 +1328,10 @@ module.ImageGridFeatures = Object.create(features.FeatureSet)
|
||||
// XXX would be great to add a mechanism define how to reverse actions...
|
||||
// ...one way to do this at this point is to revert to last state
|
||||
// and re-run the journal until the desired event...
|
||||
// XXX need to define a clear journaling strategy in the lines of:
|
||||
// - save state clears journal and adds a state load action
|
||||
// - .load(..) clears journal
|
||||
// XXX needs careful testing...
|
||||
var Journal =
|
||||
module.Journal = features.Feature(ImageGridFeatures, {
|
||||
title: 'Action Journal',
|
||||
@ -1355,6 +1354,16 @@ module.Journal = features.Feature(ImageGridFeatures, {
|
||||
delete this.journal
|
||||
}
|
||||
}],
|
||||
runJournal: ['Journal/Run journal',
|
||||
function(journal){
|
||||
var that = this
|
||||
journal.forEach(function(e){
|
||||
// load state...
|
||||
that.focusImage(e[0])
|
||||
// run action...
|
||||
that[e[1]].apply(that, e[2])
|
||||
})
|
||||
}],
|
||||
}),
|
||||
|
||||
// log state, action and its args...
|
||||
@ -1400,6 +1409,8 @@ module.Journal = features.Feature(ImageGridFeatures, {
|
||||
'ungroup',
|
||||
'expandGroup',
|
||||
'collapseGroup',
|
||||
|
||||
'runJournal',
|
||||
].map(function(action){
|
||||
return [
|
||||
action,
|
||||
@ -1554,6 +1565,7 @@ module.PartialRibbons = features.Feature(ImageGridFeatures, {
|
||||
priority: 'high',
|
||||
|
||||
tag: 'ui-partial-ribbons',
|
||||
depends: ['ui'],
|
||||
|
||||
|
||||
actions: PartialRibbonsActions,
|
||||
@ -1694,6 +1706,12 @@ module.SingleImageView = features.Feature(ImageGridFeatures, {
|
||||
doc: '',
|
||||
|
||||
tag: 'ui-single-image-view',
|
||||
depends: ['ui'],
|
||||
|
||||
config: {
|
||||
'single-image-scale': null,
|
||||
'ribbon-scale': null,
|
||||
},
|
||||
|
||||
actions: SingleImageActions,
|
||||
|
||||
@ -1705,18 +1723,29 @@ module.SingleImageView = features.Feature(ImageGridFeatures, {
|
||||
updateImageProportions.call(this)
|
||||
}
|
||||
}],
|
||||
// XXX this uses .screenwidth for scale, is this the right way to go?
|
||||
['toggleSingleImage.post',
|
||||
function(){
|
||||
// singe image mode -- set image proportions...
|
||||
if(this.toggleSingleImage('?') == 'on'){
|
||||
updateImageProportions.call(this)
|
||||
|
||||
// update scale...
|
||||
var w = this.screenwidth
|
||||
this.config['ribbon-scale'] = w
|
||||
this.screenwidth = this.config['single-image-scale'] || w
|
||||
|
||||
// ribbon mode -- restore original image size...
|
||||
} else {
|
||||
this.ribbons.viewer.find('.image:not(.clone)').css({
|
||||
width: '',
|
||||
height: ''
|
||||
})
|
||||
|
||||
// update scale...
|
||||
var w = this.screenwidth
|
||||
this.config['single-image-scale'] = w
|
||||
this.screenwidth = this.config['ribbon-scale'] || w
|
||||
}
|
||||
}],
|
||||
],
|
||||
@ -1736,6 +1765,7 @@ module.AlignRibbonsToImageOrder = features.Feature(ImageGridFeatures, {
|
||||
doc: '',
|
||||
|
||||
tag: 'ui-ribbon-align-to-order',
|
||||
depends: ['ui'],
|
||||
exclusive: ['ui-ribbon-align'],
|
||||
|
||||
handlers: [
|
||||
@ -1750,6 +1780,7 @@ module.AlignRibbonsToFirstImage = features.Feature(ImageGridFeatures, {
|
||||
doc: '',
|
||||
|
||||
tag: 'ui-ribbon-align-to-first',
|
||||
depends: ['ui'],
|
||||
exclusive: ['ui-ribbon-align'],
|
||||
|
||||
handlers: [
|
||||
@ -1768,6 +1799,7 @@ module.ShiftAnimation = features.Feature(ImageGridFeatures, {
|
||||
doc: '',
|
||||
|
||||
tag: 'ui-animation',
|
||||
depends: ['ui'],
|
||||
|
||||
handlers: [
|
||||
['shiftImageUp.pre shiftImageDown.pre',
|
||||
@ -1853,6 +1885,7 @@ module.BoundsIndicators = features.Feature(ImageGridFeatures, {
|
||||
doc: '',
|
||||
|
||||
tag: 'ui-bounds-indicators',
|
||||
depends: ['ui'],
|
||||
|
||||
actions: BoundsIndicatorsActions,
|
||||
|
||||
@ -2011,6 +2044,7 @@ module.CurrentImageIndicator = features.Feature(ImageGridFeatures, {
|
||||
doc: '',
|
||||
|
||||
tag: 'ui-current-image-indicator',
|
||||
depends: ['ui'],
|
||||
|
||||
config: {
|
||||
'current-image-border': 3,
|
||||
@ -2113,7 +2147,10 @@ module.CurrentImageIndicatorHideOnFastScreenNav = features.Feature(ImageGridFeat
|
||||
tag: 'ui-current-image-indicator-hide-on-fast-screen-nav',
|
||||
|
||||
|
||||
depends: ['ui-current-image-indicator'],
|
||||
depends: [
|
||||
'ui',
|
||||
'ui-current-image-indicator'
|
||||
],
|
||||
exclusive: ['ui-current-image-indicator-hide'],
|
||||
|
||||
|
||||
@ -2175,7 +2212,10 @@ module.CurrentImageIndicatorHideOnScreenNav = features.Feature(ImageGridFeatures
|
||||
tag: 'ui-current-image-indicator-hide-on-screen-nav',
|
||||
|
||||
|
||||
depends: ['ui-current-image-indicator'],
|
||||
depends: [
|
||||
'ui',
|
||||
'ui-current-image-indicator'
|
||||
],
|
||||
exclusive: ['ui-current-image-indicator-hide'],
|
||||
|
||||
|
||||
@ -2211,6 +2251,7 @@ module.ImageStateIndicator = features.Feature(ImageGridFeatures, {
|
||||
doc: '',
|
||||
|
||||
tag: 'ui-image-state-indicator',
|
||||
depends: ['ui'],
|
||||
})
|
||||
|
||||
|
||||
@ -2224,6 +2265,7 @@ module.GlobalStateIndicator = features.Feature(ImageGridFeatures, {
|
||||
doc: '',
|
||||
|
||||
tag: 'ui-global-state-indicator',
|
||||
depends: ['ui'],
|
||||
})
|
||||
|
||||
|
||||
@ -2423,6 +2465,7 @@ module.ActionTree = features.Feature(ImageGridFeatures, {
|
||||
doc: '',
|
||||
|
||||
tag: 'ui-action-tree',
|
||||
depends: ['ui'],
|
||||
|
||||
config: {
|
||||
'action-category-order': [
|
||||
@ -2767,6 +2810,8 @@ module.FileSystemLoader = features.Feature(ImageGridFeatures, {
|
||||
//
|
||||
|
||||
features.Feature(ImageGridFeatures, 'viewer-testing', [
|
||||
'ui',
|
||||
|
||||
// features...
|
||||
'ui-ribbon-align-to-order',
|
||||
'ui-single-image-view',
|
||||
@ -2802,6 +2847,7 @@ features.Feature(ImageGridFeatures, 'commandline', [
|
||||
])
|
||||
|
||||
features.Feature(ImageGridFeatures, 'viewer-minimal', [
|
||||
'ui',
|
||||
'ui-ribbon-align-to-order',
|
||||
'ui-animation',
|
||||
'ui-bounds-indicators',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user