transition-events-js 0.2

data/ChangeLog

@@ -0,0 +1,12 @@
+== 0.2 (Antioch earthquake, 526)
+* Rename Ruby gem to transition-events-js.
+* Rename transitionAt to afterTransition.
+* Rename $.TransitionEvents to $.Transitions.
+* Don’t execute transitionEnd callback without CSS Transitions support.
+* Synchronize afterTransition with transitionend event.
+* Allow to miss durationPart argument in afterTransition.
+* Add requestAnimationFrame alias.
+* Remove $.Transitions.cachedProp.
+
+== 0.1 (Vesuvius eruption, 79 AD)
+* Initial release.

data/LICENSE

@@ -0,0 +1,165 @@
+                   GNU LESSER GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+
+  This version of the GNU Lesser General Public License incorporates
+the terms and conditions of version 3 of the GNU General Public
+License, supplemented by the additional permissions listed below.
+
+  0. Additional Definitions.
+
+  As used herein, "this License" refers to version 3 of the GNU Lesser
+General Public License, and the "GNU GPL" refers to version 3 of the GNU
+General Public License.
+
+  "The Library" refers to a covered work governed by this License,
+other than an Application or a Combined Work as defined below.
+
+  An "Application" is any work that makes use of an interface provided
+by the Library, but which is not otherwise based on the Library.
+Defining a subclass of a class defined by the Library is deemed a mode
+of using an interface provided by the Library.
+
+  A "Combined Work" is a work produced by combining or linking an
+Application with the Library.  The particular version of the Library
+with which the Combined Work was made is also called the "Linked
+Version".
+
+  The "Minimal Corresponding Source" for a Combined Work means the
+Corresponding Source for the Combined Work, excluding any source code
+for portions of the Combined Work that, considered in isolation, are
+based on the Application, and not on the Linked Version.
+
+  The "Corresponding Application Code" for a Combined Work means the
+object code and/or source code for the Application, including any data
+and utility programs needed for reproducing the Combined Work from the
+Application, but excluding the System Libraries of the Combined Work.
+
+  1. Exception to Section 3 of the GNU GPL.
+
+  You may convey a covered work under sections 3 and 4 of this License
+without being bound by section 3 of the GNU GPL.
+
+  2. Conveying Modified Versions.
+
+  If you modify a copy of the Library, and, in your modifications, a
+facility refers to a function or data to be supplied by an Application
+that uses the facility (other than as an argument passed when the
+facility is invoked), then you may convey a copy of the modified
+version:
+
+   a) under this License, provided that you make a good faith effort to
+   ensure that, in the event an Application does not supply the
+   function or data, the facility still operates, and performs
+   whatever part of its purpose remains meaningful, or
+
+   b) under the GNU GPL, with none of the additional permissions of
+   this License applicable to that copy.
+
+  3. Object Code Incorporating Material from Library Header Files.
+
+  The object code form of an Application may incorporate material from
+a header file that is part of the Library.  You may convey such object
+code under terms of your choice, provided that, if the incorporated
+material is not limited to numerical parameters, data structure
+layouts and accessors, or small macros, inline functions and templates
+(ten or fewer lines in length), you do both of the following:
+
+   a) Give prominent notice with each copy of the object code that the
+   Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the object code with a copy of the GNU GPL and this license
+   document.
+
+  4. Combined Works.
+
+  You may convey a Combined Work under terms of your choice that,
+taken together, effectively do not restrict modification of the
+portions of the Library contained in the Combined Work and reverse
+engineering for debugging such modifications, if you also do each of
+the following:
+
+   a) Give prominent notice with each copy of the Combined Work that
+   the Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the Combined Work with a copy of the GNU GPL and this license
+   document.
+
+   c) For a Combined Work that displays copyright notices during
+   execution, include the copyright notice for the Library among
+   these notices, as well as a reference directing the user to the
+   copies of the GNU GPL and this license document.
+
+   d) Do one of the following:
+
+       0) Convey the Minimal Corresponding Source under the terms of this
+       License, and the Corresponding Application Code in a form
+       suitable for, and under terms that permit, the user to
+       recombine or relink the Application with a modified version of
+       the Linked Version to produce a modified Combined Work, in the
+       manner specified by section 6 of the GNU GPL for conveying
+       Corresponding Source.
+
+       1) Use a suitable shared library mechanism for linking with the
+       Library.  A suitable mechanism is one that (a) uses at run time
+       a copy of the Library already present on the user's computer
+       system, and (b) will operate properly with a modified version
+       of the Library that is interface-compatible with the Linked
+       Version.
+
+   e) Provide Installation Information, but only if you would otherwise
+   be required to provide such information under section 6 of the
+   GNU GPL, and only to the extent that such information is
+   necessary to install and execute a modified version of the
+   Combined Work produced by recombining or relinking the
+   Application with a modified version of the Linked Version. (If
+   you use option 4d0, the Installation Information must accompany
+   the Minimal Corresponding Source and Corresponding Application
+   Code. If you use option 4d1, you must provide the Installation
+   Information in the manner specified by section 6 of the GNU GPL
+   for conveying Corresponding Source.)
+
+  5. Combined Libraries.
+
+  You may place library facilities that are a work based on the
+Library side by side in a single library together with other library
+facilities that are not Applications and are not covered by this
+License, and convey such a combined library under terms of your
+choice, if you do both of the following:
+
+   a) Accompany the combined library with a copy of the same work based
+   on the Library, uncombined with any other library facilities,
+   conveyed under the terms of this License.
+
+   b) Give prominent notice with the combined library that part of it
+   is a work based on the Library, and explaining where to find the
+   accompanying uncombined form of the same work.
+
+  6. Revised Versions of the GNU Lesser General Public License.
+
+  The Free Software Foundation may publish revised and/or new versions
+of the GNU Lesser General Public License from time to time. Such new
+versions will be similar in spirit to the present version, but may
+differ in detail to address new problems or concerns.
+
+  Each version is given a distinguishing version number. If the
+Library as you received it specifies that a certain numbered version
+of the GNU Lesser General Public License "or any later version"
+applies to it, you have the option of following the terms and
+conditions either of that published version or of any later version
+published by the Free Software Foundation. If the Library as you
+received it does not specify a version number of the GNU Lesser
+General Public License, you may choose any version of the GNU Lesser
+General Public License ever published by the Free Software Foundation.
+
+  If the Library as you received it specifies that a proxy can decide
+whether future versions of the GNU Lesser General Public License shall
+apply, that proxy's public statement of acceptance of any version is
+permanent authorization for you to choose that version for the
+Library.

