zen 0.3 → 0.4

data/lib/zen/public/admin/{js/zen → zen/js}/index.js

@@ -1,3 +1,5 @@
+"use strict";
+
 window.addEvent('domready', function()
 {
     $$('table:not(.no_sort)').each(function(table)
@@ -26,17 +28,27 @@ window.addEvent('domready', function()
         Zen.Editor.create(markup, editor);
     });
 
-    // Initializes a datepicker object whenever it's loaded and the correct
-    // element was found.
-    var date_elements = $$('input[type="text"].date');
-
-    if ( date_elements.length > 0 )
+    $$('input.date').each(function(el)
     {
-        new Picker.Date(date_elements,
+        var format = el.get('data-date-format') || Zen.date_format;
+        var time   = el.get('data-date-time');
+        time       = (time && (time === '1' || time === 'true')) || false;
+        var min    = el.get('data-date-min');
+        var max    = el.get('data-date-max');
+
+        new Picker.Date(el,
         {
-            timePicker:  true,
+            timePicker:  time,
             pickerClass: 'datepicker',
-            format:      Zen.date_format
+            format:      format,
+            draggable:   false,
+            minDate:     min,
+            maxDate:     max
         });
-    }
+    });
+
+    $$('form[data-autosave-url]').each(function(el)
+    {
+        new Zen.Autosave(el, el.get('data-autosave-url'));
+    });
 });

data/lib/zen/public/admin/zen/js/lib/autosave.js

@@ -0,0 +1,185 @@
+"use strict";
+
+namespace('Zen');
+
+/**
+ * Zen.Autosave automatically saves form data at a given interval. Automatically
+ * saving form data makes it more pleasant for users to work with their data as
+ * the risk of data loss is minimized.
+ *
+ * Basic usage of this class is as following:
+ *
+ *     new Zen.Autosave(
+ *         $('my_form'),
+ *         'http://localhost/admin/category-groups/autosave'
+ *     );
+ *
+ * When creating a new instance of this class you are required to specify a
+ * single Element instance as well as the URL to submit the data to. The element
+ * is specified as the first parameter, the URL as the second one. The optional
+ * third parameter can be used for setting optional options such as the interval
+ * and the HTTP method to use for submitting the data.
+ *
+ * By default the interval is set to 10 minutes, this can be changed as
+ * following:
+ *
+ *     new Zen.Autosave(element, url, {interval: 300000});
+ *
+ * This would cause the form data to be saved every 5 minutes instead of every
+ * 10 minutes.
+ *
+ * This class only submits forms for existing objects, this is based on the
+ * value of the primary column. By default the name for this column is set to
+ * "id" but this can be changed as following:
+ *
+ *     new Zen.Autosave(element, url, {primary: 'my_id'});
+ *
+ * If the field with this name has a non empty value then the form will be
+ * submitted at a given interval, otherwise it will be ignored.
+ *
+ * @since 15-02-2012
+ */
+Zen.Autosave = new Class(
+{
+    Implements: Options,
+
+    /**
+     * Element containing the form element.
+     *
+     * @since 16-02-2012
+     */
+    element: null,
+
+    /**
+     * The URL to submit the data to.
+     *
+     * @since 16-02-2012
+     */
+    url: null,
+
+    /**
+     * Object containing various options to customize the auto saving behaviour.
+     *
+     * @since 16-02-2012
+     */
+    options:
+    {
+        // The amount of miliseconds to wait between each save.
+        interval: 600000,
+
+        // The HTTP method to use for submitting the data.
+        method: 'POST',
+
+        // The name of the field that contains the primary value of an object.
+        primary: 'id'
+    },
+
+    /**
+     * Creates a new instance of the class.
+     *
+     * @since 16-02-2012
+     * @param {Element} element The form element to submit.
+     * @param {String} url The URL to submit the data to.
+     * @param {Object} options Object containing custom options. See
+     *  Zen.Autosave.options for more information.
+     */
+    initialize: function(element, url, options)
+    {
+        this.setOptions(options);
+
+        if ( typeOf(url) !== 'string' )
+        {
+            throw new TypeError(
+                'You have to specify an instance of String for the URL'
+            );
+        }
+
+        this.element = element;
+        this.url     = url;
+        var _this    = this;
+        var primary  = element
+            .getElement('input[name="' + this.options.primary + '"]');
+
+        if ( !primary || primary.get('value').length <= 0 )
+        {
+            return;
+        }
+
+        setInterval(function() { _this.sendRequest() }, this.options.interval);
+    },
+
+    /**
+     * Submits the form data to the server. Upon success the CSRF token is
+     * updated, upon failure the validation errors will be displayed.
+     *
+     * @since 16-02-2012
+     */
+    sendRequest: function()
+    {
+        var _this   = this;
+        var request = new Request.JSON(
+        {
+            url:       this.url,
+            method:    this.options.method,
+            data:      this.element.toQueryString(),
+            onSuccess: function(response)
+            {
+                _this.setToken(response.csrf_token);
+                _this.element.getElements('span.error').destroy();
+            },
+            onFailure: function(xhr)
+            {
+                var response = JSON.decode(xhr.responseText);
+
+                _this.displayErrors(response.errors);
+            }
+        });
+
+        request.send();
+    },
+
+    /**
+     * Displays the validation errors of a set of fields.
+     *
+     * @since 16-02-2012
+     * @param {Object} form_errors Object containing the form errors. The keys
+     *  should be the names of the fields and the values arrays of error messages
+     *  to display.
+     */
+    displayErrors: function(form_errors)
+    {
+        var _this = this;
+
+        Object.each(form_errors, function(errors, field)
+        {
+            var label = _this.element
+                .getElement('input[name="' + field + '"]')
+                .getSiblings('label')[0];
+
+            if ( label.getElements('span.error').length === 0 )
+            {
+                errors.each(function(error)
+                {
+                    var span = new Element('span',
+                    {
+                        'class': 'error',
+                        html:    error
+                    });
+
+                    span.inject(label);
+                });
+            }
+        });
+    },
+
+    /**
+     * Updates the CSRF token with the given value.
+     *
+     * @since 16-02-2012
+     * @param {String} token The new CSRF token.
+     */
+    setToken: function(token)
+    {
+        this.element.getElement('input[name="csrf_token"]').set('value', token);
+    }
+});

