Removed Jquery as a dependancy

JoeeGrigg · Jun 23, 2016 · 13970f8 · 13970f8
1 parent 3c5eff6
commit 13970f8
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 25 deletions.
diff --git a/README.md b/README.md
@@ -9,7 +9,6 @@ on and off the page.
 # Dependencies
 
 * Barba
-* Jquery
 
 # Installation
 
@@ -49,7 +48,6 @@ the ```data-transition``` attribute on each element that you wish to animate.
     </div>
   </div>
 
-  <script src="jquery.min.js" type="text/javascript"></script>
   <script src="barba.min.js" type="text/javascript"></script>
   <script src="barba.transitions.min.js" type="text/javascript"></script>
   <script src="main.js" type="text/javascript"></script>
@@ -69,9 +67,9 @@ the ```data-transition``` attribute on each element that you wish to animate.
 ### JS
 
 ```
-$(function(){
+window.onload = function() {
   Barba.Pjax.start();
-});
+}
 ```
 
 # Setting a custom transition time

diff --git a/example/index.html b/example/index.html
@@ -21,7 +21,6 @@
     </div>
   </div>
 
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js" type="text/javascript"></script>
   <script src="https://rawgit.com/luruke/barba.js/master/dist/barba.min.js" type="text/javascript"></script>
   <script src="temp/barba.transitions.min.js" type="text/javascript"></script>
   <script src="main.js" type="text/javascript"></script>

diff --git a/example/main.js b/example/main.js
@@ -1,3 +1,3 @@
-$(function(){
+window.onload = function() {
   Barba.Pjax.start();
-});
+}
diff --git a/example/post.html b/example/post.html
@@ -29,7 +29,6 @@ <h2>My Post Title</h2>
     </div>
   </div>
 
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js" type="text/javascript"></script>
   <script src="https://rawgit.com/luruke/barba.js/master/dist/barba.min.js" type="text/javascript"></script>
   <script src="temp/barba.transitions.min.js" type="text/javascript"></script>
   <script src="main.js" type="text/javascript"></script>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "barba-transitions",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "An addon to BarbaJS which makes it really easy to use css transitions for page transitions.",
   "main": "barba.transitions.js",
   "directories": {

diff --git a/src/transition.js b/src/transition.js
@@ -9,7 +9,7 @@ var Transition = Barba.BaseTransition.extend({
 
   runTransition: function() {
 
-    $('body').css('overflow', 'hidden');
+    document.body.style.overflow = 'hidden';
 
     ////////////////////////////
     // Setup
@@ -21,22 +21,40 @@ var Transition = Barba.BaseTransition.extend({
     ////////////////////////////
 
     // Set the animation time on all elements
-    var allAnimationElements = $('[' + transitionSelector + ']');
-    $.each(allAnimationElements, function() {
-      $(this).css('animation-duration', transitionLengthSeconds).css('animation-delay', transitionLengthSeconds).css('animation-name', $(this).data('transition')).css('animation-fill-mode', 'forwards');
-    })
+    var allAnimationElements = document.querySelectorAll('[' + transitionSelector + ']');
+    for (var i = 0; i < allAnimationElements.length; i++) {
+      element = allAnimationElements[i];
+
+      // Set styles
+      element.style.animationDuration = transitionLengthSeconds;
+      element.style.animationDelay = transitionLengthSeconds;
+      element.style.animationName = element.dataset.transition;
+      element.style.animationFillMode = 'forwards';
+    }
 
     // Get all old elements with transitions
-    var oldElements = $(this.oldContainer).find('[' + transitionSelector + ']');
-    $.each(oldElements, function() {
-      $(this).removeAttr('style');
-    });
+    var oldElements = this.oldContainer.querySelectorAll('[' + transitionSelector + ']');
+    for (var i = 0; i < oldElements.length; i++) {
+      element = oldElements[i];
 
+      // Remove style tag
+      element.removeAttribute('style');
+    }
+
     // Trigger out transitions
     setTimeout(function(){
-      $.each(oldElements, function() {
-        $(this).css('animation-duration', transitionLengthSeconds).css('animation-delay', transitionLengthSeconds).css('animation-name', $(this).data('transition')).css('animation-direction', 'alternate-reverse').css('animation-delay', '0s').css('animation-fill-mode', 'forwards');
-      });
+
+      for (var i = 0; i < oldElements.length; i++) {
+        element = oldElements[i];
+
+        // Set styles
+        element.style.animationDuration = transitionLengthSeconds;
+        element.style.animationDelay = '0s';
+        element.style.animationName = element.dataset.transition;
+        element.style.animationFillMode = 'forwards';
+        element.style.animationDirection = 'alternate-reverse';
+      }
+
     }, transitionTimeout);
 
     var x = this;
@@ -45,11 +63,14 @@ var Transition = Barba.BaseTransition.extend({
       // Remove old container and add new one
       x.oldContainer.style.visibility = 'hidden';
       x.newContainer.style.visibility = 'visible';
+
+      // Remove style tag at the end of the animation
       setTimeout(function(){
-        $('body').css('overflow', 'visible');
-        $.each(allAnimationElements, function() {
-          $(this).removeAttr('style');
-        });
+        document.body.style.overflow = 'visible';
+        for (var i = 0; i < allAnimationElements.length; i++) {
+          element = allAnimationElements[i];
+          element.removeAttribute('style');
+        }
       }, transitionLength);
 
       // Scroll to top
@@ -60,6 +81,7 @@ var Transition = Barba.BaseTransition.extend({
 
     }
 
+    // Mark as done
     setTimeout(function(){
       done(x);
     }, transitionLength + transitionTimeout);