data/README.md

@@ -0,0 +1,185 @@
+# jQuery Transition Events Plugin
+
+CSS Transition allows to write simple animation directly in CSS. It’s simpler,
+faster and cleaner, that JavaScript animation by `jQuery.fn.animate`.
+But sometimes we need good old complete callback in JavaScript for
+CSS Transitions animation.
+
+This jQuery plugin allows to set listeners to [CSS Transitions] animation end or
+specific part. Plugin requires jQuery 1.8 or higher.
+
+Method `$.fn.transitionEnd` adds listener for all `transitionend` future events.
+Method `$.fn.afterTransition` executes callback only once, after transition end.
+
+CSS with transitions:
+```css
+.slider {
+    transition: left 600ms;
+    }
+    .slider.video-position {
+        left: -100px;
+        }
+```
+
+Execute callback after current transition end:
+```js
+$('.show-video').click(function () {
+    $('.slider').addClass('video-position').afterTransition(function () {
+        autoPlayVideo();
+    });
+});
+```
+
+Sponsored by [Evil Martians].
+
+[CSS Transitions]: https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions
+[Evil Martians]:   http://evilmartians.com/
+
+## $.fn.afterTransition
+
+Plugin has `$.fn.afterTransition` function to execute callback after transition
+end `delay + (durationPart * duration)`. If browser doesn’t support
+CSS Transitions, callbacks will be called immediately (because there will be no animation).
+
+Callback often will be synchronized with `transitionend` by
+`requestAnimationFrame` hack.
+
+This function doesn’t check, that transition is really finished (it can be
+canceled in the middle).
+
+If can set `durationPart` and run callback in the middle of current transition:
+
+```js
+$('.fliper').addClass('rotate').afterTransition(0.5, function () {
+    $(this).find('.backface').show();
+});
+```
+
+If transition is set for several properties, `$.fn.afterTransition` will execute
+callback on every property. For example:
+
+```css
+.car {
+    transition-property: top, left;
+    transition-duration: 1s,  4s;
+    transition-delay:    1s;
+    }
+```
+
+```js
+$('.car').addClass('at-home').afterTransition(function (e) {
+    console.log(e.propertyName + ' ' + e.elapsedTime);
+});
+```
+
+This code will print `"top 1"` and `"left 4"`.
+
+## $.fn.transitionEnd
+
+Modern browsers have `transitionend` event. This plugin hides vendor prefix
+problem from you.
+
+```js
+// Bind synchronized listener to end of all future transitions.
+$('.slider').transitionEnd(function () {
+    if ( $('.slider').hasClass('video-position') ) {
+        autoPlayVideo();
+    }
+});
+$('.show-video').click(function () {
+    slider.addClass('video-position');
+});
+$('.hide-video').click(function () {
+    // It will execute transitionEnd too
+    slider.removeClass('video-position');
+});
+```
+
+Main difference with `$.fn.afterTransition` is that this method adds callback
+for all future transitions, not just for current one. Also callback willn’t
+execute without CSS Transitions support.
+
+If transition is set for several properties, `$.fn.transitionEnd` will execute
+callback on every property.
+
+If transition is canceled before finishing `$.fn.transitionEnd` won’t execute
+callback (for example, you add transition to hover, and object looses hover in the
+middle of animation).
+
+## Event object
+
+Callbacks get object with properties:
+* `type` – event name: `transitionend` (be often with vendor prefix) or 
+  `aftertransition`.
+* `currentTarget` – DOM node with CSS transition.
+* `propertyName` – CSS property name, which has transition. it will be empty,
+  if CSS Transitions aren’t supported.
+* `elapsedTime` – number of seconds the transition had been running at the time
+  the event fired. This value isn't affected by the value of `transition-delay`.
+  It will be zero, if CSS Transitions isn’t supported.
+
+## Extra
+
+Free additional present from plugin: you can check CSS Transitions support:
+
+```js
+if ( $.Transitions.isSupported() ) {
+    // CSS Transitions is supported
+}
+```
+
+Also you can call `requestAnimationFrame`  with polyfill and vendor prefixes
+autodetection:
+
+```js
+$.Transitions.animFrame(function () {
+    // Draw something
+});
+```
+
+## Installing
+
+### Ruby on Rails
+
+For Ruby on Rails you can use gem for Assets Pipeline.
+
+1. Add `transition-events-js` gem to `Gemfile`:
+
+   ```ruby
+   gem "transition-events-js"
+   ```
+
+2. Install gems:
+
+   ```sh
+   bundle install
+   ```
+
+3. Include plugin to your `application.js.coffee`:
+
+   ```coffee
+   #= require transition-events
+   ```
+
+### Others
+
+If you don’t use any assets packaging manager (that’s very bad idea), you can use
+already minified version of the library.
+Take it from: [github.com/ai/transition-events/downloads].
+
+[github.com/ai/transition-events/downloads]: https://github.com/ai/transition-events/downloads
+
+## Contributing
+
+Open `test.html` in repository to run intergration tests.
+
+## License
+
+Plugin is licensed under the GNU Lesser General Public License version 3.
+See the LICENSE file or [gnu.org/licenses/lgpl.html].
+
+[gnu.org/licenses/lgpl.html]: http://gnu.org/licenses/lgpl.html
+
+## Author
+
+Andrey “A.I.” Sitnik <andrey@sitnik.ru>