data/lib/zen/public/admin/zen/js/lib/base.js

@@ -0,0 +1,60 @@
+"use strict";
+
+/**
+ * Turns the specified string into an object (and sub objects) that can be used
+ * to namespace classes and other data.
+ *
+ * Basic usage:
+ *
+ *     console.log(Foo); // => ReferenceError
+ *
+ *     namespace('Foo.Bar.Baz');
+ *
+ *     console.log(Foo); // => {Bar: {Baz: {}}}
+ *
+ * If segments of the namespace already exist they will remain untouched, this
+ * function merely creates non existing segments.
+ *
+ * @example
+ *  namespace('Zen.Editor');
+ *
+ *  Zen.Editor.Markdown = new Class(...);
+ *
+ * @since 22-12-2011
+ * @param {string} name The namespace to create.
+ */
+function namespace(name)
+{
+    var stack = window;
+
+    name.split('.').each(function(segment)
+    {
+        stack[segment] = stack[segment] || {};
+        stack          = stack[segment];
+    });
+}
+
+/**
+ * Returns the translation for the given string. This function allows you to
+ * retrieve languages in the same way as you would do in the Ruby code for your
+ * application:
+ *
+ *     var string = lang('foo.bar');
+ *
+ * This code is the same as the following:
+ *
+ *     var string = Zen.translations['foo.bar'];
+ *
+ * @since  22-12-2011
+ * @param  {string} key The language key to retrieve.
+ * @return {string}
+ */
+function lang(key)
+{
+    if ( !Zen.translations[key] )
+    {
+        throw new Error('The language key "' + key + '" does not exist');
+    }
+
+    return Zen.translations[key];
+}

data/lib/zen/public/admin/{js/vendor → zen/js/lib}/datepicker.js

