Skip to content

Commit

Permalink
Working on demo page
Browse files Browse the repository at this point in the history
  • Loading branch information
@finnsson
finnsson committed Feb 17, 2013
1 parent ee6e657 commit 1fead85
Show file tree
Hide file tree
Showing 41 changed files with 211 additions and 277 deletions.
3 changes: 1 addition & 2 deletions pagerjs.com/demo/cached_lazy.html
View file
Expand Up @@ -25,8 +25,7 @@ <h1>Cached Lazy Loaded Content</h1>
</pre>


<a class="btn btn-large btn-primary" href="#!/relative_path">Read about relative paths</a>

<div data-bind="template: {name: 'link-template'}"></div>
</div>
</body>
</html>
2 changes: 1 addition & 1 deletion pagerjs.com/demo/demo.css
View file
Expand Up @@ -47,5 +47,5 @@ h1, h2, h3 {
}

h1 {
padding-top: 50px;
padding-top: 20px;
}
2 changes: 1 addition & 1 deletion pagerjs.com/demo/demo.js
View file
Expand Up @@ -143,7 +143,7 @@ requirejs(['jquery', 'knockout', 'underscore', 'pager', 'bootstrap', 'hashchange
if (viewModel.loggedIn()) {
callback();
} else {
window.location.href = "#!/guards/login";
window.location.href = "#!/navigation/guards/login";
}
},
logout:function () {
Expand Down
14 changes: 7 additions & 7 deletions pagerjs.com/demo/fx.html
View file
Expand Up @@ -14,7 +14,7 @@ <h1>FX</h1>
</header>


<h2><a href="#!/fx/zoom">Zoom</a></h2>
<h2><a href="#!/view/fx/zoom">Zoom</a></h2>
<div data-bind="page: {id: 'zoom'}">

<ul class="nav nav-tabs" data-bind="foreach: $page.children">
Expand All @@ -27,7 +27,7 @@ <h2><a href="#!/fx/zoom">Zoom</a></h2>
<div data-bind="page: {id: 'lethal_zoom', title: 'Lethal', fx: 'zoom', source: 'lethal.html'}"></div>
</div>

<h2><a href="#!/fx/flip">Flip</a></h2>
<h2><a href="#!/view/fx/flip">Flip</a></h2>

<div data-bind="page: {id: 'flip'}">
<ul class="nav nav-tabs" data-bind="foreach: $page.children">
Expand All @@ -41,7 +41,7 @@ <h2><a href="#!/fx/flip">Flip</a></h2>
<div data-bind="page: {id: 'lethal_zoom', title: 'Lethal', fx: 'flip', source: 'lethal.html'}"></div>
</div>

<h2><a href="#!/fx/slide">Slide</a></h2>
<h2><a href="#!/view/fx/slide">Slide</a></h2>

<div data-bind="page: {id: 'slide'}">
<ul class="nav nav-tabs" data-bind="foreach: $page.children">
Expand All @@ -58,7 +58,7 @@ <h2><a href="#!/fx/slide">Slide</a></h2>
></div>
</div>

<h2><a href="#!/fx/fade">Fade</a></h2>
<h2><a href="#!/view/fx/fade">Fade</a></h2>

<div data-bind="page: {id: 'fade'}">
<ul class="nav nav-tabs" data-bind="foreach: $page.children">
Expand All @@ -75,14 +75,14 @@ <h2><a href="#!/fx/fade">Fade</a></h2>
></div>
</div>

<h2><a href="#!/fx/pop">Popout</a></h2>
<h2><a href="#!/view/fx/pop">Popout</a></h2>

<div data-bind="page: {id: 'pop'}">
<a href="#!/fx/pop/popout">Show popout</a>
<a href="#!/view/fx/pop/popout">Show popout</a>
</div>


<div data-bind="template: {name: 'link-template'}"></div>
<div data-bind="template: {name: 'end-link-template'}"></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;">

Expand Down
206 changes: 94 additions & 112 deletions pagerjs.com/demo/index.html
View file

Large diffs are not rendered by default.

3 changes: 1 addition & 2 deletions pagerjs.com/demo/lazy_load_external_content.html
View file
Expand Up @@ -23,8 +23,7 @@ <h1>Lazy Load External Content</h1>
</pre>


<a class="btn btn-large btn-primary" href="#!/cached_lazy">Read more about lazy loading!</a>

<div data-bind="template: {name: 'link-template'}"></div>
</div>
</body>
</html>
3 changes: 1 addition & 2 deletions pagerjs.com/demo/load_external_content.html
View file
Expand Up @@ -32,8 +32,7 @@ <h1>Load External Content</h1>
};
</pre>

<a class="btn btn-large btn-primary" href="#!/lazy_load_external_content">Find out how to lazy load external content!</a>

<div data-bind="template: {name: 'start-link-template'}"></div>
</div>
</body>
</html>
25 changes: 17 additions & 8 deletions pagerjs.com/demo/page/absolute_path.html
View file
Expand Up @@ -6,20 +6,29 @@ <h1>Absolute Path</h1>
its path directly. Use supply the <code>page-href</code> binding the
page instance and the binding will calculate the correct path to the page.
<br/>
This is useful when iterating over a collection of pages (see the menu on the top).
This is useful when iterating over a collection of pages (see the menu to the left).
</p>
</header>


<pre data-bind="prettyprint: {}" class="prettyprint linenums">
&lt;ul data-bind="foreach: $__page__.children" class="dropdown-menu" role="menu"
aria-labelledby="dropdownMenu"&gt;
&lt;li data-bind="css: {<a data-bind="tooltip: {}" title="add the class active if the page is visible">active: isVisible</a>}"&gt;
&lt;a data-bind="text: val('title'), <a data-bind="tooltip: {}" title="$data is a Page-instance">page-href: $data</a>"&gt;&lt;/a&gt;
&lt;ul data-bind="foreach: $__page__.children" class="nav nav-pills nav-stacked"&gt;
&lt;li data-bind="css: {active: isVisible}"&gt;
&lt;a class="lead" data-bind="page-href: $data"&gt;
&lt;span data-bind="text: val('title')"&gt;&lt;/span&gt;
&lt;/a&gt;
&lt;ul data-bind="foreach: children" class="nav nav-tabs nav-stacked"&gt;
&lt;li data-bind="css: {active: isVisible}"&gt;
&lt;a data-bind="page-href: $data"&gt;
&lt;span data-bind="text: val('title')"&gt;&lt;/span&gt;
&lt;!-- ko if val('desc') --&gt;
&lt;span class="muted" data-bind="text: val('desc')"&gt;&lt;/span&gt;
&lt;!-- --&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
</pre>

<div class="form-actions">
<a class="btn btn-large btn-primary" href="#!/html5_history">What about HTML5 history?</a>
</div>
<div data-bind="template: {name: 'link-template'}"></div>
2 changes: 1 addition & 1 deletion pagerjs.com/demo/page/binding_error.html
View file
Expand Up @@ -28,4 +28,4 @@ <h1>Binding Error</h1>
});
</pre>

