diff --git a/ui (gen4)/css/layout.less b/ui (gen4)/css/layout.less index ebe763c0..60c8f1e0 100755 --- a/ui (gen4)/css/layout.less +++ b/ui (gen4)/css/layout.less @@ -684,11 +684,17 @@ stretching in width... */ .current-marker { + display: none; position: absolute; border: solid 5px red; background: none; z-index: 100; + top: 0; + left: 0; + margin-top: -@image-tile-size / 2; + margin-left: -@image-tile-size / 2; + /* pass events through... (do we need IE10-?) */ pointer-events: none; } diff --git a/ui (gen4)/features/base.js b/ui (gen4)/features/base.js index 39805719..960b5d55 100755 --- a/ui (gen4)/features/base.js +++ b/ui (gen4)/features/base.js @@ -406,13 +406,6 @@ actions.Actions({ this.focusImage(t, r) }], - // XXX add undo... - setBaseRibbon: ['Edit|Ribbon/Set base ribbon', { - journal: true, - browseMode: function(target){ - return this.current_ribbon == this.base && 'disabled' }}, - function(target){ this.data.setBase(target) }], - // shorthands... // XXX do we reset direction on these??? firstImage: ['Navigate/First image in current ribbon', @@ -584,12 +577,116 @@ actions.Actions({ nextRibbon: ['Navigate/Next ribbon', {browseMode: 'lastRibbon'}, function(){ this.focusRibbon('after') }], +}) +var Base = +module.Base = +core.ImageGridFeatures.Feature({ + title: 'ImageGrid base', + + tag: 'base', + depends: [ + 'changes', + ], + suggested: [ + 'base-edit', + //'tags', + //'sort', + //'tasks', + ], + + actions: BaseActions, + + handlers: [ + // manage changes... + // everything changed... + [[ + 'claer', + 'loadURLs', + ], + function(){ this.markChanged('all') }], + + ['prepareIndexForWrite', + function(res){ + // we save .current unconditionally... + res.index.current = res.raw.data.current + + var changes = res.changes + + // data... + if(changes === true || changes.data){ + res.index.data = res.raw.data + } + + // images (full)... + if(changes === true || changes.images === true){ + res.index.images = res.raw.images + + // images-diff... + } else if(changes && changes.images){ + var diff = res.index['images-diff'] = {} + changes.images.forEach(function(gid){ + diff[gid] = res.raw.images[gid] + }) + } + }], + ['prepareJSONForLoad', + function(res, json, base_path){ + // build data and images... + // XXX do we actually need to build stuff here, shouldn't + // .load(..) take care of this??? + //var d = json.data + var d = data.Data.fromJSON(json.data) + + d.current = json.current || d.current + + var img = images.Images(json.images) + + if(base_path){ + d.base_path = base_path + // XXX STUB remove ASAP... + // ...need a real way to handle base dir, possible + // approaches: + // 1) .base_path attr in image, set on load and + // do not save (or ignore on load)... + // if exists prepend to all paths... + // - more to do in view-time + // + more flexible + // 2) add/remove on load/save (approach below) + // + less to do in real time + // - more processing on load/save + img.forEach(function(_, img){ img.base_path = base_path }) + } + + res.data = d + res.images = img + }], + ], +}) + + + +//--------------------------------------------------------------------- +// Edit... + +var BaseEditActions = +module.BaseEditActions = +actions.Actions({ + config: { + }, + // basic ribbon editing... // // NOTE: for all of these, current/ribbon image is a default... + // XXX add undo... + setBaseRibbon: ['Edit|Ribbon/Set base ribbon', { + journal: true, + browseMode: function(target){ + return this.current_ribbon == this.base && 'disabled' }}, + function(target){ this.data.setBase(target) }], + // NOTE: resetting this option will clear the last direction... toggleShiftsAffectDirection: ['Interface/Shifts affect direction', core.makeConfigToggler('shifts-affect-direction', @@ -761,7 +858,16 @@ actions.Actions({ {undo: 'reverseRibbons'}, function(){ this.data.reverseRibbons() }], - // XXX align to ribbon... + // complex operations... + // XXX need interactive mode for this... + // - on init: select start/end/base + // - allow user to reset/move + // - on accept: run + alignToRibbon: ['Ribbon|Edit/Align top ribbon to base', + {journal: true}, + function(target, start, end){ + this.data = this.data.alignToRibbon(target, start, end) }], + // basic image editing... // @@ -841,37 +947,19 @@ actions.Actions({ flipHorizontal: ['Image|Edit/Flip image horizontally', {undo: 'flipHorizontal'}, function(target){ this.flip(target, 'horizontal') }], - - - // complex operations... - // XXX need interactive mode for this... - // - on init: select start/end/base - // - allow user to reset/move - // - on accept: run - alignToRibbon: ['Ribbon|Edit/Align top ribbon to base', - {journal: true}, - function(target, start, end){ - this.data = this.data.alignToRibbon(target, start, end) }], }) - -var Base = -module.Base = +var BaseEdit = +module.BaseEdit = core.ImageGridFeatures.Feature({ - title: 'ImageGrid base', + title: 'ImageGrid base editor', - tag: 'base', + tag: 'base-edit', depends: [ - 'changes', - ], - suggested: [ - 'base-edit', - //'tags', - //'sort', - //'tasks', + 'base', ], - actions: BaseActions, + actions: BaseEditActions, handlers: [ [[ @@ -897,13 +985,6 @@ core.ImageGridFeatures.Feature({ && this.shiftImageOrder.apply(this, [].slice(arguments, 1)) } }], // manage changes... - // everything changed... - [[ - 'claer', - 'loadURLs', - ], - function(){ this.markChanged('all') }], - // data... [[ //'load', @@ -933,94 +1014,11 @@ core.ImageGridFeatures.Feature({ 'flipVertical', ], function(_, target){ this.markChanged('images', [this.data.getImage(target)]) }], - - ['prepareIndexForWrite', - function(res){ - // we save .current unconditionally... - res.index.current = res.raw.data.current - - var changes = res.changes - - // data... - if(changes === true || changes.data){ - res.index.data = res.raw.data - } - - // images (full)... - if(changes === true || changes.images === true){ - res.index.images = res.raw.images - - // images-diff... - } else if(changes && changes.images){ - var diff = res.index['images-diff'] = {} - changes.images.forEach(function(gid){ - diff[gid] = res.raw.images[gid] - }) - } - }], - ['prepareJSONForLoad', - function(res, json, base_path){ - // build data and images... - // XXX do we actually need to build stuff here, shouldn't - // .load(..) take care of this??? - //var d = json.data - var d = data.Data.fromJSON(json.data) - - d.current = json.current || d.current - - var img = images.Images(json.images) - - if(base_path){ - d.base_path = base_path - // XXX STUB remove ASAP... - // ...need a real way to handle base dir, possible - // approaches: - // 1) .base_path attr in image, set on load and - // do not save (or ignore on load)... - // if exists prepend to all paths... - // - more to do in view-time - // + more flexible - // 2) add/remove on load/save (approach below) - // + less to do in real time - // - more processing on load/save - img.forEach(function(_, img){ img.base_path = base_path }) - } - - res.data = d - res.images = img - }], ], }) -//--------------------------------------------------------------------- -// Edit... - -var BaseEditActions = -module.BaseEditActions = -actions.Actions({ - config: { - }, - - // XXX -}) - -var BaseEdit = -module.BaseEdit = -core.ImageGridFeatures.Feature({ - title: 'ImageGrid base editor', - - tag: 'base-edit', - depends: [ - 'base', - ], - - actions: BaseEditActions, -}) - - - //--------------------------------------------------------------------- // Tags... diff --git a/ui (gen4)/features/demo.js b/ui (gen4)/features/demo.js index e5fa6efb..bca54942 100755 --- a/ui (gen4)/features/demo.js +++ b/ui (gen4)/features/demo.js @@ -52,6 +52,21 @@ Object.keys(demo_data.ribbons).forEach(function(k){ demo_data.order = demo_data.order.concat(demo_data.ribbons[k]) }) +var demo_images = +module.demo_images = { + a: { + orientation: 90, + }, + f: { + orientation: 270, + }, + 2: { + orientation: 270, + }, + z: { + flipped: ['horizontal'], + }, +} /*********************************************************************/ @@ -71,7 +86,8 @@ module.Demo = core.ImageGridFeatures.Feature({ function(){ this.load({ data: data.Data(demo_data), - images: images.Images(), + //images: images.Images(), + images: images.Images(demo_images), }) }], }) diff --git a/ui (gen4)/features/meta.js b/ui (gen4)/features/meta.js index 4561e6e6..5cabc624 100755 --- a/ui (gen4)/features/meta.js +++ b/ui (gen4)/features/meta.js @@ -64,14 +64,16 @@ core.ImageGridFeatures.Feature('viewer-testing', [ 'ui-single-image', 'ui-partial-ribbons', - // XXX has bugs... - //'ui-partial-ribbons-2', + /*/ XXX has bugs... + 'ui-partial-ribbons-2', + '-ui-partial-ribbons', + //*/ // XXX EXPERIMENTAL... 'ui-partial-ribbons-vdom', '-ui-partial-ribbons', '-ui-partial-ribbons-2', // XXX this conflicts with ui-partial-ribbons-vdom... - '-ui-current-image-indicator', + //'-ui-current-image-indicator', //*/ 'marks', diff --git a/ui (gen4)/features/ui-chrome.js b/ui (gen4)/features/ui-chrome.js index 2a7b57d9..8a677434 100755 --- a/ui (gen4)/features/ui-chrome.js +++ b/ui (gen4)/features/ui-chrome.js @@ -179,11 +179,11 @@ var CurrentImageIndicatorActions = actions.Actions({ // NOTE: cur may be unloaded... var ribbon = this.ribbons.getRibbon(cur.length > 0 ? target : this.current_ribbon) - var marker = ribbon.find('.current-marker') + var marker = ribbon_set.find('.current-marker') // remove marker if current image is not loaded... if(cur.length == 0){ - marker.remove() + marker.hide() return } @@ -191,41 +191,6 @@ var CurrentImageIndicatorActions = actions.Actions({ var border = this.config['current-image-border'] var min_border = this.config['current-image-min-border'] var border_timeout = this.config['current-image-border-timeout'] - var fadein = this.config['current-image-indicator-fadein'] - - // no marker found -- either in different ribbon or not created yet... - if(marker.length == 0){ - // get marker globally... - marker = this.ribbons.viewer.find('.current-marker') - - // no marker exists -- create a marker... - if(marker.length == 0){ - var marker = $('
') - .addClass('current-marker ui-current-image-indicator') - .css({ - opacity: '0', - // NOTE: these are not used for positioning - // but are needed for correct absolute - // placement... - top: '0px', - left: '0px', - }) - .appendTo(ribbon) - .animate({ - 'opacity': 1 - }, fadein) - this.ribbons.dom.setOffset(marker, 0, 0) - - // add marker to current ribbon... - } else { - css.display = '' - marker - // NOTE: this will prevent animating the marker - // in odd ways when switching ribbons... - .css({ display: 'none' }) - .appendTo(ribbon) - } - } var w = cur.outerWidth(true) var h = cur.outerHeight(true) @@ -262,16 +227,6 @@ var CurrentImageIndicatorActions = actions.Actions({ } } - /* // set absolute offset... - this.ribbons.dom.setOffset(marker, - cur[0].offsetLeft - (parseFloat(cur[0].style.marginLeft) || 0), - 0) - */ - // set relative offset... - var W = Math.min(document.body.offsetWidth, document.body.offsetHeight) - var x = ((cur[0].offsetLeft - (parseFloat(cur[0].style.marginLeft) || 0))/W)*100 + 'vmin' - marker.transform({x: x, y: 0, z: 0}) - marker.css(css) }], }) @@ -290,59 +245,23 @@ module.CurrentImageIndicator = core.ImageGridFeatures.Feature({ actions: CurrentImageIndicatorActions, handlers: [ + ['load', + function(){ + var fadein = this.config['current-image-indicator-fadein'] + this.ribbons.viewer.find('.current-marker') + .css({ + display: 'block', + opacity: 0, + }) + .delay(100) + .animate({ + opacity: 1 + }, fadein) + }], + // move marker to current image... ['focusImage.post', function(){ this.updateCurrentImageIndicator() }], - // prevent animations when focusing ribbons... - ['focusRibbon.pre', - function(){ - var m = this.ribbons.viewer.find('.current-marker') - this.ribbons.preventTransitions(m) - return function(){ - this.ribbons.restoreTransitions(m) - } - }], - // this is here to compensate for position change on ribbon - // resize... - // NOTE: hide/show of indicator on resize appears to have solved - // the jumpy animation issue. - // this might cause some blinking on slow resizes (visible - // only on next/prev screen)... - // ...still not sure why .preventTransitions(m) did not - // do the job. - ['resizeRibbon.pre', - function(target){ - var m = this.ribbons.viewer.find('.current-marker') - var c = this.current - var r = this.current_ribbon - - // only update if marker exists and we are in current ribbon... - if(m.length != 0 - // XXX not sure if target handling here is the - // right way to go -- we manually check things - // when .data.getImage(..) nad friends to this - // better and in one spot... - // ...the down side is that they are slower... - && (target == 'current' - || target == c - || target == r - // XXX this seems to be slow enough to push - // the frame-rate down... - || this.data.getRibbon(target) == r - || target == null)){ - m.hide() - - return function(){ - this.updateCurrentImageIndicator(target, false) - m - .show() - // NOTE: keeping display in inline style will - // prevent the element from being hidden - // by css... - .css({display: ''}) - } - } - }], // Change border size in the appropriate spot in the animation: // - before animation when scaling up @@ -364,25 +283,6 @@ module.CurrentImageIndicator = core.ImageGridFeatures.Feature({ function(){ this.updateCurrentImageIndicator(null, 'before') }], - ['shiftImageLeft.pre shiftImageRight.pre', - function(){ - this.ribbons.viewer.find('.current-marker').hide() - if(this._current_image_indicator_timeout != null){ - clearTimeout(this._current_image_indicator_timeout) - delete this._current_image_indicator_timeout - } - return function(){ - var ribbons = this.ribbons - var fadein = this.config['current-image-indicator-fadein'] - this._current_image_indicator_timeout = setTimeout(function(){ - var m = ribbons.viewer.find('.current-marker') - m.fadeIn(fadein, function(){ - m.css({display: ''}) - }) - }, this.config['current-image-shift-timeout']) - } - }], - // hide and remove current image indicator... // NOTE: it will be reconstructed on // next .focusImage(..) @@ -392,21 +292,19 @@ module.CurrentImageIndicator = core.ImageGridFeatures.Feature({ && clearTimeout(this.__current_image_indicator_restore_timeout) delete this.__current_image_indicator_restore_timeout - var m = this.ribbons.viewer + this.ribbons.viewer .find('.current-marker') - .velocity({opacity: 0}, { - duration: 100, - complete: function(){ - m.remove() - }, - }) - + .velocity({opacity: 0}, { duration: 100 }) }], ['ribbonPanning.post', function(){ var that = this this.__current_image_indicator_restore_timeout = setTimeout(function(){ that.updateCurrentImageIndicator() + + that.ribbons.viewer + .find('.current-marker') + .velocity({opacity: 1}, { duration: 100 }) }, this.config['current-image-indicator-restore-delay'] || 500) }], @@ -414,15 +312,13 @@ module.CurrentImageIndicator = core.ImageGridFeatures.Feature({ ['toggleSingleImage', function(){ if(this.toggleSingleImage('?') == 'off'){ - var m = this.ribbons.viewer.find('.current-marker') - m.hide() + this.ribbons.viewer.find('.current-marker') + .delay(150) + .animate({opacity: 1}, 100) - this.updateCurrentImageIndicator() - - m - .delay(150) - .fadeIn(200, function(){ - m.css({display: ''})}) + } else { + this.ribbons.viewer.find('.current-marker') + .css({ opacity: 0 }) } }], ], diff --git a/ui (gen4)/features/ui-partial-ribbons-vdom.js b/ui (gen4)/features/ui-partial-ribbons-vdom.js index b4c6c7fe..c546c2bd 100755 --- a/ui (gen4)/features/ui-partial-ribbons-vdom.js +++ b/ui (gen4)/features/ui-partial-ribbons-vdom.js @@ -44,6 +44,100 @@ var core = require('features/core') window.vdom = vdom +//--------------------------------------------------------------------- + +var Ribbons = { + //dom: null, + + // utils... + px2v: null, + px2vw: null, + px2vh: null, + px2vmin: null, + px2vmax: null, + preventTransitions: null, + restoreTransitions: null, + noTransitions: null, + noTransitionsDeep: null, + getElemGID: null, + setElemGID: null, + replaceGid: null, + + makeShadow: null, + + parent: null, + images: null, + + scale: null, + rotate: null, + + getVisibleImageSize: null, + getScreenWidthImages: null, + getScreenHeightRibbons: null, + + // element getters... + //getRibbonSet: null, + //getRibbonLocator: null, + //getImage: null, + //getImageMarks: null, + //getImageByPosition: null, + //getRibbon: null, + //getRibbonOrder: null, + + // XXX + addImageEventHandler: function(evt, handler){ + }, + addRibbonEventHandler: function(evt, handler){ + }, + + //placeRibbon: null, + //placeImage: null, + + updateImageIndicators: null, + _loadImagePreviewURL: null, + //load_img_sync: null, + updateImage: null, + + //updateRibbon: null, + //updateRibbonInPlace: null, + //resizeRibbon: null, + + //updateData: null, + + //clearEmptyRibbons: null, + + //focusImage: null, + + //setBaseRibbon: null, + + //toggleImageMark: null, + + //rotateImage: null, + //getImageRotation: null, + //rotateCW: null, + //rotateCCW: null, + //flipImage: null, + //getImageFlip: null, + //flipVertical: null, + //flipHorizontal: null, + + // XXX + _calcImageProportions: null, + correctImageProportionsForRotation: null, + + centerRibbon: null, + centerImage: null, + + fitImage: null, + fitRibbon: null, + + clear: null, + //clone: null, + + __init__: null, +} + + //--------------------------------------------------------------------- // hooks... @@ -92,7 +186,6 @@ var VirtualDOMRibbonsPrototype = { state: null, // constructors... - // XXX calculate top... makeView: function(state){ state = state || {} var that = this @@ -105,10 +198,6 @@ var VirtualDOMRibbonsPrototype = { || ig.screenwidth * (ig.config['ribbon-size-screens'] || 9) var s = state.scale = state.scale || ig.scale - var top = state.top = state.top - || this.state.top - // XXX do a real calculation... - || ig.ribbons.getRibbonLocator().transform('y') var data = ig.data var images = ig.images @@ -117,21 +206,21 @@ var VirtualDOMRibbonsPrototype = { .map(function(gid){ return that.makeRibbon(gid, target, count, state) }) - return vdom.h('div.ribbon-set', { - //key: 'ribbon-set', - style: { - transform: 'scale('+ s +', '+ s +')', - } - }, [ - vdom.h('div.ribbon-locator', { - //key: 'ribbon-locator', + return vdom.h('div.ribbon-set', + { + //key: 'ribbon-set', style: { - // XXX should this be in vh??? - transform: 'translate3d(0px, '+ top +'px, 0px)', - }, - }, - ribbons) - ]) + transform: 'scale('+ s +', '+ s +')', + } + }, [ + vdom.h('div.current-marker'), + // ribbon locator... + vdom.h('div.ribbon-locator', + { + //key: 'ribbon-locator', + }, + ribbons), + ]) }, // XXX setup handlers (???) // XXX current image marker (???) @@ -184,10 +273,6 @@ var VirtualDOMRibbonsPrototype = { .forEach(function(mark){ imgs.push(mark) }) }) - // continue offset calculation... - var l = gids.indexOf(ref) - var x = (-(l * vsize) - offset) - return vdom.h('div.ribbon'+base, { //key: 'ribbon-'+gid, @@ -197,20 +282,13 @@ var VirtualDOMRibbonsPrototype = { gid: JSON.stringify(gid) .replace(/^"(.*)"$/g, '$1'), }, - /*/ XXX - style: { - // XXX calling .centerImage(..) prevents this from updating... - transform: 'translate3d('+ x +'vmin, 0px, 0px)', - }, - //*/ }, imgs) }, // XXX setup image handlers... - // ...or move them up to viewer or some other spot (viewer?)... // XXX update image previews... - // XXX update image proportions for rotation... - makeImage: function(gid, size, state){ + // XXX update image proportions for rotated images... (???) + makeImage: function(gid, size){ var ig = this.imagegrid //size = this.state.tile_size = size size = size @@ -220,6 +298,7 @@ var VirtualDOMRibbonsPrototype = { var images = this.imagegrid.images || {} var current = data.current == gid ? '.current' : '' + // resolve group preview cover... var image = images[gid] || {} var seen = [] while(image.type == 'group'){ @@ -239,7 +318,7 @@ var VirtualDOMRibbonsPrototype = { // XXX BUG: // - setting this makes the images some times not change previews... // - removing this breaks .current class setting... - //key: 'image-'+gid, + key: 'image-'+gid, attributes: { gid: JSON.stringify(gid) @@ -247,19 +326,18 @@ var VirtualDOMRibbonsPrototype = { orientation: image.orientation, flipped: image.flipped, - //'preview-width': w, - //'preview-height': h, + // XXX preview size -- get this onload from image... + //'preview-width': .., + //'preview-height': .., }, style: { - //width: '', - //height: '', - //margin: '', - + // XXX need to update this onload if changing preview + // of same image... backgroundImage: 'url("'+ url +'")', } }) }, - // XXX STUB: make marks handling more extensible... (???) + // XXX STUB: make marks handling extensible... (???) makeImageMarks: function(gid){ var that = this var marks = [] @@ -273,20 +351,67 @@ var VirtualDOMRibbonsPrototype = { return marks .map(function(type){ - return that.makeImageMark(gid, type) }) - }, - makeImageMark: function(gid, type){ - return vdom.h('div.mark.'+(type || ''), { - key: 'mark-'+type+'-'+gid, - attributes: { - gid: JSON.stringify(gid) - .replace(/^"(.*)"$/g, '$1'), - }, - }) + return vdom.h('div.mark.'+(type || ''), { + key: 'mark-'+type+'-'+gid, + attributes: { + gid: JSON.stringify(gid) + .replace(/^"(.*)"$/g, '$1'), + }, + }) + }) }, // XXX add ability to hook in things like current image marker... + + // XXX these need .getImage(..) / .getRibbon(..) / .getRibbonLocator(..) + centerRibbon: function(target){ + var ribbon = this.getRibbon(target) + var locator = this.getRibbonLocator() + + if(locator.length != 0 && ribbon.length != 0){ + var t = ribbon[0].offsetTop + var h = ribbon[0].offsetHeight + + locator.transform({ x: 0, y: this.px2vh(-(t + h/2)) + 'vh', z: 0 }) + } + return this + }, + centerImage: function(target, mode){ + target = this.getImage(target) + var ribbon = this.getRibbon(target) + + if(ribbon.length != 0){ + var l = target[0].offsetLeft + var w = target[0].offsetWidth + + var image_offset = mode == 'before' ? 0 + : mode == 'after' ? w + : w/2 + + ribbon.transform({x: -this.px2vmin(l + image_offset) + 'vmin', y: 0, z: 0}) + } + return this + }, + + scale: function(scale){ + if(scale){ + this.state.scale = scale + this.sync() + + } else { + return this.imagegrid.scale + } + }, + + // XXX not sure how to proceed with these... + setImageHandler: function(evt, handler){ + }, + setRibbonHandler: function(evt, handler){ + }, + + + clear: function(){ delete this.state delete this.dom @@ -349,6 +474,7 @@ object.makeConstructor('VirtualDOMRibbons', /*********************************************************************/ // XXX TODO: +// - image size/proportions (single image view) // - shifting images/ribbons // - use .virtualdom.sync() + shadow animation instead of .ribbons.* // - would be nice to make this an alternative feature... @@ -444,17 +570,25 @@ module.PartialRibbons = core.ImageGridFeatures.Feature({ var img = this.ribbons.getImage(target) // in-place update... - // XXX this is very rigid, need to make this more - // flexible and not hinder fast nav... if(img.length > 0){ - setTimeout((function(){ - this.ribbons.preventTransitions() - this.updateRibbon(this.current) - this.ribbons.restoreTransitions() - }).bind(this), 200) + // XXX need to account for running out of images and + // not only on the current ribbon... + if(!this.__partial_ribbon_update){ + this.__partial_ribbon_update = setTimeout((function(){ + delete this.__partial_ribbon_update + this.ribbons.preventTransitions() + this.updateRibbon(this.current) + this.ribbons.restoreTransitions() + }).bind(this), 150) + } // long-jump... } else { + if(this.__partial_ribbon_update){ + clearTimeout(this.__partial_ribbon_update) + delete this.__partial_ribbon_update + } + this.updateRibbon(target) } }], diff --git a/ui (gen4)/features/ui.js b/ui (gen4)/features/ui.js index 11051470..3ac23b3f 100755 --- a/ui (gen4)/features/ui.js +++ b/ui (gen4)/features/ui.js @@ -491,12 +491,6 @@ module.ViewerActions = actions.Actions({ 'ribbon-image-separators', function(state){ this.config['ribbon-image-separators'] = state }) ], - /* - setEmptyMsg: ['- Interface/Set message to be displayed when nothing is loaded.', - function(msg, help){ this.ribbons - && this.ribbons.setEmptyMsg(msg, help) }], - */ - // align modes... // XXX these should also affect up/down navigation... @@ -698,13 +692,13 @@ module.ViewerActions = actions.Actions({ function(){ // NOTE: the 0.2 is added to compensate for alignment/scaling // errors -- 2.99 images wide counts as 3 while 2.5 as 2. - var w = Math.floor(this.ribbons.getScreenWidthImages() + 0.2) + var w = Math.floor(this.screenwidth + 0.2) w += (w % 2) - 1 this.prevImage(w) }], nextScreen: ['Navigate/Screen width forward', function(){ - var w = Math.floor(this.ribbons.getScreenWidthImages() + 0.2) + var w = Math.floor(this.screenwidth + 0.2) w += (w % 2) - 1 this.nextImage(w) }], diff --git a/ui (gen4)/imagegrid/ribbons.js b/ui (gen4)/imagegrid/ribbons.js index 58739627..dfff2fcb 100755 --- a/ui (gen4)/imagegrid/ribbons.js +++ b/ui (gen4)/imagegrid/ribbons.js @@ -287,7 +287,6 @@ var RibbonsClassPrototype = { return this.setElemGID($('
') .addClass(cls), gid) }, - } @@ -341,12 +340,10 @@ var RibbonsPrototype = { get parent(){ - return this.__parent - }, + return this.__parent }, // NOTE: this will reset locally referenced .images to .parent.images set parent(parent){ this.__parent = parent - delete this.__images }, @@ -355,8 +352,7 @@ var RibbonsPrototype = { // NOTE: images can be stored locally if no parent is set but will // get overridden as soon as .parent is set. get images(){ - return this.parent ? this.parent.images : this.__images - }, + return this.parent ? this.parent.images : this.__images }, set images(images){ if(this.parent){ this.parent.images = images @@ -2564,13 +2560,7 @@ var RibbonsPrototype = { var t = ribbon[0].offsetTop var h = ribbon[0].offsetHeight - //locator.css('transform', 'translateY(-'+ (t + h/2) +'px)') - //locator.transform({x: 0, y: -(t + h/2), z: 0}) - locator.transform({ - x: 0, - y: this.px2vh(-(t + h/2)) + 'vh', - z: 0, - }) + locator.transform({ x: 0, y: this.px2vh(-(t + h/2)) + 'vh', z: 0 }) return this }, @@ -2601,21 +2591,12 @@ var RibbonsPrototype = { var l = target[0].offsetLeft var w = target[0].offsetWidth - //var w = this.getVisibleImageSize('width', 1, target) - var image_offset = mode == 'before' ? 0 : mode == 'after' ? w : w/2 - // relative offset to vmin... - var x = -this.px2vmin(l + image_offset) + 'vmin' - - // absolute offset... - //var x = -(l + image_offset) - - //ribbon.css('transform', 'translateX(-'+ (l + image_offset) +'px)') - ribbon.transform({x: x, y: 0, z: 0}) + ribbon.transform({x: -this.px2vmin(l + image_offset) + 'vmin', y: 0, z: 0}) return this }, @@ -2680,16 +2661,6 @@ var RibbonsPrototype = { return this }, - - - // XXX - setEmptyMsg: function(msg, help){ - this.getRibbonSet() - .attr({ - 'empty-msg': msg || '', - 'empty-help': help || '', - }) - }, }