From 88ae9d7e259c2a462f6f592ca3dd21b4a14eca9d Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Wed, 23 Dec 2015 07:09:43 +0300 Subject: [PATCH] tweaking and testing... Signed-off-by: Alex A. Naanou --- ui (gen4)/features/meta.js | 2 +- ui (gen4)/lib/util.js | 127 +++++++++++++++++++++++++++++++------ ui (gen4)/ribbons.js | 27 ++++++-- 3 files changed, 130 insertions(+), 26 deletions(-) diff --git a/ui (gen4)/features/meta.js b/ui (gen4)/features/meta.js index a602d471..d9db3500 100755 --- a/ui (gen4)/features/meta.js +++ b/ui (gen4)/features/meta.js @@ -81,7 +81,7 @@ core.ImageGridFeatures.Feature('viewer-testing', [ // ui control... 'ui-clickable', //'ui-direct-control-jquery', - 'ui-direct-control-gsap', + //'ui-direct-control-gsap', // experimental and optional features... //'auto-single-image', diff --git a/ui (gen4)/lib/util.js b/ui (gen4)/lib/util.js index 3e29a283..11aea068 100755 --- a/ui (gen4)/lib/util.js +++ b/ui (gen4)/lib/util.js @@ -122,17 +122,21 @@ var transform2obj = function(str){ // NOTE: this does not care about the actual semantics of the format, // e.g. argument units or function names... var obj2transform = function(obj, filter){ + // build the filters... filter = filter || [] var keep = filter .filter(function(f){ return f[0] != '-' }) var remove = filter .filter(function(f){ return f[0] == '-' }) .map(function(f){ return f.slice(1) }) + return Object.keys(obj) // keep... - .filter(function(func){ return keep.length == 0 || keep.indexOf(func) >= 0 }) + .filter(function(func){ + return keep.length == 0 || keep.indexOf(func) >= 0 }) // remove... - .filter(function(func){ return remove.indexOf(func) < 0 }) + .filter(function(func){ + return remove.indexOf(func) < 0 }) .map(function(func){ return func +'('+ obj[func].join(', ') + ')' }) @@ -175,13 +179,45 @@ var transformEditor = function(){ // methods... - toString: function(){ return obj2transform(this.data, args2array(arguments)) }, + // XXX needs more work... + simplify: function(filter){ + data = this.data + + // scale... + if(data.scale){ + if((data.scaleX||[])[0] == data.scale[0]){ delete data.scaleX } + if((data.scaleY||[])[0] == data.scale[1]){ delete data.scaleY } + if((data.scale||[])[0] == data.scale[1]){ data.scale = data.scale.slice(0, 1) } + } + + if(data.translate3d){ + // XXX STUB + data.translate3d[0] = data.translate3d[0] || 0 + data.translate3d[1] = data.translate3d[1] || 0 + data.translate3d[2] = data.translate3d[2] || 0 + + // translate... + if(data.translate && data.translate3d){ delete data.translate } + + // translate3d... + if((data.translateX||[])[0] == data.translate3d[0]){ delete data.translateX } + if((data.translateY||[])[0] == data.translate3d[1]){ delete data.translateY } + if((data.translateZ||[])[0] == data.translate3d[2]){ delete data.translateZ } + } + + return this.data + }, + + toString: function(){ + //return obj2transform(this.data, args2array(arguments)) + var args = args2array(arguments) + return obj2transform(this.simplify(args), args) + }, // NOTE: this will not build the alias data... fromString: function(str){ this.data = transform2obj(str) return this }, - // XXX need to simplify first... // XXX use vendor prefix... toElem: function(elem){ var origin = this.data.origin || '' @@ -191,9 +227,6 @@ var transformEditor = function(){ : elem instanceof Array ? elem : [elem] - // XXX simplify state... - // XXX - elem.forEach(function(e){ e.style.transformOrigin = origin.join ? origin.join(' ') : origin e.style.transform = transform @@ -202,6 +235,7 @@ var transformEditor = function(){ return this }, + // get data by attr names... get: function(){ var that = this var attrs = arguments[0] instanceof Array ? @@ -227,7 +261,6 @@ var transformEditor = function(){ return res }, - // XXX also load origin... // XXX use vendor prefix... __init__: function(str){ this.data = {} @@ -299,22 +332,23 @@ var transformEditor = function(){ // NOTE: this is the name of the called alias... var arg = args[spec[alias]] - // XXX get the correct return value... return Object.keys(spec).map(function(k){ var i = spec[k] if(args.length == 0){ - return k in that.__direct ? + var res = k in that.__direct ? that.__direct[k].call(that) : null + return res != null ? res[i] : res } var a = [] a[i] = arg - return k in that.__direct ? + var res = k in that.__direct ? that.__direct[k].call(that, a) : null + return res != null ? res[i] : res }) .filter(function(e){ return e != null }) .slice(-1)[0] @@ -333,7 +367,7 @@ var transformEditor = function(){ // wrap the original alias... function(){ var args = args2array(arguments) - // XXX do a full search through the alias values... + // XXX do a full search through the alias values and merge results... if(args.length == 0 && k in this.__direct){ return this.__direct[k].call(this) } @@ -364,13 +398,13 @@ var transformEditor = function(){ alias({ translate3d: 2, translateZ: 0, z: 0, }) func('scale', ['', '']) - func('scale3d', ['', '', '']) + //func('scale3d', ['', '', '']) func('scaleX') func('scaleY') //func('scaleZ') - alias({ scale: 0, scale3d: 0, scaleX: 0, }) - alias({ scale: 1, scale3d: 1, scaleY: 0, }) - alias({ scale3d: 2, scaleZ: 0, }) + alias({ scale: 0, /*scale3d: 0,*/ scaleX: 0, }) + alias({ scale: 1, /*scale3d: 1,*/ scaleY: 0, }) + //alias({ scale3d: 2, scaleZ: 0, }) // special case: single arg scale: scale(n) -> scale(n, n) editor._scale = editor.scale @@ -380,7 +414,9 @@ var transformEditor = function(){ && arguments[0] != '='){ return this._scale.call(this, arguments[0], arguments[0]) } - return this._scale.apply(this, arguments) + var res = this._scale.apply(this, arguments) + // is this correct here??? + return res.length == 2 && res[0] == res[1] ? res[0] : res } func('rotate', ['deg']) @@ -481,12 +517,21 @@ jQuery.fn.transform = function(){ // shorthands... jQuery.fn.scale = function(value){ - if(value){ - return $(this).transform({scale: value}) + if(arguments.length > 0){ + return $(this).transform({scale: args2array(arguments)}) + } else { return $(this).transform('scale') } } +// get element scale... +jQuery.fn.getscale = function(){ + var res = 1 + $(this).parents().toArray().forEach(function(e){ + res *= $(e).scale() || 1 + }) + return res +} jQuery.fn.origin = function(a, b, c){ if(a != null && b != null){ return $(this).transform({origin: [a, b, c == null ? 0 : c]}) @@ -501,6 +546,50 @@ jQuery.fn.origin = function(a, b, c){ +//--------------------------------------------------------------------- + +// XXX experiment +jQuery.fn._drag = function(){ + var dragging = false + var s, + px, py + + var elem = $(this) + .on('mousedown touchstart', function(evt){ + dragging = true + px = evt.clientX + px = evt.clientY + + s = elem.getscale() + }) + .on('mousemove touchmove', function(evt){ + if(!dragging){ + return + } + + var x = evt.clientX + var dx = px - x + px = x + + var y = evt.clientY + var dy = py - y + py = y + + elem + .velocity('stop') + .velocity({ + translateX: '-=' + (dx / s), + translateY: '-=' + (dy / s), + }, 0) + }) + .on('mouseup touchend', function(evt){ + dragging = false + elem.velocity('stop') + }) +} + + + /********************************************************************** * vim:set ts=4 sw=4 : */ return module }) diff --git a/ui (gen4)/ribbons.js b/ui (gen4)/ribbons.js index 0cee3d27..abb0eb6a 100755 --- a/ui (gen4)/ribbons.js +++ b/ui (gen4)/ribbons.js @@ -62,26 +62,41 @@ 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(..) -// .transform('scale') + getElementScale = function(elem){ return $(elem).scale() } // // - jli.getRelativeOffset(..) -// XXX offset if x from y... + getElementOffset = function(elem){ + var o = $(elem).transform('x', 'y') + return { left: o.x, top: o.y, } + } // // - jli.setElementOffset(..) -// .transform({x: , y: , z: 0}) -// .velocity({translateX: , translateY: , translateZ: 0}) +// // 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.setElementScale(..) -// .transform({scale, }) -// .velocity({scale, }) + setElementScale = function(elem, scale){ + //return $(elem).velocity({scale: scale || 1}, 150) + return $(elem).scale(scale || 1) + } // // - 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... // //