<div data-bind="template: {name: 'link-template'}"></div>
<div data-bind="template: {name: 'end-link-template'}"></div>
4 changes: 1 addition & 3 deletions pagerjs.com/demo/page/binding_wildcard_to_observable.html
View file
Expand Up @@ -47,6 +47,4 @@ <h3 data-bind="text: theSecondID"></h3>
&lt;/div&gt;
</pre>

<div class="form-actions">
<a class="btn btn-large btn-primary" href="#!/vars">Read about custom observables in the view</a>
</div>
<div data-bind="template: {name: 'link-template'}"></div>
5 changes: 1 addition & 4 deletions pagerjs.com/demo/page/change_binding_context.html
View file
Expand Up @@ -43,7 +43,4 @@ <h1>Change Binding Context</h1>
</pre>


<div class="form-actions">
<a class="btn btn-large btn-primary" href="#!/lazy_bind_view_model">Read more about changing the binding
context</a>
</div>
<div data-bind="template: {name: 'start-link-template'}"></div>
4 changes: 1 addition & 3 deletions pagerjs.com/demo/page/configure_iframe.html
View file
Expand Up @@ -18,6 +18,4 @@ <h1>Configure an iframe</h1>
&lt;/div&gt;
</pre>

<div class="form-actions">
<a class="btn btn-large btn-primary" href="#!/custom_widgets">Read about custom widgets</a>
</div>
<div data-bind="template: {name: 'link-template'}"></div>
4 changes: 2 additions & 2 deletions pagerjs.com/demo/page/crawling.html
View file
Expand Up @@ -19,7 +19,7 @@ <h1>Crawling</h1>
</p>
</header>

