Permalink
Browse files

Added new popout effect

  • Loading branch information...
1 parent fe46ea4 commit ff4fb3c295c62833087eb68428e518c02cf098cc @finnsson committed Oct 4, 2012
View
@@ -113,8 +113,19 @@ extends KnockoutJS with four custom bindings: `page`, `page-href`, `page-hash` a
<a data-bind="page-href: 'somePagePath'"></a>
+ <a data-bind="page-href: somePageInstance"></a>
+
Calculates absolute href based on the location of the element.
+If hashes are used it will be prefixed with `#` by default. You can change the default prefix
+to e.g. `#!/` by setting `pager.Href.hash = '#!/';`
+
+True URLs can use used by either using the `page-href5` binding or setting `pager.useHTML5history = true`.
+
+History.js can be used by setting `pager.Href5.history = History` (default to the normal `history`).
+
+It the page-href is supplied a Page-instance the absolute href to the Page-instance is calculated.
+
### page
<div data-bind="page: {}">
@@ -259,6 +270,15 @@ Validates a page transition before it is happening.
* [FX](http://oscar.finnsson.nu/pagerjs/demo/#fx)
+### {Object} vars
+
+Created scoped observables for the view. Useful for when observables are needed purely for the view
+and has no connection to the view-model.
+
+### {Boolean} deep
+
+By setting `deep: true` a wildcard page will deep-load supplied sources.
+
## Cookbook
The following behaviors specify and exemplify what pager.js is capable of.
@@ -670,6 +690,30 @@ Use cases are login, validating steps in state machines, etc.
The reason the guard takes a callback as third argument is simply because the guard might be async - accessing
a webserver for login details or asking if a valid shopping card exists etc.
+### Add observables without connection to the view model
+
+Sometimes you need observables purely for the visual and they got no connection to the view-model.
+
+Using the `vars` property new observables can be added to the page context.
+
+ <div data-bind="page: {id: 'user', vars: {lorem: 'ipsum'}}">
+ <input type="text" data-bind="value: lorem"/>
+ <div data-bind="text: lorem"/>
+ </div>
+
+### Deep loading content into wildcards
+
+Using a combination of wildcard pages and sourceOnShow it is possible to deep load content.
+
+ <div data-bind="page: {id: '?', deep: true, sourceOnShow: '{1}.html'}></div>
+
+ <a href="#!/some/cool/page">Load some cool page</a>
+
+In the above example `some/cool/page` will match the wildcard (`?`) and since `deep: true` is specified
+the entire route (`some/cool/page`) will be used when loading content into the page. If `deep` hadn't been
+specified the source should have been `some.html` instead of `some/cool/page.html`.
+
+
## FAQ
### Can I use it together with...

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -8,7 +8,8 @@ <h1>FX</h1>
<code>fx: 'flip'</code>,
<code>fx: 'slide'</code> or
<code>fx: 'fade'</code>.
- In order to use <i>zoom</i> or <i>flip</i> you'll need to include <code>pager.css</code> or <code>pager.less</code>.
+ In order to use <i>zoom</i> or <i>flip</i> you'll need to include <code>pager.css</code> or
+ <code>pager.less</code>.
</p>
</header>
@@ -17,7 +18,8 @@ <h2><a href="#fx/zoom">Zoom</a></h2>
<div data-bind="page: {id: 'zoom'}">
<ul class="nav nav-tabs" data-bind="foreach: $page.children">
- <li data-bind="css: {active: isVisible}"><a data-bind="text: $data.getValue().title, page-hash: getId()"></a></li>
+ <li data-bind="css: {active: isVisible}"><a data-bind="text: $data.getValue().title, page-hash: getId()"></a>
+ </li>
</ul>
<div data-bind="page: {id: 'bend_her', title: 'Bend Her', fx: 'zoom', source: 'bend_her.html'}"></div>
@@ -29,7 +31,8 @@ <h2><a href="#fx/flip">Flip</a></h2>
<div data-bind="page: {id: 'flip'}">
<ul class="nav nav-tabs" data-bind="foreach: $page.children">
- <li data-bind="css: {active: isVisible}"><a data-bind="text: $data.getValue().title, page-hash: getId()"></a></li>
+ <li data-bind="css: {active: isVisible}"><a data-bind="text: $data.getValue().title, page-hash: getId()"></a>
+ </li>
</ul>
@@ -42,7 +45,8 @@ <h2><a href="#fx/slide">Slide</a></h2>
<div data-bind="page: {id: 'slide'}">
<ul class="nav nav-tabs" data-bind="foreach: $page.children">
- <li data-bind="css: {active: isVisible}"><a data-bind="text: $data.getValue().title, page-hash: getId()"></a></li>
+ <li data-bind="css: {active: isVisible}"><a data-bind="text: $data.getValue().title, page-hash: getId()"></a>
+ </li>
</ul>
@@ -58,7 +62,8 @@ <h2><a href="#fx/fade">Fade</a></h2>
<div data-bind="page: {id: 'fade'}">
<ul class="nav nav-tabs" data-bind="foreach: $page.children">
- <li data-bind="css: {active: isVisible}"><a data-bind="text: $data.getValue().title, page-hash: getId()"></a></li>
+ <li data-bind="css: {active: isVisible}"><a data-bind="text: $data.getValue().title, page-hash: getId()"></a>
+ </li>
</ul>
@@ -70,6 +75,31 @@ <h2><a href="#fx/fade">Fade</a></h2>
></div>
</div>
+<h2><a href="#fx/pop">Popout</a></h2>
+
+<div data-bind="page: {id: 'pop'}">
+ <a href="#fx/pop/popout">Show popout</a>
+</div>
+
+
<div class="form-actions">
<a class="btn btn-large btn-primary" href="#recapitulation">Read a recapitulation about the API</a>
</div>
+
+<div data-bind="page: {id: 'popout', modal: true, fx: 'popout'}" style="background-color: rgba(200,200,200,0.5); position: absolute; left: 0; right: 0; top: 0; bottom: 0;">
+
+<div class="modal">
+ <div class="modal-header">
+ <a data-bind="page-href: '../'" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
+
+ <h3>Alert</h3>
+ </div>
+ <div class="modal-body">
+ <p>This modal is stickout out!
+ </p>
+ </div>
+ <div class="modal-footer">
+ <a data-bind="page-href: '../'" class="btn">Close</a>
+ </div>
+</div>
+</div>
View
@@ -24,8 +24,8 @@
<a class="btn dropdown-toggle"><i class="icon-tasks"></i> Menu</a>
<ul data-bind="foreach: $__page__.children" class="dropdown-menu" role="menu"
aria-labelledby="dropdownMenu">
- <li>
- <a data-bind="text: (valueAccessor().title || valueAccessor().id), attr: {href: '#' + valueAccessor().id}"></a>
+ <li data-bind="css: {active: isVisible}">
+ <a data-bind="text: val('title'), page-href: $data"></a>
</li>
</ul>
</div>

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -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;
}
Oops, something went wrong.

0 comments on commit ff4fb3c

Please sign in to comment.