new static files.
Signed-off-by: rscnt <rascnt@gmail.com>
This commit is contained in:
parent
83e792bcaa
commit
fe4f6c97d5
778 changed files with 71557 additions and 0 deletions
493
static/cms/js/modules/cms.structureboard.js
Normal file
493
static/cms/js/modules/cms.structureboard.js
Normal file
|
|
@ -0,0 +1,493 @@
|
|||
/*##################################################|*/
|
||||
/* #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.$);
|
||||
Loading…
Add table
Add a link
Reference in a new issue