diff --git a/ui (gen4)/css/layout.css b/ui (gen4)/css/layout.css index 2efe5c95..f19f876c 100644 --- a/ui (gen4)/css/layout.css +++ b/ui (gen4)/css/layout.css @@ -237,6 +237,7 @@ button:hover { /********************************************************** Ribbon ***/ /* XXX for some reason setting image size in vmin stops this from stretching in width... */ +.shadow, .ribbon { position: relative; display: block; @@ -290,11 +291,13 @@ stretching in width... */ border: solid 5px red; } */ +/* NOTE: this is essentially a ribbon... */ .shadow { position: absolute; overflow: visible; width: auto; height: auto; + margin: 0px; background: black; -webkit-transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in; diff --git a/ui (gen4)/css/layout.less b/ui (gen4)/css/layout.less index 964c5840..e47406a1 100755 --- a/ui (gen4)/css/layout.less +++ b/ui (gen4)/css/layout.less @@ -361,6 +361,7 @@ button:hover { /********************************************************** Ribbon ***/ /* XXX for some reason setting image size in vmin stops this from stretching in width... */ +.shadow, .ribbon { position: relative; display: block; diff --git a/ui (gen4)/ribbons.js b/ui (gen4)/ribbons.js index f05de727..111d3f3f 100755 --- a/ui (gen4)/ribbons.js +++ b/ui (gen4)/ribbons.js @@ -66,6 +66,12 @@ module.RibbonsClassPrototype = { getElemGID: function(elem){ return JSON.parse('"' + elem.attr('gid') + '"') }, + setElemGID: function(elem, gid){ + return $(elem) + .attr('gid', JSON.stringify(gid) + // this removes the extra quots... + .replace(/^"(.*)"$/g, '$1')) + }, // DOM Constructors... // NOTE: these will return unattached objects... @@ -78,34 +84,27 @@ module.RibbonsClassPrototype = { // XXX NOTE: quots removal might render this incompatible with older data formats... createRibbon: function(gids){ gids = gids.constructor !== Array ? [gids] : gids + var that = this return $(gids.map(function(gid){ gid = gid != null ? gid+'' : gid - return $('
') - .addClass('ribbon') - .attr('gid', JSON.stringify(gid) - // this removes the extra quots... - .replace(/^"(.*)"$/g, '$1'))[0] + return that.setElemGID($('
') + .addClass('ribbon'), gid)[0] })) }, // XXX NOTE: quots removal might render this incompatible with older data formats... createImage: function(gids){ gids = gids.constructor !== Array ? [gids] : gids + var that = this return $(gids.map(function(gid){ gid = gid != null ? gid+'' : gid - return $('
') - .addClass('image') - .attr('gid', JSON.stringify(gid) - // this removes the extra quots... - .replace(/^"(.*)"$/g, '$1'))[0] + return that.setElemGID($('
') + .addClass('image'), gid)[0] })) }, createMark: function(cls, gid){ gid = gid != null ? gid+'' : gid - return $('
') - .addClass(cls) - .attr('gid', JSON.stringify(gid) - // this removes the extra quots... - .replace(/^"(.*)"$/g, '$1')) + return this.setElemGID($('
') + .addClass(cls), gid) }, } @@ -128,6 +127,7 @@ module.RibbonsPrototype = { // Generic getters... getElemGID: RibbonsClassPrototype.getElemGID, + setElemGID: RibbonsClassPrototype.setElemGID, // Helpers... @@ -435,7 +435,7 @@ module.RibbonsPrototype = { // ...we need to scale it to the current scale... var shadow = setElementScale( $('
') - .addClass('shadow ribbon') + .addClass('shadow') .attr({ gid: gid, ticket: ticket, @@ -1051,7 +1051,6 @@ module.RibbonsPrototype = { } var loaded = r.find('.image') - var unload = $() // compensate for new/removed images... if(reference != null){ @@ -1073,16 +1072,18 @@ module.RibbonsPrototype = { } // remove all images that we do not need... + var unloaded = $() loaded = loaded .filter(function(i, img){ if(gids.indexOf(that.getElemGID($(img))) >= 0){ return true } - unload.push(img) + unloaded.push(img) return false }) // remove everything in one go... - unload.remove() + unloaded.detach() + unloaded = unloaded.toArray() $(gids).each(function(i, gid){ // support for sparse ribbons... @@ -1090,9 +1091,16 @@ module.RibbonsPrototype = { return } // get/create image... - // XXX this may affect other ribbons... + // NOTE: as this will get a loaded image if it's loaded in + // a different ribbon this WILL affect that ribbon... var img = that.getImage(gid) - img = img.length == 0 ? that.createImage(gid) : img + if(img.length == 0){ + img = unloaded.length > 0 + // reuse an image we just detached... + ? that.setElemGID(unloaded.pop(), gid) + // create a new image... + : that.createImage(gid) + } // see of we are loaded in the right position... var g = loaded.length > i ? that.getElemGID(loaded.eq(i)) : null diff --git a/ui (gen4)/viewer.js b/ui (gen4)/viewer.js index 49a8a583..3d41a0e2 100755 --- a/ui (gen4)/viewer.js +++ b/ui (gen4)/viewer.js @@ -126,7 +126,7 @@ actions.Actions({ // NOTE: the setters in the following use the appropriate actions // so to avoid recursion do not use these in the specific // actions... - + // Base ribbon... get base(){ return this.data == null ? null : this.data.base @@ -520,6 +520,19 @@ var Viewer = module.Viewer = actions.Actions(Client, { + // Images... + /* + get images(){ + return this.ribbons != null ? this.ribbons.images : null + }, + // NOTE: if ribbons are null this will have no effect... + set images(value){ + if(this.ribbons != null){ + this.ribbons.images = value + } + }, + */ + get screenwidth(){ return this.ribbons != null ? this.ribbons.getScreenWidthImages() : null }, @@ -580,11 +593,10 @@ actions.Actions(Client, { : viewer if(this.ribbons == null){ - this.ribbons = ribbons.Ribbons(viewer, data.images) + this.ribbons = ribbons.Ribbons(viewer, this.images) } else { this.ribbons.clear() - // XXX this.ribbons.images = this.images } @@ -667,7 +679,7 @@ actions.Actions(Client, { that.centerImage(t, 'after') } } - //}, 0) + //}, 10) }], // XXX these should also affect up/down navigation... // ...navigate by proximity (closest to center) rather than by