<a target="_blank" href="?_escaped_fragment_=/crawling">See the snapshot of this AJAX page.</a>.
<a target="_blank" href="?_escaped_fragment_=/misc/crawling">See the snapshot of this AJAX page.</a>.


<div data-bind="template: {name: 'link-template'}"></div>
<div data-bind="template: {name: 'start-link-template'}"></div>
6 changes: 2 additions & 4 deletions pagerjs.com/demo/page/custom_hide_show.html
View file
Expand Up @@ -10,7 +10,7 @@ <h1>Custom Hide- and Show-methods</h1>
</p>
</header>

<a href="#!/custom_hide_show/fry">Show Fry</a>
<a href="#!/view/custom_hide_show/fry">Show Fry</a>

<div data-bind="page:{id: 'fry', showElement: showFry, hideElement: hideFry}">
<h2>Fry</h2>
Expand Down Expand Up @@ -40,6 +40,4 @@ <h2>Fry</h2>
};
</pre>

<div class="form-actions">
<a class="btn btn-large btn-primary" href="#!/loader">Read about custom loaders</a>
</div>
<div data-bind="template: {name: 'link-template'}"></div>
10 changes: 4 additions & 6 deletions pagerjs.com/demo/page/custom_js_when_navigating.html
View file
Expand Up @@ -24,11 +24,11 @@ <h1>Custom JS when Navigating</h1>
</li>
</ol>

<a href="#!/custom_js_when_navigating/fry">Show Fry</a>
<a href="#!/navigation/custom_js_when_navigating/fry">Show Fry</a>

<div data-bind="page: {id: 'fry', beforeHide: beforeFryIsHidden, afterShow: afterFryIsDisplayed}">
Fry
<a class="btn" href="#!/custom_js_when_navigating">Hide Fry</a>
<a class="btn" href="#!/navigation/custom_js_when_navigating">Hide Fry</a>
</div>

</p>
Expand All @@ -37,7 +37,7 @@ <h1>Custom JS when Navigating</h1>
<pre data-bind="prettyprint: {}" class="prettyprint linenums">
&lt;div data-bind="page: {id: 'fry', beforeHide: beforeFryIsHidden, afterShow: afterFryIsDisplayed}"&gt;
Fry
&lt;a class="btn" href="#!/custom_js_when_navigating"&gt;Hide Fry&lt;/a&gt;
&lt;a class="btn" href="#!/navigation/custom_js_when_navigating"&gt;Hide Fry&lt;/a&gt;
&lt;/div&gt;
</pre>
<pre data-bind="prettyprint: {}" class="prettyprint linenums">
Expand All @@ -49,6 +49,4 @@ <h1>Custom JS when Navigating</h1>
}
</pre>

<div class="form-actions">
<a class="btn btn-large btn-primary" href="#!/custom_hide_show">Read about custom <code>hide</code>- and <code>show</code>-methods</a>
</div>
<div data-bind="template: {name: 'link-template'}"></div>
2 changes: 1 addition & 1 deletion pagerjs.com/demo/page/custom_navigation_binding.html
View file
Expand Up @@ -141,4 +141,4 @@ <h1>Custom Navigation Bindings</h1>
for their navigation.
</p>

