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
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
}
});
'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')
if (this.$Areas) {
this.$Areas.destroy();
}
var Active = this.$Active;
this.Loader.show();
this.$unload();
var data = this.getAttribute('data');
data.customfields = this.$customfields;
QUIAjax.post('package_quiqqer_bricks_ajax_brick_save', function () {
if (typeof callback === 'function') {
callback();
}
resolve();
MH.addSuccess(
QUILocale.get(lg, 'message.brick.save.success')
);
});
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));
},
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 : {
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
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();
reject();
self.Loader.hide();
});
}.bind(this));
},
/**
* event unload category
*/
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)
);
}
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) {
this.setContent(result);
// areas
var Content = this.getContent(),
areas = [],
attributes = this.getAttribute('data').attributes,
customfields = this.$customfields;
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',
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) {
resolve();
});
'package' : 'quiqqer/bricks',
$showContent : function () {
return new Promise(function (resolve, reject) {
}.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();
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%'
}
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
$createExtraData : function () {
return new Promise(function (resolve, reject) {
var TableExtra = this.$Elm.getElement('table.brick-edit-extra-header'),
TableBody = TableExtra.getElement('tbody');
TableExtra.setStyle('display', 'none');
new Element('div', {
html : QUILocale.get(lg, 'window.brick.no.extra.settings')
}).inject(TableExtra, 'before');
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
setting = this.$availableSettings[ 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);
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'));
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
return ControlUtils.parse(TableExtra);
// set project to the controls
var Control = QUI.Controls.getById(
Elm.get('data-quiid')
);
Control.setProject(
self.getAttribute('projectName'),
self.getAttribute('projectLang')
);
}
});
resolve();
}).catch(reject);
}.bind(this));