lib/cookie.polypage.jquery.js lib/events.polypage.jquery.js lib/gui.polypage.jquery.js lib/keyboard.polypage.jquery.js @@ -1,6 +1,11 @@ PolyPage Change Log +0.8.3 + +- Split extensions out into seperate files to make mix'n'match easier. + + 0.8.2 - Fixed a regression which broke alphabetical sorting. changelog.txt @@ -10,8 +10,11 @@ <link rel="stylesheet" href="skins/default.css" type="text/css" media="screen" title="no title" charset="utf-8"> <script src="lib/jquery.js" type="text/javascript" charset="utf-8"></script> - <script src="lib/cookie.jquery.js" type="text/javascript" charset="utf-8"></script> <script src="lib/polypage.jquery.js" type="text/javascript" charset="utf-8"></script> + <script src="lib/events.polypage.jquery.js"></script> + <script src="lib/cookie.polypage.jquery.js"></script> + <script src="lib/gui.polypage.jquery.js"></script> + <script src="lib/keyboard.polypage.jquery.js"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function() { index.html @@ -1,454 +1,227 @@ /* - * PolyPage 0.8.2 - * - * Copyright (c) 2009 Andy Kent - * Dual licensed under the MIT and GPL licenses: - * http://www.opensource.org/licenses/mit-license.php - * http://www.gnu.org/licenses/gpl.html - * - * For cookie support you will also need the modified version of the jQuery cookie plugin that comes bundled with this plugin. - * - * For help please open the index.html file in your web browser. - * - * Developed by Andy Kent - */ +* PolyPage 0.8.2 +* +* Copyright (c) 2009 Andy Kent +* Dual licensed under the MIT and GPL licenses: +* http://www.opensource.org/licenses/mit-license.php +* http://www.gnu.org/licenses/gpl.html +* +* For cookie support you will also need the modified version of the jQuery cookie plugin that comes bundled with this plugin. +* +* For help please open the index.html file in your web browser. +* +* Developed by Andy Kent +*/ (function($) { - - $.polypage = {}; - - - // ============================ - // = PolyPage Agregate helper = - // ============================ - - $.fn.polypage = function(opts) { - var opts = $.extend({ - base:{}, - events:{}, - gui:{}, - cookie:{}, - keyboard:{} - }, opts || {}); - this.ppBase(opts.base); - if(opts.events) this.ppEvents(opts.events); - if(opts.gui) this.ppGUI(opts.gui); - if(opts.cookie) this.ppCookie(opts.cookie); - if(opts.keyboard) this.ppKeyboard(opts.keyboard); - return this - }; - - - // ================= - // = PolyPage Base = - // ================= - - $.fn.ppBase = function(opts) { - return this.each(function() { - if($(this).data('polypage')===undefined) - $(this).data('polypage', new $.polypage.Base(this, opts)); - }); - }; - - $.polypage.Base = function(scope, options) { - this.scope = $(scope); - this.options = $.extend($.polypage.Base.DEFAULTS, options||{}); - this.init(); - }; - - $.polypage.Base.DEFAULTS = { - prefix: 'pp', - separator: '_' - }; - - $.polypage.Base.prototype = { - init: function(){ - this.findStates(); - this.bindEvents(); - this.setStartStates(); - this.refresh(); - }, - - - setState: function(stateName,val){ - var newState = !!val; - if(this.getState(stateName)==newState) return newState; - this.states[stateName] = newState; - this.refresh(); - this.scope.trigger('pp_stateChange', { name:stateName, value:newState }); - return newState; - }, - - getState: function(stateName){ - return this.states[stateName]; - }, - - setStates: function(states) { - for(var stateName in states) { this.setState(stateName, states[stateName]) }; - }, - - toggleState: function(stateName) { return this.setState(stateName, !this.getState(stateName)); }, - - toggleStates: function(stateNames) { for(var i in stateNames) this.toggleState(stateNames[i]); }, - - prefixed: function(str){ - return this.options.prefix+this.options.separator+str; - }, - - bindEvents: function(){ - var pp = this; - var doc = $(document.body); - this.scope.bind('pp_setState pp_setStates', function(e, opts) { pp.setStates(opts); }); - this.scope.bind('pp_toggleState', function(e, stateName) { pp.toggleState(stateName); }); - this.scope.bind('pp_toggleStates', function(e, stateNames) { pp.toggleStates($.makeArray(arguments).slice(1)); }); - }, - - separated: function(val) { - return this.options.separator+val+this.options.separator - }, - - setStartStates: function(){ - if(this.options.defaultStates) - for(var i in this.options.defaultStates) { this.setState(initValues[i], true); } - this.setValuesFromHash(window.location.hash); - }, - - setValuesFromHash: function(hash) { - var hashValues = hash.replace(/^#/,'').split(new RegExp(this.separated('and'))); - for(var i in hashValues) { this.setState(hashValues[i], true); } - return this; - }, - - - findStates: function(){ - var el = this.findAll(); - var self = this; - this.states = {}; - el.each(function() { - var s = self.extractDataFromClassName($(this).attr('class')); - var states = s.split(new RegExp(self.separated('?not')+'|'+self.separated('or')+'|'+self.separated('and'))); - for(var state in states) { - if(self.states[states[state]]==undefined && states[state]!='') - self.states[states[state]]=false; - } - }); - return this.states; - }, - - extractDataFromClassName: function(className){ - var classes = className.split(' '); - for(var i in classes) { - var matcher = new RegExp('^'+this.options.prefix+this.options.separator); - if(matcher.test(classes[i])) return classes[i].replace(matcher,''); - } - return ''; - }, - - findAll: function(){ - return $("*[class*='"+this.options.prefix+this.options.separator+"']", this.scope); - }, - - hasElements: function() { - return this.findAll().length>0 - }, - - refresh: function(){ - var self = this; - this.findAll().each(function(){ self.evaluateNode(this); }); - return this; - }, - - evaluateNode: function(node){ - var on = this.evaluate(this.extractDataFromClassName($(node).attr('class'))); - $(node).toggle(on); - return on; - }, - - evaluate: function(input){ - var str = input - .replace(new RegExp(this.separated('and'),'gi'),' && ') - .replace(new RegExp(this.separated('or'),'gi'),' || ') - .replace(new RegExp(this.separated('?not'),'gi'),' !') - .replace(/([a-z_0-9\-]+)/gi,"this.states['$1']"); - try { var ret = eval(str) } - catch(e) { throw "Ooops! there seems to have been an error in your use of polypage classname ("+input+")" } - return ret; - }, - - statesList: function(){ - var list = []; - for(var state in this.states) { list.push(state) }; - return list.sort(); - }, - - alphabeticalStates: function(){ - var alphaStates = [], ret = []; - for(var state in this.states) { alphaStates.push(state) } - alphaStates = this.statesList(); - for(var state in alphaStates) { ret.push({name:alphaStates[state], value:this.states[alphaStates[state]]}); }; - return ret - } - }; - - - // ==================== - // = Extension Helper = - // ==================== - - $.polypage.extension = function(__extensionName__, __defaults__, __prototype__) { - // create a jQuery chainable helper - $.fn['pp'+__extensionName__] = function(opts) { - return this.each(function() { - (opts = opts || {}).bindTo = opts.bindTo || this; - $(this).data('pp'+__extensionName__, new $.polypage[__extensionName__](this, opts)); - }); - }; - - // object initializer - $.polypage[__extensionName__] = function(scope, options) { - this.scope = $(scope); - this.options = $.extend($.polypage[__extensionName__].DEFAULTS, options||{}); - // polypage binding - this.polypageScope = $(this.options.bindTo); - this.polypage = this.options.polypage || this.polypageScope.data('polypage'); - if(this.polypage===undefined) - throw "A polypage "+__extensionName__+" object must be bound to a polypage enabled element, try setting the 'bindTo' option."; - // initialization - this.init(); - }; - - // empty defaults - $.polypage[__extensionName__].DEFAULTS = __defaults__ || {}; - - // blank init to stop errors - $.polypage[__extensionName__].prototype = $.extend({ init: function(){} }, __prototype__); - }; - - - // ========================== - // = PolyPage GUI Extension = - // ========================== - - $.polypage.extension('GUI', - { - containerID: 'pp_options', - label: "Page States:" - }, - { - init: function(){ - this.bindEvents(); - this.redraw(); - }, - - bindEvents: function() { - var nb = this; - this.scope.bind('pp_gui_forceRedraw', function() { nb.redraw() }); - this.polypageScope.bind('pp_stateChange', function() { nb.redraw()}); - }, - - redraw: function(){ - this.scope.trigger('pp_gui_redrawBegin', this); - this.undraw(); - if(!this.needsOptionBar()) return; - this.draw(); - this.scope.trigger('pp_gui_redrawComplete', this); - }, - - draw: function(){ - this.scope.append('<div id="'+this.options.containerID+'"><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="#pp_toggle_'+state.name+'" id="pp_state_toggle_'+state.name+'" class="'+className+'">'+humanStateName+'</a></li>'); - } - }, - - undraw: function(){ - this.scope.find('#'+this.options.containerID).remove(); - }, - - needsOptionBar: function(){ - return this.polypage.hasElements(); - }, - - states: function(){ - return this.polypage.alphabeticalStates(); - }, - - separator: function(){ - return this.polypage.options.separator; - } - }); - - - // ============================= - // = PolyPage Events Extension = - // ============================= - - $.polypage.extension('Events', - { - enableClickEvents: true, - enableSubmitEvents: true - }, - { - init: function(){ - this.bindEvents(); - }, - - bindEvents: function() { - var pp = this; - if(this.options.enableClickEvents) - $('body').bind('click.pp', function(e) { pp.clickHandler(e); }); - if(this.options.enableSubmitEvents) - $('form').bind('submit.pp', function(e) { pp.submitHandler(e); }); // FIXME try to bind this to body not just form elements - }, - - clickHandler: function(e) { - var a = $(e.target).closest('a'); - if(a.length==0) return; - var href = a.attr('href'); - if(!href) return; - if(this.triggerEventFromHash(href)) e.preventDefault(); - }, - - submitHandler: function(e){ - var form = $(e.target).closest('form') - if(form.length==0) return; - var action = form.attr('action'); - if(!action) return; - if(this.triggerEventFromHash(action)) e.preventDefault(); - }, - - triggerEventFromHash: function(hash){ - if(hash.search(/^#pp_/)==-1) return false; - var hash = hash.replace(/^#pp_/,''); - if(hash.search(/^toggle_/)>=0) { - this.scope.trigger('pp_toggleState', hash.replace(/^toggle_/, '')); - return true - } - if(hash.search(/^set_/)>=0) { - var val = hash.search(/_false$/)==-1 - hash = hash.replace(/^set_/, '') - hash = hash.replace(/_true$|_false$/, '') - var obj = {} - obj[hash]=val - this.scope.trigger('pp_setState', obj); - return true - } - return false - } - }); - - - // ============================= - // = PolyPage Cookie Extension = - // ============================= - - $.polypage.extension('Cookie', - { - expires: null, // can be a Date object or a integer number of days - namespace:'pp_' - }, - { - init: function(){ - this.checkForCookieSupport(); - this.setInitialStateFromCookie(); - this.bindStateChangeListener(); - }, - - checkForCookieSupport: function(){ - if($.cookie===undefined) throw "The jQuery Cookie plugin is required to use the ppCookie() extension but was not found at $.cookie()"; - }, - - setInitialStateFromCookie: function(){ - var states = this.polypage.statesList(); - for(var i in states) { - var stateName = states[i]; - if(this.getCookie(stateName)) { - var obj = {} - obj[stateName]=true - this.scope.trigger('pp_setState', obj); - - } - } - }, - - setCookie: function(state,val) { - if(!state.length) return false; - $.cookie(this.prefixed(state), val ? 'yes' : null, {"path":"/", "expires":this.options.expires}); - return true; - }, - - getCookie: function(state) { - if(!state.length) return false; - return $.cookie(this.prefixed(state))!=null; - }, - - prefixed: function(state) { - return this.options.namespace+state; - }, - - bindStateChangeListener: function(){ - var c = this; - this.polypageScope.bind('pp_stateChange', function(e, state) { - c.setCookie(state.name, state.value); - }); - } - }); - - - // =============================== - // = PolyPage Keyboard Extension = - // =============================== - - $.polypage.extension('Keyboard', - { - modifier: 18, - mapping: null - }, - { - init: function(){ - if(!this.options.mapping) this.options.mapping = this.autoMapping(); - this.captureKeyPresses(); - }, - - autoMapping: function(){ - var states = this.polypage.statesList(); - var mapping = {}; - for(var i in states) { - var s = states[i]; - var keycodeFor = function(str,attempt) { - if(str.length==attempt) return null; - var code = str.charCodeAt(attempt); - if(mapping[code]==undefined) return code; - return keycodeFor(str,attempt+1); - }; - mapping[ keycodeFor(s.toUpperCase(), 0) ] = s; - }; - return mapping; - }, - - captureKeyPresses: function(){ - var keyboard = this; - $(document).keydown(function(e) { - var k = e.which || e.keyCode; - if(k==keyboard.options.modifier) keyboard.activated = true; - }); - $(document).keyup(function(e) { - var k = e.which || e.keyCode; - if(k==keyboard.options.modifier) keyboard.activated = false; - if(keyboard.activated && k>=65 && k<=90) { - e.preventDefault(); - keyboard.toggleByKeyCode(k); - } - }); - }, - - toggleByKeyCode: function(keyCode){ - this.scope.trigger('pp_toggleState', this.options.mapping[keyCode]); - } - }); - + + $.polypage = {}; + + + // ============================ + // = PolyPage Agregate helper = + // ============================ + + $.fn.polypage = function(opts) { + var opts = $.extend({ + base:{}, + events:{}, + gui:{}, + cookie:{}, + keyboard:{} + }, opts || {}); + this.ppBase(opts.base); + if(opts.events && this.ppEvents) this.ppEvents(opts.events); + if(opts.gui && this.ppGUI) this.ppGUI(opts.gui); + if(opts.cookie && this.ppCookie) this.ppCookie(opts.cookie); + if(opts.keyboard && this.ppKeyboard) this.ppKeyboard(opts.keyboard); + return this + }; + + + // ================= + // = PolyPage Base = + // ================= + + $.fn.ppBase = function(opts) { + return this.each(function() { + if($(this).data('polypage')===undefined) + $(this).data('polypage', new $.polypage.Base(this, opts)); + }); + }; + + $.polypage.Base = function(scope, options) { + this.scope = $(scope); + this.options = $.extend($.polypage.Base.DEFAULTS, options||{}); + this.init(); + }; + + $.polypage.Base.DEFAULTS = { + prefix: 'pp', + separator: '_' + }; + + $.polypage.Base.prototype = { + init: function(){ + this.findStates(); + this.bindEvents(); + this.setStartStates(); + this.refresh(); + }, + + + setState: function(stateName,val){ + var newState = !!val; + if(this.getState(stateName)==newState) return newState; + this.states[stateName] = newState; + this.refresh(); + this.scope.trigger('pp_stateChange', { name:stateName, value:newState }); + return newState; + }, + + getState: function(stateName){ + return this.states[stateName]; + }, + + setStates: function(states) { + for(var stateName in states) { this.setState(stateName, states[stateName]) }; + }, + + toggleState: function(stateName) { return this.setState(stateName, !this.getState(stateName)); }, + + toggleStates: function(stateNames) { for(var i in stateNames) this.toggleState(stateNames[i]); }, + + prefixed: function(str){ + return this.options.prefix+this.options.separator+str; + }, + + bindEvents: function(){ + var pp = this; + var doc = $(document.body); + this.scope.bind('pp_setState pp_setStates', function(e, opts) { pp.setStates(opts); }); + this.scope.bind('pp_toggleState', function(e, stateName) { pp.toggleState(stateName); }); + this.scope.bind('pp_toggleStates', function(e, stateNames) { pp.toggleStates($.makeArray(arguments).slice(1)); }); + }, + + separated: function(val) { + return this.options.separator+val+this.options.separator + }, + + setStartStates: function(){ + if(this.options.defaultStates) + for(var i in this.options.defaultStates) { this.setState(initValues[i], true); } + this.setValuesFromHash(window.location.hash); + }, + + setValuesFromHash: function(hash) { + var hashValues = hash.replace(/^#/,'').split(new RegExp(this.separated('and'))); + for(var i in hashValues) { this.setState(hashValues[i], true); } + return this; + }, + + + findStates: function(){ + var el = this.findAll(); + var self = this; + this.states = {}; + el.each(function() { + var s = self.extractDataFromClassName($(this).attr('class')); + var states = s.split(new RegExp(self.separated('?not')+'|'+self.separated('or')+'|'+self.separated('and'))); + for(var state in states) { + if(self.states[states[state]]==undefined && states[state]!='') + self.states[states[state]]=false; + } + }); + return this.states; + }, + + extractDataFromClassName: function(className){ + var classes = className.split(' '); + for(var i in classes) { + var matcher = new RegExp('^'+this.options.prefix+this.options.separator); + if(matcher.test(classes[i])) return classes[i].replace(matcher,''); + } + return ''; + }, + + findAll: function(){ + return $("*[class*='"+this.options.prefix+this.options.separator+"']", this.scope); + }, + + hasElements: function() { + return this.findAll().length>0 + }, + + refresh: function(){ + var self = this; + this.findAll().each(function(){ self.evaluateNode(this); }); + return this; + }, + + evaluateNode: function(node){ + var on = this.evaluate(this.extractDataFromClassName($(node).attr('class'))); + $(node).toggle(on); + return on; + }, + + evaluate: function(input){ + var str = input + .replace(new RegExp(this.separated('and'),'gi'),' && ') + .replace(new RegExp(this.separated('or'),'gi'),' || ') + .replace(new RegExp(this.separated('?not'),'gi'),' !') + .replace(/([a-z_0-9\-]+)/gi,"this.states['$1']"); + try { var ret = eval(str) } + catch(e) { throw "Ooops! there seems to have been an error in your use of polypage classname ("+input+")" } + return ret; + }, + + statesList: function(){ + var list = []; + for(var state in this.states) { list.push(state) }; + return list.sort(); + }, + + alphabeticalStates: function(){ + var alphaStates = [], ret = []; + for(var state in this.states) { alphaStates.push(state) } + alphaStates = this.statesList(); + for(var state in alphaStates) { ret.push({name:alphaStates[state], value:this.states[alphaStates[state]]}); }; + return ret + } + }; + + + // ==================== + // = Extension Helper = + // ==================== + + $.polypage.extension = function(__extensionName__, __defaults__, __prototype__) { + // create a jQuery chainable helper + $.fn['pp'+__extensionName__] = function(opts) { + return this.each(function() { + (opts = opts || {}).bindTo = opts.bindTo || this; + $(this).data('pp'+__extensionName__, new $.polypage[__extensionName__](this, opts)); + }); + }; + + // object initializer + $.polypage[__extensionName__] = function(scope, options) { + this.scope = $(scope); + this.options = $.extend($.polypage[__extensionName__].DEFAULTS, options||{}); + // polypage binding + this.polypageScope = $(this.options.bindTo); + this.polypage = this.options.polypage || this.polypageScope.data('polypage'); + if(this.polypage===undefined) + throw "A polypage "+__extensionName__+" object must be bound to a polypage enabled element, try setting the 'bindTo' option."; + // initialization + this.init(); + }; + + // empty defaults + $.polypage[__extensionName__].DEFAULTS = __defaults__ || {}; + + // blank init to stop errors + $.polypage[__extensionName__].prototype = $.extend({ init: function(){} }, __prototype__); + }; + })(jQuery); \ No newline at end of file lib/polypage.jquery.js @@ -21,8 +21,11 @@ <script src="matchers.js"></script> <!-- PolyPage Requirements --> - <script src="../lib/cookie.jquery.js"></script> <script src="../lib/polypage.jquery.js"></script> + <script src="../lib/events.polypage.jquery.js"></script> + <script src="../lib/cookie.polypage.jquery.js"></script> + <script src="../lib/gui.polypage.jquery.js"></script> + <script src="../lib/keyboard.polypage.jquery.js"></script> <link rel="stylesheet" href="../skins/default.css" /> <style type="text/css" media="screen"> spec/index.html lib/cookie.jquery.js 2a36396ad740063027a8612eab4fe3780e81b4ac Andy Kent andrew.d.kent@gmail.com http://github.com/andykent/polypage/commit/3ab7ebad79a9bf4fea3a4d11b5d42d1346940d95 3ab7ebad79a9bf4fea3a4d11b5d42d1346940d95 2009-04-14T15:21:19-07:00 2009-04-14T15:21:19-07:00 split extensions out into seperate files to make mix'n'match easier 74fed17b9d4b32fcb96482f89bbfc83bf4578e54 Andy Kent andrew.d.kent@gmail.com