https://www.novaewebs.com/_js/prototypeExtensions.js

1Script = {
2	
3	loadedScripts: {},
4	
5	defaultScriptDirectory: '/_js',
6	
7	require: function( src ){
8		/*
9		if (!Script.loadedScripts[ src ]){
10			if ( src.find('/') == -1 ) { src = Script.defaultScriptDirectory + src; }
11			if ( src.find('.js') == -1 ) { src = src + '.js'; }
12			*/
13			document.write('<script type="text/javascript" src="'+src+'"></script>');
14			/*
15			Script.loadedScripts[ src ] = true;
16		}
17		*/
18	}
19
20}
21
22// Sets a window.loaded variable so we can test to see if the page has loaded yet.
23// This is used with Event.defer
24if ( window.loaded == null ){
25	Event.observe( window, 'load', function(){ window.loaded = true })
26} else {
27	window.loaded = false;
28}
29
30debug = function(){};
31$D = function(){};
32$DD = function(){};
33
34ImageMethods = {
35	
36	encode: function(){
37		return this.src + ',' + this.width + ',' + this.height;
38	}
39	
40}
41
42function $I(src,width,height){
43	var image = new Image(width,height);
44	image.src = src;
45	Object.extend( image, ImageMethods );
46	return image;
47}
48
49Element.CustomMethods = {
50
51	// finds the nearest parent where executing method(parent) on the parent equals true
52	findParent: function( element, method ){
53		return $(element).ancestors().find( method );
54	},
55	
56	position: function( element, left, top ){
57		$(element).setStyle({ left: left+'px', top: top+'px' })
58	},
59	
60  positionAt: function( element, target, hPos, vPos, hPad, vPad, pagePadding ) {
61		var source = $(element);
62		var destination = $(target);
63		
64		hPos = hPos || 'left';
65		vPos = vPos || 'below';
66		hPad = hPad || 0;
67		vPad = vPad || 0;
68		pagePadding = pagePadding || 0;
69		
70		var offset     = Position.cumulativeOffset( destination );
71		var dSize      = Element.getDimensions( destination );
72		var sSize      = Element.getDimensions( source );
73		var pageWidth  = Position.getPageDimensions().width;
74		var top, left;
75		
76		switch ( hPos ) {
77			case 'left'   : left = offset[0] + hPad; break;
78			case 'overright' : left = offset[0] + dSize.width; break;
79			case 'center' : left = offset[0] + ( dSize.width - sSize.width ) / 2; break;
80			case 'right'  : left = offset[0] + dSize.width - sSize.width - hPad; break;
81		}
82		switch ( vPos ) {
83			case 'above'  : top = offset[1] - sSize.height - vPad; break;
84			case 'top'    : top = offset[1] + vPad; break;
85			case 'middle' : top = offset[1] + ( dSize.height - sSize.height ) / 2; break;
86			case 'bottom' : top = offset[1] + dSize.height - sSize.height - vPad; break;
87			case 'below'  : top = offset[1] + dSize.height + vPad; break;
88		}
89		
90		if ( top < pagePadding )
91			top = pagePadding;
92		if ( left + sSize.width > pageWidth - pagePadding )
93			left = pageWidth - pagePadding - sSize.width;
94		if ( left < pagePadding )
95			left = pagePadding
96			
97		source.position( left, top )
98  },
99  
100  setBackgroundImage: function( element, src ){
101		var ext = src.split('.').pop();
102		if ( ext.toLowerCase() == 'png' && Browser.ie5_5up() ) {
103			element.style.filter =
104				"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "');"
105		} else {
106			element.style.backgroundImage = 'url(' + src + ')';
107		}
108  },
109  
110  setImage: function( element, image, options ){
111		if ( image && image.src ) {
112	  	element = $( element );
113			var options = Object.extend( { src: true, width: true, height: true }, options );
114			var style = {}
115			if ( options.src ) {
116				if ( element.tagName == 'IMG' ) {
117					element.src = image.src;
118				} else {
119					element.setBackgroundImage( image.src );
120				}
121			}
122			if ( options.width ) style.width = image.width + 'px'
123			if ( options.height ) style.height = image.height + 'px'
124			element.setStyle( style );
125		}
126	},
127	
128	setValue: function( element, value, options ){
129  	// option to allow loose matching on select boxes
130  	options = Object.extend( { loose: false }, options )
131		element = $( element );
132		switch ( element.tagName.toLowerCase() ) {
133			case "input" :
134			case "textarea" :
135				switch ( element.type ){
136					// TODO: check the checked code
137					// TODO: Consider changing this code. It is not consistent with $F()
138					// from the prototype library.
139					case "checkbox" : element.checked = value ? true : false; break;
140					default         : element.value = value; break;
141				}
142				break;
143			case "select" :
144				// loose matching only cares about first word and doesn't check case
145				if (options.loose) { value = value.split(', ')[0].toLowerCase(); }
146				for (var i=0;i<element.length;i++) {
147					var option = element.options[i].value;
148					if (options.loose) option = option.split(', ')[0].toLowerCase();
149					if (option==value) {
150						element.options[i].selected = true;
151						break;
152					}
153				}
154				break;
155		}
156	}
157  
158}
159
160Element.addMethods( Element.CustomMethods );
161//Object.extend( Element.Methods, Element.CustomMethods );
162
163/*
164	initialize: function( element, event, options ){
165		this.html = ''; // response html goes here
166		this.element = element;
167		this.event = event;
168		this.options = Object.extend( {
169			url: location.href.match(/([^#])+/)[0], // defaults to current page w/o hash
170			parameters: {},
171			onRequest: function(){}, // when request gets initiated
172			onCancel: function(){} // if request is interrupted
173		}, options)
174		Event.observe( element, event, this.onEvent.bindAsEventListener(this) )
175	},
176	
177	onEvent: function(e){

178		Event.stop( e );
179		this.ajax = new Ajax.Request( this.options.url, {
180			method: 'post',
181			parameters: $H( this.options.parameters ).toQueryString(),
182			onComplete: this.onComplete.bind( this )
183		})
184	},
185	
186	onComplete: function( result ){
187		Ajax.evalScriptsWithHTML( result.responseText );
188	}
189*/
190
191// Makes a request to the server.
192// Renders the resulting responseText without the scripts into a variable called "html".
193// Executes the scripts in the responseText.
194// Scripts have access to the "html" variable.
195// Displays an indicator as it retrieves.
196
197Ajax.showActivity = function( container ){}
198
199Ajax.Activity = Class.create();
200Ajax.Activity.prototype = {
201	
202	getImage: function(){
203		return $I( '/s/ajax/activity.gif', 16, 16);
204	},
205	
206	initialize: function( container ){
207		if (!this.image) { this.image = $( this.getImage() ); }
208		this.image.show();
209		container = $(container);
210		container.parentNode.insertBefore( this.image, container.nextSibling );
211	},
212	
213	close: function(){
214		this.image.hide();
215	}
216	
217}
218
219//
220// new SimpleRequest({ parameters: { blockType: 'text' } })
221Ajax.SimpleRequest = Class.create();
222Ajax.SimpleRequest.prototype = {
223	
224	initialize: function( options ){
225		this.options = Object.extend( {
226			url: location.href.match(/([^#])+/)[0], // defaults to current page w/o hash
227			parameters: {},
228			indicatorElement: '' // where should we display the indicator element?
229		}, options)
230	}
231	
232}
233
234// converts a framework style encoded image to a JavaScript image
235String.prototype.toImage = function(code){
236	var imageParts = this.split(',');
237	// TODO: test below and if it works, use it
238	// return ( imageParts.length >= 3 ) ? $I( imageParts[0], imageParts[1], imageParts[2] ) : null;
239	if ( imageParts.length >= 3 ) {
240		return $I( imageParts[0], imageParts[1], imageParts[2] )
241	} else {
242		return null;
243	}
244}
245
246/*	Identifiers based on this link but code is all new
247		http://www.webreference.com/tools/browser/javascript.html
248		*/
249Browser = {
250	agent: function(){ return window.navigator.userAgent; },
251	agentContains: function(s){ return Browser.agent().indexOf(s) != -1; },
252	ie: function(){ return Browser.agentContains('MSIE') },
253	gecko: function(){ return Browser.agentContains('Gecko')},
254	firefox: function(){ throw 'Use Browser.gecko() instead'; },
255	version: function(){
256		var agent = Browser.agent();
257		if(Browser.ie()){
258			return parseFloat(agent.split('MSIE')[1])
259		}else{
260			return parseFloat(agent.split('/')[1])
261		}
262	},
263	ie5_up: function(){ return Browser.ie() && (Browser.version() >= 5.0) },
264	ie5_5up: function(){ return Browser.ie() && (Browser.version() >= 5.5) }
265}
266
267
268// Same as extend but throws an error if the key doesn't exist
269// in the destination. Stricter checking = better code.
270Object.extend( Object,{
271	
272	restrict: function(destination, source){
273		for (property in source) {
274			if ( destination[property] === undefined ){
275				throw "The key "+property+" could not be found in the destination object.";
276			}
277		}
278		return Object.extend(destination, source);
279	}
280
281})
282// consider adding a "require" method to object
283
284
285Object.extend( Event, {
286	
287	KEY_PGUP: 33,
288	KEY_PGDN: 34,
289	
290	// DEPRECATED: Use Event.defer instead
291	observeWindowLoad: function(func){
292		Event.observe(window,'load',func)
293	},
294	
295	// Event.defer is the preferred way of waiting for the window to
296	// load before executing JavaScript. This supports the use of
297	// deferring function execution at window.load time while still
298	// allowing the function to execute if it is called as a response
299	// to an AJAX call. This is because an AJAX call that executes
300	// code rendered at window.load time will not execute because the
301	// window.onload event has already fired and won't fire again.
302	defer: function(func){
303		window.loaded ? func() : Event.observe( window, 'load', func);
304	},
305	
306	// TODO: Not sure if this is necessary. Writing it out doesn't seem to be
307	// that bad and reduces the extensions code.
308	observeAll: function(elements, name, observer){
309		var elements = $A(elements);
310		elements.each(function(element){
311			Event.observe(element, name, observer)
312		})
313	},
314	
315	cancel: function(event){
316		// TEST: TODO: Test then switch to the code below. 
317		// event.stopPropogation ? event.stopPropogation() : event.cancelBubble = true;
318		if (event.stopPropogation) {
319			event.stopPropagation();
320		} else {
321			event.cancelBubble = true;
322		}
323	}
324	
325})
326
327Object.extend(Element,{
328	
329  findElement: function(element, tagName) {
330    while (element.parentNode && (!element.tagName ||
331        (element.tagName.toUpperCase() != tagName.toUpperCase())))
332      element = element.parentNode;
333    return element;
334  },
335  
336  styleAll: function(elements, style) {
337  	var elements = $A(elements);
338  	elements.each(function(element){
339  		Element.setStyle(element,style);
340  	})
341  },
342  
343  // DEPRECATED: Use $(element).setValue instead
344  setValue: function(element, value, options){
345  	// option to allow loose matching on select boxes
346  	options = Object.extend({loose: false},options)
347		element = $(element);
348		switch (element.tagName.toLowerCase()) {
349			case "input" :
350			case "textarea" :
351				switch (element.type){
352					case "checkbox" :
353						element.checked = value ? true : false;
354						break;
355					default :
356						element.value = value;
357						break;
358				}
359				break;
360			case "select" :
361				// loose matching only cares about first word and doesn't check case
362				if (options.loose) { value = value.split(', ')[0].toLowerCase(); }
363				for (var i=0;i<element.length;i++) {
364					var option = element.options[i].value;
365					if (options.loose) {
366						option = option.split(', ')[0].toLowerCase();
367					}
368					if (option==value) {
369						//  | (parseInt(value)>0 & parseInt(option)==parseInt(value))
370						element.options[i].selected = true;
371						break;
372					}
373				}
374				break;
375		}
376  },
377  
378  // DEPRECATED: Use $(element).setImage instead
379	// displays the image in the element.

380	// different code for IMG and other tags like DIV.
381	// options to set src, width, height only
382  setImage: function(element, image, options){
383		var options = Object.extend({
384			src: true,
385			width: true,
386			height: true
387		},options);
388		if (image) {
389			// image src/background
390			if (options.src) {
391				var element = $(element);
392				if (element.tagName == 'IMG') {
393					element.src = image.src;
394				} else {
395					var ext = image.src.split('.').pop();
396					if (ext.toLowerCase() == 'png' && Browser.ie5_5up()) {
397						element.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + image.src + "');"
398					} else {
399						element.style.backgroundImage = 'url(' + image.src + ')';
400					}
401				}
402			}
403			// width / height
404			if (options.width) { element.style.width = image.width }
405			if (options.height) { element.style.height = image.height }
406		}
407	}
408  
409})
410
411// String manipulation
412Object.extend(String.prototype,{
413	
414	// trims whitespace. can't believe it's not part of prototype.
415	trim: function() {
416		return this.replace(/^\s+|\s+$/g, '');
417	},
418	
419	// converts camel case (backgroundColor) into a normal style (background-color)
420	decamelize: function(){
421		var s = this;
422		var regex = /[A-Z]/;
423		for (var i=0; i<100; i++){
424			var pos = s.search(regex);
425			if(pos==-1) break;
426			s = s.slice(0,pos) + '-' + s.substr(pos,1).toLowerCase() + s.slice(pos+1,s.length);
427		}
428		// TODO: there is a bit of ugliness here. Why does it need to be trimmed?
429		// see if we can clean this up later.
430		s = s.trim();
431		return s;
432	},
433	
434	capitalize: function(){
435		return this.charAt(0).toUpperCase() + this.substr(1);
436	}
437
438})
439
440
441
442Style = new Object();
443Object.extend(Style,{
444	
445	encode: function(obj){
446		var s = '';
447		for (name in obj){
448			s += name.decamelize() + ": " + obj[name] + "; ";
449		}
450		return s;
451	},
452	
453	decode: function(style){
454		var obj = new Object();
455		var array = $A(style.trim().split(';'));
456		array.each(function(declaration){
457			if(declaration.length>0){
458				var split = declaration.trim().split(':');
459				var property = split[0].trim().camelize();
460				var value = split[1].trim();
461				obj[property] = value;
462			}
463		})
464		return obj;
465	}
466
467})
468
469// Positioning helpers. Extends Position in prototype.js and util.js
470Object.extend(Position,{
471
472	// DEPRECATED: Use $(element).positionAt instead
473	// Preferred method to position an object in relation to another object
474	place: function(source,destination,options){
475		var source = $(source);
476		var destination = $(destination);
477		var options = Object.extend({
478			verticalPosition: 'top', // above, top, middle, bottom, below
479			verticalPadding: 0,
480			horizontalPosition: 'left', // left, center, right
481			horizontalPadding: 0,
482			pagePadding: 2
483		},options)
484		var v = options.verticalPadding;
485		var h = options.horizontalPadding;
486		var offset = Position.cumulativeOffset(destination);
487		var destSize = Element.getDimensions(destination);
488		var sourceSize = Element.getDimensions(source);
489		var top, left;
490		switch (options.verticalPosition) {
491			case 'above' :
492				top = offset[1] - sourceSize.height - v;
493				break;
494			case 'top' :
495				top = offset[1] + v;
496				break;
497			case 'middle' :
498				top = offset[1] + (destSize.height - sourceSize.height)/2;
499				break;
500			case 'bottom' :
501				top = offset[1] + destSize.height - sourceSize.height - v;
502				break;
503			case 'below' :
504				top = offset[1] + destSize.height + v;
505				break;
506		}
507		if (top<0) top = 0;
508		switch (options.horizontalPosition) {
509			case 'left' :
510				left = offset[0] + h;
511				break;
512			case 'center' :
513				left = offset[0] + (destSize.width - sourceSize.width)/2;
514				break;
515			case 'right' :
516				left = offset[0] + destSize.width - sourceSize.width - v;
517				break;
518		}
519		
520		var pageWidth = Position.getPageDimensions().width;
521		
522		if ( left + sourceSize.width > pageWidth-options.pagePadding ) {
523			left = pageWidth - options.pagePadding - sourceSize.width;
524		}
525
526		Element.setStyle(source,{
527			top: top,
528			left: left
529		})
530	},
531			
532	// deprecated
533	getPageWidth: function(){
534		return document.body.clientWidth;
535	},
536	
537	// deprecated
538	getPageHeight:  function(){
539		return document.body.clientHeight;
540	},
541	
542	getPageDimensions: function(){
543		return {
544			width: document.body.clientWidth,
545			height: document.body.clientHeight
546		}
547	},
548	
549	getRect: function(element){
550		var pos = Position.positionedOffset(element);
551		var width = element.offsetWidth;
552		var height = element.offsetHeight;
553		return {
554			left: pos[0],
555			top: pos[1],
556			width: width,
557			height: height,
558			right: pos[0]+width,
559			bottom: pos[1]+height
560		};
561	},
562	
563	// helper for positionedRect and cumulativeRect
564	_rect: function(element,left,top){
565		var width = element.offsetWidth;
566		var height = element.offsetHeight;
567		return {
568			left: left,
569			top: top,
570			width: width,
571			height: height,
572			right: left+width,
573			bottom: top+height
574		}
575	},
576	
577	positionedRect: function(element){
578		var pos = Position.positionedOffset(element);
579		return Position._rect(element,pos[0],pos[1]);
580	},
581	
582	cumulativeRect: function(element){
583		var pos = Position.cumulativeOffset(element);
584		return Position._rect(element,pos[0],pos[1]);
585	},
586	
587	
588	// DEPRECATED:
589	// deprecated I think. Can't think of where I'd use this now
590	// that the Panel2 has been created.
591	positionAround: function(button,element,padding){
592		// sets default padding to 2 pixels
593		var padding = padding?padding:2;
594		var buttonRect = Position.getRect(button);
595		var elementRect = Position.getRect(element);
596		var pageWidth = Position.getPageWidth();
597		var left = 0;

598		if(buttonRect.left+elementRect.width <= pageWidth-padding){
599			left = buttonRect.left;
600		}else{
601			left = pageWidth-elementRect.width-padding;
602			if(left<padding){left = padding}
603		}
604		element.style.left = left;
605		element.style.top = buttonRect.bottom+padding;
606	},
607	
608	// DEPRECATED: Use Position.place instead.
609	// A version of position around that doesn't care about position: relative.
610	// Important for positioning elements that are added to document.body
611	// instead of inside of a position: relative div
612	positionAround2: function(button,element,padding){
613		var padding = padding ? padding: 2;
614		var pageWidth = Position.getPageWidth();
615		var buttonSize = Element.getDimensions(button);
616		var buttonPos = Position.cumulativeOffset(button);
617		var elementSize = Element.getDimensions(element);
618		var left = buttonPos[0];
619		var topPos = buttonPos[1] + buttonSize.height + padding;
620		
621		if ((elementSize.width + left) > pageWidth){
622			left = pageWidth - elementSize.width - padding;
623		}
624		Element.setStyle(element,{
625			left: left,
626			top: topPos
627		})
628	},
629	
630	// DEPRECATED: Use Position.place instead
631	positionCentered: function(element){
632		var rect = Position.getRect(element);
633		var left = (Position.getPageWidth() - rect.width) / 2;
634		var top = (Position.getPageHeight() - rect.height) / 2;
635		Element.setStyle(element,{
636			left: parseInt(left) + 'px',
637			top: parseInt(top) + 'px'
638		})
639	},
640	
641	getScrollTop: function(){
642		Position.prepare();
643		return this.deltaY;
644	}
645	
646})
647