/**
* 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, QUIAjax, 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;
QUIAjax.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,
id = this.getId();
QUIAjax.get('package_quiqqer_bricks_ajax_brick_settingTemplate', function(result)
{
self.$Elm.set( 'html', result );
self.$createExtraData();
// id and for attributes
self.$Elm.getElements( '[for]').each(function(Label)
{
var forAttr = Label.get( 'for'),
Sibling = self.$Elm.getElement( '[id="'+ forAttr +'"]' );
if ( Sibling )
{
Sibling.set( 'id', Sibling.id + id );
Label.set( 'for', forAttr + id );
}
});
// values
var Type = self.$Elm.getElement( '[name="type"]' ),
Title = self.$Elm.getElement( '[name="title"]' ),
Desc = self.$Elm.getElement( '[name="description"]' );
Title.value = self.getAttribute( 'title' );
Type.value = self.getAttribute( 'type' );
Desc.value = self.getAttribute( 'description' );
// areas
var areas = [];
if ( self.getAttribute( 'areas' ) )
{
areas = self.getAttribute('areas')
.replace(/^,*/, '')
.replace(/,*$/, '')
.split(',');
}
// areas
self.$Areas = new BrickAreas({
brickId : self.getAttribute( 'id' ),
projectName : self.getAttribute( 'projectName' ),
projectLang : self.getAttribute( 'projectLang' ),
areas : areas,
styles : {
height : 120
}
}).inject( self.$Elm.getElement( '.quiqqer-bricks-areas' ) );
// editor
self.$createContentEditor( callback );
}, {
'package' : 'quiqqer/bricks'
});
},
/**
* Create the editor, if the brick type is a content type
*
* @param {Function} callback
*/
$createContentEditor : function(callback)
{
if ( this.getAttribute( 'type' ) != 'content' )
{
this.$Elm
.getElement( 'table.brick-edit-content')
.setStyle( 'display', 'none' );
if ( typeof callback === 'function' ) {
callback();
}
return;
}
var self = this,
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 );
// 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',
'float' : 'left',
height : 300,
width : '100%'
}
}).inject( TD );
self.$Editor.addEvent('onLoaded', function()
{
if ( typeof callback === 'function' ) {
callback();
}
});
self.$Editor.inject( EditorContainer );
self.$Editor.setHeight( EditorContainer.getSize().y );
self.$Editor.setWidth( EditorContainer.getSize().x );
self.$Editor.setContent( self.getAttribute( 'content' ) );
});
});
},
/**
* Create the extra settings table
*/
$createExtraData : function()
{
var TableExtra = this.$Elm.getElement( 'table.brick-edit-extra-header'),
TableBody = TableExtra.getElement( 'tbody' );
if ( !this.$availableSettings || !this.$availableSettings.length )
{
TableExtra.setStyle( 'display', 'none' );
return;
}
TableExtra.setStyle( 'display', null );
var Form = new Element('form', {
'class' : 'brick-edit-extra-header-form'
}).wraps( TableExtra );
var i, len, text, setting, dataQui, extraFieldId;
var self = this,
id = this.getId();
// extra settings
for ( i = 0, len = this.$availableSettings.length; i < len; i++ )
{
setting = this.$availableSettings[ i ];
dataQui = '';
extraFieldId = 'extraField_'+ id +'_'+ i;
if ( setting['data-qui'] !== '' ) {
dataQui = ' data-qui="'+ setting['data-qui'] +'" ';
}
text = setting.text;
if ( typeOf( setting.text ) === 'array' ) {
text = QUILocale.get( setting.text[ 0 ], setting.text[ 1 ] );
}
new Element('tr', {
'class' : i % 2 ? 'even' : 'odd',
html : '<td>' +
' <label class="quiqqer-bricks-areas" for="'+ extraFieldId +'">' +
text +
' </label>' +
'</td>' +
'<td>' +
' <input type="'+ setting.type +'" ' +
' name="'+ setting.name +'" ' +
' class="'+ setting.class +'" ' +
' id="'+ extraFieldId +'"' +
dataQui +
' />' +
'</td>'
}).inject( TableBody );
}
TableExtra.setStyle( 'display', null );
// set data
QUIFormUtils.setDataToForm( this.getAttribute( 'settings' ), Form );
// parse controls
ControlUtils.parse( TableExtra );
QUI.parse(TableExtra, function()
{
// set project to the controls
TableExtra.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' )
);
}
});
});
},
/**
* Saves the brick
*/
save : function(callback)
{
var i, len, Control;
var Type = this.$Elm.getElement( '[name="type"]' ),
Title = this.$Elm.getElement( '[name="title"]'),
Desc = this.$Elm.getElement( '[name="description"]'),
quiElements = this.$Elm.getElements( '[data-quiid]' );
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();
}
for ( i = 0, len = quiElements.length; i < len; i++ )
{
Control = QUI.Controls.getById( quiElements[ i ].get( 'data-quiid' ) );
if ( Control && typeOf( Control ) == 'controls/editors/Editor' ) {
Control.getContent();
}
}
// settings
var Form = this.$Elm.getElement( '.brick-edit-extra-header-form');
if ( Form ) {
data.settings = QUIFormUtils.getFormData( Form );
}
QUIAjax.post('package_quiqqer_bricks_ajax_brick_save', function()
{
if ( typeof callback === 'function' ) {
callback();
}
}, {
'package' : 'quiqqer/brick',
brickId : this.getAttribute( 'id' ),
data : JSON.encode( data )
});
}
});
});