<div data-bind="template: {name: 'link-template'}"></div>
<div data-bind="template: {name: 'end-link-template'}"></div>
6 changes: 2 additions & 4 deletions pagerjs.com/demo/page/custom_view_loader.html
View file
Expand Up @@ -14,7 +14,7 @@ <h1>Load View using Custom Method</h1>
</p>
</header>

<a href="#!/custom_view_loader/zoidberg">Load custom view using requireView-method</a>
<a href="#!/view/custom_view_loader/zoidberg">Load custom view using requireView-method</a>

<div data-bind="page: {id: 'zoidberg', sourceOnShow: requireView('zoidberg')}">

Expand All @@ -37,6 +37,4 @@ <h1>Load View using Custom Method</h1>
};
</pre>

<div class="form-actions">
<a class="btn btn-large btn-primary" href="#!/params">Read about binding URI parameters</a>
</div>
<div data-bind="template: {name: 'link-template'}"></div>
12 changes: 5 additions & 7 deletions pagerjs.com/demo/page/custom_widgets.html
View file
Expand Up @@ -13,12 +13,12 @@ <h1>Custom Widgets</h1>

<div data-bind="page: {id: 'start'}" class="well">
<div data-bind="page-accordion-item: {id: 'zoidberg'}">
<a href="#!/custom_widgets/start/zoidberg">Zoidberg</a>
<a href="#!/widgets/custom_widgets/start/zoidberg">Zoidberg</a>

<div>Zoidberg Information</div>
</div>
<div data-bind="page-accordion-item: {id: 'hermes'}">
<a href="#!/custom_widgets/start/hermes">Hermes</a>
<a href="#!/widgets/custom_widgets/start/hermes">Hermes</a>

<div>Hermes Information</div>
</div>
Expand All @@ -28,12 +28,12 @@ <h1>Custom Widgets</h1>

<pre data-bind="prettyprint: {}" class="prettyprint linenums">
&lt;div data-bind="page-accordion-item: {id: 'zoidberg'}"&gt;
&lt;a href="#!/custom_widgets/start/zoidberg"&gt;Zoidberg&lt;/a&gt;
&lt;a href="#!/widgets/custom_widgets/start/zoidberg"&gt;Zoidberg&lt;/a&gt;

&lt;div&gt;Zoidberg Information&lt;/div&gt;
&lt;/div&gt;
&lt;div data-bind="page-accordion-item: {id: 'hermes'}"&gt;
&lt;a href="#!/custom_widgets/start/hermes"&gt;Hermes&lt;/a&gt;
&lt;a href="#!/widgets/custom_widgets/start/hermes"&gt;Hermes&lt;/a&gt;

&lt;div&gt;Hermes Information&lt;/div&gt;
&lt;/div&gt;
Expand Down Expand Up @@ -119,6 +119,4 @@ <h1>Custom Widgets</h1>
};
</pre>

<div class="form-actions">
<a class="btn btn-large btn-primary" href="#!/modals">Read about modals</a>
</div>
<div data-bind="template: {name: 'link-template'}"></div>
8 changes: 3 additions & 5 deletions pagerjs.com/demo/page/deep_load_content_into_wildcard.html
View file
Expand Up @@ -11,7 +11,7 @@ <h1>Deep Load Content into Wildcard</h1>

<div class="well">
<div data-bind="page: {id: 'start'}">
<a href="#!/deep_load_content_into_wildcard/deep/character/fry">Go to Fry</a>
<a href="#!/view/deep_load_content_into_wildcard/deep/character/fry">Go to Fry</a>
</div>

<div data-bind="page: {id: 'deep'}">
Expand All @@ -25,7 +25,7 @@ <h3>Character</h3>

