154 lines
3.3 KiB
JavaScript
Executable File
154 lines
3.3 KiB
JavaScript
Executable File
/**
|
|
* 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
|
|
},
|
|
|
|
/**
|
|
* 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() {
|
|
// Blur current control so a onchange is fired before submit
|
|
var ctrl = this.getParentCtrl(document.activeElement);
|
|
if (ctrl) {
|
|
ctrl.blur();
|
|
}
|
|
|
|
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);
|
|
}
|
|
});
|
|
}); |