From 828e13d9d18a5e92981063a3ef738b679f0a4feb Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Mon, 19 Dec 2016 19:34:38 +0300 Subject: [PATCH] added image separators in ribbons + some refactoring... Signed-off-by: Alex A. Naanou --- ui (gen4)/css/layout.less | 19 +++++++ ui (gen4)/features/ui-chrome.js | 14 ++++-- ui (gen4)/features/ui.js | 9 ++++ ui (gen4)/imagegrid/ribbons.js | 89 +++++++++++++++++++++------------ 4 files changed, 97 insertions(+), 34 deletions(-) diff --git a/ui (gen4)/css/layout.less b/ui (gen4)/css/layout.less index 2d7d0772..ac8cd4d1 100755 --- a/ui (gen4)/css/layout.less +++ b/ui (gen4)/css/layout.less @@ -791,6 +791,25 @@ stretching in width... */ } + +/* image separators... */ +.ribbon-image-separators.viewer .image { + box-shadow: + 9px 4px 0 -8px rgba(128,128,128,0.2), + -9px 4px 0 -8px rgba(128,128,128,0.2); +} +.ribbon-image-separators.viewer .image[orientation="90"], +.ribbon-image-separators.viewer .image[orientation="270"] { + box-shadow: + 4px 9px 0 -8px rgba(128,128,128,0.2), + 4px -9px 0 -8px rgba(128,128,128,0.2); +} +.ribbon-image-separators.single-image-mode.viewer .image { + box-shadow: none; +} + + + /* default backgrounds */ /* XXX not sure if we need these... .image { diff --git a/ui (gen4)/features/ui-chrome.js b/ui (gen4)/features/ui-chrome.js index 6c2345c0..9dc697c4 100755 --- a/ui (gen4)/features/ui-chrome.js +++ b/ui (gen4)/features/ui-chrome.js @@ -175,7 +175,7 @@ var CurrentImageIndicatorActions = actions.Actions({ var cur = this.ribbons.getImage(target) // NOTE: cur may be unloaded... - var ribbon = this.ribbons.getRibbon(cur.length > 0 ? target : this.currentRibbon) + var ribbon = this.ribbons.getRibbon(cur.length > 0 ? target : this.current_ribbon) var marker = ribbon.find('.current-marker') @@ -310,12 +310,20 @@ module.CurrentImageIndicator = core.ImageGridFeatures.Feature({ function(target, s){ var m = this.ribbons.viewer.find('.current-marker') var c = this.current - var r = this.currentRibbon + var r = this.current_ribbon // only update if marker exists and we are in current ribbon... if(m.length != 0 - && (target == c + // 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() diff --git a/ui (gen4)/features/ui.js b/ui (gen4)/features/ui.js index 045b4ef5..c0621c4f 100755 --- a/ui (gen4)/features/ui.js +++ b/ui (gen4)/features/ui.js @@ -176,6 +176,8 @@ module.ViewerActions = actions.Actions({ 'transparent-ribbon', ], + 'ribbon-image-separators': 'on', + 'ribbon-rotation-step': 10, // XXX BUG: for some reason this get's shadowed by base.config... @@ -404,6 +406,11 @@ module.ViewerActions = actions.Actions({ function(){ return this.ribbons.viewer }, function(){ return this.config['ribbon-themes'] }, function(state){ this.config['ribbon-theme'] = state }) ], + toggleRibbonImageSepators: ['Interface/Theme/Toggle ribbon image separators', + toggler.CSSClassToggler( + function(){ return this.ribbons.viewer }, + 'ribbon-image-separators', + function(state){ this.config['ribbon-image-separators'] = state }) ], /* @@ -1003,6 +1010,8 @@ module.Viewer = core.ImageGridFeatures.Feature({ && this.toggleTheme(this.config.theme) this.config['ribbon-theme'] && this.toggleRibbonTheme(this.config['ribbon-theme']) + this.config['ribbon-image-separators'] + && this.toggleRibbonImageSepators(this.config['ribbon-image-separators']) // center viewer on resize events... if(!this.__viewer_resize){ diff --git a/ui (gen4)/imagegrid/ribbons.js b/ui (gen4)/imagegrid/ribbons.js index bd50cfd2..68be1767 100755 --- a/ui (gen4)/imagegrid/ribbons.js +++ b/ui (gen4)/imagegrid/ribbons.js @@ -576,40 +576,57 @@ var RibbonsPrototype = { // // XXX this might break when no images are loaded and proportions // are not square... - getVisibleImageSize: function(dim, scale, img){ + getVisibleImageSize: function(dim, scale, img, force){ dim = dim == null ? 'width' : dim img = img || this.viewer.find(IMAGE) - // if no images are loaded create one temporarily.... var tmp - if(img.length == 0){ - img = tmp = this.createImage('__tmp_image__') - .css({ - position: 'absolute', - visibility: 'hidden', - top: '-200%', - left: '-200%', - }) - .appendTo(this.viewer) - } - // account for image rotation... - // NOTE: this way we do not need to account for margins... - var o = img.attr('orientation') - o = o == null ? 0 : o - dim = o == 0 || o == 180 ? dim - // swap width/height when image is rotated +/- 90deg... - : dim == 'height' ? 'width' - : 'height' +// // XXX size cache -- not sure if this needs to be cached... +// var res = (this.__visible_image_size_cache || {})[dim] +// +// if(this.__visible_image_size_cache == false +// || img.length > 0 +// || force +// || res == null){ + + // if no images are loaded create one temporarily.... + if(img.length == 0){ + img = tmp = this.createImage('__tmp_image__') + .css({ + position: 'absolute', + visibility: 'hidden', + top: '-200%', + left: '-200%', + }) + .appendTo(this.viewer) + } + + // account for image rotation... + // NOTE: this way we do not need to account for margins... + var o = img.attr('orientation') + o = o == null ? 0 : o + dim = o == 0 || o == 180 ? dim + // swap width/height when image is rotated +/- 90deg... + : dim == 'height' ? 'width' + : 'height' + + // do the calc... + scale = scale || this.scale() + var css = getComputedStyle(img[0]) + var res = dim == 'height' ? parseFloat(css.height) + : dim == 'width' ? parseFloat(css.width) + : dim == 'max' ? Math.max(parseFloat(css.height), parseFloat(css.width)) + : dim == 'min' ? Math.min(parseFloat(css.height), parseFloat(css.width)) + : null + +// // XXX size cache -- not sure if this needs to be cached... +// if(this.__visible_image_size_cache != false){ +// var cache = this.__visible_image_size_cache = this.__visible_image_size_cache || {} +// cache[dim] = res +// } +// } - // do the calc... - scale = scale || this.scale() - var css = getComputedStyle(img[0]) - var res = dim == 'height' ? parseFloat(css.height) - : dim == 'width' ? parseFloat(css.width) - : dim == 'max' ? Math.max(parseFloat(css.height), parseFloat(css.width)) - : dim == 'min' ? Math.min(parseFloat(css.height), parseFloat(css.width)) - : null // get size for given scale... res = res ? res * scale : res @@ -1385,7 +1402,7 @@ var RibbonsPrototype = { }) } - // if not images data defined drop out... + // if no images data defined drop out... if(that.images == null){ return image[0] } @@ -1447,7 +1464,11 @@ var RibbonsPrototype = { } // NOTE: this only has effect on non-square image blocks... - // XXX this needs the loaded image, thus should be done right after preview loading... + // XXX this needs the loaded image, thus should be done right + // after preview loading... + // XXX preview loading is async, is this the right + // place for this?? + // ...this is also done in .rotateImage(..) above... that.correctImageProportionsForRotation(image) // marks and other indicators... @@ -1548,6 +1569,7 @@ var RibbonsPrototype = { $(unload_marks) .remove() + var images = [] $(gids).each(function(i, gid){ // support for sparse ribbons... if(gid == null){ @@ -1590,9 +1612,12 @@ var RibbonsPrototype = { } } - that.updateImage(img) + images.push(img[0]) }) + // XXX this appears to be the bottleneck on large numbers of images... + this.updateImage($(images)) + if(place){ this.placeRibbon(r, this.viewer.find(RIBBON).length) } @@ -2199,6 +2224,8 @@ var RibbonsPrototype = { // // NOTE: this is not needed for square image blocks. // NOTE: if an image block is square, this will remove the margins. + // + // XXX this does the same job as features/ui-single-image.js' .updateImageProportions(..) correctImageProportionsForRotation: function(images){ // XXX var W = this.viewer.innerWidth()