Animate It! - Version 1.2

Version Description

Download this release

Release Info

Developer eleopard
Plugin Icon 128x128 Animate It!
Version 1.2
Comparing to
See all releases

Code changes from version 1.1 to 1.2

Files changed (6) hide show
  1. assets/css/animate.css +141 -1
  2. assets/helper/Mobile_Detect.php +1 -1
  3. assets/helper/eds_tinymce_popup.php +41 -1
  4. assets/js/edsanimate.js +6 -3
  5. edsanimate.php +12 -3
  6. readme.txt +5 -1
assets/css/animate.css CHANGED
@@ -9,7 +9,7 @@
9
  }
10
 
11
 
12
-
13
  .delay1 {
14
  -webkit-animation-delay: .5s;
15
  -moz-animation-delay: .5s;
@@ -94,6 +94,146 @@
94
  -o-animation-delay: 6s;
95
  }
96
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
97
 
98
  /*!
99
  Animate.css - http://daneden.me/animate
9
  }
10
 
11
 
12
+ /*Delay classes*/
13
  .delay1 {
14
  -webkit-animation-delay: .5s;
15
  -moz-animation-delay: .5s;
94
  -o-animation-delay: 6s;
95
  }
96
 
97
+ /*Duration Classes*/
98
+ .duration1 {
99
+ -webkit-animation-duration: .5s !important;
100
+ -moz-animation-duration: .5s !important;
101
+ -ms-animation-duration: .5s !important;
102
+ -o-animation-duration: .5s !important;
103
+ }
104
+
105
+ .duration2 {
106
+ -webkit-animation-duration: 1s !important;
107
+ -moz-animation-duration: 1s !important;
108
+ -ms-animation-duration: 1s !important;
109
+ -o-animation-duration: 1s !important;
110
+ }
111
+
112
+ .duration3 {
113
+ -webkit-animation-duration: 1.5s !important;
114
+ -moz-animation-duration: 1.5s !important;
115
+ -ms-animation-duration: 1.5s !important;
116
+ -o-animation-duration: 1.5s !important;
117
+ }
118
+
119
+ .duration4 {
120
+ -webkit-animation-duration: 2s !important;
121
+ -moz-animation-duration: 2s !important;
122
+ -ms-animation-duration: 2s !important;
123
+ -o-animation-duration: 2s !important;
124
+ }
125
+
126
+ .duration5 {
127
+ -webkit-animation-duration: 2.5s !important;
128
+ -moz-animation-duration: 2.5s !important;
129
+ -ms-animation-duration: 2.5s !important;
130
+ -o-animation-duration: 2.5s !important;
131
+ }
132
+
133
+ .duration6 {
134
+ -webkit-animation-duration: 3s !important;
135
+ -moz-animation-duration: 3s !important;
136
+ -ms-animation-duration: 3s !important;
137
+ -o-animation-duration: 3s !important;
138
+ }
139
+
140
+ .duration7 {
141
+ -webkit-animation-duration: 3.5s !important;
142
+ -moz-animation-duration: 3.5s !important;
143
+ -ms-animation-duration: 3.5s !important;
144
+ -o-animation-duration: 3.5s !important;
145
+ }
146
+
147
+ .duration8 {
148
+ -webkit-animation-duration: 4s !important;
149
+ -moz-animation-duration: 4s !important;
150
+ -ms-animation-duration: 4s !important;
151
+ -o-animation-duration: 4s !important;
152
+ }
153
+
154
+ .duration9 {
155
+ -webkit-animation-duration: 4.5s !important;
156
+ -moz-animation-duration: 4.5s !important;
157
+ -ms-animation-duration: 4.5s !important;
158
+ -o-animation-duration: 4.5s !important;
159
+ }
160
+
161
+ .duration10 {
162
+ -webkit-animation-duration: 5s !important;
163
+ -moz-animation-duration: 5s !important;
164
+ -ms-animation-duration: 5s !important;
165
+ -o-animation-duration: 5s !important;
166
+ }
167
+
168
+ .duration11 {
169
+ -webkit-animation-duration: 5.5s !important;
170
+ -moz-animation-duration: 5.5s !important;
171
+ -ms-animation-duration: 5.5s !important;
172
+ -o-animation-duration: 5.5s !important;
173
+ }
174
+
175
+ .duration12 {
176
+ -webkit-animation-duration: 6s !important;
177
+ -moz-animation-duration: 6s !important;
178
+ -ms-animation-duration: 6s !important;
179
+ -o-animation-duration: 6s !important;
180
+ }
181
+
182
+ .duration13 {
183
+ -webkit-animation-duration: 6.5s !important;
184
+ -moz-animation-duration: 6.5s !important;
185
+ -ms-animation-duration: 6.5s !important;
186
+ -o-animation-duration: 6.5s !important;
187
+ }
188
+
189
+ .duration14 {
190
+ -webkit-animation-duration: 7s !important;
191
+ -moz-animation-duration: 7s !important;
192
+ -ms-animation-duration: 7s !important;
193
+ -o-animation-duration: 7s !important;
194
+ }
195
+
196
+ .duration15 {
197
+ -webkit-animation-duration: 7.5s !important;
198
+ -moz-animation-duration: 7.5s !important;
199
+ -ms-animation-duration: 7.5s !important;
200
+ -o-animation-duration: 7.5s !important;
201
+ }
202
+
203
+ .duration16 {
204
+ -webkit-animation-duration: 8s !important;
205
+ -moz-animation-duration: 8s !important;
206
+ -ms-animation-duration: 8s !important;
207
+ -o-animation-duration: 8s !important;
208
+ }
209
+
210
+ .duration17 {
211
+ -webkit-animation-duration: 8.5s !important;
212
+ -moz-animation-duration: 8.5s !important;
213
+ -ms-animation-duration: 8.5s !important;
214
+ -o-animation-duration: 8.5s !important;
215
+ }
216
+
217
+ .duration18 {
218
+ -webkit-animation-duration: 9s !important;
219
+ -moz-animation-duration: 9s !important;
220
+ -ms-animation-duration: 9s !important;
221
+ -o-animation-duration: 9s !important;
222
+ }
223
+
224
+ .duration19 {
225
+ -webkit-animation-duration: 9.5s !important;
226
+ -moz-animation-duration: 9.5s !important;
227
+ -ms-animation-duration: 9.5s !important;
228
+ -o-animation-duration: 9.5s !important;
229
+ }
230
+
231
+ .duration20 {
232
+ -webkit-animation-duration: 10s !important;
233
+ -moz-animation-duration: 10s !important;
234
+ -ms-animation-duration: 10s !important;
235
+ -o-animation-duration: 10s !important;
236
+ }
237
 
