transition_events_js 0.1

data/ChangeLog

@@ -0,0 +1,2 @@
+== 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,164 @@
+# 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 (for example, if our animation isn’t so simple).
+
+This jQuery plugin allows to set listeners to [CSS Transitions] animation end or
+specific part:
+
+CSS with transitions:
+```css
+.slider {
+    transition: left 600ms;
+    left: 0;
+    }
+    .slider.to-right {
+        left: -100px;
+        }
+
+.fliper {
+    transition: transform 600ms;
+    transform: rotateY(0);
+    }
+    .fliper.rotate {
+        transform: rotateY(180deg);
+        }
+```
+
+JavaScript with callbacks:
+```js
+$('.slider').addClass('to-right').transitionEnd(function () {
+    playVideo( $(this).find('.right-part').find('video') );
+});
+
+$('.fliper').addClass('rotate'),transitionAt(0.5, function () {
+    // Note, that we do double check for class, not just call `toggle`,
+    // because `transitionAt` will be fired even if transition will be canceled.
+    $(this).find('.backface').toggle($(this).hasClass('rotate'));
+});
+```
+
+Plugin requires jQuery 1.8 or higher.
+
+Sponsored by [Evil Martians].
+
+[CSS Transitions]: https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions
+[Evil Martians]:   http://evilmartians.com/
+
+## $.fn.transitionEnd
+
+Modern browsers have `transitionend` event. But some old browsers don’t support
+CSS Transitions (and this event), and others require vendor prefix for
+event name.
+
+This plugin adds syntax sugar and hides vendor prefix problem from you.
+If browser doesn’t have support, callbacks will be called immediately
+(because there is no animation).
+
+If transition is set for several properties, `$.fn.transitionEnd` 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').transitionEnd(function (e) {
+    console.log(e.propertyName + ' ' + e.elapsedTime);
+});
+```
+
+This code will print `"top 1"` and `"left 4"`.
+
+Note, if transition is canceled before finishing (for example, you add
+transition to hover effect, and object looses hover, before transition
+will ends), `$.fn.transitionEnd` won’t execute callback.
+
+## $.fn.transitionAt
+
+Also plugin has additional `$.fn.transitionAt` function to set callback
+to some part of transition (for example in the middle of animation, to hide
+backface on rotate animation). Callback will be called after
+`delay + (durationPart * duration)`.
+
+If transition is set for several properties, `$.fn.transitionEnd` will execute
+callback on every property.
+
+Note, that `transitionAt` callback will be fired even if transition is canceled
+(because JavaScript can’t know that).
+
+## Event object
+
+Callbacks get object with properties:
+* `type` – event name. For `transitionend` event it will be often have
+   vendor prefix. For `$.fn.transitionAt` it will be `transitionat`.
+* `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.
+
+If CSS Transition is supported, `$.fn.transitionEnd` will send original browser
+event to callback (with this properties too). If you use `$.fn.transitionAt` or
+there is no CSS Transitions support, callback will receive simple object
+with just these 4 properties.
+
+## Extra
+
+Free additional present from plugin: you can check CSS Transition support:
+
+```js
+if ( $.TransitionEvents.isSupported() ) {
+    // CSS Transitions is supported
+}
+```
+
+## 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: <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 http://www.gnu.org/licenses/lgpl.html.
+
+## Author
+
+Andrey “A.I.” Sitnik <andrey@sitnik.ru>

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

