src/ui.js src/ui/manipulate.js templates/html/assets/images/manipulate.png @@ -1,3 +1,7 @@ +*2.0.0 alpha 4* (October 12, 2009) + +* Add multi-touch behaviour support. + *2.0.0 alpha 3* (September 29, 2009) * Reenable detection of WebKit CSS transition support. CHANGELOG @@ -130,3 +130,59 @@ Element.addMethods({ return clone; } }); + +/** + * Element#transform(@element, transforms) -> element + * - transforms (Object): rotation angle and scale factor + * + * Rotate and scale an element. `transforms` is an object containing: + * + * * `rotation`: Rotation angle in radians + * * `scale`: Scale factor + * + * Example: + * + * // rotate by 1.5 radians, scale by 200% + * $('element_id').transform({ rotation: 1.5, scale: 2 }); + * + * [[manipulate:update]] event memos can be direclty fed into [[Element#transform]]: + * + * $('element_id').observe('manipulate:update', function(event){ + * $('element_id').transform(event.memo); + * }); + * + * To convert degrees to radians, use: + * + * radians = degrees * (Math.PI/180); + * +**/ +(function(){ + var transform; + + if(window.CSSMatrix) transform = function(element, transform){ + element.style.transform = 'scale('+(transform.scale||1)+') rotate('+(transform.rotation||0)+'rad)'; + return element; + }; + else if(window.WebKitCSSMatrix) transform = function(element, transform){ + element.style.webkitTransform = 'scale('+(transform.scale||1)+') rotate('+(transform.rotation||0)+'rad)'; + return element; + }; + else if(Prototype.Browser.Gecko) transform = function(element, transform){ + element.style.MozTransform = 'scale('+(transform.scale||1)+') rotate('+(transform.rotation||0)+'rad)'; + return element; + }; + // we don't support scaling for IE yet + else if(Prototype.Browser.IE) transform = function(element, transform){ + if(!element._oDims) + element._oDims = [element.offsetWidth, element.offsetHeight]; + var c = Math.cos(transform.rotation||0) * 1, s = Math.sin(transform.rotation||0) * 1, + filter = "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11="+c+",M12="+(-s)+",M21="+s+",M22="+c+")"; + element.style.filter = filter; + element.style.marginLeft = (element._oDims[0]-element.offsetWidth)/2+'px'; + element.style.marginTop = (element._oDims[1]-element.offsetHeight)/2+'px'; + return element; + }; + else transform = function(element){ return element; } + + Element.addMethods({ transform: transform }); +})(); src/extensions/element.js @@ -1,11 +1,6 @@ //= require "license" /** - * == scripty2 ui == - * * [[S2.CSS]]: functions for CSS parsing, color normalization and CSS value interpolation. -**/ - -/** * == scripty2 core == * * Core contains various JavaScript and DOM extensions used by scripty2 fx and scripty2 ui, @@ -37,6 +32,7 @@ var S2 = { //= require "css" //= require "effects" +//= require "ui" //= require "extensions/element" src/s2.js 4734848c32260b97b1684225d068b3ed3f63d3db Thomas Fuchs thomas@fesch.at http://github.com/madrobby/scripty2/commit/fed0d0b9daa209ca78d2e0c56ebe7f81e59cd965 fed0d0b9daa209ca78d2e0c56ebe7f81e59cd965 2009-10-12T03:27:58-07:00 2009-10-12T03:27:58-07:00 Add multi-touch behaviour support d114548641f238f694645f3f7153c79677901406 Thomas Fuchs thomas@fesch.at