Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Implemented CSS transitions with jquery and zepto fallbacks

  • Loading branch information...
commit f63e258ad40bcb613fd790e7a597809871c2e360 1 parent 950d7fd
@kmalakoff authored
Showing with 15,866 additions and 2,000 deletions.
  1. +28 −15 Bakefile.coffee
  2. +2 −2 README.md
  3. +4 −1 RELEASE_NOTES.md
  4. +3 −2 examples/pn-nt+_xui.html
  5. +1 −1  examples/pn-nt_zpt.html
  6. +4 −3 examples/pn-t-e_zpt_ko.html
  7. +4 −3 examples/pn-t_zpt.html
  8. +4 −3 examples/pnp-dt_zpt_pth.html
  9. +1 −1  examples/pnp-nt-i_xui_pth_kb.html
  10. +1 −1  examples/pnp-nt_xui_pth.html
  11. +1 −1  examples/pnp-nt_zpt_pth.html
  12. +7 −6 examples/pnp-t-e_jq_kb.html
  13. +7 −6 examples/pnp-t-i_jq_kb.html
  14. +5 −4 examples/pnp-t-nh_zpt_pth.html
  15. +7 −6 examples/pnp-t_jq_kb.html
  16. +5 −4 examples/pnp-t_zpt_bb.html
  17. +7 −6 examples/pnp-t_zpt_kb.html
  18. +5 −4 examples/pnp-t_zpt_pth.html
  19. +7 −6 examples/pnp-t_zpt_pth_ko.html
  20. +3 −3 examples/pns-e_jq_kb.html
  21. +3 −3 examples/pns-i_zpt_kb.html
  22. +3 −3 examples/pns_jq_kb.html
  23. +1 −1  examples/pns_zpt_bb.html
  24. +3 −3 examples/pns_zpt_kb.html
  25. +1 −1  examples/pns_zpt_pth.html
  26. +3 −3 examples/pns_zpt_pth_ko.html
  27. +206 −193 examples/vendor/knockback-core-stack-0.16.7.js
  28. +5 −5 index.html
  29. +12 −8 knockback-navigators.css
  30. +29 −77 knockback-page-navigator-panes.js
  31. +1 −1  knockback-page-navigator-panes.min.js
  32. +29 −76 knockback-pane-navigator.js
  33. +1 −1  knockback-pane-navigator.min.js
  34. +1,304 −0 knockback-transitions.css
  35. +294 −0 knockback-transitions.js
  36. +6 −0 knockback-transitions.min.js
  37. +0 −209 lib/knockback-sample-transitions-jquery.js
  38. +0 −6 lib/knockback-sample-transitions-jquery.min.js
  39. +2 −1  package.json
  40. +2 −2 packages/npm/README.md
  41. +12 −8 packages/npm/knockback-navigators.css
  42. +29 −76 packages/npm/knockback-page-navigator-panes.js
  43. +1 −1  packages/npm/knockback-page-navigator-panes.min.js
  44. +29 −76 packages/npm/knockback-pane-navigator.js
  45. +1 −1  packages/npm/knockback-pane-navigator.min.js
  46. +1,304 −0 packages/npm/knockback-transitions.css
  47. +294 −0 packages/npm/knockback-transitions.js
  48. +6 −0 packages/npm/knockback-transitions.min.js
  49. +0 −209 packages/npm/lib/knockback-sample-transitions-jquery.js
  50. +0 −6 packages/npm/lib/knockback-sample-transitions-jquery.min.js
  51. +12 −8 packages/nuget/Content/Scripts/knockback-navigators.css
  52. +29 −76 packages/nuget/Content/Scripts/knockback-page-navigator-panes.js
  53. +1 −1  packages/nuget/Content/Scripts/knockback-page-navigator-panes.min.js
  54. +29 −76 packages/nuget/Content/Scripts/knockback-pane-navigator.js
  55. +1 −1  packages/nuget/Content/Scripts/knockback-pane-navigator.min.js
  56. +1,304 −0 packages/nuget/Content/Scripts/knockback-transitions.css
  57. +294 −0 packages/nuget/Content/Scripts/knockback-transitions.js
  58. +6 −0 packages/nuget/Content/Scripts/knockback-transitions.min.js
  59. +0 −209 packages/nuget/Content/Scripts/lib/knockback-sample-transitions-jquery.js
  60. +0 −6 packages/nuget/Content/Scripts/lib/knockback-sample-transitions-jquery.min.js
  61. +2 −2 packages/nuget/package.nuspec
  62. +0 −1  src/knockback-page-navigator-panes/module-loader.js
  63. +0 −1  src/knockback-page-navigator-simple/module-loader.js
  64. +1 −1  src/knockback-pane-navigator/knockback-pane-navigator-helpers.coffee
  65. +24 −10 src/knockback-pane-navigator/knockback-pane-navigator.coffee
  66. +0 −1  src/knockback-pane-navigator/module-loader.js
  67. +0 −36 src/knockback-sample-transitions-jquery/knockback-transition-cover-vertical.coffee
  68. +0 −33 src/knockback-sample-transitions-jquery/knockback-transition-fade-in.coffee
  69. +0 −38 src/knockback-sample-transitions-jquery/knockback-transition-navigation-slide.coffee
  70. +4 −1 src/{knockback-sample-transitions-jquery → knockback-transitions}/component-imports.coffee
  71. +14 −0 src/knockback-transitions/css-transition-fade-in.coffee
  72. +14 −0 src/knockback-transitions/css-transition-slide-up.coffee
  73. +23 −0 src/knockback-transitions/css-transition-slide.coffee
  74. +23 −0 src/knockback-transitions/fallback-transition-fade-in.coffee
  75. +1 −1  ...jquery/knockback-transition-helpers.coffee → knockback-transitions/fallback-transition-helpers.coffee}
  76. +24 −0 src/knockback-transitions/fallback-transition-slide-up.coffee
  77. +28 −0 src/knockback-transitions/fallback-transition-slide.coffee
  78. +199 −0 src/knockback-transitions/knockback-transitions.styl
  79. +2 −3 src/{knockback-sample-transitions-jquery → knockback-transitions}/module-loader.js
  80. +37 −0 src/knockback-transitions/transition-helpers.coffee
  81. +30 −0 src/knockback-transitions/transition-saved-state.coffee
  82. +18 −0 src/shared/knockback-page-navigators.css
  83. +18 −0 src/shared/knockback-panes.css
  84. +0 −43 src/shared/knockback-transition-saved-state.coffee
  85. +4 −4 test/knockback-page-navigator-panes/test-amd.coffee
  86. +4 −4 test/knockback-page-navigator-panes/test.coffee
  87. +4 −4 test/knockback-page-navigator-simple/test-amd.coffee
  88. +4 −4 test/knockback-page-navigator-simple/test.coffee
  89. +1 −1  test/packaging/bundle-config.coffee
  90. +1,836 −0 test/vendor/knockback-core-0.16.6.js
  91. +207 −194 test/vendor/knockback-core-0.16.7.js
  92. +7,775 −0 test/vendor/knockback-core-stack-0.16.6.js
  93. +206 −193 test/vendor/knockback-core-stack-0.16.7.js
