@@ -29,7 +31,8 @@
@@ -42,7 +45,8 @@
+
+
+
+
+
+
+
+
+
+
+
+
This modal is stickout out!
+
+
+
+
+
diff --git a/demo/index.html b/demo/index.html
index da146f6..21221a1 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -24,8 +24,8 @@
Menu
diff --git a/demo/pager.amd.hash.min.js b/demo/pager.amd.hash.min.js
index 6bfc45a..98fcd48 100644
--- a/demo/pager.amd.hash.min.js
+++ b/demo/pager.amd.hash.min.js
@@ -1,4 +1,4 @@
-/*! pager.js - v0.5.0 - 2012-10-03
+/*! pager.js - v0.5.0 - 2012-10-04
* http://oscar.finnsson.nu/pagerjs/
* Copyright (c) 2012 Oscar Finnsson; Licensed MIT */
-define(["jquery","underscore","knockout","hashchange"],function(a,b,c){var d={};d.page=null,d.now=function(){return Date.now?Date.now():(new Date).valueOf()},d.extendWithPage=function(a){var b=new d.Page;a.$__page__=b,d.page=b},d.navigationFailed=c.observable(),d.showChild=function(a){d.page.childManager.showChild(a)};var e={};e.value=c.utils.unwrapObservable,e.arrayValue=function(a){return b.map(a,function(a){return e.value(a)})};var f=function(a){var b,c={},d=/\+/g,e=/([^&=]+)=?([^&]*)/g,f=function(a){return decodeURIComponent(a.replace(d," "))};while(b=e.exec(a))c[f(b[1])]=f(b[2]);return c},g=function(a){if(!a)return{name:null,params:{}};var b=a.split("?"),c=b[0],d=b[1],e={};return d&&(e=f(d)),{name:c,params:e}};d.ChildManager=function(a,f){this.currentChildO=c.observable(null);var h=this;this.page=f,this.timeStamp=d.now(),this.hideChild=function(){h.currentChild&&h.currentChild.getId()!=="start"&&(h.currentChild.hidePage(function(){}),h.currentChild=null,h.currentChildO(null))},this.showChild=function(c){this.timeStamp=d.now();var f=this.timeStamp,i=h.currentChild;h.currentChild=null;var j=!1,k=g(c[0]),l=k.name,m=null;b.each(a(),function(a){if(!j){var b=a.getId();if(b===l||(l===""||l==null)&&b==="start")j=!0,h.currentChild=a;b==="?"&&(m=a)}});var n=!1,o=h,p=function(a){if(!j){var b=a.getId(),c=a.getValue().modal;if(c){if(b===l||(l===""||l==null)&&b==="start")j=!0,h.currentChild=a,n=!0;b==="?"&&!m&&(m=a,n=!0)}}};while(!h.currentChild&&o.page.parentPage&&!o.page.getValue().modal){var q=o.page.parentPage.children;b.each(q(),p),h.currentChild||(o=o.page.parentPage.childManager)}!h.currentChild&&m&&(h.currentChild=m,h.currentChild.currentId=l),h.currentChild&&(h.currentChildO(h.currentChild),n?h.currentChild.currentParentPage(h.page):h.currentChild.currentParentPage(null));var r=function(){d.navigationFailed&&d.navigationFailed({page:h.page,route:c}),h.page.getValue().navigationFailed&&e.value(h.page.getValue().navigationFailed)(h.page,c)},s=function(){var a=e.value(h.currentChild.getValue().guard);a?a(h.currentChild,c,function(){h.timeStamp===f&&h.currentChild.showPage(c.slice(1),k,c[0])},i):h.currentChild.showPage(c.slice(1),k,c[0])};i&&i===h.currentChild?s():i?i.hidePage(function(){h.currentChild?s():r()}):h.currentChild?s():r()}};var h;d.Page=function(a,b,e,f,g){this.element=a,this.valueAccessor=b,this.allBindingsAccessor=e,this.viewModel=f,this.bindingContext=g,this.children=c.observableArray([]),this.childManager=new d.ChildManager(this.children,this),this.parentPage=null,this.currentId=null,this.ctx=null,this.currentParentPage=c.observable(null),this.isVisible=c.observable(!1),this.originalRoute=c.observable(null),this.route=null};var i=d.Page.prototype;i.val=function(a){return e.value(this.getValue()[a])},i.currentChildPage=function(){return this.childManager.currentChildO},i.showPage=function(a,b,c){this.isVisible(!0),this.originalRoute(c),this.route=a,this.pageRoute=b,this.setParams(),this.show(),this.childManager.showChild(a)},i.setParams=function(){if(this.pageRoute&&this.pageRoute.params){var d=this.pageRoute.params,e=this.ctx,f=this.val("params")||{};a.each(d,function(a,d){b.indexOf(f,a)!==-1&&(e[a]?e[a](d):e[a]=c.observable(d))})}},i.hidePage=function(a){this.isVisible(!1),this.hideElementWrapper(a),this.childManager.hideChild()},i.init=function(){var a=this,b=a.getValue();return a.parentPage=a.getParentPage(),a.parentPage.children.push(this),a.hideElement(),a.val("source")&&a.loadSource(a.val("source")),a.ctx=null,b["with"]?(a.ctx=e.value(b["with"]),a.augmentContext()):b.withOnShow?a.ctx={}:(a.ctx=a.viewModel,a.augmentContext()),a.childBindingContext=a.bindingContext.createChildContext(a.ctx),c.utils.extend(a.childBindingContext,{$page:this}),a.val("withOnShow")||c.applyBindingsToDescendants(a.childBindingContext,a.element),{controlsDescendantBindings:!0}},i.augmentContext=function(){var b=this;b.val("params")&&a.each(this.val("params"),function(a,d){b.ctx[d]||(b.ctx[d]=c.observable())}),this.val("vars")&&a.each(this.val("vars"),function(a,d){b.ctx[a]=c.observable(d)}),this.setParams()},i.getValue=function(){return this.valueAccessor?e.value(this.valueAccessor()):{}},i.getParentPage=function(){var a=this.bindingContext;while(a){if(a.$page)return a.$page;if(a.$data&&a.$data.$__page__)return a.$data.$__page__;a=a.$parentContext}return null},i.getId=function(){return this.val("id")},i.sourceUrl=function(a){var b=this;return this.getId()==="?"?c.computed(function(){var c;return b.val("deep")?c=b.getFullRoute()().concat(b.route).join("/"):c=b.currentId,e.value(a).replace("{1}",c)}):c.computed(function(){return e.value(a)})},i.loadSource=function(b){var f=this.getValue(),g=this,h=this.element,i=null,j=f.loader||d.loader;if(f.frame==="iframe"){var k=a("iframe",a(h));k.length===0&&(k=a("
"),a(h).append(k)),j&&(i=e.value(j)(g,k),i.load()),f.sourceLoaded&&k.one("load",function(){i&&i.unload(),f.sourceLoaded(g)}),c.applyBindingsToNode(k[0],{attr:{src:this.sourceUrl(b)}})}else j&&(i=e.value(j)(g,g.element),i.load()),c.computed(function(){var d=function(){i&&i.unload(),c.applyBindingsToDescendants(g.childBindingContext,g.element),f.sourceLoaded&&f.sourceLoaded(g),g.route&&g.childManager.showChild(g.route)};if(typeof e.value(b)=="string"){var j=e.value(this.sourceUrl(b));a(h).load(j,function(){d()})}else e.value(b)(this,function(){d()})},this)},i.show=function(a){var e=this.element,f=this;f.showElementWrapper(a),f.val("title")&&(window.document.title=f.val("title")),f.val("withOnShow")&&(!f.withOnShowLoaded||f.val("sourceCache")!==!0)&&(f.withOnShowLoaded=!0,f.val("withOnShow")(b.bind(function(a){var b=f.bindingContext.createChildContext(a);f.ctx=a,f.augmentContext(),c.utils.extend(b,{$page:this}),c.applyBindingsToDescendants(b,f.element)},this),this)),f.val("sourceOnShow")&&(!f.val("sourceCache")||!e.__pagerLoaded__||typeof f.val("sourceCache")=="number"&&e.__pagerLoaded__+f.val("sourceCache")*1e3
"),a(h).append(k)),j&&(i=e.value(j)(g,k),i.load()),f.sourceLoaded&&k.one("load",function(){i&&i.unload(),f.sourceLoaded(g)}),c.applyBindingsToNode(k[0],{attr:{src:this.sourceUrl(b)}})}else j&&(i=e.value(j)(g,g.element),i.load()),c.computed(function(){var d=function(){i&&i.unload(),c.applyBindingsToDescendants(g.childBindingContext,g.element),f.sourceLoaded&&f.sourceLoaded(g),g.route&&g.childManager.showChild(g.route)};if(typeof e.value(b)=="string"){var j=e.value(this.sourceUrl(b));a(h).load(j,function(){d()})}else e.value(b)(this,function(){d()})},this)},i.show=function(a){var e=this.element,f=this;f.showElementWrapper(a),f.val("title")&&(window.document.title=f.val("title")),f.val("withOnShow")&&(!f.withOnShowLoaded||f.val("sourceCache")!==!0)&&(f.withOnShowLoaded=!0,f.val("withOnShow")(b.bind(function(a){var b=f.bindingContext.createChildContext(a);f.ctx=a,f.augmentContext(),c.utils.extend(b,{$page:this}),c.applyBindingsToDescendants(b,f.element)},this),this)),f.val("sourceOnShow")&&(!f.val("sourceCache")||!e.__pagerLoaded__||typeof f.val("sourceCache")=="number"&&e.__pagerLoaded__+f.val("sourceCache")*1e3 .box-shadow(@args)
+
+ Also, when shorthand is available, arguments are
+ not parameterized. Learn CSS, not LESS Prefixer.
+
+ -------------------------------------------------
+ TABLE OF CONTENTS
+ (*) denotes a syntax-sugar helper
+ -------------------------------------------------
+
+ .animation(@args)
+ .animation-delay(@delay)
+ .animation-direction(@direction)
+ .animation-duration(@duration)
+ .animation-iteration-count(@count)
+ .animation-name(@name)
+ .animation-play-state(@state)
+ .animation-timing-function(@function)
+ .background-size(@args)
+ .border-radius(@args)
+ .box-shadow(@args)
+ .inner-shadow(@args) *
+ .box-sizing(@args)
+ .border-box() *
+ .content-box() *
+ .columns(@args)
+ .column-count(@count)
+ .column-gap(@gap)
+ .column-rule(@args)
+ .column-width(@width)
+ .gradient(@default,@start,@stop) *
+ .linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
+ .linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
+ .opacity(@factor)
+ .transform(@args)
+ .rotate(@deg)
+ .scale(@factor)
+ .translate(@x,@y)
+ .translate3d(@x,@y,@z)
+ .translateHardware(@x,@y) *
+ .text-shadow(@args)
+ .transition(@args)
+ .transition-delay(@delay)
+ .transition-duration(@duration)
+ .transition-property(@property)
+ .transition-timing-function(@function)
+
+
+
+ Credit to LESS Elements for the motivation and
+ to CSS3Please.com for implementation.
+
+ Copyright (c) 2012 Joel Sutherland
+ MIT Licensed:
+ http://www.opensource.org/licenses/mit-license.php
+
+-----------------------------------------------------*/
+/* Animation */
+/* Background Size */
+/* Border Radius */
+/* Box Shadows */
+/* Box Sizing */
+/* Columns */
+/* Gradients */
+/* Opacity */
+/* Text Shadow */
+/* Transforms */
+/* Transitions */
.pagerjs-fx-zoom {
-webkit-transition: all 0.3s ease-in-out;
+ -moz-transition: all 0.3s ease-in-out;
+ -o-transition: all 0.3s ease-in-out;
+ transition: all 0.3s ease-in-out;
-webkit-transform: rotate(0deg) scale(0.1);
+ -moz-transform: rotate(0deg) scale(0.1);
+ -ms-transform: rotate(0deg) scale(0.1);
+ -o-transform: rotate(0deg) scale(0.1);
+ transform: rotate(0deg) scale(0.1);
}
.pagerjs-fx-zoom-in {
-webkit-transform: rotate(0deg) scale(1);
+ -moz-transform: rotate(0deg) scale(1);
+ -ms-transform: rotate(0deg) scale(1);
+ -o-transform: rotate(0deg) scale(1);
+ transform: rotate(0deg) scale(1);
}
.pagerjs-fx-flip {
-webkit-transition: all 0.3s ease-in-out;
+ -moz-transition: all 0.3s ease-in-out;
+ -o-transition: all 0.3s ease-in-out;
+ transition: all 0.3s ease-in-out;
-webkit-transform: rotatey(90deg) scale(1);
+ -moz-transform: rotatey(90deg) scale(1);
+ -ms-transform: rotatey(90deg) scale(1);
+ -o-transform: rotatey(90deg) scale(1);
+ transform: rotatey(90deg) scale(1);
}
.pagerjs-fx-flip-in {
-webkit-transform: rotatey(0deg) scale(1);
+ -moz-transform: rotatey(0deg) scale(1);
+ -ms-transform: rotatey(0deg) scale(1);
+ -o-transform: rotatey(0deg) scale(1);
+ transform: rotatey(0deg) scale(1);
+}
+.pagerjs-fx-popout-modal {
+ -webkit-transition: all 0.3s ease-in-out;
+ -moz-transition: all 0.3s ease-in-out;
+ -o-transition: all 0.3s ease-in-out;
+ transition: all 0.3s ease-in-out;
+ opacity: 0;
+}
+.pagerjs-fx-popout-modal-in {
+ -webkit-transform: scale(1.2);
+ -moz-transform: scale(1.2);
+ -ms-transform: scale(1.2);
+ -o-transform: scale(1.2);
+ transform: scale(1.2);
+ opacity: 1;
}
diff --git a/dist/pager.amd.hash.min.js b/dist/pager.amd.hash.min.js
index 6bfc45a..98fcd48 100644
--- a/dist/pager.amd.hash.min.js
+++ b/dist/pager.amd.hash.min.js
@@ -1,4 +1,4 @@
-/*! pager.js - v0.5.0 - 2012-10-03
+/*! pager.js - v0.5.0 - 2012-10-04
* http://oscar.finnsson.nu/pagerjs/
* Copyright (c) 2012 Oscar Finnsson; Licensed MIT */
-define(["jquery","underscore","knockout","hashchange"],function(a,b,c){var d={};d.page=null,d.now=function(){return Date.now?Date.now():(new Date).valueOf()},d.extendWithPage=function(a){var b=new d.Page;a.$__page__=b,d.page=b},d.navigationFailed=c.observable(),d.showChild=function(a){d.page.childManager.showChild(a)};var e={};e.value=c.utils.unwrapObservable,e.arrayValue=function(a){return b.map(a,function(a){return e.value(a)})};var f=function(a){var b,c={},d=/\+/g,e=/([^&=]+)=?([^&]*)/g,f=function(a){return decodeURIComponent(a.replace(d," "))};while(b=e.exec(a))c[f(b[1])]=f(b[2]);return c},g=function(a){if(!a)return{name:null,params:{}};var b=a.split("?"),c=b[0],d=b[1],e={};return d&&(e=f(d)),{name:c,params:e}};d.ChildManager=function(a,f){this.currentChildO=c.observable(null);var h=this;this.page=f,this.timeStamp=d.now(),this.hideChild=function(){h.currentChild&&h.currentChild.getId()!=="start"&&(h.currentChild.hidePage(function(){}),h.currentChild=null,h.currentChildO(null))},this.showChild=function(c){this.timeStamp=d.now();var f=this.timeStamp,i=h.currentChild;h.currentChild=null;var j=!1,k=g(c[0]),l=k.name,m=null;b.each(a(),function(a){if(!j){var b=a.getId();if(b===l||(l===""||l==null)&&b==="start")j=!0,h.currentChild=a;b==="?"&&(m=a)}});var n=!1,o=h,p=function(a){if(!j){var b=a.getId(),c=a.getValue().modal;if(c){if(b===l||(l===""||l==null)&&b==="start")j=!0,h.currentChild=a,n=!0;b==="?"&&!m&&(m=a,n=!0)}}};while(!h.currentChild&&o.page.parentPage&&!o.page.getValue().modal){var q=o.page.parentPage.children;b.each(q(),p),h.currentChild||(o=o.page.parentPage.childManager)}!h.currentChild&&m&&(h.currentChild=m,h.currentChild.currentId=l),h.currentChild&&(h.currentChildO(h.currentChild),n?h.currentChild.currentParentPage(h.page):h.currentChild.currentParentPage(null));var r=function(){d.navigationFailed&&d.navigationFailed({page:h.page,route:c}),h.page.getValue().navigationFailed&&e.value(h.page.getValue().navigationFailed)(h.page,c)},s=function(){var a=e.value(h.currentChild.getValue().guard);a?a(h.currentChild,c,function(){h.timeStamp===f&&h.currentChild.showPage(c.slice(1),k,c[0])},i):h.currentChild.showPage(c.slice(1),k,c[0])};i&&i===h.currentChild?s():i?i.hidePage(function(){h.currentChild?s():r()}):h.currentChild?s():r()}};var h;d.Page=function(a,b,e,f,g){this.element=a,this.valueAccessor=b,this.allBindingsAccessor=e,this.viewModel=f,this.bindingContext=g,this.children=c.observableArray([]),this.childManager=new d.ChildManager(this.children,this),this.parentPage=null,this.currentId=null,this.ctx=null,this.currentParentPage=c.observable(null),this.isVisible=c.observable(!1),this.originalRoute=c.observable(null),this.route=null};var i=d.Page.prototype;i.val=function(a){return e.value(this.getValue()[a])},i.currentChildPage=function(){return this.childManager.currentChildO},i.showPage=function(a,b,c){this.isVisible(!0),this.originalRoute(c),this.route=a,this.pageRoute=b,this.setParams(),this.show(),this.childManager.showChild(a)},i.setParams=function(){if(this.pageRoute&&this.pageRoute.params){var d=this.pageRoute.params,e=this.ctx,f=this.val("params")||{};a.each(d,function(a,d){b.indexOf(f,a)!==-1&&(e[a]?e[a](d):e[a]=c.observable(d))})}},i.hidePage=function(a){this.isVisible(!1),this.hideElementWrapper(a),this.childManager.hideChild()},i.init=function(){var a=this,b=a.getValue();return a.parentPage=a.getParentPage(),a.parentPage.children.push(this),a.hideElement(),a.val("source")&&a.loadSource(a.val("source")),a.ctx=null,b["with"]?(a.ctx=e.value(b["with"]),a.augmentContext()):b.withOnShow?a.ctx={}:(a.ctx=a.viewModel,a.augmentContext()),a.childBindingContext=a.bindingContext.createChildContext(a.ctx),c.utils.extend(a.childBindingContext,{$page:this}),a.val("withOnShow")||c.applyBindingsToDescendants(a.childBindingContext,a.element),{controlsDescendantBindings:!0}},i.augmentContext=function(){var b=this;b.val("params")&&a.each(this.val("params"),function(a,d){b.ctx[d]||(b.ctx[d]=c.observable())}),this.val("vars")&&a.each(this.val("vars"),function(a,d){b.ctx[a]=c.observable(d)}),this.setParams()},i.getValue=function(){return this.valueAccessor?e.value(this.valueAccessor()):{}},i.getParentPage=function(){var a=this.bindingContext;while(a){if(a.$page)return a.$page;if(a.$data&&a.$data.$__page__)return a.$data.$__page__;a=a.$parentContext}return null},i.getId=function(){return this.val("id")},i.sourceUrl=function(a){var b=this;return this.getId()==="?"?c.computed(function(){var c;return b.val("deep")?c=b.getFullRoute()().concat(b.route).join("/"):c=b.currentId,e.value(a).replace("{1}",c)}):c.computed(function(){return e.value(a)})},i.loadSource=function(b){var f=this.getValue(),g=this,h=this.element,i=null,j=f.loader||d.loader;if(f.frame==="iframe"){var k=a("iframe",a(h));k.length===0&&(k=a(""),a(h).append(k)),j&&(i=e.value(j)(g,k),i.load()),f.sourceLoaded&&k.one("load",function(){i&&i.unload(),f.sourceLoaded(g)}),c.applyBindingsToNode(k[0],{attr:{src:this.sourceUrl(b)}})}else j&&(i=e.value(j)(g,g.element),i.load()),c.computed(function(){var d=function(){i&&i.unload(),c.applyBindingsToDescendants(g.childBindingContext,g.element),f.sourceLoaded&&f.sourceLoaded(g),g.route&&g.childManager.showChild(g.route)};if(typeof e.value(b)=="string"){var j=e.value(this.sourceUrl(b));a(h).load(j,function(){d()})}else e.value(b)(this,function(){d()})},this)},i.show=function(a){var e=this.element,f=this;f.showElementWrapper(a),f.val("title")&&(window.document.title=f.val("title")),f.val("withOnShow")&&(!f.withOnShowLoaded||f.val("sourceCache")!==!0)&&(f.withOnShowLoaded=!0,f.val("withOnShow")(b.bind(function(a){var b=f.bindingContext.createChildContext(a);f.ctx=a,f.augmentContext(),c.utils.extend(b,{$page:this}),c.applyBindingsToDescendants(b,f.element)},this),this)),f.val("sourceOnShow")&&(!f.val("sourceCache")||!e.__pagerLoaded__||typeof f.val("sourceCache")=="number"&&e.__pagerLoaded__+f.val("sourceCache")*1e3"),a(h).append(k)),j&&(i=e.value(j)(g,k),i.load()),f.sourceLoaded&&k.one("load",function(){i&&i.unload(),f.sourceLoaded(g)}),c.applyBindingsToNode(k[0],{attr:{src:this.sourceUrl(b)}})}else j&&(i=e.value(j)(g,g.element),i.load()),c.computed(function(){var d=function(){i&&i.unload(),c.applyBindingsToDescendants(g.childBindingContext,g.element),f.sourceLoaded&&f.sourceLoaded(g),g.route&&g.childManager.showChild(g.route)};if(typeof e.value(b)=="string"){var j=e.value(this.sourceUrl(b));a(h).load(j,function(){d()})}else e.value(b)(this,function(){d()})},this)},i.show=function(a){var e=this.element,f=this;f.showElementWrapper(a),f.val("title")&&(window.document.title=f.val("title")),f.val("withOnShow")&&(!f.withOnShowLoaded||f.val("sourceCache")!==!0)&&(f.withOnShowLoaded=!0,f.val("withOnShow")(b.bind(function(a){var b=f.bindingContext.createChildContext(a);f.ctx=a,f.augmentContext(),c.utils.extend(b,{$page:this}),c.applyBindingsToDescendants(b,f.element)},this),this)),f.val("sourceOnShow")&&(!f.val("sourceCache")||!e.__pagerLoaded__||typeof f.val("sourceCache")=="number"&&e.__pagerLoaded__+f.val("sourceCache")*1e3"),a(h).append(k)),j&&(i=e.value(j)(g,k),i.load()),f.sourceLoaded&&k.one("load",function(){i&&i.unload(),f.sourceLoaded(g)}),c.applyBindingsToNode(k[0],{attr:{src:this.sourceUrl(b)}})}else j&&(i=e.value(j)(g,g.element),i.load()),c.computed(function(){var d=function(){i&&i.unload(),c.applyBindingsToDescendants(g.childBindingContext,g.element),f.sourceLoaded&&f.sourceLoaded(g),g.route&&g.childManager.showChild(g.route)};if(typeof e.value(b)=="string"){var j=e.value(this.sourceUrl(b));a(h).load(j,function(){d()})}else e.value(b)(this,function(){d()})},this)},i.show=function(a){var e=this.element,f=this;f.showElementWrapper(a),f.val("title")&&(window.document.title=f.val("title")),f.val("withOnShow")&&(!f.withOnShowLoaded||f.val("sourceCache")!==!0)&&(f.withOnShowLoaded=!0,f.val("withOnShow")(b.bind(function(a){var b=f.bindingContext.createChildContext(a);f.ctx=a,f.augmentContext(),c.utils.extend(b,{$page:this}),c.applyBindingsToDescendants(b,f.element)},this),this)),f.val("sourceOnShow")&&(!f.val("sourceCache")||!e.__pagerLoaded__||typeof f.val("sourceCache")=="number"&&e.__pagerLoaded__+f.val("sourceCache")*1e3"),a(h).append(k)),j&&(i=e.value(j)(g,k),i.load()),f.sourceLoaded&&k.one("load",function(){i&&i.unload(),f.sourceLoaded(g)}),c.applyBindingsToNode(k[0],{attr:{src:this.sourceUrl(b)}})}else j&&(i=e.value(j)(g,g.element),i.load()),c.computed(function(){var d=function(){i&&i.unload(),c.applyBindingsToDescendants(g.childBindingContext,g.element),f.sourceLoaded&&f.sourceLoaded(g),g.route&&g.childManager.showChild(g.route)};if(typeof e.value(b)=="string"){var j=e.value(this.sourceUrl(b));a(h).load(j,function(){d()})}else e.value(b)(this,function(){d()})},this)},i.show=function(a){var e=this.element,f=this;f.showElementWrapper(a),f.val("title")&&(window.document.title=f.val("title")),f.val("withOnShow")&&(!f.withOnShowLoaded||f.val("sourceCache")!==!0)&&(f.withOnShowLoaded=!0,f.val("withOnShow")(b.bind(function(a){var b=f.bindingContext.createChildContext(a);f.ctx=a,f.augmentContext(),c.utils.extend(b,{$page:this}),c.applyBindingsToDescendants(b,f.element)},this),this)),f.val("sourceOnShow")&&(!f.val("sourceCache")||!e.__pagerLoaded__||typeof f.val("sourceCache")=="number"&&e.__pagerLoaded__+f.val("sourceCache")*1e3"),a(h).append(k)),j&&(i=e.value(j)(g,k),i.load()),f.sourceLoaded&&k.one("load",function(){i&&i.unload(),f.sourceLoaded(g)}),c.applyBindingsToNode(k[0],{attr:{src:this.sourceUrl(b)}})}else j&&(i=e.value(j)(g,g.element),i.load()),c.computed(function(){var d=function(){i&&i.unload(),c.applyBindingsToDescendants(g.childBindingContext,g.element),f.sourceLoaded&&f.sourceLoaded(g),g.route&&g.childManager.showChild(g.route)};if(typeof e.value(b)=="string"){var j=e.value(this.sourceUrl(b));a(h).load(j,function(){d()})}else e.value(b)(this,function(){d()})},this)},i.show=function(a){var e=this.element,f=this;f.showElementWrapper(a),f.val("title")&&(window.document.title=f.val("title")),f.val("withOnShow")&&(!f.withOnShowLoaded||f.val("sourceCache")!==!0)&&(f.withOnShowLoaded=!0,f.val("withOnShow")(b.bind(function(a){var b=f.bindingContext.createChildContext(a);f.ctx=a,f.augmentContext(),c.utils.extend(b,{$page:this}),c.applyBindingsToDescendants(b,f.element)},this),this)),f.val("sourceOnShow")&&(!f.val("sourceCache")||!e.__pagerLoaded__||typeof f.val("sourceCache")=="number"&&e.__pagerLoaded__+f.val("sourceCache")*1e3"),a(h).append(k)),j&&(i=e.value(j)(g,k),i.load()),f.sourceLoaded&&k.one("load",function(){i&&i.unload(),f.sourceLoaded(g)}),c.applyBindingsToNode(k[0],{attr:{src:this.sourceUrl(b)}})}else j&&(i=e.value(j)(g,g.element),i.load()),c.computed(function(){var d=function(){i&&i.unload(),c.applyBindingsToDescendants(g.childBindingContext,g.element),f.sourceLoaded&&f.sourceLoaded(g),g.route&&g.childManager.showChild(g.route)};if(typeof e.value(b)=="string"){var j=e.value(this.sourceUrl(b));a(h).load(j,function(){d()})}else e.value(b)(this,function(){d()})},this)},i.show=function(a){var e=this.element,f=this;f.showElementWrapper(a),f.val("title")&&(window.document.title=f.val("title")),f.val("withOnShow")&&(!f.withOnShowLoaded||f.val("sourceCache")!==!0)&&(f.withOnShowLoaded=!0,f.val("withOnShow")(b.bind(function(a){var b=f.bindingContext.createChildContext(a);f.ctx=a,f.augmentContext(),c.utils.extend(b,{$page:this}),c.applyBindingsToDescendants(b,f.element)},this),this)),f.val("sourceOnShow")&&(!f.val("sourceCache")||!e.__pagerLoaded__||typeof f.val("sourceCache")=="number"&&e.__pagerLoaded__+f.val("sourceCache")*1e3 .box-shadow(@args)
+
+ Also, when shorthand is available, arguments are
+ not parameterized. Learn CSS, not LESS Prefixer.
+
+ -------------------------------------------------
+ TABLE OF CONTENTS
+ (*) denotes a syntax-sugar helper
+ -------------------------------------------------
+
+ .animation(@args)
+ .animation-delay(@delay)
+ .animation-direction(@direction)
+ .animation-duration(@duration)
+ .animation-iteration-count(@count)
+ .animation-name(@name)
+ .animation-play-state(@state)
+ .animation-timing-function(@function)
+ .background-size(@args)
+ .border-radius(@args)
+ .box-shadow(@args)
+ .inner-shadow(@args) *
+ .box-sizing(@args)
+ .border-box() *
+ .content-box() *
+ .columns(@args)
+ .column-count(@count)
+ .column-gap(@gap)
+ .column-rule(@args)
+ .column-width(@width)
+ .gradient(@default,@start,@stop) *
+ .linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
+ .linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
+ .opacity(@factor)
+ .transform(@args)
+ .rotate(@deg)
+ .scale(@factor)
+ .translate(@x,@y)
+ .translate3d(@x,@y,@z)
+ .translateHardware(@x,@y) *
+ .text-shadow(@args)
+ .transition(@args)
+ .transition-delay(@delay)
+ .transition-duration(@duration)
+ .transition-property(@property)
+ .transition-timing-function(@function)
+
+
+
+ Credit to LESS Elements for the motivation and
+ to CSS3Please.com for implementation.
+
+ Copyright (c) 2012 Joel Sutherland
+ MIT Licensed:
+ http://www.opensource.org/licenses/mit-license.php
+
+-----------------------------------------------------*/
+/* Animation */
+/* Background Size */
+/* Border Radius */
+/* Box Shadows */
+/* Box Sizing */
+/* Columns */
+/* Gradients */
+/* Opacity */
+/* Text Shadow */
+/* Transforms */
+/* Transitions */
.pagerjs-fx-zoom {
-webkit-transition: all 0.3s ease-in-out;
+ -moz-transition: all 0.3s ease-in-out;
+ -o-transition: all 0.3s ease-in-out;
+ transition: all 0.3s ease-in-out;
-webkit-transform: rotate(0deg) scale(0.1);
+ -moz-transform: rotate(0deg) scale(0.1);
+ -ms-transform: rotate(0deg) scale(0.1);
+ -o-transform: rotate(0deg) scale(0.1);
+ transform: rotate(0deg) scale(0.1);
}
.pagerjs-fx-zoom-in {
-webkit-transform: rotate(0deg) scale(1);
+ -moz-transform: rotate(0deg) scale(1);
+ -ms-transform: rotate(0deg) scale(1);
+ -o-transform: rotate(0deg) scale(1);
+ transform: rotate(0deg) scale(1);
}
.pagerjs-fx-flip {
-webkit-transition: all 0.3s ease-in-out;
+ -moz-transition: all 0.3s ease-in-out;
+ -o-transition: all 0.3s ease-in-out;
+ transition: all 0.3s ease-in-out;
-webkit-transform: rotatey(90deg) scale(1);
+ -moz-transform: rotatey(90deg) scale(1);
+ -ms-transform: rotatey(90deg) scale(1);
+ -o-transform: rotatey(90deg) scale(1);
+ transform: rotatey(90deg) scale(1);
}
.pagerjs-fx-flip-in {
-webkit-transform: rotatey(0deg) scale(1);
+ -moz-transform: rotatey(0deg) scale(1);
+ -ms-transform: rotatey(0deg) scale(1);
+ -o-transform: rotatey(0deg) scale(1);
+ transform: rotatey(0deg) scale(1);
+}
+.pagerjs-fx-popout-modal {
+ -webkit-transition: all 0.3s ease-in-out;
+ -moz-transition: all 0.3s ease-in-out;
+ -o-transition: all 0.3s ease-in-out;
+ transition: all 0.3s ease-in-out;
+ opacity: 0;
+}
+.pagerjs-fx-popout-modal-in {
+ -webkit-transform: scale(1.2);
+ -moz-transform: scale(1.2);
+ -ms-transform: scale(1.2);
+ -o-transform: scale(1.2);
+ transform: scale(1.2);
+ opacity: 1;
}
diff --git a/dist/pager.min.js b/dist/pager.min.js
index e968363..697c7a0 100644
--- a/dist/pager.min.js
+++ b/dist/pager.min.js
@@ -1,4 +1,4 @@
-/*! pager.js - v0.5.0 - 2012-10-03
+/*! pager.js - v0.5.0 - 2012-10-04
* http://oscar.finnsson.nu/pagerjs/
* Copyright (c) 2012 Oscar Finnsson; Licensed MIT */
-var pager={};pager.page=null,pager.now=function(){return Date.now?Date.now():(new Date).valueOf()},pager.extendWithPage=function(a){var b=new pager.Page;a.$__page__=b,pager.page=b},pager.navigationFailed=ko.observable(),pager.showChild=function(a){pager.page.childManager.showChild(a)};var _ko={};_ko.value=ko.utils.unwrapObservable,_ko.arrayValue=function(a){return _.map(a,function(a){return _ko.value(a)})};var parseStringAsParameters=function(a){var b,c={},d=/\+/g,e=/([^&=]+)=?([^&]*)/g,f=function(a){return decodeURIComponent(a.replace(d," "))};while(b=e.exec(a))c[f(b[1])]=f(b[2]);return c},splitRoutePartIntoNameAndParameters=function(a){if(!a)return{name:null,params:{}};var b=a.split("?"),c=b[0],d=b[1],e={};return d&&(e=parseStringAsParameters(d)),{name:c,params:e}};pager.ChildManager=function(a,b){this.currentChildO=ko.observable(null);var c=this;this.page=b,this.timeStamp=pager.now(),this.hideChild=function(){c.currentChild&&c.currentChild.getId()!=="start"&&(c.currentChild.hidePage(function(){}),c.currentChild=null,c.currentChildO(null))},this.showChild=function(b){this.timeStamp=pager.now();var d=this.timeStamp,e=c.currentChild;c.currentChild=null;var f=!1,g=splitRoutePartIntoNameAndParameters(b[0]),h=g.name,i=null;_.each(a(),function(a){if(!f){var b=a.getId();if(b===h||(h===""||h==null)&&b==="start")f=!0,c.currentChild=a;b==="?"&&(i=a)}});var j=!1,k=c,l=function(a){if(!f){var b=a.getId(),d=a.getValue().modal;if(d){if(b===h||(h===""||h==null)&&b==="start")f=!0,c.currentChild=a,j=!0;b==="?"&&!i&&(i=a,j=!0)}}};while(!c.currentChild&&k.page.parentPage&&!k.page.getValue().modal){var m=k.page.parentPage.children;_.each(m(),l),c.currentChild||(k=k.page.parentPage.childManager)}!c.currentChild&&i&&(c.currentChild=i,c.currentChild.currentId=h),c.currentChild&&(c.currentChildO(c.currentChild),j?c.currentChild.currentParentPage(c.page):c.currentChild.currentParentPage(null));var n=function(){pager.navigationFailed&&pager.navigationFailed({page:c.page,route:b}),c.page.getValue().navigationFailed&&_ko.value(c.page.getValue().navigationFailed)(c.page,b)},o=function(){var a=_ko.value(c.currentChild.getValue().guard);a?a(c.currentChild,b,function(){c.timeStamp===d&&c.currentChild.showPage(b.slice(1),g,b[0])},e):c.currentChild.showPage(b.slice(1),g,b[0])};e&&e===c.currentChild?o():e?e.hidePage(function(){c.currentChild?o():n()}):c.currentChild?o():n()}};var PageConfig;pager.Page=function(a,b,c,d,e){this.element=a,this.valueAccessor=b,this.allBindingsAccessor=c,this.viewModel=d,this.bindingContext=e,this.children=ko.observableArray([]),this.childManager=new pager.ChildManager(this.children,this),this.parentPage=null,this.currentId=null,this.ctx=null,this.currentParentPage=ko.observable(null),this.isVisible=ko.observable(!1),this.originalRoute=ko.observable(null),this.route=null};var p=pager.Page.prototype;p.val=function(a){return _ko.value(this.getValue()[a])},p.currentChildPage=function(){return this.childManager.currentChildO},p.showPage=function(a,b,c){this.isVisible(!0),this.originalRoute(c),this.route=a,this.pageRoute=b,this.setParams(),this.show(),this.childManager.showChild(a)},p.setParams=function(){if(this.pageRoute&&this.pageRoute.params){var a=this.pageRoute.params,b=this.ctx,c=this.val("params")||{};$.each(a,function(a,d){_.indexOf(c,a)!==-1&&(b[a]?b[a](d):b[a]=ko.observable(d))})}},p.hidePage=function(a){this.isVisible(!1),this.hideElementWrapper(a),this.childManager.hideChild()},p.init=function(){var a=this,b=a.getValue();return a.parentPage=a.getParentPage(),a.parentPage.children.push(this),a.hideElement(),a.val("source")&&a.loadSource(a.val("source")),a.ctx=null,b["with"]?(a.ctx=_ko.value(b["with"]),a.augmentContext()):b.withOnShow?a.ctx={}:(a.ctx=a.viewModel,a.augmentContext()),a.childBindingContext=a.bindingContext.createChildContext(a.ctx),ko.utils.extend(a.childBindingContext,{$page:this}),a.val("withOnShow")||ko.applyBindingsToDescendants(a.childBindingContext,a.element),{controlsDescendantBindings:!0}},p.augmentContext=function(){var a=this;a.val("params")&&$.each(this.val("params"),function(b,c){a.ctx[c]||(a.ctx[c]=ko.observable())}),this.val("vars")&&$.each(this.val("vars"),function(b,c){a.ctx[b]=ko.observable(c)}),this.setParams()},p.getValue=function(){return this.valueAccessor?_ko.value(this.valueAccessor()):{}},p.getParentPage=function(){var a=this.bindingContext;while(a){if(a.$page)return a.$page;if(a.$data&&a.$data.$__page__)return a.$data.$__page__;a=a.$parentContext}return null},p.getId=function(){return this.val("id")},p.sourceUrl=function(a){var b=this;return this.getId()==="?"?ko.computed(function(){var c;return b.val("deep")?c=b.getFullRoute()().concat(b.route).join("/"):c=b.currentId,_ko.value(a).replace("{1}",c)}):ko.computed(function(){return _ko.value(a)})},p.loadSource=function(a){var b=this.getValue(),c=this,d=this.element,e=null,f=b.loader||pager.loader;if(b.frame==="iframe"){var g=$("iframe",$(d));g.length===0&&(g=$(""),$(d).append(g)),f&&(e=_ko.value(f)(c,g),e.load()),b.sourceLoaded&&g.one("load",function(){e&&e.unload(),b.sourceLoaded(c)}),ko.applyBindingsToNode(g[0],{attr:{src:this.sourceUrl(a)}})}else f&&(e=_ko.value(f)(c,c.element),e.load()),ko.computed(function(){var f=function(){e&&e.unload(),ko.applyBindingsToDescendants(c.childBindingContext,c.element),b.sourceLoaded&&b.sourceLoaded(c),c.route&&c.childManager.showChild(c.route)};if(typeof _ko.value(a)=="string"){var g=_ko.value(this.sourceUrl(a));$(d).load(g,function(){f()})}else _ko.value(a)(this,function(){f()})},this)},p.show=function(a){var b=this.element,c=this;c.showElementWrapper(a),c.val("title")&&(window.document.title=c.val("title")),c.val("withOnShow")&&(!c.withOnShowLoaded||c.val("sourceCache")!==!0)&&(c.withOnShowLoaded=!0,c.val("withOnShow")(_.bind(function(a){var b=c.bindingContext.createChildContext(a);c.ctx=a,c.augmentContext(),ko.utils.extend(b,{$page:this}),ko.applyBindingsToDescendants(b,c.element)},this),this)),c.val("sourceOnShow")&&(!c.val("sourceCache")||!b.__pagerLoaded__||typeof c.val("sourceCache")=="number"&&b.__pagerLoaded__+c.val("sourceCache")*1e3"),$(d).append(g)),f&&(e=_ko.value(f)(c,g),e.load()),b.sourceLoaded&&g.one("load",function(){e&&e.unload(),b.sourceLoaded(c)}),ko.applyBindingsToNode(g[0],{attr:{src:this.sourceUrl(a)}})}else f&&(e=_ko.value(f)(c,c.element),e.load()),ko.computed(function(){var f=function(){e&&e.unload(),ko.applyBindingsToDescendants(c.childBindingContext,c.element),b.sourceLoaded&&b.sourceLoaded(c),c.route&&c.childManager.showChild(c.route)};if(typeof _ko.value(a)=="string"){var g=_ko.value(this.sourceUrl(a));$(d).load(g,function(){f()})}else _ko.value(a)(this,function(){f()})},this)},p.show=function(a){var b=this.element,c=this;c.showElementWrapper(a),c.val("title")&&(window.document.title=c.val("title")),c.val("withOnShow")&&(!c.withOnShowLoaded||c.val("sourceCache")!==!0)&&(c.withOnShowLoaded=!0,c.val("withOnShow")(_.bind(function(a){var b=c.bindingContext.createChildContext(a);c.ctx=a,c.augmentContext(),ko.utils.extend(b,{$page:this}),ko.applyBindingsToDescendants(b,c.element)},this),this)),c.val("sourceOnShow")&&(!c.val("sourceCache")||!b.__pagerLoaded__||typeof c.val("sourceCache")=="number"&&b.__pagerLoaded__+c.val("sourceCache")*1e3', '', '',
- '',''],
+ '', ''],
dest:'demo/pager.amd.hash.min.js'
}
},
@@ -49,22 +49,22 @@ module.exports = function (grunt) {
},
amd:{
src:['', '',
- '', '',''],
+ '', '', ''],
dest:'dist/pager.amd.min.js'
},
- amd_jquery_hashchange: {
- src:['', '','',
+ amd_jquery_hashchange:{
+ src:['', '', '',
'', ''],
dest:'dist/pager.amd.hash.min.js'
},
- amd_historyjs: {
- src:['', '','',
+ amd_historyjs:{
+ src:['', '', '',
'', ''],
dest:'dist/pager.amd.history.min.js'
},
amddemo:{
src:['', '', '',
- '',''],
+ '', ''],
dest:'demo/pager.amd.hash.min.js'
},
boilerplate:{
@@ -99,18 +99,21 @@ module.exports = function (grunt) {
_:true
}
},
- less: {
- dist: {
- src: 'pager.less',
- dest: 'dist/pager.css'
+ less:{
+ dist:{
+ files:{
+ 'dist/pager.css':'pager.less'
+ }
},
- test: {
- src: 'pager.less',
- dest: 'test/pager.css'
+ test:{
+ files:{
+ 'test/pager.css':'pager.less'
+ }
},
- demo: {
- src: 'pager.less',
- dest: 'demo/pager.css'
+ demo:{
+ files:{
+ 'demo/pager.css':'pager.less'
+ }
}
},
uglify:{}
diff --git a/pager.js b/pager.js
index f1d027a..0f78f24 100644
--- a/pager.js
+++ b/pager.js
@@ -423,7 +423,7 @@ p.init = function () {
return { controlsDescendantBindings:true};
};
-p.augmentContext = function() {
+p.augmentContext = function () {
var m = this;
if (m.val('params')) {
$.each(this.val('params'), function (index, param) {
@@ -432,8 +432,8 @@ p.augmentContext = function() {
}
});
}
- if(this.val('vars')) {
- $.each(this.val('vars'), function(key, value) {
+ if (this.val('vars')) {
+ $.each(this.val('vars'), function (key, value) {
m.ctx[key] = ko.observable(value);
});
}
@@ -491,7 +491,7 @@ p.sourceUrl = function (source) {
return ko.computed(function () {
// TODO: maybe make currentId an ko.observable?
var path;
- if(me.val('deep')) {
+ if (me.val('deep')) {
path = (me.getFullRoute()().concat(me.route)).join('/');
} else {
path = me.currentId;
@@ -734,9 +734,6 @@ pager.rootURI = '/';
pager.Href = function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
this.element = element;
- this.valueAccessor = valueAccessor;
- this.allBindingsAccessor = allBindingsAccessor;
- this.viewModel = viewModel;
this.bindingContext = bindingContext;
this.path = ko.observable();
this.val = ko.observable(valueAccessor);
@@ -783,7 +780,7 @@ hp.bind = function () {
});
};
-hp.update = function(valueAccessor) {
+hp.update = function (valueAccessor) {
this.val(valueAccessor);
};
@@ -843,97 +840,63 @@ ko.bindingHandlers['page-href'] = {
}
};
-
pager.fx = {};
-pager.fx.zoom = {
- showElement:function (page, callback) {
- $(page.element).addClass('pagerjs-fx-zoom');
- $(page.element).show();
- var i = setInterval(function () {
- clearInterval(i);
- $(page.element).addClass('pagerjs-fx-zoom-in');
- }, 10);
- var i2 = setInterval(function () {
- clearInterval(i2);
- if (callback) {
- callback();
- }
- }, 300);
- },
- hideElement:function (page, callback) {
- if (!page.pageHiddenOnce) {
- page.pageHiddenOnce = true;
- $(page.element).hide();
- } else {
- $(page.element).removeClass('pagerjs-fx-zoom-in');
+pager.fx.cssAsync = function (css) {
+ return {
+ showElement:function (page, callback) {
+ var $e = $(page.element);
+ $e.addClass(css);
+ $e.show();
var i = setInterval(function () {
clearInterval(i);
+ $e.addClass(css + '-in');
+ }, 10);
+ var i2 = setInterval(function () {
+ clearInterval(i2);
if (callback) {
callback();
}
- $(page.element).hide();
}, 300);
- }
- }
-};
-
-pager.fx.flip = {
- showElement:function (page, callback) {
- $(page.element).addClass('pagerjs-fx-flip');
- $(page.element).show();
- var i = setInterval(function () {
- clearInterval(i);
- $(page.element).addClass('pagerjs-fx-flip-in');
- }, 10);
- var i2 = setInterval(function () {
- clearInterval(i2);
- if (callback) {
- callback();
+ },
+ hideElement:function (page, callback) {
+ var $e = $(page.element);
+ if (!page.pageHiddenOnce) {
+ page.pageHiddenOnce = true;
+ $e.hide();
+ } else {
+ $e.removeClass(css + '-in');
+ var i = setInterval(function () {
+ clearInterval(i);
+ if (callback) {
+ callback();
+ }
+ $e.hide();
+ }, 300);
}
- }, 300);
- },
- hideElement:function (page, callback) {
- if (!page.pageHiddenOnce) {
- page.pageHiddenOnce = true;
- $(page.element).hide();
- } else {
- $(page.element).removeClass('pagerjs-fx-flip-in');
- var i = setInterval(function () {
- clearInterval(i);
- if (callback) {
- callback();
- }
- $(page.element).hide();
- }, 300);
}
- }
+ };
};
-pager.fx.slide = {
- showElement:function (page, callback) {
- $(page.element).slideDown(300, callback);
- },
- hideElement:function (page, callback) {
- $(page.element).slideUp(300, function () {
- $(page.element).hide();
- });
- if (callback) {
- callback();
- }
- }
-};
+pager.fx.zoom = pager.fx.cssAsync('pagerjs-fx-zoom');
+pager.fx.flip = pager.fx.cssAsync('pagerjs-fx-flip');
+pager.fx.popout = pager.fx.cssAsync('pagerjs-fx-popout-modal');
-pager.fx.fade = {
- showElement:function (page, callback) {
- $(page.element).fadeIn(300, callback);
- },
- hideElement:function (page, callback) {
- $(page.element).fadeOut(300, function () {
- $(page.element).hide();
+pager.fx.jQuerySync = function (show, hide) {
+ return {
+ showElement:function (page, callback) {
+ show.call($(page.element), 300, callback);
+ },
+ hideElement:function (page, callback) {
+ hide.call($(page.element), 300, function () {
+ $(page.element).hide();
+ });
if (callback) {
callback();
}
- });
- }
+ }
+ };
};
+
+pager.fx.slide = pager.fx.jQuerySync($.fn.slideDown, $.fn.slideUp);
+pager.fx.fade = pager.fx.jQuerySync($.fn.fadeIn, $.fn.fadeOut);
\ No newline at end of file
diff --git a/pager.less b/pager.less
index 38d8aea..2b082b2 100644
--- a/pager.less
+++ b/pager.less
@@ -1,18 +1,30 @@
+@import 'prefixer.less';
+
.pagerjs-fx-zoom {
- -webkit-transition: all 0.3s ease-in-out;
- -webkit-transform: rotate(0deg) scale(0.1);
+ .transition(all 0.3s ease-in-out);
+ .transform(rotate(0deg) scale(0.1));
}
.pagerjs-fx-zoom-in {
- -webkit-transform: rotate(0deg) scale(1);
+ .transform(rotate(0deg) scale(1));
}
.pagerjs-fx-flip {
- -webkit-transition: all 0.3s ease-in-out;
- -webkit-transform: rotateY(90deg) scale(1);
+ .transition(all 0.3s ease-in-out);
+ .transform(rotateY(90deg) scale(1));
}
.pagerjs-fx-flip-in {
- -webkit-transform: rotateY(0deg) scale(1);
+ .transform(rotateY(0deg) scale(1));
+}
+
+.pagerjs-fx-popout-modal {
+ .transition(all 0.3s ease-in-out);
+ opacity: 0;
+}
+
+.pagerjs-fx-popout-modal-in {
+ .transform(scale( 1.2 ));
+ opacity: 1;
}
\ No newline at end of file
diff --git a/test/pager.css b/test/pager.css
index dfe63f3..44501aa 100644
--- a/test/pager.css
+++ b/test/pager.css
@@ -1,14 +1,128 @@
+/*---------------------------------------------------
+ LESS Prefixer
+ ---------------------------------------------------
+
+ All of the CSS3 fun, none of the prefixes!
+
+ As a rule, you can use the CSS properties you
+ would expect just by adding a '.':
+
+ box-shadow => .box-shadow(@args)
+
+ Also, when shorthand is available, arguments are
+ not parameterized. Learn CSS, not LESS Prefixer.
+
+ -------------------------------------------------
+ TABLE OF CONTENTS
+ (*) denotes a syntax-sugar helper
+ -------------------------------------------------
+
+ .animation(@args)
+ .animation-delay(@delay)
+ .animation-direction(@direction)
+ .animation-duration(@duration)
+ .animation-iteration-count(@count)
+ .animation-name(@name)
+ .animation-play-state(@state)
+ .animation-timing-function(@function)
+ .background-size(@args)
+ .border-radius(@args)
+ .box-shadow(@args)
+ .inner-shadow(@args) *
+ .box-sizing(@args)
+ .border-box() *
+ .content-box() *
+ .columns(@args)
+ .column-count(@count)
+ .column-gap(@gap)
+ .column-rule(@args)
+ .column-width(@width)
+ .gradient(@default,@start,@stop) *
+ .linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
+ .linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
+ .opacity(@factor)
+ .transform(@args)
+ .rotate(@deg)
+ .scale(@factor)
+ .translate(@x,@y)
+ .translate3d(@x,@y,@z)
+ .translateHardware(@x,@y) *
+ .text-shadow(@args)
+ .transition(@args)
+ .transition-delay(@delay)
+ .transition-duration(@duration)
+ .transition-property(@property)
+ .transition-timing-function(@function)
+
+
+
+ Credit to LESS Elements for the motivation and
+ to CSS3Please.com for implementation.
+
+ Copyright (c) 2012 Joel Sutherland
+ MIT Licensed:
+ http://www.opensource.org/licenses/mit-license.php
+
+-----------------------------------------------------*/
+/* Animation */
+/* Background Size */
+/* Border Radius */
+/* Box Shadows */
+/* Box Sizing */
+/* Columns */
+/* Gradients */
+/* Opacity */
+/* Text Shadow */
+/* Transforms */
+/* Transitions */
.pagerjs-fx-zoom {
-webkit-transition: all 0.3s ease-in-out;
+ -moz-transition: all 0.3s ease-in-out;
+ -o-transition: all 0.3s ease-in-out;
+ transition: all 0.3s ease-in-out;
-webkit-transform: rotate(0deg) scale(0.1);
+ -moz-transform: rotate(0deg) scale(0.1);
+ -ms-transform: rotate(0deg) scale(0.1);
+ -o-transform: rotate(0deg) scale(0.1);
+ transform: rotate(0deg) scale(0.1);
}
.pagerjs-fx-zoom-in {
-webkit-transform: rotate(0deg) scale(1);
+ -moz-transform: rotate(0deg) scale(1);
+ -ms-transform: rotate(0deg) scale(1);
+ -o-transform: rotate(0deg) scale(1);
+ transform: rotate(0deg) scale(1);
}
.pagerjs-fx-flip {
-webkit-transition: all 0.3s ease-in-out;
+ -moz-transition: all 0.3s ease-in-out;
+ -o-transition: all 0.3s ease-in-out;
+ transition: all 0.3s ease-in-out;
-webkit-transform: rotatey(90deg) scale(1);
+ -moz-transform: rotatey(90deg) scale(1);
+ -ms-transform: rotatey(90deg) scale(1);
+ -o-transform: rotatey(90deg) scale(1);
+ transform: rotatey(90deg) scale(1);
}
.pagerjs-fx-flip-in {
-webkit-transform: rotatey(0deg) scale(1);
+ -moz-transform: rotatey(0deg) scale(1);
+ -ms-transform: rotatey(0deg) scale(1);
+ -o-transform: rotatey(0deg) scale(1);
+ transform: rotatey(0deg) scale(1);
+}
+.pagerjs-fx-popout-modal {
+ -webkit-transition: all 0.3s ease-in-out;
+ -moz-transition: all 0.3s ease-in-out;
+ -o-transition: all 0.3s ease-in-out;
+ transition: all 0.3s ease-in-out;
+ opacity: 0;
+}
+.pagerjs-fx-popout-modal-in {
+ -webkit-transform: scale(1.2);
+ -moz-transform: scale(1.2);
+ -ms-transform: scale(1.2);
+ -o-transform: scale(1.2);
+ transform: scale(1.2);
+ opacity: 1;
}