238
  /*!
239
  Animate.css - http://daneden.me/animate
assets/helper/Mobile_Detect.php CHANGED
@@ -23,7 +23,7 @@
23
  * @version 2.8.3
24
  */
25
 
26
- class Mobile_Detect
27
  {
28
  /**
29
  * Mobile detection type.
23
  * @version 2.8.3
24
  */
25
 
26
+ class EDS_Mobile_Detect
27
  {
28
  /**
29
  * Mobile detection type.
assets/helper/eds_tinymce_popup.php CHANGED
@@ -17,7 +17,7 @@
17
  <main class="site__content island" role="content">
18
  <div class="wrap">
19
  <form name = "edsanimate_form" id = "edsanimate_form">
20
- <table width="570" cellspacing="15" cellpadding="15">
21
  <tr>
22
  <td>Animation Style: </td>
23
  <td>
@@ -150,6 +150,40 @@
150
  </select>
151
  </td>
152
  </tr>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
153
  <tr>
154
  <td>Animate On Scroll: </td>
155
  <td colspan="2">
@@ -181,6 +215,7 @@
181
  };
182
 
183
  $(document).ready(function(){
 
184
  $("input[name=eds_onscroll]").bootstrapSwitch();
185
  $('.js--triggerAnimation').click(function(e){
186
  e.preventDefault();
@@ -204,6 +239,11 @@
204
  if( hForm.eds_delay.value!="")
205
  shortCode += " delay=\"" + hForm.eds_delay.value + "\" ";
206
 
 
 
 
 
 
207
  shortCode += ((hForm.eds_onscroll.checked)?' on_scroll="yes"] ':' on_scroll="no"]');
208
 
209
  shortCode += "<h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3><p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type</p>";
17
  <main class="site__content island" role="content">
18
  <div class="wrap">
19
  <form name = "edsanimate_form" id = "edsanimate_form">
20
+ <table width="600" cellspacing="15" cellpadding="15">
21
  <tr>
22
  <td>Animation Style: </td>
23
  <td>
150
  </select>
151
  </td>
152
  </tr>
153
+ <tr>
154
+ <td>Duration (in seconds): </td>
155
+ <td colspan="2">
156
+ <select id="eds_duration" name="eds_duration" class = "input input--dropdown">
157
+ <option value="">None</option>
158
+ <option value="1">0.5 </option>
159
+ <option value="2">1.0 </option>
160
+ <option value="3">1.5 </option>
161
+ <option value="4">2.0 </option>
162
+ <option value="5">2.5 </option>
163
+ <option value="6">3.0 </option>
164
+ <option value="7">3.5 </option>
165
+ <option value="8">4.0 </option>
166
+ <option value="9">4.5 </option>
167
+ <option value="10">5.0 </option>
168
+ <option value="11">5.5 </option>
169
+ <option value="12">6.0 </option>
170
+ <option value="13">6.5 </option>
171
+ <option value="14">7.0 </option>
172
+ <option value="15">7.5 </option>
173
+ <option value="16">8.0 </option>
174
+ <option value="17">8.5 </option>
175
+ <option value="18">9.0 </option>
176
+ <option value="19">9.5 </option>
177
+ <option value="20">10.0 </option>
178
+ </select>
179
+ </td>
180
+ </tr>
181
+ <tr>
182
+ <td>Animate Infinitely: </td>
183
+ <td colspan="2">
184
+ <input type="checkbox" data-size="large" name="eds_infinite" data-on-text="Yes" data-off-text="No">
185
+ </td>
186
+ </tr>
187
  <tr>
188
  <td>Animate On Scroll: </td>
189
  <td colspan="2">
215
  };
216
 
217
  $(document).ready(function(){
218
+ $("input[name=eds_infinite]").bootstrapSwitch();
219
  $("input[name=eds_onscroll]").bootstrapSwitch();
220
  $('.js--triggerAnimation').click(function(e){
221
  e.preventDefault();
239
  if( hForm.eds_delay.value!="")
240
  shortCode += " delay=\"" + hForm.eds_delay.value + "\" ";
241
 
242
+ if( hForm.eds_duration.value!="")
243
+ shortCode += " duration=\"" + hForm.eds_duration.value + "\" ";
244
+
245
+ shortCode += ((hForm.eds_infinite.checked)?' infinite_animation="yes" ':' infinite_animation="no" ');
246
+
247
  shortCode += ((hForm.eds_onscroll.checked)?' on_scroll="yes"] ':' on_scroll="no"]');
248
 
249
  shortCode += "<h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3><p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type</p>";
assets/js/edsanimate.js CHANGED
@@ -27,8 +27,9 @@
27
  */
28
  (function($) {
29
  $(document).ready(function(){
30
- var animationStyleClasses = ["animated", "bounce", "flash", "pulse", "rubberBand", "shake", "swing", "tada", "wobble", "bounceIn", "bounceInDown", "bounceInLeft", "bounceInRight", "bounceInUp", "bounceOut", "bounceOutDown", "bounceOutLeft", "bounceOutRight", "bounceOutUp", "fadeIn", "fadeInDown", "fadeInDownBig", "fadeInLeft", "fadeInLeftBig", "fadeInRight", "fadeInRightBig", "fadeInUp", "fadeInUpBig", "fadeOut", "fadeOutDown", "fadeOutDownBig", "fadeOutLeft", "fadeOutLeftBig", "fadeOutRight", "fadeOutRightBig", "fadeOutUp", "fadeOutUpBig", "flip", "flipInX", "flipInY", "flipOutX", "flipOutY", "lightSpeedIn", "lightSpeedOut", "rotateIn", "rotateInDownLeft", "rotateInDownRight", "rotateInUpLeft", "rotateInUpRight", "rotateOut", "rotateOutDownLeft", "rotateOutDownRight", "rotateOutUpLeft", "rotateOutUpRight", "hinge", "rollIn", "rollOut", "zoomIn", "zoomInDown", "zoomInLeft", "zoomInRight", "zoomInUp", "zoomOut", "zoomOutDown", "zoomOutLeft", "zoomOutRight", "zoomOutUp"];
31
  var delayClasses = ["delay1", "delay2", "delay3", "delay4", "delay5", "delay6", "delay7", "delay8", "delay9", "delay10", "delay11", "delay12"];
 
32
  var scrollOffset = scroll_offset;
33
 
34
  $('.eds-on-scroll').each(function(){
@@ -42,7 +43,8 @@
42
  $.each(classList, function(index, value){
43
  if((value=='eds-on-scroll')
44
  || ($.inArray(value, animationStyleClasses)!==-1)
45
- || ($.inArray(value, delayClasses)!==-1))
 
46
  removeClassList += " " + value;
47
  });
48
 
@@ -58,7 +60,8 @@
58
  var classList = className.trim().split(/\s+/);
59
  $.each(classList, function(index, value){
60
  if(($.inArray(value, animationStyleClasses)!==-1)
61
- || ($.inArray(value, delayClasses)!==-1))
 
62
  removeClassList += " " + value;
63
  });
64
 
27
  */
28
  (function($) {
29
  $(document).ready(function(){
30
+ var animationStyleClasses = ["animated","infinite", "bounce", "flash", "pulse", "rubberBand", "shake", "swing", "tada", "wobble", "bounceIn", "bounceInDown", "bounceInLeft", "bounceInRight", "bounceInUp", "bounceOut", "bounceOutDown", "bounceOutLeft", "bounceOutRight", "bounceOutUp", "fadeIn", "fadeInDown", "fadeInDownBig", "fadeInLeft", "fadeInLeftBig", "fadeInRight", "fadeInRightBig", "fadeInUp", "fadeInUpBig", "fadeOut", "fadeOutDown", "fadeOutDownBig", "fadeOutLeft", "fadeOutLeftBig", "fadeOutRight", "fadeOutRightBig", "fadeOutUp", "fadeOutUpBig", "flip", "flipInX", "flipInY", "flipOutX", "flipOutY", "lightSpeedIn", "lightSpeedOut", "rotateIn", "rotateInDownLeft", "rotateInDownRight", "rotateInUpLeft", "rotateInUpRight", "rotateOut", "rotateOutDownLeft", "rotateOutDownRight", "rotateOutUpLeft", "rotateOutUpRight", "hinge", "rollIn", "rollOut", "zoomIn", "zoomInDown", "zoomInLeft", "zoomInRight", "zoomInUp", "zoomOut", "zoomOutDown", "zoomOutLeft", "zoomOutRight", "zoomOutUp"];
31
  var delayClasses = ["delay1", "delay2", "delay3", "delay4", "delay5", "delay6", "delay7", "delay8", "delay9", "delay10", "delay11", "delay12"];
32
+ var durationClasses = ["duration1", "duration2", "duration3", "duration4", "duration5", "duration6", "duration7", "duration8", "duration9", "duration10", "duration11", "duration12", "duration13", "duration14", "duration15", "duration16", "duration17", "duration18", "duration19", "duration20"];
33
  var scrollOffset = scroll_offset;
34
 
35
  $('.eds-on-scroll').each(function(){
43
  $.each(classList, function(index, value){
44
  if((value=='eds-on-scroll')
45
  || ($.inArray(value, animationStyleClasses)!==-1)
46
+ || ($.inArray(value, delayClasses)!==-1)
47
+ || ($.inArray(value, durationClasses)!==-1))
48
  removeClassList += " " + value;
49
  });
50
 
60
  var classList = className.trim().split(/\s+/);
61
  $.each(classList, function(index, value){
62
  if(($.inArray(value, animationStyleClasses)!==-1)
63
+ || ($.inArray(value, delayClasses)!==-1)
64
+ || ($.inArray(value, durationClasses)!==-1))
65
  removeClassList += " " + value;
66
  });
67
 
edsanimate.php CHANGED
@@ -3,7 +3,7 @@
3
  * Plugin Name: Animate It!
4
  * Plugin URI: http://www.eleopard.in
5
  * Description: It will allow user to add CSS Animations
6
- * Version: 1.1
7
  * Author: eLEOPARD Design Studios
8
  * Author URI: http://www.eleopard.in
9
  * License: GNU General Public License version 2 or later; see LICENSE.txt
@@ -27,8 +27,10 @@
27
  * For any other query please contact us at contact[at]eleopard[dot]in
28
  */
29
 
 
 
 
30
 
31
- include_once 'assets/helper/Mobile_Detect.php';
32
  include_once 'eds_tinymce.php';
33
 
34
 
@@ -37,7 +39,7 @@ function detectDevice()
37
  static $deviceType = null;
38
  if(!$deviceType)
39
  {
40
- $detect = new Mobile_Detect;
41
  $deviceType = ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'phone') : 'computer');
42
  }
43
  return $deviceType;
@@ -207,6 +209,8 @@ function edsanimate_handler( $attributes, $content = null ) {
207
  extract( shortcode_atts( array(
208
  'animation' => '',
209
  'delay' => '',
 
 
210
  'on_scroll' => ''
211
  ), $attributes ) );
212
 
@@ -220,9 +224,14 @@ function edsanimate_handler( $attributes, $content = null ) {
220
 
221
  $classString .= " " . $animation;
222
 
 
 
 
223
  if($delay!= '' && is_int((int)$delay) && $delay>=0 && $delay <=12)
224
  $classString .= " delay" . $delay;
225
 
 
 
226
 
227
  if(strcasecmp($on_scroll, 'yes')==0)
228
  $classString .= " eds-on-scroll";
3
  * Plugin Name: Animate It!
4
  * Plugin URI: http://www.eleopard.in
5
  * Description: It will allow user to add CSS Animations
6
+ * Version: 1.2
7
  * Author: eLEOPARD Design Studios
8
  * Author URI: http://www.eleopard.in
9
  * License: GNU General Public License version 2 or later; see LICENSE.txt
27
  * For any other query please contact us at contact[at]eleopard[dot]in
28
  */
29
 
30
+ if (!class_exists('EDS_Mobile_Detect')):
31
+ include_once 'assets/helper/Mobile_Detect.php';
32
+ endif;
33
 
 
34
  include_once 'eds_tinymce.php';
35
 
36
 
39
  static $deviceType = null;
40
  if(!$deviceType)
41
  {
42
+ $detect = new EDS_Mobile_Detect();
43
  $deviceType = ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'phone') : 'computer');
44
  }
45
  return $deviceType;
209
  extract( shortcode_atts( array(
210
  'animation' => '',
211
  'delay' => '',
212
+ 'duration' => '',
213
+ 'infinite_animation' =>'',
214
  'on_scroll' => ''
215
  ), $attributes ) );
216
 
224
 
225
  $classString .= " " . $animation;
226
 
227
+ if(strcasecmp($infinite_animation, 'yes')==0)
228
+ $classString .= " infinite";
229
+
230
  if($delay!= '' && is_int((int)$delay) && $delay>=0 && $delay <=12)
231
  $classString .= " delay" . $delay;
232
 
233
+ if($duration!= '' && is_int((int)$duration) && $duration>=0 && $duration <=12)
234
+ $classString .= " duration" . $duration;
235
 
236
  if(strcasecmp($on_scroll, 'yes')==0)
237
  $classString .= " eds-on-scroll";
readme.txt CHANGED
@@ -3,7 +3,7 @@ Contributors: eleopard
3
  Tags: css3 animation, animate.css, jquery, on scroll animation, delay animation
4
  Requires at least: 2.7
5
  Tested up to: 4.0
6
- Stable tag: 1.1
7
  License: GNU General Public License version 2 or later
8
  License URI: http://www.gnu.org/copyleft/gpl.html
9
 
@@ -21,6 +21,8 @@ Some of the Key features Include:
21
  * Allowing user to apply CSS3 animations on WordPress Posts and Text Widgets
22
  * Capability to apply animation on Scroll
23
  * Provide special CSS delay classes to create a nice animation sequence with multiple text widgets and posts
 
 
24
  * Options to enable or disable animations on Smartphones and Tablets.
25
 
26
  All the CSS3 animations are from [Animate.css](http://daneden.github.io/animate.css/ "Animate.css")
@@ -54,6 +56,8 @@ Percentage scroll offset can be set from Settings-> Animate It! menu in the admi
54
 
55
 
56
  == Changelog ==
 
 
57
 
58
  = Version 1.1 =
59
  * New options added under Settings-> Animate It! to enable or disable animations on Smartphones and Tablets.
3
  Tags: css3 animation, animate.css, jquery, on scroll animation, delay animation
4
  Requires at least: 2.7
5
  Tested up to: 4.0
6
+ Stable tag: 1.2
7
  License: GNU General Public License version 2 or later
8
  License URI: http://www.gnu.org/copyleft/gpl.html
9
 
21
  * Allowing user to apply CSS3 animations on WordPress Posts and Text Widgets
22
  * Capability to apply animation on Scroll
23
  * Provide special CSS delay classes to create a nice animation sequence with multiple text widgets and posts
24
+ * Allow user to add animation duration
25
+ * Allow user to apply animation infinitely
26
  * Options to enable or disable animations on Smartphones and Tablets.
27
 
28
  All the CSS3 animations are from [Animate.css](http://daneden.github.io/animate.css/ "Animate.css")
56
 
57
 
58
  == Changelog ==
59
+ = Version 1.2 =
60
+ * New options to add animation duration and infinite animation while applying an animation on WordPress Post, Page or widget.
61
 
62
  = Version 1.1 =
63
  * New options added under Settings-> Animate It! to enable or disable animations on Smartphones and Tablets.