zen 0.1a → 0.2

data/lib/zen/public/admin/js/vendor/datepicker/Picker.js

@@ -0,0 +1,291 @@
+/*
+---
+name: Picker
+description: Creates a Picker, which can be used for anything
+authors: Arian Stolwijk
+requires: [Core/Element.Dimensions, Core/Fx.Tween, Core/Fx.Transitions]
+provides: Picker
+...
+*/
+
+
+var Picker = new Class({
+
+	Implements: [Options, Events],
+
+	options: {/*
+		onShow: function(){},
+		onOpen: function(){},
+		onHide: function(){},
+		onClose: function(){},*/
+
+		pickerClass: 'datepicker',
+		inject: null,
+		animationDuration: 400,
+		useFadeInOut: true,
+		positionOffset: {x: 0, y: 0},
+		pickerPosition: 'bottom',
+		draggable: true,
+		showOnInit: true
+	},
+
+	initialize: function(options){
+		this.setOptions(options);
+		this.constructPicker();
+		if (this.options.showOnInit) this.show();
+	},
+
+	constructPicker: function(){
+		var options = this.options;
+
+		var picker = this.picker = new Element('div', {
+			'class': options.pickerClass,
+			styles: {
+				left: 0,
+				top: 0,
+				display: 'none',
+				opacity: 0
+			}
+		}).inject(options.inject || document.body);
+
+		if (options.useFadeInOut){
+			picker.set('tween', {
+				duration: options.animationDuration,
+				link: 'cancel'
+			});
+		}
+
+		// Build the header
+		var header = this.header = new Element('div.header').inject(picker);
+
+		this.closeButton = new Element('div.closeButton[text=x]')
+			.addEvent('click', this.close.pass(false, this))
+			.inject(header);
+
+		var title = this.title = new Element('div.title').inject(header);
+		this.titleText = new Element('div.titleText').inject(title);
+
+		// Build the body of the picker
+		var body = this.body = new Element('div.body').inject(picker);
+
+		// oldContents and newContents are used to slide from the old content to a new one.
+		var slider = this.slider = new Element('div.slider', {
+			styles: {
+				position: 'absolute',
+				top: 0,
+				left: 0
+			}
+		}).set('tween', {
+			duration: options.animationDuration,
+			transition: Fx.Transitions.Quad.easeInOut
+		}).inject(body);
+
+		this.oldContents = new Element('div', {
+			styles: {
+				position: 'absolute',
+				top: 0
+			}
+		}).inject(slider);
+
+		this.newContents = new Element('div', {
+			styles: {
+				position: 'absolute',
+				top: 0,
+				left: 0
+			}
+		}).inject(slider);
+
+		// IFrameShim for select fields in IE
+		var shim = this.shim = window['IframeShim'] ? new IframeShim(picker) : null;
+
+		// Dragging
+		if (options.draggable && typeOf(picker.makeDraggable) == 'function'){
+			this.dragger = picker.makeDraggable(shim ? {
+				onDrag: shim.position.bind(shim)
+			} : null);
+			picker.setStyle('cursor', 'move');
+		}
+
+		this.addEvent('open', function(){
+			picker.setStyle('display', 'block');
+			if (shim) shim.show();
+		}, true);
+
+		this.addEvent('hide', function(){
+			picker.setStyle('display', 'none');
+			if (shim) shim.hide();
+		}, true);
+
+	},
+
+	open: function(noFx){
+		if (this.opened == true) return this;
+		this.opened = true;
+		this.fireEvent('open');
+		if (this.options.useFadeInOut && !noFx){
+			this.picker.fade('in').get('tween').chain(function(){
+				this.fireEvent('show');
+			}.bind(this));
+		} else {
+			this.picker.setStyle('opacity', 1);
+			this.fireEvent('show');
+		}
+		return this;
+	},
+
+	show: function(){
+		return this.open(true);
+	},
+
+	close: function(noFx){
+		if (this.opened == false) return this;
+		this.opened = false;
+		this.fireEvent('close');
+		if (this.options.useFadeInOut && !noFx){
+			this.picker.fade('out').get('tween').chain(function(){
+				this.fireEvent('hide');
+			}.bind(this));
+		} else {
+			this.picker.setStyle('opacity', 0);
+			this.fireEvent('hide');
+		}
+		return this;
+	},
+
+	hide: function(){
+		return this.close(true);
+	},
+
+	toggle: function(){
+		return this[this.opened == true ? 'close' : 'open']();
+	},
+
+	destroy: function(){
+		this.picker.destroy();
+		if (this.shim) this.shim.destroy();
+	},
+
+	position: function(x, y){
+		var offset = this.options.positionOffset,
+			scroll = document.getScroll(),
+			size = document.getSize(),
+			pickersize = this.picker.getSize();
+
+		if (typeOf(x) == 'element'){
+			var element = x,
+				where = y || this.options.pickerPosition;
+
+			var elementCoords = element.getCoordinates();
+
+			x = (where == 'left') ? elementCoords.left - pickersize.x
+				: (where == 'bottom' || where == 'top') ? elementCoords.left
+				: elementCoords.right
+			y = (where == 'bottom') ? elementCoords.bottom
+				: (where == 'top') ? elementCoords.top - pickersize.y
+				: elementCoords.top;
+		}
+
+		x += offset.x * ((where && where == 'left') ? -1 : 1);
+		y += offset.y * ((where && where == 'top') ? -1: 1);
+
+		if ((x + pickersize.x) > (size.x + scroll.x)) x = (size.x + scroll.x) - pickersize.x;
+		if ((y + pickersize.y) > (size.y + scroll.y)) y = (size.y + scroll.y) - pickersize.y;
+		if (x < 0) x = 0;
+		if (y < 0) y = 0;
+
+		this.picker.setStyles({
+			left: x,
+			top: y
+		});
+		if (this.shim) this.shim.position();
+		return this;
+	},
+
+	setBodySize: function(){
+		var bodysize = this.bodysize = this.body.getSize();
+		this.slider.setStyles({
+			width: 2 * bodysize.x,
+			height: bodysize.y
+		});
+		this.oldContents.setStyles({
+			left: bodysize.x,
+			width: bodysize.x,
+			height: bodysize.y
+		});
+		this.newContents.setStyles({
+			width: bodysize.x,
+			height: bodysize.y
+		});
+	},
+
+	setContent: function(){
+		var content = Array.from(arguments), fx;
+
+		if (['right', 'left', 'fade'].contains(content[1])) fx = content[1];
+		if (content.length == 1 || fx) content = content[0];
+
+		// swap contents so we can fill the newContents again and animate
+		var old = this.oldContents;
+		this.oldContents = this.newContents;
+		this.newContents = old;
+		this.newContents.empty();
+
+		var type = typeOf(content);
+		if (['string', 'number'].contains(type)) this.newContents.set('text', content);
+		else this.newContents.adopt(content);
+
+		this.setBodySize();
+
+		if (fx){
+			this.fx(fx);
+		} else {
+			this.slider.setStyle('left', 0);
+			this.oldContents.setStyles({left: 0, opacity: 0});
+			this.newContents.setStyles({left: 0, opacity: 1});
+		}
+		return this;
+	},
+
+	fx: function(fx){
+		var oldContents = this.oldContents,
+			newContents = this.newContents,
+			slider = this.slider,
+			bodysize = this.bodysize;
+		if (fx == 'right'){
+			oldContents.setStyles({left: 0, opacity: 1});
+			newContents.setStyles({left: bodysize.x, opacity: 1});
+			slider.setStyle('left', 0).tween('left', 0, -bodysize.x);
+		} else if (fx == 'left'){
+			oldContents.setStyles({left: bodysize.x, opacity: 1});
+			newContents.setStyles({left: 0, opacity: 1});
+			slider.setStyle('left', -bodysize.x).tween('left', -bodysize.x, 0);
+		} else if (fx == 'fade'){
+			slider.setStyle('left', 0);
+			oldContents.setStyle('left', 0).set('tween', {
+				duration: this.options.animationDuration / 2
+			}).tween('opacity', 1, 0).get('tween').chain(function(){
+				oldContents.setStyle('left', bodysize.x);
+			});
+			newContents.setStyles({opacity: 0, left: 0}).set('tween', {
+				duration: this.options.animationDuration
+			}).tween('opacity', 0, 1);
+		}
+	},
+
+	toElement: function(){
+		return this.picker;
+	},
+
+	setTitle: function(text){
+		this.titleText.set('text', text);
+		return this;
+	},
+
+	setTitleEvent: function(fn){
+		this.titleText.removeEvents('click');
+		if (fn) this.titleText.addEvent('click', fn);
+		this.titleText.setStyle('cursor', fn ? 'pointer' : '');
+		return this;
+	}
+
+});

