Skip to content
Code-Schnipsel Gruppen Projekte
Commit 2257f944 erstellt von Henning Leutz's avatar Henning Leutz :martial_arts_uniform:
Dateien durchsuchen

area sortables

Übergeordneter e21d2de0
No related branches found
No related tags found
Keine zugehörigen Merge Requests gefunden
Leerzeichenänderungen ausblenden
Inline Nebeneinander
bin/Site/Area.css
+ 35
− 0
Zeige Datei @ 2257f944
......@@ -2,6 +2,7 @@
.quiqqer-bricks-site-category-area {
float: left;
margin-bottom: 20px;
overflow: hidden;
position: relative;
width: 100%;
}
......@@ -25,6 +26,18 @@
top: 4px;
}
.quiqqer-bricks-site-category-area-list {
float: left;
padding: 0;
position: relative;
width: 100%;
}
.quiqqer-bricks-site-category-area-brick {
list-style-type: none;
position: relative;
}
.quiqqer-bricks-site-category-area-brick select {
background: #fff;
margin: 2px;
......@@ -45,3 +58,25 @@
text-decoration: line-through;
}
.quiqqer-bricks-site-category-area-placeholder {
background: #fff;
cursor: pointer;
height: 100%;
left: 0;
padding: 5px;
position: absolute;
top: 0;
width: 100%;
}
.quiqqer-bricks-site-category-area-dd-active .quiqqer-bricks-site-category-area-placeholder {
background: #2f8fc6;
color: #fff;
}
.quiqqer-bricks-site-category-area-extraButtons {
float: right;
opacity: 0;
position: relative;
width: 0
}
bin/Site/Area.js
+ 273
− 9
Zeige Datei @ 2257f944
......@@ -15,10 +15,11 @@ define('package/quiqqer/bricks/bin/Site/Area', [
'qui/controls/elements/List',
'Locale',
'Ajax',
'package/quiqqer/bricks/bin/Sortables',
'css!package/quiqqer/bricks/bin/Site/Area'
], function (QUI, QUIControl, QUIButton, QUIPopup, QUIConfirm, QUIList, QUILocale, QUIAjax)
], function (QUI, QUIControl, QUIButton, QUIPopup, QUIConfirm, QUIList, QUILocale, QUIAjax, Sortables)
{
"use strict";
......@@ -50,13 +51,19 @@ define('package/quiqqer/bricks/bin/Site/Area', [
{
this.parent( options );
this.$AddButton = false;
this.$SettingsButton = false;
this.$availableBricks = [];
this.$loaded = false;
this.$brickIds = [];
this.$brickData = [];
this.$AddButton = false;
this.$SettingsButton = false;
this.$SortableButton = false;
this.$MoreButton = false;
this.$List = false;
this.$FXExtraBtns = false;
this.addEvents({
onInject : this.$onInject
});
......@@ -64,25 +71,39 @@ define('package/quiqqer/bricks/bin/Site/Area', [
/**
* Return the domnode element
* @return {Element}
* @return {HTMLElement}
*/
create: function ()
{
var title = this.getAttribute( 'title' );
var self = this,
title = this.getAttribute( 'title' );
this.$Elm = new Element('div', {
'class' : 'quiqqer-bricks-site-category-area',
html : '<div class="quiqqer-bricks-site-category-area-title">'+
QUILocale.get( title.group, title.var ) +
' <div class="quiqqer-bricks-site-category-area-buttons"></div>' +
'</div>',
'</div><ul class="quiqqer-bricks-site-category-area-list"></ul>',
'data-name' : this.getAttribute( 'name' )
});
// Elements
var Buttons = this.$Elm.getElement(
'.quiqqer-bricks-site-category-area-buttons'
);
var ExtraButtons = new Element('div', {
'class' : 'quiqqer-bricks-site-category-area-extraButtons'
});
this.$FXExtraBtns = moofx( ExtraButtons );
this.$List = this.$Elm.getElement(
'.quiqqer-bricks-site-category-area-list'
);
// buttons
this.$AddButton = new QUIButton({
text : QUILocale.get( lg, 'site.area.button.add' ),
textimage : 'icon-plus',
......@@ -92,6 +113,30 @@ define('package/quiqqer/bricks/bin/Site/Area', [
}
}).inject( Buttons );
ExtraButtons.inject( Buttons );
this.$MoreButton = new QUIButton({
title : QUILocale.get( lg, 'site.area.button.area.more.openIt' ),
icon : 'icon-caret-left',
events :
{
onClick : function(Btn)
{
if ( Btn.getAttribute( 'icon' ) == 'icon-caret-left' )
{
self.openButtons();
return;
}
self.closeButtons();
}
},
styles : {
marginLeft : 5
}
}).inject( Buttons );
// extra buttons
this.$SettingsButton = new QUIButton({
title : QUILocale.get( lg, 'site.area.button.area.settings' ),
icon : 'icon-gears',
......@@ -101,7 +146,31 @@ define('package/quiqqer/bricks/bin/Site/Area', [
styles : {
marginLeft : 10
}
}).inject( Buttons );
}).inject( ExtraButtons );
this.$SortableButton = new QUIButton({
title : QUILocale.get( lg, 'site.area.button.area.sort' ),
icon : 'icon-sort',
events :
{
onClick : function(Btn)
{
if ( Btn.isActive() )
{
Btn.setNormal();
self.unsortable();
return;
}
Btn.setActive();
self.sortable();
}
},
styles : {
marginLeft : 5
}
}).inject( ExtraButtons );
return this.$Elm;
},
......@@ -264,12 +333,12 @@ define('package/quiqqer/bricks/bin/Site/Area', [
var self = this;
var Elm = new Element('div', {
var Elm = new Element('li', {
'class' : 'quiqqer-bricks-site-category-area-brick',
html : '<select></select>'
});
Elm.inject( this.$Elm );
Elm.inject( this.$List );
Select = Elm.getElement( 'select' );
new QUIButton({
......@@ -340,6 +409,201 @@ define('package/quiqqer/bricks/bin/Site/Area', [
return data;
},
/**
* sort methods
*/
/**
* Switch the sortable on
*/
sortable : function()
{
var Elm = this.getElm(),
elements = Elm.getElements(
'.quiqqer-bricks-site-category-area-brick'
);
elements.each(function(Brick)
{
var i, len, buttons, Button;
buttons = Brick.getElements( '.qui-button' );
for ( i = 0, len = buttons.length; i < len; i++ )
{
Button = QUI.Controls.getById( buttons[ i ].get( 'data-quiid' ) );
if ( Button ) {
Button.setDisable();
}
}
var Select = Brick.getElement( 'select' ),
Option = Select.getElement( 'option[value="'+ Select.value +'"]' );
new Element('div', {
'class' : 'quiqqer-bricks-site-category-area-placeholder',
html : Option.get( 'html' )
}).inject( Brick );
});
Elm.getElements( 'select' ).set( 'disabled', true );
new Sortables( this.$List, {
revert: {
duration: 500,
transition: 'elastic:out'
},
clone : function(event)
{
var Target = event.target;
if ( Target.nodeName != 'LI' ) {
Target = Target.getParent( 'li' );
}
var size = Target.getSize(),
pos = Target.getPosition( Target.getParent('ul') );
return new Element('div', {
styles : {
background : 'rgba(0,0,0,0.5)',
height : size.y,
top : pos.y,
width : size.x,
zIndex : 1000
}
});
},
onStart : function(element)
{
var Ul = element.getParent( 'ul' );
element.addClass( 'quiqqer-bricks-site-category-area-dd-active' );
Ul.setStyles({
height : Ul.getSize().y,
overflow : 'hidden',
width : Ul.getSize().x
});
},
onComplete : function(element)
{
var Ul = element.getParent( 'ul' );
element.removeClass( 'quiqqer-bricks-site-category-area-dd-active' );
Ul.setStyles({
height : null,
overflow : null,
width : null
});
}
});
},
/**
* Switch the sortable off
*/
unsortable : function()
{
var Elm = this.getElm(),
elements = Elm.getElements(
'.quiqqer-bricks-site-category-area-brick'
);
Elm.getElements( 'select' ).set( 'disabled', false );
Elm.getElements( '.quiqqer-bricks-site-category-area-placeholder').destroy();
elements.each(function(Brick)
{
var i, len, buttons, Button;
buttons = Brick.getElements( '.qui-button' );
for ( i = 0, len = buttons.length; i < len; i++ )
{
Button = QUI.Controls.getById( buttons[ i ].get( 'data-quiid' ) );
if ( Button ) {
Button.setEnable();
}
}
});
},
/**
* Opens the extra settings buttons
*
* @param {Function} callback
*/
openButtons : function(callback)
{
var self = this;
this.$AddButton.hide();
self.$FXExtraBtns.style({
borderLeft : '2px solid #cccfd5',
height : 30,
overflow : 'hidden'
});
this.$FXExtraBtns.animate({
opacity : 1,
width : 85,
marginLeft : 10
}, {
callback : function()
{
self.$MoreButton.setAttribute( 'icon', 'icon-caret-right' );
self.$FXExtraBtns.style({
overflow : null
});
if ( typeof callback === 'function' ) {
callback();
}
}
});
},
/**
* Close the extra settings buttons
*
* * @param {Function} callback
*/
closeButtons : function( callback )
{
var self = this;
this.$FXExtraBtns.style({
overflow : 'hidden',
borderLeft : null,
marginLeft : 0
});
this.$FXExtraBtns.animate({
opacity : 0,
width : 0
}, {
callback : function()
{
self.$MoreButton.setAttribute( 'icon', 'icon-caret-left' );
self.$AddButton.show();
if ( typeof callback === 'function' ) {
callback();
}
}
});
},
/**
* dialogs
*/
......
bin/Sortables.js 0 → 100644
+ 254
− 0
Zeige Datei @ 2257f944
/*
---
script: Sortables.js
name: Sortables
description: Class for creating a drag and drop sorting interface for lists of items.
license: MIT-style license
authors:
- Tom Occhino
requires:
- Core/Fx.Morph
- Drag.Move
provides: [Sortables]
...
*/
define('package/quiqqer/bricks/bin/Sortables', function()
{
"use strict";
return new Class({
Implements: [ Events, Options ],
options: {
/*
onSort: function(element, clone){},
onStart: function(element, clone){},
onComplete: function(element){},*/
opacity: 1,
clone: false,
revert: false,
handle: false,
dragOptions: {},
unDraggableTags: ['button', 'input', 'a', 'textarea', 'select', 'option']
},
initialize: function (lists, options) {
this.setOptions(options);
this.elements = [];
this.lists = [];
this.idle = true;
this.addLists($$(document.id(lists) || lists));
if (!this.options.clone) this.options.revert = false;
if (this.options.revert) this.effect = new Fx.Morph(null, Object.merge({
duration: 250,
link: 'cancel'
}, this.options.revert));
},
attach: function () {
this.addLists(this.lists);
return this;
},
detach: function () {
this.lists = this.removeLists(this.lists);
return this;
},
addItems: function () {
Array.flatten(arguments).each(function (element) {
this.elements.push(element);
var start = element.retrieve('sortables:start', function (event) {
this.start.call(this, event, element);
}.bind(this));
(this.options.handle ? element.getElement(this.options.handle) || element : element).addEvent('mousedown', start);
}, this);
return this;
},
addLists: function () {
Array.flatten(arguments).each(function (list) {
this.lists.include(list);
this.addItems(list.getChildren());
}, this);
return this;
},
removeItems: function () {
return $$(Array.flatten(arguments).map(function (element) {
this.elements.erase(element);
var start = element.retrieve('sortables:start');
(this.options.handle ? element.getElement(this.options.handle) || element : element).removeEvent('mousedown', start);
return element;
}, this));
},
removeLists: function () {
return $$(Array.flatten(arguments).map(function (list) {
this.lists.erase(list);
this.removeItems(list.getChildren());
return list;
}, this));
},
getDroppableCoordinates: function (element) {
var offsetParent = element.getOffsetParent();
var position = element.getPosition(offsetParent);
var scroll = {
w: window.getScroll(),
offsetParent: offsetParent.getScroll()
};
position.x += scroll.offsetParent.x;
position.y += scroll.offsetParent.y;
if (offsetParent.getStyle('position') == 'fixed') {
position.x -= scroll.w.x;
position.y -= scroll.w.y;
}
return position;
},
getClone: function (event, element) {
if (!this.options.clone) return new Element(element.tagName).inject(document.body);
if (typeOf(this.options.clone) == 'function') return this.options.clone.call(this, event, element, this.list);
var clone = element.clone(true).setStyles({
margin: 0,
position: 'absolute',
visibility: 'hidden',
width: element.getStyle('width')
}).addEvent('mousedown', function (event) {
element.fireEvent('mousedown', event);
});
//prevent the duplicated radio inputs from unchecking the real one
if (clone.get('html').test('radio')) {
clone.getElements('input[type=radio]').each(function (input, i) {
input.set('name', 'clone_' + i);
if (input.get('checked')) element.getElements('input[type=radio]')[i].set('checked', true);
});
}
return clone.inject(this.list).setPosition(this.getDroppableCoordinates(this.element));
},
getDroppables: function () {
var droppables = this.list.getChildren().erase(this.clone).erase(this.element);
if (!this.options.constrain) droppables.append(this.lists).erase(this.list);
return droppables;
},
insert: function (dragging, element) {
var where = 'inside';
if (this.lists.contains(element)) {
this.list = element;
this.drag.droppables = this.getDroppables();
} else {
where = this.element.getAllPrevious().contains(element) ? 'before' : 'after';
}
this.element.inject(element, where);
this.fireEvent('sort', [this.element, this.clone]);
},
start: function (event, element) {
if (
!this.idle ||
event.rightClick ||
(!this.options.handle && this.options.unDraggableTags.contains(event.target.get('tag')))
) return;
this.idle = false;
this.element = element;
this.opacity = element.getStyle('opacity');
this.list = element.getParent();
this.clone = this.getClone(event, element);
this.drag = new Drag.Move(this.clone, Object.merge({
droppables: this.getDroppables()
}, this.options.dragOptions)).addEvents({
onSnap: function () {
event.stop();
this.clone.setStyle('visibility', 'visible');
this.element.setStyle('opacity', this.options.opacity || 0);
this.fireEvent('start', [this.element, this.clone]);
}.bind(this),
onEnter: this.insert.bind(this),
onCancel: this.end.bind(this),
onComplete: this.end.bind(this)
});
this.clone.inject(this.element, 'before');
this.drag.start(event);
},
end: function () {
this.drag.detach();
this.element.setStyle('opacity', this.opacity);
var self = this;
if (this.effect) {
var dim = this.element.getStyles('width', 'height'),
clone = this.clone,
pos = clone.computePosition(this.getDroppableCoordinates(clone));
var destroy = function () {
this.removeEvent('cancel', destroy);
clone.destroy();
self.reset();
};
this.effect.element = clone;
this.effect.start({
top: pos.top,
left: pos.left,
width: dim.width,
height: dim.height,
opacity: 0.25
}).addEvent('cancel', destroy).chain(destroy);
} else {
this.clone.destroy();
self.reset();
}
},
reset: function () {
this.idle = true;
this.fireEvent('complete', this.element);
},
serialize: function () {
var params = Array.link(arguments, {
modifier: Type.isFunction,
index: function (obj) {
return obj !== null;
}
});
var serial = this.lists.map(function (list) {
return list.getChildren().map(params.modifier || function (element) {
return element.get('id');
}, this);
}, this);
var index = params.index;
if (this.lists.length == 1) index = 0;
return (index || index === 0) && index >= 0 && index < this.lists.length ? serial[index] : serial;
}
});
});
0% oder .
You are about to add 0 people to the discussion. Proceed with caution.
Bearbeitung dieser Nachricht zuerst beenden!
Bitte registrieren oder zum Kommentieren

PCSG & QUIQQER support and DEV System - GitLab