/*
ModalBox - The pop-up window thingie with AJAX, based on prototype and script.aculo.us.
Copyright Andrey Okonetchnikov (andrej.okonetschnikow@gmail.com), 2006-2007
All rights reserved.
VERSION 1.5.5
Last Modified: 09/06/2007
*/
if (!window.Modalbox)
var Modalbox = new Object();
Modalbox.Methods = {
overrideAlert: false, // Override standard browser alert message with ModalBox
lang: null,
confirmCallback: Prototype.emptyFunction,
focusableElements: new Array,
options: {
title: "ModalBox Window", // Title of the ModalBox window
overlayClose: true, // Close modal box by clicking on overlay
width: 500, // Default width in px
height: 90, // Default height in px
overlayOpacity: 1, // Default overlay opacity. DEPRECATED: do this with overlayClass and CSS
overlayDuration: .25, // Default overlay fade in/out duration in seconds
overlayClass: '', // CSS hook for adding custom styles to certain modals
slideDownDuration: .5, // Default Modalbox appear slide down effect in seconds
slideUpDuration: .15, // Default Modalbox hiding slide up effect in seconds
resizeDuration: .2, // Default resize duration seconds
inactiveFade: true, // Fades MB window on inactive state
transitions: false, // Toggles transition effects. Transitions are enabled by default
closeString: "Close window", // Default title attribute for close window link
params: {},
method: 'get', // Default Ajax request method
hashUrl: true, // should the action being represented in the url after the #,
no_loading_message: false,
classic: false // the Ajax call to classic or kohana is different
},
_options: new Object,
setOptions: function(options) {
Object.extend(this.options, options || {});
},
_init: function(options) {
this.lang = new CSLang('modalbox_js');
// Setting up original options with default options
Object.extend(this._options, this.options);
this.setOptions(options);
//Create the overlay
this.MBoverlay = Builder.node("div", {id: "MB_overlay", 'class': this.options.overlayClass}, [
// Create the window
this.MBwindow = Builder.node("div", {id: "MB_window", style: "display: none"}, [
this.MBframe = Builder.node("div", {id: "MB_frame"}, [
this.MBheader = Builder.node("div", {id: "MB_header"}, [
this.MBcaption = Builder.node("div", {id: "MB_caption"}, [
Builder.node('div', {id: 'MB_title'}),
Builder.node("div", {id: "MB_ajax_loading_info", style: "display:none", className: "MB_ajax_loading_info_class"})
])
]),
this.MBclose = Builder.node("a", {id: "MB_close", title: this.options.closeString, href: "#"}, [
Builder.build("×")
]),
this.MBcontent = Builder.node("div", {id: "MB_content", className: "MB_content"}, [
this.MBloading = Builder.node("div", {id: "MB_loading"}, [Builder.build("
")])
])
])
])
]);
// Inserting into DOM
//document.body.insertBefore(this.MBwindow, document.body.childNodes[0]);
document.body.insertBefore(this.MBoverlay, document.body.childNodes[0]);
// Initial scrolling position of the window. To be used for remove scrolling effect during ModalBox appearing
this.initScrollX = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft;
this.initScrollY = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
//Adding event observers
this.hide = this.hide.bindAsEventListener(this);
this.close = this._hide.bindAsEventListener(this);
this.kbdHandler = this.kbdHandler.bindAsEventListener(this);
this._initObservers();
this.initialized = true; // Mark as initialized
this.active = true; // Mark as active
this.currFocused = 0;
},
show: function(content, options) {
if(!this.initialized)
{
this._init(options); // Check for is already initialized
}
else
{
if ( this.options.removeBodyScrollbars )
{
$$('body').first().setStyle({overflow: ''});
}
}
this.content = content;
this.setOptions(options);
this.setTitle( this.options.title ); // Updating title of the MB
if(this.MBwindow.style.display == "none") { // First modal box appearing
this._appear();
this.event("onShow"); // Passing onShow callback
}
else { // If MB already on the screen, update it
this._update();
this.event("onUpdate"); // Passing onUpdate callback
}
if ( this.options.removeBodyScrollbars )
{
$$('body').first().setStyle({overflow: 'hidden'});
}
},
hide: function(options) { // External hide method to use from external HTML and JS
if(this.initialized) {
if (this.options['insteadClose'] && this.event('insteadClose'))
{
return;
}
if(options) Object.extend(this.options, options); // Passing callbacks
if(this.options.transitions)
Effect.SlideUp(this.MBwindow, {duration: this.options.slideUpDuration, afterFinish: this._deinit.bind(this)} );
else {
Element.hide(this.MBwindow);
this._deinit();
}
this.event("onHide");
if ( this.options.removeBodyScrollbars )
{
$$('body').first().setStyle({overflow: ''});
}
}
else throw("Modalbox isn't initialized");
},
alert: function(message, title){
this.lang = new CSLang('modalbox_js');
var html = '';
if(!title){
title = this.lang.translate('alert:') + ' ' + document.title;
}
Modalbox.show(html, {title: title, width: 300});
},
/**
* Function to emulate the standard JS confirm window
*
* @param string message
* @param string title
* @param function callback this will be call after accept/cancel buttons are
* @param string confirm_button_text
* @param string cancel_button_text
* clicked. A boolean parameter is passed which indicates which button was clicked.
* @example
* Modalbox.confirm(
* 'text',
* 'title',
* (function( result ){
* if( result ) this.doSomething();
* }).bind(this)
* );
*
*/
confirm: function(message, title, confirmCallback, confirm_button_text, cancel_button_text ){
this.lang = new CSLang('modalbox_js');
if( !confirm_button_text )
{
confirm_button_text = this.lang.translate('confirm');
}
if( !cancel_button_text )
{
cancel_button_text = this.lang.translate('cancel');
}
this.confirmCallback = confirmCallback;
var html = '';
if(!title){
title = this.lang.translate('confirm:') + ' ' + document.title;
}
Modalbox.show(html, {
title: title,
width: 400,
afterLoad: this._confirmAttachments.bind(this)
});
},
_confirmAttachments: function(){
$('MB_confirm_accept').observe( 'click', this._confirmHandleButtons.bindAsEventListener( this, true ) );
$('MB_confirm_cancel').observe( 'click', this._confirmHandleButtons.bindAsEventListener( this, false ) );
},
_confirmHandleButtons: function( event, result ){
event.stop();
this.confirmCallback( result );
Modalbox.hide();
this.confirmCallback = Prototype.emptyFunction;
},
_hide: function(event) { // Internal hide method to use inside MB class
if(event) Event.stop(event);
this.hide();
},
_appear: function() { // First appearing of MB
if (navigator.appVersion.match(/\bMSIE\b/))
this._toggleSelects();
this._setOverlay();
this._setWidth();
if(this.options.transitions) {
Element.setStyle(this.MBoverlay, {opacity: 0});
new Effect.Fade(this.MBoverlay, {
from: 0,
to: 1,
duration: this.options.overlayDuration,
afterFinish: function() {
new Effect.SlideDown(this.MBwindow, {
duration: this.options.slideDownDuration,
afterFinish: function(){
this.loadContent();
}.bind(this)
});
}.bind(this)
});
} else {
Element.setStyle(this.MBoverlay);
Element.show(this.MBwindow);
this.loadContent();
}
this._setWidthAndPosition = this._setWidthAndPosition.bindAsEventListener(this);
Event.observe(window, "resize", this._setWidthAndPosition);
},
resize: function(byWidth, byHeight, options) { // Change size of MB without loading content
var wHeight = Element.getHeight(this.MBwindow);
var wWidth = Element.getWidth(this.MBwindow);
var hHeight = Element.getHeight(this.MBheader);
var cHeight = Element.getHeight(this.MBcontent);
var newHeight = ((wHeight - hHeight + byHeight) < cHeight) ? (cHeight + hHeight - wHeight) : byHeight;
this.setOptions(options); // Passing callbacks
if(this.options.transitions) {
new Effect.ScaleBy(this.MBwindow, byWidth, newHeight, {
duration: this.options.resizeDuration,
afterFinish: function() {
this.event("_afterResize"); // Passing internal callback
this.event("afterResize"); // Passing callback
}.bind(this)
});
} else {
this.MBwindow.setStyle({width: wWidth + byWidth + "px", height: wHeight + newHeight + "px"});
setTimeout(function() {
this.event("_afterResize"); // Passing internal callback
this.event("afterResize"); // Passing callback
}.bind(this), 1);
}
},
_update: function() { // Updating MB in case of wizards
Element.update(this.MBcontent, "");
this.MBcontent.appendChild(this.MBloading);
if(this.options.loadingString){
Element.update(this.MBloading, this.options.loadingString);
}
this.currentDims = [this.MBwindow.offsetWidth, this.MBwindow.offsetHeight];
Modalbox.resize((this.options.width - this.currentDims[0]), (this.options.height - this.currentDims[1]), {_afterResize: this._loadAfterResize.bind(this)});
},
loadContent: function () {
if(this.event("beforeLoad") != false) { // If callback passed false, skip loading of the content
if(typeof this.content == 'string') {
var htmlRegExp = new RegExp(/<\/?[^>]+>/gi);
//var classicRegExp = new RegExp(/(ajax_menu_action=true|\?ajax_action=|&ajax_action=)/gi);
if(htmlRegExp.test(this.content))
{ // Plain HTML given as a parameter
this._insertContent(this.content);
this._putContent();
}
// if classic url
else if( this.options.classic )
{
csr(this.content,{
csr_options: {
csr_type: 'CSR.IterativeHashedDataOnly',
dataonly:true,
type: 'html',
no_hash: !this.options.hashUrl,
no_loading_message: this.options.no_loading_message,
customSuccessHandler: function(transportResponse) {
var response = transportResponse.responseText;
this._insertContent(response);
this._putContent();
this.event("afterAjaxLoad");
}.bind(this)
},
prototype_options: {
parameters: this.options.params
}
});
}
//if its kohana url
else
{
csr(this.content,
{
csr_options:
{
csr_type: 'CSR.IterativeHashedJSON',
dataonly: false,
type: 'html',
no_hash: !this.options.hashUrl,
no_loading_message: this.options.no_loading_message
},
prototype_options:
{
parameters: this.options.params,
onSuccess: (function(response)
{
this._insertContent(response);
this._putContent();
login_required_event.inizialize_require_login_events();
if($('MB_ajax_loading_info'))
{
$('MB_ajax_loading_info').hide();
}
if($('ajax_loading_info'))
{
$('ajax_loading_info').hide();
}
this.event("afterAjaxLoad");
}).bind(this)
}
});
}
} else if (typeof this.content == 'object') {// HTML Object is given
this._insertContent(this.content);
this._putContent();
} else {
Modalbox.hide();
throw('Please specify correct URL or HTML element (plain HTML or object)');
}
}
},
_insertContent: function(content)
{
Element.extend(this.MBcontent);
this.MBcontent.update("");
if(typeof content == 'string')
{
this.MBcontent.hide().update(content);
}
else if (typeof this.content == 'object')
{ // HTML Object is given
var _htmlObj = content.cloneNode(true); // If node already a part of DOM we'll clone it
// If clonable element has ID attribute defined, modifying it to prevent duplicates
if(this.content.id) this.content.id = "MB_" + this.content.id;
/* Add prefix for IDs on all elements inside the DOM node */
this.content.getElementsBySelector('*[id]').each(function(el){el.id = "MB_" + el.id});
this.MBcontent.hide().appendChild(_htmlObj);
this.MBcontent.down().show(); // Toggle visibility for hidden nodes
}
},
_putContent: function(){
// Prepare and resize modal box for content
if(this.options.height == this._options.height)
Modalbox.resize(0, this.MBcontent.getHeight() - Element.getHeight(this.MBwindow) + Element.getHeight(this.MBheader), {
afterResize: function(){
this.MBcontent.show();
this.focusableElements = this._findFocusableElements();
this._setFocus(); // Setting focus on first 'focusable' element in content (input, select, textarea, link or button)
this.event("afterLoad"); // Passing callback
}.bind(this)
});
else { // Height is defined. Creating a scrollable window
this._setWidth();
this.MBcontent.setStyle({overflow: 'auto', height: Element.getHeight(this.MBwindow) - Element.getHeight(this.MBheader) - 13 + 'px'});
this.MBcontent.show();
this.focusableElements = this._findFocusableElements();
this._setFocus(); // Setting focus on first 'focusable' element in content (input, select, textarea, link or button)
this.event("afterLoad"); // Passing callback
}
},
activate: function(options){
this.setOptions(options);
this.active = true;
Event.observe(this.MBclose, "click", this.close.bind(this));
if(this.options.overlayClose)
{
Event.observe(this.MBoverlay, "click", this.hide.bind(this));
}
Element.show(this.MBclose);
if(this.options.transitions && this.options.inactiveFade) new Effect.Appear(this.MBwindow, {duration: this.options.slideUpDuration});
},
deactivate: function(options) {
this.setOptions(options);
this.active = false;
Event.stopObserving(this.MBclose, "click");
if(this.options.overlayClose) Event.stopObserving(this.MBoverlay, "click");
Element.hide(this.MBclose);
if(this.options.transitions && this.options.inactiveFade) new Effect.Fade(this.MBwindow, {duration: this.options.slideUpDuration, to: .75});
},
_initObservers: function(){
Event.observe(this.MBclose, "click", this.close);
if(this.options.overlayClose)
{
Event.observe(this.MBoverlay, "click", (function(event) {
if ( event.target == this )
{
Modalbox.hide();
}
}).bind(this));
}
Event.observe(document, "keypress", Modalbox.kbdHandler );
},
_removeObservers: function(){
Event.stopObserving(this.MBclose, "click", this.close);
if(this.options.overlayClose) Event.stopObserving(this.MBoverlay, "click", this.hide);
Event.stopObserving(document, "keypress", Modalbox.kbdHandler );
},
_loadAfterResize: function() {
this._setWidth();
this.loadContent();
},
_setFocus: function() { // Setting focus to be looped inside current MB
if(this.focusableElements.length > 0) {
var i = 0;
var firstEl = this.focusableElements.find(function findFirst(el){
i++;
return el.tabIndex == 1;
}) || this.focusableElements.first();
this.currFocused = (i == this.focusableElements.length - 1) ? (i-1) : 0;
if ( firstEl.focus )
{
(function(el)
{
el.focus();
}).defer(firstEl);
}
}
else
{
var c = $("MB_close");
(function(el)
{
el.focus && el.focus();
}).defer(c);
}
},
_findFocusableElements: function(){ // Collect form elements or links from MB content
var els = this.MBcontent.getElementsBySelector('input:not([type~=hidden]), select, textarea, button, a[href]');
els.invoke('addClassName', 'MB_focusable');
return this.MBcontent.select('.MB_focusable');
},
kbdHandler: function(e) {
var node = Event.element(e);
switch(e.keyCode) {
case Event.KEY_TAB:
Event.stop(e);
if(!e.shiftKey) { //Focusing in direct order
if(this.currFocused == this.focusableElements.length - 1) {
this.focusableElements.first().focus();
this.currFocused = 0;
}else {
this.currFocused++;
this.focusableElements[this.currFocused].focus();
}
} else { // Shift key is pressed. Focusing in reverse order
if(this.currFocused == 0) {
this.focusableElements.last().focus();
this.currFocused = this.focusableElements.length - 1;
} else {
this.currFocused--;
this.focusableElements[this.currFocused].focus();
}
}
break;
case Event.KEY_ESC:
if(this.active) this._hide(e);
break;
case 32:
this._preventScroll(e);
break;
case 0: // For Gecko browsers compatibility
if(e.which == 32) this._preventScroll(e);
break;
// case Event.KEY_UP:
// case Event.KEY_DOWN:
// case Event.KEY_PAGEDOWN:
// case Event.KEY_PAGEUP:
// case Event.KEY_HOME:
// case Event.KEY_END:
// // Safari operates in slightly different way. This realization is still buggy in Safari.
// if(/Safari|KHTML/.test(navigator.userAgent) && !["textarea", "select"].include(node.tagName.toLowerCase()))
// Event.stop(e);
// else if( (node.tagName.toLowerCase() == "input" && ["submit", "button"].include(node.type)) || (node.tagName.toLowerCase() == "a") )
// Event.stop(e);
// break;
}
},
_preventScroll: function(event) { // Disabling scrolling by "space" key
if(!["input", "textarea", "select", "button"].include(Event.element(event).tagName.toLowerCase()))
Event.stop(event);
},
_deinit: function()
{
this._removeObservers();
Event.stopObserving(window, "resize", this._setWidthAndPosition );
if(this.options.transitions) {
Effect.toggle(this.MBoverlay, 'appear', {duration: this.options.overlayDuration, afterFinish: this._removeElements.bind(this)});
} else {
this.MBoverlay.hide();
this._removeElements();
}
Element.setStyle(this.MBcontent, {overflow: '', height: ''});
},
_removeElements: function () {
if (navigator.appVersion.match(/\bMSIE\b/)) {
this._prepareIE("", ""); // If set to auto MSIE will show horizontal scrolling
window.scrollTo(this.initScrollX, this.initScrollY);
}
Element.remove(this.MBoverlay);
/* Replacing prefixes 'MB_' in IDs for the original content */
if(typeof this.content == 'object' && this.content.id && this.content.id.match(/MB_/)) {
this.content.getElementsBySelector('*[id]').each(function(el){el.id = el.id.replace(/MB_/, "");});
this.content.id = this.content.id.replace(/MB_/, "");
}
/* Initialized will be set to false */
this.initialized = false;
if (navigator.appVersion.match(/\bMSIE\b/))
this._toggleSelects(); // Toggle back 'select' elements in IE
this.event("afterHide"); // Passing afterHide callback
this.setOptions(this._options); //Settings options object into intial state
},
_setOverlay: function () {
if (navigator.appVersion.match(/\bMSIE\b/)) {
this._prepareIE("100%", "hidden");
if (!navigator.appVersion.match(/\b7.0\b/)) window.scrollTo(0,0); // Disable scrolling on top for IE7
}
},
_setWidth: function () { //Set size
Element.setStyle(this.MBwindow, {width: this.options.width + "px", height: this.options.height + "px"});
},
_setWidthAndPosition: function () {
Element.setStyle(this.MBwindow, {width: this.options.width + "px"});
},
_getScrollTop: function () { //From: http://www.quirksmode.org/js/doctypes.html
var theTop;
if (document.documentElement && document.documentElement.scrollTop)
theTop = document.documentElement.scrollTop;
else if (document.body)
theTop = document.body.scrollTop;
return theTop;
},
// For IE browsers -- IE requires height to 100% and overflow hidden (taken from lightbox)
_prepareIE: function(height, overflow){
var body = document.getElementsByTagName('body')[0];
body.style.height = height;
body.style.overflow = overflow;
var html = document.getElementsByTagName('html')[0];
html.style.height = height;
html.style.overflow = overflow;
},
// For IE browsers -- hiding all SELECT elements
_toggleSelects: function() {
var selects = $$("select");
if(this.initialized) {
selects.invoke('setStyle', {'visibility': 'hidden'});
} else {
selects.invoke('setStyle', {'visibility': ''});
}
},
event: function(eventName) {
if(this.options[eventName]) {
var f = (function(func, eventName)
{
var returnValue = func(eventName); // Executing callback
return returnValue;
}).bind(this, this.options[eventName], eventName);
this.options[eventName] = null;
if ( eventName.startsWith('after') )
{
f.defer();
return true;
}
returnValue = f();
if(returnValue != undefined)
return returnValue;
else
return true;
}
return true;
},
addEventHandler: function(eventName, callback) {
this.options[eventName] = callback;
},
setTitle: function( title ) {
this.MBcaption.select('#MB_title')[0].update( title );
}
}
Object.extend(Modalbox, Modalbox.Methods);
if(Modalbox.overrideAlert) window.alert = Modalbox.alert;
Effect.ScaleBy = Class.create();
Object.extend(Object.extend(Effect.ScaleBy.prototype, Effect.Base.prototype), {
initialize: function(element, byWidth, byHeight, options) {
this.element = $(element)
var options = Object.extend({
scaleFromTop: true,
scaleMode: 'box', // 'box' or 'contents' or {} with provided values
scaleByWidth: byWidth,
scaleByHeight: byHeight
}, arguments[3] || {});
this.start(options);
},
setup: function() {
this.elementPositioning = this.element.getStyle('position');
this.originalTop = this.element.offsetTop;
this.originalLeft = this.element.offsetLeft;
this.dims = null;
if(this.options.scaleMode=='box')
this.dims = [this.element.offsetHeight, this.element.offsetWidth];
if(/^content/.test(this.options.scaleMode))
this.dims = [this.element.scrollHeight, this.element.scrollWidth];
if(!this.dims)
this.dims = [this.options.scaleMode.originalHeight,
this.options.scaleMode.originalWidth];
this.deltaY = this.options.scaleByHeight;
this.deltaX = this.options.scaleByWidth;
},
update: function(position) {
var currentHeight = this.dims[0] + (this.deltaY * position);
var currentWidth = this.dims[1] + (this.deltaX * position);
currentHeight = (currentHeight > 0) ? currentHeight : 0;
currentWidth = (currentWidth > 0) ? currentWidth : 0;
this.setDimensions(currentHeight, currentWidth);
},
setDimensions: function(height, width) {
var d = {};
d.width = width + 'px';
d.height = height + 'px';
var topd = Math.round((height - this.dims[0])/2);
var leftd = Math.round((width - this.dims[1])/2);
if(this.elementPositioning == 'absolute' || this.elementPositioning == 'fixed') {
if(!this.options.scaleFromTop) d.top = this.originalTop-topd + 'px';
d.left = this.originalLeft-leftd + 'px';
} else {
if(!this.options.scaleFromTop) d.top = -topd + 'px';
d.left = -leftd + 'px';
}
this.element.setStyle(d);
}
});
if (!window.ModalboxDraggableResizeable)
var ModalboxDraggableResizeable = {};
Object.extend(ModalboxDraggableResizeable, Modalbox.Methods);
Object.extend(ModalboxDraggableResizeable, {
_attributes: {
id: "MB_draggable_corner",
className: ""
},
addDragCornerCapability: function(container, attributes){
var container = $(container);
var handle = $(Builder.node("div", Object.extend(this._attributes, attributes || {}), "a little arrow here"));
container.insert(handle);
/* Add property to container to store position variables */
container.moveposition = {x:0, y:0};
function moveListener(event) {
/* Calculate how far the mouse moved */
var moved = {
x:(event.pointerX() - container.moveposition.x),
y:(event.pointerY() - container.moveposition.y)
};
/* Reset container's x/y utility property */
container.moveposition = {x:event.pointerX(), y:event.pointerY()};
/* Border adds to dimensions */
var borderStyle = container.getStyle('border-width');
var borderSize = borderStyle.split(' ')[0].replace(/[^0-9]/g,'');
/* Padding adds to dimensions */
var paddingStyle = container.getStyle('padding');
var paddingSize = paddingStyle.split(' ')[0].replace(/[^0-9]/g,'');
/* Add things up that change dimensions */
var sizeAdjust = (borderSize*2) + (paddingSize*2);
/* Update container's size */
var size = container.getDimensions();
container.setStyle({
height: size.height+moved.y-sizeAdjust+'px',
width:size.width+moved.x-sizeAdjust+'px'
});
}
/* Listen for 'mouse down' on handle to start the move listener */
handle.observe('mousedown', function(event) {
/* Set starting x/y */
container.moveposition = {x:event.pointerX(),y:event.pointerY()};
/* Start listening for mouse move on body */
Event.observe(document.body,'mousemove',moveListener);
});
/* Listen for 'mouse up' to cancel 'move' listener */
Event.observe(document.body,'mouseup', function(event) {
Event.stopObserving(document.body,'mousemove',moveListener);
});
},
show: function(content, options){ // emulates override of Modalbox.show class level method
Modalbox.show(content, options);
ModalboxDraggableResizeable.addDragCornerCapability(Modalbox.MBwindow.id, options.dragOptions);
new Draggable(Modalbox.MBwindow.id, {handle: Modalbox.MBheader.id, starteffect: null, endeffect: null});
}
});