data/lib/zen/public/admin/js/vendor/datepicker/README.md

@@ -0,0 +1,325 @@
+MooTools-DatePicker
+===================
+
+MooTools DatePicker is a nice modular and themable DatePicker. It has many features and options, such as
+year, month, day or timepicker only modes, min and max dates, Localization and a lot more.
+
+This Plugin makes use of MooTools' Locale and Date plugins in MooTools More, to provide a localized
+datepicker, as well as easy formatting and parsing Dates.
+
+This DatePicker is a fork of the original [MonkeyPhysics DatePicker](http://www.monkeyphysics.com/mootools/script/2/datepicker),
+and has improved a lot since then. Though it should be (almost) backward compatible.
+
+![Screenshot](https://github.com/arian/mootools-datepicker/raw/master/screenshot.png)
+
+As of version 1.60 the datepicker will only work with MooTools 1.3.
+
+How to use
+----------
+
+Below you will find a description and some docs how you can use the datepicker.
+If you find any weird things, please create a ticket at github or fork and fix it!
+
+The DatePicker consists out of three layers, a Picker class, which can be used to create  any form of Picker, a Picker.Attach class,
+which handles stuff like attaching the Picker to a input or anchor element. Finally there is the DatePicker class, which you'll probably
+use. Every option of the Picker or Picker.Attach classes can be used in the DatePicker class.
+
+Basic Example
+-------------
+
+First you need to include the following html tags:
+
+	#HTML
+	<script src="../Source/Locale.en-US.DatePicker.js" type="text/javascript"></script>
+	<script src="../Source/Picker.js" type="text/javascript"></script>
+	<script src="../Source/Picker.Attach.js" type="text/javascript"></script>
+	<script src="../Source/Picker.Date.js" type="text/javascript"></script>
+
+	<link href="../Source/datepicker_dashboard/datepicker_dashboard.css" rel="stylesheet">
+
+Then you can simply use, for example:
+
+	#JS
+	new Picker.Date($$('input'), {
+		timePicker: true,
+		positionOffset: {x: 5, y: 0},
+		pickerClass: 'datepicker_dashboard',
+		useFadeInOut: !Browser.ie
+	});
+
+
+### Theming:
+
+Theming is done with CSS files, there are four themes available, which you can find in the Source folder.
+
+Just include the CSS file and set the `pickerClass` option.
+
+
+### Localization
+
+The DatePicker uses the MooTools More Date Class, which already includes many localized strings.
+For some specific strings DatePicker has its own localizations, which you can find in the Locale.__-__.DatePicker.js files.
+Just include the file in your page with a script tag to use the translations.
+
+Currently the following languages are supported
+
+- en-US
+- de-DE
+- fr-FR
+- it-IT
+- nl-NL
+- cs-CZ
+- ru-RU
+
+You can set the current language with:
+
+	#JS
+	Locale.use('nl-NL');
+
+
+Class: DatePicker
+-----------------
+
+### Syntax
+
+	#JS
+	var dp = new DatePicker([element, options]);
+
+### Arguments
+
+1. element: (*element*, *string*, *array*) The element(s) to attach the datepicker to
+2. options: (*object*, optional) The options object
+
+### Options:
+
+All the options of the Picker and Picker.Attach classes, and:
+
+- minDate: (*Date instance*, *string*, defaults to `null`) Minimum date allowed to pick. Blocks anything before.
+- maxDate: (*Date instance*, *string*, defaults to `null`) Maximum date allowed to pick. Blocks anything after.
+- availableDates: (*object*, defaults to `null`) When only a few dates should be selectable. An object like `{2011: {1: [19, 29, 31], 3: [5, 19, 24]}}` with all the dates (year -> months -> days).
+- format: (*string*, defaults to the default localized format) The format to output into the input field. Uses [Date.format](http://mootools.net/docs/more/Types/Date#Date:format)
+- timePicker: (*boolean*, defaults to 1 `false`) Enable/disable timepicker functionality. Hours/Minutes values can be changed using the scrollwheel.
+- timeWheelStep: (*number*, defaults to `1`) The number of minutes the minutes field will change in the timepicker when using the scrollwheel, for example 5, 10, 15. The value will always be k * timeWheelStep.
+- yearPicker: (*boolean*, defaults to `true`) Enable/disable yearpicker functionality. Makes it much easier to change years.
+- yearPerPage: (*number*, defaults to `20`) Amount of years to show in the year-picking view. Be aware that this may affect your layout.
+- startView: (*string*, defaults to `days`) The view that will be showed when the picker opens. The options are `time`, `days`, `months` and `years`
+- pickOnly: (*string*, defaults to `false`) If you just want to pick a year, month, day or time. The options are `time`, `days`, `months` and `years`
+- canAlwaysGoUp: (*array*, defaults to `['months', 'days']`) The views where you can click the title to go up. The options are `time`, `days`, `months` and `years`
+- months_abbr: (*array*) An array with the month name abbreviations. If nothing is set, it will automatically use MooTools Locale to get the abbreviations
+- days_abbr: (*array*) An array with the day name abbreviations. If nothing is set, it will automatically use MooTools Locale to get the abbreviations
+- years_title: (*function*, defaults to a function which returns `year + '-' + (year + options.yearsPerPage - 1)`) A function that returns the title for the yearpicker with as arguments the date object and the options object.
+- months_title: (*function*, defaults to a function which returns `date.format('%b %Y')`) A function that returns the title for the monthpicker with as arguments the date object and the options object.
+- days_title:  (*function*, defaults to a function which returns `date.format('%b %Y')`) A function that returns the title for the daypicker with as arguments the date object and the options object.
+- time_title: (*function*, defaults to a function which returns `(options.pickOnly == 'time') ?	Locale.get('DatePicker.select_a_time') : date.format('%d %B, %Y')`) A function that returns the title for the timepicker with as arguments the date object and the options object.
+
+
+
+### Events:
+
+- onSelect: Will fire when the user has selected a date
+
+#### signature
+
+	#JS
+	onSelect(date)
+
+#### arguments
+
+1. date - A Date object. You could use [Date.format](http://mootools.net/docs/more/Types/Date#Date:format) to format it into a string. For example to set it into a hidden field which will be sent to the server.
+
+
+### Examples
+
+	#JS
+	new DatePicker('inputField', {
+		timePicker: true,
+		pickerClass: 'datepicker_jqui',
+		onSelect: function(date){
+			myHiddenField.set('value', date.format('%s');
+		}
+	});
+
+
+Class: Picker.Attach
+--------------------
+
+Picker.Attach handles all the links from elements to the Picker. It handles the onfocus events of input elements etc.
+The Class itself is not very useful on its own, but it is useful to extend this Class.
+This class adds a outerclick as well to close the Picker if you click outside the picker.
+
+#### Syntax:
+
+	#JS
+	new Picker.Attach(attachTo, options);
+
+#### Options:
+
+- toggle: (*element*, *string*, *array*) A collection of elements which will toggle the picker when such a link is clicked.
+
+
+### Picker.Attach Method: attach
+
+This will attach links and input elements to the picker
+
+#### Syntax
+
+	#JS
+	myPicker.attach(attachTo);
+
+#### Arguments
+
+1. attachTo: (*element*, *string*, *array*) The elements or element to attach to the Picker. Can be a input element for onfocus events or other elements for click events.
+
+
+### Picker.Attach Method: detach
+
+This will detach links and input elements from the picker
+
+#### Syntax
+
+	#JS
+	myPicker.detach(detach);
+
+#### Arguments
+
+1. detach: (*element*, *string*, *array*) The elements or element to detach from the Picker. Can be a input element for onfocus events or other elements for click events.
+
+
+Class: Picker
+-------------
+
+This is a generic Picker Class, which is used for the basic things, like positioning, Fx, open, close, stuff like that.
+
+#### Syntax:
+
+	#JS
+	new Picker(options);
+
+#### Options:
+
+- pickerClass: (*string*, defaults to `datepicker`) CSS class for the main datepicker container element. You can use multiple classes by separating them by a space, e.g. `class1 class2 class3`
+- inject: (*element*, defaults to `document.body`) This is where the Picker element will be injected to.
+- anitmationDuration: (*number*, defaults to `400`) Duration of the slide/fade animations in milliseconds.
+- useFadeInOut: (*boolean*, defaults to `true`) Whether to fade-in/out the datepicker popup. You might want to set this to `false` in IE.
+- positionOffset: (*object*, defaults to `{x: 0, y: 0}`) Allows you to tweak the position at which the datepicker appears, relative to the input element. Formatted as an object with x and y properties. Values can be negative.
+- pickerPosition: (*string*, defaults to `bottom`) If the picker is positioned relative to an element, you can choose to position it top, bottom, left or right.
+- draggable: (*boolean*, defaults to `true`) Will make the picker draggable, if Drag from MooTools More is included.
+
+#### Events:
+
+- open - triggered when the Picker will open (before the fx)
+- close - triggered after the Picker is will get closed (before the fx)
+- show - triggered when the Picker is shown
+- hide - triggered when the Picker is hidden
+
+
+
+### Picker Method: show
+
+A method to show the Picker manually, with a Fx.
+
+#### Syntax
+
+	#JS
+	dp.show()
+
+### Picker Method: close
+
+Closes the Picker with a Fx.
+
+#### Syntax
+
+	#JS
+	dp.close();
+
+
+### Picker Method: toggle
+
+Toggles the Picker with a Fx.
+
+#### Syntax
+
+	#JS
+	picker.toggle();
+
+### Picker Method: show
+
+Opens the Picker directly.
+
+#### Syntax
+
+	#JS
+	dp.show();
+
+
+### Picker Method: hide
+
+Hides the Picker directly.
+
+#### Syntax
+
+	#JS
+	dp.hide();
+
+
+### Picker Method: destroy
+
+Destroys the Picker
+
+	#JS
+	picker.destroy();
+
+
+### Picker Method: position
+
+Positions the Picker.
+
+#### Syntax:
+
+	#JS
+	picker.position(x, y);
+	// or
+	picker.position(myElement, where);
+
+#### Arguments
+
+1. x: (*number*) Number of pixels from the left
+2. y: (*number*) Number of pixels from the top
+
+Or
+
+1. myElement - (*element*) A element the Picker should be positioned relative to.
+2. where - (*string*, optional) Position the Picker `left` or `right` to the element.
+
+
+### Picker Method: setContent
+
+Set the content of the Picker, either elements or text.
+
+#### Syntax:
+
+	#JS
+	picker.setContent(element, fx);
+
+#### Arguments:
+
+1. element: (*element*, *string*) Set the content of the Picker with this value
+2. fx: (*string*, optional) Set the content of the picker, and apply it with this Fx. Options: 'fade', 'right', 'left'
+
+
+### Picker Method: setTitle
+
+Sets the Picker title text.
+
+	#JS
+	picker.setTitle(text);
+
+#### Arguments:
+
+1. text: (*string*) The text which will be set into the title.
+
+
+License
+-------
+
+- [MIT License](http://www.opensource.org/licenses/mit-license.php)