Newer
Older
* @require qui/QUI
* @require qui/controls/desktop/Panel
* @require package/quiqqer/bricks/bin/BrickAreas
* @require Ajax
* @require Locale
* @require qui/utils/Form
* @require utils/Controls
* @require utils/Template
* @require css!package/quiqqer/bricks/bin/BrickEdit.css
*
], function(QUI, QUIPanel, QUIConfirm, BrickAreas, QUIAjax, QUILocale, QUIFormUtils, ControlUtils, Template)
'$onCreate',
'$onDestroy',
'$load',
'$unload',
id : false,
projectName : false,
projectLang : false
},
initialize : function(options)
{
this.parent( options );
this.$availableBricks = [];
this.$availableSettings = [];
this.$customfields = [];
onInject : this.$onInject,
onCreate : this.$onCreate,
title : '...'
});
this.addButton({
name : 'save',
textimage : 'fa fa-save icon-save',
text : QUILocale.get('quiqqer/system', 'save'),
events : {
click : this.save
}
});
this.addButton({
name : 'delete',
icon : 'fa fa-trash-o icon-trash',
title : QUILocale.get('quiqqer/system', 'delete'),
events : {
},
styles : {
'float' : 'right'
}
});
this.addCategory({
name : 'information',
icon : 'fa fa-file-o icon-file-alt',
text : QUILocale.get('quiqqer/system', 'information'),
events : {
onActive : this.$load
}
this.addCategory({
name : 'settings',
icon : 'icon-magic',
text : QUILocale.get('quiqqer/system', 'properties'),
events : {
onActive : this.$load
}
});
this.addCategory({
name : 'extra',
icon : 'fa fa-gears icon-gears',
text : QUILocale.get('quiqqer/system', 'settings'),
events : {
onActive : this.$load
}
});
this.addCategory({
name : 'content',
icon : 'icon-file-text-alt',
text : QUILocale.get('quiqqer/system', 'content'),
events : {
onActive : this.$load
}
});
},
/**
* event : on inject
*/
$onInject : function()
{
'package_quiqqer_bricks_ajax_getBrick',
'package_quiqqer_bricks_ajax_getAvailableBricks'
/**
* @param {{availableSettings:object}} data
* @param {{attributes:object}} data
* @param {{settings:object}} data
*/
this.$availableBricks = bricks;
this.$availableSettings = brick.availableSettings;
this.$customfields = brick.customfields;
this.setAttribute('data', brick);
this.setAttributes({
icon : 'icon-th',
title : QUILocale.get('quiqqer/bricks', 'panel.title', {
brickId : this.getAttribute('id'),
brickTitle : brick.attributes.title
})
this.refresh();
this.fireEvent('loaded', [this]);
this.getCategory('information').click();
}.bind(this), {
brickId : this.getAttribute('id')
});
},
/**
* event : on destroy
*/
$onDestroy : function()
{
if (this.$Areas) {
this.$Areas.destroy();
}
* @return Promise
*/
save : function(callback)
{
var Active = this.$Active;
this.Loader.show();
this.$unload();
return this.$load(Active).then(function() {
return new Promise(function(resolve, reject)
{
var data = this.getAttribute('data');
data.customfields = this.$customfields;
QUIAjax.post('package_quiqqer_bricks_ajax_brick_save', function ()
{
if (typeof callback === 'function') {
callback();
}
resolve();
this.fireEvent('save', [this]);
this.Loader.hide();
}.bind(this), {
'package': 'quiqqer/brick',
brickId : this.getAttribute('id'),
data : JSON.encode(data),
onError : reject
});
}.bind(this));
}.bind(this));
},
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
/**
* Delete the brick
*/
del : function()
{
var self = this;
new QUIConfirm({
title : QUILocale.get(lg, 'window.brick.delete.title'),
text : QUILocale.get(lg, 'window.brick.delete.text'),
information : QUILocale.get(lg, 'window.brick.delete.information'),
maxHeight : 300,
maxWidth : 600,
autoclose : false,
events : {
onSubmit : function(Win) {
Win.Loader.show();
QUIAjax.post('package_quiqqer_bricks_ajax_brick_delete', function()
{
Win.close();
self.fireEvent('delete');
self.destroy();
}, {
'package' : 'quiqqer/bricks',
brickIds : JSON.encode([self.getAttribute('id')])
});
}
}
}).open();
},
/**
* event on button active
*
* @param {Object} Button - qui/controls/buttons/Button
*
* @return Promise
return new Promise(function(resolve, reject) {
var Prom = false,
self = this;
if (Button == this.$Active) {
reject();
self.Loader.hide();
return;
}
var data = this.getAttribute('data');
this.$unload();
this.setAttribute('data', data);
this.$Active = Button;
switch (Button.getAttribute('name'))
case 'information':
Prom = this.$showInformation();
break;
case 'settings':
Prom = this.$showSettings();
break;
case 'extra':
Prom = this.$showExtras();
break;
case 'content':
Prom = this.$showContent();
break;
default:
reject();
return;
}
if (!Prom) {
reject();
self.Loader.hide();
return;
}
resolve();
self.Loader.hide();
}).catch(function() {
reject();
self.Loader.hide();
});
}.bind(this));
},
/**
* event unload category
*/
$unload : function()
{
if (!this.$Active) {
return;
}
var Form = this.getContent().getElement('form'),
unload = this.$Active.getAttribute('name'),
data = this.getAttribute('data');
if (unload == 'information') {
data.attributes = Object.merge(
data.attributes,
QUIFormUtils.getFormData(Form)
);
}
if (unload == 'settings') {
data.attributes.areas = this.$Areas.getAreas().join(',');
data.attributes.width = Form.elements.width.value;
data.attributes.height = Form.elements.height.value;
data.attributes.classes = Form.elements.classes.value;
var flexibleList = [],
fieldData = QUIFormUtils.getFormData(Form);
for (var key in fieldData) {
if (!fieldData.hasOwnProperty(key)) {
continue;
}
if (!key.match('flexible')) {
continue;
}
if (fieldData[key]) {
flexibleList.push(key);
}
}
this.$customfields = flexibleList;
this.$Areas.destroy();
this.$Areas = false;
}
if (unload == 'extra') {
data.settings = Object.merge(
data.settings,
QUIFormUtils.getFormData(Form)
);
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
}
if (unload == 'content') {
data.attributes.content = this.$Editor.getContent();
this.$Editor.destroy();
this.$Editor = false;
}
this.$Active = null;
this.setAttribute('data', data);
},
/**
* Information template
*
* @returns {Promise}
*/
$showInformation : function()
{
return new Promise(function(resolve, reject) {
Template.get('ajax/brick/templates/information', function(result)
{
this.setContent(result);
QUIFormUtils.setDataToForm(
this.getAttribute('data').attributes,
this.getContent().getElement('form')
);
resolve();
}.bind(this), {
'package' : 'quiqqer/bricks',
onError : reject
});
}.bind(this));
},
/**
* Settings template
*
* @returns {Promise}
*/
$showSettings : function()
{
return new Promise(function(resolve, reject) {
Template.get('ajax/brick/templates/settings', function(result)
{
this.setContent(result);
// areas
var Content = this.getContent(),
areas = [],
attributes = this.getAttribute('data').attributes,
customfields = this.$customfields;
if (attributes.areas)
{
areas = attributes.areas
.replace(/^,*/, '')
.replace(/,*$/, '')
.split(',');
}
// areas
this.$Areas = new BrickAreas({
brickId : this.getAttribute('id'),
projectName : this.getAttribute('projectName'),
projectLang : this.getAttribute('projectLang'),
areas : areas,
styles : {
height : 120
}).inject(Content.getElement('.quiqqer-bricks-areas'));
if ("width" in attributes) {
Content.getElement('[name="width"]').value = attributes.width;
}
if ("height" in attributes) {
Content.getElement('[name="height"]').value = attributes.height;
}
if ("classes" in attributes) {
Content.getElement('[name="classes"]').value = attributes.classes;
}
// flexble settings
var i, len, data;
var TBody = Content.getElement('.brick-table-flexible tbody');
for (i = 0, len = this.$availableSettings.length; i < len; i++) {
data = this.$availableSettings[i];
new Element('tr', {
'class' : i % 2 ? 'odd' : 'even',
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
html : '<td>' +
'<label>'+
'<input type="checkbox" name="flexible-'+ data.name +'" />'+
'<span>'+ QUILocale.get(data.text[0], data.text[1]) +'</span>'+
'</label>'+
'</td>'
}).inject(TBody);
}
if (customfields) {
var name;
var Form = Content.getElement('form');
for (i = 0, len = customfields.length; i < len; i++) {
name = customfields[i];
if (typeof Form.elements[name] !== 'undefined') {
Form.elements[name].checked = true;
}
if (typeof Form.elements['flexible-'+name] !== 'undefined') {
Form.elements['flexible-'+name].checked = true;
}
}
}
}.bind(this), {
'package' : 'quiqqer/bricks',
onError : reject
});
}.bind(this));
},
/**
* Setting extras
*
* @returns {Promise}
*/
$showExtras : function()
{
return new Promise(function(resolve, reject) {
Template.get('ajax/brick/templates/extras', function(result)
{
this.setContent(result);
this.$createExtraData().then(function() {
resolve();
});
'package' : 'quiqqer/bricks',
return new Promise(function(resolve, reject) {
Template.get('ajax/brick/templates/content', function(result)
this.$createContentEditor().then(function() {
resolve();
});
}.bind(this), {
'package' : 'quiqqer/bricks',
onError : reject
});
}.bind(this));
},
/**
* Create the editor, if the brick type is a content type
*
* @param {Function} [callback]
* @return Promise
*/
$createContentEditor : function(callback)
{
return new Promise(function(resolve) {
var TableBody = this.$Elm.getElement('table.brick-edit-content tbody'),
TD = new Element('td'),
TR = new Element('tr', {
'class' : 'odd'
});
TD.inject(TR);
TR.inject(TableBody);
var contenSize = this.getContent().getSize();
// load ckeditor
require(['classes/editor/Manager'], function(EditorManager)
{
new EditorManager().getEditor(null, function(Editor)
this.$Editor = Editor;
this.$Editor.setAttribute('showLoader', false);
var height = 300;
if ((contenSize.y - 100) > height) {
height = contenSize.y - 100;
}
var EditorContainer = new Element('div', {
styles : {
clear : 'both',
'float' : 'left',
width : '100%'
}
}).inject( TD );
this.$Editor.addEvent('onLoaded', function()
if (typeof callback === 'function') {
callback();
}
resolve();
});
this.$Editor.inject( EditorContainer );
this.$Editor.setHeight( EditorContainer.getSize().y );
this.$Editor.setWidth( EditorContainer.getSize().x );
this.$Editor.setContent(
this.getAttribute('data').attributes.content
);
}.bind(this));
}.bind(this));
},
/**
* Create the extra settings table
*
* @return Promise
return new Promise(function(resolve, reject)
var TableExtra = this.$Elm.getElement('table.brick-edit-extra-header'),
TableBody = TableExtra.getElement('tbody');
if (!this.$availableSettings || !this.$availableSettings.length)
{
TableExtra.setStyle('display', 'none');
resolve();
return;
}
TableExtra.setStyle('display', null);
var Form = this.getContent().getElement('form');
var i, len, Row, text, Value, setting, extraFieldId;
var self = this,
id = this.getId();
// extra settings
for (i = 0, len = this.$availableSettings.length; i < len; i++)
{
setting = this.$availableSettings[ i ];
extraFieldId = 'extraField_'+ id +'_'+ i;
text = setting.text;
if (typeOf(setting.text) === 'array') {
text = QUILocale.get(setting.text[ 0 ], setting.text[ 1 ]);
}
Row = new Element('tr', {
'class' : i % 2 ? 'even' : 'odd',
html : '<td>' +
' <label class="quiqqer-bricks-areas" for="'+ extraFieldId +'">' +
text +
' </label>' +
'</td>' +
'<td></td>'
}).inject(TableBody);
if (setting.type != 'select')
{
Value = new Element('input', {
type : setting.type,
name : setting.name,
'class' : setting.class,
id : extraFieldId
}).inject(Row.getElement('td:last-child'));
if (setting['data-qui'] !== '') {
Value.set('data-qui', setting['data-qui']);
}
continue;
}
Value = new Element('select', {
name : setting.name,
'class' : setting.class,
id : extraFieldId
}).inject(Row.getElement('td:last-child'));
for (var c = 0, clen = setting.options.length; c < clen; c++)
text = setting.options[c].text;
if (typeOf(setting.options[c].text) === 'array') {
text = QUILocale.get(
setting.options[c].text[ 0 ],
setting.options[c].text[ 1 ]
);
}
new Element('option', {
html : text,
value : setting.options[c].value
}).inject(Value);
TableExtra.setStyle('display', null);
QUIFormUtils.setDataToForm(
this.getAttribute('data').settings,
Form
);
// parse controls
QUI.parse(TableExtra).then(function() {
return ControlUtils.parse(TableExtra);
}).then(function()
{
// set project to the controls
TableExtra.getElements('[data-quiid]').each(function(Elm)
{
var Control = QUI.Controls.getById(
Elm.get('data-quiid')
);
{
Control.setProject(
self.getAttribute('projectName'),
self.getAttribute('projectLang')
);
}
});
resolve();
}).catch(reject);
}.bind(this));