+++ /dev/null
-//
-// ModalBox - The pop-up window thingie with AJAX, based on Prototype JS framework.
-//
-// Created by Andrew Okonetchnikov
-// Copyright 2006-2010 okonet.ru. All rights reserved.
-//
-// Licensed under MIT license.
-//
-
-if (!window.Modalbox)
- var Modalbox = new Object();
-
-Modalbox.Methods = {
- overrideAlert: false, // Override standard browser alert message with ModalBox
- focusableElements: new Array,
- currFocused: 0,
- initialized: false,
- active: true,
- 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: .65, // Default overlay opacity
- overlayDuration: .25, // Default overlay fade in/out duration in seconds
- slideDownDuration: .5, // Default Modalbox appear slide down effect in seconds
- slideUpDuration: .5, // Default Modalbox hiding slide up effect in seconds
- resizeDuration: .25, // Default resize duration seconds
- inactiveFade: true, // Fades MB window on inactive state
- transitions: true, // Toggles transition effects. Transitions are enabled by default
- loadingString: "Please wait. Loading...", // Default loading string message
- closeString: "Close window", // Default title attribute for close window link
- closeValue: "×", // Default string for close link in the header
- params: {},
- method: 'get', // Default Ajax request method
- autoFocusing: true, // Toggles auto-focusing for form elements. Disable for long text pages.
- aspnet: false, // Should be use then using with ASP.NET costrols. Then true Modalbox window will be injected into the first form element.
- resizeCSSID: ''
- },
- _options: new Object,
-
- setOptions: function(options) {
- Object.extend(this.options, options || {});
- },
-
- _init: function(options) {
- // Setting up original options with default options
- Object.extend(this._options, this.options);
- this.setOptions(options);
-
- //Creating the overlay
- this.MBoverlay = new Element("div", { id: "MB_overlay", style: "opacity: 0" });
-
- //Creating the modal window
- this.MBwindowwrapper = new Element("div", {id: "MB_windowwrapper"}).update(
- this.MBwindow = new Element("div", {id: "MB_window", style: "display: none"}).update(
- this.MBframe = new Element("div", {id: "MB_frame"}).update(
- this.MBheader = new Element("div", {id: "MB_header"}).update(
- this.MBcaption = new Element("div", {id: "MB_caption"})
- )
- )
- )
- );
-
- this.MBclose = new Element("a", {id: "MB_close", title: this.options.closeString, href: "#"}).update("<span>" + this.options.closeValue + "</span>");
- this.MBheader.insert({'bottom':this.MBclose});
-
- this.MBcontent = new Element("div", {id: "MB_content"}).update(
- this.MBloading = new Element("div", {id: "MB_loading"}).update(this.options.loadingString)
- );
- this.MBframe.insert({'bottom':this.MBcontent});
-
- // Inserting into DOM. If parameter set and form element have been found will inject into it. Otherwise will inject into body as topmost element.
- // Be sure to set padding and marging to null via CSS for both body and (in case of asp.net) form elements.
- var injectToEl = this.options.aspnet ? $(document.body).down('form') : $(document.body);
- injectToEl.insert({'top':this.MBwindowwrapper});
- injectToEl.insert({'top':this.MBoverlay});
-
- var scrollOffsets = document.viewport.getScrollOffsets();
- if (scrollOffsets[1] > 0) {
- $('MB_window').setStyle({top:scrollOffsets[1] + 'px'});
- }
-
- Event.observe(window, 'scroll', function() {
- scrollOffsets = document.viewport.getScrollOffsets();
- $('MB_window').setStyle({top:scrollOffsets[1] + 'px'});
- });
-
- // 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.hideObserver = this._hide.bindAsEventListener(this);
- this.kbdObserver = this._kbdHandler.bindAsEventListener(this);
- this._initObservers();
-
- this.initialized = true; // Mark as initialized
- },
-
- show: function(content, options) {
- if(!this.initialized) this._init(options); // Check for is already initialized
-
- this.content = content;
- this.setOptions(options);
-
- if(this.options.title) // Updating title of the MB
- $(this.MBcaption).update(this.options.title);
- else { // If title isn't given, the header will not displayed
- $(this.MBheader).hide();
- $(this.MBcaption).hide();
- }
-
- 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
- }
- },
-
- hide: function(options) { // External hide method to use from external HTML and JS
- if(this.initialized) {
- // Reading for options/callbacks except if event given as a pararmeter
- if(options && typeof options.element != 'function') Object.extend(this.options, options);
- // Passing beforeHide callback
- this.event("beforeHide");
- if(this.options.transitions)
- Effect.SlideUp(this.MBwindow, { duration: this.options.slideUpDuration, transition: Effect.Transitions.sinoidal, afterFinish: this._deinit.bind(this) } );
- else {
- $(this.MBwindow).hide();
- this._deinit();
- }
- Event.stopObserving(window, 'scroll');
- } else throw("Modalbox is not initialized.");
- },
-
- _hide: function(event) { // Internal hide method to use with overlay and close link
- event.stop(); // Stop event propaganation for link elements
- /* Then clicked on overlay we'll check the option and in case of overlayClose == false we'll break hiding execution [Fix for #139] */
- if(event.element().id == 'MB_overlay' && !this.options.overlayClose) return false;
- this.hide();
- },
-
- alert: function(message){
- var html = '<div class="MB_alert"><p>' + message + '</p><input type="button" onclick="Modalbox.hide()" value="OK" /></div>';
- Modalbox.show(html, {title: 'Alert: ' + document.title, width: 300});
- },
-
- _appear: function() { // First appearing of MB
- if(Prototype.Browser.IE && !navigator.appVersion.match(/\b7.0\b/)) { // Preparing IE 6 for showing modalbox
- window.scrollTo(0,0);
- this._prepareIE("100%", "hidden");
- }
- this._setWidth();
- if(this.options.transitions) {
- $(this.MBoverlay).setStyle({opacity: 0});
- new Effect.Fade(this.MBoverlay, {
- from: 0,
- to: this.options.overlayOpacity,
- duration: this.options.overlayDuration,
- afterFinish: function() {
- new Effect.SlideDown(this.MBwindow, {
- duration: this.options.slideDownDuration,
- transition: Effect.Transitions.sinoidal,
- afterFinish: function(){
- this.loadContent();
- }.bind(this)
- });
- }.bind(this)
- });
- } else {
- $(this.MBoverlay).setStyle({opacity: this.options.overlayOpacity});
- $(this.MBwindow).show();
- 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 oWidth = $(this.MBoverlay).getWidth();
- var wHeight = $(this.MBwindow).getHeight();
- var wWidth = $(this.MBwindow).getWidth();
- var hHeight = $(this.MBheader).getHeight();
- var cHeight = $(this.MBcontent).getHeight();
- var newHeight = ((wHeight - hHeight + byHeight) < cHeight) ? (cHeight + hHeight) : (wHeight + byHeight);
-
- var el = $(this.MBwindow);
- var contentEl = $(this.MBcontent);
- var windowBottomMargin = 10;
- var windowOffset = (parseInt(el.getStyle('margin-top'), 0) + parseInt(el.getStyle('margin-bottom'), 0) + parseInt(el.getStyle('border-top-width'), 0) + parseInt(el.getStyle('border-bottom-width'), 0)) + windowBottomMargin;
- var contentPadding = (parseInt(contentEl.getStyle('padding-top')) + parseInt(contentEl.getStyle('padding-bottom')));
-
- if ((newHeight + windowOffset + contentPadding) > document.viewport.getHeight()) {
- // adjust window height to account for margins and border widths
- newHeight = document.viewport.getHeight() - windowOffset - windowBottomMargin;
- // calculate content height including header height and padding values
- newcHeight = newHeight - hHeight - parseInt($(this.MBframe).getStyle('padding-bottom'), 0) - parseInt($(this.MBcontent).getStyle('padding-bottom'), 0);
- $(this.MBcontent).setStyle({height:newcHeight + 'px'});
- }
- else if ($(this.MBcontent).getStyle('height')) {
- // release any MB_content height set prior to establish scrollbars in content area
- $(this.MBcontent).setStyle({height:''});
- }
-
- var newWidth = wWidth + byWidth;
- this.options.width = newWidth;
- if(options) this.setOptions(options); // Passing callbacks
- if(this.options.transitions && !Modalbox.animating) {
- Modalbox.animating = true;
- new Effect.Morph(this.MBwindow, {
- style: "width:" + newWidth + "px; height:" + newHeight + "px;",
- duration: this.options.resizeDuration,
- beforeStart: function(fx){
- fx.element.setStyle({overflow:"hidden"}); // Fix for MSIE 6 to resize correctly
- },
- afterFinish: function(fx) {
- fx.element.setStyle({overflow:"visible"});
- this.event("_afterResize"); // Passing internal callback
- this.event("afterResize"); // Passing callback
- Modalbox.animating = false;
- }.bind(this)
- });
- } else {
- this.MBwindow.setStyle({width: newWidth + "px", height: newHeight + "px"});
- setTimeout(function() {
- this.event("_afterResize"); // Passing internal callback
- this.event("afterResize"); // Passing callback
- }.bind(this), 1);
- }
-
- },
-
- resizeToContent: function(options){
- // Resizes the modalbox window to the actual content height.
- // This might be useful to resize modalbox after some content modifications which were changed ccontent height.
-
- if (typeof options == "undefined") {
- options = new Object();
- }
-
- // check to see if MB_content includes any images
- var mbimages = $('MB_content').select('img');
- var totalimages = mbimages.length;
- if (mbimages[0]) {
- if (typeof options.imagesloaded == "undefined") {
-
- var loadedImages = $A();
- var loadedImageTotal = 0;
- mbimages.each(function(o,idx) {
- loadedImages[idx] = new Image();
- loadedImages[idx].src = o.src;
- loadedImages[idx].onload = function() {
- loadedImageTotal++;
- if (loadedImageTotal == totalimages) {
- // make sure all images have been rendered by checking their height
- var imageincomplete = false;
- mbimages.each(function(i) {
- if (i.height == 0) {
- imageincomplete = true;
- }
- });
- if (imageincomplete || Modalbox.animating) {
- // some image hasn't been rendered yet, trigger resize loop until it is
- Modalbox.resizeToContent();
- }
- else {
- // trigger one final resize, but set imagesloaded option to skip inspection of images
- options.imagesloaded = true;
- Modalbox.resizeToContent(options);
- }
- }
- }
- })
- }
- }
-
- var byHeight = this.options.height - $(this.MBwindow).getHeight();
- if (options.resizeCSSID && $(options.resizeCSSID)) {
- // byWidth is the amount of pixels needed to increase/decrease window to meet width of options.resizeCSSID
- // plus a 10 pixel margin to accommodate scrollbars
- var byWidth = $(options.resizeCSSID).getWidth() - $(this.MBwindow).getWidth() + (parseInt($(this.MBcontent).getStyle('padding-left'), 0) + parseInt($(this.MBcontent).getStyle('padding-right'), 0)) + 15;
- }
- else {
- // don't change width
- var byWidth = 0;
- }
- if(byHeight != 0) {
- if(options) this.setOptions(options); // Passing callbacks
- Modalbox.resize(byWidth, byHeight);
- }
- },
-
- resizeToInclude: function(element, options){
-
- // Resizes the modalbox window to the camulative height of element. Calculations are using CSS properties for margins and border.
- // This method might be useful to resize modalbox before including or updating content.
-
- var el = $(element);
- var elHeight = el.getHeight() + parseInt(el.getStyle('margin-top'), 0) + parseInt(el.getStyle('margin-bottom'), 0) + parseInt(el.getStyle('border-top-width'), 0) + parseInt(el.getStyle('border-bottom-width'), 0);
- if(elHeight > 0) {
- if(options) this.setOptions(options); // Passing callbacks
- Modalbox.resize(0, elHeight);
- }
- },
-
- _update: function() { // Updating MB in case of wizards
- $(this.MBcontent).update($(this.MBloading).update(this.options.loadingString));
- this.loadContent();
- },
-
- 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);
- if(htmlRegExp.test(this.content)) { // Plain HTML given as a parameter
- this._insertContent(this.content.stripScripts(), function(){
- this.content.extractScripts().map(function(script) {
- return eval(script.replace("<!--", "").replace("// -->", ""));
- }.bind(window));
- }.bind(this));
- } else // URL given as a parameter. We'll request it via Ajax
- new Ajax.Request( this.content, { method: this.options.method.toLowerCase(), parameters: this.options.params,
- onComplete: function(transport) {
- var response = new String(transport.responseText);
- this._insertContent(transport.responseText.stripScripts(), function(){
- response.extractScripts().map(function(script) {
- return eval(script.replace("<!--", "").replace("// -->", ""));
- }.bind(window));
- });
- }.bind(this),
- onException: function(instance, exception){
- Modalbox.hide();
- throw('Modalbox Loading Error: ' + exception);
- }
- });
-
- } else if (typeof this.content == 'object') {// HTML Object is given
- this._insertContent(this.content);
- } else {
- Modalbox.hide();
- throw('Modalbox Parameters Error: Please specify correct URL or HTML element (plain HTML or object)');
- }
- }
- },
-
- _insertContent: function(content, callback){
- $(this.MBcontent).hide().update("");
- if(typeof content == 'string') { // Plain HTML is given
- this.MBcontent.update(new Element("div", { style: "display: none" }).update(content)).down().show();
- } else if (typeof 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(content.id) content.id = "MB_" + content.id;
- /* Add prefix for IDs on all elements inside the DOM node */
- $(content).select('*[id]').each(function(el){ el.id = "MB_" + el.id; });
- this.MBcontent.update(_htmlObj).down('div').show();
- if(Prototype.Browser.IE) // Toggling back visibility for hidden selects in IE
- $$("#MB_content select").invoke('setStyle', {'visibility': ''});
- }
-
- // Prepare and resize modal box for content
- if(this.options.height == this._options.height) {
- Modalbox.resize((this.options.width - $(this.MBwindow).getWidth()), $(this.MBcontent).getHeight() - $(this.MBwindow).getHeight() + $(this.MBheader).getHeight(), {
- afterResize: function(){
- setTimeout(function(){ // MSIE fix
- this._putContent(callback);
- }.bind(this),1);
- }.bind(this)
- });
- } else { // Height is defined. Creating a scrollable window
- this._setWidth();
- this.MBcontent.setStyle({overflow: 'auto', height: $(this.MBwindow).getHeight() - $(this.MBheader).getHeight() - 13 + 'px'});
- setTimeout(function(){ // MSIE fix
- this._putContent(callback);
- }.bind(this),1);
- }
- },
-
- _putContent: function(callback){
- this.MBcontent.show();
- this.focusableElements = this._findFocusableElements();
- this._setFocus(); // Setting focus on first 'focusable' element in content (input, select, textarea, link or button)
- if(callback != undefined)
- callback(); // Executing internal JS from loaded content
- this.event("afterLoad"); // Passing callback
- },
-
- activate: function(options){
- this.setOptions(options);
- this.active = true;
- $(this.MBclose).observe("click", this.hideObserver);
- if(this.options.overlayClose)
- $(this.MBoverlay).observe("click", this.hideObserver);
- $(this.MBclose).show();
- 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;
- $(this.MBclose).stopObserving("click", this.hideObserver);
- if(this.options.overlayClose)
- $(this.MBoverlay).stopObserving("click", this.hideObserver);
- $(this.MBclose).hide();
- if(this.options.transitions && this.options.inactiveFade)
- new Effect.Fade(this.MBwindow, {duration: this.options.slideUpDuration, to: .75});
- },
-
- _initObservers: function(){
- $(this.MBclose).observe("click", this.hideObserver);
- if(this.options.overlayClose)
- $(this.MBoverlay).observe("click", this.hideObserver);
- if(Prototype.Browser.Gecko)
- Event.observe(document, "keypress", this.kbdObserver); // Gecko is moving focus a way too fast
- else
- Event.observe(document, "keydown", this.kbdObserver); // All other browsers are okay with keydown
- },
-
- _removeObservers: function(){
- $(this.MBclose).stopObserving("click", this.hideObserver);
- if(this.options.overlayClose)
- $(this.MBoverlay).stopObserving("click", this.hideObserver);
- if(Prototype.Browser.Gecko)
- Event.stopObserving(document, "keypress", this.kbdObserver);
- else
- Event.stopObserving(document, "keydown", this.kbdObserver);
- },
-
- _setFocus: function() {
- /* Setting focus to the first 'focusable' element which is one with tabindex = 1 or the first in the form loaded. */
- if(this.focusableElements.length > 0 && this.options.autoFocusing == true) {
- var firstEl = this.focusableElements.find(function (el){
- return el.tabIndex == 1;
- }) || this.focusableElements.first();
- this.currFocused = this.focusableElements.toArray().indexOf(firstEl);
- firstEl.focus(); // Focus on first focusable element except close button
- } else if($(this.MBclose).visible())
- $(this.MBclose).focus(); // If no focusable elements exist focus on close button
- },
-
- _findFocusableElements: function(){ // Collect form elements or links from MB content
- this.MBcontent.select('input:not([type~=hidden]), select, textarea, button, a[href]').invoke('addClassName', 'MB_focusable');
- return this.MBcontent.select('.MB_focusable');
- },
-
- _kbdHandler: function(event) {
- var node = event.element();
- switch(event.keyCode) {
- case Event.KEY_TAB:
- event.stop();
-
- /* Switching currFocused to the element which was focused by mouse instead of TAB-key. Fix for #134 */
- if(node != this.focusableElements[this.currFocused])
- this.currFocused = this.focusableElements.toArray().indexOf(node);
-
- if(!event.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(event);
- break;
- case 32:
- this._preventScroll(event);
- break;
- case 0: // For Gecko browsers compatibility
- if(event.which == 32) this._preventScroll(event);
- 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(Prototype.Browser.WebKit && !["textarea", "select"].include(node.tagName.toLowerCase()))
- event.stop();
- else if( (node.tagName.toLowerCase() == "input" && ["submit", "button"].include(node.type)) || (node.tagName.toLowerCase() == "a") )
- event.stop();
- break;
- }
- },
-
- _preventScroll: function(event) { // Disabling scrolling by "space" key
- if(!["input", "textarea", "select", "button"].include(event.element().tagName.toLowerCase()))
- event.stop();
- },
-
- _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();
- }
- $(this.MBcontent).setStyle({overflow: '', height: ''});
- },
-
- _removeElements: function () {
- $(this.MBoverlay).remove();
- $(this.MBwindow).remove();
- if(Prototype.Browser.IE && !navigator.appVersion.match(/\b7.0\b/)) {
- this._prepareIE("", ""); // If set to auto MSIE will show horizontal scrolling
- window.scrollTo(this.initScrollX, this.initScrollY);
- }
-
- /* Replacing prefixes 'MB_' in IDs for the original content */
- if(typeof this.content == 'object') {
- if(this.content.id && this.content.id.match(/MB_/)) {
- this.content.id = this.content.id.replace(/MB_/, "");
- }
- this.content.select('*[id]').each(function(el){ el.id = el.id.replace(/MB_/, ""); });
- }
- /* Initialized will be set to false */
- this.initialized = false;
- this.event("afterHide"); // Passing afterHide callback
- this.setOptions(this._options); //Settings options object into intial state
- },
-
- _setWidth: function () { //Set size
- $(this.MBwindow).setStyle({width: this.options.width + "px", height: this.options.height + "px"});
- },
-
- _setWidthAndPosition: function () {
- $(this.MBwindow).setStyle({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;
- },
- _prepareIE: function(height, overflow){
- $$('html, body').invoke('setStyle', {width: height, height: height, overflow: overflow}); // IE requires width and height set to 100% and overflow hidden
- $$("select").invoke('setStyle', {'visibility': overflow}); // Toggle visibility for all selects in the common document
- },
- event: function(eventName) {
- if(this.options[eventName]) {
- var returnValue = this.options[eventName](); // Executing callback
- this.options[eventName] = null; // Removing callback after execution
- if(returnValue != undefined)
- return returnValue;
- else
- return true;
- }
- return true;
- }
-};
-
-Object.extend(Modalbox, Modalbox.Methods);
-
-if(Modalbox.overrideAlert) window.alert = Modalbox.alert;
\ No newline at end of file
projects / tt-rss.git / commitdiff
