diff --git a/ui (gen4)/css/experimenting.css b/ui (gen4)/css/experimenting.css index ccd10dfc..800f35ed 100755 --- a/ui (gen4)/css/experimenting.css +++ b/ui (gen4)/css/experimenting.css @@ -63,6 +63,13 @@ body { -o-transition: all 0.1s linear, transform 0.1s linear; transition: all 0.1s linear, transform 0.1s linear; } +.viewer:not(.no-transitions) .ribbon-locator:not(.no-transitions) { + -webkit-transition: all 0.1s linear, transform 0.1s linear; + -moz-transition: all 0.1s linear, transform 0.1s linear; + -ms-transition: all 0.1s linear, transform 0.1s linear; + -o-transition: all 0.1s linear, transform 0.1s linear; + transition: all 0.1s linear, transform 0.1s linear; +} .viewer:not(.no-transitions) .ribbon:not(.no-transitions) { -webkit-transition: all 0.1s ease-out; diff --git a/ui (gen4)/css/layout.less b/ui (gen4)/css/layout.less index de5da218..d4a5ad5d 100755 --- a/ui (gen4)/css/layout.less +++ b/ui (gen4)/css/layout.less @@ -522,69 +522,25 @@ button:hover { } -/****************************************************** Ribbon set ***/ +/****************************************** Ribbon set and locator ***/ .ribbon-set { position: absolute; display: block; + top: 50%; + left: 50%; + /* NOTE: this needs for scaling/zooming to behave correctly and not shift the element, when its dimensions change... ...this is because .ribbon-set will both be used for scaling and aligning... */ .origin(top, left); } +.ribbon-locator { + position: relative; -/* empty ribbon set... */ -.ribbon-set:empty { - width: 100% !important; - height: 100% !important; - - // place at top left corner... - top: 0px !important; - left: 0px !important; - - -webkit-transform: none !important; - -moz-transform: none !important; - -o-transform: none !important; - -ms-transform: none !important; - transform: none !important; -} -.viewer:empty:before, -.viewer:empty:after, -.ribbon-set:empty:before, -.ribbon-set:empty:after { - display: block; - position: absolute; - - //content: "Nothing loaded..."; - content: attr(empty-msg); - - top: 50%; - left: 0px; - width: 100%; - height: 20px; - margin-top: -20px; - - text-align: center; - vertical-align: middle; - - font-size: 18px; - font-weight: bold; - color: silver; - opacity: 0.9; - - cursor: pointer; -} -.viewer:empty:after, -.ribbon-set:empty:after { - - //content: "Press 'O' to load, 'F1' for help or '?' for keyboard mappings."; - content: attr(empty-help); - - margin-top: 5px; - font-weight: normal; - font-size: 16px; - opacity: 0.5; + top: 0; + left: 0; } @@ -617,10 +573,10 @@ stretching in width... */ display: none; } .ribbon:first-child { - margin-top: 0px; + margin-top: 0; } .ribbon:last-child { - margin-bottom: 0px; + margin-bottom: 0; } .base-ribbon-marker { diff --git a/ui (gen4)/experiments/centering-and-alignment.html b/ui (gen4)/experiments/centering-and-alignment.html index 3755ed70..d5932470 100755 --- a/ui (gen4)/experiments/centering-and-alignment.html +++ b/ui (gen4)/experiments/centering-and-alignment.html @@ -49,7 +49,7 @@ transition: transform 0.1s linear; } -.ribbon-mover { +.ribbon-locator { position: relative; top: 0px; @@ -150,8 +150,8 @@ $(function(){ var image = $(this) var ribbon = image.parents('.ribbon').first() - var ribbon_mover = ribbon.parents('.ribbon-mover').first() - var ribbon_set = ribbon_mover.parents('.ribbon-set').first() + var ribbon_locator = ribbon.parents('.ribbon-locator').first() + var ribbon_set = ribbon_locator.parents('.ribbon-set').first() image .addClass('current') @@ -160,15 +160,21 @@ $(function(){ var angle = ribbon_set.attr('angle') || 0 var l = image[0].offsetLeft - var t = ribbon[0].offsetTop var w = image[0].offsetWidth + + var t = ribbon[0].offsetTop var h = ribbon[0].offsetHeight + // centering image... ribbon.css('transform', 'translateX(-'+ (l + w/2) +'px)') + + // view angle and scale... ribbon_set.css('transform', 'scale('+ scale +') ' +'rotate('+ angle +'deg)') - ribbon_mover.css('transform', 'translateY(-'+ (t + h/2) +'px)') + + // centering ribbons... + ribbon_locator.css('transform', 'translateY(-'+ (t + h/2) +'px)') }) @@ -279,7 +285,7 @@ $(function(){
-
+
diff --git a/ui (gen4)/features/ui.js b/ui (gen4)/features/ui.js index c44cb36c..6c48870f 100755 --- a/ui (gen4)/features/ui.js +++ b/ui (gen4)/features/ui.js @@ -547,8 +547,6 @@ module.ViewerActions = actions.Actions({ this .centerImage(target) .centerRibbon(target) - .ribbons - .origin(target) }], focusImage: [ @@ -769,8 +767,6 @@ module.ViewerActions = actions.Actions({ // and rounding to nearest discrete number of images to fit on screen. zoomIn: ['Zoom/Zoom in', function(){ - this.ribbons.origin() - var d = (this.config['zoom-step'] || 1.2) // limit scaling to screen dimensions... @@ -784,8 +780,6 @@ module.ViewerActions = actions.Actions({ }], zoomOut: ['Zoom/Zoom out', function(){ - this.ribbons.origin() - var max = this.config['max-screen-images'] if(max && max < (this.screenwidth * (this.config['zoom-step'] || 1.2))){ diff --git a/ui (gen4)/imagegrid/ribbons.js b/ui (gen4)/imagegrid/ribbons.js index b9bdf5e5..8a4ea48a 100755 --- a/ui (gen4)/imagegrid/ribbons.js +++ b/ui (gen4)/imagegrid/ribbons.js @@ -493,146 +493,27 @@ var RibbonsPrototype = { // // Set scale... // .scale() - // .scale(, |'current'|'closest') - // .scale(, 'top'|'center'|'bottom'||%, 'left'|'center'|'right'||%) // -> // // NOTE: this will also set origin... // // XXX if chrome 38 renders images blurry uncomment the fix... - scale: function(scale, t, l){ + scale: function(scale){ // get... if(arguments.length == 0){ return this.dom.getScale(this.getRibbonSet()) || 1 + } // set... - } else { - var ribbon_set = this.getRibbonSet() - - if(ribbon_set.length == 0){ - return this - } - - // default origin -- center... - if(t == null && l == null){ - this.origin('center', 'center') - - // an image... - } else if(l == null){ - t = t == 'current' ? this.getImage() - : t == 'closest' ? this.getImageByPosition() - : t - this.origin(t) - - // explicit... - } else { - this.origin(t, l) - } - - // XXX experimental: not sure if this is the right place for this... - // ...think this is a good place because its one spot - // that gets used everywhere... - // ...think this is a bad spot because we lose control ho many - // images of what size get loaded, and wee need to minimize - // loading... - //this.updateImage('*', null, this.getVisibleImageSize('height', 1) * scale) - - this.dom.setScale(ribbon_set, scale) - - - /* - ribbon_set - .velocity('stop') - // XXX get the time from config... - .velocity({scale: scale}, 200) - */ - - /* XXX not sure if this is needed yet... - // XXX fix a render bug in chrome 38... - var v = this.viewer[0] - if(v.style.transform == ''){ - v.style.transform = 'translateZ(0)' - } else { - v.style.transform = '' - } - */ + var ribbon_set = this.getRibbonSet() + if(ribbon_set.length == 0){ return this } - }, - - // Origin... - // - // Get origin... - // .origin() - // -> - // - // Set origin to center of image: - // .origin(image) - // -> ribbons - // - // Set origin to screen coordinates: - // .origin(x|%|'left'|'center'|'right', x|%|'top'|'center'|'bottom') - // -> ribbons - // - // NOTE: this will also compensate for scaling. - // - // XXX DEBUG: remove point updating when not needed... - origin: function(a, b){ - // get... - if(arguments.length == 0){ - return this.dom.getOrigin(this.getRibbonSet()) - // set... - } else { - var ribbon_set = this.getRibbonSet() + this.dom.setScale(ribbon_set, scale) - if(ribbon_set.length == 0){ - return this - } - - var ro = ribbon_set.offset() - var s = this.scale() - - if(a != null && b != null){ - var vo = this.viewer.offset() - - a = a == 'left' ? 0 - : a == 'right' ? this.viewer.width() - : a == 'center' ? this.viewer.width()/2 - : /[0-9.]*%/.test(a) ? this.viewer.width()*(parseFloat(a)/100) - : a - - b = b == 'top' ? 0 - : b == 'bottom' ? this.viewer.height() - : b == 'center' ? this.viewer.height()/2 - : /[0-9.]*%/.test(b) ? this.viewer.height()*(parseFloat(b)/100) - : b - - var l = (a - ro.left)/s + vo.left - var t = (b - ro.top)/s + vo.top - - // image... - } else { - var img = this.getImage(a) - var io = img.offset() - // XXX jQuery3: should we compensate for scale here??? - var w = img.width() - var h = img.height() - - var l = (io.left - ro.left)/s + w/2 - var t = (io.top - ro.top)/s + h/2 - } - - this.dom.shiftOrigin(ribbon_set, l, t) - - // XXX DEBUG: remove when done... - if($('.point').length > 0){ - this.dom.setOffset($('.point'), l, t) - } - - return this - } + return this }, // Get visible image tile size... @@ -868,10 +749,16 @@ var RibbonsPrototype = { if(ribbon_set.length == 0 && create){ ribbon_set = $('
') .addClass('ribbon-set') + .append($('
') + .addClass('ribbon-locator')) .appendTo(this.viewer) } return ribbon_set }, + getRibbonLocator: function(create){ + return this.getRibbonSet(create) + .find('.ribbon-locator') + }, // Get image... // @@ -1196,7 +1083,7 @@ var RibbonsPrototype = { var ribbon = this.getRibbon(target) var i = this.getRibbonOrder(ribbon) ribbon = ribbon.length == 0 ? this.createRibbon(target) : ribbon - var ribbon_set = this.getRibbonSet(true) + var ribbon_set = this.getRibbonLocator(true) var ribbons = this.viewer.find(RIBBON) @@ -2299,83 +2186,46 @@ var RibbonsPrototype = { // center a ribbon vertically... // - // XXX offset and scale are not used... // XXX custom align point woud also be nice... // (top, bottom, center, %, px) - // XXX need to account for margins... - centerRibbon: function(target, offset, scale){ - target = this.getImage(target) - scale = scale || this.scale() - var ribbon_set = this.getRibbonSet() + centerRibbon: function(target){ + var ribbon = this.getRibbon(target) + var locator = this.getRibbonLocator() - if(ribbon_set.length == 0 || target.length == 0){ + if(locator.length == 0 || ribbon.length == 0){ return this } - //this.origin(target) - - var o = target.attr('orientation') - o = o == null ? 0 : o + var t = ribbon[0].offsetTop + var h = ribbon[0].offsetHeight - var ro = ribbon_set.offset().top - // NOTE: this appears to account for margins... - var io = target.offset().top - - // NOTE: we are not using .outerHeight(true) here as it returns - // the visible size rather than the real size, so we'll - // need to first divide by current scale and then multiply - // by the given scale which will introduce errors... - var s = getComputedStyle(target[0]) - var h = parseFloat(o == 0 || o == 180 ? s.height : s.width) - - var t = (io - ro)/scale + h/2 - - var offset = this.dom.relativeOffset(this.viewer, ribbon_set, { - top: t, - left: 0, - }).top - - this.dom.setOffset(ribbon_set, 0, offset) + //locator.css('transform', 'translateY(-'+ (t + h/2) +'px)') + locator.transform({x: 0, y: -(t + h/2), z: 0}) return this }, // center an image horizontally... // - // XXX offset is not used... // XXX custom align point would also be nice... // (top, bottom, center, %, px) - // XXX need to account for margins... - centerImage: function(target, mode, offset, scale){ + centerImage: function(target, mode){ target = this.getImage(target) - scale = scale || this.scale() var ribbon = this.getRibbon(target) if(ribbon.length == 0){ return this } - var o = target.attr('orientation') - o = o == null ? 0 : o + var l = target[0].offsetLeft + var w = target[0].offsetWidth - var rl = ribbon.offset().left - // NOTE: this appears to account for margins... - var il = target.offset().left + var image_offset = mode == 'before' ? 0 + : mode == 'after' ? w + : w/2 - var W = this.viewer.width() * scale - - // NOTE: we are not using .outerWidth(true) here as it returns - // the visible size rather than the real size, so we'll - // need to first divide by current scale and then multiply - // by the given scale which will introduce errors... - var s = getComputedStyle(target[0]) - var w = parseFloat(o == 0 || o == 180 ? s.width : s.height) * scale - - var image_offset = mode == 'before' ? w/2 - : mode == 'after' ? -w/2 - : 0 - - this.dom.setOffset(ribbon, ((rl + ((W-w)/2 + image_offset) - il) / scale)) + //ribbon.css('transform', 'translateX(-'+ (l + image_offset) +'px)') + ribbon.transform({x: -(l + image_offset), y: 0, z: 0}) return this }, @@ -2384,7 +2234,7 @@ var RibbonsPrototype = { // // If n is given this will fit n images (default: 1) // - // NOTE: this will never scale the view in a wat that an image + // NOTE: this will never scale the view in a way that an image // overflows either in height nor width. // // XXX might be useful to set origin before scaling... @@ -2442,6 +2292,7 @@ var RibbonsPrototype = { }, + // XXX setEmptyMsg: function(msg, help){ this.getRibbonSet() .attr({