@@ -9,17 +9,12 @@ provides: Locale.nl-NL.DatePicker
 */
 
 Locale.define('en-US', 'DatePicker', {
-    select_a_time: Zen.translations[
-        'zen_general.datepicker.select_a_time'],
-	use_mouse_wheel: Zen.translations[
-        'zen_general.datepicker.use_mouse_wheel'
-    ],
-	time_confirm_button: Zen.translations[
-        'zen_general.datepicker.time_confirm_button'
-    ],
-	apply_range: Zen.translations['zen_general.datepicker.apply_range'],
-	cancel     : Zen.translations['zen_general.datepicker.cancel'],
-	week       : Zen.translations['zen_general.datepicker.week']
+    select_a_time:       lang('zen_general.datepicker.select_a_time'),
+	use_mouse_wheel:     lang('zen_general.datepicker.use_mouse_wheel'),
+	time_confirm_button: lang('zen_general.datepicker.time_confirm_button'),
+	apply_range:         lang('zen_general.datepicker.apply_range'),
+	cancel:              lang('zen_general.datepicker.cancel'),
+	week:                lang('zen_general.datepicker.week')
 });
 
 /*
@@ -31,6 +26,8 @@ requires: [Core/Element.Dimensions, Core/Fx.Tween, Core/Fx.Transitions]
 provides: Picker
 ...
 */