<pre data-bind="prettyprint: {}" class="prettyprint linenums">
&lt;div data-bind="page: {id: 'start'}"&gt;
&lt;a href="#!/deep_load_content_into_wildcard/deep/character/fry"&gt;Go to Fry&lt;/a&gt;
&lt;a href="#!/view/deep_load_content_into_wildcard/deep/character/fry"&gt;Go to Fry&lt;/a&gt;
&lt;/div&gt;

&lt;div data-bind="page: {id: 'deep'}"&gt;
Expand All @@ -36,6 +36,4 @@ <h3>Character</h3>
&lt;/div&gt;
</pre>

<div class="form-actions">
<a class="btn btn-large btn-primary" href="#!/load_into_iframe">Read about loading content into iframes</a>
</div>
<div data-bind="template: {name: 'link-template'}"></div>
13 changes: 5 additions & 8 deletions pagerjs.com/demo/page/deep_navigation.html
View file
Expand Up @@ -10,29 +10,26 @@ <h1>Deep Navigation</h1>

<div class="well" data-bind="page: {id: 'start'}">
This is the default sub page.
<a href="#!/deep_navigation/second">Show the second page</a>.
<a href="#!/navigation/deep_navigation/second">Show the second page</a>.
</div>
<div class="well" data-bind="page: {id: 'second'}">
This is the second sub page.

<a href="#!/deep_navigation">Go back to the first sub page</a>.
<a href="#!/navigation/deep_navigation">Go back to the first sub page</a>.
</div>

<pre data-bind="prettyprint: {}" class="prettyprint linenums">
&lt;div data-bind="page: {id: 'deep_navigation'}"&gt;
...
&lt;div data-bind="page: {id: 'start'}"&gt;
...
&lt;a href="#!/deep_navigation/second"&gt;Show the second page&lt;/a&gt;.
&lt;a href="#!/navigation/deep_navigation/second"&gt;Show the second page&lt;/a&gt;.
&lt;/div&gt;
&lt;div data-bind="page: {id: 'second'}"&gt;
...
&lt;a href="#!/deep_navigation"&gt;Go back to the first sub page&lt;/a&gt;.
&lt;a href="#!/navigation/deep_navigation"&gt;Go back to the first sub page&lt;/a&gt;.
&lt;/div&gt;
...&lt;a href="#!/load_external_content"&gt;Go on&lt;/a&gt;...
&lt;/div&gt;
</pre>

<div class="form-actions">
<a class="btn btn-large btn-primary" href="#!/load_external_content">Read about loading content</a>
</div>
<div data-bind="template: {name: 'link-template'}"></div>
8 changes: 3 additions & 5 deletions pagerjs.com/demo/page/deep_navigation_with_wildcards.html
View file
Expand Up @@ -8,7 +8,7 @@ <h1>Deep Navigation with Wildcards</h1>

<div class="well">
<div data-bind="page: {id: 'start'}">
<a class="btn" href="#!/deep_navigation_with_wildcards/wild/leela">Go to Leela</a>
<a class="btn" href="#!/navigation/deep_navigation_with_wildcards/wild/leela">Go to Leela</a>
</div>

<div data-bind="page: {id: '?'}">
Expand All @@ -23,7 +23,7 @@ <h3>Character</h3>

<pre data-bind="prettyprint: {}" class="prettyprint linenums">
&lt;div data-bind="page: {id: 'start'}"&gt;
&lt;a class="btn" href="#!/deep_navigation_with_wildcards/wild/leela"&gt;Go to Leela&lt;/a&gt;
&lt;a class="btn" href="#!/navigation/deep_navigation_with_wildcards/wild/leela"&gt;Go to Leela&lt;/a&gt;
&lt;/div&gt;

&lt;div data-bind="page: {id: '?'}"&gt;
Expand All @@ -35,6 +35,4 @@ <h3>Character</h3>
&lt;/div&gt;
</pre>

<div class="form-actions">
<a class="btn btn-large btn-primary" href="#!/send_wildcard_to_source">Further features of wildcards</a>
</div>
<div data-bind="template: {name: 'link-template'}"></div>

0 comments on commit 1fead85

Please sign in to comment.