@@ -0,0 +1,195 @@
+/*
+ * 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 ( $.TransitionEvents.isSupported() ) {
+    //       // CSS Transitions is supported
+    //   }
+    $.TransitionEvents = {
+
+        // 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.transitionAt`.
+        _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;
+        },
+
+        // Cached event name with vendor prefix. It will be detected by
+        // `detectPrefix`. Without transition support it will be `false`.
+        cachedEvent: null,
+
+        // Cached transition property name with vendor prefix. It will be
+        // detected by `detectPrefix`. Without transition support it will be
+        // `false`.
+        cachedProp: null,
+
+        // Detect vendor prefix and cache names to `cachedEvent` and
+        // `cachedProp`. On first call it return `true` if prefix is founded or
+        // `false` if transitions is’t supported. If vendor prefix is already
+        // detected, it will return `undefined`.
+        detectPrefix: function () {
+            if ( typeof(this.cachedEvent) == 'undefined' ) {
+                return;
+            }
+
+            for ( var prop in this._names ) {
+                if ( typeof(document.body.style[prop]) != 'undefined' ) {
+                    this.cachedProp  = prop;
+                    this.cachedEvent = this._names[prop];
+                    return true;
+                }
+            }
+
+            this.cachedProp  = false;
+            this.cachedEvent = false;
+            return false;
+        },
+
+        // Return `true` if browser support CSS Transitions.
+        isSupported: function () {
+            this.detectPrefix();
+            return this.cachedProp !== false;
+        }
+
+    }
+
+    // jQuery node methods.
+    $.extend($.fn, {
+
+        // Call `callback`, when current transition will end. Callback will
+        // get event object with `propertyName` and `elapsedTime` properties.
+        //
+        // It just bind to `transitionend` event, but detect vendor prefix and
+        // call `callback` immediately without CSS Transitions support.
+        //
+        // Note, that `callback` will get original event object, not from
+        // jQuery.
+        //
+        //   $('.slider').addClass('to-right').transitionEnd(function () {
+        //       playVideo( $(this).find('.right-part').find('video') );
+        //   });
+        transitionEnd: function (callback) {
+            if ( !$.TransitionEvents.isSupported() ) {
+                for (var i = 0; i < this.length; i++) {
+                    callback.call(this[i], {
+                        type:          'transitionend',
+                        elapsedTime:   0,
+                        propertyName:  '',
+                        currentTarget: this[i],
+                    });
+                }
+                return this;
+            }
+
+            var event = $.TransitionEvents.cachedEvent;
+            for (var i = 0; i < this.length; i++) {
+              this[i].addEventListener(event, function (e) {
+                  callback.call(this, e);
+              });
+            }
+            return this;
+        },
+
+        // Call `callback`, when part of transition will be passed.
+        // So, it call `callback` after `delay + (durationPart * duration)`
+        // time.
+        //
+        // Note, that because JS haven’t any way to detect, that transition
+        // is canceled (for example, you add transition to hover effect, and
+        // object loose hover, before transition will end, so `transitionend`
+        // will be not fired) `transitionAt` anyway will call `callback` in
+        // given time.
+        //
+        //   $('.fliper').addClass('rotate'),transitionAt(0.5, function () {
+        //       // Note, that we do double check for class, not just call
+        //       // `toggle`, because `transitionAt` will be fired even
+        //       // if transition will be canceled.
+        //       $(this).find('.backface').toggle($(this).hasClass('rotate'));
+        //   });
+        transitionAt: function (durationPart, callback) {
+            if ( !$.TransitionEvents.isSupported() ) {
+                for (var i = 0; i < this.length; i++) {
+                    callback.call(this[i], {
+                        type:          'transitionat',
+                        elapsedTime:   0,
+                        propertyName:  '',
+                        currentTarget: this[i],
+                    });
+                }
+                return this;
+            }
+
+            var prefix = $.TransitionEvents.cachedProp;
+            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 = $.TransitionEvents._parseTimes(durations);
+                delays    = $.TransitionEvents._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 () {
+                          callback.call(el[0], {
+                              type:          'transitionat',
+                              elapsedTime:   elapsed,
+                              propertyName:  prop,
+                              currentTarget: el[0]
+                          });
+                      }, after);
+                    })(el, prop, after, elapsed);
+                }
+            }
+            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.1'
+  prerelease: 
+platform: ruby
+authors:
+- Andrey "A.I" Sitnik
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2012-09-05 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: []