Skip to content

Commit

Permalink
Added new popout effect
Browse files Browse the repository at this point in the history
  • Loading branch information
finnsson committed Oct 4, 2012
1 parent fe46ea4 commit ff4fb3c
Show file tree
Hide file tree
Showing 15 changed files with 522 additions and 128 deletions.
44 changes: 44 additions & 0 deletions README.md
Expand Up @@ -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: {}">
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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...
Expand Down
4 changes: 2 additions & 2 deletions boilerplate/public/javascript/pager.amd.history.min.js

Large diffs are not rendered by default.

40 changes: 35 additions & 5 deletions demo/fx.html
Expand Up @@ -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>

Expand All @@ -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>
Expand All @@ -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>


Expand All @@ -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>


Expand All @@ -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>


Expand All @@ -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>
4 changes: 2 additions & 2 deletions demo/index.html
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions demo/pager.amd.hash.min.js

Large diffs are not rendered by default.

114 changes: 114 additions & 0 deletions demo/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;
}

0 comments on commit ff4fb3c

Please sign in to comment.