diff --git a/bin/Site/Area.css b/bin/Site/Area.css
index 82ec00839aeb94ea871a1a1f85e468fa6b38c8b4..b0ba7d148a7dc49b68774bd3a0c0e0d63072fed7 100644
--- a/bin/Site/Area.css
+++ b/bin/Site/Area.css
@@ -28,6 +28,7 @@
.quiqqer-bricks-site-category-area-list {
float: left;
+ margin: 0;
padding: 0;
position: relative;
width: 100%;
diff --git a/bin/Site/Area.js b/bin/Site/Area.js
index 71c539ab443603b90b4a525ccc51a30331c6516b..f7bbfe83d46d147521281e83453cc17a022cfd68 100644
--- a/bin/Site/Area.js
+++ b/bin/Site/Area.js
@@ -73,6 +73,7 @@ define('package/quiqqer/bricks/bin/Site/Area', [
this.$SortableButton = false;
this.$MoreButton = false;
+ this.$Title = false;
this.$List = false;
this.$FXExtraBtns = false;
this.$ExtraBtns = false;
@@ -109,6 +110,9 @@ define('package/quiqqer/bricks/bin/Site/Area', [
'class' : 'quiqqer-bricks-site-category-area-extraButtons'
});
+ this.$Title = this.$Elm.getElement(
+ '.quiqqer-bricks-site-category-area-title'
+ );
this.$FXExtraBtns = moofx( this.$ExtraBtns );
@@ -197,6 +201,19 @@ define('package/quiqqer/bricks/bin/Site/Area', [
Site = this.getAttribute( 'Site' ),
Project = Site.getProject();
+ var Loader = new Element('div', {
+ 'class' : 'quiqqer-bricks-site-category-area-loader',
+ html : '<span class="icon-spinner icon-spin fa fa-spinner fa-spin"></span>',
+ styles : {
+ margin : 5
+ }
+ }).inject(this.$Elm);
+
+ this.$List.setStyles({
+ position : 'absolute',
+ opacity : 0
+ });
+
QUIAjax.get('package_quiqqer_bricks_ajax_project_getBricks', function(bricks)
{
self.$AddButton.enable();
@@ -205,13 +222,47 @@ define('package/quiqqer/bricks/bin/Site/Area', [
self.$loaded = true;
self.$brickIds.each(function(brickId) {
- self.addBrickById( brickId );
+ self.addBrickById(brickId);
});
+ var promises = [];
+
self.$brickData.each(function(brickData) {
- self.addBrick( brickData );
+ promises.push(self.addBrick(brickData));
});
+ if (promises.length) {
+
+ Promise.resolve(promises).then(function() {
+
+ var size = self.$List.getComputedSize(),
+ titleSize = self.$Title.getComputedSize();
+
+ moofx(self.$Elm).animate({
+ height : size.height + titleSize.height
+ }, {
+ duration : 250,
+ equation : 'cubic-bezier(.42,.4,.46,1.29)',
+ callback : function() {
+ self.$List.setStyle('position', null);
+
+ moofx(self.$List).animate({
+ opacity : 1
+ }, {
+ duration : 250,
+ equation : 'ease-out'
+ });
+ }
+ });
+
+ Loader.destroy();
+ });
+
+ return;
+ }
+
+ Loader.destroy();
+
}, {
'package' : 'quiqqer/bricks',
project : Project.encode(),
@@ -238,7 +289,7 @@ define('package/quiqqer/bricks/bin/Site/Area', [
var self = this,
data = this.getData();
- if ( data.length && !("deactivate" in data[ 0 ]) )
+ if (data.length && !("deactivate" in data[ 0 ]))
{
new QUIConfirm({
title : QUILocale.get( lg, 'site.area.window.deactivate.title' ),
@@ -266,38 +317,48 @@ define('package/quiqqer/bricks/bin/Site/Area', [
/**
* Add a brick by its brick data
+ *
* @param {Object} brickData - { brickId:1, inheritance:1 }
+ * @return Promise
*/
addBrick : function(brickData)
{
- if ( "deactivate" in brickData )
- {
- this.clear();
- this.setAttribute( 'deactivate', true );
- this.deactivate();
- return;
- }
+ return new Promise(function(reslove, reject) {
+ if ("deactivate" in brickData)
+ {
+ this.clear();
+ this.setAttribute( 'deactivate', true );
+ this.deactivate();
- if ( !this.$loaded )
- {
- this.$brickData.push( brickData );
- return;
- }
+ reslove();
+ return;
+ }
- var BrickNode = this.addBrickById( brickData.brickId );
- if ( !BrickNode ) {
- return;
- }
+ if (!this.$loaded)
+ {
+ this.$brickData.push( brickData );
+ reslove();
+ return;
+ }
- var Select = BrickNode.getElement( 'select' );
+ var BrickNode = this.addBrickById( brickData.brickId );
- Select.set( 'data-inheritance', 0 );
+ if (!BrickNode) {
+ reject();
+ return;
+ }
- if ( "inheritance" in brickData ) {
- Select.set( 'data-inheritance', brickData.inheritance );
- }
+ var Select = BrickNode.getElement( 'select' );
+
+ Select.set('data-inheritance', 0);
+
+ if ("inheritance" in brickData) {
+ Select.set( 'data-inheritance', brickData.inheritance );
+ }
+
+ }.bind(this));
},
/**
@@ -308,9 +369,9 @@ define('package/quiqqer/bricks/bin/Site/Area', [
*/
addBrickById : function(brickId)
{
- if ( !this.$loaded )
+ if (!this.$loaded)
{
- this.$brickIds.push( brickId );
+ this.$brickIds.push(brickId);
return false;
}
@@ -318,13 +379,13 @@ define('package/quiqqer/bricks/bin/Site/Area', [
return Item.id === brickId;
});
- if ( !found.length ) {
+ if (!found.length) {
return false;
}
var BrickNode = this.createNewBrick();
- BrickNode.getElement( 'select' ).set( 'value', brickId );
+ BrickNode.getElement('select').set('value', brickId);
return BrickNode;
},
@@ -382,7 +443,7 @@ define('package/quiqqer/bricks/bin/Site/Area', [
}).inject( Elm );
- for ( i = 0, len = this.$availableBricks.length; i < len; i++ )
+ for (i = 0, len = this.$availableBricks.length; i < len; i++)
{
new Element('option', {
html : this.$availableBricks[ i ].title,
@@ -399,19 +460,17 @@ define('package/quiqqer/bricks/bin/Site/Area', [
*/
getData : function()
{
- if ( this.getAttribute( 'deactivate' ) )
+ if (this.getAttribute('deactivate'))
{
return [{
deactivate : 1
}];
}
- var i, len;
-
var data = [],
bricks = this.$Elm.getElements( 'select' );
- for ( i = 0, len = bricks.length; i < len; i++ )
+ for (var i = 0, len = bricks.length; i < len; i++)
{
data.push({
brickId : bricks[ i ].value,
@@ -701,7 +760,7 @@ define('package/quiqqer/bricks/bin/Site/Area', [
text : QUILocale.get( lg, 'site.area.window.delete.text' ),
information : QUILocale.get( lg, 'site.area.window.delete.information' ),
maxHeight : 300,
- maxWidth : 500,
+ maxWidth : 450,
events :
{
onSubmit : function() {
@@ -719,15 +778,27 @@ define('package/quiqqer/bricks/bin/Site/Area', [
openBrickSettingDialog : function(Select)
{
new QUIConfirm({
- title : QUILocale.get( lg, 'site.area.window.settings.title' ),
+ title : QUILocale.get(lg, 'site.area.window.settings.title'),
icon : 'icon-gear',
- maxWidth : 400,
- maxHeight : 300,
+ maxWidth : 600,
+ maxHeight : 400,
autoclose : false,
events :
{
onOpen : function(Win)
{
+ Win.Loader.show();
+
+ require([
+ 'package/quiqqer/bricks/bin/Site/BrickEdit'
+ ], function(BrickEdit) {
+
+ new BrickEdit({
+ brickId : Select.value
+ }).inject(Win.getContent());
+ });
+
+ /*
var Content = Win.getContent();
Content.set(
@@ -745,6 +816,7 @@ define('package/quiqqer/bricks/bin/Site/Area', [
elms = Form.elements;
elms.inheritance.checked = Select.get( 'data-inheritance' ).toInt();
+ */
},
onSubmit : function(Win)
@@ -771,7 +843,7 @@ define('package/quiqqer/bricks/bin/Site/Area', [
new QUIConfirm({
title : QUILocale.get(lg, 'area.window.settings.title'),
icon : 'icon-gear',
- maxWidth : 400,
+ maxWidth : 450,
maxHeight : 300,
autoclose : false,
events :
diff --git a/bin/Site/BrickEdit.js b/bin/Site/BrickEdit.js
new file mode 100644
index 0000000000000000000000000000000000000000..a5c97497bccd615185df508857f8c49b0f4558dc
--- /dev/null
+++ b/bin/Site/BrickEdit.js
@@ -0,0 +1,59 @@
+
+/**
+ * Area edit control for the site object
+ *
+ * @module package/quiqqer/bricks/bin/Site/Area
+ * @author www.pcsg.de (Henning Leutz)
+ *
+ */
+
+define('package/quiqqer/bricks/bin/Site/BrickEdit', [
+
+ 'qui/QUI',
+ 'qui/controls/Control',
+ 'qui/controls/loader/Loader'
+
+], function(QUI, QUIControl, QUILoader)
+{
+ "use strict";
+
+ var lg = 'quiqqer/bricks';
+
+ return new Class({
+
+ Extends: QUIControl,
+ Type: 'package/quiqqer/bricks/bin/Site/BrickEdit',
+
+ initialize : function(options)
+ {
+ this.parent(options);
+
+ this.Loader = new QUILoader();
+ },
+
+ /**
+ * Return the domnode element
+ *
+ * @returns {HTMLDivElement}
+ */
+ create : function()
+ {
+ this.$Elm = new Element('div', {
+ 'class' : 'quiqqer-bricks-site-brickedit'
+ });
+
+ this.Loader.inject(this.$Elm);
+
+
+ return this.$Elm;
+ },
+
+ /**
+ * event on inject
+ */
+ $onInject : function()
+ {
+ this.Loader.show();
+ }
+ });
+});
diff --git a/bin/Site/Category.js b/bin/Site/Category.js
index a8f00fbcfe8f1849d030d73da95bd13652e6770d..0a5024a19b68a952583bfd0130ab944dde288d83 100644
--- a/bin/Site/Category.js
+++ b/bin/Site/Category.js
@@ -5,6 +5,14 @@
* @module package/quiqqer/bricks/bin/Site/Category
* @author www.pcsg.de (Henning Leutz)
*
+ * qui/QUI
+ * qui/controls/Control
+ * qui/controls/loader/Loader
+ * Ajax
+ * Locale
+ * package/quiqqer/bricks/bin/Site/Area
+ * css!package/quiqqer/bricks/bin/Site/Category.css
+ *
* @event onLoaded
*/
@@ -73,7 +81,7 @@ define('package/quiqqer/bricks/bin/Site/Category', [
this.getBrickAreas(function(bricks)
{
- if ( !bricks.length )
+ if (!bricks.length)
{
self.$Elm.set(
'html',
@@ -88,15 +96,15 @@ define('package/quiqqer/bricks/bin/Site/Category', [
var Site = self.getAttribute( 'Site' ),
areas = Site.getAttribute( 'quiqqer.bricks.areas' );
- if ( areas ) {
+ if (areas) {
areas = JSON.decode( areas );
}
- for ( i = 0, len = bricks.length; i < len; i++ )
+ for (i = 0, len = bricks.length; i < len; i++)
{
- AC = self.$insertBrickAreaEdit( bricks[ i ] );
+ AC = self.$insertBrickAreaEdit(bricks[ i ]);
- if ( typeof areas[ AC.getAttribute('name') ] === 'undefined' ) {
+ if (typeof areas[ AC.getAttribute('name') ] === 'undefined') {
continue;
}
@@ -130,14 +138,14 @@ define('package/quiqqer/bricks/bin/Site/Category', [
var Site = this.getAttribute( 'Site' ),
areas = {};
- for ( i = 0, len = this.areas.length; i < len; i++ )
+ for (i = 0, len = this.areas.length; i < len; i++)
{
AC = this.areas[ i ];
areas[ AC.getAttribute( 'name' ) ] = AC.getData();
}
- Site.setAttribute( 'quiqqer.bricks.areas', JSON.encode( areas ) );
+ Site.setAttribute('quiqqer.bricks.areas', JSON.encode(areas));
},
/**
@@ -151,8 +159,8 @@ define('package/quiqqer/bricks/bin/Site/Category', [
Project.getConfig(function(layout)
{
- if ( Site.getAttribute( 'layout' ) ) {
- layout = Site.getAttribute( 'layout' );
+ if (Site.getAttribute('layout')) {
+ layout = Site.getAttribute('layout');
}
QUIAjax.get('package_quiqqer_bricks_ajax_project_getAreas', callback, {