autoroute.js
Advanced tools
autoroute.js - npm Package Compare versions
Comparing version 1.0.16 to 1.0.17
@@ -7,3 +7,3 @@ import Touch from 'hammerjs' | ||
| routes : {}, | ||
| t : [] | ||
| t : { link : [], back : [] } | ||
| } | ||
@@ -23,3 +23,3 @@ | ||
| e.render = () => { | ||
| e.render = () => { | ||
| fn.call(e) | ||
@@ -29,2 +29,3 @@ e.anim ? e.style.zIndex = '2' : e.style.zIndex = '1' | ||
| e.html = '' | ||
| linkify() | ||
| } | ||
@@ -46,9 +47,10 @@ | ||
| route.t.forEach( e => e.destroy() ) | ||
| route.t = [] | ||
| route.t.link.destroy ? route.t.link.forEach( e => e.destroy() ) : | ||
| route.t.back.destroy ? route.t.back.forEach( e => e.destroy() ) : | ||
| route.t = { link : [], back : [] } | ||
| el('[link]', (el, i) => { | ||
| route.t[i] = new Touch(el, { touchAction: 'pan-x pan-y' }) | ||
| route.t[i].on('tap', ev => { | ||
| route.t.link[i] = new Touch(el, { touchAction: 'pan-x pan-y' }) | ||
| route.t.link[i].on('tap', ev => { | ||
@@ -64,2 +66,8 @@ window.location.hash = '/' + ev.target.getAttribute('link') | ||
| }) | ||
| el('[back]', (el, i) => { | ||
| route.t.back[i] = new Touch(el, { touchAction: 'pan-x pan-y' }) | ||
| route.t.back[i].on('tap', () => history.go(-1) ) | ||
| }) | ||
| } | ||
@@ -69,3 +77,2 @@ | ||
| window.location.hash = path | ||
| linkify() | ||
| } | ||
@@ -98,2 +105,3 @@ | ||
| setTimeout(function(){ route.routes[oldH[0]].classList.add('hide') }, 300) | ||
| el('[back]', e => e.classList.remove('hide') ) | ||
@@ -105,2 +113,3 @@ } else if (route.routes[oldH[0]] && route.routes[oldH[0]].anim) { | ||
| route.routes[oldH[0]].classList.add('out') | ||
| el('[back]', e => e.classList.add('hide') ) | ||
@@ -121,5 +130,9 @@ } else { | ||
| var css = document.createElement('style') | ||
| var css = document.createElement('autorouthings') | ||
| css.innerHTML = | ||
| ` | ||
| <svg back xmlns="http://www.w3.org/2000/svg" width="13" height="22" class="hide"> | ||
| <path fill="#fff" fill-rule="evenodd" d="M.5 11L11 .5l2 2L4.5 11l8.5 8.5-2 2L.5 11z"/> | ||
| </svg> | ||
| <style> | ||
| * { | ||
@@ -134,22 +147,13 @@ padding: 0; | ||
| } | ||
| *:not(input) { | ||
| -webkit-user-select: none | ||
| } | ||
| ::-webkit-scrollbar { | ||
| display:none | ||
| } | ||
| html { | ||
| background-color: #fafafa | ||
| } | ||
| body, #route { | ||
| *:not(input) { -webkit-user-select: none } | ||
| ::-webkit-scrollbar { display:none } | ||
| .hide { display : none } | ||
| body, #router { | ||
| display: block; | ||
| position: absolute; | ||
| width: 100%; | ||
| background-color: #fafafa; | ||
| overflow: hidden | ||
| } | ||
| #router { top : ${ h }px } | ||
| a { | ||
@@ -159,3 +163,2 @@ text-decoration: none; | ||
| } | ||
| .route { | ||
@@ -165,3 +168,3 @@ display: block; | ||
| width: 100%; | ||
| height: ${ window.innerHeight - f - h - 20 + 'px' }; | ||
| height: ${ window.innerHeight - f - h - 20}px; | ||
| overflow-y: scroll; | ||
@@ -174,7 +177,7 @@ -webkit-overflow-scrolling: touch; | ||
| } | ||
| .hide { | ||
| display : none | ||
| [back]{ | ||
| position: fixed; | ||
| z-index: 10; | ||
| padding: 10px | ||
| } | ||
| @-webkit-keyframes slideInRight { | ||
@@ -184,33 +187,29 @@ from { | ||
| transform: translate3d(100%, 0, 0); | ||
| visibility: visible; | ||
| visibility: visible | ||
| } | ||
| to { | ||
| -webkit-transform: translate3d(0, 0, 0); | ||
| transform: translate3d(0, 0, 0); | ||
| transform: translate3d(0, 0, 0) | ||
| } | ||
| } | ||
| .in { | ||
| -webkit-animation-name: slideInRight; | ||
| -webkit-animation-name: slideInRight | ||
| } | ||
| @-webkit-keyframes slideOutRight { | ||
| from { | ||
| -webkit-transform: translate3d(0, 0, 0); | ||
| transform: translate3d(0, 0, 0); | ||
| transform: translate3d(0, 0, 0) | ||
| } | ||
| to { | ||
| visibility: hidden; | ||
| -webkit-transform: translate3d(100%, 0, 0); | ||
| transform: translate3d(100%, 0, 0); | ||
| transform: translate3d(100%, 0, 0) | ||
| } | ||
| } | ||
| .out { | ||
| -webkit-animation-name: slideOutRight; | ||
| animation-name: slideOutRight; | ||
| animation-name: slideOutRight | ||
| } | ||
| </style> | ||
| ` | ||
| document.body.appendChild(css) |
| { | ||
| "name": "autoroute.js", | ||
| "version": "1.0.16", | ||
| "version": "1.0.17", | ||
| "description": "Another lightweight javascript routing framework ", | ||
@@ -5,0 +5,0 @@ "main": "autoroute.js", |
@@ -7,6 +7,2 @@ # autoroute.js | ||
| **1.013/14** | ||
| - Some improvements | ||
| **1.0.12** | ||
@@ -35,3 +31,3 @@ | ||
| **path** : `string` it can be `/article` | ||
| **callback** : `function` your module function, to make things when route is matching path | ||
| **callback** : `function` a function to make things when route is matching path | ||
@@ -46,3 +42,3 @@ ### route.start | ||
| Inside your module you can do this, see `hello-world.js` or `bye.js` in the following : | ||
| Inside your module you can do this, see `hello.js` or `bye.js` in the following : | ||
@@ -49,0 +45,0 @@ #### this.html |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by7.53%
8744
- Lines of code
- increased by6.37%
167
Worsened metrics
- Number of lines in readme file
- decreased by-2.45%
159