define([
|
'require',
|
'dojo/_base/array',
|
'dojo/_base/declare',
|
'dojo/_base/lang',
|
'dojo/dom-class',
|
'dojo/query',
|
'dojo/string',
|
'dojo/on',
|
'dojo/topic',
|
'dijit/_WidgetBase',
|
'dijit/_TemplatedMixin',
|
'dijit/_WidgetsInTemplateMixin',
|
'dijit/form/TextBox',
|
'dijit/form/SimpleTextarea',
|
'dstore/Memory',
|
'dstore/Trackable',
|
'dstore/Tree',
|
'./aboutDialog',
|
'./ColumnEditor',
|
'./FeatureEditor',
|
'../util/toJavaScript',
|
'../data/config',
|
'dojo/i18n!../nls/laboratory',
|
'dojo/text!./templates/Laboratory.html',
|
'dojo/text!./templates/gridCode.js',
|
'dojo/query',
|
// Widgets in template
|
'dijit/layout/ContentPane',
|
'dijit/layout/TabContainer'
|
], function (require, arrayUtil, declare, lang, domClass, query, string, on, topic,
|
_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, TextBox, SimpleTextarea,
|
Memory, Trackable, TreeStoreMixin, aboutDialog, ColumnEditor, FeatureEditor,
|
toJavaScript, config, i18n, template, codeTemplate) {
|
|
var NUM_ITEMS = 50;
|
var dijitNameToConstructor = {
|
TextBox: TextBox,
|
SimpleTextarea: SimpleTextarea
|
};
|
|
return declare([ _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin ], {
|
templateString: template,
|
i18n: i18n,
|
docBaseUrl: config.docBaseUrl,
|
dgridUrl: config.dgridUrl,
|
|
// resourcesBaseUrl is used for image paths; toUrl includes cacheBust so strip it
|
resourcesBaseUrl: require.toUrl('../resources').replace(/\?.*$/, ''),
|
|
baseClass: 'laboratory',
|
|
aboutVisible: true,
|
aboutKey: '', // Passed from index.html if localStorage is supported
|
|
buildRendering: function () {
|
this.inherited(arguments);
|
|
this.featureEditor = new FeatureEditor({}, this.featureEditorNode);
|
this.columnEditor = new ColumnEditor({}, this.columnEditorNode);
|
},
|
|
postCreate: function () {
|
this.inherited(arguments);
|
|
this.own(
|
topic.subscribe('/configuration/changed', lang.hitch(this, '_updateDemo'))
|
// this.previewTabs.watch('selectedChildWidget', lang.hitch(this, '_updateDemo'))
|
);
|
|
this._selectedChildWidget = this.demoGridPane;
|
},
|
|
startup: function () {
|
var columnEditor = this.columnEditor;
|
this.inherited(arguments);
|
|
this.featureEditor.startup().then(function () {
|
columnEditor.startup();
|
|
// Add a couple of columns by default;
|
// wait until after FeatureEditor's startup promise resolves,
|
// to give forms a chance to react to column addition/removal (e.g. Tree)
|
columnEditor.addColumn('First Name');
|
columnEditor.addColumn('Last Name');
|
});
|
},
|
|
selectTab: function (evt) {
|
var target = evt.target.getAttribute('data-target');
|
query('.active', this.domNode).removeClass('active');
|
|
query('[data-target="' + target + '"]', this.domNode).addClass('active');
|
if (target !== 'columns') {
|
// The Grid and Column Features "tabs" actually both show the same widget,
|
// but using a different filter for its grid
|
this.featureEditor.set('featureType', (target === 'gridFeatures') ? 'grid' : 'column');
|
target = 'features';
|
}
|
query('[data-tab="' + target + '"]', this.domNode).addClass('active');
|
},
|
|
_showAbout: function (event) {
|
event.preventDefault();
|
aboutDialog.show();
|
},
|
|
_toggleColumns: function () {
|
domClass.toggle(this.columnEditorNode, 'open');
|
},
|
|
_updateDemo: function () {
|
if (this.demoGrid) {
|
this.demoGrid.destroy();
|
}
|
|
this.gridCodeTextArea.value = '';
|
|
// If no columns have been defined, then don't bother rendering an empty demo grid
|
// or generating code for an empty grid
|
if (this.columnEditor.get('columns').length < 1) {
|
return;
|
}
|
|
if (this._selectedChildWidget === this.demoGridPane) {
|
this._showDemoGrid();
|
}
|
else {
|
this._showCode();
|
}
|
},
|
|
_selectCode: function () {
|
this._selectedChildWidget = this.demoCodePane;
|
this.previewTabs.setAttribute('data-selected-page', 'code');
|
this._updateDemo();
|
},
|
|
_selectGrid: function () {
|
this._selectedChildWidget = this.demoGridPane;
|
this.previewTabs.setAttribute('data-selected-page', 'grid');
|
this._updateDemo();
|
},
|
|
_showCode: function () {
|
this.gridCodeTextArea.value = this._generateCode();
|
},
|
|
_generateCode: function () {
|
var gridConfig = {
|
gridOptions: '{\n',
|
dataDeclaration: '',
|
dataCreation: '',
|
gridRender: ''
|
};
|
// deps, prams, and grid modules are built as arrays then joined when assigned to gridConfig
|
var dependencies = [ 'dojo/_base/declare' ];
|
var callbackParams = [ 'declare' ];
|
var gridModules = [];
|
var gridOptions = this._generateGridOptions();
|
var columnNames = [];
|
var columnName;
|
var treeExpandoColumn;
|
var storeModules;
|
var hasStore = this.featureEditor.isSelected('dgrid/OnDemandGrid') ||
|
this.featureEditor.isSelected('dgrid/extensions/Pagination');
|
|
arrayUtil.forEach(this.columnEditor.get('columns'), function (columnConfig) {
|
// Convert any dijit module IDs for column.editor to constructors, and add the necessary dependencies
|
var formWidgetCallbackParam = toJavaScript.formatDijitFormWidget(columnConfig.editor);
|
if (formWidgetCallbackParam && callbackParams.indexOf(formWidgetCallbackParam) < 0) {
|
dependencies.push(columnConfig.editor);
|
callbackParams.push(formWidgetCallbackParam);
|
}
|
}, this);
|
// The expandoColumn for Tree is a special case:
|
// In the UI, it works better to present it in the grid feature config,
|
// although it's really a column config option. In order to add it to the appropriate column config
|
// we need to get its value
|
if (this.featureEditor.isSelected('dgrid/Tree')) {
|
treeExpandoColumn = this.featureEditor.get('expandoColumn');
|
}
|
|
if (hasStore) {
|
storeModules = [ 'Memory', 'Trackable' ];
|
|
if (treeExpandoColumn) {
|
storeModules.push('TreeStoreMixin');
|
}
|
|
gridConfig.dataDeclaration = 'var store = new (declare([' + storeModules.join(', ') + ']))({\n' +
|
'\t\tdata: createData()\n\t});';
|
}
|
else {
|
gridConfig.dataDeclaration = 'var data = createData();';
|
}
|
|
for (columnName in gridOptions.columns) {
|
columnNames.push(toJavaScript.formatPropertyName(columnName));
|
}
|
|
gridConfig.dataCreation = '\n\n\tfunction createData() {' +
|
'\n\t\tvar data = [];' +
|
'\n\t\tvar column;' +
|
'\n\t\tvar i;' +
|
'\n\t\tvar item;' + '\n' +
|
'\n\t\tfor (i = 0; i < ' + NUM_ITEMS + '; i++) {' +
|
'\n\t\t\titem = {};' +
|
'\n\t\t\tfor (column in { ' + columnNames.join(': 1, ') + ': 1 }) {' +
|
'\n\t\t\t\titem.id = i;' +
|
'\n\t\t\t\titem[column] = column + \'_\' + (i + 1);' +
|
'\n\t\t\t}';
|
|
if (treeExpandoColumn) {
|
gridConfig.dataCreation += '\n\t\t\tif (i > 1) {';
|
gridConfig.dataCreation += '\n\t\t\t\titem.hasChildren = false;';
|
gridConfig.dataCreation += '\n\t\t\t\titem.parent = i % 2;';
|
gridConfig.dataCreation += '\n\t\t\t}';
|
}
|
|
gridConfig.dataCreation += '\n\t\t\tdata.push(item);' +
|
'\n\t\t}' + '\n' +
|
'\n\t\treturn data;' +
|
'\n\t}';
|
|
if (hasStore) {
|
dependencies.push('dstore/Memory', 'dstore/Trackable');
|
callbackParams.push('Memory', 'Trackable');
|
|
if (treeExpandoColumn) {
|
dependencies.push('dstore/Tree');
|
callbackParams.push('TreeStoreMixin');
|
}
|
|
gridConfig.storeDeclaration = '\n\tvar store = new (declare([ Memory, Trackable ]))({\n' +
|
'\t\tdata: data\n\t});\n';
|
gridConfig.storeAssignment = '\n\tgrid.set(\'collection\', store);';
|
}
|
else {
|
gridConfig.gridRender = '\n\tgrid.renderArray(data);';
|
}
|
|
// Add selected items from the feature store to the dependency list
|
arrayUtil.forEach(this.featureEditor.filter({ selected: true }), function (item) {
|
// Configuration for dgrid/Grid is always available since it is the base clase for OnDemandGrid
|
// If OnDemandGrid is selected then we can skip adding dgrid/Grid to the dependencies
|
if (item.mid === 'dgrid/Grid' && this.featureEditor.isSelected('dgrid/OnDemandGrid')) {
|
return;
|
}
|
|
var moduleReference = item.mid.slice(item.mid.lastIndexOf('/') + 1);
|
|
dependencies.push(item.mid);
|
callbackParams.push(moduleReference);
|
gridModules.push(moduleReference);
|
}, this);
|
|
if (hasStore) {
|
gridConfig.gridOptions += '\t\tcollection: store,\n';
|
}
|
|
gridConfig.gridOptions += toJavaScript(gridOptions, { indent: 1, inline: true } );
|
gridConfig.gridOptions += '\n\t}';
|
|
gridConfig.dependencies = '\'' + dependencies.join('\',\n\t\'') + '\'';
|
gridConfig.callbackParams = callbackParams.join(', ');
|
gridConfig.gridModules = gridModules.join(', ');
|
|
return string.substitute(codeTemplate, gridConfig);
|
},
|
|
_showDemoGrid: function () {
|
var self = this;
|
var gridOptions = this._generateGridOptions();
|
var gridModules = [];
|
var isTree = this.featureEditor.isSelected('dgrid/Tree');
|
var data = this._generateMockData();
|
var hasStore = this.featureEditor.isSelected('dgrid/OnDemandGrid') ||
|
this.featureEditor.isSelected('dgrid/extensions/Pagination');
|
|
arrayUtil.forEach(this.featureEditor.filter({ selected: true }), function (item) {
|
// Configuration for dgrid/Grid is always available since it is the base clase for OnDemandGrid
|
// If OnDemandGrid is selected then we can skip adding dgrid/Grid to the dependencies
|
if (item.mid === 'dgrid/Grid' && this.featureEditor.isSelected('dgrid/OnDemandGrid')) {
|
return;
|
}
|
|
gridModules.push(item.mid);
|
}, this);
|
|
this._fixDijitConstructors(gridOptions.columns);
|
require(gridModules, function () {
|
var storeModules;
|
var store;
|
|
gridOptions.className = 'demoGrid';
|
|
if (hasStore) {
|
storeModules = [ Memory, Trackable ];
|
|
if (isTree) {
|
storeModules.push(TreeStoreMixin);
|
}
|
|
store = new (declare(storeModules))({
|
data: data
|
});
|
|
gridOptions.collection = isTree ? store.filter('mayHaveChildren') : store;
|
}
|
|
self.demoGrid = new (declare(Array.prototype.slice.apply(arguments)))(gridOptions);
|
self.demoGridPane.innerHTML = '';
|
self.demoGridPane.appendChild(self.demoGrid.domNode);
|
self.demoGrid.startup();
|
|
if (!hasStore) {
|
self.demoGrid.renderArray(data);
|
}
|
});
|
},
|
|
_generateGridOptions: function () {
|
var gridOptions = {};
|
var selectedFeatures = this.featureEditor.filter({ selected: true, configLevel: 'grid' });
|
var treeExpandoColumn;
|
var columns = [];
|
var column;
|
var tempColumns;
|
var numFieldName;
|
|
if (this.featureEditor.isSelected('dgrid/Tree')) {
|
treeExpandoColumn = this.featureEditor.get('expandoColumn');
|
}
|
|
arrayUtil.forEach(selectedFeatures, function (feature) {
|
var moduleConfig = this.featureEditor.getModuleConfig(feature.mid);
|
|
if (moduleConfig) {
|
lang.mixin(gridOptions, moduleConfig);
|
}
|
}, this);
|
|
arrayUtil.forEach(this.columnEditor.get('columns'), function (columnConfig) {
|
var config = this._fixDataTypes(lang.clone(columnConfig));
|
|
// The laboratory needs the store items to have a unique id property,
|
// but we don't want to include it in our output
|
delete config.id;
|
|
if (config.field === treeExpandoColumn) {
|
config.renderExpando = true;
|
}
|
numFieldName = numFieldName || isFinite(config.field);
|
columns.push(config);
|
}, this);
|
|
if (!numFieldName) {
|
// If there are no field names that are numbers, then use an object to define the columns.
|
tempColumns = {};
|
while ((column = columns.shift())) {
|
tempColumns[column.field] = column;
|
delete column.field;
|
}
|
columns = tempColumns;
|
}
|
|
if (this.featureEditor.isSelected('dgrid/ColumnSet')) {
|
gridOptions.columnSets = [[columns]];
|
}
|
else {
|
gridOptions.columns = columns;
|
}
|
|
return gridOptions;
|
},
|
|
// Fix data types on objects created from widget values
|
// Change string 'true'/'false' values to booleans
|
_fixDataTypes: function (obj) {
|
var propertyName;
|
|
if (typeof obj !== 'object') {
|
return obj;
|
}
|
|
for (propertyName in obj) {
|
if (obj[propertyName] === 'true') {
|
obj[propertyName] = true;
|
}
|
else if(obj[propertyName] === 'false') {
|
obj[propertyName] = false;
|
}
|
}
|
|
return obj;
|
},
|
|
_generateMockData: function () {
|
var mockData = [];
|
var fieldNames = [];
|
var i;
|
|
arrayUtil.forEach(this.columnEditor.get('columns'), function (columnConfig) {
|
fieldNames.push(columnConfig.field);
|
});
|
|
if (fieldNames.length > 0) {
|
for (i = 0; i < NUM_ITEMS; i++) {
|
mockData.push({});
|
mockData[i].id = i;
|
|
if (i > 1) {
|
mockData[i].hasChildren = false;
|
mockData[i].parent = i % 2;
|
}
|
|
arrayUtil.forEach(fieldNames, function (fieldName) {
|
mockData[i][fieldName] = fieldName + '_' + (i + 1);
|
});
|
}
|
}
|
|
return mockData;
|
},
|
|
_fixDijitConstructors: function(obj) {
|
if (obj) {
|
for (var columnKey in obj) {
|
var column = obj[columnKey];
|
if (column && column.editor) {
|
var dijitConstructorName = toJavaScript.formatDijitFormWidget(column.editor);
|
if (dijitConstructorName) {
|
column.editor = dijitNameToConstructor[dijitConstructorName];
|
}
|
}
|
}
|
}
|
}
|
});
|
});
|
