init

public/tinymce/classes/ui/Form.js

@@ -0,0 +1,153 @@
+/**
+ * Form.js
+ *
+ * Copyright, Moxiecode Systems AB
+ * Released under LGPL License.
+ *
+ * License: http://www.tinymce.com/license
+ * Contributing: http://www.tinymce.com/contributing
+ */
+
+/**
+ * This class creates a form container. A form container has the ability
+ * to automatically wrap items in tinymce.ui.FormItem instances.
+ *
+ * Each FormItem instance is a container for the label and the item.
+ *
+ * @example
+ * tinymce.ui.Factory.create({
+ *     type: 'form',
+ *     items: [
+ *         {type: 'textbox', label: 'My text box'}
+ *     ]
+ * }).renderTo(document.body);
+ *
+ * @class tinymce.ui.Form
+ * @extends tinymce.ui.Container
+ */
+define("tinymce/ui/Form", [
+	"tinymce/ui/Container",
+	"tinymce/ui/FormItem"
+], function(Container, FormItem) {
+	"use strict";
+
+	return Container.extend({
+		Defaults: {
+			containerCls: 'form',
+			layout: 'flex',
+			direction: 'column',
+			align: 'stretch',
+			flex: 1,
+			padding: 20,
+			labelGap: 30,
+			spacing: 10,
+			callbacks: {
+				submit: function() {
+					this.submit();
+				}
+			}
+		},
+
+		/**
+		 * This method gets invoked before the control is rendered.
+		 *
+		 * @method preRender
+		 */
+		preRender: function() {
+			var self = this, items = self.items();
+
+			// Wrap any labeled items in FormItems
+			items.each(function(ctrl) {
+				var formItem, label = ctrl.settings.label;
+
+				if (label) {
+					formItem = new FormItem({
+						layout: 'flex',
+						autoResize: "overflow",
+						defaults: {flex: 1},
+						items: [
+							{type: 'label', text: label, flex: 0, forId: ctrl._id}
+						]
+					});
+
+					formItem.type = 'formitem';
+
+					if (typeof(ctrl.settings.flex) == "undefined") {
+						ctrl.settings.flex = 1;
+					}
+
+					self.replace(ctrl, formItem);
+					formItem.add(ctrl);
+				}
+			});
+		},
+
+		/**
+		 * Recalcs label widths.
+		 *
+		 * @private
+		 */
+		recalcLabels: function() {
+			var self = this, maxLabelWidth = 0, labels = [], i, labelGap;
+
+			if (self.settings.labelGapCalc === false) {
+				return;
+			}
+
+			self.items().filter('formitem').each(function(item) {
+				var labelCtrl = item.items()[0], labelWidth = labelCtrl.getEl().clientWidth;
+
+				maxLabelWidth = labelWidth > maxLabelWidth ? labelWidth : maxLabelWidth;
+				labels.push(labelCtrl);
+			});
+
+			labelGap = self.settings.labelGap || 0;
+
+			i = labels.length;
+			while (i--) {
+				labels[i].settings.minWidth = maxLabelWidth + labelGap;
+			}
+		},
+
+		/**
+		 * Getter/setter for the visibility state.
+		 *
+		 * @method visible
+		 * @param {Boolean} [state] True/false state to show/hide.
+		 * @return {tinymce.ui.Form|Boolean} True/false state or current control.
+		 */
+		visible: function(state) {
+			var val = this._super(state);
+
+			if (state === true && this._rendered) {
+				this.recalcLabels();
+			}
+
+			return val;
+		},
+
+		/**
+		 * Fires a submit event with the serialized form.
+		 *
+		 * @method submit
+		 * @return {Object} Event arguments object.
+		 */
+		submit: function() {
+			return this.fire('submit', {data: this.toJSON()});
+		},
+
+		/**
+		 * Post render method. Called after the control has been rendered to the target.
+		 *
+		 * @method postRender
+		 * @return {tinymce.ui.ComboBox} Current combobox instance.
+		 */
+		postRender: function() {
+			var self = this;
+
+			self._super();
+			self.recalcLabels();
+			self.fromJSON(self.settings.data);
+		}
+	});
+});