turbolinks-animate 1.3.0 → 2.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +10 -4
- data/README.md +27 -19
- data/app/helpers/turbolinks_animate_helper.rb +0 -17
- data/app/views/mozaic/_turbolinks-animate.html.erb +4 -0
- data/lib/turbolinks-animate/railtie.rb +14 -0
- data/lib/turbolinks-animate/version.rb +1 -1
- metadata +11 -14
- data/vendor/assets/javascripts/turbolinks-animate.js +0 -291
- data/vendor/assets/javascripts/turbolinks-animate.min.js +0 -27
- data/vendor/assets/stylesheets/animate.css +0 -1579
- data/vendor/assets/stylesheets/animate.min.css +0 -11
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 2a42f0eee4169f65ca01863b1bf0281586f1e0c4981e5d8acd003c43ecbfba30
|
4
|
+
data.tar.gz: 6ff710395cce0e0feb8829d182c0136d47204ba997d8228db6eaa1f58edb410b
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 99bb355687edf4c8c747b946391323241083707dda420cd6ef3be0e415dc8d62cb6c54db9c2da3aca5fdebc444ef8b6d4090e7fffd967d4ff90ef6aaba56e154
|
7
|
+
data.tar.gz: adb494b447bdbb6e07672b1c948ab4cbb110020670231f547b8068a08772dbae388dbfaee0df6828f59dcb688a2f80d2d39ea6e556e2192ab48df34c1564b289
|
data/CHANGELOG.md
CHANGED
@@ -4,23 +4,29 @@
|
|
4
4
|
|
5
5
|
* nothing yet
|
6
6
|
|
7
|
-
###
|
7
|
+
### 2.0.0 - 2018/02/17
|
8
|
+
|
9
|
+
* features
|
10
|
+
* support webpack
|
11
|
+
* added `'turbolinks-animate'` mozaic component
|
12
|
+
|
13
|
+
### 1.3.0 - 2018/01/19
|
8
14
|
|
9
15
|
* enhancements
|
10
16
|
* updated [turbolinks-animate.js](https://github.com/jonhue/turbolinks-animate.js) to `2.0.0`
|
11
17
|
|
12
|
-
### 1.2.0 - 2018
|
18
|
+
### 1.2.0 - 2018/01/06
|
13
19
|
|
14
20
|
* enhancements
|
15
21
|
* automatically include `TurbolinksAnimateHelper` in controllers
|
16
22
|
* updated [turbolinks-animate.js](https://github.com/jonhue/turbolinks-animate.js) to `1.3.8`
|
17
23
|
|
18
|
-
### 1.1.0 - 2017
|
24
|
+
### 1.1.0 - 2017/12/17
|
19
25
|
|
20
26
|
* enhancements
|
21
27
|
* add animate.css to asset pipeline
|
22
28
|
* bugfixes
|
23
29
|
|
24
|
-
### 1.0.0 - 2017
|
30
|
+
### 1.0.0 - 2017/12/17
|
25
31
|
|
26
32
|
* initial release
|
data/README.md
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
#
|
1
|
+
# Turbolinks Animate
|
2
2
|
|
3
3
|
[![Gem Version](https://badge.fury.io/rb/turbolinks-animate.svg)](https://badge.fury.io/rb/turbolinks-animate) <img src="https://travis-ci.org/jonhue/turbolinks-animate.svg?branch=master" />
|
4
4
|
|
@@ -6,7 +6,7 @@ A dead simple & powerful way of adding rich & adaptive animations to your Rails
|
|
6
6
|
|
7
7
|
This gem extends the [turbolinks-animate.js](https://github.com/jonhue/turbolinks-animate.js) library to work better within Rails apps.
|
8
8
|
|
9
|
-
[**Demo**](https://phylator.
|
9
|
+
[**Demo**](https://phylator.com)
|
10
10
|
|
11
11
|
---
|
12
12
|
|
@@ -14,6 +14,8 @@ This gem extends the [turbolinks-animate.js](https://github.com/jonhue/turbolink
|
|
14
14
|
|
15
15
|
* [Installation](#installation)
|
16
16
|
* [Usage](#usage)
|
17
|
+
* [Views](#views)
|
18
|
+
* [Controllers](#controllers)
|
17
19
|
* [To Do](#to-do)
|
18
20
|
* [Contributing](#contributing)
|
19
21
|
* [Contributors](#contributors)
|
@@ -24,7 +26,7 @@ This gem extends the [turbolinks-animate.js](https://github.com/jonhue/turbolink
|
|
24
26
|
|
25
27
|
## Installation
|
26
28
|
|
27
|
-
|
29
|
+
Turbolinks Animate works with Rails 5 onwards. You can add it to your `Gemfile` with:
|
28
30
|
|
29
31
|
```ruby
|
30
32
|
gem 'turbolinks-animate'
|
@@ -44,39 +46,44 @@ If you always want to be up to date fetch the latest from GitHub in your `Gemfil
|
|
44
46
|
gem 'turbolinks-animate', github: 'jonhue/turbolinks-animate'
|
45
47
|
```
|
46
48
|
|
47
|
-
|
48
|
-
|
49
|
-
The javascript and CSS files will be added to the asset pipeline and are available for you to use:
|
49
|
+
Now add the `turbolinks-animate` NPM package and import + initialize it:
|
50
50
|
|
51
51
|
```js
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
TurbolinksAnimate.init();
|
52
|
+
import 'turbolinks-animate';
|
53
|
+
document.addEventListener( 'turbolinks:load', function() {
|
54
|
+
TurbolinksAnimate.init({ element: document.querySelector('body.turbolinks-animate') });
|
56
55
|
});
|
57
56
|
```
|
58
57
|
|
59
58
|
```scss
|
60
|
-
@import "animate"
|
59
|
+
@import "animate.css"
|
61
60
|
```
|
62
61
|
|
63
|
-
|
62
|
+
## Usage
|
64
63
|
|
65
|
-
|
66
|
-
$ yarn install turbolinks-animate
|
67
|
-
```
|
64
|
+
### Views
|
68
65
|
|
69
|
-
|
66
|
+
You can use Turbolinks Animate for any element on your page (just one at a time). For the most basic implementation, you should replace your body tag:
|
70
67
|
|
71
|
-
```
|
72
|
-
=
|
68
|
+
```haml
|
69
|
+
= component 'turbolinks-animate', animation: @turbolinks_animate_animation, class: 'custom-class' do
|
73
70
|
= yield
|
74
71
|
```
|
75
72
|
|
76
|
-
|
73
|
+
You can also use a `div` or other elements:
|
74
|
+
|
75
|
+
```haml
|
76
|
+
= component 'turbolinks-animate', animation: @turbolinks_animate_animation, element: 'div' do
|
77
|
+
...
|
78
|
+
```
|
79
|
+
|
80
|
+
### Controllers
|
81
|
+
|
82
|
+
In your controller simply specify the animation:
|
77
83
|
|
78
84
|
```ruby
|
79
85
|
class WelcomeController < ApplicationController
|
86
|
+
|
80
87
|
def index
|
81
88
|
turbolinks_animate 'fadein'
|
82
89
|
end
|
@@ -84,6 +91,7 @@ class WelcomeController < ApplicationController
|
|
84
91
|
def more
|
85
92
|
turbolinks_animate({ desktop: 'fadein', mobile: 'fadeinright' })
|
86
93
|
end
|
94
|
+
|
87
95
|
end
|
88
96
|
```
|
89
97
|
|
@@ -4,21 +4,4 @@ module TurbolinksAnimateHelper
|
|
4
4
|
@turbolinks_animate_animation = animation.is_a?(Hash) ? animation.to_json : animation
|
5
5
|
end
|
6
6
|
|
7
|
-
def turbolinks_animate_body options = {}, &block
|
8
|
-
default_options = {
|
9
|
-
class: '',
|
10
|
-
data: {}
|
11
|
-
}
|
12
|
-
options = default_options.merge options
|
13
|
-
if @turbolinks_animate_animation
|
14
|
-
options[:class] += ( options[:class].length > 0 ? ' turbolinks-animate' : 'turbolinks-animate' )
|
15
|
-
options[:data][:turbolinks_animate_animation] = @turbolinks_animate_animation
|
16
|
-
end
|
17
|
-
if block_given?
|
18
|
-
content_tag 'body', capture(&block), options
|
19
|
-
else
|
20
|
-
content_tag 'body', options
|
21
|
-
end
|
22
|
-
end
|
23
|
-
|
24
7
|
end
|
@@ -3,6 +3,20 @@ require 'rails/railtie'
|
|
3
3
|
module TurbolinksAnimate
|
4
4
|
class Railtie < Rails::Railtie
|
5
5
|
|
6
|
+
initializer 'turbolinks-animate.mozaic' do
|
7
|
+
Mozaic.configure do |config|
|
8
|
+
config.define_component 'turbolinks-animate', element: 'body' do |options|
|
9
|
+
animation = options.delete :animation
|
10
|
+
if animation
|
11
|
+
options[:class] += ( options[:class].length > 0 ? ' turbolinks-animate' : 'turbolinks-animate' )
|
12
|
+
options[:data] ||= {}
|
13
|
+
options[:data][:turbolinks_animate_animation] = animation
|
14
|
+
end
|
15
|
+
options
|
16
|
+
end
|
17
|
+
end
|
18
|
+
end
|
19
|
+
|
6
20
|
initializer 'turbolinks-animate.action_controller' do
|
7
21
|
ActiveSupport.on_load :action_controller do
|
8
22
|
include TurbolinksAnimateHelper
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: turbolinks-animate
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version:
|
4
|
+
version: 2.0.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Jonas Hübotter
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2018-
|
11
|
+
date: 2018-02-17 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: railties
|
@@ -25,19 +25,19 @@ dependencies:
|
|
25
25
|
- !ruby/object:Gem::Version
|
26
26
|
version: '5.0'
|
27
27
|
- !ruby/object:Gem::Dependency
|
28
|
-
name:
|
28
|
+
name: mozaic
|
29
29
|
requirement: !ruby/object:Gem::Requirement
|
30
30
|
requirements:
|
31
|
-
- - "
|
31
|
+
- - "~>"
|
32
32
|
- !ruby/object:Gem::Version
|
33
|
-
version: '
|
33
|
+
version: '2.0'
|
34
34
|
type: :runtime
|
35
35
|
prerelease: false
|
36
36
|
version_requirements: !ruby/object:Gem::Requirement
|
37
37
|
requirements:
|
38
|
-
- - "
|
38
|
+
- - "~>"
|
39
39
|
- !ruby/object:Gem::Version
|
40
|
-
version: '
|
40
|
+
version: '2.0'
|
41
41
|
- !ruby/object:Gem::Dependency
|
42
42
|
name: rspec
|
43
43
|
requirement: !ruby/object:Gem::Requirement
|
@@ -68,8 +68,7 @@ dependencies:
|
|
68
68
|
version: '0.52'
|
69
69
|
description: A dead simple & powerful way of adding rich & adaptive animations to
|
70
70
|
your Rails app which is already using Turbolinks™.
|
71
|
-
email:
|
72
|
-
- me@jonhue.me
|
71
|
+
email: me@jonhue.me
|
73
72
|
executables: []
|
74
73
|
extensions: []
|
75
74
|
extra_rdoc_files: []
|
@@ -78,16 +77,14 @@ files:
|
|
78
77
|
- LICENSE
|
79
78
|
- README.md
|
80
79
|
- app/helpers/turbolinks_animate_helper.rb
|
80
|
+
- app/views/mozaic/_turbolinks-animate.html.erb
|
81
81
|
- lib/turbolinks-animate.rb
|
82
82
|
- lib/turbolinks-animate/engine.rb
|
83
83
|
- lib/turbolinks-animate/railtie.rb
|
84
84
|
- lib/turbolinks-animate/version.rb
|
85
|
-
- vendor/assets/javascripts/turbolinks-animate.js
|
86
|
-
- vendor/assets/javascripts/turbolinks-animate.min.js
|
87
|
-
- vendor/assets/stylesheets/animate.css
|
88
|
-
- vendor/assets/stylesheets/animate.min.css
|
89
85
|
homepage: https://github.com/jonhue/turbolinks-animate
|
90
|
-
licenses:
|
86
|
+
licenses:
|
87
|
+
- MIT
|
91
88
|
metadata: {}
|
92
89
|
post_install_message:
|
93
90
|
rdoc_options: []
|
@@ -1,291 +0,0 @@
|
|
1
|
-
/**!
|
2
|
-
* @fileOverview turbolinks-animate.js - Animations extending Turbolinks
|
3
|
-
* @version 2.0.0
|
4
|
-
* @license
|
5
|
-
* MIT License
|
6
|
-
*
|
7
|
-
* Copyright (c) 2017 Jonas Hübotter
|
8
|
-
*
|
9
|
-
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
10
|
-
* of this software and associated documentation files (the "Software"), to deal
|
11
|
-
* in the Software without restriction, including without limitation the rights
|
12
|
-
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
13
|
-
* copies of the Software, and to permit persons to whom the Software is
|
14
|
-
* furnished to do so, subject to the following conditions:
|
15
|
-
*
|
16
|
-
* The above copyright notice and this permission notice shall be included in all
|
17
|
-
* copies or substantial portions of the Software.
|
18
|
-
*
|
19
|
-
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
20
|
-
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
21
|
-
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
22
|
-
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
23
|
-
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
24
|
-
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
25
|
-
* SOFTWARE.
|
26
|
-
*/
|
27
|
-
var TurbolinksAnimate = new function() {
|
28
|
-
|
29
|
-
this.options = {};
|
30
|
-
this.inline = false;
|
31
|
-
this.element = null;
|
32
|
-
this.elements = null;
|
33
|
-
this.disappearing = false;
|
34
|
-
this.initialized = false;
|
35
|
-
this.animations = [
|
36
|
-
{ name: 'fadeIn', disappear: 'fadeOut', reverse: null },
|
37
|
-
{ name: 'fadeOut', disappear: true, reverse: null },
|
38
|
-
{ name: 'fadeInUp', disappear: 'fadeOutUp', reverse: 'fadeInDown' },
|
39
|
-
{ name: 'fadeOutUp', disappear: true, reverse: 'fadeOutDown' },
|
40
|
-
{ name: 'fadeInDown', disappear: 'fadeOutDown', reverse: 'fadeInUp' },
|
41
|
-
{ name: 'fadeOutDown', disappear: true, reverse: 'fadeOutUp' },
|
42
|
-
{ name: 'fadeInLeft', disappear: 'fadeOutLeft', reverse: 'fadeInRight' },
|
43
|
-
{ name: 'fadeOutLeft', disappear: true, reverse: 'fadeOutRight' },
|
44
|
-
{ name: 'fadeInRight', disappear: 'fadeOutRight', reverse: 'fadeInLeft' },
|
45
|
-
{ name: 'fadeOutRight', disappear: true, reverse: 'fadeOutLeft' },
|
46
|
-
{ name: 'fadeInUpBig', disappear: 'fadeOutUpBig', reverse: 'fadeInDownBig' },
|
47
|
-
{ name: 'fadeOutUpBig', disappear: true, reverse: 'fadeOutDownBig' },
|
48
|
-
{ name: 'fadeInDownBig', disappear: 'fadeOutDownBig', reverse: 'fadeInUpBig' },
|
49
|
-
{ name: 'fadeOutDownBig', disappear: true, reverse: 'fadeOutUpBig' },
|
50
|
-
{ name: 'fadeInLeftBig', disappear: 'fadeOutLeftBig', reverse: 'fadeInRightBig' },
|
51
|
-
{ name: 'fadeOutLeftBig', disappear: true, reverse: 'fadeOutRightBig' },
|
52
|
-
{ name: 'fadeInRightBig', disappear: 'fadeOutRightBig', reverse: 'fadeInLeftBig' },
|
53
|
-
{ name: 'fadeOutRightBig', disappear: true, reverse: 'fadeOutLeftBig' },
|
54
|
-
{ name: 'bounceIn', disappear: 'bounceOut', reverse: null },
|
55
|
-
{ name: 'bounceOut', disappear: true, reverse: null },
|
56
|
-
{ name: 'bounceInUp', disappear: 'bounceOutUp', reverse: 'bounceInDown' },
|
57
|
-
{ name: 'bounceOutUp', disappear: true, reverse: 'bounceOutDown' },
|
58
|
-
{ name: 'bounceInDown', disappear: 'bounceOutDown', reverse: 'bounceInUp' },
|
59
|
-
{ name: 'bounceOutDown', disappear: true, reverse: 'bounceOutUp' },
|
60
|
-
{ name: 'bounceInLeft', disappear: 'bounceOutLeft', reverse: 'bounceInRight' },
|
61
|
-
{ name: 'bounceOutLeft', disappear: true, reverse: 'bounceOutRight' },
|
62
|
-
{ name: 'bounceInRight', disappear: 'bounceOutRight', reverse: 'bounceInLeft' },
|
63
|
-
{ name: 'bounceOutRight', disappear: true, reverse: 'bounceOutLeft' },
|
64
|
-
{ name: 'flipInX', disappear: 'flipOutX', reverse: 'flipInY' },
|
65
|
-
{ name: 'flipOutX', disappear: true, reverse: 'flipOutY' },
|
66
|
-
{ name: 'flipInY', disappear: 'flipOutY', reverse: 'flipInX' },
|
67
|
-
{ name: 'flipOutY', disappear: true, reverse: 'flipOutX' },
|
68
|
-
{ name: 'lightSpeedIn', disappear: 'lightSpeedOut', reverse: null },
|
69
|
-
{ name: 'lightSpeedOut', disappear: true, reverse: null },
|
70
|
-
{ name: 'rotateIn', disappear: 'rotateOut', reverse: null },
|
71
|
-
{ name: 'rotateOut', disappear: true, reverse: null },
|
72
|
-
{ name: 'rotateInDownLeft', disappear: 'rotateOutDownLeft', reverse: 'rotateInUpRight' },
|
73
|
-
{ name: 'rotateOutDownLeft', disappear: true, reverse: 'rotateOutUpRight' },
|
74
|
-
{ name: 'rotateInDownRight', disappear: 'rotateOutDownRight', reverse: 'rotateInUpLeft' },
|
75
|
-
{ name: 'rotateOutDownRight', disappear: true, reverse: 'rotateOutUpLeft' },
|
76
|
-
{ name: 'rotateInUpLeft', disappear: 'rotateOutUpLeft', reverse: 'rotateInDownRight' },
|
77
|
-
{ name: 'rotateOutUpLeft', disappear: true, reverse: 'rotateOutDownRight' },
|
78
|
-
{ name: 'rotateInUpRight', disappear: 'rotateOutUpRight', reverse: 'rotateInDownLeft' },
|
79
|
-
{ name: 'rotateOutUpRight', disappear: true, reverse: 'rotateOutDownLeft' },
|
80
|
-
{ name: 'rollIn', disappear: 'rollOut', reverse: null },
|
81
|
-
{ name: 'rollOut', disappear: true, reverse: null },
|
82
|
-
{ name: 'zoomIn', disappear: 'zoomOut', reverse: null },
|
83
|
-
{ name: 'zoomOut', disappear: true, reverse: null },
|
84
|
-
{ name: 'zoomInUp', disappear: 'zoomOutUp', reverse: 'zoomInDown' },
|
85
|
-
{ name: 'zoomOutUp', disappear: true, reverse: 'zoomOutDown' },
|
86
|
-
{ name: 'zoomInDown', disappear: 'zoomOutDown', reverse: 'zoomInUp' },
|
87
|
-
{ name: 'zoomOutDown', disappear: true, reverse: 'zoomOutUp' },
|
88
|
-
{ name: 'zoomInLeft', disappear: 'zoomOutLeft', reverse: 'zoomInRight' },
|
89
|
-
{ name: 'zoomOutLeft', disappear: true, reverse: 'zoomOutRight' },
|
90
|
-
{ name: 'zoomInRight', disappear: 'zoomOutRight', reverse: 'zoomInLeft' },
|
91
|
-
{ name: 'zoomOutRight', disappear: true, reverse: 'zoomOutLeft' },
|
92
|
-
{ name: 'slideInUp', disappear: 'slideOutUp', reverse: 'slideInDown' },
|
93
|
-
{ name: 'slideOutUp', disappear: true, reverse: 'slideOutDown' },
|
94
|
-
{ name: 'slideInDown', disappear: 'slideOutDown', reverse: 'slideInUp' },
|
95
|
-
{ name: 'slideOutDown', disappear: true, reverse: 'slideOutUp' },
|
96
|
-
{ name: 'slideInLeft', disappear: 'slideOutLeft', reverse: 'slideInRight' },
|
97
|
-
{ name: 'slideOutLeft', disappear: true, reverse: 'slideOutRight' },
|
98
|
-
{ name: 'slideInRight', disappear: 'slideOutRight', reverse: 'slideInLeft' },
|
99
|
-
{ name: 'slideOutRight', disappear: true, reverse: 'slideOutLeft' }
|
100
|
-
];
|
101
|
-
var array = [];
|
102
|
-
$.each( this.animations, function( k, animation ) {
|
103
|
-
array.push(animation.name);
|
104
|
-
});
|
105
|
-
this.animateClasses = array;
|
106
|
-
|
107
|
-
this.init = function(options) {
|
108
|
-
|
109
|
-
var defaults = {
|
110
|
-
element: $('body'),
|
111
|
-
animation: 'fadein',
|
112
|
-
duration: '0.3s',
|
113
|
-
delay: false,
|
114
|
-
reversedDisappearing: false,
|
115
|
-
breakpoints: [
|
116
|
-
{ name: 'mobile', width: 500 },
|
117
|
-
{ name: 'tablet', width: 1024 },
|
118
|
-
{ name: 'desktop', width: 1440 }
|
119
|
-
],
|
120
|
-
customListeners: false
|
121
|
-
};
|
122
|
-
options = $.extend( defaults, options );
|
123
|
-
|
124
|
-
TurbolinksAnimate.element = options.element;
|
125
|
-
TurbolinksAnimate.setOptions(options);
|
126
|
-
|
127
|
-
if ( TurbolinksAnimate.initialized == false && options.customListeners == false ) {
|
128
|
-
$(document).on( 'turbolinks:request-start', function() {
|
129
|
-
TurbolinksAnimate.disappear();
|
130
|
-
});
|
131
|
-
$(window).on( 'popstate beforeunload', function() {
|
132
|
-
TurbolinksAnimate.disappear();
|
133
|
-
});
|
134
|
-
};
|
135
|
-
|
136
|
-
$('a, button').click(function() {
|
137
|
-
if ( typeof $(this).data('turbolinks-animate-animation') !== 'undefined' ) {
|
138
|
-
TurbolinksAnimate.inline = true;
|
139
|
-
};
|
140
|
-
TurbolinksAnimate.options.animation = $(this).data('turbolinks-animate-animation') || options.animation;
|
141
|
-
TurbolinksAnimate.options.appear = $(this).data('turbolinks-animate-appear');
|
142
|
-
TurbolinksAnimate.options.duration = $(this).data('turbolinks-animate-duration') || options.duration;
|
143
|
-
TurbolinksAnimate.options.delay = $(this).data('turbolinks-animate-delay') || options.delay;
|
144
|
-
TurbolinksAnimate.options.type = $(this).data('turbolinks-animate-type');
|
145
|
-
});
|
146
|
-
|
147
|
-
TurbolinksAnimate.initialized = true;
|
148
|
-
if ( options.customListeners == false ) {
|
149
|
-
TurbolinksAnimate.appear();
|
150
|
-
};
|
151
|
-
|
152
|
-
};
|
153
|
-
|
154
|
-
this.setOptions = function(options) {
|
155
|
-
|
156
|
-
var previousType = TurbolinksAnimate.options.type,
|
157
|
-
appear = TurbolinksAnimate.options.appear;
|
158
|
-
|
159
|
-
TurbolinksAnimate.options = {
|
160
|
-
animation: options.animation,
|
161
|
-
duration: options.duration,
|
162
|
-
delay: options.delay,
|
163
|
-
reversedDisappearing: options.reversedDisappearing,
|
164
|
-
breakpoints: options.breakpoints,
|
165
|
-
previousType: previousType,
|
166
|
-
appear: appear
|
167
|
-
};
|
168
|
-
|
169
|
-
};
|
170
|
-
|
171
|
-
this.appear = function() {
|
172
|
-
TurbolinksAnimate.disappearing = false;
|
173
|
-
TurbolinksAnimate.toggle();
|
174
|
-
};
|
175
|
-
this.disappear = function() {
|
176
|
-
TurbolinksAnimate.disappearing = true;
|
177
|
-
TurbolinksAnimate.toggle();
|
178
|
-
};
|
179
|
-
this.toggle = function() {
|
180
|
-
if ( TurbolinksAnimate.options.animation != 'false' ) {
|
181
|
-
TurbolinksAnimate.resetClasses();
|
182
|
-
TurbolinksAnimate.getElements();
|
183
|
-
TurbolinksAnimate.useOptions();
|
184
|
-
Turbolinks.clearCache(); // fix cache issues
|
185
|
-
TurbolinksAnimate.animate();
|
186
|
-
TurbolinksAnimate.reset();
|
187
|
-
};
|
188
|
-
};
|
189
|
-
|
190
|
-
this.getElements = function() {
|
191
|
-
TurbolinksAnimate.elements = [];
|
192
|
-
|
193
|
-
function getChildren(parent) {
|
194
|
-
var type = TurbolinksAnimate.options.type || TurbolinksAnimate.options.previousType || 'true';
|
195
|
-
if ( parent.data('turbolinks-animate-persist') == type ) {
|
196
|
-
return;
|
197
|
-
} else if ( parent.data('turbolinks-animate-persist-itself') == type || parent.find('[data-turbolinks-animate-persist]').length > 0 || parent.find('[data-turbolinks-animate-persist-itself]').length > 0 ) {
|
198
|
-
parent.children().each(function() {
|
199
|
-
getChildren($(this));
|
200
|
-
});
|
201
|
-
} else {
|
202
|
-
TurbolinksAnimate.elements.push(parent);
|
203
|
-
};
|
204
|
-
};
|
205
|
-
|
206
|
-
getChildren(TurbolinksAnimate.element);
|
207
|
-
};
|
208
|
-
this.useOptions = function() {
|
209
|
-
if ( TurbolinksAnimate.elements != null ) {
|
210
|
-
$(TurbolinksAnimate.elements).each(function() {
|
211
|
-
$(this).css( 'animationDuration', TurbolinksAnimate.options.duration );
|
212
|
-
if ( TurbolinksAnimate.options.delay != false ) {
|
213
|
-
$(this).css( 'animationDelay', TurbolinksAnimate.options.delay );
|
214
|
-
};
|
215
|
-
});
|
216
|
-
};
|
217
|
-
};
|
218
|
-
|
219
|
-
this.reset = function() {
|
220
|
-
delete TurbolinksAnimate.options.appear;
|
221
|
-
delete TurbolinksAnimate.options.previousType;
|
222
|
-
TurbolinksAnimate.inline = false;
|
223
|
-
};
|
224
|
-
this.resetClasses = function() {
|
225
|
-
$(TurbolinksAnimate.elements).each(function() {
|
226
|
-
$(this).removeClass(TurbolinksAnimate.animateClasses.join(' '));
|
227
|
-
});
|
228
|
-
};
|
229
|
-
|
230
|
-
this.animate = function() {
|
231
|
-
$(TurbolinksAnimate.elements).each(function() {
|
232
|
-
$(this).one( 'webkitAnimationEnd mozAnimationEnd oAnimationEnd oanimationend animationend', function() {
|
233
|
-
setTimeout(function() {
|
234
|
-
if ( TurbolinksAnimate.disappearing == false ) {
|
235
|
-
TurbolinksAnimate.resetClasses();
|
236
|
-
};
|
237
|
-
}, 250);
|
238
|
-
});
|
239
|
-
$(this).addClass(TurbolinksAnimate.getClassListFor(TurbolinksAnimate.getAnimation()));
|
240
|
-
});
|
241
|
-
};
|
242
|
-
this.getAnimation = function() {
|
243
|
-
var animation;
|
244
|
-
|
245
|
-
if (!TurbolinksAnimate.disappearing) { animation = TurbolinksAnimate.options.appear };
|
246
|
-
if (TurbolinksAnimate.inline) {
|
247
|
-
animation = TurbolinksAnimate.options.animation;
|
248
|
-
} else if ( typeof TurbolinksAnimate.element.data('turbolinks-animate-animation') !== 'undefined' ) {
|
249
|
-
animation = TurbolinksAnimate.element.data('turbolinks-animate-animation');
|
250
|
-
} else {
|
251
|
-
animation = TurbolinksAnimate.options.animation;
|
252
|
-
};
|
253
|
-
|
254
|
-
return animation;
|
255
|
-
};
|
256
|
-
this.getClassListFor = function(animations) {
|
257
|
-
var classList = 'animated',
|
258
|
-
browserWidth = $(window).width(),
|
259
|
-
animation = null;
|
260
|
-
|
261
|
-
var breakpoints = TurbolinksAnimate.options.breakpoints.sort(function( a, b ) {
|
262
|
-
return b.width - a.width;
|
263
|
-
});
|
264
|
-
$.each( breakpoints, function( k, breakpoint ) {
|
265
|
-
if ( animation == null && browserWidth <= breakpoint.width ) {
|
266
|
-
animation = animations[breakpoint.name.toString()];
|
267
|
-
};
|
268
|
-
});
|
269
|
-
if ( animation == null ) {
|
270
|
-
animation = animations;
|
271
|
-
};
|
272
|
-
|
273
|
-
classList += ' ';
|
274
|
-
animation = $.grep( TurbolinksAnimate.animations, function(object) { return object.name.toLowerCase() == animation.toLowerCase() })[0];
|
275
|
-
if ( TurbolinksAnimate.disappearing ) {
|
276
|
-
if ( animation.disappear != true ) {
|
277
|
-
animation = $.grep( TurbolinksAnimate.animations, function(object) { return object.name.toLowerCase() == animation.disappear.toLowerCase() })[0];
|
278
|
-
};
|
279
|
-
if ( TurbolinksAnimate.options.reversedDisappearing && animation.reverse != null ) {
|
280
|
-
classList += animation.reverse;
|
281
|
-
} else {
|
282
|
-
classList += animation.name;
|
283
|
-
};
|
284
|
-
} else {
|
285
|
-
classList += animation.name;
|
286
|
-
};
|
287
|
-
|
288
|
-
return classList;
|
289
|
-
};
|
290
|
-
|
291
|
-
};
|