View
43 Bakefile.coffee
@@ -14,7 +14,6 @@ module.exports =
'src/knockback-pane-navigator/knockout-bindings.coffee'
'src/shared/knockback-page-navigator-helpers.coffee'
'src/shared/knockback-pane.coffee'
- 'src/shared/knockback-transition-saved-state.coffee'
]
knockback_page_navigator_simple:
@@ -39,20 +38,32 @@ module.exports =
'src/knockback-pane-navigator/knockback-pane-navigator-helpers.coffee'
'src/knockback-pane-navigator/knockout-bindings.coffee'
'src/shared/knockback-pane.coffee'
- 'src/shared/knockback-transition-saved-state.coffee'
]
- knockback_sample_transitions_jquery:
- join: 'knockback-sample-transitions-jquery.js'
- wrapper: 'src/knockback-sample-transitions-jquery/module-loader.js'
- output: 'lib'
+ knockback_transitions:
+ join: 'knockback-transitions.js'
+ wrapper: 'src/knockback-transitions/module-loader.js'
compress: true
files: [
- 'src/knockback-sample-transitions-jquery/component-imports.coffee'
- 'src/knockback-sample-transitions-jquery/knockback-transition-helpers.coffee'
- 'src/knockback-sample-transitions-jquery/knockback-transition-cover-vertical.coffee'
- 'src/knockback-sample-transitions-jquery/knockback-transition-fade-in.coffee'
- 'src/knockback-sample-transitions-jquery/knockback-transition-navigation-slide.coffee'
+ 'src/knockback-transitions/component-imports.coffee'
+ 'src/knockback-transitions/transition-helpers.coffee'
+ 'src/knockback-transitions/transition-saved-state.coffee'
+ 'src/knockback-transitions/css-transition-slide-up.coffee'
+ 'src/knockback-transitions/css-transition-fade-in.coffee'
+ 'src/knockback-transitions/css-transition-slide.coffee'
+ 'src/knockback-transitions/fallback-transition-helpers.coffee'
+ 'src/knockback-transitions/fallback-transition-slide-up.coffee'
+ 'src/knockback-transitions/fallback-transition-fade-in.coffee'
+ 'src/knockback-transitions/fallback-transition-slide.coffee'
+ ]
+ commands: [
+ 'stylus --use nib --out . src/knockback-transitions/knockback-transitions.styl'
+ ]
+
+ knockback_navigators_css:
+ commands: [
+ 'cat src/shared/knockback-page-navigators.css src/shared/knockback-panes.css > knockback-navigators.css'
+ 'cp src/knockback-transitions/knockback-transitions.css knockback-transitions.css'
]
publishing:
@@ -71,8 +82,9 @@ module.exports =
'cp knockback-page-navigator-simple.min.js packages/npm/knockback-page-navigator-simple.min.js'
'cp knockback-pane-navigator.js packages/npm/knockback-pane-navigator.js'
'cp knockback-pane-navigator.min.js packages/npm/knockback-pane-navigator.min.js'
- 'cp lib/knockback-sample-transitions-jquery.js packages/npm/lib/knockback-sample-transitions-jquery.js'
- 'cp lib/knockback-sample-transitions-jquery.min.js packages/npm/lib/knockback-sample-transitions-jquery.min.js'
+ 'cp knockback-transitions.js packages/npm/knockback-transitions.js'
+ 'cp knockback-transitions.min.js packages/npm/knockback-transitions.min.js'
+ 'cp knockback-transitions.css packages/npm/knockback-transitions.css'
# nuget
'cp knockback-navigators.css packages/nuget/Content/Scripts/knockback-navigators.css'
@@ -82,8 +94,9 @@ module.exports =
'cp knockback-page-navigator-simple.min.js packages/nuget/Content/Scripts/knockback-page-navigator-simple.min.js'
'cp knockback-pane-navigator.js packages/nuget/Content/Scripts/knockback-pane-navigator.js'
'cp knockback-pane-navigator.min.js packages/nuget/Content/Scripts/knockback-pane-navigator.min.js'
- 'cp lib/knockback-sample-transitions-jquery.js packages/nuget/Content/Scripts/lib/knockback-sample-transitions-jquery.js'
- 'cp lib/knockback-sample-transitions-jquery.min.js packages/nuget/Content/Scripts/lib/knockback-sample-transitions-jquery.min.js'
+ 'cp knockback-transitions.js packages/nuget/Content/Scripts/knockback-transitions.js'
+ 'cp knockback-transitions.min.js packages/nuget/Content/Scripts/knockback-transitions.min.js'
+ 'cp knockback-transitions.css packages/nuget/Content/Scripts/knockback-transitions.css'
]
tests:
View
4 README.md
@@ -24,7 +24,7 @@ Please see the [release notes](https://github.com/kmalakoff/knockback-navigators
**Optional/Non production**
-* knockback-sample-transitions-jquery.js [(min)](https://raw.github.com/kmalakoff/knockback-navigators/0.1.1/lib/knockback-sample-transitions-jquery.js) or [(dev)](https://raw.github.com/kmalakoff/knockback-navigators/0.1.1/lib/knockback-sample-transitions-jquery.min.js)
+* knockback-transitions.js [(min)](https://raw.github.com/kmalakoff/knockback-navigators/0.1.1/lib/knockback-transitions.js) or [(dev)](https://raw.github.com/kmalakoff/knockback-navigators/0.1.1/lib/knockback-transitions.min.js)
If you have some production quality transitions that you'd like to submit to the library, please [let me know](http://kmalakoff.github.com/knockback/issues).
@@ -35,7 +35,7 @@ Knockback-Navigators.js is compatible with RequireJS, CommonJS, Brunch and AMD m
* 'knockback-page-navigator-panes' - knockback-page-navigator-panes.js. Comes bundled with knockback-pane-navigator.js
* 'knockback-page-navigator-simple' - knockback-page-navigator-simple.js.
* 'knockback-pane-navigator-simple' - knockback-pane-navigator.js.
-* 'knockback-sample-transitions-jquery' - knockback-sample-transitions-jquery.js.
+* 'knockback-transitions' - knockback-transitions.js.
### Dependencies
View
5 RELEASE_NOTES.md
@@ -3,12 +3,15 @@ Please refer to the following release notes when upgrading your version of Knock
## 0.1.2
* made pane navigator check for DOM changes using setInterval to ensure an active element is always present.
+* introduced css transitions and renamed sample-transtions-jquery to default-transitions
+* made TransitionSavedState internal to pane navigators and automatically save and restore
+* renamed transition animations: CoverVertical -> SlideUp and NavigationSlide -> Slide
## 0.1.1
* added AMD loader to all components.
* updated kb.loadUrl and added kb.loadUrlFn so they can be called directly from an HTML View
-* renamed knockback-sample-transitions to knockback-sample-transitions-jquery
+* renamed knockback-sample-transitions to knockback-transitions
* XUI bug fixed: reverse on panes and appending source code
## 0.1.0
View
5 examples/pn-nt+_xui.html
@@ -8,6 +8,7 @@
<link rel="stylesheet" href="vendor/normalize.css">
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../knockback-navigators.css">
+ <link rel="stylesheet" href="../knockback-transitions.css">
<style type="text/css">
.cell {height: 120px; width: 120px; background-color: white} /* cell styling */
@@ -39,7 +40,7 @@
<script src="vendor/xui-2.3.2.js"></script>
<script src="../knockback-pane-navigator.js"></script>
- <script src="../lib/knockback-sample-transitions-jquery.js"></script>
+ <script src="..//knockback-transitions.js"></script>
<script type='text/javascript'>
var pane_navigator_el = $('.pane-navigator')[0];
@@ -52,7 +53,7 @@
<!-- ****************** -->
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script type='text/javascript'>
- var el = $('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0];
+ var el = $('<div><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0];
$('body')[0].appendChild(el);
</script>
View
2  examples/pn-nt_zpt.html
@@ -51,7 +51,7 @@
<!-- ****************** -->
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script type='text/javascript'>
- $('body').append($('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
+ $('body').append($('<div><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
</script>
</body>
View
7 examples/pn-t-e_zpt_ko.html
@@ -8,6 +8,7 @@
<link rel="stylesheet" href="vendor/normalize.css">
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../knockback-navigators.css">
+ <link rel="stylesheet" href="../knockback-transitions.css">
<style type="text/css">
.cell {height: 120px; width: 120px; background-color: white} /* cell styling */
@@ -22,7 +23,7 @@
<button class='btn btn-small' data-bind="click: kb.nextPane" data-path='^/.pane-navigator'><i class='icon-step-forward'></i></button>
<div class='cell' style='position: relative'>
- <div class='pane-navigator' data-bind="PaneNavigator: {transition: 'NavigationSlide'}">
+ <div class='pane-navigator' data-bind="PaneNavigator: {transition: 'Slide'}">
<div class='pane cell'>
<p>Pane1</p>
</div>
@@ -40,7 +41,7 @@
<script src="vendor/zepto-1.0rc1.js"></script>
<script src="vendor/knockout-2.1.0.js"></script>
<script src="../knockback-pane-navigator.js"></script>
- <script src="../lib/knockback-sample-transitions-jquery.js"></script>
+ <script src="..//knockback-transitions.js"></script>
<script type='text/javascript'>
ko.applyBindings({});
@@ -50,7 +51,7 @@
<!-- ****************** -->
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script type='text/javascript'>
- $('body').append($('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
+ $('body').append($('<div><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
</script>
</body>
View
7 examples/pn-t_zpt.html
@@ -8,6 +8,7 @@
<link rel="stylesheet" href="vendor/normalize.css">
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../knockback-navigators.css">
+ <link rel="stylesheet" href="../knockback-transitions.css">
<style type="text/css">
.cell {height: 120px; width: 120px; background-color: white} /* cell styling */
@@ -39,11 +40,11 @@
<script src="vendor/zepto-1.0rc1.js"></script>
<script src="../knockback-pane-navigator.js"></script>
- <script src="../lib/knockback-sample-transitions-jquery.js"></script>
+ <script src="..//knockback-transitions.js"></script>
<script type='text/javascript'>
var pane_navigator_el = $('.pane-navigator')[0];
- var pane_navigator = new kb.PaneNavigator(pane_navigator_el, {no_remove: true, transition: 'NavigationSlide'});
+ var pane_navigator = new kb.PaneNavigator(pane_navigator_el, {no_remove: true, transition: 'Slide'});
kb.utils.wrappedPaneNavigator(pane_navigator_el, pane_navigator); // cache the pane_navigator for use by kb. It should be released with kb.utils.wrappedPaneNavigator(pane_navigator_el, null)
pane_navigator.push(new kb.Pane(pane_navigator_el.children[0]));
</script>
@@ -52,7 +53,7 @@
<!-- ****************** -->
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script type='text/javascript'>
- $('body').append($('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
+ $('body').append($('<div><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
</script>
</body>
View
7 examples/pnp-dt_zpt_pth.html
@@ -8,6 +8,7 @@
<link rel="stylesheet" href="vendor/normalize.css">
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../knockback-navigators.css">
+ <link rel="stylesheet" href="../knockback-transitions.css">
</head>
<body>
<a class='btn' href='../index.html#page_navigator_panes' style='position: absolute; z-index: 200'>More Examples</a>
@@ -41,14 +42,14 @@
<script src="vendor/zepto-1.0rc1.js"></script>
<script src="vendor/path-0.8.4.js"></script>
<script src="../knockback-page-navigator-panes.js"></script>
- <script src="../lib/knockback-sample-transitions-jquery.js"></script>
+ <script src="..//knockback-transitions.js"></script>
<script type='text/javascript'>
////////////////////////////////////
// Page Routing and Navigating
// Don't allow pages to be detached since they are owned by the DOM (default is to assume dynamic pages and to therefore detach)
////////////////////////////////////
- var page_navigator = new kb.PageNavigatorPanes($('#app')[0], {no_remove: true, transition: 'CoverVertical'});
+ var page_navigator = new kb.PageNavigatorPanes($('#app')[0], {no_remove: true, transition: 'SlideUp'});
Path.map('').to(page_navigator.dispatcher(function(){
page_navigator.loadPage($('#main')[0]);
}));
@@ -67,7 +68,7 @@
<!-- ****************** -->
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script type='text/javascript'>
- $('body').append($('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
+ $('body').append($('<div><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
</script>
</body>
View
2  examples/pnp-nt-i_xui_pth_kb.html
@@ -70,7 +70,7 @@
<!-- ****************** -->
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script type='text/javascript'>
- var el = $('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0];
+ var el = $('<div><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0];
$('body')[0].appendChild(el);
</script>
View
2  examples/pnp-nt_xui_pth.html
@@ -65,7 +65,7 @@
<!-- ****************** -->
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script type='text/javascript'>
- var el = $('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0];
+ var el = $('<div><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0];
$('body')[0].appendChild(el);
</script>
View
2  examples/pnp-nt_zpt_pth.html
@@ -65,7 +65,7 @@
<!-- ****************** -->
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script type='text/javascript'>
- $('body').append($('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
+ $('body').append($('<div><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
</script>
</body>
View
13 examples/pnp-t-e_jq_kb.html
@@ -8,6 +8,7 @@
<link rel="stylesheet" href="vendor/normalize.css">
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../knockback-navigators.css">
+ <link rel="stylesheet" href="../knockback-transitions.css">
</head>
<body>
<a class='btn' href='../index.html#page_navigator_panes' style='position: absolute; z-index: 200'>More Examples</a>
@@ -32,7 +33,7 @@ <h1 data-bind="text: title"></h1>
<script src="vendor/jquery-1.8.0.js"></script>
<script src="vendor/knockback-core-stack-0.16.7.js"></script>
<script src="../knockback-page-navigator-panes.js"></script>
- <script src="../lib/knockback-sample-transitions-jquery.js"></script>
+ <script src="..//knockback-transitions.js"></script>
<script type='text/javascript'>
////////////////////////////////////
@@ -45,8 +46,8 @@ <h1 data-bind="text: title"></h1>
]);
// Initialize relationships between pages - NOTE: you can use BackboneRelational to automate this at model creation time (of course, this is just an example so you might not use models for your pages)
pages.get('main').set({next: pages.get('page1')});
- pages.get('page1').set({back: pages.get('main'), back_transition: {name: 'NavigationSlide', inverse: true}, next: pages.get('page2')});
- pages.get('page2').set({back: pages.get('page1'), back_transition: {name: 'CoverVertical', inverse: true}});
+ pages.get('page1').set({back: pages.get('main'), back_transition: {name: 'Slide', inverse: true}, next: pages.get('page2')});
+ pages.get('page2').set({back: pages.get('page1'), back_transition: {name: 'SlideUp', inverse: true}});
////////////////////////////////////
// ViewModels
@@ -78,13 +79,13 @@ <h1 data-bind="text: title"></h1>
router.route('page1', null, page_navigator.dispatcher(function(){
page_navigator.loadPage({
el: kb.renderTemplate('page', new PageViewModel(pages.get('page1'))),
- transition: 'NavigationSlide'
+ transition: 'Slide'
});
}));
router.route('page2', null, page_navigator.dispatcher(function(){
page_navigator.loadPage({
el: kb.renderTemplate('page', new PageViewModel(pages.get('page2'))),
- transition: 'CoverVertical'
+ transition: 'SlideUp'
});
}));
}
@@ -97,7 +98,7 @@ <h1 data-bind="text: title"></h1>
<!-- ****************** -->
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script type='text/javascript'>
- $('body').append($('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
+ $('body').append($('<div><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
</script>
</body>
View
13 examples/pnp-t-i_jq_kb.html
@@ -8,6 +8,7 @@
<link rel="stylesheet" href="vendor/normalize.css">
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../knockback-navigators.css">
+ <link rel="stylesheet" href="../knockback-transitions.css">
</head>
<body kb-inject="AppViewModel">
<a class='btn' href='../index.html#page_navigator_panes' style='position: absolute; z-index: 200'>More Examples</a>
@@ -32,7 +33,7 @@ <h1 data-bind="text: title"></h1>
<script src="vendor/jquery-1.8.0.js"></script>
<script src="vendor/knockback-core-stack-0.16.7.js"></script>
<script src="../knockback-page-navigator-panes.js"></script>
- <script src="../lib/knockback-sample-transitions-jquery.js"></script>
+ <script src="..//knockback-transitions.js"></script>
<script type='text/javascript'>
////////////////////////////////////
@@ -59,8 +60,8 @@ <h1 data-bind="text: title"></h1>
]);
// Initialize relationships between pages - NOTE: you can use BackboneRelational to automate this at model creation time (of course, this is just an example so you might not use models for your pages)
pages.get('main').set({next: pages.get('page1')});
- pages.get('page1').set({back: pages.get('main'), back_transition: {name: 'NavigationSlide', inverse: true}, next: pages.get('page2')});
- pages.get('page2').set({back: pages.get('page1'), back_transition: {name: 'CoverVertical', inverse: true}});
+ pages.get('page1').set({back: pages.get('main'), back_transition: {name: 'Slide', inverse: true}, next: pages.get('page2')});
+ pages.get('page2').set({back: pages.get('page1'), back_transition: {name: 'SlideUp', inverse: true}});
////////////////////////////////////
// Page Routing and Navigating
@@ -78,13 +79,13 @@ <h1 data-bind="text: title"></h1>
router.route('page1', null, page_navigator.dispatcher(function(){
page_navigator.loadPage({
el: kb.renderTemplate('page', new PageViewModel(pages.get('page1'))),
- transition: 'NavigationSlide'
+ transition: 'Slide'
});
}));
router.route('page2', null, page_navigator.dispatcher(function(){
page_navigator.loadPage({
el: kb.renderTemplate('page', new PageViewModel(pages.get('page2'))),
- transition: 'CoverVertical'
+ transition: 'SlideUp'
});
}));
};
@@ -99,7 +100,7 @@ <h1 data-bind="text: title"></h1>
<!-- ****************** -->
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script type='text/javascript'>
- $('body').append($('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
+ $('body').append($('<div><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
</script>
</body>
View
9 examples/pnp-t-nh_zpt_pth.html
@@ -8,6 +8,7 @@
<link rel="stylesheet" href="vendor/normalize.css">
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../knockback-navigators.css">
+ <link rel="stylesheet" href="../knockback-transitions.css">
</head>
<body>
<a class='btn' href='../index.html#page_navigator_panes' style='position: absolute; z-index: 200'>More Examples</a>
@@ -41,7 +42,7 @@
<script src="vendor/zepto-1.0rc1.js"></script>
<script src="vendor/path-0.8.4.js"></script>
<script src="../knockback-page-navigator-panes.js"></script>
- <script src="../lib/knockback-sample-transitions-jquery.js"></script>
+ <script src="..//knockback-transitions.js"></script>
<script type='text/javascript'>
////////////////////////////////////
@@ -53,10 +54,10 @@
page_navigator.loadPage({el: $('#main')[0], transition: 'FadeIn'});
}));
Path.map('#page1').to(page_navigator.dispatcher(function(){
- page_navigator.loadPage({el: $('#page1')[0], transition: 'NavigationSlide'});
+ page_navigator.loadPage({el: $('#page1')[0], transition: 'Slide'});
}));
Path.map('#page2').to(page_navigator.dispatcher(function(){
- page_navigator.loadPage({el: $('#page2')[0], transition: 'CoverVertical'});
+ page_navigator.loadPage({el: $('#page2')[0], transition: 'SlideUp'});
}));
Path.listen();
Path.dispatch(window.location.hash);
@@ -67,7 +68,7 @@
<!-- ****************** -->
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script type='text/javascript'>
- $('body').append($('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
+ $('body').append($('<div><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
</script>
</body>
View
13 examples/pnp-t_jq_kb.html
@@ -8,6 +8,7 @@
<link rel="stylesheet" href="vendor/normalize.css">
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../knockback-navigators.css">
+ <link rel="stylesheet" href="../knockback-transitions.css">
</head>
<body>
<a class='btn' href='../index.html#page_navigator_panes' style='position: absolute; z-index: 200'>More Examples</a>
@@ -32,7 +33,7 @@ <h1 data-bind="text: title"></h1>
<script src="vendor/jquery-1.8.0.js"></script>
<script src="vendor/knockback-core-stack-0.16.7.js"></script>
<script src="../knockback-page-navigator-panes.js"></script>
- <script src="../lib/knockback-sample-transitions-jquery.js"></script>
+ <script src="..//knockback-transitions.js"></script>
<script type='text/javascript'>
////////////////////////////////////
@@ -45,8 +46,8 @@ <h1 data-bind="text: title"></h1>
]);
// Initialize relationships between pages - NOTE: you can use BackboneRelational to automate this at model creation time (of course, this is just an example so you might not use models for your pages)
pages.get('main').set({next: pages.get('page1')});
- pages.get('page1').set({back: pages.get('main'), back_transition: {name: 'NavigationSlide', inverse: true}, next: pages.get('page2')});
- pages.get('page2').set({back: pages.get('page1'), back_transition: {name: 'CoverVertical', inverse: true}});
+ pages.get('page1').set({back: pages.get('main'), back_transition: {name: 'Slide', inverse: true}, next: pages.get('page2')});
+ pages.get('page2').set({back: pages.get('page1'), back_transition: {name: 'SlideUp', inverse: true}});
////////////////////////////////////
// ViewModels
@@ -76,13 +77,13 @@ <h1 data-bind="text: title"></h1>
router.route('page1', null, page_navigator.dispatcher(function(){
page_navigator.loadPage({
create: function() { return kb.renderTemplate('page', new PageViewModel(pages.get('page1'))) },
- transition: 'NavigationSlide'
+ transition: 'Slide'
});
}));
router.route('page2', null, page_navigator.dispatcher(function(){
page_navigator.loadPage({
el: kb.renderTemplate('page', new PageViewModel(pages.get('page2'))),
- transition: 'CoverVertical'
+ transition: 'SlideUp'
});
}));
Backbone.history.start({hashChange: true});
@@ -93,7 +94,7 @@ <h1 data-bind="text: title"></h1>
<!-- ****************** -->
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script type='text/javascript'>
- $('body').append($('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
+ $('body').append($('<div><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
</script>
</body>
View
9 examples/pnp-t_zpt_bb.html
@@ -8,6 +8,7 @@
<link rel="stylesheet" href="vendor/normalize.css">
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../knockback-navigators.css">
+ <link rel="stylesheet" href="../knockback-transitions.css">
</head>
<body>
<a class='btn' href='../index.html#page_navigator_panes' style='position: absolute; z-index: 200'>More Examples</a>
@@ -42,7 +43,7 @@
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script src="vendor/backbone/backbone-0.9.2.js"></script>
<script src="../knockback-page-navigator-panes.js"></script>
- <script src="../lib/knockback-sample-transitions-jquery.js"></script>
+ <script src="..//knockback-transitions.js"></script>
<script type='text/javascript'>
////////////////////////////////////
@@ -55,10 +56,10 @@
page_navigator.loadPage({el: $('#main')[0], transition: 'FadeIn'});
}));
router.route('page1', null, page_navigator.dispatcher(function(){
- page_navigator.loadPage({el: $('#page1')[0], transition: 'NavigationSlide'});
+ page_navigator.loadPage({el: $('#page1')[0], transition: 'Slide'});
}));
router.route('page2', null, page_navigator.dispatcher(function(){
- page_navigator.loadPage({el: $('#page2')[0], transition: 'CoverVertical'});
+ page_navigator.loadPage({el: $('#page2')[0], transition: 'SlideUp'});
}));
Backbone.history.start({hashChange: true});
@@ -68,7 +69,7 @@
<!-- ****************** -->
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script type='text/javascript'>
- $('body').append($('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
+ $('body').append($('<div><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
</script>
</body>
View
13 examples/pnp-t_zpt_kb.html
@@ -8,6 +8,7 @@
<link rel="stylesheet" href="vendor/normalize.css">
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../knockback-navigators.css">
+ <link rel="stylesheet" href="../knockback-transitions.css">
</head>
<body>
<a class='btn' href='../index.html#page_navigator_panes' style='position: absolute; z-index: 200'>More Examples</a>
@@ -32,7 +33,7 @@ <h1 data-bind="text: title"></h1>
<script src="vendor/zepto-1.0rc1.js"></script>
<script src="vendor/knockback-core-stack-0.16.7.js"></script>
<script src="../knockback-page-navigator-panes.js"></script>
- <script src="../lib/knockback-sample-transitions-jquery.js"></script>
+ <script src="..//knockback-transitions.js"></script>
<script type='text/javascript'>
////////////////////////////////////
@@ -45,8 +46,8 @@ <h1 data-bind="text: title"></h1>
]);
// Initialize relationships between pages - NOTE: you can use BackboneRelational to automate this at model creation time (of course, this is just an example so you might not use models for your pages)
pages.get('main').set({next: pages.get('page1')});
- pages.get('page1').set({back: pages.get('main'), back_transition: {name: 'NavigationSlide', inverse: true}, next: pages.get('page2')});
- pages.get('page2').set({back: pages.get('page1'), back_transition: {name: 'CoverVertical', inverse: true}});
+ pages.get('page1').set({back: pages.get('main'), back_transition: {name: 'Slide', inverse: true}, next: pages.get('page2')});
+ pages.get('page2').set({back: pages.get('page1'), back_transition: {name: 'SlideUp', inverse: true}});
////////////////////////////////////
// ViewModels
@@ -75,10 +76,10 @@ <h1 data-bind="text: title"></h1>
page_navigator.loadPage({el: $('#main')[0], transition: 'FadeIn'});
}));
router.route('page1', null, page_navigator.dispatcher(function(){
- page_navigator.loadPage({el: $('#page1')[0], transition: 'NavigationSlide'});
+ page_navigator.loadPage({el: $('#page1')[0], transition: 'Slide'});
}));
router.route('page2', null, page_navigator.dispatcher(function(){
- page_navigator.loadPage({el: $('#page2')[0], transition: 'CoverVertical'});
+ page_navigator.loadPage({el: $('#page2')[0], transition: 'SlideUp'});
}));
Backbone.history.start({hashChange: true});
@@ -88,7 +89,7 @@ <h1 data-bind="text: title"></h1>
<!-- ****************** -->
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script type='text/javascript'>
- $('body').append($('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
+ $('body').append($('<div><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
</script>
</body>
View
9 examples/pnp-t_zpt_pth.html
@@ -8,6 +8,7 @@
<link rel="stylesheet" href="vendor/normalize.css">
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../knockback-navigators.css">
+ <link rel="stylesheet" href="../knockback-transitions.css">
</head>
<body>
<a class='btn' href='../index.html#page_navigator_panes' style='position: absolute; z-index: 200'>More Examples</a>
@@ -41,7 +42,7 @@
<script src="vendor/zepto-1.0rc1.js"></script>
<script src="vendor/path-0.8.4.js"></script>
<script src="../knockback-page-navigator-panes.js"></script>
- <script src="../lib/knockback-sample-transitions-jquery.js"></script>
+ <script src="..//knockback-transitions.js"></script>
<script type='text/javascript'>
////////////////////////////////////
@@ -53,10 +54,10 @@
page_navigator.loadPage({el: $('#main')[0], transition: 'FadeIn'});
}));
Path.map('#page1').to(page_navigator.dispatcher(function(){
- page_navigator.loadPage({el: $('#page1')[0], transition: 'NavigationSlide'});
+ page_navigator.loadPage({el: $('#page1')[0], transition: 'Slide'});
}));
Path.map('#page2').to(page_navigator.dispatcher(function(){
- page_navigator.loadPage({el: $('#page2')[0], transition: 'CoverVertical'});
+ page_navigator.loadPage({el: $('#page2')[0], transition: 'SlideUp'});
}));
Path.listen();
Path.dispatch(window.location.hash);
@@ -67,7 +68,7 @@
<!-- ****************** -->
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script type='text/javascript'>
- $('body').append($('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
+ $('body').append($('<div><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
</script>
</body>
View
13 examples/pnp-t_zpt_pth_ko.html
@@ -8,6 +8,7 @@
<link rel="stylesheet" href="vendor/normalize.css">
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../knockback-navigators.css">
+ <link rel="stylesheet" href="../knockback-transitions.css">
</head>
<body>
<a class='btn' href='../index.html#page_navigator_panes' style='position: absolute; z-index: 200'>More Examples</a>
@@ -33,7 +34,7 @@ <h1 data-bind="text: title"></h1>
<script src="vendor/path-0.8.4.js"></script>
<script src="vendor/knockout-2.1.0.js"></script>
<script src="../knockback-page-navigator-panes.js"></script>
- <script src="../lib/knockback-sample-transitions-jquery.js"></script>
+ <script src="..//knockback-transitions.js"></script>
<script type='text/javascript'>
////////////////////////////////////
@@ -42,8 +43,8 @@ <h1 data-bind="text: title"></h1>
var app_view_model = {
pages: ko.observableArray([
{title: 'Main', id: 'main', href: '#'},
- {title: 'Page1', id: 'page1', href: '#page1', back_transition: {name: 'NavigationSlide', inverse: true}},
- {title: 'Page2', id: 'page2', href: '#page2', back_transition: {name: 'CoverVertical', inverse: true}}
+ {title: 'Page1', id: 'page1', href: '#page1', back_transition: {name: 'Slide', inverse: true}},
+ {title: 'Page2', id: 'page2', href: '#page2', back_transition: {name: 'SlideUp', inverse: true}}
])
};
// Initialize relationships between pages
@@ -62,10 +63,10 @@ <h1 data-bind="text: title"></h1>
page_navigator.loadPage({el: $('#main')[0], transition: 'FadeIn'});
}));
Path.map('#page1').to(page_navigator.dispatcher(function(){
- page_navigator.loadPage({el: $('#page1')[0], transition: 'NavigationSlide'});
+ page_navigator.loadPage({el: $('#page1')[0], transition: 'Slide'});
}));
Path.map('#page2').to(page_navigator.dispatcher(function(){
- page_navigator.loadPage({el: $('#page2')[0], transition: 'CoverVertical'});
+ page_navigator.loadPage({el: $('#page2')[0], transition: 'SlideUp'});
}));
Path.listen();
Path.dispatch(window.location.hash);
@@ -76,7 +77,7 @@ <h1 data-bind="text: title"></h1>
<!-- ****************** -->
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script type='text/javascript'>
- $('body').append($('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
+ $('body').append($('<div><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
</script>
</body>
View
6 examples/pns-e_jq_kb.html
@@ -44,8 +44,8 @@ <h1 data-bind="text: title"></h1>
]);
// Initialize relationships between pages - NOTE: you can use BackboneRelational to automate this at model creation time (of course, this is just an example so you might not use models for your pages)
pages.get('main').set({next: pages.get('page1')});
- pages.get('page1').set({back: pages.get('main'), back_transition: {name: 'NavigationSlide', inverse: true}, next: pages.get('page2')});
- pages.get('page2').set({back: pages.get('page1'), back_transition: {name: 'CoverVertical', inverse: true}});
+ pages.get('page1').set({back: pages.get('main'), back_transition: {name: 'Slide', inverse: true}, next: pages.get('page2')});
+ pages.get('page2').set({back: pages.get('page1'), back_transition: {name: 'SlideUp', inverse: true}});
////////////////////////////////////
// ViewModels
@@ -87,7 +87,7 @@ <h1 data-bind="text: title"></h1>
<!-- ****************** -->
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script type='text/javascript'>
- $('body').append($('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
+ $('body').append($('<div><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
</script>
</body>
View
6 examples/pns-i_zpt_kb.html
@@ -57,8 +57,8 @@ <h1 data-bind="text: title"></h1>
]);
// Initialize relationships between pages - NOTE: you can use BackboneRelational to automate this at model creation time (of course, this is just an example so you might not use models for your pages)
pages.get('main').set({next: pages.get('page1')});
- pages.get('page1').set({back: pages.get('main'), back_transition: {name: 'NavigationSlide', inverse: true}, next: pages.get('page2')});
- pages.get('page2').set({back: pages.get('page1'), back_transition: {name: 'CoverVertical', inverse: true}});
+ pages.get('page1').set({back: pages.get('main'), back_transition: {name: 'Slide', inverse: true}, next: pages.get('page2')});
+ pages.get('page2').set({back: pages.get('page1'), back_transition: {name: 'SlideUp', inverse: true}});
this.pages = kb.collectionObservable(pages, {view_model: PageViewModel});
@@ -88,7 +88,7 @@ <h1 data-bind="text: title"></h1>
<!-- ****************** -->
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script type='text/javascript'>
- $('body').append($('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
+ $('body').append($('<div><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
</script>
</body>
View
6 examples/pns_jq_kb.html
@@ -44,8 +44,8 @@ <h1 data-bind="text: title"></h1>
]);
// Initialize relationships between pages - NOTE: you can use BackboneRelational to automate this at model creation time (of course, this is just an example so you might not use models for your pages)
pages.get('main').set({next: pages.get('page1')});
- pages.get('page1').set({back: pages.get('main'), back_transition: {name: 'NavigationSlide', inverse: true}, next: pages.get('page2')});
- pages.get('page2').set({back: pages.get('page1'), back_transition: {name: 'CoverVertical', inverse: true}});
+ pages.get('page1').set({back: pages.get('main'), back_transition: {name: 'Slide', inverse: true}, next: pages.get('page2')});
+ pages.get('page2').set({back: pages.get('page1'), back_transition: {name: 'SlideUp', inverse: true}});
////////////////////////////////////
// ViewModels
@@ -83,7 +83,7 @@ <h1 data-bind="text: title"></h1>
<!-- ****************** -->
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script type='text/javascript'>
- $('body').append($('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
+ $('body').append($('<div><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
</script>
</body>
View
2  examples/pns_zpt_bb.html
@@ -67,7 +67,7 @@
<!-- ****************** -->
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script type='text/javascript'>
- $('body').append($('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
+ $('body').append($('<div><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
</script>
</body>
View
6 examples/pns_zpt_kb.html
@@ -44,8 +44,8 @@ <h1 data-bind="text: title"></h1>
]);
// Initialize relationships between pages - NOTE: you can use BackboneRelational to automate this at model creation time (of course, this is just an example so you might not use models for your pages)
pages.get('main').set({next: pages.get('page1')});
- pages.get('page1').set({back: pages.get('main'), back_transition: {name: 'NavigationSlide', inverse: true}, next: pages.get('page2')});
- pages.get('page2').set({back: pages.get('page1'), back_transition: {name: 'CoverVertical', inverse: true}});
+ pages.get('page1').set({back: pages.get('main'), back_transition: {name: 'Slide', inverse: true}, next: pages.get('page2')});
+ pages.get('page2').set({back: pages.get('page1'), back_transition: {name: 'SlideUp', inverse: true}});
////////////////////////////////////
// ViewModels
@@ -87,7 +87,7 @@ <h1 data-bind="text: title"></h1>
<!-- ****************** -->
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script type='text/javascript'>
- $('body').append($('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
+ $('body').append($('<div><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
</script>
</body>
View
2  examples/pns_zpt_pth.html
@@ -66,7 +66,7 @@
<!-- ****************** -->
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script type='text/javascript'>
- $('body').append($('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
+ $('body').append($('<div><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
</script>
</body>
View
6 examples/pns_zpt_pth_ko.html
@@ -41,8 +41,8 @@ <h1 data-bind="text: title"></h1>
var app_view_model = {
pages: ko.observableArray([
{title: 'Main', id: 'main', href: '#'},
- {title: 'Page1', id: 'page1', href: '#page1', back_transition: {name: 'NavigationSlide', inverse: true}},
- {title: 'Page2', id: 'page2', href: '#page2', back_transition: {name: 'CoverVertical', inverse: true}}
+ {title: 'Page1', id: 'page1', href: '#page1', back_transition: {name: 'Slide', inverse: true}},
+ {title: 'Page2', id: 'page2', href: '#page2', back_transition: {name: 'SlideUp', inverse: true}}
])
};
// Initialize relationships between pages
@@ -75,7 +75,7 @@ <h1 data-bind="text: title"></h1>
<!-- ****************** -->
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script type='text/javascript'>
- $('body').append($('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
+ $('body').append($('<div><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
</script>
</body>
View
399 examples/vendor/knockback-core-stack-0.16.7.js
@@ -5963,7 +5963,7 @@ ko.exportSymbol('nativeTemplateEngine', ko.nativeTemplateEngine);
Dependencies: Knockout.js, Backbone.js, and Underscore.js.
*/
-var Backbone, KB_TYPE_ARRAY, KB_TYPE_COLLECTION, KB_TYPE_MODEL, KB_TYPE_SIMPLE, KB_TYPE_UNKNOWN, addStatisticsEvent, arraySplice, buildEvalWithinScopeFunction, collapseOptions, kb, ko, legacyWarning, onReady, throwMissing, throwUnexpected, _, _argumentsAddKey, _unwrapModels, _wrappedKey,
+var Backbone, KB_TYPE_ARRAY, KB_TYPE_COLLECTION, KB_TYPE_MODEL, KB_TYPE_SIMPLE, KB_TYPE_UNKNOWN, addStatisticsEvent, arraySplice, collapseOptions, kb, ko, legacyWarning, onReady, throwMissing, throwUnexpected, _, _argumentsAddKey, _unwrapModels, _wrappedKey,
__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
kb = (function() {
@@ -6172,7 +6172,8 @@ _unwrapModels = function(obj) {
var key, result, value;
if (!obj) {
return obj;
- } else if (obj.__kb) {
+ }
+ if (obj.__kb) {
if ('object' in obj.__kb) {
return obj.__kb.object;
} else {
@@ -6182,16 +6183,15 @@ _unwrapModels = function(obj) {
return _.map(obj, function(test) {
return _unwrapModels(test);
});
- } else if (_.isObject(obj) && !ko.isObservable(obj) && !_.isDate(obj) && !_.isString(obj)) {
+ } else if (_.isObject(obj) && (obj.constructor === {}.constructor)) {
result = {};
for (key in obj) {
value = obj[key];
result[key] = _unwrapModels(value);
}
return result;
- } else {
- return obj;
}
+ return obj;
};
kb.utils = (function() {
@@ -6475,9 +6475,7 @@ kb.Store = (function() {
return;
}
kb.utils.wrappedObject(observable, obj);
- if (!obj) {
- observable.__kb_null = true;
- }
+ options.no_share || obj || (observable.__kb_null = true);
creator = options.creator ? options.creator : (options.path && options.factory ? options.factory.creatorForPath(obj, options.path) : null);
if (!creator) {
creator = observable.constructor;
@@ -6873,9 +6871,10 @@ kb.Observable = (function() {
model_watcher = create_options.model_watcher;
delete create_options.model_watcher;
this.vo = ko.observable(null);
+ this._mdl = ko.observable();
observable = kb.utils.wrappedObservable(this, ko.dependentObservable({
read: function() {
- var arg, args, new_value, _i, _len, _ref;
+ var arg, args, current_model, new_value, _i, _len, _ref;
args = [ko.utils.unwrapObservable(_this.key)];
if (_this.args) {
if (_.isArray(_this.args)) {
@@ -6888,14 +6887,14 @@ kb.Observable = (function() {
args.push(ko.utils.unwrapObservable(_this.args));
}
}
- if (_this.m) {
- new_value = _this.read ? _this.read.apply(_this.vm, args) : _this.m.get.apply(_this.m, args);
+ if ((current_model = _this._mdl())) {
+ new_value = _this.read ? _this.read.apply(_this.vm, args) : current_model.get.apply(current_model, args);
_this.update(new_value);
}
return ko.utils.unwrapObservable(_this.vo());
},
write: function(new_value) {
- var arg, args, set_info, unwrapped_new_value, _i, _len, _ref;
+ var arg, args, current_model, set_info, unwrapped_new_value, _i, _len, _ref;
unwrapped_new_value = _unwrapModels(new_value);
set_info = {};
set_info[ko.utils.unwrapObservable(_this.key)] = unwrapped_new_value;
@@ -6911,11 +6910,11 @@ kb.Observable = (function() {
args.push(ko.utils.unwrapObservable(_this.args));
}
}
- if (_this.m) {
+ if ((current_model = _this._mdl())) {
if (_this.write) {
_this.write.apply(_this.vm, args);
} else {
- _this.m.set.apply(_this.m, args);
+ current_model.set.apply(current_model, args);
}
}
return _this.update(new_value);
@@ -6935,10 +6934,22 @@ kb.Observable = (function() {
observable.value = _.bind(this.value, this);
observable.valueType = _.bind(this.valueType, this);
observable.destroy = _.bind(this.destroy, this);
+ observable.model = this.model = ko.dependentObservable({
+ read: function() {
+ return _this._mdl();
+ },
+ write: function(new_model) {
+ if (_this.__kb_destroyed || (_this._mdl() === new_model)) {
+ return;
+ }
+ _this._mdl(new_model);
+ return _this.update();
+ }
+ });
kb.ModelWatcher.useOptionsOrCreate({
model_watcher: model_watcher
}, model, this, {
- model: _.bind(this.model, this),
+ model: this.model,
update: _.bind(this.update, this),
key: this.key,
path: create_options.path
@@ -6956,11 +6967,13 @@ kb.Observable = (function() {
}
Observable.prototype.destroy = function() {
+ var observable;
+ observable = kb.utils.wrappedObservable(this);
this.__kb_destroyed = true;
kb.release(this.__kb_value);
this.__kb_value = null;
- this.vm = null;
- this.create_options = null;
+ this.model.dispose();
+ observable.model = null;
return kb.utils.wrappedDestroy(this);
};
@@ -6969,30 +6982,19 @@ kb.Observable = (function() {
};
Observable.prototype.valueType = function() {
- var new_value;
- new_value = this.m ? this.m.get(this.key) : null;
+ var model, new_value;
+ new_value = (model = this._mdl()) ? model.get(this.key) : null;
this.value_type || this._updateValueObservable(new_value);
return this.value_type;
};
- Observable.prototype.model = function(new_model) {
- if (this.__kb_destroyed) {
- return;
- }
- if ((arguments.length === 0) || (this.m === new_model)) {
- return this.m;
- }
- this.m = new_model;
- return this.update();
- };
-
Observable.prototype.update = function(new_value) {
- var new_type, value;
+ var model, new_type, value;
if (this.__kb_destroyed) {
return;
}
- if (this.m && !arguments.length) {
- new_value = this.m.get(ko.utils.unwrapObservable(this.key));
+ if ((model = this._mdl()) && !arguments.length) {
+ new_value = model.get(ko.utils.unwrapObservable(this.key));
}
(new_value !== void 0) || (new_value = null);
new_type = kb.utils.valueType(new_value);
@@ -7029,7 +7031,7 @@ kb.Observable = (function() {
Observable.prototype._updateValueObservable = function(new_value) {
var create_options, creator, previous_value, value;
create_options = this.create_options;
- create_options.creator = kb.utils.inferCreator(new_value, create_options.factory, create_options.path, this.m, this.key);
+ create_options.creator = kb.utils.inferCreator(new_value, create_options.factory, create_options.path, this._mdl(), this.key);
this.value_type = KB_TYPE_UNKNOWN;
creator = create_options.creator;
previous_value = this.__kb_value;
@@ -7097,7 +7099,8 @@ kb.ViewModel = (function() {
ViewModel.extend = Backbone.Model.extend;
function ViewModel(model, options, view_model) {
- var attribute_keys, bb_model, keys, mapped_keys, mapping_info, model_watcher, vm_key, _ref;
+ var attribute_keys, bb_model, keys, mapped_keys, mapping_info, model_watcher, vm_key, _mdl, _ref,
+ _this = this;
!model || (model instanceof Backbone.Model) || ((typeof model.get === 'function') && (typeof model.bind === 'function')) || throwUnexpected(this, 'not a model');
options || (options = {});
view_model || (view_model = {});
@@ -7117,8 +7120,39 @@ kb.ViewModel = (function() {
kb.Store.useOptionsOrCreate(options, model, this);
this.__kb.path = options.path;
kb.Factory.useOptionsOrCreate(options, this, options.path);
+ _mdl = _wrappedKey(this, '_mdl', ko.observable());
+ this.model = ko.dependentObservable({
+ read: function() {
+ _mdl();
+ return kb.utils.wrappedObject(_this);
+ },
+ write: function(new_model) {
+ var missing, model_watcher;
+ if (kb.utils.wrappedObject(_this) === new_model) {
+ return;
+ }
+ if (_this.__kb_null) {
+ !new_model || throwUnexpected(_this, 'model set on shared null');
+ return;
+ }
+ kb.utils.wrappedObject(_this, new_model);
+ _mdl(new_model);
+ model_watcher = kb.utils.wrappedModelWatcher(_this);
+ if (!model_watcher) {
+ return;
+ }
+ model_watcher.model(new_model);
+ if (_this.__kb.keys || !new_model || !new_model.attributes) {
+ return;
+ }
+ missing = _.difference(_.keys(new_model.attributes), _.keys(_this.__kb.model_keys));
+ if (missing) {
+ return _this._createObservables(new_model, missing);
+ }
+ }
+ });
model_watcher = kb.utils.wrappedModelWatcher(this, new kb.ModelWatcher(model, this, {
- model: _.bind(this.model, this)
+ model: this.model
}));
if (options.requires && _.isArray(options.requires)) {
keys = _.clone(options.requires);
@@ -7180,31 +7214,6 @@ kb.ViewModel = (function() {
};
};
- ViewModel.prototype.model = function(new_model) {
- var missing, model, model_watcher;
- model = kb.utils.wrappedObject(this);
- if ((arguments.length === 0) || (model === new_model)) {
- return model;
- }
- if (this.__kb_null) {
- !new_model || throwUnexpected(this, 'model set on shared null');
- return;
- }
- kb.utils.wrappedObject(this, new_model);
- model_watcher = kb.utils.wrappedModelWatcher(this);
- if (!model_watcher) {
- return;
- }
- model_watcher.model(new_model);
- if (this.__kb.keys || !new_model || !new_model.attributes) {
- return;
- }
- missing = _.difference(_.keys(new_model.attributes), _.keys(this.__kb.model_keys));
- if (missing) {
- return this._createObservables(new_model, missing);
- }
- };
-
ViewModel.prototype._createObservables = function(model, keys) {
var create_options, key, vm_key, _i, _len;
create_options = {
@@ -7312,26 +7321,45 @@ kb.CollectionObservable = (function() {
}
observable.destroy = _.bind(this.destroy, this);
observable.shareOptions = _.bind(this.shareOptions, this);
- observable.collection = _.bind(this.collection, this);
observable.viewModelByModel = _.bind(this.viewModelByModel, this);
observable.sortedIndex = _.bind(this.sortedIndex, this);
observable.sortAttribute = _.bind(this.sortAttribute, this);
observable.hasViewModels = _.bind(this.hasViewModels, this);
- this._col = ko.observable();
- this.collection(collection);
+ this._col = ko.observable(collection);
+ observable.collection = this.collection = ko.dependentObservable({
+ read: function() {
+ return _this._col();
+ },
+ write: function(new_collection) {
+ var previous_collection;
+ if ((previous_collection = _this._col()) === new_collection) {
+ return;
+ }
+ _this._col(new_collection);
+ if (previous_collection) {
+ previous_collection.unbind('all', _this.__kb._onCollectionChange);
+ }
+ if (new_collection) {
+ return new_collection.bind('all', _this.__kb._onCollectionChange);
+ }
+ }
+ });
+ if (collection) {
+ collection.bind('all', this.__kb._onCollectionChange);
+ }
this._mapper = ko.dependentObservable(function() {
- var filters, model, models, sorted_index_fn, view_model, view_models, _i, _len;
+ var current_collection, filters, model, models, sorted_index_fn, view_model, view_models, _i, _len;
if (_this.in_edit) {
return;
}
observable = kb.utils.wrappedObservable(_this);
- collection = _this._col();
- if (collection) {
- models = collection.models;
+ current_collection = _this._col();
+ if (current_collection) {
+ models = current_collection.models;
}
sorted_index_fn = _this.sorted_index_fn();
filters = _this.filters();
- if (!models || (collection.models.length === 0)) {
+ if (!models || (current_collection.models.length === 0)) {
view_models = [];
} else {
if (filters.length) {
@@ -7374,8 +7402,10 @@ kb.CollectionObservable = (function() {
array = observable();
array.splice(0, array.length);
}
+ this._mapper.dispose();
+ this.collection.dispose();
kb.release(this.filters);
- this.filters = this._col = this.sorted_index_fn = this._mapper = this.create_options = null;
+ observable.collection = null;
kb.utils.wrappedDestroy(this);
return !kb.statistics || kb.statistics.unregister('CollectionObservable', this);
};
@@ -7389,24 +7419,6 @@ kb.CollectionObservable = (function() {
};
};
- CollectionObservable.prototype.collection = function(collection) {
- var observable, previous_collection;
- observable = kb.utils.wrappedObservable(this);
- previous_collection = this._col();
- if ((arguments.length === 0) || (collection === previous_collection)) {
- observable();
- return previous_collection;
- }
- if (previous_collection) {
- previous_collection.unbind('all', this.__kb._onCollectionChange);
- }
- if (collection) {
- collection.bind('all', this.__kb._onCollectionChange);
- }
- this._col(collection);
- return collection;
- };
-
CollectionObservable.prototype.filters = function(filters) {
if (filters) {
return this.filters(_.isArray(filters) ? filters : [filters]);
@@ -7551,43 +7563,44 @@ kb.CollectionObservable = (function() {
return this.in_edit--;
};
- CollectionObservable.prototype._onObservableArrayChange = function(values) {
- var collection, has_view_model, models, observable, value, _i, _j, _len, _len1,
+ CollectionObservable.prototype._onObservableArrayChange = function(models) {
+ var collection, has_view_models, observable, value, _i, _j, _len, _len1,
_this = this;
if (this.in_edit) {
return;
}
observable = kb.utils.wrappedObservable(this);
collection = this._col();
- if (!collection) {
+ if (!collection || (collection.models === models)) {
return;
}
if (!this.models_only) {
- for (_i = 0, _len = values.length; _i < _len; _i++) {
- value = values[_i];
- if (value && !(value instanceof Backbone.Model)) {
- has_view_model = true;
- break;
+ for (_i = 0, _len = models.length; _i < _len; _i++) {
+ value = models[_i];
+ if (!value) {
+ continue;
}
+ has_view_models = !(value instanceof Backbone.Model);
+ break;
}
- if (has_view_model) {
- for (_j = 0, _len1 = values.length; _j < _len1; _j++) {
- value = values[_j];
+ if (has_view_models) {
+ for (_j = 0, _len1 = models.length; _j < _len1; _j++) {
+ value = models[_j];
this.create_options.store.findOrReplace(kb.utils.wrappedObject(value), this.create_options.creator, value);
}
+ models = _.map(models, function(test) {
+ return kb.utils.wrappedObject(test);
+ });
}
}
- models = _.map(values, function(test) {
- return kb.utils.wrappedModel(test);
- });
if (this.filters().length) {
models = _.filter(models, function(model) {
return !_this._modelIsFiltered(model);
});
}
- this.in_edit++;
+ !has_view_models || this.in_edit++;
collection.reset(models);
- this.in_edit--;
+ !has_view_models || this.in_edit--;
};
CollectionObservable.prototype._sortAttributeFn = function(sort_attribute) {
@@ -7656,108 +7669,108 @@ kb.sortedIndexWrapAttr = kb.siwa = function(attribute_name, wrapper_constructor)
*/
-buildEvalWithinScopeFunction = function(expression, scopeLevels) {
- var functionBody, i;
- functionBody = "return ( " + expression + " )";
- i = -1;
- while (++i < scopeLevels) {
- functionBody = "with(sc[" + i + "]) { " + functionBody + " }";
- }
- return new Function("sc", functionBody);
-};
-
ko.bindingHandlers['inject'] = {
'init': function(element, value_accessor, all_bindings_accessor, view_model) {
- return kb.inject(ko.utils.unwrapObservable(value_accessor()), view_model, element, value_accessor, all_bindings_accessor);
+ return kb.Inject.inject(ko.utils.unwrapObservable(value_accessor()), view_model, element, value_accessor, all_bindings_accessor);
}
};
-kb.inject = function(data, view_model, element, value_accessor, all_bindings_accessor, nested) {
- var inject, result, wrapper;
- inject = function(data) {
- var key, target, value;
- if (_.isFunction(data)) {
- view_model = new data(view_model, element, value_accessor, all_bindings_accessor);
- kb.releaseOnNodeRemove(view_model, element);
- } else {
- if (data.view_model) {
- view_model = new data.view_model(view_model, element, value_accessor, all_bindings_accessor);
+kb.Inject = (function() {
+
+ function Inject() {}
+
+ Inject.inject = function(data, view_model, element, value_accessor, all_bindings_accessor, nested) {
+ var inject, result, wrapper;
+ inject = function(data) {
+ var key, target, value;
+ if (_.isFunction(data)) {
+ view_model = new data(view_model, element, value_accessor, all_bindings_accessor);
kb.releaseOnNodeRemove(view_model, element);
- }
- for (key in data) {
- value = data[key];
- if (key === 'view_model') {
- continue;
- }
- if (key === 'create') {
- value(view_model, element, value_accessor, all_bindings_accessor);
- } else if (_.isObject(value) && !_.isFunction(value)) {
- target = nested || (value && value.create) ? {} : view_model;
- view_model[key] = kb.inject(value, target, element, value_accessor, all_bindings_accessor, true);
- } else {
- view_model[key] = value;
+ } else {
+ if (data.view_model) {
+ view_model = new data.view_model(view_model, element, value_accessor, all_bindings_accessor);
+ kb.releaseOnNodeRemove(view_model, element);
+ }
+ for (key in data) {
+ value = data[key];
+ if (key === 'view_model') {
+ continue;
+ }
+ if (key === 'create') {
+ value(view_model, element, value_accessor, all_bindings_accessor);
+ } else if (_.isObject(value) && !_.isFunction(value)) {
+ target = nested || (value && value.create) ? {} : view_model;
+ view_model[key] = kb.Inject.inject(value, target, element, value_accessor, all_bindings_accessor, true);
+ } else {
+ view_model[key] = value;
+ }
}
}
+ return view_model;
+ };
+ if (nested) {
+ return inject(data);
+ } else {
+ result = (wrapper = ko.dependentObservable(function() {
+ return inject(data);
+ }))();
+ wrapper.dispose();
+ return result;
}
- return view_model;
};
- if (nested) {
- return inject(data);
- } else {
- result = (wrapper = ko.dependentObservable(function() {
- return inject(data);
- }))();
- wrapper.dispose();
- return result;
- }
-};
-kb.injectViewModels = function(root) {
- var afterBinding, app, beforeBinding, data, expression, findElements, options, results, _i, _len;
- results = [];
- findElements = function(el) {
- var attr, child_el, _i, _len, _ref;
- if (!el.__kb_injected) {
- if (el.attributes && (attr = _.find(el.attributes, function(attr) {
- return attr.name === 'kb-inject';
- }))) {
- el.__kb_injected = true;
- results.push({
- el: el,
- view_model: {},
- binding: attr.value
- });
+ Inject.injectViewModels = function(root) {
+ var afterBinding, app, beforeBinding, data, expression, findElements, options, results, _i, _len;
+ results = [];
+ findElements = function(el) {
+ var attr, child_el, _i, _len, _ref;
+ if (!el.__kb_injected) {
+ if (el.attributes && (attr = _.find(el.attributes, function(attr) {
+ return attr.name === 'kb-inject';
+ }))) {
+ el.__kb_injected = true;
+ results.push({
+ el: el,
+ view_model: {},
+ binding: attr.value
+ });
+ }
+ }
+ _ref = el.childNodes;
+ for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+ child_el = _ref[_i];
+ findElements(child_el);
+ }
+ };
+ findElements(root || document);
+ for (_i = 0, _len = results.length; _i < _len; _i++) {
+ app = results[_i];
+ if (expression = app.binding) {
+ (expression.search(/[:]/) < 0) || (expression = "{" + expression + "}");
+ data = (new Function("", "return ( " + expression + " )"))();
+ data || (data = {});
+ (!data.options) || (options = data.options, delete data.options);
+ options || (options = {});
+ app.view_model = kb.Inject.inject(data, app.view_model, app.el, null, null, true);
+ afterBinding = app.view_model.afterBinding || options.afterBinding;
+ beforeBinding = app.view_model.beforeBinding || options.beforeBinding;
+ }
+ if (beforeBinding) {
+ beforeBinding(app.view_model, app.el, options);
+ }
+ kb.applyBindings(app.view_model, app.el, options);
+ if (afterBinding) {
+ afterBinding(app.view_model, app.el, options);
}
}
- _ref = el.childNodes;
- for (_i = 0, _len = _ref.length; _i < _len; _i++) {
- child_el = _ref[_i];
- findElements(child_el);
- }
- };
- findElements(root || document);
- for (_i = 0, _len = results.length; _i < _len; _i++) {
- app = results[_i];
- if (expression = app.binding) {
- (expression.search(/[:]/) < 0) || (expression = "{" + expression + "}");
- data = buildEvalWithinScopeFunction(expression, 0)();
- data || (data = {});
- (!data.options) || (options = data.options, delete data.options);
- options || (options = {});
- app.view_model = kb.inject(data, app.view_model, app.el, null, null, true);
- afterBinding = app.view_model.afterBinding || options.afterBinding;
- beforeBinding = app.view_model.beforeBinding || options.beforeBinding;
- }
- if (beforeBinding) {
- beforeBinding(app.view_model, app.el, options);
- }
- kb.applyBindings(app.view_model, app.el, options);
- if (afterBinding) {
- afterBinding(app.view_model, app.el, options);
- }
- }
- return results;
-};
+ return results;
+ };
+
+ return Inject;
+
+})();
+
+kb.injectViewModels = kb.Inject.injectViewModels;
if (this.$) {
this.$(function() {
View
10 index.html
@@ -21,7 +21,7 @@
<ul class="nav">
<li><a class='brand' href="https://github.com/kmalakoff/knockback-navigators">KnockbackNavigators.js</a></li>
<li><a href='doc/index.html'>API</a></li>
- <li><a onclick="kb.loadUrl('', {name: 'NavigationSlide', inverse: true})">Examples</a></li>
+ <li><a onclick="kb.loadUrl('', {name: 'Slide', inverse: true})">Examples</a></li>
</ul>
</div></div></div>
@@ -124,7 +124,7 @@
<script src="examples/vendor/zepto-1.0rc1.js"></script>
<script src="examples/vendor/path-0.8.4.js"></script>
<script src="knockback-page-navigator-panes.js"></script>
- <script src="lib/knockback-sample-transitions-jquery.js"></script>
+ <script src="knockback-transitions.js"></script>
<script type='text/javascript'>
////////////////////////////////////
@@ -136,13 +136,13 @@
page_navigator.loadPage({el: $('#main')[0], transition: 'FadeIn'});
}));
Path.map('#page_navigator_simple').to(page_navigator.dispatcher(function(){
- page_navigator.loadPage({el: $('#page_navigator_simple')[0], transition: 'NavigationSlide'});
+ page_navigator.loadPage({el: $('#page_navigator_simple')[0], transition: 'Slide'});
}));
Path.map('#page_navigator_panes').to(page_navigator.dispatcher(function(){
- page_navigator.loadPage({el: $('#page_navigator_panes')[0], transition: 'NavigationSlide'});
+ page_navigator.loadPage({el: $('#page_navigator_panes')[0], transition: 'Slide'});
}));
Path.map('#pane_navigator').to(page_navigator.dispatcher(function(){
- page_navigator.loadPage({el: $('#pane_navigator')[0], transition: 'NavigationSlide'});
+ page_navigator.loadPage({el: $('#pane_navigator')[0], transition: 'Slide'});
}));
Path.listen();
Path.dispatch(window.location.hash);
View
20 knockback-navigators.css
@@ -1,32 +1,36 @@
/*
- knockback-navigators.css 0.1.1
+ knockback-page-navigators.css 0.1.1
(c) 2011, 2012 Kevin Malakoff - http://kmalakoff.github.com/knockback/
License: MIT (http://www.opensource.org/licenses/mit-license.php)
Dependencies: Knockout.js, Backbone.js, and Underscore.js.
*/
-
-/* PAGE NAVIGATORS */
.pane-navigator {
- position: absolute;
- padding: 0; margin: 0; left: 0; right: 0; top: 0; bottom: 0; /* pane-navigators take up their parent */
overflow: hidden;
+ position: relative;
}
+
.pane-navigator.page {
overflow: visible; /* will resize the browser window */
}
+
.pane-navigator.page.embed {
overflow: hidden; /* will stay in its pane instead of resizing the page */
}
-
-/* PANES */
+/*
+ knockback-panes.css 0.1.1
+ (c) 2011, 2012 Kevin Malakoff - http://kmalakoff.github.com/knockback/
+ License: MIT (http://www.opensource.org/licenses/mit-license.php)
+ Dependencies: Knockout.js, Backbone.js, and Underscore.js.
+*/
.pane {
- position: absolute; /* allow transitions relative to parent */
padding: 0; margin: 0; width: 100%; /* panes take up their pane-navigator */
display: none; /* panes are not visible by default */
}
+
.pane.active {
display: block; /* visible if active or in a scrolling pane-navigator */
}
+
.pane.on-top {
z-index: 100; /* default overlay z-index */
}
View
106 knockback-page-navigator-panes.js
@@ -2,7 +2,6 @@
knockback-page-navigator-panes.js 0.1.1
(c) 2011, 2012 Kevin Malakoff - http://kmalakoff.github.com/knockback/
License: MIT (http://www.opensource.org/licenses/mit-license.php)
- Dependencies: Knockout.js, Backbone.js, and Underscore.js.
*/
(function() {
return (function(factory) {
@@ -333,7 +332,7 @@ kb.PaneNavigator = (function() {
if ('transition' in options) {
active_pane.transition = options.transition;
}
- active_pane.activate(this.el);
+ active_pane.ensureElement(this.el);
if (options.silent) {
this.panes().push(active_pane);
} else {
@@ -360,7 +359,9 @@ kb.PaneNavigator = (function() {
};
if (active_pane && (active_pane.transition || this.transition)) {
this.startTransition(active_pane, previous_pane, clean_up_fn, true);
+ active_pane.activate(this.el);
} else {
+ active_pane.activate(this.el);
clean_up_fn();
}
return active_pane;
@@ -376,7 +377,7 @@ kb.PaneNavigator = (function() {
if (!previous_pane) {
return null;
}
- previous_pane.activate(this.el);
+ previous_pane.ensureElement();
this.cleanupTransition(true);
active_pane = this.activePane();
if ('transition' in options) {
@@ -396,14 +397,16 @@ kb.PaneNavigator = (function() {
};
if (active_pane && (active_pane.transition || this.transition)) {
this.startTransition(active_pane, previous_pane, clean_up_fn, false);
+ previous_pane.activate(this.el);
} else {
+ previous_pane.activate(this.el);
clean_up_fn();
}
return previous_pane;
};
PaneNavigator.prototype.startTransition = function(active_pane, previous_pane, callback, forward) {
- var info, key, options, transition, use_previous, value, _ref, _ref1;
+ var container_height, info, key, options, start_state, transition, use_previous, value, _ref, _ref1;
if (!active_pane) {
return;
}
@@ -423,7 +426,7 @@ kb.PaneNavigator = (function() {
name: transition
};
}
- kb.transistions[transition.name] || throwMissing(this, "transition " + transition.name);
+ kb.active_transitions[transition.name] || throwMissing(this, "transition " + transition.name);
options = {
forward: forward
};
@@ -443,16 +446,28 @@ kb.PaneNavigator = (function() {
previous_pane.activate(this.el);
}
info = {
- container_el: this.el,
- from_el: previous_pane ? previous_pane.el : null,
- to_el: active_pane ? active_pane.el : null,
+ container: this.el,
+ from: previous_pane ? previous_pane.el : null,
+ to: active_pane ? active_pane.el : null,
callback: callback
};
+ start_state = new kb.TransitionSavedState(info);
+ !info.to || $(info.to).addClass('in-transition');
+ !info.from || $(info.from).addClass('in-transition');
+ container_height = this.el.clientHeight;
+ if (!container_height) {
+ container_height = info.from ? Math.max(info.to.clientHeight, info.from.clientHeight) : info.to.clientHeight;
+ }
+ $(this.el).css({
+ 'overflow': 'hidden',
+ height: container_height
+ });
this.active_transition = {
callback: callback,
- transition: new kb.transistions[transition.name](info, options)
+ start_state: start_state,
+ info: info
};
- return this.active_transition.transition.start();
+ return new kb.active_transitions[transition.name](info, options);
};
PaneNavigator.prototype.cleanupTransition = function(cancel) {
@@ -463,8 +478,10 @@ kb.PaneNavigator = (function() {
transition = this.active_transition;
this.active_transition = null;
if (cancel) {
- transition.transition.cancel();
+ !transition.info.to || $(transition.info.to).stopTransition();
+ !transition.info.from || $(transition.info.from).stopTransition();
}
+ transition.start_state.restore();
return transition.callback();
};
@@ -476,7 +493,7 @@ if (typeof exports !== 'undefined') {
exports.PaneNavigator = kb.PaneNavigator;
}
-kb.transistions || (kb.transistions = {});