From 158c54ce762a51a9b1bfa9047664e5c7ff6a44f5 Mon Sep 17 00:00:00 2001 From: Oscar Finnsson Date: Sun, 9 Sep 2012 15:20:56 +0200 Subject: [PATCH] Close #1 and Close #28 - guard takes from and to page and four fx are implemented --- .gitignore | 1 + README.md | 32 +- demo/bend_her.html | 31 ++ demo/buggalo.html | 35 ++ demo/demo.css | 21 +- demo/demo.js | 57 ++- demo/fx.html | 81 ++++ demo/index.html | 209 +++------ demo/jquery.ba-hashchange.min.js | 9 + demo/lethal.html | 34 ++ demo/load_external_content.html | 13 +- demo/pager.amd.min.js | 4 +- demo/pager.css | 14 + demo/recapitulation.html | 440 +++++++++++++++++++ dist/pager.amd.min.js | 4 +- dist/pager.css | 14 + dist/pager.min.js | 4 +- grunt.js | 16 + kodoc.js | 66 +++ lib/kodoc.js | 53 --- pager.js | 151 ++++++- pager.less | 18 + test-data/ipsum.html | 1 + test-data/parent_to_ipsum.html | 5 + test/pager.css | 14 + test/should_deep_route_external_content.html | 64 +++ 26 files changed, 1125 insertions(+), 266 deletions(-) create mode 100644 demo/bend_her.html create mode 100644 demo/buggalo.html create mode 100644 demo/fx.html create mode 100644 demo/jquery.ba-hashchange.min.js create mode 100644 demo/lethal.html create mode 100644 demo/pager.css create mode 100644 demo/recapitulation.html create mode 100644 dist/pager.css create mode 100644 kodoc.js delete mode 100644 lib/kodoc.js create mode 100644 pager.less create mode 100644 test-data/ipsum.html create mode 100644 test-data/parent_to_ipsum.html create mode 100644 test/pager.css create mode 100644 test/should_deep_route_external_content.html diff --git a/.gitignore b/.gitignore index 485dee6..eb79dd5 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ +node_modules .idea diff --git a/README.md b/README.md index 9f7d481..c6fb57c 100644 --- a/README.md +++ b/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 diff --git a/demo/bend_her.html b/demo/bend_her.html new file mode 100644 index 0000000..79c2dc4 --- /dev/null +++ b/demo/bend_her.html @@ -0,0 +1,31 @@ +

Bend Her

+ +

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.

+ +

The Day The Earth Stood Stupid

+ +

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.

+ +

A Tale of Two Santas

+ +

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… + Really?! Bender! Ship! Stop bickering or I'm going to come back there and change your opinions manually!

+

Attack of the Killer App

+ +

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!

+
    +
  1. Soon enough.
    2. +
  2. That's a popular name today. Little "e", big "B"?
    3. +
+
Fear of a Bot Planet
+ +

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!

\ No newline at end of file diff --git a/demo/buggalo.html b/demo/buggalo.html new file mode 100644 index 0000000..0afb6ed --- /dev/null +++ b/demo/buggalo.html @@ -0,0 +1,35 @@ +

Where the Buggalo Roam

+ +

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.

+ +

Put Your Head on my Shoulder

+ +

Fatal. I'm Santa Claus! Bender, I didn't know you liked cooking. That's so cute.

+ +

The Series Has Landed

+ +

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.

+

The Day The Earth Stood Stupid

+ +

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.

+
    +
  1. Whoa a real live robot; or is that some kind of cheesy New Year's costume?
    2. +
  2. Now, now. Perfectly symmetrical violence never solved anything.
    3. +
+
Love's Labors Lost in Space
+ +

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.

\ No newline at end of file diff --git a/demo/demo.css b/demo/demo.css index 2c48d11..d132f60 100644 --- a/demo/demo.css +++ b/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; } \ No newline at end of file diff --git a/demo/demo.js b/demo/demo.js index 869d65e..d2f4e62 100644 --- a/demo/demo.js +++ b/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(); }); diff --git a/demo/fx.html b/demo/fx.html new file mode 100644 index 0000000..72fdb83 --- /dev/null +++ b/demo/fx.html @@ -0,0 +1,81 @@ +
+

FX

+ +

+ 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 + fx: 'zoom', + fx: 'flip', + fx: 'slide' or + fx: 'fade'. + In order to use zoom or flip you'll need to include pager.css or pager.less. +

+
+ + +

Zoom

+
+ + + +
+
+
+
+ +

Flip

+ +
+ + + +
+
+
+
+ +

Slide

+ +
+ + + +
+
+
+
+ +

Fade

+ +
+ + + +
+
+
+
+ +
+ Read a recapitulation about the API +
diff --git a/demo/index.html b/demo/index.html index 10de145..832919d 100644 --- a/demo/index.html +++ b/demo/index.html @@ -6,6 +6,7 @@ + @@ -15,7 +16,8 @@ + + + + + + + + +
+ +
+ + + + + + + + + + + + \ No newline at end of file