Permalink
Browse files

gallery-2010.09.22-20-15 tivac gallery-textshadow-anim

  • Loading branch information...
1 parent 84bc5e0 commit 733df2cc876a1b4204eb99e16188e08bc380d94a YUI Builder committed Sep 22, 2010
@@ -0,0 +1,26 @@
+# My Custom Module Build Properties
+
+# As long as the 'builder' project is cloned to the default folder
+# next to the 'yui3-gallery' project folder, the 'builddir' property does not
+# need to be changed
+#
+# If the 'builder' project is checked out to an alternate location, this
+# property should be updated to point to the checkout location.
+builddir=../../../builder/componentbuild
+
+# The name of the component. E.g. event, attribute, widget
+component=gallery-textshadow-anim
+
+# The list of files which should be concatenated to create the component.
+# NOTE: For a css component (e.g. cssfonts, cssgrids etc.) use component.cssfiles instead.
+# component.jsfiles=my.custom.module.js, my.custom.moduleHelperClass.js, my.custom.moduleSubComponentClass.js
+component.jsfiles=textshadow-anim.js
+
+# The list of modules this component requires. Used to set up the Y.add module call for YUI 3.
+component.requires=anim-base
+
+# The list of modules this component supersedes. Used to set up the Y.add module call for YUI 3.
+#component.supersedes=another.custom.module
+
+# The list of modules that are optional for this module. Used to set up the Y.add module call for YUI 3.
+#component.optional=
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- YUI 3 Gallery Component Build File -->
+<project name="Textshadow Anim" default="local">
+ <description>My Custom Module Build File</description>
+ <property file="build.properties" />
+ <import file="${builddir}/3.x/bootstrap.xml" description="Default Build Properties and Targets" />
+</project>
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Text Shadow Anim plugin</title>
+ <meta charset="utf-8">
+
+ <link rel="stylesheet" href="http://yui.yahooapis.com/combo?3.2.0/build/cssreset/reset-min.css&3.2.0/build/cssfonts/fonts-min.css" />
+ <style>
+ body { background: #FFF; text-align: center; }
+
+ h1 { font-size: 800%; margin: 100px; }
+ </style>
+</head>
+<body lang="en-US">
+
+ <h1>Text-Shadow Animation</h1>
+
+ <script type="text/javascript" src="http://yui.yahooapis.com/combo?3.2.0/build/yui/yui.js"></script>
+ <script>
+ var Y = YUI({
+ modules : {
+ "gallery-textshadow-anim" : {
+ fullpath : "../../../build/gallery-textshadow-anim/gallery-textshadow-anim.js",
+ requires : [ 'anim-base']
+ }
+ }
+ }).use("gallery-textshadow-anim", function(Y) {
+ new Y.Anim({
+ node : "h1",
+ to : { textShadow : "#F00 0 0 60px" },
+ from : { textShadow : "#F00 0 0 0" },
+ iterations: 'infinite',
+ direction: 'alternate'
+ }).run();
+ });
+ </script>
+</body>
+</html>
@@ -0,0 +1,86 @@
+/*
+ * Copyright (c) 2010 Patrick Cavit. All rights reserved.
+ * http://www.patcavit.com/
+ */
+
+//figure out the shadow type
+var NUM = function(n) {
+ return parseInt(n, 10);
+ },
+ FLOOR = Math.floor,
+ lengthRegex = /(\-?[\d\.]+(px)?)/,
+ colorRegex = /\s*(rgb\(.+\)|#\w{3,6}|[^#]?[a-z]{3,})\s*/i, //doesn't have to be exact!
+ parseStyle = function(style) {
+ var color = [ "rgb(0, 0, 0)", 0, 0, 0 ],
+ lengths = [ 0, 0, 0 ],
+ pieces, tokens, length, i, l, t, tl, lc;
+
+ if(!style || style === "none") {
+ return {
+ lengths : lengths,
+ color : color
+ };
+ }
+
+ pieces = style.split(colorRegex);
+
+ for(i = 0, l = pieces.length; i < l; i++) {
+ if(pieces[i].length) {
+ if(colorRegex.test(pieces[i])) {
+ color = Y.Color.re_RGB.exec(Y.Color.toRGB(pieces[i]));
+ } else {
+ tokens = pieces[i].split(" ");
+
+ lc = 0;
+
+ for(t = 0, tl = tokens.length; t < tl; t++) {
+ length = tokens[t].match(lengthRegex);
+
+ if(length && length.length) {
+ lengths[lc++] = length[0];
+ continue;
+ }
+ }
+ }
+ }
+ }
+
+ return {
+ color : color,
+ lengths : lengths
+ };
+ };
+
+Y.Anim.behaviors.textShadow = {
+ set : function(anim, att, from, to, elapsed, duration, fn) {
+ from = parseStyle((typeof from == "object") ? from.getStyle("textShadow") : from);
+ to = parseStyle((typeof to == "object") ? to.getStyle("textShadow") : to);
+
+ var fromColor = from.color,
+ fromLengths = from.lengths,
+ toColor = to.color,
+ toLengths = to.lengths;
+
+ if(!fromColor || fromColor.length < 2 || !toColor || toColor.length < 2) {
+ Y.error('invalid from or to');
+ }
+
+ if(fromLengths.length != toLengths.length) {
+ Y.error("invalid length");
+ }
+
+ anim._node.setStyle("textShadow",
+ 'rgb(' + [ FLOOR(fn(elapsed, NUM(fromColor[1]), NUM(toColor[1]) - NUM(fromColor[1]), duration)),
+ FLOOR(fn(elapsed, NUM(fromColor[2]), NUM(toColor[2]) - NUM(fromColor[2]), duration)),
+ FLOOR(fn(elapsed, NUM(fromColor[3]), NUM(toColor[3]) - NUM(fromColor[3]), duration))
+ ].join(', ') + ')' +
+ fn(elapsed, NUM(fromLengths[0]), NUM(toLengths[0]) - NUM(fromLengths[0]), duration) + "px " +
+ fn(elapsed, NUM(fromLengths[1]), NUM(toLengths[1]) - NUM(fromLengths[1]), duration) + "px " +
+ fn(elapsed, NUM(fromLengths[2]), NUM(toLengths[2]) - NUM(fromLengths[2]), duration) + "px ");
+ },
+
+ //emulate Y.Node.scrubVal behavior where we return a node reference
+ get: function(anim, att) {
+ return anim._node.getComputedStyle("textShadow") || anim._node;
+ }
+};
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>YUI3 Textshadow Anim Module Tests</title>
+ <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+
+ <style type="text/css" media="screen">
+ h1 { margin: 100px 100px; }
+ </style>
+</head>
+<body lang="en-US" class="yui3-skin-sam">
+
+ <h1>gallery-textshadow-anim Tests</h1>
+
+ <script type="text/javascript" src="http://yui.yahooapis.com/combo?3.2.0/build/yui/yui.js&3.2.0/build/loader/loader.js"></script>
+ <script type="text/javascript">
+ YUI_config = {
+ modules : {
+ "gallery-textshadow-anim" : {
+ fullpath : "../../../build/gallery-textshadow-anim/gallery-textshadow-anim.js",
+ requires : [ 'anim-base' ]
+ },
+
+ "textshadow-anim-tests" : {
+ fullpath : "textshadow-anim-tests.js",
+ requires : [ "gallery-textshadow-anim", "test" ]
+ }
+ }
+ };
+
+ YUI().use("console", "textshadow-anim-tests", function(Y) {
+ //create the console
+ new Y.Console({
+ height: "600px",
+ width: "500px",
+ newestOnTop : false
+ }).render();
+
+ Y.Test.Runner.add(Y.TextShadowAnim.Tests).run();
+ });
+ </script>
+</body>
+</html>
@@ -0,0 +1,35 @@
+YUI.add("textshadow-anim-tests", function(Y) {
+
+ Y.namespace("TextShadowAnim").Tests = new Y.Test.Case({
+ name : "Text Shadow Anim Tests",
+
+ // SET UP
+ setUp : function() {
+ this.text = Y.one("h1");
+ },
+
+ tearDown : function() {
+ this.text.setStyle("textShadow", "none");
+ this.text = null;
+ },
+
+ "text-shadow should animate" : function() {
+ var anim = new Y.Anim({
+ node : "h1",
+ to : { textShadow : "#F00 0 0 20px" },
+ duration : 0.5
+ });
+
+ anim.on("end", function() {
+ this.resume(function() {
+ Y.Assert.areEqual("rgb(255, 0, 0) 0px 0px 20px", this.text.getComputedStyle("textShadow"));
+ });
+ }, this);
+
+
+ anim.run();
+
+ this.wait(1000);
+ }
+ });
+}, "@VERSION@", { requires : [ "gallery-textshadow-anim", "test" ] });

0 comments on commit 733df2c

Please sign in to comment.