diff --git a/ui (gen4)/lib/jli.js b/ui (gen4)/lib/jli.js index d2812a69..74e9c4a9 100755 --- a/ui (gen4)/lib/jli.js +++ b/ui (gen4)/lib/jli.js @@ -529,9 +529,9 @@ function setElementOriginSync(elem, x, y, z){ // this is like setElementOrigin(..) but will compensate for element // shift when scaled... // NOTE: this will work only of translate is used for positioning... -function shiftOriginTo(elem, l, t){ +function shiftOriginTo(elem, l, t, scale){ var o = getElementOrigin(elem) - var scale = getElementScale(elem) + var scale = scale || getElementScale(elem) var offset = getElementOffset(elem) // calculate the offset change and compensate... diff --git a/ui (gen4)/lib/util.js b/ui (gen4)/lib/util.js index ca4695a8..6a0529fd 100755 --- a/ui (gen4)/lib/util.js +++ b/ui (gen4)/lib/util.js @@ -347,6 +347,14 @@ var transformEditor = function(){ var aliases = Object.keys(spec) + var r = reduce == 'sum' ? function(a, b){ return a + b } + : reduce == 'mul' ? function(a, b){ return a * b } + : reduce == 'last' ? function(a, b){ return b != null ? b : a } + : reduce + var n = reduce == 'sum' ? 0 + : reduce == 'mul' ? 1 + : 0 + return aliases.map(function(k, j){ var i = spec[k] @@ -373,10 +381,21 @@ var transformEditor = function(){ return res != null ? res[i] : res }) .filter(function(e){ return e != null }) + .reduce(r, n) + // XXX for some magical reason this breaks if... + // t = transformEditor($('.ribbon-set')) + // t.x() // works ok + // var x = t.data + // t.x() // now this breaks because reduce is 0... + /* .reduce(reduce == 'sum' ? function(a, b){ return a + b } - : reduce == 'mul' ? function(a, b){ return a * b } - : reduce == 'last' ? function(a, b){ return b != null ? b : a } - : reduce) + : reduce == 'mul' ? function(a, b){ return a * b } + : reduce == 'last' ? function(a, b){ return b != null ? b : a } + : reduce, + reduce == 'mul' ? 1 + : reduce = 'sum'? 0 + : 0) + */ } // setup the aliases... @@ -471,8 +490,8 @@ var transformEditor = function(){ func('skew', ['', ''], 0) func('skewX', [''], 0) func('skewY', [''], 0) - alias({skewX: 0, skew: 0}) - alias({skewY: 0, skew: 1}) + alias({skewX: 0, skew: 0}, 'sum') + alias({skewY: 0, skew: 1}, 'sum') func('perspective') diff --git a/ui (gen4)/ribbons.js b/ui (gen4)/ribbons.js index c888c522..1e47dbd9 100755 --- a/ui (gen4)/ribbons.js +++ b/ui (gen4)/ribbons.js @@ -62,45 +62,154 @@ var RIBBON = '.ribbon:not(.clone)' // // XXX need to replace soemlegacy CSS API and make this compatible with // modern libs like velocity.js... -if(false){ // XXX still problems with translate... -// - jli.getElementOrigin(..) - getElementOrigin = function(elem){ - var o = $(elem).origin() || [0, 0] - return { left: o[0], top: o[1], } - } -// .transform('origin') -// -// - jli.getElementScale(..) - getElementScale = function(elem){ return $(elem).scale() } -// // - jli.getRelativeOffset(..) - getElementOffset = function(elem){ - var o = $(elem).transform('x', 'y') - return { left: o.x, top: o.y, } - } -// -// - jli.setElementOffset(..) -// // XXX still does not work for some reason... - setElementOffset = function(elem, l, t){ - //return $(elem).velocity({translateX: l, translateY: t}) - return $(elem).transform({x: l || 0, y: t || 0, z: 0}) - } -// +// - jli.getElementOrigin(..) +// - jli.getElementScale(..) // - jli.setElementScale(..) - setElementScale = function(elem, scale){ - //return $(elem).velocity({scale: scale || 1}, 150) - return $(elem).scale(scale || 1) - } -// +// - jli.setElementOffset(..) // - jli.shiftOriginTo(..) -// XXX this sets origin and compensates for offsets... -// ...to make shifting origin not affect element visual position... -// -} // XXX think if a way to manage animation timings... // // // +/*********************************************************************/ +// Low Level dom access... +// +// XXX not sure if this is the right way to go... + +var legacyDOMAdapter = { + getOrigin: getElementOrigin, + // XXX this is not used here... + setOrigin: setElementOrigin, + + getScale: getElementScale, + setScale: setElementScale, + + getOffset: getElementOffset, + setOffset: setElementOffset, + + // a bit higher level... + shiftOrigin: shiftOriginTo, + relativeOffset: getRelativeOffset, +} + + + +// XXX BUG: ... +// to reproduce: +// - .focusImage('j') +// - .toggleSingleImage('on') +// the image disappears... +var DOMAdapter = { + getOrigin: function(elem){ + var o = $(elem).origin() || [0, 0] + return { left: o[0], top: o[1], } + }, + setOrigin: function(elem, left, top){ + return $(elem).origin(left, top, 0) + }, + setOriginSync: function(elem, x, y, z){ + x = x == null ? '50%' : x + y = y == null ? '50%' : y + z = z == null ? '0' : z + var value = x +' '+ y +' '+ z + + elem = $(elem) + var e = elem[0] + + e.style.display = 'none' + // now kick the browser into recognition of our changes NOW ;) + getComputedStyle(e).display + + e.style['-o-transform-origin'] = value + e.style['-ms-transform-origin'] = value + e.style['-moz-transform-origin'] = value + e.style['-webkit-transform-origin'] = value + e.style['transform-origin'] = value + + e.style.display = '' + getComputedStyle(e).display + + return $(elem) + }, + + getScale: function(elem){ + return $(elem).scale() || 1 }, + setScale: function(elem, scale){ + return $(elem).scale(scale || 1) }, + + getOffset: function(elem){ + var o = $(elem).transform('x', 'y') + return { left: o.x, top: o.y, } + }, + setOffset: function(elem, left, top){ + return $(elem).transform({x: left || 0, y: top || 0, z: 0}) + }, + + shiftOrigin: function(elem, left, top, scale){ + var o = this.getOrigin(elem) + var scale = scale || this.getScale(elem) + var offset = this.getOffset(elem) + + // calculate the offset change and compensate... + var cl = offset.left + ((o.left - o.left*scale) - (left - left*scale)) + var ct = offset.top + ((o.top - o.top*scale) - (top - top*scale)) + + this.setOffset(elem, cl, ct) + + return this.setOriginSync(elem, left+'px', top+'px') + }, + // see docs in jli.js + relativeOffset: function(container, block, point){ + point = point == null ? {} : point + var l = point.left + var t = point.top + var scale = point.scale + + // get the input data... + var s = this.getScale(block) || 1 + var o = this.getOrigin(block) + // get only the value we need... + var W = container.width() + var H = container.height() + // we need this to make everything relative to the container... + var co = container.offset() + var offset = this.getOffset(block) + var bo = block.offset() + + scale = scale == 'screen' ? 1 + : scale == 'elem' ? s + : scale == null ? s + : scale + + // normalize the l,t to element scale... + if(l != null && t != null){ + + // get only the value we need... + // NOTE: width and height are used to calculate the correction + // due to origin/scale... + var w = block.width() + var h = block.height() + o = { + // target offset scale... + top: t*scale + // set origin to top left corner of element (compensate + // for scaling)... + + (h - h*s) / (h / o.top), + left: l*scale + + (w - w*s) / (w / o.left), + } + } + + return { + top: offset.top + (H/2 - offset.top) - o.top, + left: offset.left + (W/2 - offset.left) - o.left, + } + }, +} + + + /*********************************************************************/ var RibbonsClassPrototype = { @@ -181,6 +290,10 @@ var RibbonsPrototype = { return o }, + // DOM Adapter... + //dom: legacyDOMAdapter, + dom: DOMAdapter, + // Constructors... createViewer: RibbonsClassPrototype.createViewer, createRibbon: RibbonsClassPrototype.createRibbon, @@ -352,7 +465,7 @@ var RibbonsPrototype = { scale: function(scale, t, l){ // get... if(arguments.length == 0){ - return getElementScale(this.getRibbonSet()) || 1 + return this.dom.getScale(this.getRibbonSet()) || 1 // set... } else { @@ -378,7 +491,7 @@ var RibbonsPrototype = { this.origin(t, l) } - setElementScale(ribbon_set, scale) + this.dom.setScale(ribbon_set, scale) /* XXX not sure if this is needed yet... // XXX fix a render bug in chrome 38... @@ -414,7 +527,7 @@ var RibbonsPrototype = { origin: function(a, b){ // get... if(arguments.length == 0){ - return getElementOrigin(this.getRibbonSet()) + return this.dom.getOrigin(this.getRibbonSet()) // set... } else { @@ -456,11 +569,11 @@ var RibbonsPrototype = { var t = (io.top - ro.top)/s + h/2 } - shiftOriginTo(ribbon_set, l, t) + this.dom.shiftOrigin(ribbon_set, l, t) // XXX DEBUG: remove when done... if($('.point').length > 0){ - setElementOffset($('.point'), l, t) + this.dom.setOffset($('.point'), l, t) } return this @@ -541,7 +654,7 @@ var RibbonsPrototype = { // Make a "shadow" image for use with image oriented animations... // - // .makeShadwo([][, ][, ]) + // .makeShadow([][, ][, ]) // -> // // A shadow is a clone of placed directly above it while it @@ -576,6 +689,7 @@ var RibbonsPrototype = { // XXX should we also have a ribbon shadow??? // XXX when this cant find a target it will return an empty function, // not sure if this is correct... + // XXX should we use transforms instead of css positions??? makeShadow: function(target, animate, delay){ delay = delay || 200 var img = this.getImage(target) @@ -614,7 +728,7 @@ var RibbonsPrototype = { // make a shadow element... // ...we need to scale it to the current scale... - var shadow = setElementScale( + var shadow = this.dom.setScale( $('
') .addClass('shadow ribbon clone') .attr({ @@ -1396,7 +1510,7 @@ var RibbonsPrototype = { var dl = loaded.index(ref) - gids.indexOf(gid) if(dl != 0){ - r.css({left: parseFloat(r.css('left')) + dl * w}) + this.dom.setOffset(r, this.dom.getOrigin(r) + dl * w) } } } @@ -1602,7 +1716,7 @@ var RibbonsPrototype = { // clear all... if(gids == null || gids == '*'){ this.preventTransitions() - setElementOffset(this.getRibbonSet(), 0, 0).children().detach() + this.dom.setOffset(this.getRibbonSet(), 0, 0).children().detach() this.restoreTransitions() // clear one or more gids... @@ -1964,12 +2078,12 @@ var RibbonsPrototype = { var t = (io.top - ro.top)/s + h/2 - var offset = getRelativeOffset(this.viewer, ribbon_set, { + var offset = this.dom.relativeOffset(this.viewer, ribbon_set, { top: t, left: 0, }).top - setElementOffset(ribbon_set, 0, offset) + this.dom.setOffset(ribbon_set, 0, offset) return this }, @@ -1998,14 +2112,7 @@ var RibbonsPrototype = { : mode == 'after' ? -w/2 : 0 - ribbon - .css({ - left: (rl + ((W-w)/2 + image_offset) - il) / scale, - //transform: 'translate3d(' - // + ((rl + ((W-w)/2 + image_offset) - il) / scale) + 'px, 0px, 0px)' - }) - - //setElementOffset(ribbon, ((rl + ((W-w)/2 + image_offset) - il) / scale), 0, 1) + this.dom.setOffset(ribbon, ((rl + ((W-w)/2 + image_offset) - il) / scale)) return this },