flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-12-17 08:41:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

now viewer ui is a feature...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2015-11-02 21:06:42 +03:00
parent 014dcc80a0
commit 2240025747
4 changed files with 105 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
ui (gen4)/data.js
View File

@ -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...

3
ui (gen4)/testing.js
View File

@ -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 || {})

11
ui (gen4)/ui.js
View File

@ -242,23 +242,17 @@ $(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',
// XXX this is not for production...
'experiments',
])
// this publishes all the actions...
//module.GLOBAL_KEYBOARD.__proto__ = a
@ -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...

124
ui (gen4)/viewer.js
View File

@ -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',