From 9f3564e0ebdd1e64d908e564ef0f76e785bd1753 Mon Sep 17 00:00:00 2001 From: seankoole Date: Wed, 22 Dec 2010 20:47:24 +0100 Subject: [PATCH 01/25] first draft of effect.text --- ui/jquery.effect.text.js | 155 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 155 insertions(+) create mode 100644 ui/jquery.effect.text.js diff --git a/ui/jquery.effect.text.js b/ui/jquery.effect.text.js new file mode 100644 index 00000000000..6e872a12a18 --- /dev/null +++ b/ui/jquery.effect.text.js @@ -0,0 +1,155 @@ +var defaultOptions = { + easing: 'linear', + words: false, + text: '', + reverse: false, + random: false, + start: $.noop, + finished: $.noop +}; + + +$.effects.blockFadeOut = function (o) { + + function finished ($set) { + $(this).empty (); + } + + var options = o.options = $.extend ({}, + defaultOptions, + o.options, + { + finished: finished, + animate: function (interval, duration, delay) { + this.delay (delay).animate ({opacity: 0}, 0, options.easing); + } + } + ); + + $.effects.textAnim.call (this, o); +} + + +$.effects.blockFadeIn = function (o) { + + var options = o.options = $.extend ({}, + defaultOptions, + o.options, + { + animate: function (interval, duration, delay) { + this.css ('opacity', 0); + this.delay (delay).animate ({opacity: 1}, duration, options.easing); + } + } + ); + + $.effects.textAnim.call (this, o); +} + +$.effects.textAnim = function (o) { + + var options = o.options; + return this.queue ( + function () { + + var replaceWith, tagReg, reg, html, i, $set, set, wordCount, duration, interval; + var $this = $(this); + /* No height etc. */ + $this.width ($this.width ()); + $this.height ($this.height ()); + + // The following regular expression courtesy of Phil Haack + // http://haacked.com/archive/2004/10/25/usingregularexpressionstomatchhtml.aspx + tagReg = /(<\/?\w+((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[^'">\s]+))?)+\s*|\s*)\/?>)/g; + + // Translation: /(HTML tag plus spaces)|(word/letter without '<' plus spaces)/g + if (options.words) { + reg = /(<\/?\w+((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[^'">\s]+))?)+\s*|\s*)\/?>)\s*|([^\s<]+\s*)/g; + }else{ + reg = /(<\/?\w+((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[^'">\s]+))?)+\s*|\s*)\/?>)\s*|([^\s<]\s*)/g; + } + + /* Make sure the correct html is in place */ + if (options.text !== '') { + $this.html (options.text); + } + + /* Set the current text to use */ + options.text = $this.html (); + + /* Get the words */ + words = options.text.match (reg); + + /* Array for HTML, will join later */ + html = []; + + /* Loop over the words and seperate them (put 'em in a span) */ + for (i = 0, l = words.length; i < l; i++) { + var word = words[i]; + + if (!word.match (tagReg)) { + html.push ('' + word + ''); + } else { + console.log (word); + html.push (word); + } + } + + + /* See how many words there are */ + wordCount = html.length; + + /* No words? halt */ + if (!wordCount) { + return; + } + + /* Put the newer correct html in place */ + $this.html (html.join ('')); + + /* Retreive the total set of elements */ + $set = $this.find ('span:not(:has(span))') + set = $set.get (); + + /* Calculate the duration and interval points */ + interval = (o.duration / (1.5 * wordCount)); + duration = (o.duration - wordCount * interval); + + /* If the cycle needs to reverse, reverse it all */ + if (options.reverse) { + set.reverse (); + } + i = 0; + + /* Iterate over all the elements run their animation function on it */ + for (i = 0, l = set.length; i < l; i++) { + var $word = $(set[i]), + delay = interval * i; + + /* Randomize if necessary */ + if (options.random !== false) { + + var randomDelay = Math.random() * wordCount * interval, + // If interval or random is negative, start from the bottom instead of top + uniformDelay = options.reverse ? + ((wordCount - i) * interval) : (i * interval); + + delay = randomDelay * options.random + Math.max(1 - options.random, 0) * uniformDelay; + } + + options.animate.call ($word, interval, duration, delay); + } + + setTimeout ( + function () { + $.type (options.finished) === 'function' && options.finished.call ($this[0], $set); + $.type (o.callback) === 'function' && o.callback.call ($this[0]); + + + $this.dequeue (); + }, o.duration + ); + + } + ); +}; \ No newline at end of file From 37891084e8352625123dddfa6e27d68708af28d7 Mon Sep 17 00:00:00 2001 From: seankoole Date: Wed, 22 Dec 2010 21:11:27 +0100 Subject: [PATCH 02/25] renamed the file --- ui/jquery.effect.text.js | 155 --------------------------------------- 1 file changed, 155 deletions(-) delete mode 100644 ui/jquery.effect.text.js diff --git a/ui/jquery.effect.text.js b/ui/jquery.effect.text.js deleted file mode 100644 index 6e872a12a18..00000000000 --- a/ui/jquery.effect.text.js +++ /dev/null @@ -1,155 +0,0 @@ -var defaultOptions = { - easing: 'linear', - words: false, - text: '', - reverse: false, - random: false, - start: $.noop, - finished: $.noop -}; - - -$.effects.blockFadeOut = function (o) { - - function finished ($set) { - $(this).empty (); - } - - var options = o.options = $.extend ({}, - defaultOptions, - o.options, - { - finished: finished, - animate: function (interval, duration, delay) { - this.delay (delay).animate ({opacity: 0}, 0, options.easing); - } - } - ); - - $.effects.textAnim.call (this, o); -} - - -$.effects.blockFadeIn = function (o) { - - var options = o.options = $.extend ({}, - defaultOptions, - o.options, - { - animate: function (interval, duration, delay) { - this.css ('opacity', 0); - this.delay (delay).animate ({opacity: 1}, duration, options.easing); - } - } - ); - - $.effects.textAnim.call (this, o); -} - -$.effects.textAnim = function (o) { - - var options = o.options; - return this.queue ( - function () { - - var replaceWith, tagReg, reg, html, i, $set, set, wordCount, duration, interval; - var $this = $(this); - /* No height etc. */ - $this.width ($this.width ()); - $this.height ($this.height ()); - - // The following regular expression courtesy of Phil Haack - // http://haacked.com/archive/2004/10/25/usingregularexpressionstomatchhtml.aspx - tagReg = /(<\/?\w+((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[^'">\s]+))?)+\s*|\s*)\/?>)/g; - - // Translation: /(HTML tag plus spaces)|(word/letter without '<' plus spaces)/g - if (options.words) { - reg = /(<\/?\w+((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[^'">\s]+))?)+\s*|\s*)\/?>)\s*|([^\s<]+\s*)/g; - }else{ - reg = /(<\/?\w+((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[^'">\s]+))?)+\s*|\s*)\/?>)\s*|([^\s<]\s*)/g; - } - - /* Make sure the correct html is in place */ - if (options.text !== '') { - $this.html (options.text); - } - - /* Set the current text to use */ - options.text = $this.html (); - - /* Get the words */ - words = options.text.match (reg); - - /* Array for HTML, will join later */ - html = []; - - /* Loop over the words and seperate them (put 'em in a span) */ - for (i = 0, l = words.length; i < l; i++) { - var word = words[i]; - - if (!word.match (tagReg)) { - html.push ('' + word + ''); - } else { - console.log (word); - html.push (word); - } - } - - - /* See how many words there are */ - wordCount = html.length; - - /* No words? halt */ - if (!wordCount) { - return; - } - - /* Put the newer correct html in place */ - $this.html (html.join ('')); - - /* Retreive the total set of elements */ - $set = $this.find ('span:not(:has(span))') - set = $set.get (); - - /* Calculate the duration and interval points */ - interval = (o.duration / (1.5 * wordCount)); - duration = (o.duration - wordCount * interval); - - /* If the cycle needs to reverse, reverse it all */ - if (options.reverse) { - set.reverse (); - } - i = 0; - - /* Iterate over all the elements run their animation function on it */ - for (i = 0, l = set.length; i < l; i++) { - var $word = $(set[i]), - delay = interval * i; - - /* Randomize if necessary */ - if (options.random !== false) { - - var randomDelay = Math.random() * wordCount * interval, - // If interval or random is negative, start from the bottom instead of top - uniformDelay = options.reverse ? - ((wordCount - i) * interval) : (i * interval); - - delay = randomDelay * options.random + Math.max(1 - options.random, 0) * uniformDelay; - } - - options.animate.call ($word, interval, duration, delay); - } - - setTimeout ( - function () { - $.type (options.finished) === 'function' && options.finished.call ($this[0], $set); - $.type (o.callback) === 'function' && o.callback.call ($this[0]); - - - $this.dequeue (); - }, o.duration - ); - - } - ); -}; \ No newline at end of file From c70b0f84c0e7a436addb3457a40013d9036017ca Mon Sep 17 00:00:00 2001 From: seankoole Date: Wed, 22 Dec 2010 21:12:21 +0100 Subject: [PATCH 03/25] Made the engine more efficient and better commented --- ui/jquery.effects.text.js | 179 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 179 insertions(+) create mode 100644 ui/jquery.effects.text.js diff --git a/ui/jquery.effects.text.js b/ui/jquery.effects.text.js new file mode 100644 index 00000000000..cc6944d261c --- /dev/null +++ b/ui/jquery.effects.text.js @@ -0,0 +1,179 @@ +var defaultOptions = { + easing: 'linear', + words: true, + text: '', + reverse: false, + random: false, + start: $.noop, + finished: $.noop +}; + + +$.effects.blockFadeOut = function (o, show) { + /* show is either 1 or null */ + + /* Internal callback to run when animation has finished */ + function finished ($set) { + this.empty (); + } + + /* Internal callback to run before animation has started */ + function start ($set) { + this.css ('opacity', 0); + } + + + var options = o.options = $.extend ({}, + defaultOptions, + o.options, + { + /* only run when we fadeOut */ + finished: !show ? finished : null, + /* only run when we fadeIn */ + beforeAnimate: show ? start : null, + /* animation function */ + animate: function (interval, duration, i, wordCount) { + + /* default delay */ + var delay = interval * i; + + /* + Randomize delay if necessary + Note, reverse doesn't really matter at this time + */ + if (options.random !== false) { + + var randomDelay = Math.random() * wordCount * interval, + /* If interval or random is negative, start from the bottom instead of top */ + uniformDelay = options.reverse ? + ((wordCount - i) * interval) : (i * interval); + + delay = randomDelay * options.random + Math.max(1 - options.random, 0) * uniformDelay; + } + + /* run it */ + this.delay (delay).animate ({opacity: show || 0}, duration, options.easing); + } + } + ); + + /* Pass everything to the general text engine */ + $.effects.textAnim.call (this, o); +} + + +$.effects.blockFadeIn = function (o) { + + /* Use the blockFadeOut, for redundancy purposes */ + $.effects.blockFadeOut.call (this, o, 1); +} + +$.effects.textAnim = function (o) { + + var options = o.options; + + return this.queue ( + function () { + + var replaceWith, tagReg, reg, html, i, $set, set, wordCount, duration, interval, + $this = $(this); + /* No height etc. */ + $this.width ($this.width ()); + $this.height ($this.height ()); + + /* + The following regular expression courtesy of Phil Haack + http://haacked.com/archive/2004/10/25/usingregularexpressionstomatchhtml.aspx + */ + tagReg = /(<\/?\w+((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[^'">\s]+))?)+\s*|\s*)\/?>)/g; + + /* Translation: /(HTML tag plus spaces)|(word/letter without '<' plus spaces)/g */ + if (options.words) { + reg = /(<\/?\w+((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[^'">\s]+))?)+\s*|\s*)\/?>)\s*|([^\s<]+\s*)/g; + }else{ + reg = /(<\/?\w+((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[^'">\s]+))?)+\s*|\s*)\/?>)\s*|([^\s<]\s*)/g; + } + + /* Make sure the correct html is in place */ + if (options.text !== '') { + $this.html (options.text); + } + + /* Set the current text to use */ + options.text = $this.html (); + + /* Get the words */ + words = options.text.match (reg); + + /* Array for HTML, will join later */ + html = []; + + /* Loop over the words and seperate them (put 'em in a span) */ + for (i = 0, l = words.length; i < l; i++) { + var word = words[i]; + + if (!word.match (tagReg)) { + html.push ('' + word + ''); + } else { + console.log (word); + html.push (word); + } + } + + + /* See how many words there are */ + wordCount = html.length; + + /* No words? halt */ + if (!wordCount) { + return; + } + + /* Put the newer correct html in place */ + $this.html (html.join ('')); + + /* Retreive the total set of elements */ + $set = $this.find ('span:not(:has(span))') + set = $set.get (); + + /* Calculate the duration and interval points */ + interval = (o.duration / (1.5 * wordCount)); + + duration = (o.duration - wordCount * interval); + + /* If the cycle needs to reverse, reverse it all */ + if (options.reverse) { + set.reverse (); + } + i = 0; + + /* Iterate over all the elements run their animation function on it */ + for (i = 0, l = set.length; i < l; i++) { + var $word = $(set[i]); + + /* Do something to the element before the animation starts */ + $.type (options.beforeAnimate) === 'function' && options.beforeAnimate.call ($word); + + /* + Call the animation per element + This way each method can define it's manipulation per element + */ + options.animate.call ($word, interval, duration, i, wordCount); + } + + setTimeout ( + function () { + /* internal callback when event has finished, therefor pass object */ + $.type (options.finished) === 'function' && options.finished.call ($this, $set); + + /* normal object, expecting domElement, so give it */ + $.type (o.callback) === 'function' && o.callback.call ($this[0]); + + /* dequeue the shizzle */ + $this.dequeue (); + }, o.duration + ); + + } + ); +}; \ No newline at end of file From 292513d7c6f86d8301d77f6d0f5ceb295dd84e2a Mon Sep 17 00:00:00 2001 From: seankoole Date: Wed, 22 Dec 2010 22:34:06 +0100 Subject: [PATCH 04/25] Added build and disintegrate methods --- ui/jquery.effects.text.js | 150 +++++++++++++++++++++++++++++--------- 1 file changed, 115 insertions(+), 35 deletions(-) diff --git a/ui/jquery.effects.text.js b/ui/jquery.effects.text.js index cc6944d261c..4d677fbc4de 100644 --- a/ui/jquery.effects.text.js +++ b/ui/jquery.effects.text.js @@ -2,15 +2,94 @@ var defaultOptions = { easing: 'linear', words: true, text: '', + distance: 1, // move element to/from where * parent.height () reverse: false, - random: false, - start: $.noop, - finished: $.noop + random: false }; +$.effects.disintegrate = function (o, show) { + + /* show is either 1 or null (build or disintegrate) */ + show = show ? 1 : 0; + + /* Internal callback to run before animation has started */ + function start ($set) { + + var $this = this.css (this.offset ()); + + setTimeout ( + function () { + $this.css ('position', 'absolute'); + }, 10 + ); + } + + var options = o.options = $.extend ({}, + defaultOptions, + o.options, + { + beforeAnimate: start, + /* animation function */ + animate: function (interval, duration, i, wordCount, parentCoords) { + + /* set some basic stuff */ + var offset = this.offset (), + width = this.width (), + height = this.height (), + properties = {}; + + /* Hide or show the element according to what we're going to do */ + this.css ({opacity: show ? 0 : 1}); + + if (show) { + /* we're going to build */ + properties.top = offset.top; + properties.opacity = 1; + this.css ('top', offset.top - parentCoords.height * options.distance); // 1 = o.distance + + } else { + /* We're going to disintegrate */ + properties.top = offset.top + parentCoords.height * options.distance; // 1 = o.distance + properties.opacity = 0; + } + + /* default delay */ + var delay = interval * i; + + /* + Randomize delay if necessary + Note, reverse doesn't really matter at this time + */ + if (options.random !== false) { + + var randomDelay = Math.random() * wordCount * interval, + /* If interval or random is negative, start from the bottom instead of top */ + uniformDelay = options.reverse ? + ((wordCount - i) * interval) : (i * interval); + + delay = randomDelay * options.random + Math.max(1 - options.random, 0) * uniformDelay; + } + + + + /* run it */ + this.delay (delay).animate (properties, duration, options.easing); + } + } + ); + + /* Pass everything to the general text engine */ + $.effects.textAnim.call (this, o); +} + +$.effects.build = function (o) { + /* Use the disintegrate, for redundancy purposes */ + $.effects.disintegrate.call (this, o, 1); +} $.effects.blockFadeOut = function (o, show) { /* show is either 1 or null */ + show = show || 0; /* Internal callback to run when animation has finished */ function finished ($set) { @@ -24,37 +103,37 @@ $.effects.blockFadeOut = function (o, show) { var options = o.options = $.extend ({}, - defaultOptions, - o.options, - { - /* only run when we fadeOut */ - finished: !show ? finished : null, - /* only run when we fadeIn */ - beforeAnimate: show ? start : null, - /* animation function */ - animate: function (interval, duration, i, wordCount) { - - /* default delay */ - var delay = interval * i; - - /* - Randomize delay if necessary - Note, reverse doesn't really matter at this time - */ - if (options.random !== false) { - - var randomDelay = Math.random() * wordCount * interval, - /* If interval or random is negative, start from the bottom instead of top */ - uniformDelay = options.reverse ? - ((wordCount - i) * interval) : (i * interval); - - delay = randomDelay * options.random + Math.max(1 - options.random, 0) * uniformDelay; - } + defaultOptions, + o.options, + { + /* only run when we fadeOut */ + finished: !show ? finished : null, + /* only run when we fadeIn */ + beforeAnimate: show ? start : null, + /* animation function */ + animate: function (interval, duration, i, wordCount, parentCoords) { + + /* default delay */ + var delay = interval * i; + + /* + Randomize delay if necessary + Note, reverse doesn't really matter at this time + */ + if (options.random !== false) { - /* run it */ - this.delay (delay).animate ({opacity: show || 0}, duration, options.easing); + var randomDelay = Math.random() * wordCount * interval, + /* If interval or random is negative, start from the bottom instead of top */ + uniformDelay = options.reverse ? + ((wordCount - i) * interval) : (i * interval); + + delay = randomDelay * options.random + Math.max(1 - options.random, 0) * uniformDelay; } + + /* run it */ + this.delay (delay).animate ({opacity: show}, duration, options.easing); } + } ); /* Pass everything to the general text engine */ @@ -63,7 +142,6 @@ $.effects.blockFadeOut = function (o, show) { $.effects.blockFadeIn = function (o) { - /* Use the blockFadeOut, for redundancy purposes */ $.effects.blockFadeOut.call (this, o, 1); } @@ -75,7 +153,7 @@ $.effects.textAnim = function (o) { return this.queue ( function () { - var replaceWith, tagReg, reg, html, i, $set, set, wordCount, duration, interval, + var replaceWith, tagReg, reg, html, i, $set, set, wordCount, duration, interval, parentCoords, $this = $(this); /* No height etc. */ $this.width ($this.width ()); @@ -115,7 +193,6 @@ $.effects.textAnim = function (o) { if (!word.match (tagReg)) { html.push ('' + word + ''); } else { - console.log (word); html.push (word); } } @@ -147,6 +224,9 @@ $.effects.textAnim = function (o) { } i = 0; + /* Width, height, left, top of parent for calculations */ + parentCoords = $.extend ($this.offset (), {width: $this.width (), height: $this.height ()}); + /* Iterate over all the elements run their animation function on it */ for (i = 0, l = set.length; i < l; i++) { var $word = $(set[i]); @@ -158,7 +238,7 @@ $.effects.textAnim = function (o) { Call the animation per element This way each method can define it's manipulation per element */ - options.animate.call ($word, interval, duration, i, wordCount); + options.animate.call ($word, interval, duration, i, wordCount, parentCoords); } setTimeout ( From dc40a5e348287edb44f6dc413d6a6cadfcf4cde4 Mon Sep 17 00:00:00 2001 From: seankoole Date: Wed, 22 Dec 2010 23:33:20 +0100 Subject: [PATCH 05/25] Added more information for external developers and added some perf --- ui/jquery.effects.text.js | 48 +++++++++++++++++++++++++++++++++------ 1 file changed, 41 insertions(+), 7 deletions(-) diff --git a/ui/jquery.effects.text.js b/ui/jquery.effects.text.js index 4d677fbc4de..04c62ed117c 100644 --- a/ui/jquery.effects.text.js +++ b/ui/jquery.effects.text.js @@ -1,8 +1,31 @@ +/* + list of callbacks + nice for when you make your own + + beforeAnimate + - runs on each element before each animation + - this = jQuery object of element + finished + - runs after all animations are done + - this = jQuery object of original selector + animate (interval, duration, i, wordCount, parentCoords) + - runs per element and is expected to animate it + - this = jQuery object of current animated element + - arguments: + * interval: the calculated interval between an animation + * duration: the duration of the current animation + * i: the current element index + * wordCount: total amount of words in your set + * parentCoords: hashmap of height, width and offset (left, top) of the original selector + + +*/ var defaultOptions = { easing: 'linear', words: true, text: '', distance: 1, // move element to/from where * parent.height () + direction: 'down', reverse: false, random: false }; @@ -15,6 +38,8 @@ $.effects.disintegrate = function (o, show) { /* Internal callback to run before animation has started */ function start ($set) { + + var $this = this.css (this.offset ()); setTimeout ( @@ -22,6 +47,7 @@ $.effects.disintegrate = function (o, show) { $this.css ('position', 'absolute'); }, 10 ); + } var options = o.options = $.extend ({}, @@ -33,7 +59,7 @@ $.effects.disintegrate = function (o, show) { animate: function (interval, duration, i, wordCount, parentCoords) { /* set some basic stuff */ - var offset = this.offset (), + var offset = this.position (), width = this.width (), height = this.height (), properties = {}; @@ -45,11 +71,19 @@ $.effects.disintegrate = function (o, show) { /* we're going to build */ properties.top = offset.top; properties.opacity = 1; - this.css ('top', offset.top - parentCoords.height * options.distance); // 1 = o.distance + if (options.direction === 'down') { + this.css ('top', offset.top - parentCoords.height * options.distance); // 1 = o.distance + } else { + this.css ('top', offset.top + parentCoords.height * options.distance); // 1 = o.distance + } } else { /* We're going to disintegrate */ - properties.top = offset.top + parentCoords.height * options.distance; // 1 = o.distance + if (options.direction === 'down') { + properties.top = offset.top + parentCoords.height * options.distance; // 1 = o.distance + } else { + properties.top = offset.top - parentCoords.height * options.distance; // 1 = o.distance + } properties.opacity = 0; } @@ -62,7 +96,7 @@ $.effects.disintegrate = function (o, show) { */ if (options.random !== false) { - var randomDelay = Math.random() * wordCount * interval, + var randomDelay = Math.random () * wordCount * interval, /* If interval or random is negative, start from the bottom instead of top */ uniformDelay = options.reverse ? ((wordCount - i) * interval) : (i * interval); @@ -122,12 +156,12 @@ $.effects.blockFadeOut = function (o, show) { */ if (options.random !== false) { - var randomDelay = Math.random() * wordCount * interval, + var randomDelay = Math.random () * wordCount * interval, /* If interval or random is negative, start from the bottom instead of top */ uniformDelay = options.reverse ? ((wordCount - i) * interval) : (i * interval); - delay = randomDelay * options.random + Math.max(1 - options.random, 0) * uniformDelay; + delay = randomDelay * options.random + Math.max (1 - options.random, 0) * uniformDelay; } /* run it */ @@ -159,6 +193,7 @@ $.effects.textAnim = function (o) { $this.width ($this.width ()); $this.height ($this.height ()); + /* The following regular expression courtesy of Phil Haack http://haacked.com/archive/2004/10/25/usingregularexpressionstomatchhtml.aspx @@ -222,7 +257,6 @@ $.effects.textAnim = function (o) { if (options.reverse) { set.reverse (); } - i = 0; /* Width, height, left, top of parent for calculations */ parentCoords = $.extend ($this.offset (), {width: $this.width (), height: $this.height ()}); From 9c0d0c724ad192b01118e5f4a7723ef74b1f324f Mon Sep 17 00:00:00 2001 From: seankoole Date: Thu, 23 Dec 2010 16:46:45 +0100 Subject: [PATCH 06/25] Added more flexibility for disintegration (top, bottom, left, right and combo's) --- ui/jquery.effects.text.js | 36 +++++++++++++++++++++++++++++------- 1 file changed, 29 insertions(+), 7 deletions(-) diff --git a/ui/jquery.effects.text.js b/ui/jquery.effects.text.js index 04c62ed117c..a66a995e936 100644 --- a/ui/jquery.effects.text.js +++ b/ui/jquery.effects.text.js @@ -25,7 +25,7 @@ var defaultOptions = { words: true, text: '', distance: 1, // move element to/from where * parent.height () - direction: 'down', + direction: 'up', reverse: false, random: false }; @@ -38,10 +38,14 @@ $.effects.disintegrate = function (o, show) { /* Internal callback to run before animation has started */ function start ($set) { - - + /* Set the current position of the element */ var $this = this.css (this.offset ()); + /* + Have to find out why this happends, + just doing this.css ('position', 'absolute') doesn't work >:-[ + So we use this hack + */ setTimeout ( function () { $this.css ('position', 'absolute'); @@ -50,10 +54,15 @@ $.effects.disintegrate = function (o, show) { } + function finished () { + this.empty (); + } + var options = o.options = $.extend ({}, defaultOptions, o.options, { + finished: show ? null : finished, beforeAnimate: start, /* animation function */ animate: function (interval, duration, i, wordCount, parentCoords) { @@ -70,20 +79,33 @@ $.effects.disintegrate = function (o, show) { if (show) { /* we're going to build */ properties.top = offset.top; + properties.left = offset.left; properties.opacity = 1; - if (options.direction === 'down') { + if (options.direction.indexOf ('top') !== -1) { this.css ('top', offset.top - parentCoords.height * options.distance); // 1 = o.distance - } else { + } else if (options.direction.indexOf ('bottom') !== -1) { this.css ('top', offset.top + parentCoords.height * options.distance); // 1 = o.distance } + + if (options.direction.indexOf ('left') !== -1) { + this.css ('left', offset.left - parentCoords.width * options.distance); // 1 = o.distance + } else if (options.direction.indexOf ('right') !== -1) { + this.css ('left', offset.left + parentCoords.width * options.distance); // 1 = o.distance + } } else { /* We're going to disintegrate */ - if (options.direction === 'down') { + if (options.direction.indexOf ('bottom') !== -1) { properties.top = offset.top + parentCoords.height * options.distance; // 1 = o.distance - } else { + } else if (options.direction.indexOf ('top') !== -1) { properties.top = offset.top - parentCoords.height * options.distance; // 1 = o.distance } + + if (options.direction.indexOf ('right') !== -1) { + properties.left = offset.left + parentCoords.width * options.distance; // 1 = o.distance + } else if (options.direction.indexOf ('left') !== -1) { + properties.left = offset.left - parentCoords.width * options.distance; // 1 = o.distance + } properties.opacity = 0; } From c15f2dff1ea7005276aa09cf7f04281e6ad8ec8a Mon Sep 17 00:00:00 2001 From: seankoole Date: Thu, 23 Dec 2010 20:49:56 +0100 Subject: [PATCH 07/25] Fixed bug reported by @ajpiano, elements are animated to document max width/height to avoid adding scrollbars --- ui/jquery.effects.text.js | 57 +++++++++++++++++++++++++++------------ 1 file changed, 40 insertions(+), 17 deletions(-) diff --git a/ui/jquery.effects.text.js b/ui/jquery.effects.text.js index a66a995e936..eec2ccf65ab 100644 --- a/ui/jquery.effects.text.js +++ b/ui/jquery.effects.text.js @@ -14,7 +14,7 @@ - arguments: * interval: the calculated interval between an animation * duration: the duration of the current animation - * i: the current element index + * i: the current element index * wordCount: total amount of words in your set * parentCoords: hashmap of height, width and offset (left, top) of the original selector @@ -32,6 +32,8 @@ var defaultOptions = { $.effects.disintegrate = function (o, show) { + var docHeight = $(document).height (), + docWidth = $(document).width (); /* show is either 1 or null (build or disintegrate) */ show = show ? 1 : 0; @@ -69,42 +71,63 @@ $.effects.disintegrate = function (o, show) { /* set some basic stuff */ var offset = this.position (), - width = this.width (), - height = this.height (), - properties = {}; + width = this.outerWidth (), + height = this.outerHeight (), + properties = {}, + /* max top */ + mTop = docHeight - height, + /* max left */ + mLeft = docWidth - width; /* Hide or show the element according to what we're going to do */ this.css ({opacity: show ? 0 : 1}); + var top, left; if (show) { /* we're going to build */ properties.top = offset.top; properties.left = offset.left; properties.opacity = 1; if (options.direction.indexOf ('top') !== -1) { - this.css ('top', offset.top - parentCoords.height * options.distance); // 1 = o.distance + top = offset.top - parentCoords.height * options.distance; + + this.css ('top', top < 0 ? 0 : top); // 1 = o.distance } else if (options.direction.indexOf ('bottom') !== -1) { - this.css ('top', offset.top + parentCoords.height * options.distance); // 1 = o.distance + top = offset.top + parentCoords.height * options.distance; + + this.css ('top', top > mTop ? mTop : top); // 1 = o.distance } if (options.direction.indexOf ('left') !== -1) { - this.css ('left', offset.left - parentCoords.width * options.distance); // 1 = o.distance + left = offset.left - parentCoords.width * options.distance; + + this.css ('left', left < 0 ? 0 : left); // 1 = o.distance } else if (options.direction.indexOf ('right') !== -1) { - this.css ('left', offset.left + parentCoords.width * options.distance); // 1 = o.distance + left = offset.left + parentCoords.width * options.distance; + + this.css ('left', left > mLeft ? mLeft : left); // 1 = o.distance } } else { /* We're going to disintegrate */ if (options.direction.indexOf ('bottom') !== -1) { - properties.top = offset.top + parentCoords.height * options.distance; // 1 = o.distance + top = offset.top + parentCoords.height * options.distance; + + properties.top = top > mTop ? mTop : top; // 1 = o.distance } else if (options.direction.indexOf ('top') !== -1) { - properties.top = offset.top - parentCoords.height * options.distance; // 1 = o.distance + var top = offset.top - parentCoords.height * options.distance + + properties.top = top > 0 ? 0 : top; // 1 = o.distance } if (options.direction.indexOf ('right') !== -1) { - properties.left = offset.left + parentCoords.width * options.distance; // 1 = o.distance + left = offset.left + parentCoords.width * options.distance; + + properties.left = left > mLeft ? mLeft : left; // 1 = o.distance } else if (options.direction.indexOf ('left') !== -1) { - properties.left = offset.left - parentCoords.width * options.distance; // 1 = o.distance + left = offset.left - parentCoords.width * options.distance; + + properties.left = left < 0 ? 0 : left; // 1 = o.distance } properties.opacity = 0; } @@ -136,12 +159,12 @@ $.effects.disintegrate = function (o, show) { /* Pass everything to the general text engine */ $.effects.textAnim.call (this, o); -} +}; $.effects.build = function (o) { /* Use the disintegrate, for redundancy purposes */ $.effects.disintegrate.call (this, o, 1); -} +}; $.effects.blockFadeOut = function (o, show) { /* show is either 1 or null */ @@ -194,13 +217,13 @@ $.effects.blockFadeOut = function (o, show) { /* Pass everything to the general text engine */ $.effects.textAnim.call (this, o); -} +}; $.effects.blockFadeIn = function (o) { /* Use the blockFadeOut, for redundancy purposes */ $.effects.blockFadeOut.call (this, o, 1); -} +}; $.effects.textAnim = function (o) { @@ -267,7 +290,7 @@ $.effects.textAnim = function (o) { $this.html (html.join ('')); /* Retreive the total set of elements */ - $set = $this.find ('span:not(:has(span))') + $set = $this.find ('span:not(:has(span))'); set = $set.get (); /* Calculate the duration and interval points */ From 1a4e445e75f70336fef84ff2c953850b1c4be3d1 Mon Sep 17 00:00:00 2001 From: seankoole Date: Fri, 24 Dec 2010 09:36:18 +0100 Subject: [PATCH 08/25] fixed bug with disintegration (to top) --- ui/jquery.effects.text.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/jquery.effects.text.js b/ui/jquery.effects.text.js index eec2ccf65ab..c8268878a30 100644 --- a/ui/jquery.effects.text.js +++ b/ui/jquery.effects.text.js @@ -117,7 +117,7 @@ $.effects.disintegrate = function (o, show) { } else if (options.direction.indexOf ('top') !== -1) { var top = offset.top - parentCoords.height * options.distance - properties.top = top > 0 ? 0 : top; // 1 = o.distance + properties.top = top < 0 ? 0 : top; // 1 = o.distance } if (options.direction.indexOf ('right') !== -1) { From 738cedae8b3db8dfdfbfab7554e4ec5bb3942d25 Mon Sep 17 00:00:00 2001 From: seankoole Date: Fri, 24 Dec 2010 12:02:51 +0100 Subject: [PATCH 09/25] used easeInSine for build and easeInCirc for disintegration as default animtions instead of linear --- ui/jquery.effects.text.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/jquery.effects.text.js b/ui/jquery.effects.text.js index c8268878a30..d07b2d07543 100644 --- a/ui/jquery.effects.text.js +++ b/ui/jquery.effects.text.js @@ -42,7 +42,6 @@ $.effects.disintegrate = function (o, show) { /* Set the current position of the element */ var $this = this.css (this.offset ()); - /* Have to find out why this happends, just doing this.css ('position', 'absolute') doesn't work >:-[ @@ -62,6 +61,7 @@ $.effects.disintegrate = function (o, show) { var options = o.options = $.extend ({}, defaultOptions, + {easing: show ? 'easeInSine' : 'easeInCirc'}, o.options, { finished: show ? null : finished, @@ -150,8 +150,8 @@ $.effects.disintegrate = function (o, show) { } - /* run it */ + console.log (options.easing); this.delay (delay).animate (properties, duration, options.easing); } } From 7f222c057dd85f2f0b1a4082bed91e2454c749fa Mon Sep 17 00:00:00 2001 From: seankoole Date: Fri, 24 Dec 2010 12:03:42 +0100 Subject: [PATCH 10/25] used easeOutInSine for fadeblockout/in --- ui/jquery.effects.text.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/jquery.effects.text.js b/ui/jquery.effects.text.js index d07b2d07543..f0bb38b572c 100644 --- a/ui/jquery.effects.text.js +++ b/ui/jquery.effects.text.js @@ -151,7 +151,6 @@ $.effects.disintegrate = function (o, show) { /* run it */ - console.log (options.easing); this.delay (delay).animate (properties, duration, options.easing); } } @@ -183,6 +182,7 @@ $.effects.blockFadeOut = function (o, show) { var options = o.options = $.extend ({}, defaultOptions, + {easing: 'easeInOutSine'}, o.options, { /* only run when we fadeOut */ From ca8451a73238c4811653fa0ab3266a981d465d55 Mon Sep 17 00:00:00 2001 From: seankoole Date: Fri, 24 Dec 2010 16:51:10 +0100 Subject: [PATCH 11/25] Added effecst 'type' and 'backspace' --- ui/jquery.effects.text.js | 83 +++++++++++++++++++++++++++++++++------ 1 file changed, 71 insertions(+), 12 deletions(-) diff --git a/ui/jquery.effects.text.js b/ui/jquery.effects.text.js index f0bb38b572c..606fcd37da0 100644 --- a/ui/jquery.effects.text.js +++ b/ui/jquery.effects.text.js @@ -17,19 +17,78 @@ * i: the current element index * wordCount: total amount of words in your set * parentCoords: hashmap of height, width and offset (left, top) of the original selector - - */ var defaultOptions = { easing: 'linear', words: true, text: '', distance: 1, // move element to/from where * parent.height () - direction: 'up', + direction: 'top', reverse: false, random: false }; + + +$.effects.backspace = function (o, show) { + /* show is either 1 or null */ + show = show || 0; + + /* Internal callback to run when animation has finished */ + function finished () { + this.empty (); + } + + /* Internal callback to run before animation has started */ + function beforeAnimate () { + this.css ('opacity', 0); + } + + var options = o.options = $.extend ({}, + defaultOptions, + {easing: 'easeInOutSine'}, + o.options, + {words: false, wordDelay: 0}, + { + finished: show ? null : finished, + beforeAnimate: show ? beforeAnimate : null, + animate: function (interval, duration, i, wordCount, parentCoords) { + + + var text = this.text (), + space = /\s/.test (text), + + /* default delay */ + delay = show ? + (interval * i) : (wordCount - i - 1) * interval; + + /* + Randomize delay if necessary + Note, reverse doesn't really matter at this time + */ + if (options.random !== false && show) { + var randomDelay = ((Math.random() * text.length * interval) * interval) / (1 + options.random); + + delay = randomDelay + options.wordDelay; + options.wordDelay = delay; + } + + + /* run it */ + this.delay (delay).animate ({opacity: show}, 10, options.easing); + } + } + ); + /* Pass everything to the general text engine */ + $.effects.textAnim.call (this, o); +}; + + +$.effects.type = function (o) { + /* Use the backspace, for redundancy purposes */ + $.effects.backspace.call (this, o, 1); +}; + $.effects.disintegrate = function (o, show) { var docHeight = $(document).height (), @@ -38,7 +97,7 @@ $.effects.disintegrate = function (o, show) { show = show ? 1 : 0; /* Internal callback to run before animation has started */ - function start ($set) { + function beforeAnimate () { /* Set the current position of the element */ var $this = this.css (this.offset ()); @@ -65,7 +124,7 @@ $.effects.disintegrate = function (o, show) { o.options, { finished: show ? null : finished, - beforeAnimate: start, + beforeAnimate: beforeAnimate, /* animation function */ animate: function (interval, duration, i, wordCount, parentCoords) { @@ -143,7 +202,7 @@ $.effects.disintegrate = function (o, show) { var randomDelay = Math.random () * wordCount * interval, /* If interval or random is negative, start from the bottom instead of top */ - uniformDelay = options.reverse ? + uniformDelay = options.reverse ? ((wordCount - i) * interval) : (i * interval); delay = randomDelay * options.random + Math.max(1 - options.random, 0) * uniformDelay; @@ -151,7 +210,7 @@ $.effects.disintegrate = function (o, show) { /* run it */ - this.delay (delay).animate (properties, duration, options.easing); + this.delay (delay/* + 10 /* fixes stuff in chrome*/).animate (properties, duration, options.easing); } } ); @@ -170,12 +229,12 @@ $.effects.blockFadeOut = function (o, show) { show = show || 0; /* Internal callback to run when animation has finished */ - function finished ($set) { + function finished () { this.empty (); } /* Internal callback to run before animation has started */ - function start ($set) { + function beforeAnimate () { this.css ('opacity', 0); } @@ -188,7 +247,7 @@ $.effects.blockFadeOut = function (o, show) { /* only run when we fadeOut */ finished: !show ? finished : null, /* only run when we fadeIn */ - beforeAnimate: show ? start : null, + beforeAnimate: show ? beforeAnimate : null, /* animation function */ animate: function (interval, duration, i, wordCount, parentCoords) { @@ -203,7 +262,7 @@ $.effects.blockFadeOut = function (o, show) { var randomDelay = Math.random () * wordCount * interval, /* If interval or random is negative, start from the bottom instead of top */ - uniformDelay = options.reverse ? + uniformDelay = options.reverse ? ((wordCount - i) * interval) : (i * interval); delay = randomDelay * options.random + Math.max (1 - options.random, 0) * uniformDelay; @@ -323,7 +382,7 @@ $.effects.textAnim = function (o) { setTimeout ( function () { /* internal callback when event has finished, therefor pass object */ - $.type (options.finished) === 'function' && options.finished.call ($this, $set); + $.type (options.finished) === 'function' && options.finished.call ($this); /* normal object, expecting domElement, so give it */ $.type (o.callback) === 'function' && o.callback.call ($this[0]); From 28d65304d9a51f3ead8932ab8bc56ddaf2ba828e Mon Sep 17 00:00:00 2001 From: seankoole Date: Tue, 28 Dec 2010 17:08:20 +0100 Subject: [PATCH 12/25] added textExplode and textConverge --- ui/jquery.effects.text.js | 135 ++++++++++++++++++++++++++++++++++++-- 1 file changed, 129 insertions(+), 6 deletions(-) diff --git a/ui/jquery.effects.text.js b/ui/jquery.effects.text.js index 606fcd37da0..686ddfcc3c9 100644 --- a/ui/jquery.effects.text.js +++ b/ui/jquery.effects.text.js @@ -28,8 +28,130 @@ var defaultOptions = { random: false }; +$.effects.textExplode = function (o, show) { -$.effects.backspace = function (o, show) { + var docHeight = $(document).height (), + docWidth = $(document).width (); + /* show is either 1 or null */ + show = show ? 1 : 0; + + /* Internal callback to run before animation has started */ + function beforeAnimate () { + + /* Set the current position of the element */ + var $this = this.css (this.offset ()); + /* + Have to find out why this happends, + just doing this.css ('position', 'absolute') doesn't work >:-[ + So we use this work around + */ + setTimeout ( + function () { + $this.css ('position', 'absolute'); + }, 10 + ); + + } + + function finished () { + this.empty (); + } + + var options = o.options = $.extend ({}, + defaultOptions, + {easing: show ? 'easeInSine' : 'easeInCirc'}, + o.options, + { + finished: show ? null : finished, + beforeAnimate: beforeAnimate, + /* animation function */ + animate: function (interval, duration, i, wordCount, parentCoords) { + + /* set some basic stuff */ + var offset = this.offset (), + offsetTo = {}, + width = this.outerWidth (), + height = this.outerHeight (), + properties = {}, + /* max top */ + mTop = docHeight - height, + /* max left */ + mLeft = docWidth - width, + distance = options.distance * 2, + distanceY, + distanceX, + distanceXY, + properties = {opacity: show ? 1 : 0}, + _duration = duration, + randomX = 0, + randomY = 0, + delay = 10; + + /* Hide or show the element according to what we're going to do */ + this.css ({opacity: show ? 0 : 1}); + + + if (options.random !== false) { + var seed = (Math.random () * options.random) + Math.max (1 - options.random, 0); + + distance *= seed; + duration *= seed; + +// To syncronize, give each piece an appropriate delay so they end together +//delay = ((args.unhide && args.sync) || (!args.unhide && !args.sync)) ? (args.duration - duration) : 0; + + randomX = Math.random () - 0.5; + randomY = Math.random () - 0.5; + } + + distanceY = ((parentCoords.height - height) / 2 - (offset.top - parentCoords.top)); + distanceX = ((parentCoords.width - width) / 2 - (offset.left - parentCoords.left)); + distanceXY = Math.sqrt (Math.pow (distanceX, 2) + Math.pow (distanceY, 2)); + + offsetTo.top = offset.top - distanceY * distance + distanceXY * randomY; + offsetTo.left = offset.left - distanceX * distance + distanceXY * randomX; + + if (offsetTo.top > (docHeight - height)) { + offsetTo.top = docHeight - height; + } else if (offsetTo.top < 0) { + offsetTo.top = 0; + } + + if (offsetTo.left > (docWidth - width)) { + offsetTo.left = docWidth - width; + } else if (offsetTo.left < 0) { + offsetTo.left = 0; + } + + if (show) { + this.css (offsetTo); + properties.top = offset.top; + properties.left = offset.left; + + } else { + this.css (offset); + properties.top = offsetTo.top; + properties.left = offsetTo.left; + } + + /* run it */ + this.delay (delay).animate (properties, duration, options.easing); + + + + } + } + ); + + /* Pass everything to the general text engine */ + $.effects.textAnim.call (this, o); +}; + +$.effects.textConverge = function (o) { + $.effects.textExplode.call (this, o, 1); +}; + +$.effects.backspace = function (o, show) { /* show is either 1 or null */ show = show || 0; @@ -66,9 +188,10 @@ $.effects.backspace = function (o, show) { Note, reverse doesn't really matter at this time */ if (options.random !== false && show) { - var randomDelay = ((Math.random() * text.length * interval) * interval) / (1 + options.random); + var randomDelay = (Math.random() * text.length * interval) * interval; - delay = randomDelay + options.wordDelay; + /* The higher the random % the slower */ + delay = (randomDelay / (2 - options.random)) + options.wordDelay; options.wordDelay = delay; } @@ -104,7 +227,7 @@ $.effects.disintegrate = function (o, show) { /* Have to find out why this happends, just doing this.css ('position', 'absolute') doesn't work >:-[ - So we use this hack + So we use this work around */ setTimeout ( function () { @@ -129,7 +252,7 @@ $.effects.disintegrate = function (o, show) { animate: function (interval, duration, i, wordCount, parentCoords) { /* set some basic stuff */ - var offset = this.position (), + var offset = this.offset (), width = this.outerWidth (), height = this.outerHeight (), properties = {}, @@ -210,7 +333,7 @@ $.effects.disintegrate = function (o, show) { /* run it */ - this.delay (delay/* + 10 /* fixes stuff in chrome*/).animate (properties, duration, options.easing); + this.delay (delay + 10 /* fixes stuff in chrome*/).animate (properties, duration, options.easing); } } ); From 49e409e97071d504860323300f7a56b12a1de724 Mon Sep 17 00:00:00 2001 From: seankoole Date: Sat, 15 Jan 2011 19:09:03 +0100 Subject: [PATCH 13/25] Changed code to match styleguide --- ui/jquery.effects.text.js | 813 +++++++++++++++++++------------------- 1 file changed, 400 insertions(+), 413 deletions(-) diff --git a/ui/jquery.effects.text.js b/ui/jquery.effects.text.js index 686ddfcc3c9..c9ac5c3db5d 100644 --- a/ui/jquery.effects.text.js +++ b/ui/jquery.effects.text.js @@ -1,520 +1,507 @@ /* - list of callbacks - nice for when you make your own - - beforeAnimate - - runs on each element before each animation - - this = jQuery object of element - finished - - runs after all animations are done - - this = jQuery object of original selector - animate (interval, duration, i, wordCount, parentCoords) - - runs per element and is expected to animate it - - this = jQuery object of current animated element - - arguments: - * interval: the calculated interval between an animation - * duration: the duration of the current animation - * i: the current element index - * wordCount: total amount of words in your set - * parentCoords: hashmap of height, width and offset (left, top) of the original selector -*/ -var defaultOptions = { - easing: 'linear', - words: true, - text: '', - distance: 1, // move element to/from where * parent.height () - direction: 'top', - reverse: false, - random: false -}; + * jQuery UI Effects Text @VERSION + * + * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Effects/.. + * + * Depends: + * jquery.effects.text.js + */ +(function( $, undefined ) { -$.effects.textExplode = function (o, show) { - - var docHeight = $(document).height (), - docWidth = $(document).width (); - /* show is either 1 or null */ - show = show ? 1 : 0; - - /* Internal callback to run before animation has started */ - function beforeAnimate () { - - /* Set the current position of the element */ - var $this = this.css (this.offset ()); - /* - Have to find out why this happends, - just doing this.css ('position', 'absolute') doesn't work >:-[ - So we use this work around - */ - setTimeout ( + + var defaultOptions = { + easing: 'linear', + words: true, + text: '', + distance: 1, + // move element to/from where * parent.height () + direction: 'top', + reverse: false, + random: false + }; + + $.effects.textExplode = function (o, show) { + + var docHeight = $(document).height(), + docWidth = $(document).width(); /* show is either 1 or null */ + show = show ? 1 : 0; + + /* Internal callback to run before animation has started */ + + function beforeAnimate() { + + /* Set the current position of the element */ + var $this = this.css(this.offset()); + /* + Have to find out why this happends, + just doing this.css ('position', 'absolute') doesn't work >:-[ + So we use this work around + */ + setTimeout( + function () { - $this.css ('position', 'absolute'); - }, 10 - ); - - } - - function finished () { - this.empty (); - } - - var options = o.options = $.extend ({}, - defaultOptions, - {easing: show ? 'easeInSine' : 'easeInCirc'}, - o.options, - { + $this.css('position', 'absolute'); + }, 10); + + } + + function finished() { + this.empty(); + } + + var options = o.options = $.extend({}, defaultOptions, { + easing: show ? 'easeInSine' : 'easeInCirc' + }, o.options, { finished: show ? null : finished, beforeAnimate: beforeAnimate, /* animation function */ animate: function (interval, duration, i, wordCount, parentCoords) { - + /* set some basic stuff */ - var offset = this.offset (), - offsetTo = {}, - width = this.outerWidth (), - height = this.outerHeight (), - properties = {}, + var offset = this.offset(), + offsetTo = {}, + width = this.outerWidth(), + height = this.outerHeight(), + properties = {}, /* max top */ - mTop = docHeight - height, + mTop = docHeight - height, /* max left */ - mLeft = docWidth - width, - distance = options.distance * 2, - distanceY, - distanceX, - distanceXY, - properties = {opacity: show ? 1 : 0}, - _duration = duration, - randomX = 0, - randomY = 0, - delay = 10; - + mLeft = docWidth - width, + distance = options.distance * 2, + distanceY, distanceX, distanceXY, properties = { + opacity: show ? 1 : 0 + }, + _duration = duration, + randomX = 0, + randomY = 0, + delay = 10; + /* Hide or show the element according to what we're going to do */ - this.css ({opacity: show ? 0 : 1}); - - + this.css({ + opacity: show ? 0 : 1 + }); + + if (options.random !== false) { - var seed = (Math.random () * options.random) + Math.max (1 - options.random, 0); - - distance *= seed; - duration *= seed; - -// To syncronize, give each piece an appropriate delay so they end together -//delay = ((args.unhide && args.sync) || (!args.unhide && !args.sync)) ? (args.duration - duration) : 0; - - randomX = Math.random () - 0.5; - randomY = Math.random () - 0.5; + var seed = (Math.random() * options.random) + Math.max(1 - options.random, 0); + + distance *= seed; + duration *= seed; + + // To syncronize, give each piece an appropriate delay so they end together + //delay = ((args.unhide && args.sync) || (!args.unhide && !args.sync)) ? (args.duration - duration) : 0; + randomX = Math.random() - 0.5; + randomY = Math.random() - 0.5; } - - distanceY = ((parentCoords.height - height) / 2 - (offset.top - parentCoords.top)); - distanceX = ((parentCoords.width - width) / 2 - (offset.left - parentCoords.left)); - distanceXY = Math.sqrt (Math.pow (distanceX, 2) + Math.pow (distanceY, 2)); - - offsetTo.top = offset.top - distanceY * distance + distanceXY * randomY; - offsetTo.left = offset.left - distanceX * distance + distanceXY * randomX; - + + distanceY = ((parentCoords.height - height) / 2 - (offset.top - parentCoords.top)); + distanceX = ((parentCoords.width - width) / 2 - (offset.left - parentCoords.left)); + distanceXY = Math.sqrt(Math.pow(distanceX, 2) + Math.pow(distanceY, 2)); + + offsetTo.top = offset.top - distanceY * distance + distanceXY * randomY; + offsetTo.left = offset.left - distanceX * distance + distanceXY * randomX; + if (offsetTo.top > (docHeight - height)) { - offsetTo.top = docHeight - height; + offsetTo.top = docHeight - height; } else if (offsetTo.top < 0) { - offsetTo.top = 0; + offsetTo.top = 0; } - + if (offsetTo.left > (docWidth - width)) { - offsetTo.left = docWidth - width; + offsetTo.left = docWidth - width; } else if (offsetTo.left < 0) { - offsetTo.left = 0; + offsetTo.left = 0; } - + if (show) { - this.css (offsetTo); - properties.top = offset.top; - properties.left = offset.left; - - } else { - this.css (offset); - properties.top = offsetTo.top; - properties.left = offsetTo.left; + this.css(offsetTo); + properties.top = offset.top; + properties.left = offset.left; + + } else { + this.css(offset); + properties.top = offsetTo.top; + properties.left = offsetTo.left; } - + /* run it */ - this.delay (delay).animate (properties, duration, options.easing); - - - + this.delay(delay).animate(properties, duration, options.easing); + + + } + }); + + /* Pass everything to the general text engine */ + $.effects.textAnim.call(this, o); + }; + + $.effects.textConverge = function (o) { + $.effects.textExplode.call(this, o, 1); + }; + + $.effects.backspace = function (o, show) { /* show is either 1 or null */ + show = show || 0; + + /* Internal callback to run when animation has finished */ + + function finished() { + this.empty(); } - ); - /* Pass everything to the general text engine */ - $.effects.textAnim.call (this, o); -}; - -$.effects.textConverge = function (o) { - $.effects.textExplode.call (this, o, 1); -}; - -$.effects.backspace = function (o, show) { - /* show is either 1 or null */ - show = show || 0; - - /* Internal callback to run when animation has finished */ - function finished () { - this.empty (); - } - - /* Internal callback to run before animation has started */ - function beforeAnimate () { - this.css ('opacity', 0); - } - - var options = o.options = $.extend ({}, - defaultOptions, - {easing: 'easeInOutSine'}, - o.options, - {words: false, wordDelay: 0}, - { + /* Internal callback to run before animation has started */ + + function beforeAnimate() { + this.css('opacity', 0); + } + + var options = o.options = $.extend({}, defaultOptions, { + easing: 'easeInOutSine' + }, o.options, { + words: false, + wordDelay: 0 + }, { finished: show ? null : finished, beforeAnimate: show ? beforeAnimate : null, animate: function (interval, duration, i, wordCount, parentCoords) { - - - var text = this.text (), - space = /\s/.test (text), - - /* default delay */ - delay = show ? - (interval * i) : (wordCount - i - 1) * interval; - - /* - Randomize delay if necessary - Note, reverse doesn't really matter at this time - */ + + + var text = this.text(), + space = /\s/.test(text), + + /* default delay */ + delay = show ? (interval * i) : (wordCount - i - 1) * interval; + + /* + Randomize delay if necessary + Note, reverse doesn't really matter at this time + */ if (options.random !== false && show) { var randomDelay = (Math.random() * text.length * interval) * interval; - + /* The higher the random % the slower */ - delay = (randomDelay / (2 - options.random)) + options.wordDelay; + delay = (randomDelay / (2 - options.random)) + options.wordDelay; options.wordDelay = delay; } - - + + /* run it */ - this.delay (delay).animate ({opacity: show}, 10, options.easing); + this.delay(delay).animate({ + opacity: show + }, 10, options.easing); } - } - ); + }); + + /* Pass everything to the general text engine */ + $.effects.textAnim.call(this, o); + }; + + + $.effects.type = function (o) { /* Use the backspace, for redundancy purposes */ + $.effects.backspace.call(this, o, 1); + }; + + $.effects.disintegrate = function (o, show) { + + var docHeight = $(document).height(), + docWidth = $(document).width(); /* show is either 1 or null (build or disintegrate) */ + show = show ? 1 : 0; + + /* Internal callback to run before animation has started */ + + function beforeAnimate() { + + /* Set the current position of the element */ + var $this = this.css(this.offset()); + /* + Have to find out why this happends, + just doing this.css ('position', 'absolute') doesn't work >:-[ + So we use this work around + */ + setTimeout( - /* Pass everything to the general text engine */ - $.effects.textAnim.call (this, o); -}; - - -$.effects.type = function (o) { - /* Use the backspace, for redundancy purposes */ - $.effects.backspace.call (this, o, 1); -}; - -$.effects.disintegrate = function (o, show) { - - var docHeight = $(document).height (), - docWidth = $(document).width (); - /* show is either 1 or null (build or disintegrate) */ - show = show ? 1 : 0; - - /* Internal callback to run before animation has started */ - function beforeAnimate () { - - /* Set the current position of the element */ - var $this = this.css (this.offset ()); - /* - Have to find out why this happends, - just doing this.css ('position', 'absolute') doesn't work >:-[ - So we use this work around - */ - setTimeout ( function () { - $this.css ('position', 'absolute'); - }, 10 - ); - - } - - function finished () { - this.empty (); - } - - var options = o.options = $.extend ({}, - defaultOptions, - {easing: show ? 'easeInSine' : 'easeInCirc'}, - o.options, - { + $this.css('position', 'absolute'); + }, 10); + + } + + function finished() { + this.empty(); + } + + var options = o.options = $.extend({}, defaultOptions, { + easing: show ? 'easeInSine' : 'easeInCirc' + }, o.options, { finished: show ? null : finished, beforeAnimate: beforeAnimate, /* animation function */ animate: function (interval, duration, i, wordCount, parentCoords) { - + /* set some basic stuff */ - var offset = this.offset (), - width = this.outerWidth (), - height = this.outerHeight (), - properties = {}, + var offset = this.offset(), + width = this.outerWidth(), + height = this.outerHeight(), + properties = {}, /* max top */ - mTop = docHeight - height, + mTop = docHeight - height, /* max left */ - mLeft = docWidth - width; - + mLeft = docWidth - width; + /* Hide or show the element according to what we're going to do */ - this.css ({opacity: show ? 0 : 1}); - + this.css({ + opacity: show ? 0 : 1 + }); + var top, left; - if (show) { - /* we're going to build */ - properties.top = offset.top; - properties.left = offset.left; - properties.opacity = 1; - if (options.direction.indexOf ('top') !== -1) { - top = offset.top - parentCoords.height * options.distance; - - this.css ('top', top < 0 ? 0 : top); // 1 = o.distance - } else if (options.direction.indexOf ('bottom') !== -1) { - top = offset.top + parentCoords.height * options.distance; - - this.css ('top', top > mTop ? mTop : top); // 1 = o.distance + if (show) { /* we're going to build */ + properties.top = offset.top; + properties.left = offset.left; + properties.opacity = 1; + if (options.direction.indexOf('top') !== -1) { + top = offset.top - parentCoords.height * options.distance; + + this.css('top', top < 0 ? 0 : top); // 1 = o.distance + } else if (options.direction.indexOf('bottom') !== -1) { + top = offset.top + parentCoords.height * options.distance; + + this.css('top', top > mTop ? mTop : top); // 1 = o.distance } - - if (options.direction.indexOf ('left') !== -1) { - left = offset.left - parentCoords.width * options.distance; - - this.css ('left', left < 0 ? 0 : left); // 1 = o.distance - } else if (options.direction.indexOf ('right') !== -1) { - left = offset.left + parentCoords.width * options.distance; - - this.css ('left', left > mLeft ? mLeft : left); // 1 = o.distance + + if (options.direction.indexOf('left') !== -1) { + left = offset.left - parentCoords.width * options.distance; + + this.css('left', left < 0 ? 0 : left); // 1 = o.distance + } else if (options.direction.indexOf('right') !== -1) { + left = offset.left + parentCoords.width * options.distance; + + this.css('left', left > mLeft ? mLeft : left); // 1 = o.distance } - - } else { - /* We're going to disintegrate */ - if (options.direction.indexOf ('bottom') !== -1) { - top = offset.top + parentCoords.height * options.distance; - - properties.top = top > mTop ? mTop : top; // 1 = o.distance - } else if (options.direction.indexOf ('top') !== -1) { - var top = offset.top - parentCoords.height * options.distance - - properties.top = top < 0 ? 0 : top; // 1 = o.distance + + } else { /* We're going to disintegrate */ + if (options.direction.indexOf('bottom') !== -1) { + top = offset.top + parentCoords.height * options.distance; + + properties.top = top > mTop ? mTop : top; // 1 = o.distance + } else if (options.direction.indexOf('top') !== -1) { + var top = offset.top - parentCoords.height * options.distance + + properties.top = top < 0 ? 0 : top; // 1 = o.distance } - - if (options.direction.indexOf ('right') !== -1) { - left = offset.left + parentCoords.width * options.distance; - - properties.left = left > mLeft ? mLeft : left; // 1 = o.distance - } else if (options.direction.indexOf ('left') !== -1) { - left = offset.left - parentCoords.width * options.distance; - - properties.left = left < 0 ? 0 : left; // 1 = o.distance + + if (options.direction.indexOf('right') !== -1) { + left = offset.left + parentCoords.width * options.distance; + + properties.left = left > mLeft ? mLeft : left; // 1 = o.distance + } else if (options.direction.indexOf('left') !== -1) { + left = offset.left - parentCoords.width * options.distance; + + properties.left = left < 0 ? 0 : left; // 1 = o.distance } - properties.opacity = 0; + properties.opacity = 0; } - + /* default delay */ - var delay = interval * i; - - /* - Randomize delay if necessary - Note, reverse doesn't really matter at this time - */ + var delay = interval * i; + + /* + Randomize delay if necessary + Note, reverse doesn't really matter at this time + */ if (options.random !== false) { - - var randomDelay = Math.random () * wordCount * interval, - /* If interval or random is negative, start from the bottom instead of top */ - uniformDelay = options.reverse ? - ((wordCount - i) * interval) : (i * interval); - + + var randomDelay = Math.random() * wordCount * interval, + /* If interval or random is negative, start from the bottom instead of top */ + uniformDelay = options.reverse ? ((wordCount - i) * interval) : (i * interval); + delay = randomDelay * options.random + Math.max(1 - options.random, 0) * uniformDelay; } - - + + /* run it */ - this.delay (delay + 10 /* fixes stuff in chrome*/).animate (properties, duration, options.easing); + this.delay(delay + 10 /* fixes stuff in chrome*/ ).animate(properties, duration, options.easing); } + }); + + /* Pass everything to the general text engine */ + $.effects.textAnim.call(this, o); + }; + + $.effects.build = function (o) { /* Use the disintegrate, for redundancy purposes */ + $.effects.disintegrate.call(this, o, 1); + }; + + $.effects.blockFadeOut = function (o, show) { /* show is either 1 or null */ + show = show || 0; + + /* Internal callback to run when animation has finished */ + + function finished() { + this.empty(); } - ); - /* Pass everything to the general text engine */ - $.effects.textAnim.call (this, o); -}; - -$.effects.build = function (o) { - /* Use the disintegrate, for redundancy purposes */ - $.effects.disintegrate.call (this, o, 1); -}; - -$.effects.blockFadeOut = function (o, show) { - /* show is either 1 or null */ - show = show || 0; - - /* Internal callback to run when animation has finished */ - function finished () { - this.empty (); - } - - /* Internal callback to run before animation has started */ - function beforeAnimate () { - this.css ('opacity', 0); - } - - - var options = o.options = $.extend ({}, - defaultOptions, - {easing: 'easeInOutSine'}, - o.options, - { - /* only run when we fadeOut */ + /* Internal callback to run before animation has started */ + + function beforeAnimate() { + this.css('opacity', 0); + } + + + var options = o.options = $.extend({}, defaultOptions, { + easing: 'easeInOutSine' + }, o.options, { /* only run when we fadeOut */ finished: !show ? finished : null, /* only run when we fadeIn */ beforeAnimate: show ? beforeAnimate : null, /* animation function */ animate: function (interval, duration, i, wordCount, parentCoords) { - + /* default delay */ - var delay = interval * i; - - /* - Randomize delay if necessary - Note, reverse doesn't really matter at this time - */ + var delay = interval * i; + + /* + Randomize delay if necessary + Note, reverse doesn't really matter at this time + */ if (options.random !== false) { - - var randomDelay = Math.random () * wordCount * interval, - /* If interval or random is negative, start from the bottom instead of top */ - uniformDelay = options.reverse ? - ((wordCount - i) * interval) : (i * interval); - - delay = randomDelay * options.random + Math.max (1 - options.random, 0) * uniformDelay; + + var randomDelay = Math.random() * wordCount * interval, + /* If interval or random is negative, start from the bottom instead of top */ + uniformDelay = options.reverse ? ((wordCount - i) * interval) : (i * interval); + + delay = randomDelay * options.random + Math.max(1 - options.random, 0) * uniformDelay; } - + /* run it */ - this.delay (delay).animate ({opacity: show}, duration, options.easing); + this.delay(delay).animate({ + opacity: show + }, duration, options.easing); } - } - ); + }); + + /* Pass everything to the general text engine */ + $.effects.textAnim.call(this, o); + }; + + + $.effects.blockFadeIn = function (o) { /* Use the blockFadeOut, for redundancy purposes */ + $.effects.blockFadeOut.call(this, o, 1); + }; + + $.effects.textAnim = function (o) { + + var options = o.options; + + return this.queue( - /* Pass everything to the general text engine */ - $.effects.textAnim.call (this, o); -}; - - -$.effects.blockFadeIn = function (o) { - /* Use the blockFadeOut, for redundancy purposes */ - $.effects.blockFadeOut.call (this, o, 1); -}; - -$.effects.textAnim = function (o) { - - var options = o.options; - - return this.queue ( function () { - - var replaceWith, tagReg, reg, html, i, $set, set, wordCount, duration, interval, parentCoords, - $this = $(this); - /* No height etc. */ - $this.width ($this.width ()); - $this.height ($this.height ()); - - - /* - The following regular expression courtesy of Phil Haack - http://haacked.com/archive/2004/10/25/usingregularexpressionstomatchhtml.aspx - */ + + var replaceWith, tagReg, reg, html, i, $set, set, wordCount, duration, interval, parentCoords, $this = $(this); /* No height etc. */ + $this.width($this.width()); + $this.height($this.height()); + + + /* + The following regular expression courtesy of Phil Haack + http://haacked.com/archive/2004/10/25/usingregularexpressionstomatchhtml.aspx + */ tagReg = /(<\/?\w+((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[^'">\s]+))?)+\s*|\s*)\/?>)/g; - + /* Translation: /(HTML tag plus spaces)|(word/letter without '<' plus spaces)/g */ if (options.words) { reg = /(<\/?\w+((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[^'">\s]+))?)+\s*|\s*)\/?>)\s*|([^\s<]+\s*)/g; - }else{ + } else { reg = /(<\/?\w+((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[^'">\s]+))?)+\s*|\s*)\/?>)\s*|([^\s<]\s*)/g; } - + /* Make sure the correct html is in place */ if (options.text !== '') { - $this.html (options.text); + $this.html(options.text); } - + /* Set the current text to use */ - options.text = $this.html (); - + options.text = $this.html(); + /* Get the words */ - words = options.text.match (reg); - + words = options.text.match(reg); + /* Array for HTML, will join later */ - html = []; - + html = []; + /* Loop over the words and seperate them (put 'em in a span) */ for (i = 0, l = words.length; i < l; i++) { - var word = words[i]; - - if (!word.match (tagReg)) { - html.push ('' + word + ''); + var word = words[i]; + + if (!word.match(tagReg)) { + html.push('' + word + ''); } else { - html.push (word); + html.push(word); } } - - + + /* See how many words there are */ - wordCount = html.length; - + wordCount = html.length; + /* No words? halt */ if (!wordCount) { return; } - + /* Put the newer correct html in place */ - $this.html (html.join ('')); - + $this.html(html.join('')); + /* Retreive the total set of elements */ - $set = $this.find ('span:not(:has(span))'); - set = $set.get (); - + $set = $this.find('span:not(:has(span))'); + set = $set.get(); + /* Calculate the duration and interval points */ interval = (o.duration / (1.5 * wordCount)); - + duration = (o.duration - wordCount * interval); - + /* If the cycle needs to reverse, reverse it all */ if (options.reverse) { - set.reverse (); + set.reverse(); } - + /* Width, height, left, top of parent for calculations */ - parentCoords = $.extend ($this.offset (), {width: $this.width (), height: $this.height ()}); - + parentCoords = $.extend($this.offset(), { + width: $this.width(), + height: $this.height() + }); + /* Iterate over all the elements run their animation function on it */ for (i = 0, l = set.length; i < l; i++) { - var $word = $(set[i]); - + var $word = $(set[i]); + /* Do something to the element before the animation starts */ - $.type (options.beforeAnimate) === 'function' && options.beforeAnimate.call ($word); - - /* - Call the animation per element - This way each method can define it's manipulation per element - */ - options.animate.call ($word, interval, duration, i, wordCount, parentCoords); + $.type(options.beforeAnimate) === 'function' && options.beforeAnimate.call($word); + + /* + Call the animation per element + This way each method can define it's manipulation per element + */ + options.animate.call($word, interval, duration, i, wordCount, parentCoords); } - - setTimeout ( - function () { - /* internal callback when event has finished, therefor pass object */ - $.type (options.finished) === 'function' && options.finished.call ($this); - - /* normal object, expecting domElement, so give it */ - $.type (o.callback) === 'function' && o.callback.call ($this[0]); + + setTimeout( + + function () { /* internal callback when event has finished, therefor pass object */ + $.type(options.finished) === 'function' && options.finished.call($this); + + /* normal object, expecting domElement, so give it */ + $.type(o.callback) === 'function' && o.callback.call($this[0]); + + /* dequeue the shizzle */ + $this.dequeue(); + }, o.duration); + + }); + }; - /* dequeue the shizzle */ - $this.dequeue (); - }, o.duration - ); - - } - ); -}; \ No newline at end of file +})(jQuery); From 90a5906af538b57fc3f69c0b84c2e11d5b742c6e Mon Sep 17 00:00:00 2001 From: jzaefferer Date: Mon, 17 Jan 2011 19:25:14 +0100 Subject: [PATCH 14/25] Renamed glob.js to jquery.global.js to match actual plugin filenames. --- demos/index.html | 4 ++-- demos/spinner/currency.html | 6 +++--- demos/spinner/decimal.html | 6 +++--- demos/spinner/time.html | 4 ++-- external/{glob.de-DE.js => jquery.global.de-DE.js} | 0 external/{glob.ja-JP.js => jquery.global.ja-JP.js} | 0 external/{glob.js => jquery.global.js} | 0 tests/unit/spinner/spinner.html | 2 +- 8 files changed, 11 insertions(+), 11 deletions(-) rename external/{glob.de-DE.js => jquery.global.de-DE.js} (100%) rename external/{glob.ja-JP.js => jquery.global.ja-JP.js} (100%) rename external/{glob.js => jquery.global.js} (100%) diff --git a/demos/index.html b/demos/index.html index c249ef1be8e..af4183ae63b 100644 --- a/demos/index.html +++ b/demos/index.html @@ -7,8 +7,8 @@ - - + + diff --git a/demos/spinner/currency.html b/demos/spinner/currency.html index 2439674a028..1c2f01a7270 100644 --- a/demos/spinner/currency.html +++ b/demos/spinner/currency.html @@ -6,9 +6,9 @@ - - - + + + diff --git a/demos/spinner/decimal.html b/demos/spinner/decimal.html index 6f4b92da110..f396c18d203 100644 --- a/demos/spinner/decimal.html +++ b/demos/spinner/decimal.html @@ -6,9 +6,9 @@ - - - + + + diff --git a/demos/spinner/time.html b/demos/spinner/time.html index e38ee296fab..8c5560507b1 100644 --- a/demos/spinner/time.html +++ b/demos/spinner/time.html @@ -6,8 +6,8 @@ - - + + diff --git a/external/glob.de-DE.js b/external/jquery.global.de-DE.js similarity index 100% rename from external/glob.de-DE.js rename to external/jquery.global.de-DE.js diff --git a/external/glob.ja-JP.js b/external/jquery.global.ja-JP.js similarity index 100% rename from external/glob.ja-JP.js rename to external/jquery.global.ja-JP.js diff --git a/external/glob.js b/external/jquery.global.js similarity index 100% rename from external/glob.js rename to external/jquery.global.js diff --git a/tests/unit/spinner/spinner.html b/tests/unit/spinner/spinner.html index ac90dcf6a29..92385669f92 100644 --- a/tests/unit/spinner/spinner.html +++ b/tests/unit/spinner/spinner.html @@ -7,7 +7,7 @@ - + From 0bbfbd431c8701adb8ed8caf439eaa73216628e0 Mon Sep 17 00:00:00 2001 From: jzaefferer Date: Mon, 17 Jan 2011 19:26:59 +0100 Subject: [PATCH 15/25] Updated global plugin to latest version. --- external/jquery.global.js | 64 +++++++++++++++++++-------------------- 1 file changed, 31 insertions(+), 33 deletions(-) diff --git a/external/jquery.global.js b/external/jquery.global.js index 8075ee2bd2e..fcaacf9c756 100644 --- a/external/jquery.global.js +++ b/external/jquery.global.js @@ -1,11 +1,14 @@ -/* - * Globalization - * http://github.com/nje/jquery-glob +/*! + * jQuery Globalization Plugin + * http://github.com/jquery/jquery-global + * + * Copyright Software Freedom Conservancy, Inc. + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license */ (function() { -var Globalization = {}, - localized = { en: {} }; +var Globalization = {}, localized = { en: {} }; localized["default"] = localized.en; Globalization.extend = function( deep ) { @@ -106,10 +109,12 @@ Globalization.preferCulture = function(name) { this.culture = this.findClosestCulture( name ) || this.cultures["default"]; } Globalization.localize = function(key, culture, value) { - if (typeof culture === 'string') { - culture = culture || "default"; - culture = this.cultures[ culture ] || { name: culture }; + // usign default culture in case culture is not provided + if (typeof culture !== 'string') { + culture = this.culture.name || this.culture || "default"; } + culture = this.cultures[ culture ] || { name: culture }; + var local = localized[ culture.name ]; if ( arguments.length === 3 ) { if ( !local) { @@ -146,6 +151,9 @@ Globalization.format = function(value, format, culture) { Globalization.parseInt = function(value, radix, culture) { return Math.floor( this.parseFloat( value, radix, culture ) ); } +Globalization.parseCurrency = function(value, culture) { + return this.parseFloat(value.replace(/[^\d,.-]/g, ""), 10, culture); +} Globalization.parseFloat = function(value, radix, culture) { culture = this.findClosestCulture( culture ); var ret = NaN, @@ -297,7 +305,7 @@ var en = cultures["default"] = cultures.en = Globalization.extend(true, { // And the 'zh-SG' culture is Simplified Chinese in Singapore, whose lanugage // field is "zh-CHS", not "zh". // This field should be used to navigate from a specific culture to it's - // more general, neutral culture. If a culture is already as general as it + // more general, neutral culture. If a culture is already as general as it // can get, the language may refer to itself. language: "en", // numberFormat defines general number formatting rules, like the digits in @@ -307,7 +315,7 @@ var en = cultures["default"] = cultures.en = Globalization.extend(true, { // Note, numberFormat.pattern has no 'positivePattern' unlike percent and currency, // but is still defined as an array for consistency with them. // negativePattern: one of "(n)|-n|- n|n-|n -" - pattern: ["-n"], + pattern: ["-n"], // number of decimal places normally shown decimals: 2, // string that separates number groups, as in 1,000,000 @@ -325,7 +333,7 @@ var en = cultures["default"] = cultures.en = Globalization.extend(true, { // [negativePattern, positivePattern] // negativePattern: one of "-n %|-n%|-%n|%-n|%n-|n-%|n%-|-% n|n %-|% n-|% -n|n- %" // positivePattern: one of "n %|n%|%n|% n" - pattern: ["-n %","n %"], + pattern: ["-n %","n %"], // number of decimal places normally shown decimals: 2, // array of numbers indicating the size of each number group. @@ -389,7 +397,7 @@ var en = cultures["default"] = cultures.en = Globalization.extend(true, { }, // AM and PM designators in one of these forms: // The usual view, and the upper and lower case versions - // [standard,lowercase,uppercase] + // [standard,lowercase,uppercase] // The culture does not use AM or PM (likely all standard date formats use 24 hour time) // null AM: ["AM", "am", "AM"], @@ -443,7 +451,7 @@ var en = cultures["default"] = cultures.en = Globalization.extend(true, { Given the date as a parameter, return an array with parts [year, month, day] corresponding to the non-gregorian based year, month, and day for the calendar. toGregorian(year, month, day) - Given the non-gregorian year, month, and day, return a new Date() object + Given the non-gregorian year, month, and day, return a new Date() object set to the corresponding date in the gregorian calendar. */ } @@ -512,7 +520,7 @@ function expandNumber(number, precision, formatInfo) { rounded = number; } number = rounded; - + var numberString = number+"", right = "", split = numberString.split(/e/i), @@ -521,7 +529,7 @@ function expandNumber(number, precision, formatInfo) { split = numberString.split( "." ); numberString = split[ 0 ]; right = split.length > 1 ? split[ 1 ] : ""; - + var l; if ( exponent > 0 ) { right = zeroPad( right, exponent, false ); @@ -728,7 +736,7 @@ function getEraYear(date, cal, era, sortable) { // convert normal gregorian year to era-shifted gregorian // year by subtracting the era offset year -= cal.eras[ era ].offset; - } + } return year; } @@ -764,7 +772,7 @@ function getMonthIndex(cal, value, abbr) { if ( !upperMonths ) { cal._upperMonths = upperMonths = [ toUpperArray( months.names ), - toUpperArray( months.namesAbbr ), + toUpperArray( months.namesAbbr ) ]; cal._upperMonthsGen = upperMonthsGen = [ toUpperArray( monthsGen.names ), @@ -1153,7 +1161,7 @@ function formatDate(value, format, culture) { } return r; } - + function hasDay() { if ( foundDay || checkedDay ) { return foundDay; @@ -1162,7 +1170,7 @@ function formatDate(value, format, culture) { checkedDay = true; return foundDay; } - + function getPart( date, part ) { if ( converted ) { return converted[ part ]; @@ -1197,7 +1205,7 @@ function formatDate(value, format, culture) { ret.push( ar[ 0 ] ); continue; } - + var current = ar[ 0 ], clength = current.length; @@ -1284,7 +1292,7 @@ function formatDate(value, format, culture) { // Milliseconds ret.push( padZeros( value.getMilliseconds(), 3 ).substr( 0, clength ) ); break; - case "z": + case "z": // Time zone offset, no leading zero case "zz": // Time zone offset with leading zero @@ -1317,17 +1325,7 @@ function formatDate(value, format, culture) { } // EXPORTS - -window.Globalization = Globalization; - -//jQuery.findClosestCulture = Globalization.findClosestCulture; -//jQuery.culture = Globalization.culture; -//jQuery.cultures = Globalization.cultures -//jQuery.preferCulture = Globalization.preferCulture -//jQuery.localize = Globalization.localize -//jQuery.format = Globalization.format -//jQuery.parseInt = Globalization.parseInt -//jQuery.parseFloat = Globalization.parseFloat -//jQuery.parseDate = Globalization.parseDate +jQuery.global = Globalization; })(); + From 7608e4a1d604d6215693f88526947ecc61e8b8ed Mon Sep 17 00:00:00 2001 From: jzaefferer Date: Mon, 17 Jan 2011 19:36:42 +0100 Subject: [PATCH 16/25] Update example culture files to $.global --- external/jquery.global.de-DE.js | 4 ++-- external/jquery.global.ja-JP.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/external/jquery.global.de-DE.js b/external/jquery.global.de-DE.js index d68b84cc8c5..e526e783114 100644 --- a/external/jquery.global.de-DE.js +++ b/external/jquery.global.de-DE.js @@ -1,5 +1,5 @@ (function($) { - var cultures = $.cultures, + var cultures = $.global.cultures, en = cultures.en, standard = en.calendars.standard, culture = cultures["de-DE"] = $.extend(true, {}, en, { @@ -52,4 +52,4 @@ } }, cultures["de-DE"]); culture.calendar = culture.calendars.standard; -})(Globalization); \ No newline at end of file +})(jQuery); \ No newline at end of file diff --git a/external/jquery.global.ja-JP.js b/external/jquery.global.ja-JP.js index 454d478cb42..3673cefd1a7 100644 --- a/external/jquery.global.ja-JP.js +++ b/external/jquery.global.ja-JP.js @@ -1,5 +1,5 @@ (function($) { - var cultures = $.cultures, + var cultures = $.global.cultures, en = cultures.en, standard = en.calendars.standard, culture = cultures["ja-JP"] = $.extend(true, {}, en, { @@ -71,4 +71,4 @@ } }, cultures["ja-JP"]); culture.calendar = culture.calendars.standard; -})(Globalization); \ No newline at end of file +})(jQuery); \ No newline at end of file From 67b070f97a6dc4907cbb5e69b8899c0b5c716684 Mon Sep 17 00:00:00 2001 From: Ivan Peters Date: Tue, 18 Jan 2011 16:25:58 +1300 Subject: [PATCH 17/25] Datepicker: Update parseDate to properly handle a string value in shortYearCutoff. Fixed #6872: parseDate does not default shortYearCutoff correctly. --- tests/unit/datepicker/datepicker_options.js | 25 ++++++++++++--------- ui/jquery.ui.datepicker.js | 2 ++ 2 files changed, 17 insertions(+), 10 deletions(-) diff --git a/tests/unit/datepicker/datepicker_options.js b/tests/unit/datepicker/datepicker_options.js index af561a78389..33b07d6949d 100644 --- a/tests/unit/datepicker/datepicker_options.js +++ b/tests/unit/datepicker/datepicker_options.js @@ -796,16 +796,21 @@ test('parseDate', function() { equalsDate($.datepicker.parseDate('\'day\' d \'of\' MM (\'\'DD\'\'), yy', 'day 3 of February (\'Saturday\'), 2001'), new Date(2001, 2 - 1, 3), 'Parse date \'day\' d \'of\' MM (\'\'DD\'\'), yy'); - equalsDate($.datepicker.parseDate('ymmdd', '010203'), - new Date(2001, 2 - 1, 3), 'Parse date ymmdd - default cutoff'); - equalsDate($.datepicker.parseDate('y-m-d', '01-02-03'), - new Date(2001, 2 - 1, 3), 'Parse date y-m-d - default cutoff'); - equalsDate($.datepicker.parseDate('y-m-d', '51-02-03'), - new Date(1951, 2 - 1, 3), 'Parse date y-m-d - default cutoff'); - equalsDate($.datepicker.parseDate('y-m-d', '51-02-03', {shortYearCutoff: 80}), - new Date(2051, 2 - 1, 3), 'Parse date y-m-d - cutoff 80'); - equalsDate($.datepicker.parseDate('y-m-d', '51-02-03', {shortYearCutoff: '+60'}), - new Date(2051, 2 - 1, 3), 'Parse date y-m-d - cutoff +60'); + var currentYear = new Date().getFullYear(); + equalsDate($.datepicker.parseDate('y-m-d', (currentYear - 2000) + '-02-03'), + new Date(currentYear, 2 - 1, 3), 'Parse date y-m-d - default cutuff'); + equalsDate($.datepicker.parseDate('y-m-d', (currentYear - 2000 + 10) + '-02-03'), + new Date(currentYear+10, 2 - 1, 3), 'Parse date y-m-d - default cutuff'); + equalsDate($.datepicker.parseDate('y-m-d', (currentYear - 2000 + 11) + '-02-03'), + new Date(currentYear-89, 2 - 1, 3), 'Parse date y-m-d - default cutuff'); + equalsDate($.datepicker.parseDate('y-m-d', '80-02-03', {shortYearCutoff: 80}), + new Date(2080, 2 - 1, 3), 'Parse date y-m-d - cutoff 80'); + equalsDate($.datepicker.parseDate('y-m-d', '81-02-03', {shortYearCutoff: 80}), + new Date(1981, 2 - 1, 3), 'Parse date y-m-d - cutoff 80'); + equalsDate($.datepicker.parseDate('y-m-d', (currentYear - 2000 + 60) + '-02-03', {shortYearCutoff: '+60'}), + new Date(currentYear + 60, 2 - 1, 3), 'Parse date y-m-d - cutoff +60'); + equalsDate($.datepicker.parseDate('y-m-d', (currentYear - 2000 + 61) + '-02-03', {shortYearCutoff: '+60'}), + new Date(currentYear - 39, 2 - 1, 3), 'Parse date y-m-d - cutoff +60'); var gmtDate = new Date(2001, 2 - 1, 3); gmtDate.setMinutes(gmtDate.getMinutes() - gmtDate.getTimezoneOffset()); equalsDate($.datepicker.parseDate('@', '981158400000'), gmtDate, 'Parse date @'); diff --git a/ui/jquery.ui.datepicker.js b/ui/jquery.ui.datepicker.js index 3ca6a34fb39..6b46dcfe27c 100644 --- a/ui/jquery.ui.datepicker.js +++ b/ui/jquery.ui.datepicker.js @@ -966,6 +966,8 @@ $.extend(Datepicker.prototype, { if (value == '') return null; var shortYearCutoff = (settings ? settings.shortYearCutoff : null) || this._defaults.shortYearCutoff; + shortYearCutoff = (typeof shortYearCutoff != 'string' ? shortYearCutoff : + new Date().getFullYear() % 100 + parseInt(shortYearCutoff, 10)); var dayNamesShort = (settings ? settings.dayNamesShort : null) || this._defaults.dayNamesShort; var dayNames = (settings ? settings.dayNames : null) || this._defaults.dayNames; var monthNamesShort = (settings ? settings.monthNamesShort : null) || this._defaults.monthNamesShort; From ca818beca59cd69fa790a10ace64d4dfa631ba20 Mon Sep 17 00:00:00 2001 From: jzaefferer Date: Tue, 18 Jan 2011 12:08:22 +0100 Subject: [PATCH 18/25] Update to latest jquery-global plugin --- external/jquery.global.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/external/jquery.global.js b/external/jquery.global.js index fcaacf9c756..8aac5fdbef3 100644 --- a/external/jquery.global.js +++ b/external/jquery.global.js @@ -151,14 +151,18 @@ Globalization.format = function(value, format, culture) { Globalization.parseInt = function(value, radix, culture) { return Math.floor( this.parseFloat( value, radix, culture ) ); } -Globalization.parseCurrency = function(value, culture) { - return this.parseFloat(value.replace(/[^\d,.-]/g, ""), 10, culture); -} Globalization.parseFloat = function(value, radix, culture) { culture = this.findClosestCulture( culture ); var ret = NaN, nf = culture.numberFormat; + if (value.indexOf(culture.numberFormat.currency.symbol) > -1) { + // remove currency symbol + value = value.replace(culture.numberFormat.currency.symbol, ""); + // replace decimal seperator + value = value.replace(culture.numberFormat.currency["."], culture.numberFormat["."]); + } + // trim leading and trailing whitespace value = trim( value ); From 6a79c708526b846ccbcdf9578efc168c23261182 Mon Sep 17 00:00:00 2001 From: jzaefferer Date: Tue, 18 Jan 2011 12:11:26 +0100 Subject: [PATCH 19/25] Spinner: Update to latest jquery-global plugin, removing the currency workaround. --- ui/jquery.ui.spinner.js | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/ui/jquery.ui.spinner.js b/ui/jquery.ui.spinner.js index f444e3126e4..8445db74e5c 100644 --- a/ui/jquery.ui.spinner.js +++ b/ui/jquery.ui.spinner.js @@ -305,20 +305,14 @@ $.widget('ui.spinner', { _parse: function(val) { var input = val; if (typeof val == 'string') { - // special case for currency formatting until Globalization handles currencies - if (this.options.numberformat == "C" && window.Globalization) { - // parseFloat should accept number format, including currency - var culture = Globalization.culture || Globalization.cultures['default']; - val = val.replace(culture.numberFormat.currency.symbol, ""); - } - val = window.Globalization && this.options.numberformat ? Globalization.parseFloat(val) : +val; + val = $.global && this.options.numberformat ? $.global.parseFloat(val) : +val; } return isNaN(val) ? null : val; }, _format: function(num) { var num = this.options.value; - this.element.val( window.Globalization && this.options.numberformat ? Globalization.format(num, this.options.numberformat) : num ); + this.element.val( $.global && this.options.numberformat ? $.global.format(num, this.options.numberformat) : num ); }, destroy: function() { From 086131b937b3b71a272a4521932a3c44a399261b Mon Sep 17 00:00:00 2001 From: jzaefferer Date: Tue, 18 Jan 2011 14:16:13 +0100 Subject: [PATCH 20/25] Update to latest jquery-global plugin --- external/jquery.global.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/external/jquery.global.js b/external/jquery.global.js index 8aac5fdbef3..29ae5c637f0 100644 --- a/external/jquery.global.js +++ b/external/jquery.global.js @@ -152,6 +152,12 @@ Globalization.parseInt = function(value, radix, culture) { return Math.floor( this.parseFloat( value, radix, culture ) ); } Globalization.parseFloat = function(value, radix, culture) { + // make radix optional + if (typeof radix === "string") { + culture = radix; + radix = 10; + } + culture = this.findClosestCulture( culture ); var ret = NaN, nf = culture.numberFormat; From fcf8c2631c8e3d78b1565af856cb44ca6bc21b60 Mon Sep 17 00:00:00 2001 From: cherif Date: Sat, 15 Jan 2011 21:23:02 +0100 Subject: [PATCH 21/25] Datepicker i18n: Added Algerian Arabic. Fixes #6877 - Datepicker: Add Algerian Arabic support. --- ui/i18n/jquery.ui.datepicker-ar-DZ.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 ui/i18n/jquery.ui.datepicker-ar-DZ.js diff --git a/ui/i18n/jquery.ui.datepicker-ar-DZ.js b/ui/i18n/jquery.ui.datepicker-ar-DZ.js new file mode 100644 index 00000000000..089208dfa95 --- /dev/null +++ b/ui/i18n/jquery.ui.datepicker-ar-DZ.js @@ -0,0 +1,24 @@ +/* Algerian Arabic Translation for jQuery UI date picker plugin. (can be used for Tunisia)*/ +/* Mohamed Cherif BOUCHELAGHEM -- cherifbouchelaghem@yahoo.fr */ +/* NOTE: monthNames maybe original names are in jquery.ui.datepicker-ar.js, but we must use the months that we know here in North Africa which is جانفي فيفري they look like French months in arabic way but the rest is ok. More information for months in arabic http://en.wikipedia.org/wiki/Arabic_names_of_calendar_months*/ + +jQuery(function($){ + $.datepicker.regional['ar-DZ'] = { + closeText: 'إغلاق', + prevText: '<السابق', + nextText: 'التالي>', + currentText: 'اليوم', + monthNames: ['جانفي', 'فيفري', 'مارس', 'أفريل', 'ماي', 'جوان', + 'جويلية', 'أوت', 'سبتمبر','أكتوبر', 'نوفمبر', 'ديسمبر'], + monthNamesShort: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'], + dayNames: ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'], + dayNamesShort: ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'], + dayNamesMin: ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'], + weekHeader: 'أسبوع', + dateFormat: 'dd/mm/yy', + firstDay: 6, + isRTL: true, + showMonthAfterYear: false, + yearSuffix: ''}; + $.datepicker.setDefaults($.datepicker.regional['ar-DZ']); +}); From 30c9473d8f297d53f0d3715e8cd00b61b841a85a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Wed, 19 Jan 2011 10:15:15 -0500 Subject: [PATCH 22/25] Datepicker i18n: Added Algerian Arabic to demos. --- demos/datepicker/localization.html | 2 ++ demos/index.html | 1 + ui/i18n/jquery.ui.datepicker-ar-DZ.js | 3 +-- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/demos/datepicker/localization.html b/demos/datepicker/localization.html index 33d03c98c11..767cdaa54a7 100644 --- a/demos/datepicker/localization.html +++ b/demos/datepicker/localization.html @@ -10,6 +10,7 @@ + @@ -87,6 +88,7 @@ Random?
+ % randomness
+ + Reverse? (not really visible when random is turned on)
+ +
  • +

    Build/Disintegrate options:

    + +
    + Distance? (* parent height)
    +
    • + + + + + + \ No newline at end of file