/**
* BrickEdit Control
* Edit and change a Brick
*
* @module package/quiqqer/bricks/bin/BrickEdit
* @author www.pcsg.de (Henning Leutz)
*
* @event onLoaded [ this ]
*/
define('package/quiqqer/bricks/bin/BrickEdit', [
'qui/QUI',
'qui/controls/Control',
'qui/utils/Form',
'package/quiqqer/bricks/bin/BrickAreas',
'Ajax',
'Locale',
'utils/Controls',
'css!package/quiqqer/bricks/bin/BrickEdit.css'
], function(QUI, QUIControl, QUIFormUtils, BrickAreas, Ajax, QUILocale, ControlUtils)
{
"use strict";
return new Class({
Extends : QUIControl,
Type : 'package/quiqqer/bricks/bin/BrickEdit',
Binds : [
'$onInject',
'$onDestroy'
],
options : {
id : false,
projectName : false,
projectLang : false
},
initialize : function(options)
{
this.parent( options );
this.$availableBricks = [];
this.$availableSettings = [];
this.$Editor = false;
this.$Areas = false;
this.addEvents({
onInject : this.$onInject,
onDestroy : this.$onDestroy
});
},
/**
* Return the HTML Node Element
*
* @return {HTMLElement}
*/
create : function()
{
this.$Elm = new Element('div', {
'class' : 'quiqqer-bricks-brickedit'
});
return this.$Elm;
},
/**
* event : on inject
*/
$onInject : function()
{
var self = this;
Ajax.get([
'package_quiqqer_bricks_ajax_getBrick',
'package_quiqqer_bricks_ajax_getAvailableBricks'
], function(data, bricks)
{
/**
* @param {{availableSettings:object}} data
* @param {{attributes:object}} data
* @param {{settings:object}} data
*/
self.$availableBricks = bricks;
self.$availableSettings = data.availableSettings;
self.setAttributes( data.attributes );
self.setAttribute( 'settings', data.settings );
self.$createData(function() {
self.fireEvent( 'loaded', [ self ] );
});
}, {
'package' : 'quiqqer/brick',
brickId : this.getAttribute( 'id' )
});
},
/**
* event : on destroy
*/
$onDestroy : function()
{
if ( this.$Editor ) {
this.$Editor.destroy();
}
},
/**
* Create the html for the control
*
* @param {Function} [callback]
*/
$createData : function(callback)
{
var self = this;
var Container = new Element('div', {
'html' : '<label>' +
' <span class="quiqqer-bricks-brickedit-label-text">' +
QUILocale.get( 'quiqqer/system', 'title' ) +
' </span>' +
' <input type="text" name="title" />' +
'</label>' +
'<label>' +
' <span class="quiqqer-bricks-brickedit-label-text">' +
QUILocale.get( 'quiqqer/bricks', 'brick.edit.description' ) +
' </span>' +
' <textarea name="description"></textarea>' +
'</label>'+
'<label>' +
' <span class="quiqqer-bricks-brickedit-label-text">' +
QUILocale.get( 'quiqqer/bricks', 'brick.edit.type' ) +
' </span>' +
' <select name="type"></select>' +
'</label>'+
'<label class="quiqqer-bricks-areas">' +
' <span class="quiqqer-bricks-brickedit-label-text">' +
QUILocale.get( 'quiqqer/bricks', 'brick.edit.allowed.areas' ) +
' </span>' +
'</label>'
}).inject( this.$Elm );
var i, len, title, group, val;
if ( this.$availableSettings )
{
var setting, dataQui;
var SettingsElement = new Element('form', {
'class' : 'quiqqer-bricks-brickedit-settings'
});
for ( i = 0, len = this.$availableSettings.length; i < len; i++ )
{
setting = this.$availableSettings[ i ];
dataQui = '';
if ( setting['data-qui'] !== '' ) {
dataQui = ' data-qui="'+ setting['data-qui'] +'" ';
}
new Element('div', {
html : '<label class="quiqqer-bricks-areas">' +
' <span class="quiqqer-bricks-brickedit-label-text">' +
setting.text +
' </span>' +
'</label>' +
'<input type="'+ setting.type +'" ' +
' name="'+ setting.name +'" ' +
' class="'+ setting.class +'" ' +
dataQui +
'/>'
}).inject( SettingsElement );
}
SettingsElement.inject( Container );
// set data
QUIFormUtils.setDataToForm(
this.getAttribute( 'settings' ),
SettingsElement
);
// parse controls
ControlUtils.parse( SettingsElement );
QUI.parse(SettingsElement, function()
{
// set project to the controls
SettingsElement.getElements( '[data-quiid]' ).each(function(Elm)
{
var Control = QUI.Controls.getById(
Elm.get('data-quiid')
);
if ( 'setProject' in Control )
{
Control.setProject(
self.getAttribute( 'projectName' ),
self.getAttribute( 'projectLang' )
);
}
});
});
}
var Type = this.$Elm.getElement( '[name="type"]' ),
Title = this.$Elm.getElement( '[name="title"]' ),
Desc = this.$Elm.getElement( '[name="description"]' );
for ( i = 0, len = this.$availableBricks.length; i < len; i++ )
{
title = this.$availableBricks[ i ].title;
if ( 'group' in title )
{
group = title.group;
val = title.var;
} else
{
group = title[ 0 ];
val = title[ 1 ];
}
new Element('option', {
value : this.$availableBricks[ i ].control,
html : QUILocale.get( group, val )
}).inject( Type );
}
Title.value = this.getAttribute( 'title' );
Type.value = this.getAttribute( 'type' );
Desc.value = this.getAttribute( 'description' );
var areas = [];
if ( this.getAttribute( 'areas' ) )
{
areas = this.getAttribute('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( this.$Elm.getElement( '.quiqqer-bricks-areas' ), 'after' );
// brick type
if ( this.getAttribute( 'type' ) == 'content' )
{
new Element('label', {
html : '<span class="quiqqer-bricks-brickedit-label-editor">' +
QUILocale.get( 'quiqqer/bricks', 'brick.edit.content' ) +
'</span>'
}).inject( this.$Elm );
// load ckeditor
require(['classes/editor/Manager'], function(EditorManager)
{
new EditorManager().getEditor(null, function(Editor)
{
self.$Editor = Editor;
var EditorContainer = new Element('div', {
styles : {
clear : 'both',
height : 300,
width : '100%'
}
}).inject( self.$Elm );
self.$Editor.addEvent('onLoaded', function()
{
if ( typeof callback === 'function' ) {
callback();
}
});
self.$Editor.inject( EditorContainer );
self.$Editor.setHeight( 300 );
self.$Editor.setContent( self.getAttribute( 'content' ) );
});
});
return;
}
// plugin / package bricks
if ( typeof callback === 'function' ) {
callback();
}
},
/**
* Saves the brick
*/
save : function(callback)
{
var Type = this.$Elm.getElement( '[name="type"]' ),
Title = this.$Elm.getElement( '[name="title"]'),
Desc = this.$Elm.getElement( '[name="description"]' );
var data = {
title : Title.value,
description : Desc.value,
type : Type.value,
content : '',
areas : this.$Areas.getAreas().join(',')
};
if ( this.$Editor ) {
data.content = this.$Editor.getContent();
}
// settings
var SettingsForm = this.$Elm.getElement(
'.quiqqer-bricks-brickedit-settings'
);
if ( SettingsForm ) {
data.settings = QUIFormUtils.getFormData( SettingsForm );
}
Ajax.post('package_quiqqer_bricks_ajax_brick_save', function()
{
if ( typeof callback === 'function' ) {
callback();
}
}, {
'package' : 'quiqqer/brick',
brickId : this.getAttribute( 'id' ),
data : JSON.encode( data )
});
}
});
});