Commit dcebd712accad14ea5a8574bff05af5e7472b520
Committed by
Antonio Terceiro
1 parent
ce04b5a9
Exists in
master
and in
29 other branches
ActionItem928: adding file lowpro.js
* With this file, the pagination can be used with ajax
Showing
1 changed file
with
338 additions
and
0 deletions
Show diff stats
| @@ -0,0 +1,338 @@ | @@ -0,0 +1,338 @@ | ||
| 1 | +LowPro = {}; | ||
| 2 | +LowPro.Version = '0.5'; | ||
| 3 | +LowPro.CompatibleWithPrototype = '1.6'; | ||
| 4 | + | ||
| 5 | +if (Prototype.Version.indexOf(LowPro.CompatibleWithPrototype) != 0 && window.console && window.console.warn) | ||
| 6 | + console.warn("This version of Low Pro is tested with Prototype " + LowPro.CompatibleWithPrototype + | ||
| 7 | + " it may not work as expected with this version (" + Prototype.Version + ")"); | ||
| 8 | + | ||
| 9 | +if (!Element.addMethods) | ||
| 10 | + Element.addMethods = function(o) { Object.extend(Element.Methods, o) }; | ||
| 11 | + | ||
| 12 | +// Simple utility methods for working with the DOM | ||
| 13 | +DOM = {}; | ||
| 14 | + | ||
| 15 | +// DOMBuilder for prototype | ||
| 16 | +DOM.Builder = { | ||
| 17 | + tagFunc : function(tag) { | ||
| 18 | + return function() { | ||
| 19 | + var attrs, children; | ||
| 20 | + if (arguments.length>0) { | ||
| 21 | + if (arguments[0].constructor == Object) { | ||
| 22 | + attrs = arguments[0]; | ||
| 23 | + children = Array.prototype.slice.call(arguments, 1); | ||
| 24 | + } else { | ||
| 25 | + children = arguments; | ||
| 26 | + }; | ||
| 27 | + children = $A(children).flatten() | ||
| 28 | + } | ||
| 29 | + return DOM.Builder.create(tag, attrs, children); | ||
| 30 | + }; | ||
| 31 | + }, | ||
| 32 | + create : function(tag, attrs, children) { | ||
| 33 | + attrs = attrs || {}; children = children || []; tag = tag.toLowerCase(); | ||
| 34 | + var el = new Element(tag, attrs); | ||
| 35 | + | ||
| 36 | + for (var i=0; i<children.length; i++) { | ||
| 37 | + if (typeof children[i] == 'string') | ||
| 38 | + children[i] = document.createTextNode(children[i]); | ||
| 39 | + el.appendChild(children[i]); | ||
| 40 | + } | ||
| 41 | + return $(el); | ||
| 42 | + } | ||
| 43 | +}; | ||
| 44 | + | ||
| 45 | +// Automatically create node builders as $tagName. | ||
| 46 | +(function() { | ||
| 47 | + var els = ("p|div|span|strong|em|img|table|tr|td|th|thead|tbody|tfoot|pre|code|" + | ||
| 48 | + "h1|h2|h3|h4|h5|h6|ul|ol|li|form|input|textarea|legend|fieldset|" + | ||
| 49 | + "select|option|blockquote|cite|br|hr|dd|dl|dt|address|a|button|abbr|acronym|" + | ||
| 50 | + "script|link|style|bdo|ins|del|object|param|col|colgroup|optgroup|caption|" + | ||
| 51 | + "label|dfn|kbd|samp|var").split("|"); | ||
| 52 | + var el, i=0; | ||
| 53 | + while (el = els[i++]) | ||
| 54 | + window['$' + el] = DOM.Builder.tagFunc(el); | ||
| 55 | +})(); | ||
| 56 | + | ||
| 57 | +DOM.Builder.fromHTML = function(html) { | ||
| 58 | + var root; | ||
| 59 | + if (!(root = arguments.callee._root)) | ||
| 60 | + root = arguments.callee._root = document.createElement('div'); | ||
| 61 | + root.innerHTML = html; | ||
| 62 | + return root.childNodes[0]; | ||
| 63 | +}; | ||
| 64 | + | ||
| 65 | + | ||
| 66 | + | ||
| 67 | +// Wraps the 1.6 contentloaded event for backwards compatibility | ||
| 68 | +// | ||
| 69 | +// Usage: | ||
| 70 | +// | ||
| 71 | +// Event.onReady(callbackFunction); | ||
| 72 | +Object.extend(Event, { | ||
| 73 | + onReady : function(f) { | ||
| 74 | + if (document.body) f(); | ||
| 75 | + else document.observe('dom:loaded', f); | ||
| 76 | + } | ||
| 77 | +}); | ||
| 78 | + | ||
| 79 | +// Based on event:Selectors by Justin Palmer | ||
| 80 | +// http://encytemedia.com/event-selectors/ | ||
| 81 | +// | ||
| 82 | +// Usage: | ||
| 83 | +// | ||
| 84 | +// Event.addBehavior({ | ||
| 85 | +// "selector:event" : function(event) { /* event handler. this refers to the element. */ }, | ||
| 86 | +// "selector" : function() { /* runs function on dom ready. this refers to the element. */ } | ||
| 87 | +// ... | ||
| 88 | +// }); | ||
| 89 | +// | ||
| 90 | +// Multiple calls will add to exisiting rules. Event.addBehavior.reassignAfterAjax and | ||
| 91 | +// Event.addBehavior.autoTrigger can be adjusted to needs. | ||
| 92 | +Event.addBehavior = function(rules) { | ||
| 93 | + var ab = this.addBehavior; | ||
| 94 | + Object.extend(ab.rules, rules); | ||
| 95 | + | ||
| 96 | + if (!ab.responderApplied) { | ||
| 97 | + Ajax.Responders.register({ | ||
| 98 | + onComplete : function() { | ||
| 99 | + if (Event.addBehavior.reassignAfterAjax) | ||
| 100 | + setTimeout(function() { ab.reload() }, 10); | ||
| 101 | + } | ||
| 102 | + }); | ||
| 103 | + ab.responderApplied = true; | ||
| 104 | + } | ||
| 105 | + | ||
| 106 | + if (ab.autoTrigger) { | ||
| 107 | + this.onReady(ab.load.bind(ab, rules)); | ||
| 108 | + } | ||
| 109 | + | ||
| 110 | +}; | ||
| 111 | + | ||
| 112 | +Event.delegate = function(rules) { | ||
| 113 | + return function(e) { | ||
| 114 | + var element = $(e.element()); | ||
| 115 | + for (var selector in rules) | ||
| 116 | + if (element.match(selector)) return rules[selector].apply(this, $A(arguments)); | ||
| 117 | + } | ||
| 118 | +} | ||
| 119 | + | ||
| 120 | +Object.extend(Event.addBehavior, { | ||
| 121 | + rules : {}, cache : [], | ||
| 122 | + reassignAfterAjax : false, | ||
| 123 | + autoTrigger : true, | ||
| 124 | + | ||
| 125 | + load : function(rules) { | ||
| 126 | + for (var selector in rules) { | ||
| 127 | + var observer = rules[selector]; | ||
| 128 | + var sels = selector.split(','); | ||
| 129 | + sels.each(function(sel) { | ||
| 130 | + var parts = sel.split(/:(?=[a-z]+$)/), css = parts[0], event = parts[1]; | ||
| 131 | + $$(css).each(function(element) { | ||
| 132 | + if (event) { | ||
| 133 | + observer = Event.addBehavior._wrapObserver(observer); | ||
| 134 | + $(element).observe(event, observer); | ||
| 135 | + Event.addBehavior.cache.push([element, event, observer]); | ||
| 136 | + } else { | ||
| 137 | + if (!element.$$assigned || !element.$$assigned.include(observer)) { | ||
| 138 | + if (observer.attach) observer.attach(element); | ||
| 139 | + | ||
| 140 | + else observer.call($(element)); | ||
| 141 | + element.$$assigned = element.$$assigned || []; | ||
| 142 | + element.$$assigned.push(observer); | ||
| 143 | + } | ||
| 144 | + } | ||
| 145 | + }); | ||
| 146 | + }); | ||
| 147 | + } | ||
| 148 | + }, | ||
| 149 | + | ||
| 150 | + unload : function() { | ||
| 151 | + this.cache.each(function(c) { | ||
| 152 | + Event.stopObserving.apply(Event, c); | ||
| 153 | + }); | ||
| 154 | + this.cache = []; | ||
| 155 | + }, | ||
| 156 | + | ||
| 157 | + reload: function() { | ||
| 158 | + var ab = Event.addBehavior; | ||
| 159 | + ab.unload(); | ||
| 160 | + ab.load(ab.rules); | ||
| 161 | + }, | ||
| 162 | + | ||
| 163 | + _wrapObserver: function(observer) { | ||
| 164 | + return function(event) { | ||
| 165 | + if (observer.call(this, event) === false) event.stop(); | ||
| 166 | + } | ||
| 167 | + } | ||
| 168 | + | ||
| 169 | +}); | ||
| 170 | + | ||
| 171 | +Event.observe(window, 'unload', Event.addBehavior.unload.bind(Event.addBehavior)); | ||
| 172 | + | ||
| 173 | +// A silly Prototype style shortcut for the reckless | ||
| 174 | +$$$ = Event.addBehavior.bind(Event); | ||
| 175 | + | ||
| 176 | +// Behaviors can be bound to elements to provide an object orientated way of controlling elements | ||
| 177 | +// and their behavior. Use Behavior.create() to make a new behavior class then use attach() to | ||
| 178 | +// glue it to an element. Each element then gets it's own instance of the behavior and any | ||
| 179 | +// methods called onxxx are bound to the relevent event. | ||
| 180 | +// | ||
| 181 | +// Usage: | ||
| 182 | +// | ||
| 183 | +// var MyBehavior = Behavior.create({ | ||
| 184 | +// onmouseover : function() { this.element.addClassName('bong') } | ||
| 185 | +// }); | ||
| 186 | +// | ||
| 187 | +// Event.addBehavior({ 'a.rollover' : MyBehavior }); | ||
| 188 | +// | ||
| 189 | +// If you need to pass additional values to initialize use: | ||
| 190 | +// | ||
| 191 | +// Event.addBehavior({ 'a.rollover' : MyBehavior(10, { thing : 15 }) }) | ||
| 192 | +// | ||
| 193 | +// You can also use the attach() method. If you specify extra arguments to attach they get passed to initialize. | ||
| 194 | +// | ||
| 195 | +// MyBehavior.attach(el, values, to, init); | ||
| 196 | +// | ||
| 197 | +// Finally, the rawest method is using the new constructor normally: | ||
| 198 | +// var draggable = new Draggable(element, init, vals); | ||
| 199 | +// | ||
| 200 | +// Each behaviour has a collection of all its instances in Behavior.instances | ||
| 201 | +// | ||
| 202 | +var Behavior = { | ||
| 203 | + create: function() { | ||
| 204 | + var parent = null, properties = $A(arguments); | ||
| 205 | + if (Object.isFunction(properties[0])) | ||
| 206 | + parent = properties.shift(); | ||
| 207 | + | ||
| 208 | + var behavior = function() { | ||
| 209 | + var behavior = arguments.callee; | ||
| 210 | + if (!this.initialize) { | ||
| 211 | + var args = $A(arguments); | ||
| 212 | + | ||
| 213 | + return function() { | ||
| 214 | + var initArgs = [this].concat(args); | ||
| 215 | + behavior.attach.apply(behavior, initArgs); | ||
| 216 | + }; | ||
| 217 | + } else { | ||
| 218 | + var args = (arguments.length == 2 && arguments[1] instanceof Array) ? | ||
| 219 | + arguments[1] : Array.prototype.slice.call(arguments, 1); | ||
| 220 | + | ||
| 221 | + this.element = $(arguments[0]); | ||
| 222 | + this.initialize.apply(this, args); | ||
| 223 | + behavior._bindEvents(this); | ||
| 224 | + behavior.instances.push(this); | ||
| 225 | + } | ||
| 226 | + }; | ||
| 227 | + | ||
| 228 | + Object.extend(behavior, Class.Methods); | ||
| 229 | + Object.extend(behavior, Behavior.Methods); | ||
| 230 | + behavior.superclass = parent; | ||
| 231 | + behavior.subclasses = []; | ||
| 232 | + behavior.instances = []; | ||
| 233 | + | ||
| 234 | + if (parent) { | ||
| 235 | + var subclass = function() { }; | ||
| 236 | + subclass.prototype = parent.prototype; | ||
| 237 | + behavior.prototype = new subclass; | ||
| 238 | + parent.subclasses.push(behavior); | ||
| 239 | + } | ||
| 240 | + | ||
| 241 | + for (var i = 0; i < properties.length; i++) | ||
| 242 | + behavior.addMethods(properties[i]); | ||
| 243 | + | ||
| 244 | + if (!behavior.prototype.initialize) | ||
| 245 | + behavior.prototype.initialize = Prototype.emptyFunction; | ||
| 246 | + | ||
| 247 | + behavior.prototype.constructor = behavior; | ||
| 248 | + | ||
| 249 | + return behavior; | ||
| 250 | + }, | ||
| 251 | + Methods : { | ||
| 252 | + attach : function(element) { | ||
| 253 | + return new this(element, Array.prototype.slice.call(arguments, 1)); | ||
| 254 | + }, | ||
| 255 | + _bindEvents : function(bound) { | ||
| 256 | + for (var member in bound) | ||
| 257 | + if (member.match(/^on(.+)/) && typeof bound[member] == 'function') | ||
| 258 | + bound.element.observe(RegExp.$1, Event.addBehavior._wrapObserver(bound[member].bindAsEventListener(bound))); | ||
| 259 | + } | ||
| 260 | + } | ||
| 261 | +}; | ||
| 262 | + | ||
| 263 | + | ||
| 264 | + | ||
| 265 | +Remote = Behavior.create({ | ||
| 266 | + initialize: function(options) { | ||
| 267 | + if (this.element.nodeName == 'FORM') new Remote.Form(this.element, options); | ||
| 268 | + else new Remote.Link(this.element, options); | ||
| 269 | + } | ||
| 270 | +}); | ||
| 271 | + | ||
| 272 | +Remote.Base = { | ||
| 273 | + initialize : function(options) { | ||
| 274 | + this.options = Object.extend({ | ||
| 275 | + evaluateScripts : true | ||
| 276 | + }, options || {}); | ||
| 277 | + | ||
| 278 | + this._bindCallbacks(); | ||
| 279 | + }, | ||
| 280 | + _makeRequest : function(options) { | ||
| 281 | + if (options.update) new Ajax.Updater(options.update, options.url, options); | ||
| 282 | + else new Ajax.Request(options.url, options); | ||
| 283 | + return false; | ||
| 284 | + }, | ||
| 285 | + _bindCallbacks: function() { | ||
| 286 | + $w('onCreate onComplete onException onFailure onInteractive onLoading onLoaded onSuccess').each(function(cb) { | ||
| 287 | + if (Object.isFunction(this.options[cb])) | ||
| 288 | + this.options[cb] = this.options[cb].bind(this); | ||
| 289 | + }.bind(this)); | ||
| 290 | + } | ||
| 291 | +} | ||
| 292 | + | ||
| 293 | +Remote.Link = Behavior.create(Remote.Base, { | ||
| 294 | + onclick : function() { | ||
| 295 | + var options = Object.extend({ url : this.element.href, method : 'get' }, this.options); | ||
| 296 | + return this._makeRequest(options); | ||
| 297 | + } | ||
| 298 | +}); | ||
| 299 | + | ||
| 300 | + | ||
| 301 | +Remote.Form = Behavior.create(Remote.Base, { | ||
| 302 | + onclick : function(e) { | ||
| 303 | + var sourceElement = e.element(); | ||
| 304 | + | ||
| 305 | + if (['input', 'button'].include(sourceElement.nodeName.toLowerCase()) && | ||
| 306 | + sourceElement.type == 'submit') | ||
| 307 | + this._submitButton = sourceElement; | ||
| 308 | + }, | ||
| 309 | + onsubmit : function() { | ||
| 310 | + var options = Object.extend({ | ||
| 311 | + url : this.element.action, | ||
| 312 | + method : this.element.method || 'get', | ||
| 313 | + parameters : this.element.serialize({ submit: this._submitButton.name }) | ||
| 314 | + }, this.options); | ||
| 315 | + this._submitButton = null; | ||
| 316 | + return this._makeRequest(options); | ||
| 317 | + } | ||
| 318 | +}); | ||
| 319 | + | ||
| 320 | +Observed = Behavior.create({ | ||
| 321 | + initialize : function(callback, options) { | ||
| 322 | + this.callback = callback.bind(this); | ||
| 323 | + this.options = options || {}; | ||
| 324 | + this.observer = (this.element.nodeName == 'FORM') ? this._observeForm() : this._observeField(); | ||
| 325 | + }, | ||
| 326 | + stop: function() { | ||
| 327 | + this.observer.stop(); | ||
| 328 | + }, | ||
| 329 | + _observeForm: function() { | ||
| 330 | + return (this.options.frequency) ? new Form.Observer(this.element, this.options.frequency, this.callback) : | ||
| 331 | + new Form.EventObserver(this.element, this.callback); | ||
| 332 | + }, | ||
| 333 | + _observeField: function() { | ||
| 334 | + return (this.options.frequency) ? new Form.Element.Observer(this.element, this.options.frequency, this.callback) : | ||
| 335 | + new Form.Element.EventObserver(this.element, this.callback); | ||
| 336 | + } | ||
| 337 | +}); | ||
| 338 | + |