From ab36a74b2e505a86989df3a1f13d3ad079b6d383 Mon Sep 17 00:00:00 2001 From: tonio Date: Sun, 18 Oct 2009 17:55:38 +0200 Subject: [PATCH] SqueezeBox update. (1.1rc4) First try to provide custom modal boxes. Not working at all! --- main/urls.py | 1 + main/views.py | 6 + static/js/SqueezeBox.js | 147 ++++++++++++------- static/js/common.js | 71 ++++++++-- static/js/domains.js | 8 +- static/stylesheets/SqueezeBox.css | 217 +++++++++++++++++++---------- templates/admin/domain_header.html | 1 + templates/main/confirm.html | 16 +++ 8 files changed, 325 insertions(+), 142 deletions(-) create mode 100644 templates/main/confirm.html diff --git a/main/urls.py b/main/urls.py index dc68c16c5..4757ddc6b 100644 --- a/main/urls.py +++ b/main/urls.py @@ -4,4 +4,5 @@ urlpatterns = patterns('mailng.main.views', url(r'^$', 'index'), url(r'^autoreply/$', 'autoreply'), (r'^changepassword/$', 'changepassword'), + (r'^confirm/$', 'confirm'), ) diff --git a/main/views.py b/main/views.py index 4053dd329..6a96eaa13 100644 --- a/main/views.py +++ b/main/views.py @@ -72,3 +72,9 @@ def changepassword(request): "form" : form }) +@login_required +def confirm(request): + return render_to_response('main/confirm.html', { + "msg" : request.GET["question"] + }) + diff --git a/static/js/SqueezeBox.js b/static/js/SqueezeBox.js index 980ba8778..c69077fd1 100644 --- a/static/js/SqueezeBox.js +++ b/static/js/SqueezeBox.js @@ -4,20 +4,28 @@ * Allows to open various content as modal, * centered and animated box. * - * Dependencies: MooTools 1.2 trunk (04/2008) + * Dependencies: MooTools 1.2 * * Inspired by * ... Lokesh Dhakar - The original Lightbox v2 * - * @version 1.1 rc2 + * @version 1.1 rc4 * * @license MIT-style license * @author Harald Kirschner * @copyright Author */ + var SqueezeBox = { presets: { + onOpen: $empty, + onClose: $empty, + onUpdate: $empty, + onResize: $empty, + onMove: $empty, + onShow: $empty, + onHide: $empty, size: {x: 600, y: 450}, sizeLoading: {x: 200, y: 150}, marginInner: {x: 20, y: 20}, @@ -35,19 +43,16 @@ var SqueezeBox = { contentFx: {}, parse: false, // 'rel' parseSecure: false, - ajaxOptions: {}, - onOpen: $empty, - onClose: $empty, - onUpdate: $empty, - onResize: $empty, - onMove: $empty, - onShow: $empty, - onHide: $empty + shadow: true, + document: null, + ajaxOptions: {} }, initialize: function(presets) { if (this.options) return this; + this.presets = $merge(this.presets, presets); + this.doc = this.presets.document || document; this.options = {}; this.setOptions(this.presets).build(); this.bound = { @@ -65,12 +70,25 @@ var SqueezeBox = { id: 'sbox-overlay', styles: {display: 'none', zIndex: this.options.zIndex} }); - this.content = new Element('div', {id: 'sbox-content'}); - this.closeBtn = new Element('a', {id: 'sbox-btn-close', href: '#'}); this.win = new Element('div', { id: 'sbox-window', styles: {display: 'none', zIndex: this.options.zIndex + 2} - }).adopt(this.closeBtn, this.content); + }); + if (this.options.shadow) { + if (Browser.Engine.webkit420) { + this.win.setStyle('-webkit-box-shadow', '0 0 10px rgba(0, 0, 0, 0.7)'); + } else if (!Browser.Engine.trident4) { + var shadow = new Element('div', {'class': 'sbox-bg-wrap'}).inject(this.win); + var relay = function(e) { + this.overlay.fireEvent('click', [e]); + }.bind(this); + ['n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw'].each(function(dir) { + new Element('div', {'class': 'sbox-bg sbox-bg-' + dir}).inject(shadow).addEvent('click', relay); + }); + } + } + this.content = new Element('div', {id: 'sbox-content'}).inject(this.win); + this.closeBtn = new Element('a', {id: 'sbox-btn-close', href: '#'}).inject(this.win); this.fx = { overlay: new Fx.Tween(this.overlay, $merge({ property: 'opacity', @@ -92,30 +110,35 @@ var SqueezeBox = { link: 'cancel' }, this.options.contentFx)).set(0) }; - $(document.body).adopt(this.overlay, this.win); + $(this.doc.body).adopt(this.overlay, this.win); }, assign: function(to, options) { - return to.addEvent('click', function() { + return ($(to) || $$(to)).addEvent('click', function() { return !SqueezeBox.fromElement(this, options); }); }, - - fromElement: function(from, options) { + + open: function(subject, options) { this.initialize(); - if (this.element) this.trash(); - this.element = $(from); + + if (this.element != null) this.trash(); + this.element = $(subject) || false; + this.setOptions($merge(this.presets, options || {})); + if (this.element && this.options.parse) { var obj = this.element.getProperty(this.options.parse); if (obj && (obj = JSON.decode(obj, this.options.parseSecure))) this.setOptions(obj); } + this.url = ((this.element) ? (this.element.get('href')) : subject) || this.options.url || ''; + this.assignOptions(); - this.url = ((this.element) ? (this.options.url || this.element.get('href')) : from) || ''; - var handler = this.options.handler; + + var handler = handler || this.options.handler; if (handler) return this.setContent(handler, this.parsers[handler].call(this, true)); var ret = false; - this.parsers.some(function(parser, key) { + return this.parsers.some(function(parser, key) { var content = parser.call(this); if (content) { ret = this.setContent(key, content); @@ -123,7 +146,10 @@ var SqueezeBox = { } return false; }, this); - return ret; + }, + + fromElement: function(from, options) { + return this.open(from, options); }, assignOptions: function() { @@ -138,22 +164,23 @@ var SqueezeBox = { if (!this.isOpen || (stoppable && !$lambda(this.options.closable).call(this, e))) return this; this.fx.overlay.start(0).chain(this.toggleOverlay.bind(this)); this.win.setStyle('display', 'none'); + this.fireEvent('onClose', [this.content]); + this.trash(); this.toggleListeners(); this.isOpen = false; - this.fireEvent('onClose', [this.content]); - this.trash(); return this; }, trash: function() { this.element = this.asset = null; + this.content.empty(); this.options = {}; this.removeEvents().setOptions(this.presets).callChain(); }, onError: function() { this.asset = null; - this.setContent('string', 'Error during loading'); + this.setContent('string', this.options.errorMsg || 'An error occurred'); }, setContent: function(handler, content) { @@ -167,6 +194,7 @@ var SqueezeBox = { }, applyContent: function(content, size) { + if (!this.isOpen && !this.applyTimer) return; this.applyTimer = $clear(this.applyTimer); this.hideContent(); if (!content) { @@ -175,9 +203,10 @@ var SqueezeBox = { if (this.isLoading) this.toggleLoading(false); this.fireEvent('onUpdate', [this.content], 20); } - this.content.empty(); - if (['string', 'array', false].contains($type(content))) this.content.set('html', content || ''); - else this.content.adopt(content); + if (content) { + if (['string', 'array'].contains($type(content))) this.content.set('html', content); + else if (!this.content.hasChild(content)) this.content.adopt(content); + } this.callChain(); if (!this.isOpen) { this.toggleListeners(true); @@ -190,7 +219,8 @@ var SqueezeBox = { }, resize: function(size, instantly) { - var box = document.getSize(), scroll = document.getScroll(); + this.showTimer = $clear(this.showTimer || null); + var box = this.doc.getSize(), scroll = this.doc.getScroll(); this.size = $merge((this.isLoading) ? this.options.sizeLoading : this.options.size, size); var to = { width: this.size.x, @@ -198,7 +228,6 @@ var SqueezeBox = { left: (scroll.x + (box.x - this.size.x - this.options.marginInner.x) / 2).toInt(), top: (scroll.y + (box.y - this.size.y - this.options.marginInner.y) / 2).toInt() }; - $clear(this.showTimer || null); this.hideContent(); if (!instantly) { this.fx.win.start(to).chain(this.showContent.bind(this)); @@ -213,8 +242,8 @@ var SqueezeBox = { var fn = (state) ? 'addEvent' : 'removeEvent'; this.closeBtn[fn]('click', this.bound.close); this.overlay[fn]('click', this.bound.close); - document[fn]('keydown', this.bound.key)[fn]('mousewheel', this.bound.scroll); - window[fn]('resize', this.bound.window)[fn]('scroll', this.bound.window); + this.doc[fn]('keydown', this.bound.key)[fn]('mousewheel', this.bound.scroll); + this.doc.getWindow()[fn]('resize', this.bound.window)[fn]('scroll', this.bound.window); }, toggleLoading: function(state) { @@ -224,8 +253,15 @@ var SqueezeBox = { }, toggleOverlay: function(state) { + var full = this.doc.getSize().x; this.overlay.setStyle('display', (state) ? '' : 'none'); - $(document.body)[(state) ? 'addClass' : 'removeClass']('body-overlayed'); + this.doc.body[(state) ? 'addClass' : 'removeClass']('body-overlayed'); + if (state) { + this.scrollOffset = this.doc.getWindow().getSize().x - full; + this.doc.body.setStyle('margin-right', this.scrollOffset); + } else { + this.doc.body.setStyle('margin-right', ''); + } }, showContent: function() { @@ -235,7 +271,7 @@ var SqueezeBox = { hideContent: function() { if (!this.content.get('opacity')) this.fireEvent('onHide', [this.win]); - this.fx.content.set(0); + this.fx.content.cancel().set(0); }, onKey: function(e) { @@ -250,15 +286,13 @@ var SqueezeBox = { }, reposition: function() { - var size = document.getSize(), scroll = document.getScroll(); + var size = this.doc.getSize(), scroll = this.doc.getScroll(), ssize = this.doc.getScrollSize(); this.overlay.setStyles({ - left: scroll.x + 'px', - top: scroll.y + 'px', - width: size.x + 'px', - height: size.y + 'px' + width: ssize.x + 'px', + height: ssize.y + 'px' }); this.win.setStyles({ - left: (scroll.x + (size.x - this.win.offsetWidth) / 2).toInt() + 'px', + left: (scroll.x + (size.x - this.win.offsetWidth) / 2 - this.scrollOffset).toInt() + 'px', top: (scroll.y + (size.y - this.win.offsetHeight) / 2).toInt() + 'px' }); return this.fireEvent('onMove', [this.overlay, this.win]); @@ -320,7 +354,7 @@ SqueezeBox.handlers.extend({ this.onError.delay(10, this); return; } - var box = document.getSize(); + var box = this.doc.getSize(); box.x -= this.options.marginImage.x; box.y -= this.options.marginImage.y; size = {x: tmp.width, y: tmp.height}; @@ -337,8 +371,9 @@ SqueezeBox.handlers.extend({ size.y = size.y.toInt(); this.asset = $(tmp); tmp = null; - this.asset.setProperties({width: size.x, height: size.y}); - if (this.isOpen) this.applyContent(this.asset, size); + this.asset.width = size.x; + this.asset.height = size.y; + this.applyContent(this.asset, size); }).bind(this); tmp.src = url; if (tmp && tmp.onload && tmp.complete) tmp.onload(); @@ -346,17 +381,25 @@ SqueezeBox.handlers.extend({ }, clone: function(el) { - return el.clone(); + if (el) return el.clone(); + return this.onError(); }, - adopt: $arguments(0), + adopt: function(el) { + if (el) return el; + return this.onError(); + }, ajax: function(url) { + var options = this.options.ajaxOptions || {}; this.asset = new Request.HTML($merge({ - method: 'get' + method: 'get', + evalScripts: false }, this.options.ajaxOptions)).addEvents({ onSuccess: function(resp) { this.applyContent(resp); + if (options.evalScripts !== null && !options.evalScripts) $exec(this.asset.response.javascript); + this.fireEvent('onAjax', [resp, this.asset]); this.asset = null; }.bind(this), onFailure: this.onError.bind(this) @@ -365,12 +408,20 @@ SqueezeBox.handlers.extend({ }, iframe: function(url) { - return new Element('iframe', $merge({ + this.asset = new Element('iframe', $merge({ src: url, frameBorder: 0, width: this.options.size.x, height: this.options.size.y }, this.options.iframeOptions)); + if (this.options.iframePreload) { + this.asset.addEvent('load', function() { + this.applyContent(this.asset.setStyle('display', '')); + }.bind(this)); + this.asset.setStyle('display', 'none').inject(this.content); + return false; + } + return this.asset; }, string: function(str) { diff --git a/static/js/common.js b/static/js/common.js index 0f037356d..dbd7906cb 100644 --- a/static/js/common.js +++ b/static/js/common.js @@ -1,16 +1,59 @@ window.addEvent('domready', function(){ - $('menu2').getElements('li.dropdown').each( function( elem ){ - var list = elem.getElement('ul.links'); - var myFx = new Fx.Slide(list).hide(); - elem.addEvents({ - 'mouseenter' : function(){ - myFx.cancel(); - myFx.slideIn(); - }, - 'mouseleave' : function(){ - myFx.cancel(); - myFx.slideOut(); - } + if ($('menu2')) { + $('menu2').getElements('li.dropdown').each( function( elem ){ + var list = elem.getElement('ul.links'); + var myFx = new Fx.Slide(list).hide(); + elem.addEvents({ + 'mouseenter' : function(){ + myFx.cancel(); + myFx.slideIn(); + }, + 'mouseleave' : function(){ + myFx.cancel(); + myFx.slideOut(); + } + }); }); - }) -}); \ No newline at end of file + } +}); + +var toggleModal = function(backgroundColour, options) { + // modal view for the whole screen + // ver 2.02 17/10/2008 03:42:06 + if ($("modal")) { + $("modal").dispose(); + return false; + } + + var options = $merge({ + zIndex: 10000000, + opacity: .8, + events: $empty() + }, options); + + if (!$type(backgroundColour) && !$("modal")) + return false; + + return new Element("div", { + id: "modal", + styles: { + position: "absolute", + top: 0, + left: 0, + width: window.getScrollWidth(), + height: window.getScrollHeight(), + background: backgroundColour, + "z-index": options.zIndex + }, + opacity: options.opacity, + events: options.events + }).inject(document.body); +} + +confirmation = function(question) { + SqueezeBox.initialize({ + size: {x: 300, y: 150}, + handler: 'iframe' + }); + SqueezeBox.open("/mailng/main/confirm/?question=" + question); +} diff --git a/static/js/domains.js b/static/js/domains.js index 28dd9b3ed..602a5f740 100644 --- a/static/js/domains.js +++ b/static/js/domains.js @@ -20,8 +20,11 @@ window.addEvent('domready', function() { if ($$("a[name=deleteMb]")) $$("a[name=deleteMb]").addEvent('click', function(event) { - if (!confirm(gettext("Delete this mailbox?"))) - event.stop(); + /*if (!confirm(gettext("Delete this mailbox?"))) + event.stop();*/ + // the function also returns the object so you can tweak it from the outside: + confirmation(gettext("Delete this mailbox?")); + event.stop(); }); if ($$("a[name=deleteAlias]")) @@ -67,7 +70,6 @@ window.addEvent('domready', function() { }); newdom = function() { - alert("pouet"); form = $("form[name=newdom]"); var params = obj.toQueryString(); form.set('send', { diff --git a/static/stylesheets/SqueezeBox.css b/static/stylesheets/SqueezeBox.css index 54b823c71..df77cf907 100644 --- a/static/stylesheets/SqueezeBox.css +++ b/static/stylesheets/SqueezeBox.css @@ -1,78 +1,141 @@ -#sbox-window embed, #sbox-window object, #sbox-window select -{ - visibility: visible; -} - -#sbox-overlay -{ - position: absolute; - background-color: #000; -} - -#sbox-window -{ - position: absolute; - background-color: #fff; - text-align: left; - overflow: visible; - padding: 10px; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; -} - -#sbox-btn-close -{ - position: absolute; - width: 30px; - height: 30px; - right: -15px; - top: -15px; - background: url(closebox.png) no-repeat center; - border: none; -} - -.sbox-window-ie6 #sbox-btn-close -{ - background-image: url(closebox.gif); -} - -.sbox-loading #sbox-content -{ - background-image: url(spinner.gif); - background-repeat: no-repeat; - background-position: center; -} - -#sbox-content -{ - clear: both; - overflow: auto; - background-color: #fff; - height: 100%; - width: 100%; -} - -.sbox-content-image#sbox-content -{ - overflow: visible; -} - -#sbox-image -{ - display: block; -} - -.sbox-content-image img -{ - display: block; -} - -.sbox-content-iframe#sbox-content -{ - overflow: visible; -} - -.body-overlayed embed, .body-overlayed object, .body-overlayed select -{ - visibility: hidden; +/** + * SqueezeBox - Expandable Lightbox + * + * Allows to open various content as modal, + * centered and animated box. + * + * @version 1.1 rc4 + * + * @license MIT-style license + * @author Harald Kirschner + * @copyright Author + */ + +#sbox-overlay { + position: absolute; + background-color: #000; + left: 0px; + top: 0px; + zoom: 1; +} + +#sbox-window { + position: absolute; + background-color: #fff; + text-align: left; + overflow: visible; + padding: 10px; + /* invalid values, but looks smoother! */ + -moz-border-radius: 3px; + -webkit-border-radius: 3px; +} + +#sbox-btn-close { + position: absolute; + width: 30px; + height: 30px; + right: -15px; + top: -15px; + background: url(closebox.png) no-repeat center; + border: none; +} + +.sbox-window-ie6 #sbox-btn-close { + background-image: url(closebox.gif); +} + +.sbox-loading #sbox-content { + background-image: url(spinner.gif); + background-repeat: no-repeat; + background-position: center; +} + +#sbox-content { + clear: both; + overflow: auto; + background-color: #fff; + height: 100%; + width: 100%; +} + +.sbox-content-image#sbox-content { + overflow: visible; +} + +#sbox-image { + display: block; +} + +.sbox-content-image img { + display: block; + width: 100%; + height: 100%; +} + +.sbox-content-iframe#sbox-content { + overflow: visible; +} + +/* Hides scrollbars */ +.body-overlayed { + overflow: hidden; +} +/* Hides flash (Firefox problem) and selects (IE) */ +.body-overlayed embed, .body-overlayed object, .body-overlayed select { + visibility: hidden; +} +#sbox-window embed, #sbox-window object, #sbox-window select { + visibility: visible; +} + +/* Shadows */ +.sbox-bg { + position: absolute; + width: 33px; + height: 40px; +} + +.sbox-bg-n { + left: 0; + top: -40px; + width: 100%; + background: url(bg_n.png) repeat-x; +} +.sbox-bg-ne { + right: -33px; + top: -40px; + background: url(bg_ne.png) no-repeat; +} +.sbox-bg-e { + right: -33px; + top: 0; + height: 100%; + background: url(bg_e.png) repeat-y; +} +.sbox-bg-se { + right: -33px; + bottom: -40px; + background: url(bg_se.png) no-repeat; +} +.sbox-bg-s { + left: 0; + bottom: -40px; + width: 100%; + background: url(bg_s.png) repeat-x; +} +.sbox-bg-sw { + left: -33px; + bottom: -40px; + background: url(bg_sw.png) no-repeat; +} +.sbox-bg-w { + left: -33px; + top: 0; + height: 100%; + background: url(bg_w.png) repeat-y; +} +.sbox-bg-nw { + left: -33px; + top: -40px; + background: url(bg_nw.png) no-repeat; } \ No newline at end of file diff --git a/templates/admin/domain_header.html b/templates/admin/domain_header.html index f661698a9..7dae4dd19 100644 --- a/templates/admin/domain_header.html +++ b/templates/admin/domain_header.html @@ -1,5 +1,6 @@ {% extends "layout.html" %} {% block html_head %} + {% endblock %} {% block content %} diff --git a/templates/main/confirm.html b/templates/main/confirm.html new file mode 100644 index 000000000..ba0aa5a59 --- /dev/null +++ b/templates/main/confirm.html @@ -0,0 +1,16 @@ +{% extends "layout_simple.html" %} +{% block html_head %} + +{% endblock %} +{% block content %} +{% load i18n %} +{{ msg }}
+ +

+{% trans "Do not delete mailbox directory" %} +

+ + + +{% endblock %} +