493 lines
14 KiB
JavaScript
493 lines
14 KiB
JavaScript
|
/*##################################################|*/
|
||
|
|
/* #CMS# */
|
||
|
|
(function($) {
|
||
|
|
// CMS.$ will be passed for $
|
||
|
|
$(document).ready(function () {
|
||
|
|
/*!
|
||
|
|
* StructureBoard
|
||
|
|
* handles drag & drop, mode switching and
|
||
|
|
*/
|
||
|
|
CMS.StructureBoard = new CMS.Class({
|
||
|
|
|
||
|
|
implement: [CMS.API.Helpers],
|
||
|
|
|
||
|
|
options: {
|
||
|
|
'speed': 300
|
||
|
|
},
|
||
|
|
|
||
|
|
initialize: function (options) {
|
||
|
|
this.container = $('.cms_structure');
|
||
|
|
this.options = $.extend(true, {}, this.options, options);
|
||
|
|
this.config = CMS.config;
|
||
|
|
this.settings = CMS.settings;
|
||
|
|
|
||
|
|
// elements
|
||
|
|
this.toolbar = $('#cms_toolbar');
|
||
|
|
this.sortables = $('.cms_draggables'); // use global scope
|
||
|
|
this.plugins = $('.cms_plugin');
|
||
|
|
this.render_model = $('.cms_render_model');
|
||
|
|
this.placeholders = $('.cms_placeholder');
|
||
|
|
this.dragitems = $('.cms_draggable');
|
||
|
|
this.dragareas = $('.cms_dragarea');
|
||
|
|
this.dropareas = $('.cms_droppable');
|
||
|
|
this.dimmer = this.container.find('.cms_structure-dimmer');
|
||
|
|
this.clipboard = $('.cms_clipboard');
|
||
|
|
|
||
|
|
// states
|
||
|
|
this.click = (document.ontouchstart !== null) ? 'click.cms' : 'tap.cms click.cms';
|
||
|
|
this.timer = function () {};
|
||
|
|
this.interval = function () {};
|
||
|
|
this.state = false;
|
||
|
|
this.dragging = false;
|
||
|
|
|
||
|
|
// setup initial stuff
|
||
|
|
this._setup();
|
||
|
|
|
||
|
|
// setup events
|
||
|
|
this._events();
|
||
|
|
},
|
||
|
|
|
||
|
|
// initial methods
|
||
|
|
_setup: function () {
|
||
|
|
var that = this;
|
||
|
|
|
||
|
|
// cancel if there are no dragareas
|
||
|
|
if(!this.dragareas.length) return false;
|
||
|
|
|
||
|
|
// cancel if there is no structure / content switcher
|
||
|
|
if(!this.toolbar.find('.cms_toolbar-item-cms-mode-switcher').length) return false;
|
||
|
|
|
||
|
|
// setup toolbar mode
|
||
|
|
if(this.settings.mode === 'structure') setTimeout(function () { that.show(true); }, 100);
|
||
|
|
|
||
|
|
// check if modes should be visible
|
||
|
|
if(this.placeholders.length) {
|
||
|
|
this.toolbar.find('.cms_toolbar-item-cms-mode-switcher').show();
|
||
|
|
}
|
||
|
|
|
||
|
|
// add drag & drop functionality
|
||
|
|
this._drag();
|
||
|
|
// prevent click events to detect double click
|
||
|
|
// this.preventEvents(this.plugins);
|
||
|
|
},
|
||
|
|
|
||
|
|
_events: function () {
|
||
|
|
var that = this;
|
||
|
|
var modes = this.toolbar.find('.cms_toolbar-item-cms-mode-switcher a');
|
||
|
|
|
||
|
|
// show edit mode
|
||
|
|
modes.eq(1).bind(this.click, function (e) {
|
||
|
|
e.preventDefault();
|
||
|
|
// cancel if already active
|
||
|
|
if(that.settings.mode === 'edit') return false;
|
||
|
|
// otherwise hide
|
||
|
|
that.hide();
|
||
|
|
});
|
||
|
|
// show structure mode
|
||
|
|
modes.eq(0).bind(this.click, function (e) {
|
||
|
|
e.preventDefault();
|
||
|
|
// cancel if already active
|
||
|
|
if(that.settings.mode === 'structure') return false;
|
||
|
|
// otherwise show
|
||
|
|
that.show();
|
||
|
|
});
|
||
|
|
|
||
|
|
// keyboard handling
|
||
|
|
$(document).bind('keydown', function (e) {
|
||
|
|
// check if we have an important focus
|
||
|
|
var fields = $('*:focus');
|
||
|
|
// 32 = space
|
||
|
|
if(e.keyCode === 32 && that.settings.mode === 'structure' && !fields.length) {
|
||
|
|
// cancel if there is no structure / content switcher
|
||
|
|
if(!that.toolbar.find('.cms_toolbar-item-cms-mode-switcher').length) return false;
|
||
|
|
e.preventDefault();
|
||
|
|
that.hide();
|
||
|
|
} else if(e.keyCode === 32 && that.settings.mode === 'edit' && !fields.length) {
|
||
|
|
// cancel if there is no structure / content switcher
|
||
|
|
if(!that.toolbar.find('.cms_toolbar-item-cms-mode-switcher').length) return false;
|
||
|
|
e.preventDefault();
|
||
|
|
that.show();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
// public methods
|
||
|
|
show: function (init) {
|
||
|
|
// cancel show if live modus is active
|
||
|
|
if(CMS.config.mode === 'live') return false;
|
||
|
|
|
||
|
|
// set active item
|
||
|
|
var modes = this.toolbar.find('.cms_toolbar-item-cms-mode-switcher a');
|
||
|
|
modes.removeClass('cms_btn-active').eq(0).addClass('cms_btn-active');
|
||
|
|
|
||
|
|
// show clipboard
|
||
|
|
this.clipboard.css('opacity', 1).fadeIn(this.options.speed);
|
||
|
|
|
||
|
|
// apply new settings
|
||
|
|
this.settings.mode = 'structure';
|
||
|
|
if(!init) this.settings = this.setSettings(this.settings);
|
||
|
|
|
||
|
|
// ensure all elements are visible
|
||
|
|
this.dragareas.show();
|
||
|
|
|
||
|
|
// show canvas
|
||
|
|
this._showBoard();
|
||
|
|
},
|
||
|
|
|
||
|
|
hide: function (init) {
|
||
|
|
// cancel show if live modus is active
|
||
|
|
if(CMS.config.mode === 'live') return false;
|
||
|
|
|
||
|
|
// set active item
|
||
|
|
var modes = this.toolbar.find('.cms_toolbar-item-cms-mode-switcher a');
|
||
|
|
modes.removeClass('cms_btn-active').eq(1).addClass('cms_btn-active');
|
||
|
|
|
||
|
|
// hide clipboard if in edit mode
|
||
|
|
this.container.find('.cms_clipboard').hide();
|
||
|
|
|
||
|
|
// hide clipboard
|
||
|
|
this.clipboard.hide();
|
||
|
|
|
||
|
|
this.settings.mode = 'edit';
|
||
|
|
if(!init) this.settings = this.setSettings(this.settings);
|
||
|
|
|
||
|
|
// hide canvas
|
||
|
|
this._hideBoard();
|
||
|
|
},
|
||
|
|
|
||
|
|
getId: function (el) {
|
||
|
|
// cancel if no element is defined
|
||
|
|
if(el === undefined || el === null || el.length <= 0) return false;
|
||
|
|
|
||
|
|
var id = null;
|
||
|
|
var cls = el.attr('class').split(' ')[1];
|
||
|
|
|
||
|
|
if(el.hasClass('cms_plugin')) {
|
||
|
|
id = cls.replace('cms_plugin-', '');
|
||
|
|
} else if(el.hasClass('cms_draggable')) {
|
||
|
|
id = cls.replace('cms_draggable-', '');
|
||
|
|
} else if(el.hasClass('cms_placeholder')) {
|
||
|
|
id = cls.replace('cms_placeholder-', '');
|
||
|
|
} else if(el.hasClass('cms_dragbar')) {
|
||
|
|
id = cls.replace('cms_dragbar-', '');
|
||
|
|
} else if(el.hasClass('cms_dragarea')) {
|
||
|
|
id = cls.replace('cms_dragarea-', '');
|
||
|
|
}
|
||
|
|
|
||
|
|
return id;
|
||
|
|
},
|
||
|
|
|
||
|
|
getIds: function (els) {
|
||
|
|
var that = this;
|
||
|
|
var array = [];
|
||
|
|
els.each(function () {
|
||
|
|
array.push(that.getId($(this)));
|
||
|
|
});
|
||
|
|
return array;
|
||
|
|
},
|
||
|
|
|
||
|
|
setActive: function (id, state) {
|
||
|
|
var that = this;
|
||
|
|
// resets
|
||
|
|
this.dragitems.removeClass('cms_draggable-selected');
|
||
|
|
this.plugins.removeClass('cms_plugin-active');
|
||
|
|
|
||
|
|
// only reset if no id is provided
|
||
|
|
if(id === false) return false;
|
||
|
|
|
||
|
|
// attach active class to current element
|
||
|
|
var dragitem = $('.cms_draggable-' + id);
|
||
|
|
var plugin = $('.cms_plugin-' + id);
|
||
|
|
|
||
|
|
// if we switch from content to edit, show only a single plcaeholder
|
||
|
|
if(state) {
|
||
|
|
// quick show
|
||
|
|
this._showBoard();
|
||
|
|
|
||
|
|
// show clipboard
|
||
|
|
this.clipboard.show().css('opacity', 0.2);
|
||
|
|
|
||
|
|
// prevent default visibility
|
||
|
|
this.dragareas.css('opacity', 0.2);
|
||
|
|
|
||
|
|
// show single placeholder
|
||
|
|
dragitem.closest('.cms_dragarea').show().css('opacity', 1);
|
||
|
|
|
||
|
|
// otherwise hide and reset the board
|
||
|
|
} else {
|
||
|
|
this.hide();
|
||
|
|
}
|
||
|
|
|
||
|
|
// collapse all previous elements
|
||
|
|
var collapsed = dragitem.parentsUntil('.cms_dragarea').siblings().not('.cms_dragitem-expanded');
|
||
|
|
collapsed.trigger(this.click);
|
||
|
|
|
||
|
|
// set new classes
|
||
|
|
dragitem.addClass('cms_draggable-selected');
|
||
|
|
plugin.addClass('cms_plugin-active');
|
||
|
|
},
|
||
|
|
|
||
|
|
preventEvents: function (elements) {
|
||
|
|
var clicks = 0;
|
||
|
|
var delay = 500;
|
||
|
|
var timer = function () {};
|
||
|
|
|
||
|
|
// unbind click event if already initialized
|
||
|
|
elements.find('a').bind(this.click, function (e) {
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
// increment
|
||
|
|
clicks++;
|
||
|
|
|
||
|
|
// single click
|
||
|
|
if(clicks === 1) {
|
||
|
|
timer = setTimeout(function () {
|
||
|
|
clicks = 0;
|
||
|
|
// cancel if link contains a hash
|
||
|
|
if($(e.currentTarget).attr('href').indexOf('#') === 0) return false;
|
||
|
|
// we need to redirect to the default behaviours
|
||
|
|
// all events will be lost in edit mode, use '#' if href should not be triggered
|
||
|
|
window.location.href = $(e.currentTarget).attr('href');
|
||
|
|
}, delay);
|
||
|
|
}
|
||
|
|
|
||
|
|
// double click
|
||
|
|
if(clicks === 2) {
|
||
|
|
clearTimeout(timer);
|
||
|
|
clicks = 0;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
// private methods
|
||
|
|
_showBoard: function () {
|
||
|
|
var that = this;
|
||
|
|
var timer = function () {};
|
||
|
|
|
||
|
|
// show container
|
||
|
|
this.container.show();
|
||
|
|
this.dimmer.fadeIn(100);
|
||
|
|
this.dragareas.css('opacity', 1);
|
||
|
|
|
||
|
|
// add dimmer close
|
||
|
|
this.dimmer.bind('mousedown mouseup', function (e) {
|
||
|
|
// cancel on rightclick
|
||
|
|
if(e.which === 3 || e.button === 2) return false;
|
||
|
|
// proceed
|
||
|
|
clearTimeout(timer);
|
||
|
|
timer = setTimeout(function () {
|
||
|
|
that.hide();
|
||
|
|
}, 500);
|
||
|
|
|
||
|
|
if(e.type === 'mouseup') clearTimeout(timer);
|
||
|
|
});
|
||
|
|
|
||
|
|
this.plugins.not(this.render_model).hide();
|
||
|
|
this.placeholders.show();
|
||
|
|
|
||
|
|
// attach event
|
||
|
|
$(window).bind('resize.sideframe', function () {
|
||
|
|
that._resizeBoard();
|
||
|
|
}).trigger('resize.sideframe');
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
_hideBoard: function () {
|
||
|
|
// hide elements
|
||
|
|
this.container.hide();
|
||
|
|
this.plugins.show();
|
||
|
|
this.placeholders.hide();
|
||
|
|
this.dimmer.hide();
|
||
|
|
|
||
|
|
// detach event
|
||
|
|
$(window).unbind('resize.sideframe');
|
||
|
|
|
||
|
|
// clear interval
|
||
|
|
clearInterval(this.interval);
|
||
|
|
|
||
|
|
$(window).trigger('structureboard_hidden.sideframe');
|
||
|
|
},
|
||
|
|
|
||
|
|
_resizeBoard: function () {
|
||
|
|
// calculate placeholder position
|
||
|
|
var id = null;
|
||
|
|
var area = null;
|
||
|
|
var min = null;
|
||
|
|
var areaParentOffset = null;
|
||
|
|
|
||
|
|
// start calculating
|
||
|
|
this.placeholders.each(function (index, item) {
|
||
|
|
item = $(item);
|
||
|
|
id = item.data('settings').placeholder_id;
|
||
|
|
area = $('.cms_dragarea-' + id);
|
||
|
|
// to calculate the correct offset, we need to set the
|
||
|
|
// placeholders correct heights and than set the according position
|
||
|
|
item.height(area.outerHeight(true));
|
||
|
|
// set min width
|
||
|
|
min = (item.width()) ? 0 : 150;
|
||
|
|
// as area is "css positioned" and jquery offset function is relative to the
|
||
|
|
// document (not the first relative/absolute parent) we need to substract
|
||
|
|
// first relative/absolute parent offset.
|
||
|
|
areaParentOffset = $(area).offsetParent().offset();
|
||
|
|
area.css({
|
||
|
|
'top': item.offset().top - areaParentOffset.top - 5,
|
||
|
|
'left': item.offset().left - areaParentOffset.left - min,
|
||
|
|
'width': item.width() + min
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
_drag: function () {
|
||
|
|
var that = this;
|
||
|
|
var dropped = false;
|
||
|
|
var droparea = null;
|
||
|
|
var dropzone = null;
|
||
|
|
|
||
|
|
this.sortables.nestedSortable({
|
||
|
|
'items': '.cms_draggable',
|
||
|
|
'handle': '.cms_dragitem',
|
||
|
|
'placeholder': 'cms_droppable',
|
||
|
|
'connectWith': this.sortables,
|
||
|
|
'tolerance': 'pointer',
|
||
|
|
'toleranceElement': '> div',
|
||
|
|
'dropOnEmpty': true,
|
||
|
|
'forcePlaceholderSize': true,
|
||
|
|
'helper': 'clone',
|
||
|
|
'appendTo': 'body',
|
||
|
|
'cursor': 'move',
|
||
|
|
'opacity': 0.4,
|
||
|
|
'zIndex': 9999999,
|
||
|
|
'delay': 100,
|
||
|
|
'refreshPositions': true,
|
||
|
|
// nestedSortable
|
||
|
|
'listType': 'div.cms_draggables',
|
||
|
|
'doNotClear': true,
|
||
|
|
//'disableNestingClass': 'cms_draggable-disabled',
|
||
|
|
//'errorClass': 'cms_draggable-disallowed',
|
||
|
|
//'hoveringClass': 'cms_draggable-hover',
|
||
|
|
// methods
|
||
|
|
'start': function (e, ui) {
|
||
|
|
that.dragging = true;
|
||
|
|
// show empty
|
||
|
|
$('.cms_dragbar-empty-wrapper').show();
|
||
|
|
// ensure all menus are closed
|
||
|
|
$('.cms_dragitem .cms_submenu').hide();
|
||
|
|
// remove classes from empty dropzones
|
||
|
|
$('.cms_dragbar-empty').removeClass('cms_draggable-disallowed');
|
||
|
|
// fixes placeholder height
|
||
|
|
ui.placeholder.height(ui.item.height());
|
||
|
|
// show placeholder without entries
|
||
|
|
$('.cms_draggables').each(function () {
|
||
|
|
if($(this).children().length === 0) {
|
||
|
|
$(this).show();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
'stop': function (event, ui) {
|
||
|
|
that.dragging = false;
|
||
|
|
// hide empty
|
||
|
|
$('.cms_dragbar-empty-wrapper').hide();
|
||
|
|
|
||
|
|
// cancel if isAllowed returns false
|
||
|
|
if(!that.state) return false;
|
||
|
|
|
||
|
|
// handle dropped event
|
||
|
|
if(dropped) {
|
||
|
|
droparea.prepend(ui.item);
|
||
|
|
dropped = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
// we pass the id to the updater which checks within the backend the correct place
|
||
|
|
//var id = ui.item.attr('class').replace('cms_draggable cms_draggable-', '');
|
||
|
|
var id = that.getId(ui.item);
|
||
|
|
var plugin = $('.cms_plugin-' + id);
|
||
|
|
|
||
|
|
// check if we copy/paste a plugin or not
|
||
|
|
if(plugin.closest('.cms_clipboard').length) {
|
||
|
|
plugin.trigger('cms.plugin.update');
|
||
|
|
} else {
|
||
|
|
plugin.trigger('cms.plugins.update');
|
||
|
|
}
|
||
|
|
|
||
|
|
// reset placeholder without entries
|
||
|
|
$('.cms_draggables').each(function () {
|
||
|
|
if($(this).children().length === 0) {
|
||
|
|
$(this).hide();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
'isAllowed': function(placeholder, placeholderParent, originalItem) {
|
||
|
|
// cancel if action is excecuted
|
||
|
|
if(CMS.API.locked) return false;
|
||
|
|
// getting restriction array
|
||
|
|
var bounds = [];
|
||
|
|
// save original state events
|
||
|
|
var original = $('.cms_plugin-' + that.getId(originalItem));
|
||
|
|
// cancel if item has no settings
|
||
|
|
if(original.length === 0 || original.data('settings') === null) return false;
|
||
|
|
var type = original.data('settings').plugin_type;
|
||
|
|
// prepare variables for bound
|
||
|
|
var holderId = that.getId(placeholder.closest('.cms_dragarea'));
|
||
|
|
var holder = $('.cms_placeholder-' + holderId);
|
||
|
|
var plugin = $('.cms_plugin-' + that.getId(placeholder.closest('.cms_draggable')));
|
||
|
|
|
||
|
|
// now set the correct bounds
|
||
|
|
if(holder.length) bounds = holder.data('settings').plugin_restriction;
|
||
|
|
if(plugin.length) bounds = plugin.data('settings').plugin_restriction;
|
||
|
|
if(dropzone) bounds = dropzone.data('settings').plugin_restriction;
|
||
|
|
|
||
|
|
// if parent has class disabled, dissalow drop
|
||
|
|
if(placeholder.parent().hasClass('cms_draggable-disabled')) return false;
|
||
|
|
|
||
|
|
// if restrictions is still empty, proceed
|
||
|
|
that.state = (bounds.length <= 0 || $.inArray(type, bounds) !== -1) ? true : false;
|
||
|
|
|
||
|
|
return that.state;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// attach escape event to cancel dragging
|
||
|
|
$(document).bind('keyup.cms', function(e, cancel){
|
||
|
|
if(e.keyCode === 27 || cancel) {
|
||
|
|
that.state = false;
|
||
|
|
that.sortables.sortable('cancel');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// define droppable helpers
|
||
|
|
this.dropareas.droppable({
|
||
|
|
'greedy': true,
|
||
|
|
'accept': '.cms_draggable',
|
||
|
|
'tolerance': 'pointer',
|
||
|
|
'activeClass': 'cms_draggable-allowed',
|
||
|
|
'hoverClass': 'cms_draggable-hover-allowed',
|
||
|
|
'over': function (event) {
|
||
|
|
dropzone = $('.cms_placeholder-' + that.getId($(event.target).parent().prev()));
|
||
|
|
timer = setInterval(function () {
|
||
|
|
// reset other empty placeholders
|
||
|
|
$('.cms_dragbar-empty').removeClass('cms_draggable-disallowed');
|
||
|
|
if(that.state) {
|
||
|
|
$(event.target).removeClass('cms_draggable-disallowed');
|
||
|
|
} else {
|
||
|
|
$(event.target).addClass('cms_draggable-disallowed');
|
||
|
|
}
|
||
|
|
}, 10);
|
||
|
|
},
|
||
|
|
'out': function (event) {
|
||
|
|
dropzone = null;
|
||
|
|
$(event.target).removeClass('cms_draggable-disallowed');
|
||
|
|
clearInterval(timer);
|
||
|
|
},
|
||
|
|
'drop': function (event) {
|
||
|
|
dropped = true;
|
||
|
|
droparea = $(event.target).parent().nextAll('.cms_draggables').first();
|
||
|
|
clearInterval(timer);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
})(CMS.$);
|