@@ -6,6 +6,7 @@ PolyPage Change Log
- A public event API for triggering page state changes and being notified of them.
- The plugin now is a real JS object so theoretically you could have several PolyPage's co-existing on one html page.
- PolyPage now follows the jQuery standard and is fully chainable, and scoped, in most cases $(document).polypage() is fine.
+- The nav bar is now 100% independent of the polypage functionality. You can now run polypage with no GUI or DOM injection at all.
0.7
changelog.txt
@@ -20,6 +20,13 @@
$(this).data('polypage', new $.polypage(this, opts));
});
};
+
+ $.fn.polypageNavBar = function(opts) {
+ return this.each(function() {
+ (opts = opts || {}).bindTo = opts.bindTo || this;
+ $(this).data('polypageNavBar', new $.polypage.navBar(this, opts));
+ });
+ };
$.polypage = function(scope, options) {
this.scope = $(scope);
@@ -29,8 +36,7 @@
$.polypage.DEFAULTS = {
prefix: 'pp',
- separator: '_',
- label: "Page States:"
+ separator: '_'
};
$.polypage.prototype = {
@@ -132,7 +138,7 @@
return $("*[class*='"+this.options.prefix+this.options.separator+"']", this.scope);
},
- pageHasPPElements: function() {
+ hasElements: function() {
return this.findAll().length>0
},
@@ -157,11 +163,13 @@
return eval(str);
},
- // alphabeticalStateNames: function(){
- // var ret = [];
- // for(var state in this.states) { ret.push(state); };
- // return ret.sort();
- // },
+ alphabeticalStates: function(){
+ var alphaStates = [], ret = [];
+ for(var state in this.states) { alphaStates.push(state) }
+ alphaStates = alphaStates.sort();
+ for(var state in alphaStates) { ret.push({name:alphaStates[state], value:this.states[alphaStates[state]]}); };
+ return ret
+ },
// buildOptionsBar: function(elems){
// if(!this.pageHasPPElements()) return;
@@ -195,7 +203,63 @@
// }
// });
// }
-
+ };
+
+ $.polypage.navBar = function(scope, options) {
+ this.scope = $(scope);
+ this.options = $.extend($.polypage.navBar.DEFAULTS, options||{});
+ this.init();
+ };
+
+ $.polypage.navBar.DEFAULTS = {
+ className: 'pp_options',
+ label: "Page States:"
+ };
+
+ $.polypage.navBar.prototype = {
+ init: function(){
+ this.bindWithPolypage();
+ this.redraw();
+ },
+
+ bindWithPolypage: function(){
+ this.polypage = $(this.options.bindTo).data('polypage');
+ if(this.polypage===undefined)
+ throw "A polypage nav bar must be bound to a polypage enabled element, try setting the 'bindTo' option.";
+ },
+
+ redraw: function(){
+ this.undraw();
+ if(!this.needsOptionBar()) return;
+ this.draw();
+ },
+
+ draw: function(){
+ this.scope.append('<div id="'+this.options.className+'"><p>'+this.options.label+'</p><ul></ul></div>');
+ var states = this.states();
+ for(var index in states) {
+ var state = states[index];
+ var humanStateName = state.name.replace(this.separator(),' ');
+ var className = state.value ? 'on' : 'off'
+ $('#pp_options ul').append('<li><a href="#'+state.name+'" id="pp_state_switch_'+state.name+'" class="'+className+'">'+humanStateName+'</a></li>');
+ }
+ },
+
+ undraw: function(){
+ this.scope.find('.'+this.options.className).remove();
+ },
+
+ needsOptionBar: function(){
+ return this.polypage.hasElements();
+ },
+
+ states: function(){
+ return this.polypage.alphabeticalStates();
+ },
+
+ separator: function(){
+ return this.polypage.options.separator;
+ },
};
})(jQuery);
lib/polypage.jquery.js
@@ -26,7 +26,7 @@ body div#pp_options li {
body div#pp_options li a {
color: #999;
}
-body div#pp_options li a.active {
+body div#pp_options li a.on {
color: #000;
background: #d4fb78;
}
\ No newline at end of file
skins/default.css
@@ -33,6 +33,6 @@ body div#pp_options li {
body div#pp_options li a {
color: #999;
}
-body div#pp_options li a.active {
+body div#pp_options li a.on {
color: #000;
}
skins/plain.css
@@ -58,6 +58,7 @@
<!-- Setup -->
<script type="text/javascript" charset="utf-8">
$('#dom').polypage();
+ $('body').polypageNavBar({bindTo:'#dom'});
</script>
<!-- Specs -->
spec/index.html
25e94d17fedf35be441789be5731ebe8f7beb94c
Andy Kent
andrew.d.kent@gmail.com
http://github.com/andykent/polypage/commit/202a5c4248310d2caf4ef2ee2069c14d61e78436
202a5c4248310d2caf4ef2ee2069c14d61e78436
2009-03-07T16:14:39-08:00
2009-03-07T16:14:39-08:00
The nav bar is now 100% independent of the polypage functionality. You can now run polypage with no GUI or DOM injection at all.
6f26394b61cc9901061840adbecb0ea0a4563912
Andy Kent
andrew.d.kent@gmail.com