forked from tapquo/Lungo.js
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
6 changed files
with
154 additions
and
116 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -8,38 +8,36 @@ Handles the <sections> and <articles> to show | |
| @author Guillermo Pascual <[email protected]> || @pasku1 | ||
| ### | ||
|
|
||
| Lungo.Router = do(lng = Lungo) -> | ||
| Lungo.Router = do (lng = Lungo) -> | ||
|
|
||
| C = lng.Constants | ||
| HASHTAG = "#" | ||
| ANIMATIONEND_EVENTS = ["animationend", "webkitAnimationEnd", "oanimationend", "MSAnimationEnd"] | ||
| _history = [] | ||
|
|
||
| _outPage = undefined | ||
| _inPage = undefined | ||
| _animating = false | ||
|
|
||
| ### | ||
| Navigate to a <section>. | ||
| @method section | ||
| @param {string} Id of the <section> | ||
| ### | ||
| section = (section_id) -> | ||
| console.error "router section #{section_id}" | ||
| current = lng.Element.Cache.section | ||
| if _notCurrentTarget(current, section_id) | ||
| _outPage = lng.Element.Cache.section | ||
| if _notCurrentTarget(_outPage, section_id) | ||
| query = C.ELEMENT.SECTION + HASHTAG + section_id | ||
| target = if current then current.siblings(query) else lng.dom(query) | ||
| if target.length > 0 | ||
| if lng.DEVICE is C.DEVICE.PHONE and current? | ||
|
|
||
| console.error current, target | ||
| current.addClass "moveToBack" | ||
| target.addClass "moveFromRight" | ||
| do _bindEnd | ||
| # current.siblings("#{C.ELEMENT.SECTION}.#{C.CLASS.LAST}").removeClass C.CLASS.LAST | ||
| # lng.Section.defineTransition target, current | ||
| # current.removeClass(C.CLASS.SHOW).addClass(C.CLASS.HIDE).addClass(C.CLASS.LAST) | ||
|
|
||
| lng.Section.show current, target | ||
| # lng.Router.step section_id | ||
| _inPage = if _outPage then _outPage.siblings(query) else lng.dom(query) | ||
| if _inPage.length > 0 | ||
| if lng.DEVICE is C.DEVICE.PHONE and _outPage? | ||
| outClass = _inPage.data(C.ATTRIBUTE.TRANSITION) + "Out" | ||
| inClass = _inPage.data(C.ATTRIBUTE.TRANSITION) + "In" | ||
| _outPage.addClass(outClass).addClass("show") | ||
| _inPage.addClass(inClass).addClass("show") | ||
| do _bindAnimationEnd | ||
|
|
||
| lng.Section.show _outPage, _inPage | ||
| lng.Router.step section_id | ||
| do _url unless Lungo.Config.history is false | ||
| do _updateNavigationElements | ||
|
|
||
|
|
@@ -49,20 +47,20 @@ Lungo.Router = do(lng = Lungo) -> | |
| @method back | ||
| ### | ||
| back = -> | ||
| _removeLast() | ||
| current = lng.Element.Cache.section | ||
| do _removeLast | ||
| _outPage = lng.Element.Cache.section | ||
| query = C.ELEMENT.SECTION + HASHTAG + history() | ||
| target = current.siblings(query) | ||
| _inPage = _outPage.siblings(query) | ||
| if lng.DEVICE is C.DEVICE.PHONE | ||
| lng.Aside.hide() | ||
| lng.Section.assignTransition target, target.data C.TRANSITION.ORIGIN | ||
| current.removeClass(C.CLASS.SHOW).addClass(C.CLASS.HIDING) | ||
| setTimeout (-> | ||
| current.removeClass(C.CLASS.HIDING) | ||
| ), C.TRANSITION.DURATION | ||
| if target.hasClass("aside") then lng.Aside.toggle() | ||
|
|
||
| lng.Section.show current, target | ||
| do lng.Aside.hide | ||
| outClass = _outPage.data(C.ATTRIBUTE.TRANSITION) + "OutBack" | ||
| inClass = _outPage.data(C.ATTRIBUTE.TRANSITION) + "InBack" | ||
| _outPage.addClass(outClass).addClass("show") | ||
| _inPage.addClass(inClass).addClass("show") | ||
| do _bindAnimationEnd | ||
| if _inPage.hasClass("aside") then lng.Aside.toggle() | ||
|
|
||
| lng.Section.show _outPage, _inPage | ||
| do _url unless Lungo.Config.history is false | ||
| do _updateNavigationElements | ||
|
|
||
|
|
@@ -123,15 +121,20 @@ Lungo.Router = do(lng = Lungo) -> | |
|
|
||
| _removeLast = -> _history.length -= 1 | ||
|
|
||
| _bindEnd = -> | ||
| _bindAnimationEnd = -> | ||
| document.addEventListener(ev, _transitionEnd) for ev in ANIMATIONEND_EVENTS | ||
| _animating = true | ||
|
|
||
| _unbindEnd = -> | ||
| _unbindAnimationEnd = -> | ||
| document.removeEventListener(ev, _transitionEnd) for ev in ANIMATIONEND_EVENTS | ||
|
|
||
| _transitionEnd = -> | ||
| console.error 'Transition END!' | ||
| do _unbindEnd | ||
| _outPage.attr "class", "" | ||
| _inPage.attr "class", "show" | ||
| _outPage = undefined | ||
| _inPage = undefined | ||
| do _unbindAnimationEnd | ||
| _animating = false | ||
|
|
||
|
|
||
| section : section | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| @import "__init.styl" | ||
|
|
||
| OPACITY = 0.3 | ||
| TRANSLATE_Z = -300px | ||
| ROTATE_X = 20deg | ||
| ORIGIN = 100% 50% | ||
|
|
||
| .backIn | ||
| vendor(animation, backIn TRANSITION_TIME ease both) | ||
| .backOut | ||
| vendor(animation, backOut TRANSITION_TIME ease both) | ||
|
|
||
|
|
||
| @keyframes backIn | ||
| from { | ||
| transform: rotateX(ROTATE_X) translateZ(TRANSLATE_Z) | ||
| transform-origin: ORIGIN | ||
| } | ||
|
|
||
| @keyframes backOut | ||
| to { | ||
| transform: rotateX(ROTATE_X) translateZ(TRANSLATE_Z) | ||
| transform-origin: ORIGIN | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| @import "__init.styl" | ||
|
|
||
| TRANSLATE_Y = -18% | ||
| TRANSLATE_Z = -150px | ||
| ROTATE_X = 20deg | ||
|
|
||
| .coverIn | ||
| vendor(animation, coverIn TRANSITION_TIME ease both) | ||
| .coverOut | ||
| vendor(animation, coverOut TRANSITION_TIME ease both) | ||
| .coverInBack | ||
| vendor(animation, coverInBack TRANSITION_TIME ease both) | ||
| .coverOutBack | ||
| vendor(animation, coverOutBack TRANSITION_TIME ease both) | ||
|
|
||
|
|
||
| @keyframes coverIn | ||
| from { | ||
| transform: translateY(100%); | ||
| } | ||
|
|
||
| @keyframes coverOut | ||
| to { | ||
| transform: rotateX(ROTATE_X) translateZ(TRANSLATE_Z) translateY(TRANSLATE_Y) | ||
| } | ||
|
|
||
| @keyframes coverInBack | ||
| from { | ||
| transform: rotateX(ROTATE_X) translateZ(TRANSLATE_Z) translateY(TRANSLATE_Y) | ||
| } | ||
|
|
||
| @keyframes coverOutBack | ||
| to { | ||
| transform: translateY(100%) | ||
| } | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,60 +1,23 @@ | ||
| TIME = 0.4s | ||
| @import "__init.styl" | ||
|
|
||
| .moveToLeft | ||
| vendor(animation, moveToLeft TIME ease both) | ||
| .moveFromLeft | ||
| vendor(animation, moveFromLeft TIME ease both) | ||
| .moveToRight | ||
| vendor(animation, moveToRight TIME ease both) | ||
| .moveFromRight | ||
| vendor(animation, moveFromRight TIME ease both) | ||
| .moveToBack | ||
| vendor(animation, moveToBack TIME ease both) | ||
|
|
||
| @-webkit-keyframes moveToLeft | ||
| 100% { -webkit-transform: translateX(-100%); } | ||
| @-moz-keyframes moveToLeft | ||
| 100% { -moz-transform: translateX(-100%); } | ||
| @keyframes moveToLeft | ||
| 100% { transform: translateX(-100%); } | ||
| .slideIn | ||
| vendor(animation, slideIn TRANSITION_TIME ease both) | ||
| .slideOut | ||
| vendor(animation, backOut TRANSITION_TIME ease both) | ||
| .slideInBack | ||
| vendor(animation, backIn TRANSITION_TIME ease both) | ||
| .slideOutBack | ||
| vendor(animation, slideOutBack TRANSITION_TIME ease both) | ||
|
|
||
| @-webkit-keyframes moveFromLeft | ||
| 0% { -webkit-transform: translateX(-100%); } | ||
| @-moz-keyframes moveFromLeft | ||
| 0% { -moz-transform: translateX(-100%); } | ||
| @keyframes moveFromLeft | ||
| 0% { transform: translateX(-100%); } | ||
|
|
||
| @-webkit-keyframes moveToRight | ||
| 100% { -webkit-transform: translateX(100%); } | ||
| @-moz-keyframes moveToRight | ||
| 100% { -moz-transform: translateX(100%); } | ||
| @keyframes moveToRight | ||
| 100% { transform: translateX(100%); } | ||
|
|
||
| @-webkit-keyframes moveFromRight | ||
| 0% { -webkit-transform: translateX(100%); } | ||
| @-moz-keyframes moveFromRight | ||
| 0% { -moz-transform: translateX(100%); } | ||
| @keyframes moveFromRight | ||
| 0% { transform: translateX(100%); } | ||
|
|
||
|
|
||
|
|
||
| @-webkit-keyframes moveToBack | ||
| 100% { | ||
| -webkit-transform: rotateX(20deg) translateZ(-100px); | ||
| transform-origin: 100% 50%; | ||
| opacity: .3; | ||
| } | ||
| @-moz-keyframes moveToLeft | ||
| 100% { | ||
| -moz-transform: rotateX(20deg) translateZ(-100px); | ||
| opacity: .3; | ||
| @keyframes slideIn | ||
| from { | ||
| transform: translateX(100%) | ||
| } | ||
| @keyframes moveToLeft | ||
| 100% { | ||
| transform: rotateX(20deg) translateZ(-100px); | ||
| opacity: .3; | ||
|
|
||
| @keyframes slideOutBack | ||
| to { | ||
| transform: translateX(100%) | ||
| } | ||
|
|