Close #1 and Close #28 - guard takes from and to page and four fx are…

… implemented

.gitignore

@@ -1 +1,2 @@
+node_modules
 .idea

README.md

@@ -541,25 +541,20 @@ a webserver for login details or asking if a valid shopping card exists etc.
 
 ## In the pipeline
 
-Nothing is in the pipeline at the moment. I have to use pager.js some more.
-
-## Backlog
-
-There are a lot of features waiting to be implemented. Here are some of them.
+### Should contain common effects
 
 ### Document architecture and guiding principles
 
 The architecture - and guiding principles - should be documentet.
 
-* Dependencies (jQuery, KnockoutJS, Underscore.js)
-* how the tool-chain is used (grunt qunit > grunt min),
-* working process (README.md > GitHub Issues > QUnit-test > pager.js > demo-page),
-* code architecture (pager , Page, ChildManager).
-* Document navigation/callback/event-order.
-* Update doc.
-* Demo-page with (1) recap, (2) displaying how to use the page-object hierarchy to construct
-  e.g. breadcrumbs, (3) usages of page-properties (isVisible, etc).
-* node.js demo-page for HTML5 + History.js
+* Template with requirejs, jQuery, Lo-Dash, KnockoutJS, Bootstrap, History.js, Pager.js,
+  Volo (https://github.com/volojs/volo),
+  Grunt,
+  and a Node.js-server
+
+## Backlog
+
+There are a lot of features waiting to be implemented. Here are some of them.
 
 ### Wildcards should deep-load content if configured so
 
@@ -590,12 +585,3 @@ This is useful for effects that has nothing to do with the view-model.
 Now `name` and `age` are available in the `Page`-instance
 under the `elementChildren`-observable, e.g. `this.elementChildren().name()`
 and `this.elementChildren().age()`.
-
-### Should contain common show/hide-alternatives
-
-`pager.fx.show` and `pager.fx.hide` should contain
-common show/hide effects that can be bound to using strings.
-
-Show-effects should be: fadeIn, slideDown
-
-Hide-effects should be: fadeOut, slideUp

demo/bend_her.html

@@ -0,0 +1,31 @@
+<h1>Bend Her</h1>
+
+<p>Say what? File not found. Uh, is the puppy mechanical in any way? Hello, little man. I will destroy you! In
+    our darkest hour, we can stand erect, with proud upthrust bosoms.</p>
+
+<h2>The Day The Earth Stood Stupid</h2>
+
+<p>I'll get my kit! Hey! I'm a porno-dealing monster, what do I care what you think? Quite possible. We live
+    long and are celebrated poopers.</p>
+<ul>
+    <li>So I really am important? How I feel when I'm drunk is correct?</li>
+    <li>Nay, I respect and admire Harold Zoid too much to beat him to death with his own Oscar.</li>
+    <li>Bender, hurry! This fuel's expensive! Also, we're dying!</li>
+</ul>
+<h3>A Tale of Two Santas</h3>
+
+<p>Goodbye, cruel world. Goodbye, cruel lamp. Goodbye, cruel velvet drapes, lined with what would appear to be
+    some sort of cruel muslin and the cute little pom-pom curtain pull cords. Cruel though they may be&hellip;
+    Really?! Bender! Ship! Stop bickering or I'm going to come back there and change your opinions manually!</p>
+<h4>Attack of the Killer App</h4>
+
+<p>It's toe-tappingly tragic! And I'm his friend Jesus. Aww, it's true. I've been hiding it for so long. Meh.
+    Leela, Bender, we're going grave robbing. With a warning label this big, you know they gotta be fun!</p>
+<ol>
+    <li>Soon enough.</li>
+    <li>That's a popular name today. Little "e", big "B"?</li>
+</ol>
+<h5>Fear of a Bot Planet</h5>
+
+<p>So I really am important? How I feel when I'm drunk is correct? Is today's hectic lifestyle making you tense
+    and impatient? Ooh, name it after me!</p>

demo/buggalo.html

@@ -0,0 +1,35 @@
+<h1>Where the Buggalo Roam</h1>
+
+<p>What are their names? And until then, I can never die? Come, Comrade Bender! We must take to the streets! I
+    barely knew Philip, but as a clergyman I have no problem telling his most intimate friends all about him.
+    That could be 'my' beautiful soul sitting naked on a couch. If I could just learn to play this stupid
+    thing.</p>
+
+<h2>Put Your Head on my Shoulder</h2>
+
+<p>Fatal. I'm Santa Claus! Bender, I didn't know you liked cooking. That's so cute.</p>
+<ul>
+    <li>Hey! I'm a porno-dealing monster, what do I care what you think?</li>
+    <li>With a warning label this big, you know they gotta be fun!</li>
+    <li>Well, let's just dump it in the sewer and say we delivered it.</li>
+    <li>Yes, if you make it look like an electrical fire. When you do things right, people won't be sure you've
+        done anything at all.
+    </li>
+</ul>
+<h3>The Series Has Landed</h3>
+
+<p>Anyone who laughs is a communist! Well I'da done better, but it's plum hard pleading a case while awaiting
+    trial for that there incompetence. Why, those are the Grunka-Lunkas! They work here in the Slurm factory.
+    Bender?! You stole the atom.</p>
+<h4>The Day The Earth Stood Stupid</h4>
+
+<p>No, just a regular mistake. Hello, little man. I will destroy you! Alright, let's mafia things up a bit.
+    Joey, burn down the ship. Clamps, burn down the crew.</p>
+<ol>
+    <li>Whoa a real live robot; or is that some kind of cheesy New Year's costume?</li>
+    <li>Now, now. Perfectly symmetrical violence never solved anything.</li>
+</ol>
+<h5>Love's Labors Lost in Space</h5>
+
+<p>And then the battle's not so bad? I'm sure those windmills will keep them cool. And from now on you're all
+    named Bender Jr.</p>

demo/demo.css

@@ -3,9 +3,28 @@ body > .container > div {
 }
 
 .code-large {
-    font-size: 16px;
+    font-size: 20px;
     font-weight: normal;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
 }
 
 .p {
+}
+
+footer {
+    padding: 100px 0;
+    margin-top: 100px;
+    border-top: 1px solid #E5E5E5;
+    background-color: whiteSmoke;
+}
+
+footer .pagination ul {
+    background-color: #fff;
+}
+
+.dropdown-menu {
+    max-height: 300px;
+    overflow-y: scroll;
 }

demo/demo.js

@@ -1,7 +1,10 @@
-require(['jquery', 'knockout', 'underscore', 'pager', 'bootstrap'], function ($, ko, _, pager, bootstrap) {
+require(['jquery', 'knockout', 'underscore', 'pager', 'bootstrap', 'history'], function ($, ko, _, pager) {
     var viewModel = {
         name:ko.observable("Pelle"),
         description:ko.observable('pl'),
+        externalContentLoaded:function (page) {
+            prettyPrint();
+        },
         afterFryIsDisplayed:function () {
             $('body').css("background-color", "#FF9999");
         },
@@ -36,15 +39,15 @@ require(['jquery', 'knockout', 'underscore', 'pager', 'bootstrap'], function ($,
             });
             page.showPage(route);
         },
-        loggedIn: ko.observable(false),
-        isLoggedIn: function(page, route, callback) {
-            if(viewModel.loggedIn()) {
+        loggedIn:ko.observable(false),
+        isLoggedIn:function (page, route, callback) {
+            if (viewModel.loggedIn()) {
                 callback();
             } else {
                 window.location.href = "#guards/login";
             }
         },
-        logout: function() {
+        logout:function () {
             viewModel.loggedIn(false);
             return true;
         },
@@ -59,21 +62,57 @@ require(['jquery', 'knockout', 'underscore', 'pager', 'bootstrap'], function ($,
         };
     };
 
-    window.requireView = function(viewModule) {
-        return function(page, callback) {
-            require([viewModule], function(viewString) {
+    window.requireView = function (viewModule) {
+        return function (page, callback) {
+            require([viewModule], function (viewString) {
                 $(page.element).html(viewString);
                 callback();
             });
         };
     };
 
+    window.recapLoaded = function (page) {
+        prettyPrint();
+        $('.tt').tooltip();
+
+        // for each h3
+        var h3s = $('h3', $(page.element));
+        $.each(h3s, function (h3Index, h3) {
+            var $h3 = $(h3);
+            // get all siblings until another h3 or h2
+            var siblings = $([]);
+            var sibling = $h3.next();
+            while (sibling && sibling.length > 0 && sibling[0].tagName.toLocaleLowerCase() !== 'h3' && sibling[0].tagName.toLocaleLowerCase() !== 'h2') {
+                siblings.push(sibling);
+                sibling = sibling.next();
+            }
+            // hide all siblings
+            siblings.toggle();
+            // on h3-click toggle all siblings
+            $h3.click(function () {
+                siblings.toggle();
+            });
+        });
+    };
+
 
     $(function () {
 
         pager.extendWithPage(viewModel);
         ko.applyBindings(viewModel);
-        pager.start(viewModel);
+
+        // using jquery hashchange-plugin instead of pager.start
+        $(window).hashchange(function () {
+            var hash = location.hash;
+            // strip #
+            if (hash[0] === '#') {
+                hash = hash.slice(1);
+            }
+            // split on '/'
+            var hashRoute = decodeURIComponent(hash).split('/');
+            pager.showChild(hashRoute);
+        });
+        $(window).hashchange();
 
         $('.dropdown-toggle').dropdown();
     });

demo/fx.html

@@ -0,0 +1,81 @@
+<header class="jumbotron subhead">
+    <h1>FX</h1>
+
+    <p class="lead">
+        pager.js comes pre-packed with effects for fading, sliding, zooming and flipping between pages.
+        These effects can easily be added to your page using
+        <code>fx: 'zoom'</code>,
+        <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 pager.css or pager.less.
+    </p>
+</header>
+
+
+<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-href: getId()"></a></li>
+    </ul>
+
+    <div data-bind="page: {id: 'bend_her', title: 'Bend Her', fx: 'zoom', source: 'bend_her.html'}"
+         class="pagerjs-fx-zoom"></div>
+    <div data-bind="page: {id: 'buggalo_zoom', title: 'Buggalo', fx: 'zoom', source: 'buggalo.html'}"
+         class="pagerjs-fx-zoom"></div>
+    <div data-bind="page: {id: 'lethal_zoom', title: 'Lethal', fx: 'zoom', source: 'lethal.html'}"
+         class="pagerjs-fx-zoom"></div>
+</div>
+
+<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-href: getId()"></a></li>
+    </ul>
+
+
+    <div data-bind="page: {id: 'bend_her', title: 'Bend Her', fx: 'flip', source: 'bend_her.html'}"
+         class="pagerjs-fx-flip"></div>
+    <div data-bind="page: {id: 'buggalo_zoom', title: 'Buggalo', fx: 'flip', source: 'buggalo.html'}"
+         class="pagerjs-fx-flip"></div>
+    <div data-bind="page: {id: 'lethal_zoom', title: 'Lethal', fx: 'flip', source: 'lethal.html'}"
+         class="pagerjs-fx-flip"></div>
+</div>
+
+<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-href: getId()"></a></li>
+    </ul>
+
+
+    <div data-bind="page: {id: 'bend_her', title: 'Bend Her', fx: 'slide', source: 'bend_her.html'}"
+            ></div>
+    <div data-bind="page: {id: 'buggalo_zoom', title: 'Buggalo', fx: 'slide', source: 'buggalo.html'}"
+            ></div>
+    <div data-bind="page: {id: 'lethal_zoom', title: 'Lethal', fx: 'slide', source: 'lethal.html'}"
+            ></div>
+</div>
+
+<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-href: getId()"></a></li>
+    </ul>
+
+
+    <div data-bind="page: {id: 'bend_her', title: 'Bend Her', fx: 'fade', source: 'bend_her.html'}"
+            ></div>
+    <div data-bind="page: {id: 'buggalo_zoom', title: 'Buggalo', fx: 'fade', source: 'buggalo.html'}"
+            ></div>
+    <div data-bind="page: {id: 'lethal_zoom', title: 'Lethal', fx: 'fade', source: 'lethal.html'}"
+            ></div>
+</div>
+
+<div class="form-actions">
+    <a class="btn btn-large btn-primary" href="#recapitulation">Read a recapitulation about the API</a>
+</div>