data/lib/assets/javascripts/transition-events.js

@@ -0,0 +1,212 @@
+/*
+ * Copyright 2012 Andrey “A.I.” Sitnik <andrey@sitnik.ru>,
+ * sponsored by Evil Martians.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+;(function($) {
+    "use strict";
+
+    // Common methods and properties for jQuery Transition Events plugin.
+    // Mostly for internal usage, but maybe helpful for some hack stuff:
+    //
+    //   if ( $.Transitions.isSupported() ) {
+    //       // CSS Transitions is supported
+    //   }
+    $.Transitions = {
+
+        // Hash of property name to event name with vendor prefixes.
+        // It is used to detect prefix.
+        _names: {
+            // Webkit must be on bottom, because Opera try to use webkit
+            // prefix.
+            'transition':       'transitionend',
+            'OTransition':      'oTransitionEnd',
+            'WebkitTransition': 'webkitTransitionEnd',
+            'MozTransition':    'transitionend'
+        },
+
+        // Return array of milliseconds for CSS value of `transition-duration`.
+        // It’s used in `$.fn.afterTransition`.
+        _parseTimes: function (string) {
+            var value, array = string.split(/,\s*/);
+            for (var i = 0; i < array.length; i++) {
+                value = array[i];
+                array[i] = parseFloat(value);
+                if ( value.match(/\ds/) ) {
+                    array[i] = array[i] * 1000;
+                }
+            }
+            return array;
+        },
+
+        // Autodetect vendor prefix and return `transitionend` event name.
+        //
+        // If browser didn’t support CSS Transitions it will return `false`.
+        getEvent: function () {
+            var finded = false;
+            for ( var prop in this._names ) {
+                if ( typeof(document.body.style[prop]) != 'undefined' ) {
+                    finded = this._names[prop];
+                    break;
+                }
+            }
+
+            this.getEvent = function () {
+                return finded;
+            };
+
+            return finded;
+        },
+
+        // Alias to vendor prefixed `requestAnimationFrame`. Will be replace
+        // by native function after first call.
+        animFrame: function (callback) {
+            var raf = window.requestAnimationFrame       ||
+                      window.webkitRequestAnimationFrame ||
+                      window.mozRequestAnimationFrame    ||
+                      window.msRequestAnimationFrame;
+            if ( raf ) {
+                this.animFrame = function (callback) {
+                    return raf.call(window, callback);
+                };
+            } else {
+                this.animFrame = function (callback) {
+                    return setTimeout(callback, 10);
+                };
+            }
+            return this.animFrame(callback);
+        },
+
+        // Return `true` if browser support CSS Transitions.
+        isSupported: function () {
+            return this.getEvent() !== false;
+        }
+
+    }
+
+    // jQuery node methods.
+    $.extend($.fn, {
+
+        // Call `callback` after CSS Transition finish
+        // `delay + (durationPart * duration)`. It will call `callback` only
+        // once, in difference from `transitionEnd`.
+        //
+        //   $('.show-video').click(function () {
+        //       $('.slider').addClass('video-position').afterTransition(
+        //           function () { autoPlayVideo(); });
+        //   });
+        //
+        // You can set `durationPart` to call `callback` in the middle of
+        // transition:
+        //
+        //   $('.fliper').addClass('rotate').afterTransition(0.5, function () {
+        //       $(this).find('.backface').show();
+        //   });
+        //
+        // Callback will get object with `propertyName` and `elapsedTime`
+        // properties. If transition is set to difference properties, it will
+        // be called on every property.
+        //
+        // This method doesn’t check, that transition is really finished (it can
+        // be canceled in the middle).
+        afterTransition: function (durationPart, callback) {
+            if ( typeof(callback) == 'undefined' ) {
+                callback     = durationPart;
+                durationPart = 1;
+            }
+
+            if ( !$.Transitions.isSupported() ) {
+                for (var i = 0; i < this.length; i++) {
+                    callback.call(this[i], {
+                        type:          'aftertransition',
+                        elapsedTime:   0,
+                        propertyName:  '',
+                        currentTarget: this[i],
+                    });
+                }
+                return this;
+            }
+
+            for (var i = 0; i < this.length; i++) {
+                var el = $(this[i]);
+                var props     = el.css('transition-property').split(/,\s*/);
+                var durations = el.css('transition-duration');
+                var delays    = el.css('transition-delay');
+
+                durations = $.Transitions._parseTimes(durations);
+                delays    = $.Transitions._parseTimes(delays);
+
+                var prop, duration, delay, after, elapsed;
+                for (var j = 0; j < props.length; j++) {
+                    prop     = props[j];
+                    duration = durations[ durations.length == 1 ? 0 : j ];
+                    delay    = delays[ delays.length == 1 ? 0 : j ];
+                    after    = delay + (duration * durationPart);
+                    elapsed  = duration * durationPart / 1000;
+
+                    (function (el, prop, after, elapsed) {
+                      setTimeout(function () {
+                          $.Transitions.animFrame(function () {
+                            callback.call(el[0], {
+                                type:          'aftertransition',
+                                elapsedTime:   elapsed,
+                                propertyName:  prop,
+                                currentTarget: el[0]
+                            });
+                          });
+                      }, after);
+                    })(el, prop, after, elapsed);
+                }
+            }
+            return this;
+        },
+
+        // Set `callback` to listen every CSS Transition finish.
+        // It will call `callback` on every finished transition,
+        // in difference from `afterTransition`.
+        //
+        // It just bind to `transitionend` event, but detect vendor prefix.
+        //
+        // Callback will get event object with `propertyName` and `elapsedTime`
+        // properties. If transition is set to difference properties, it will
+        // be called on every property.
+        //
+        // Note, that `callback` will get original event object, not from
+        // jQuery.
+        //
+        //   var slider = $('.slider').transitionEnd(function () {
+        //       if ( slider.hasClass('video-position') ) {
+        //           autoPlayVideo();
+        //       }
+        //   });
+        //
+        //  $('.show-video').click(function () {
+        //      slider.addClass('video-position');
+        //  });
+        //
+        // If transition will be canceled before finish, event willn’t be fired.
+        transitionEnd: function (callback) {
+            for (var i = 0; i < this.length; i++) {
+              this[i].addEventListener($.Transitions.getEvent(), function (e) {
+                  callback.call(this, e);
+              });
+            }
+            return this;
+        }
+
+    });
+
+}).call(this, jQuery);

data/lib/transition_events_js.rb

@@ -0,0 +1,8 @@
+# Used only for Ruby on Rails gem to tell, that gem contain `lib/assets` with
+# transition-events.js file.
+module TransitionEventsJs
+  module Rails
+    class Engine < ::Rails::Engine
+    end
+  end
+end

metadata

@@ -0,0 +1,70 @@
+--- !ruby/object:Gem::Specification
+name: transition-events-js
+version: !ruby/object:Gem::Version
+  version: '0.2'
+  prerelease: 
+platform: ruby
+authors:
+- Andrey "A.I" Sitnik
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2012-09-07 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: sprockets
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '2'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '2'
+description: 
+email:
+- andrey@sitnik.ru
+executables: []
+extensions: []
+extra_rdoc_files:
+- LICENSE
+- README.md
+- ChangeLog
+files:
+- lib/assets/javascripts/transition-events.js
+- lib/transition_events_js.rb
+- LICENSE
+- README.md
+- ChangeLog
+homepage: https://github.com/ai/transition-events
+licenses: []
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 1.8.23
+signing_key: 
+specification_version: 3
+summary: jQuery plugin to set listeners for CSS Transition animation end or specific
+  part.
+test_files: []