Skip to content
Browse files

Lightbox no longer image dependent, centered lightbox dependent dialo…

…gs now work
  • Loading branch information...
1 parent a1fc104 commit 22e82e2c74f0ccb7896e83ca2fb5732726857dc1 Winton Welsh committed Apr 30, 2008
Showing with 53 additions and 40 deletions.
  1. +44 −32 Dialog.js
  2. +9 −8 Lightbox.js
View
76 Dialog.js
@@ -70,37 +70,36 @@ Example:
*/
var Dialog = Base.extend({
- options: {
- elements: {}, events: {},
-
- onShow: Class.empty, // must call dialog.show(), this.ready()
- onHide: Class.empty,
- onSubmit: Class.empty,
- onRespond: Class.empty,
-
- onValidationFailed: Class.empty,
- onValidationReset: Class.empty,
-
- centered: false,
- lightbox: false,
-
- inside: null,
- trigger: null,
+ initialize: function(template, options) {
+ this.options = {
+ elements: {}, events: {},
- dialog_template: '#template_dialog',
- method: 'post'
- },
- initialize: function(template, options) {
+ onShow: Class.empty, // must call dialog.show(), this.ready()
+ onHide: Class.empty,
+ onSubmit: Class.empty,
+ onRespond: Class.empty,
+
+ onValidationFailed: Class.empty,
+ onValidationReset: Class.empty,
+
+ centered: false,
+ lightbox: false,
+
+ inside: null,
+ trigger: '#' + template,
+
+ dialog_template: '#template_dialog',
+ method: 'post'
+ };
+ this.setOptions(options);
+
this.elements = {
- load: {}, container: {}, dialog: { close: '.close', form: 'form', submit: '.submit' }
+ container: { dialog: '#dialog_' + template },
+ load: { inside: this.options.inside, template: '#template_' + template, dialog_template: this.options.dialog_template },
+ dialog: { close: '.close', form: 'form', submit: '.submit' }
};
+ this.elements.dialog.filter = this.elements.container.dialog;
- this.options.trigger = '#' + template;
- this.elements.load.template = '#template_' + template;
- this.elements.load.dialog_template = this.options.dialog_template;
- this.elements.dialog.filter = this.elements.container.dialog = '#dialog_' + template;
-
- this.setOptions(options);
this.options.trigger = $$(this.options.trigger);
$extend(this.elements.dialog, this.options.elements);
$extend(this, this.options.events);
@@ -171,7 +170,7 @@ var Dialog = Base.extend({
this.el.dialog.replaceWith(dialog);
if (this.options.centered) this.el.dialog.center();
} else
- dialog.injectInside($(this.options.inside) || document.body);
+ dialog.injectInside(this.el.inside || document.body);
this.loadElements('container');
this.loadElements('dialog');
@@ -232,9 +231,9 @@ var Dialog = Base.extend({
if (!this.el.dialog) this.render(data);
if (this.options.centered) {
this.el.dialog.setStyles({
- display: '',
- opacity: 0,
- position: 'absolute'
+ display: '',
+ position: 'absolute',
+ 'z-index': 1001
});
this.el.dialog.center();
}
@@ -286,4 +285,17 @@ var Dialog = Base.extend({
});
Dialog.implement(new Events);
-Dialog.implement(new Options);
+Dialog.implement(new Options);
+
+Element.extend({
+ center: function() {
+ var width = this.getSize().size.x;
+ var height = this.getSize().size.y;
+
+ this.setStyles({
+ position: 'absolute',
+ left: (Window.getWidth() / 2 - width / 2) + Window.getScrollLeft() + 'px',
+ top: (Window.getHeight() / 2 - height / 2) + Window.getScrollTop() + 'px'
+ });
+ }
+});
View
17 Lightbox.js
@@ -7,21 +7,22 @@ License:
*/
var Lightbox = new Class({
- initialize: function(container) {
- this.box = $(container);
+ initialize: function(color, opacity) {
+ this.box = new Element('div');
this.fire = this.fire.bind(this);
- if (this.box)
- this.box.addEvent('click', this.fire);
+ this.box.setStyles({ background: color, opacity: opacity, 'z-index': 1000, position: 'absolute' });
+ this.box.injectInside(document.body);
+ this.box.hide();
+ this.box.addEvent('click', this.fire);
window.addEvent('resize', function() {
- if (this.box && this.box.visible())
- this.box.expand();
+ if (this.box && this.box.visible()) this.box.expand();
}.bind(this));
},
attachDialog: function(dialog) {
- dialog.addEvent ('onShow', this.open.bind(this));
- dialog.addEvent ('onHide', this.close.bind(this));
+ dialog.addEvent('onShow', this.show.bind(this));
+ dialog.addEvent('onHide', this.hide.bind(this));
},
detach: function() {
delete this['$events'];

0 comments on commit 22e82e2

Please sign in to comment.
Something went wrong with that request. Please try again.