autoroute.js - npm Package Compare versions

Comparing version 1.0.12 to 1.0.13

autoroute.js

@@ -6,3 +6,2 @@ import Touch from 'hammerjs'
   start : start,
-  hide : hide,
   routes : {},
@@ -20,6 +19,9 @@ t : []
   e.innerHTML = e.html = ''
-  e.classList.add('route')
+  e.className = 'route hide'
+  e.anim = false
+  e.q = {}
 
-  e.render = function () {
+  e.render = () => {
     fn.call(e)
+    e.anim ? e.style.zIndex = '2' : e.style.zIndex = '1'
     e.innerHTML = e.html
@@ -29,16 +31,11 @@ e.html = ''
 
-  e.show = function () {
-    e.style.display = 'block'
-  }
-
-  e.q = {}
   e.render()
+  route.routes[path] = e
 
-  route.routes[path] = e
 }
 
-function el (element, callback) {
+function el (element, fn) {
   var els = document.querySelectorAll(element)
   for (var i = 0; i < els.length; i++) {
-    callback(els[i], i)
+    fn(els[i], i)
   }
@@ -49,16 +46,17 @@ }
 
-  route.t.forEach(function (e) { e.destroy() })
+  route.t.forEach( e => e.destroy() )
   route.t = []
 
-  el('[link]', function (el, i) {
+  el('[link]', (el, i) => {
 
     route.t[i] = new Touch(el, { touchAction: 'pan-x pan-y' })
-    route.t[i].on('tap', function(ev) {
+    route.t[i].on('tap', ev => {
 
-        window.location.hash = '/' + ev.target.getAttribute('link')
+      window.location.hash = '/' + ev.target.getAttribute('link')
 
-        if ( !window.location.hash.split('?')[1] ) {
-          document.querySelectorAll('.active')[0].classList.remove('active')
-          ev.target.classList.add('active')
-        }
+      if ( !window.location.hash.split('?')[1] ) {
+        document.querySelectorAll('.active')[0].classList.remove('active')
+        ev.target.classList.add('active')
+      }
+
     })
@@ -73,12 +71,6 @@ })
 
-function hide () {
-  for (var item in this.routes) {
-    this.routes[item].style.display = 'none'
-  }
-}
-
 export default route
 
 window.location.hash = '/'
-window.addEventListener('hashchange', function (ev) {
+window.addEventListener('hashchange', ev => {
 
@@ -91,5 +83,3 @@ var newH = ev.newURL ? ev.newURL.split('#/')[1].split('?') : []
     if (newH[1]) {
-
       var q = newH[1].split('&')
-
       for (var i = 0; i < q.length; i++) {
@@ -99,11 +89,22 @@ var a = q[i].split('=')
       }
-
-      route.hide()
       route.routes[newH[0]].render()
-      route.routes[newH[0]].show()
+    }
 
+    if (route.routes[newH[0]].anim) {
+
+      route.routes[newH[0]].classList.remove('hide')
+      route.routes[newH[0]].classList.remove('out')
+      route.routes[newH[0]].classList.add('in')
+      setTimeout(function(){ route.routes[oldH[0]].classList.add('hide') }, 300)
+
+    } else if (route.routes[oldH[0]] && route.routes[oldH[0]].anim) {
+
+      route.routes[newH[0]].classList.remove('hide')
+      route.routes[oldH[0]].classList.remove('in')
+      route.routes[oldH[0]].classList.add('out')
+
     } else {
 
-      route.hide()
-      route.routes[newH[0]].show()
+      if (route.routes[oldH[0]]) route.routes[oldH[0]].classList.add('hide')
+      route.routes[newH[0]].classList.remove('hide')
 
@@ -113,9 +114,7 @@ }
   }
-
 })
 
-// Some style
 var h,f
-el('header', e => h = e.offsetHeight )
-el('footer', e => f = e.offsetHeight )
+el('header', e => h = e.offsetHeight)
+el('footer', e => f = e.offsetHeight)
 
@@ -162,3 +161,2 @@ var css = document.createElement('style')
   position: absolute;
-  z-index: 1;
   width: 100%;
@@ -170,5 +168,45 @@ height: ${ window.innerHeight - f - h - 20 + 'px' };
   animation-duration: 0.3s;
-  animation-delay: 0s
+  animation-delay: 0s;
+  animation-fill-mode: both
 }
+
+.hide {
+  visibility : hidden
+}
+
+@-webkit-keyframes slideInRight {
+  from {
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.in {
+  -webkit-animation-name: slideInRight;
+}
+
+@-webkit-keyframes slideOutRight {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+.out {
+  -webkit-animation-name: slideOutRight;
+  animation-name: slideOutRight;
+}
 `
 document.body.appendChild(css)

package.json

 {
   "name": "autoroute.js",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "Another lightweight javascript routing framework ",
@@ -5,0 +5,0 @@ "main": "autoroute.js",

README.md

@@ -7,2 +7,7 @@ # autoroute.js
 
+
+**1.0.12**
+
+- Slide animation with `this.anim`
+
 **1.0.11**
@@ -9,0 +14,0 @@

No alert changes

Improved metrics

Total package byte prevSize

8104

increased by15.52%

Lines of code

157

increased by25.6%

Number of lines in readme file

160

increased by3.23%

No dependency changes