comindware.ui
Version:
Comindware Core UI provides the basic components like editors, lists, dropdowns, popups that we so desperately need while creating Marionette-based single-page applications.
122 lines (114 loc) • 4.35 kB
JavaScript
/**
* Developer: Stepan Burguchev
* Date: 2/27/2017
* Copyright: 2009-2017 Stepan Burguchev®
* All Rights Reserved
* Published under the MIT license
*/
define(
[
'comindware/core',
'demoPage/views/CanvasView'
],
function(core, CanvasView) {
'use strict';
return function() {
const model = new Backbone.Model({
name: 'new operation',
idealDays: 12,
dueDate: '2015-07-20T10:46:37Z',
description: 'no-op',
computed: false
});
const formSchema = {
name: {
title: 'Name',
type: 'Text'
},
idealDays: {
title: 'Ideal Days',
type: 'Number'
},
dueDate: {
title: 'Due Date',
type: 'DateTime'
},
description: {
title: 'Description',
type: 'TextArea'
},
computed: {
type: 'Boolean',
displayText: 'Computed via expression'
},
expression: {
type: 'TextArea'
},
};
const createPopup = () => new core.layout.Popup({
size: {
width: '800px',
height: '700px'
},
header: 'New Operation',
buttons: [
{
id: true,
text: 'Save',
handler (popup) {
popup.content.form.commit();
core.services.WindowService.closePopup();
alert(JSON.stringify(model.toJSON(), null, 4));
}
},
{
id: false,
text: 'Cancel',
handler (popup) {
core.services.WindowService.closePopup();
}
}
],
content: new core.layout.Form({
model: model,
schema: formSchema,
content: new core.layout.TabLayout({
tabs: [
{
id: 'general',
name: 'General',
view: new core.layout.VerticalLayout({
rows: [
core.layout.createFieldAnchor('name'),
new core.layout.HorizontalLayout({
columns: [
core.layout.createFieldAnchor('idealDays'),
core.layout.createFieldAnchor('dueDate')
]
}),
core.layout.createFieldAnchor('description'),
core.layout.createEditorAnchor('computed')
]
})
},
{
id: 'expression',
name: 'Computed Expression',
view: core.layout.createEditorAnchor('expression')
}
]
})
})
});
const View = Marionette.ItemView.extend({
template: Handlebars.compile('<input class="js-show-popup" type="button" value="Show Popup" />'),
events: {
'click .js-show-popup' () {
core.services.WindowService.showPopup(createPopup());
}
}
});
return new View();
};
}
);