Permalink
Browse files

- add style changes to transform merge

- remake
- add bowser to support/
- add build instructions to README for contributors
  • Loading branch information...
1 parent 65e4a7a commit 627bbe5fbc515539495ac15888558ee160a57b23 @ded committed Sep 5, 2011
Showing with 88 additions and 66 deletions.
  1. +3 −0 .gitmodules
  2. +18 −6 README.md
  3. +1 −1 examples.html
  4. +24 −21 morpheus.js
  5. +1 −1 morpheus.min.js
  6. +16 −16 src/ender.js
  7. +24 −21 src/morpheus.js
  8. +1 −0 support/bowser
View
@@ -1,3 +1,6 @@
[submodule "support/sink"]
path = support/sink
url = git://github.com/ded/sink-test.git
+[submodule "support/bowser"]
+ path = support/bowser
+ url = git://github.com/ded/bowser.git
View
@@ -128,25 +128,37 @@ If you're considering animating by a CSS unit of measurement like <code>em</code
``` js
$('div.intro')
.css({
- fontSize: '2em',
- width: '50%'
+ fontSize: '2em'
+ , width: '50%'
})
.animate({
- fontSize: '+=1.5em',
- width: '100%'
+ fontSize: '+=1.5em'
+ , width: '100%'
})
```
<h3>Transforms</h3>
Transforms can be animated in browsers that support them (IE9, FF, Chrome, Safari, Opera). <code>morpheus.transform</code> provides a shortcut to the correct style property for the browser (webkitTransform, MozTransform, etc). Like animating on units or color, you must set the property ahead of time before animating:
``` js
-element.style[morpheus.transform] = 'rotate(30deg) scale(1)';
+element.style[morpheus.transform] = 'rotate(30deg) scale(1)'
morpheus(element, {
transform: 'rotate(0deg) scale(+=3)'
-});
+})
```
Morpheus (c) Dustin Diaz 2011 - License MIT
+## Contributors
+
+If you're looking to contribute. Add your changes to `src/morpheus.js` Then run the following
+
+ $ # if you don't have smoosh
+ $ npm install smoosh -g
+ $ # then run tests
+ $ git submodule update --init
+ $ open tests/tests.html
+
+If all is good. Then run `make` and be sure make sure your code passes the linter
+
**Happy Morphing!**
View
@@ -249,7 +249,7 @@ <h2>Transform</h2>
<button id="go-ex8">Go</button>
<button id="reset-ex8">Reset</button>
<script type="text/javascript">
- var reset = function () {
+ function reset() {
id('ex8-rotate').style[morpheus.transform] = 'rotate(0deg)'
id('ex8-scale').style[morpheus.transform] = 'scale(1)'
id('ex8-skew').style[morpheus.transform] = 'skew(0deg, 0deg)'
View
@@ -16,34 +16,20 @@
// these elements do not require 'px'
, unitless = { lineHeight: 1, zoom: 1, zIndex: 1, opacity: 1, transform: 1}
// which property name does this browser use for transform
+
, transform = function () {
var styles = doc.createElement('a').style
, props = ['webkitTransform','MozTransform','OTransform','msTransform','Transform'], i
for (i = 0; i < props.length; i++) {
if (props[i] in styles) return props[i]
}
}()
- , parseTransform = function(style, base) {
- var values = {}
- , m
- if (m = style.match(rotate)) values.rotate = by(m[1],base?base.rotate:null)
- if (m = style.match(scale)) values.scale = by(m[1],base?base.scale:null)
- if (m = style.match(skew)) {values.skewx = by(m[1],base?base.skewx:null);values.skewy = by(m[3],base?base.skewy:null)}
- if (m = style.match(translate)) {values.translatex = by(m[1],base?base.translatex:null);values.translatey = by(m[3],base?base.translatey:null)}
- return values
- }
- , formatTransform = function(v) {
- var s = ''
- if ('rotate' in v) s += "rotate(" + v.rotate + "deg) "
- if ('scale' in v) s += "scale(" + v.scale + ") "
- if ('translatex' in v) s += "translate(" + v.translatex + "px," + v.translatey + "px) "
- if ('skewx' in v) s += "skew(" + v.skewx + "deg," + v.skewy + "deg)"
- return s
- }
+
// does this browser support the opacity property?
, opasity = function () {
return typeof doc.createElement('a').style.opacity !== 'undefined'
}()
+
// initial style is determined by the elements themselves
, getStyle = doc.defaultView && doc.defaultView.getComputedStyle ?
function (el, property) {
@@ -90,6 +76,24 @@
}
}()
+ function parseTransform(style, base) {
+ var values = {}, m
+ if (m = style.match(rotate)) values.rotate = by(m[1], base ? base.rotate : null)
+ if (m = style.match(scale)) values.scale = by(m[1], base ? base.scale : null)
+ if (m = style.match(skew)) {values.skewx = by(m[1], base ? base.skewx : null); values.skewy = by(m[3], base ? base.skewy : null)}
+ if (m = style.match(translate)) {values.translatex = by(m[1], base ? base.translatex : null); values.translatey = by(m[3], base ? base.translatey : null)}
+ return values
+ }
+
+ function formatTransform(v) {
+ var s = ''
+ if ('rotate' in v) s += 'rotate(' + v.rotate + 'deg) '
+ if ('scale' in v) s += 'scale(' + v.scale + ') '
+ if ('translatex' in v) s += 'translate(' + v.translatex + 'px,' + v.translatey + 'px) '
+ if ('skewx' in v) s += 'skew(' + v.skewx + 'deg,' + v.skewy + 'deg)'
+ return s
+ }
+
function rgb(r, g, b) {
return '#' + (1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1)
}
@@ -320,8 +324,8 @@
}
for (var k in options) {
v = getTweenVal(pos, units, begin, end, k, i)
- k == 'transform' ?
- els[i].style[transform] = formatTransform(v) :
+ k == 'transform' ?
+ els[i].style[transform] = formatTransform(v) :
k == 'opacity' && !opasity ?
(els[i].style.filter = 'alpha(opacity=' + (v * 100) + ')') :
(els[i].style[camelize(k)] = v)
@@ -338,7 +342,6 @@
morpheus.parseTransform = parseTransform
morpheus.formatTransform = formatTransform
- if (typeof module !== 'undefined') module.exports = morpheus
- context['morpheus'] = morpheus
+ if (typeof module !== 'undefined') module.exports = morpheus; else context['morpheus'] = morpheus
}(this, document, window)
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -1,25 +1,25 @@
-var morpheus = require('morpheus');
+var morpheus = require('morpheus')
!function ($) {
$.ender({
animate: function (options) {
- return morpheus(this, options);
- },
- fadeIn: function (d, fn) {
+ return morpheus(this, options)
+ }
+ , fadeIn: function (d, fn) {
return morpheus(this, {
- duration: d,
- opacity: 1,
- complete: fn
- });
- },
- fadeOut: function (d, fn) {
+ duration: d
+ , opacity: 1
+ , complete: fn
+ })
+ }
+ , fadeOut: function (d, fn) {
return morpheus(this, {
- duration: d,
- opacity: 0,
- complete: fn
- });
+ duration: d
+ , opacity: 0,
+ , complete: fn
+ })
}
- }, true);
+ }, true)
$.ender({
tween: morpheus.tween
})
-}(ender);
+}(ender)
View
@@ -11,34 +11,20 @@
// these elements do not require 'px'
, unitless = { lineHeight: 1, zoom: 1, zIndex: 1, opacity: 1, transform: 1}
// which property name does this browser use for transform
+
, transform = function () {
var styles = doc.createElement('a').style
, props = ['webkitTransform','MozTransform','OTransform','msTransform','Transform'], i
for (i = 0; i < props.length; i++) {
if (props[i] in styles) return props[i]
}
}()
- , parseTransform = function(style, base) {
- var values = {}
- , m
- if (m = style.match(rotate)) values.rotate = by(m[1],base?base.rotate:null)
- if (m = style.match(scale)) values.scale = by(m[1],base?base.scale:null)
- if (m = style.match(skew)) {values.skewx = by(m[1],base?base.skewx:null);values.skewy = by(m[3],base?base.skewy:null)}
- if (m = style.match(translate)) {values.translatex = by(m[1],base?base.translatex:null);values.translatey = by(m[3],base?base.translatey:null)}
- return values
- }
- , formatTransform = function(v) {
- var s = ''
- if ('rotate' in v) s += "rotate(" + v.rotate + "deg) "
- if ('scale' in v) s += "scale(" + v.scale + ") "
- if ('translatex' in v) s += "translate(" + v.translatex + "px," + v.translatey + "px) "
- if ('skewx' in v) s += "skew(" + v.skewx + "deg," + v.skewy + "deg)"
- return s
- }
+
// does this browser support the opacity property?
, opasity = function () {
return typeof doc.createElement('a').style.opacity !== 'undefined'
}()
+
// initial style is determined by the elements themselves
, getStyle = doc.defaultView && doc.defaultView.getComputedStyle ?
function (el, property) {
@@ -85,6 +71,24 @@
}
}()
+ function parseTransform(style, base) {
+ var values = {}, m
+ if (m = style.match(rotate)) values.rotate = by(m[1], base ? base.rotate : null)
+ if (m = style.match(scale)) values.scale = by(m[1], base ? base.scale : null)
+ if (m = style.match(skew)) {values.skewx = by(m[1], base ? base.skewx : null); values.skewy = by(m[3], base ? base.skewy : null)}
+ if (m = style.match(translate)) {values.translatex = by(m[1], base ? base.translatex : null); values.translatey = by(m[3], base ? base.translatey : null)}
+ return values
+ }
+
+ function formatTransform(v) {
+ var s = ''
+ if ('rotate' in v) s += 'rotate(' + v.rotate + 'deg) '
+ if ('scale' in v) s += 'scale(' + v.scale + ') '
+ if ('translatex' in v) s += 'translate(' + v.translatex + 'px,' + v.translatey + 'px) '
+ if ('skewx' in v) s += 'skew(' + v.skewx + 'deg,' + v.skewy + 'deg)'
+ return s
+ }
+
function rgb(r, g, b) {
return '#' + (1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1)
}
@@ -315,8 +319,8 @@
}
for (var k in options) {
v = getTweenVal(pos, units, begin, end, k, i)
- k == 'transform' ?
- els[i].style[transform] = formatTransform(v) :
+ k == 'transform' ?
+ els[i].style[transform] = formatTransform(v) :
k == 'opacity' && !opasity ?
(els[i].style.filter = 'alpha(opacity=' + (v * 100) + ')') :
(els[i].style[camelize(k)] = v)
@@ -333,7 +337,6 @@
morpheus.parseTransform = parseTransform
morpheus.formatTransform = formatTransform
- if (typeof module !== 'undefined') module.exports = morpheus
- context['morpheus'] = morpheus
+ if (typeof module !== 'undefined') module.exports = morpheus; else context['morpheus'] = morpheus
}(this, document, window)
Submodule bowser added at 1ea37f

0 comments on commit 627bbe5

Please sign in to comment.