Permalink
Browse files

Dialogs working properly

  • Loading branch information...
1 parent 3a564fa commit 8303e750cdfc0f4617b362b3e1f88407b0392483 Winton Welsh committed Apr 28, 2008
Showing with 122 additions and 128 deletions.
  1. +0 −1 AjaxChain.js
  2. +0 −16 Array.js
  3. +9 −10 Base.js
  4. +44 −87 Dialog.js
  5. +11 −6 Element.js
  6. +4 −4 Indicator.js
  7. +48 −0 README
  8. +6 −4 assets/setup.rb
View
@@ -50,7 +50,6 @@ var AjaxChain = new Class({
this.chains[0].delay(10, this);
else {
this.chains.shift();
-
if (this.chains.length)
this.chains[0].delay(10, this);
else
View
@@ -14,22 +14,6 @@ Structure: Array
Array.extend({
/*
- Property: toObject
- Returns an object with the Array's values as keys.
-
- Arguments:
- fill - (default: null) All values are set to this value.
- */
-
- toObject: function(fill) {
- var obj = {};
- this.each(function(item) {
- obj[item] = (fill) ? fill : true;
- });
- return obj;
- },
-
- /*
Property: zebra
Adds the class name "zebra" to even or odd indices of the element array
View
19 Base.js
@@ -41,26 +41,25 @@ Example:
var Base = new Class({
initialize: function() {
+ this.el = {};
if (this.elements.load)
this.loadElements('load');
},
loadElement: function(name, group) {
if (name == 'filter') return false;
- var filter = this.elements[group].filter;
- var selector = this.elements[group][name];
-
- var elements = $ES(selector, (filter) ? $$(filter)[0] : null);
-
- var eventName = 'on' + name.split('_').map(function(item) { return item.capitalize(); }).join('');
- var regex = new RegExp(eventName + '[a-zA-Z]+');
+ var filter = this.elements[group].filter;
+ var selector = this.elements[group][name];
+ var elements = $ES(selector, (filter) ? $$(filter)[0] : null);
+ var eventName = 'on' + name.split('_').map(function(item) { return item.capitalize(); }).join('');
+ var regex = new RegExp(eventName + '[a-zA-Z]+');
// addEvent for fn matches
for (fn in this) {
if ($type(this[fn]) != 'function') continue;
if (regex.test(fn)) {
- var event = fn.substring(eventName.length).toLowerCase();
+ var event = fn.substring(eventName.length).toLowerCase();
elements.each(function(item) {
item.removeEvents(event);
@@ -71,8 +70,8 @@ var Base = new Class({
this.el[name] = elements;
- // force array
- if (!this.elements.force_array.contains(name) && this.el[name].length == 1)
+ // if the element name is singular and is one element long, kill the array
+ if (name.charAt(name.length - 1) != 's' && this.el[name].length == 1)
this.el[name] = this.el[name][0];
return this.el[name];
View
131 Dialog.js
@@ -79,16 +79,24 @@ var Dialog = Base.extend({
onShow: Class.empty, // must call dialog.show(), this.ready()
onHide: Class.empty,
onSubmit: Class.empty,
- onResponse: Class.empty,
+ onRespond: Class.empty,
- centered: false, lightbox: false,
- injectInside: null, template_dialog: '#template_dialog', trigger: null
+ onValidationFailed: Class.empty,
+ onValidationReset: Class.empty,
+
+ centered: false,
+ lightbox: false,
+
+ inside: null,
+ trigger: null,
+
+ dialog_template: '#template_dialog',
+ method: 'post'
},
initialize: function(template, options) {
- this.options.template = this.options.trigger = '#' + template;
-
+ this.options.trigger = '#' + template;
this.elements.load.template = '#template_' + template;
- this.elements.load.template_dialog = this.options.template_dialog;
+ this.elements.load.dialog_template = this.options.dialog_template;
this.elements.dialog.filter = this.elements.container.dialog = '#dialog_' + template;
this.setOptions(options);
@@ -103,16 +111,14 @@ var Dialog = Base.extend({
if (this.options.lightbox)
Global.Lightbox.attachDialog(this);
if (this.options.trigger)
- this.options.trigger.addEvent('click', function(e) { this.show(); }.bindWithEvent(this));
-
- console.log()
+ this.options.trigger.addEvent('click', function(e) { e.stop(); this.show(); }.bindWithEvent(this));
},
// Events
onCloseClick: function(e) {
+ e.stop();
this.hide();
- e.stop();
},
onFormKeyDown: function(e) {
if (e.key == 'esc') this.hide();
@@ -134,12 +140,12 @@ var Dialog = Base.extend({
*/
hide: function(keep_lightbox) {
- if (this.el.dialog) this.fireEvent.pass([ 'onHide', [ this.el.dialog, keep_lightbox] ], this);
+ if (this.el.dialog) this.fireEvent('onHide', [ this.el.dialog, keep_lightbox]);
},
/*
Property: ready
- Focuses the form.
+ Called by onShow. Focuses the form.
*/
ready: function() {
@@ -155,18 +161,20 @@ var Dialog = Base.extend({
*/
render: function(data) {
- data.content = data.content || this.el.template.render(data);
+ data = data || {};
+ data.content = data.content || this.el.template.render(data, true);
var dialog = this.el.dialog_template.render(data);
- dialog.id = this.options.template;
+ dialog.id = this.elements.container.dialog.substring(1);
if (this.el.dialog) {
this.el.dialog.replaceWith(dialog);
if (this.options.centered) this.el.dialog.center();
} else
- dialog.injectInside(this.options.injectInside || document.body);
+ dialog.injectInside($(this.options.inside) || document.body);
this.loadElements('container');
this.loadElements('dialog');
+
return this;
},
@@ -244,83 +252,32 @@ var Dialog = Base.extend({
else {
this.fireEvent('onSubmit', this.el.dialog);
this.el.form.send({
+ method: this.options.method,
onComplete: function(r) {
- this.fireEvent('onResponse', [ this.el.dialog, Json.evaluate(r) ]);
+ var json = Json.evaluate(r);
+ this.fireEvent('onRespond', [ this.el.dialog, json ]);
+ if (json.errors) {
+ var inputs = $ES('input, textarea', this.el.form).sort(function(a, b) {
+ return a.getProperty('tabindex').toInt() - b.getProperty('tabindex').toInt();
+ });
+ var index = 1000;
+ inputs.each(function(item) { this.fireEvent('onValidationReset', item); }, this);
+ $each(json.errors, function(value, model) {
+ $each(value, function(messages, name) {
+ var el = this.el.form[model + '[' + name + ']'];
+ index = inputs.indexOf(el) < index ? inputs.indexOf(el) : index;
+ this.fireEvent('onValidationFailed', [ el , messages ]);
+ }, this);
+ }, this);
+ inputs[index].select();
+ inputs[index].fireEvent('focus');
+ } else if (json.location)
+ window.location = json.location;
}.bind(this)
});
}
}
});
Dialog.implement(new Events);
-Dialog.implement(new Options);
-
-/*
-Class: Dialog.Input
- Returns a generic form handling <Dialog> instance.
-
-Arguments:
- template - The ID of the dialog template.
- options - See <Dialog> options.
-
-Example:
- > var dialog_input = Dialog.Input('template_dialog', { title: 'Log In' });
-*/
-
-Dialog.Input = function(template, options) {
- options = (options) ? options : {};
-
- var submit = options.onSubmit;
- delete options.onSubmit;
-
- $extend(options, {
- onClose: Dialog.Events.onClose.remove,
- onOpen: Dialog.Events.onOpen.reset,
- onReady: Dialog.Events.onReady.focus
- });
-
- var dialog = new Dialog(template, options);
-
- dialog.setOptions({
- onSubmit: (submit) ?
- Dialog.Events.onSubmit.send.pass(submit.bind(dialog), dialog) :
- Dialog.Events.onSubmit.send
- });
-
- return dialog;
-};
-
-/*
-Class: Dialog.Simple
- Returns a very generic (content only) <Dialog> instance.
-
-Arguments:
- template - The ID of the dialog template.
- options - See <Dialog> options.
-
-Example:
- > var dialog = Dialog.Simple('template_dialog', { title: 'My Content' });
-*/
-
-Dialog.Simple = function(template, options) {
- options = options ? options : {};
-
- $extend(options, {
- onClose: Dialog.Events.onClose.remove
- });
-
- return new Dialog(template, 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'
- });
- }
-});
+Dialog.implement(new Options);
View
@@ -64,8 +64,7 @@ Element.extend({
*/
fadeIn: function(duration, onComplete, bind) {
- this.getFx(duration ? duration : 200, onComplete, bind);
- this.fx.set({ opacity:0 });
+ this.getFx(duration ? duration : 200, onComplete, bind).set({ opacity:0 });
this.show();
this.fx.start({ opacity:1 });
},
@@ -81,8 +80,7 @@ Element.extend({
*/
fadeOut: function(duration, onComplete, bind) {
- this.getFx(duration ? duration : 200, onComplete, bind);
- this.fx.start({ opacity:0 });
+ this.getFx(duration ? duration : 200, onComplete, bind).start({ opacity:0 });
},
/*
@@ -111,10 +109,12 @@ Element.extend({
getFx: function(duration, onComplete, bind, options) {
options = options || {};
+ if (duration) options.duration = duration;
if (!this.fx) this.fx = new Fx.Styles(this);
- this.fx.setOptions($extend({ wait:false, duration:duration }, options));
+ this.fx.setOptions($extend({ wait:false, duration:200 }, options));
this.fx.$events = this.fx.$events || {};
this.fx.$events.onComplete = onComplete ? [ onComplete.bind(bind) ] : [];
+ return this.fx;
},
/*
@@ -142,7 +142,12 @@ Element.extend({
render: function(data, return_html) {
var html = TrimPath.processDOMTemplate(this.id, $merge({}, data));
- return return_html ? html : new Element('div').setHTML(html).getFirst();
+ if (!return_html) {
+ var el = new Element('div');
+ el.setHTML(html);
+ html = el.getFirst();
+ }
+ return html;
},
/*
View
@@ -7,16 +7,16 @@ License:
*/
var Indicator = new Class({
- initialize: function(image) {
+ initialize: function(image, x, y) {
this.container = new Element('div');
- this.container.setHTML('<img src="' + image + '" />');
+ this.container.setHTML('<img src="/images/' + image + '" />');
this.container.setStyles({ position: 'absolute', opacity: 0, 'z-index': 5000 });
this.container.injectInside(document.body);
$(document.body).addEvent('mousemove', function(e) {
this.container.setStyles({
- top: e.page.y + 5 + 'px',
- left: e.page.x + 5 + 'px'
+ top: e.page.y + y + 'px',
+ left: e.page.x + x + 'px'
});
}.bindWithEvent(this));
},
View
48 README
@@ -0,0 +1,48 @@
+== StuTools by Winton Welsh <win@sumapp.com>
+
+Useful addons to the popular MooTools javascript library.
+
+
+== Install
+
+(From RAILS_ROOT)
+cd public/javascripts
+git submodule add git@github.com:winton/stutools.git stutools
+ruby stutools/assets/setup.rb
+
+
+== Application helper
+
+def mootools
+ RAILS_ENV == 'development' ? 'stutools/assets/moo' : 'moo'
+end
+
+def stutools
+ if RAILS_ENV == 'development'
+ Dir[RAILS_ROOT + "/public/javascripts/stutools/*.js"].collect { |f| 'stutools/' + File.basename(f, '.js') }
+ else
+ 'stu'
+ end
+end
+
+
+== Layout
+
+<%= javascript_include_tag mootools %>
+<%= javascript_include_tag stutools %>
+or
+<%= javascript_include_tag *(mootools + stutools + [ :cache => true ]) %>
+
+
+== Files
+
+stutools/*.js
+ StuTools library files
+
+stutools/assets/moo.js
+ MooTools version 1.11 with a few minor fixes
+ Json is always expected - setHeader('Accept', 'application/json')
+
+stutools/assets/setup.rb
+ Joins and compresses StuTools library files to /javascripts/stu.js
+ Compresses MooTools library to /javascripts/moo.js
Oops, something went wrong.

0 comments on commit 8303e75

Please sign in to comment.