package HTML::Prototype; use strict; use base 'Class::Accessor::Fast'; our $VERSION = '1.11'; our $prototype = do { local $/; }; my $callbacks = [qw/loading loaded interactive complete/]; =head1 NAME HTML::Prototype - Generate HTML and Javascript for the Prototype library =head1 SYNOPSIS use HTML::Prototype; my $prototype = HTML::Prototype->new; print $prototype->define_javascript_functions; print $prototype->form_remote_tag(...); print $prototype->link_to_function(...); print $prototype->link_to_remote(...); print $prototype->observe_field(...); print $prototype->observe_form(...); print $prototype->periodically_call_remote(...); print $prototype->submit_to_remote(...); =head1 DESCRIPTION Some code generators for Prototype, the famous JavaScript oo library. This is mostly a port of the Ruby on Rails helper tags for JavaScript for use in L. =head2 METHODS =head3 $prototype->define_javascript_functions Returns the library of JavaScript functions and objects, in a script block. Notes for L users: You can use C } =head3 $prototype->form_remote_tag(\%options) Returns a form tag that will submit using XMLHttpRequest in the background instead of the regular reloading POST arrangement. Even though its using JavaScript to serialize the form elements, the form submission will work just like a regular submission as viewed by the receiving side. The options for specifying the target with C and defining callbacks is the same as C. =cut sub form_remote_tag { my ( $self, $options ) = @_; $options->{form} = 1; my $code = _remote_function($options); return qq/
/; } =head3 $prototype->link_to_function( $name, $function ) Returns a link that will trigger a JavaScript function using the onClick handler and return false after the fact. Examples: $prototype->link_to_function( "Greeting", "alert('Hello world!') ) $prototype->link_to_function( '', 'do_delete()' ) =cut sub link_to_function { my ( $self, $name, $function ) = @_; return qq|$name|; } =head3 $prototype->link_to_remote( $id, \%options ) Returns a link to a remote action defined by options C thats called in the background using XMLHttpRequest. The result of that request can then be inserted into a DOM object whose id can be specified with options->{update}. Examples: $prototype->link_to_remote( 'Delete', { update => 'posts', url => 'http://localhost/posts/' } ) $prototype->link_to_remote( '', { update => 'emails', url => 'http://localhost/refresh/' } ) By default, these remote requests are processed asynchronous during which various callbacks can be triggered (for progress indicators and the likes). Example: $prototype->link_to_remote( 'count', { url => 'http://localhost/count/', complete => 'doStuff(request)' } ) The callbacks that may be specified are: C: Called when the remote document is being loaded with data by the browser. C: Called when the browser has finished loading the remote document. C: Called when the user can interact with the remote document, even though it has not finished loading. C: Called when the XMLHttpRequest is complete. If you for some reason or another need synchronous processing (that will block the browser while the request is happening), you can specify $options->{type} = 'synchronous'. =cut sub link_to_remote { my ( $self, $id, $options ) = @_; $self->link_to_function( $id, _remote_function($options) ); } =head3 $prototype->observe_field( $id, \%options) Observes the field with the DOM ID specified by $id and makes an Ajax when its contents have changed. Required options are: C: The frequency (in seconds) at which changes to this field will be detected. C: url to be called when field content has changed. Additional options are: C: Specifies the DOM ID of the element whose innerHTML should be updated with the XMLHttpRequest response text. C: A JavaScript expression specifying the parameters for the XMLHttpRequest. This defaults to value, which in the evaluated context refers to the new field value. Additionally, you may specify any of the options documented in C. Example TT2 template in L: [% c.prototype.define_javascript_functions %]

[% page.title %]

[% url = base _ 'edit/' _ page.title %] [% c.prototype.observe_field( 'editor', { url => url, with => "'body='+value", update => 'view' } ) %] =cut sub observe_field { my ( $self, $id, $options ) = @_; _build_observer( 'Form.Element.Observer', $id, $options ); } =head3 $prototype->observe_form( $id, \%options ) Like C, but operates on an entire form identified by the DOM ID $id. Options are the same as C, except the default value of the C option evaluates to the serialized (request string) value of the form. =cut sub observe_form { my ( $self, $id, $options ) = @_; _build_observer( 'Form.Observer', $id, $options ); } =head3 $prototype->periodically_call_remote( \%options ) Periodically calls the specified url $options->{url} every $options->{frequency} seconds (default is 10). Usually used to update a specified div $options->{update} with the results of the remote call. The options for specifying the target with C and defining callbacks is the same as C. =cut sub periodically_call_remote { my ( $self, $options ) = @_; my $frequency = $options->{frequency} || 10; my $code = _remote_function($options); return <<""; } =head3 $prototype->submit_to_remote( $name, $value, \%options ) Returns a button input tag that will submit form using XMLHttpRequest in tghe background instead of regular reloading POST arrangement. C argument is the same as in C =cut sub submit_to_remote { my ( $self, $name, $value, $options ) = @_; my $code = _remote_function($options); $code = "$code; return false;"; return qq||; } sub _build_callbacks { my $options = shift; my %callbacks; for my $callback (@$callbacks) { if ( my $code = $options->{$callback} ) { my $name = 'on' . ucfirst $callback; $callbacks{$name} = "function(request){$code}"; } } return \%callbacks; } sub _build_observer { my ( $class, $name, $options ) = @_; $options->{with} ||= 'value' if $options->{update}; my $freq = $options->{frequency} || 2; my $callback = _remote_function($options); return <<""; } sub _options_for_ajax { my $options = shift; my $js_options = _build_callbacks($options); $options->{type} ||= ''; $js_options->{asynchronous} = $options->{type} eq 'synchronous' ? 0 : 1; $js_options->{method} = $options->{method} if $options->{method}; my $position = $options->{position}; $js_options->{insertion} = "Insertion.$position" if $position; if ( $options->{form} ) { $js_options->{parameters} = 'Form.serialize(this)'; } elsif ( $options->{with} ) { $js_options->{parameters} = $options->{with}; } return '{ ' . join( ',', map { "$_: " . $js_options->{$_} } keys %$js_options ) . ' }'; } sub _remote_function { my $options = shift; my $js_options = _options_for_ajax($options); my $update = $options->{update}; my $function = $update ? " new Ajax.Updater( '$update', " : ' new Ajax.Request( '; my $url = $options->{url} || ''; $function .= " '$url', $js_options ) "; my $before = $options->{before}; $function = "$before; $function " if $before; my $after = $options->{after}; $function = "$function; $after;" if $after; my $condition = $options->{condition}; $function = "if ($condition) { $function; }" if $condition; return $function; } =head1 SEE ALSO L, L. =head1 AUTHOR Sebastian Riedel, C Built around Prototype by Sam Stephenson. Much code is ported from Ruby on Rails javascript helpers. =head1 THANK YOU Drew Taylor =head1 LICENSE This library is free software . You can redistribute it and/or modify it under the same terms as perl itself. =cut 1; __DATA__ /* Prototype: an object-oriented Javascript library, version 1.0.1 * (c) 2005 Sam Stephenson * * Prototype is freely distributable under the terms of an MIT-style license. * For details, see http://prototype.conio.net/ */ var Prototype = { Version: '1.1.0' } var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } var Abstract = new Object(); Object.prototype.extend = function(object) { for (property in object) { this[property] = object[property]; } return this; } Function.prototype.bind = function(object) { var method = this; return function() { method.apply(object, arguments); } } Function.prototype.bindAsEventListener = function(object) { var method = this; return function(event) { method.call(object, event || window.event); } } Number.prototype.toColorPart = function() { var digits = this.toString(16); if (this < 16) return '0' + digits; return digits; } var Try = { these: function() { var returnValue; for (var i = 0; i < arguments.length; i++) { var lambda = arguments[i]; try { returnValue = lambda(); break; } catch (e) {} } return returnValue; } } var Toggle = { display: function() { for (var i = 0; i < arguments.length; i++) { var element = $(arguments[i]); element.style.display = (element.style.display == 'none' ? '' : 'none'); } } } /*--------------------------------------------------------------------------*/ function $() { var elements = new Array(); for (var i = 0; i < arguments.length; i++) { var element = arguments[i]; if (typeof element == 'string') element = document.getElementById(element); if (arguments.length == 1) return element; elements.push(element); } return elements; } function getElementsByClassName(className) { var children = document.getElementsByTagName('*') || document.all; var elements = new Array(); for (var i = 0; i < children.length; i++) { var child = children[i]; var classNames = child.className.split(' '); for (var j = 0; j < classNames.length; j++) { if (classNames[j] == className) { elements.push(child); break; } } } return elements; } /*--------------------------------------------------------------------------*/ var Ajax = { getTransport: function() { return Try.these( function() {return new ActiveXObject('Msxml2.XMLHTTP')}, function() {return new ActiveXObject('Microsoft.XMLHTTP')}, function() {return new XMLHttpRequest()} ) || false; }, emptyFunction: function() {} } Ajax.Base = function() {}; Ajax.Base.prototype = { setOptions: function(options) { this.options = { method: 'post', asynchronous: true, parameters: '' }.extend(options || {}); } } Ajax.Request = Class.create(); Ajax.Request.Events = ['Uninitialized', 'Loading', 'Loaded', 'Interactive', 'Complete']; Ajax.Request.prototype = (new Ajax.Base()).extend({ initialize: function(url, options) { this.transport = Ajax.getTransport(); this.setOptions(options); try { if (this.options.method == 'get') url += '?' + this.options.parameters + '&_='; this.transport.open(this.options.method, url, true); if (this.options.asynchronous) { this.transport.onreadystatechange = this.onStateChange.bind(this); setTimeout((function() {this.respondToReadyState(1)}).bind(this), 10); } if (this.options.method == 'post') { this.transport.setRequestHeader('Connection', 'close'); this.transport.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); } this.transport.send(this.options.method == 'post' ? this.options.parameters + '&_=' : null); } catch (e) { } }, onStateChange: function() { var readyState = this.transport.readyState; if (readyState != 1) this.respondToReadyState(this.transport.readyState); }, respondToReadyState: function(readyState) { var event = Ajax.Request.Events[readyState]; (this.options['on' + event] || Ajax.emptyFunction)(this.transport); } }); Ajax.Updater = Class.create(); Ajax.Updater.prototype = (new Ajax.Base()).extend({ initialize: function(container, url, options) { this.container = $(container); this.setOptions(options); if (this.options.asynchronous) { this.onComplete = this.options.onComplete; this.options.onComplete = this.updateContent.bind(this); } this.request = new Ajax.Request(url, this.options); if (!this.options.asynchronous) this.updateContent(); }, updateContent: function() { if (!this.options.insertion) { this.container.innerHTML = this.request.transport.responseText; } else { new this.options.insertion(this.container, this.request.transport.responseText); } if (this.onComplete) { setTimeout((function() {this.onComplete(this.request)}).bind(this), 10); } } }); /*--------------------------------------------------------------------------*/ var Field = { clear: function() { for (var i = 0; i < arguments.length; i++) $(arguments[i]).value = ''; }, focus: function(element) { $(element).focus(); }, present: function() { for (var i = 0; i < arguments.length; i++) if ($(arguments[i]).value == '') return false; return true; } } /*--------------------------------------------------------------------------*/ var Form = { serialize: function(form) { var elements = Form.getElements($(form)); var queryComponents = new Array(); for (var i = 0; i < elements.length; i++) { var queryComponent = Form.Element.serialize(elements[i]); if (queryComponent) queryComponents.push(queryComponent); } return queryComponents.join('&'); }, getElements: function(form) { form = $(form); var elements = new Array(); for (tagName in Form.Element.Serializers) { var tagElements = form.getElementsByTagName(tagName); for (var j = 0; j < tagElements.length; j++) elements.push(tagElements[j]); } return elements; } } Form.Element = { serialize: function(element) { element = $(element); var method = element.tagName.toLowerCase(); var parameter = Form.Element.Serializers[method](element); if (parameter) return encodeURIComponent(parameter[0]) + '=' + encodeURIComponent(parameter[1]); }, getValue: function(element) { element = $(element); var method = element.tagName.toLowerCase(); var parameter = Form.Element.Serializers[method](element); if (parameter) return parameter[1]; } } Form.Element.Serializers = { input: function(element) { switch (element.type.toLowerCase()) { case 'hidden': case 'password': case 'text': return Form.Element.Serializers.textarea(element); case 'checkbox': case 'radio': return Form.Element.Serializers.inputSelector(element); } return false; }, inputSelector: function(element) { if (element.checked) return [element.name, element.value]; }, textarea: function(element) { return [element.name, element.value]; }, select: function(element) { var index = element.selectedIndex; return [element.name, (index >= 0) ? element.options[index].value : '']; } } /*--------------------------------------------------------------------------*/ Abstract.TimedObserver = function() {} Abstract.TimedObserver.prototype = { initialize: function(element, frequency, callback) { this.frequency = frequency; this.element = $(element); this.callback = callback; this.lastValue = this.getValue(); this.registerCallback(); }, registerCallback: function() { setTimeout(this.onTimerEvent.bind(this), this.frequency * 1000); }, onTimerEvent: function() { var value = this.getValue(); if (this.lastValue != value) { this.callback(this.element, value); this.lastValue = value; } this.registerCallback(); } } Form.Element.Observer = Class.create(); Form.Element.Observer.prototype = (new Abstract.TimedObserver()).extend({ getValue: function() { return Form.Element.getValue(this.element); } }); Form.Observer = Class.create(); Form.Observer.prototype = (new Abstract.TimedObserver()).extend({ getValue: function() { return Form.serialize(this.element); } }); /*--------------------------------------------------------------------------*/ Abstract.Insertion = function(adjacency) { this.adjacency = adjacency; } Abstract.Insertion.prototype = { initialize: function(element, content) { this.element = $(element); this.content = content; if (this.adjacency && this.element.insertAdjacentHTML) { this.element.insertAdjacentHTML(this.adjacency, this.content); } else { this.range = this.element.ownerDocument.createRange(); if (this.initializeRange) this.initializeRange(); this.fragment = this.range.createContextualFragment(this.content); this.insertContent(); } } } var Insertion = new Object(); Insertion.Before = Class.create(); Insertion.Before.prototype = (new Abstract.Insertion('beforeBegin')).extend({ initializeRange: function() { this.range.setStartBefore(this.element); }, insertContent: function() { this.element.parentNode.insertBefore(this.fragment, this.element); } }); Insertion.Top = Class.create(); Insertion.Top.prototype = (new Abstract.Insertion('afterBegin')).extend({ initializeRange: function() { this.range.selectNodeContents(this.element); this.range.collapse(true); }, insertContent: function() { this.element.insertBefore(this.fragment, this.element.firstChild); } }); Insertion.Bottom = Class.create(); Insertion.Bottom.prototype = (new Abstract.Insertion('beforeEnd')).extend({ initializeRange: function() { this.range.selectNodeContents(this.element); this.range.collapse(this.element); }, insertContent: function() { this.element.appendChild(this.fragment); } }); Insertion.After = Class.create(); Insertion.After.prototype = (new Abstract.Insertion('afterEnd')).extend({ initializeRange: function() { this.range.setStartAfter(this.element); }, insertContent: function() { this.element.parentNode.insertBefore(this.fragment, this.element.nextSibling); } }); /*--------------------------------------------------------------------------*/ var Effect = new Object(); Effect.Highlight = Class.create(); Effect.Highlight.prototype = { initialize: function(element) { this.element = $(element); this.start = 153; this.finish = 255; this.current = this.start; this.fade(); }, fade: function() { if (this.isFinished()) return; if (this.timer) clearTimeout(this.timer); this.highlight(this.element, this.current); this.current += 17; this.timer = setTimeout(this.fade.bind(this), 250); }, isFinished: function() { return this.current > this.finish; }, highlight: function(element, current) { element.style.backgroundColor = "#ffff" + current.toColorPart(); } } Effect.Fade = Class.create(); Effect.Fade.prototype = { initialize: function(element) { this.element = $(element); this.start = 100; this.finish = 0; this.current = this.start; this.fade(); }, fade: function() { if (this.isFinished()) { this.element.style.display = 'none'; return; } if (this.timer) clearTimeout(this.timer); this.setOpacity(this.element, this.current); this.current -= 10; this.timer = setTimeout(this.fade.bind(this), 100); }, isFinished: function() { return this.current <= this.finish; }, setOpacity: function(element, opacity) { opacity = (opacity == 100) ? 99.999 : opacity; element.style.filter = "alpha(opacity:"+opacity+")"; element.style.opacity = opacity/100; } } Effect.Scale = Class.create(); Effect.Scale.prototype = { initialize: function(element, percent) { this.element = $(element); this.startScale = 1.0; this.startHeight = this.element.height || this.element.offsetHeight; this.startWidth = this.element.width || this.element.offsetWidth; this.currentHeight = this.startHeight; this.currentWidth = this.startWidth; this.finishScale = (percent/100); if (this.element.style.fontSize=="") this.sizeEm = 1.0; if (this.element.style.fontSize && this.element.style.fontSize.indexOf("em")>0) this.sizeEm = parseFloat(this.element.style.fontSize); if(this.element.effect_scale) { clearTimeout(this.element.effect_scale.timer); this.startScale = this.element.effect_scale.currentScale; this.startHeight = this.element.effect_scale.startHeight; this.startWidth = this.element.effect_scale.startWidth; if(this.element.effect_scale.sizeEm) this.sizeEm = this.element.effect_scale.sizeEm; } this.element.effect_scale = this; this.currentScale = this.startScale; this.factor = this.finishScale - this.startScale; this.options = arguments[2] || {}; this.scale(); }, scale: function() { if (this.isFinished()) { this.setDimensions(this.element, this.startWidth*this.finishScale, this.startHeight*this.finishScale); if(this.sizeEm) this.element.style.fontSize = this.sizeEm*this.finishScale + "em"; if(this.options.complete) this.options.complete(this); return; } if (this.timer) clearTimeout(this.timer); if (this.options.step) this.options.step(this); this.setDimensions(this.element, this.currentWidth, this.currentHeight); if(this.sizeEm) this.element.style.fontSize = this.sizeEm*this.currentScale + "em"; this.currentScale += (this.factor/10); this.currentWidth = this.startWidth * this.currentScale; this.currentHeight = this.startHeight * this.currentScale; this.timer = setTimeout(this.scale.bind(this), 50); }, isFinished: function() { return (this.factor < 0) ? this.currentScale <= this.finishScale : this.currentScale >= this.finishScale; }, setDimensions: function(element, width, height) { element.style.width = width + 'px'; element.style.height = height + 'px'; } } Effect.Squish = Class.create(); Effect.Squish.prototype = { initialize: function(element) { this.element = $(element); new Effect.Scale(this.element, 1, { complete: this.hide.bind(this) } ); }, hide: function() { this.element.style.display = 'none'; } } Effect.Puff = Class.create(); Effect.Puff.prototype = { initialize: function(element) { this.element = $(element); this.opacity = 100; this.startTop = this.element.top || this.element.offsetTop; this.startLeft = this.element.left || this.element.offsetLeft; new Effect.Scale(this.element, 200, { step: this.fade.bind(this), complete: this.hide.bind(this) } ); }, fade: function(effect) { topd = (((effect.currentScale)*effect.startHeight) - effect.startHeight)/2; leftd = (((effect.currentScale)*effect.startWidth) - effect.startWidth)/2; if(this.element.style.position='absolute') { this.element.style.top = this.startTop-topd + "px"; this.element.style.left = this.startLeft-leftd + "px"; } else { this.element.style.top = -topd + "px"; this.element.style.left = -leftd + "px"; } this.opacity -= 10; this.setOpacity(this.element, this.opacity); if(navigator.appVersion.indexOf('AppleWebKit')>0) this.element.innerHTML += ''; //force redraw on safari }, hide: function() { this.element.style.display = 'none'; }, setOpacity: function(element, opacity) { opacity = (opacity == 100) ? 99.999 : opacity; element.style.filter = "alpha(opacity:"+opacity+")"; element.style.opacity = opacity/100; } } Effect.Appear = Class.create(); Effect.Appear.prototype = { initialize: function(element) { this.element = $(element); this.start = 0; this.finish = 100; this.current = this.start; this.fade(); }, fade: function() { if (this.isFinished()) return; if (this.timer) clearTimeout(this.timer); this.setOpacity(this.element, this.current); this.current += 10; this.timer = setTimeout(this.fade.bind(this), 100); }, isFinished: function() { return this.current > this.finish; }, setOpacity: function(element, opacity) { opacity = (opacity == 100) ? 99.999 : opacity; element.style.filter = "alpha(opacity:"+opacity+")"; element.style.opacity = opacity/100; element.style.display = ''; } } /*--------------------------------------------------------------------------*/ PeriodicalExecuter = Class.create(); PeriodicalExecuter.prototype = { initialize: function(what, frequency) { this.what = what; this.frequency = frequency; this.currentlyExecuting = false; this.registerCallback(); }, registerCallback: function() { setTimeout(this.onTimerEvent.bind(this), this.frequency * 1000); }, onTimerEvent: function() { if (!this.currentlyExecuting) { try { this.currentlyExecuting = true; this.what(); } finally { this.currentlyExecuting = false; } } this.registerCallback(); } }