+
+
 var Picker = new Class({
 
 	Implements: [Options, Events],
@@ -117,18 +114,18 @@ var Picker = new Class({
 			transition: Fx.Transitions.Quad.easeInOut
 		}).inject(body);
 
-		this.oldContents = new Element('div', {
+		this.newContents = new Element('div', {
 			styles: {
 				position: 'absolute',
-				top: 0
+				top: 0,
+				left: 0
 			}
 		}).inject(slider);
 
-		this.newContents = new Element('div', {
+		this.oldContents = new Element('div', {
 			styles: {
 				position: 'absolute',
-				top: 0,
-				left: 0
+				top: 0
 			}
 		}).inject(slider);
 
@@ -150,11 +147,15 @@ var Picker = new Class({
 	open: function(noFx){
 		if (this.opened == true) return this;
 		this.opened = true;
-		var picker = this.picker.setStyle('display', 'block').set('aria-hidden', 'false')
+		var self = this,
+			picker = this.picker.setStyle('display', 'block').set('aria-hidden', 'false')
 		if (this.shim) this.shim.show();
 		this.fireEvent('open');
 		if (this.options.useFadeInOut && !noFx){
-			picker.fade('in').get('tween').chain(this.fireEvent.pass('show', this));
+			picker.get('tween').start('opacity', 1).chain(function(){
+				self.fireEvent('show');
+				this.callChain();
+			});
 		} else {
 			picker.setStyle('opacity', 1);
 			this.fireEvent('show');
@@ -176,7 +177,7 @@ var Picker = new Class({
 			self.fireEvent('hide');
 		};
 		if (this.options.useFadeInOut && !noFx){
-			picker.fade('out').get('tween').chain(hide);
+			picker.get('tween').start('opacity', 0).chain(hide);
 		} else {
 			picker.setStyle('opacity', 0);
 			hide();
@@ -370,6 +371,8 @@ requires: [Picker, Core/Element.Event]
 provides: Picker.Attach
 ...
 */
+
+
 Picker.Attach = new Class({
 
 	Extends: Picker,
@@ -379,6 +382,7 @@ Picker.Attach = new Class({
 
 		toggleElements: null, // deprecated
 		toggle: null, // When set it deactivate toggling by clicking on the input */
+		togglesOnly: true, // set to false to always make calendar popup on input element, if true, it depends on the toggles elements set.
 		showOnInit: false, // overrides the Picker option
 		blockKeydown: true
 	},
@@ -461,7 +465,7 @@ Picker.Attach = new Class({
 
 			if (tag == 'input'){
 				// Fix in order to use togglers only
-				if (!toggles.length){
+				if (!self.options.togglesOnly || !toggles.length){
 					events = {
 						focus: openEvent,
 						click: openEvent,
@@ -529,6 +533,8 @@ requires: [Picker, Picker.Attach, Locale.en-US.DatePicker, More/Locale, More/Dat
 provides: Picker.Date
 ...
 */
+
+
 (function(){
 
 this.DatePicker = Picker.Date = new Class({
@@ -553,6 +559,7 @@ this.DatePicker = Picker.Date = new Class({
 		yearsPerPage: 20,
 
 		startDay: 1, // Sunday (0) through Saturday (6) - be aware that this may affect your layout, since the days on the right might have a different margin
+		rtl: false,
 
 		startView: 'days', // allowed values: {time, days, months, years}
 		openLastView: false,
@@ -644,8 +651,17 @@ this.DatePicker = Picker.Date = new Class({
 
 	getInputDate: function(input){
 		this.date = new Date();
+
 		if (!input) return;
-		var date = Date.parse(input.get('value'));
+
+        // Taken from <https://github.com/brenard/mootools-datepicker/commit/
+        // e8f93156cf8ed989a31c9c8d5e75b1bdb294afb2>
+        var date = Date.parse(input.get('value'), this.options.format);
+
+        if (date == null) {
+            date = Date.parse(input.get('value'));
+        }
+
 		if (date == null || !date.isValid()){
 			var storeDate = input.retrieve('datepicker:value');
 			if (storeDate) date = Date.parse(storeDate);
@@ -658,8 +674,13 @@ this.DatePicker = Picker.Date = new Class({
 	constructPicker: function(){
 		this.parent();
 
-		this.previous = new Element('div.previous[html=&#171;]').inject(this.header);
-		this.next = new Element('div.next[html=&#187;]').inject(this.header);
+		if (!this.options.rtl){
+			this.previous = new Element('div.previous[html=&#171;]').inject(this.header);
+			this.next = new Element('div.next[html=&#187;]').inject(this.header);
+		} else {
+			this.next = new Element('div.previous[html=&#171;]').inject(this.header);
+			this.previous = new Element('div.next[html=&#187;]').inject(this.header);
+		}
 	},
 
 	hidePrevious: function(_next, _show){
@@ -995,16 +1016,18 @@ var renderers = {
 			body = new Element('tbody').inject(container),
 			titles = new Element('tr.titles').inject(header),
 			localeDaysShort = options.days_abbr || Locale.get('Date.days_abbr'),
-			day, classes, element, weekcontainer, dateString;
+			day, classes, element, weekcontainer, dateString,
+			where = options.rtl ? 'top' : 'bottom';
 
 		if (weeknumbers) new Element('th.title.day.weeknumber', {
 			text: Locale.get('DatePicker.week')
 		}).inject(titles);
+
 		for (day = options.startDay; day < (options.startDay + 7); day++){
 			new Element('th.title.day.day' + (day % 7), {
 				text: localeDaysShort[(day % 7)],
 				role: 'columnheader'
-			}).inject(titles);
+			}).inject(titles, where);
 		}
 
 		days.each(function(_date, i){
@@ -1012,14 +1035,14 @@ var renderers = {
 
 			if (i % 7 == 0){
 				weekcontainer = new Element('tr.week.week' + (Math.floor(i / 7))).set('role', 'row').inject(body);
-				if (weeknumbers) new Element('td.day.weeknumber', {text: date.get('week')}).inject(weekcontainer);
+				if (weeknumbers) new Element('th.day.weeknumber', {text: date.get('week'), scope: 'row', role: 'rowheader'}).inject(weekcontainer);
 			}
 
 			dateString = date.toDateString();
 			classes = '.day.day' + date.get('day');
 			if (dateString == todayString) classes += '.today';
 			if (date.get('month') != month) classes += '.otherMonth';
-			element = new Element('td' + classes, {text: date.getDate(), role: 'gridcell'}).inject(weekcontainer);
+			element = new Element('td' + classes, {text: date.getDate(), role: 'gridcell'}).inject(weekcontainer, where);
 
 			if (dateString == currentString) element.addClass('selected').set('aria-selected', 'true');
 			else element.set('aria-selected', 'false');
@@ -1165,7 +1188,7 @@ var isUnavailable = function(type, date, options){
 	month = date.get('month') + 1;
 	day = date.get('date');
 
-	var dateAllow = (minDate && date < minDate) || (minDate && date > maxDate);
+	var dateAllow = (minDate && date < minDate) || (maxDate && date > maxDate);
 	if (availableDates != null){
 		dateAllow = dateAllow
 			|| availableDates[year] == null
@@ -1188,6 +1211,7 @@ requires: [Picker, Picker.Date]
 provides: Picker.Date.Range
 ...
 */
+
 Picker.Date.Range = new Class({
 
 	Extends: Picker.Date,