638 lines
18 KiB
JavaScript
638 lines
18 KiB
JavaScript
/*##################################################|*/
|
|
/* #CMS# */
|
|
(function($) {
|
|
// CMS.$ will be passed for $
|
|
$(document).ready(function () {
|
|
/*!
|
|
* Modal
|
|
* Controls a cms specific modal
|
|
*/
|
|
CMS.Modal = new CMS.Class({
|
|
|
|
implement: [CMS.API.Helpers],
|
|
|
|
options: {
|
|
'onClose': false,
|
|
'minHeight': 400,
|
|
'minWidth': 800,
|
|
'modalDuration': 300,
|
|
'newPlugin': false,
|
|
'urls': {
|
|
'css_modal': 'cms/css/cms.toolbar.modal.css'
|
|
}
|
|
},
|
|
|
|
initialize: function (options) {
|
|
this.options = $.extend(true, {}, this.options, options);
|
|
this.config = CMS.config;
|
|
|
|
// elements
|
|
this.body = $('html');
|
|
this.modal = $('.cms_modal');
|
|
this.toolbar = $('.cms_toolbar');
|
|
|
|
// states
|
|
this.click = (document.ontouchstart !== null) ? 'click.cms' : 'touchend.cms click.cms';
|
|
this.maximized = false;
|
|
this.minimized = false;
|
|
this.triggerMaximized = false;
|
|
this.saved = false;
|
|
|
|
// if the modal is initialized the first time, set the events
|
|
if(!this.modal.data('ready')) this._events();
|
|
|
|
// ready modal
|
|
this.modal.data('ready', true);
|
|
},
|
|
|
|
// initial methods
|
|
_events: function () {
|
|
var that = this;
|
|
|
|
// attach events to window
|
|
this.modal.find('.cms_modal-collapse').bind(this.click, function (e) {
|
|
e.preventDefault();
|
|
that._minimize();
|
|
});
|
|
this.modal.find('.cms_modal-title').bind('mousedown.cms', function (e) {
|
|
e.preventDefault();
|
|
that._startMove(e);
|
|
});
|
|
this.modal.find('.cms_modal-title').bind('dblclick.cms', function () {
|
|
that._maximize();
|
|
});
|
|
this.modal.find('.cms_modal-resize').bind('mousedown.cms', function (e) {
|
|
e.preventDefault();
|
|
that._startResize(e);
|
|
});
|
|
this.modal.find('.cms_modal-maximize').bind(this.click, function (e) {
|
|
e.preventDefault();
|
|
that._maximize();
|
|
});
|
|
this.modal.find('.cms_modal-breadcrumb-items').on(this.click, 'a', function (e) {
|
|
e.preventDefault();
|
|
that._changeContent($(this));
|
|
});
|
|
this.modal.find('.cms_modal-close, .cms_modal-cancel').bind(this.click, function (e) {
|
|
that.options.onClose = null;
|
|
e.preventDefault();
|
|
that.close();
|
|
});
|
|
|
|
// stopper events
|
|
$(document).bind('mouseup.cms', function (e) {
|
|
that._endMove(e);
|
|
that._endResize(e);
|
|
});
|
|
},
|
|
|
|
// public methods
|
|
open: function (url, name, breadcrumb) {
|
|
// cancel if another lightbox is already being opened
|
|
if(CMS.API.locked) {
|
|
CMS.API.locked = false;
|
|
return false
|
|
} else {
|
|
CMS.API.locked = true;
|
|
}
|
|
|
|
// because a new instance is called, we have to ensure minimized state is removed #3620
|
|
if(this.modal.is(':visible') && this.modal.find('.cms_modal-collapsed').length) {
|
|
this.minimized = true;
|
|
this._minimize();
|
|
}
|
|
|
|
// show loader
|
|
CMS.API.Toolbar._loader(true);
|
|
|
|
// hide tooltip
|
|
this.hideTooltip();
|
|
|
|
// reset breadcrumb
|
|
this.modal.find('.cms_modal-breadcrumb').hide();
|
|
this.modal.find('.cms_modal-breadcrumb-items').html('');
|
|
|
|
// empty buttons
|
|
this.modal.find('.cms_modal-buttons').html('');
|
|
|
|
var contents = this.modal.find('.cms_modal-body, .cms_modal-foot');
|
|
contents.show();
|
|
|
|
this._loadContent(url, name);
|
|
|
|
// insure modal is not maximized
|
|
if(this.modal.find('.cms_modal-collapsed').length) this._minimize();
|
|
|
|
// reset styles
|
|
this.modal.css({
|
|
'left': '50%',
|
|
'top': '50%',
|
|
'mergin-left': 0,
|
|
'margin-right': 0
|
|
});
|
|
// lets set the modal width and height to the size of the browser
|
|
var widthOffset = 300; // adds margin left and right
|
|
var heightOffset = 350; // adds margin top and bottom;
|
|
var screenWidth = $(window).width(); // it has to be the height of the window not computer screen
|
|
var screenHeight = $(window).height(); // it has to be the height of the window and not computer screen
|
|
|
|
var width = (screenWidth >= this.options.minWidth + widthOffset) ? screenWidth - widthOffset : this.options.minWidth;
|
|
var height = (screenHeight >= this.options.minHeight + heightOffset) ? screenHeight - heightOffset : this.options.minHeight;
|
|
this.modal.find('.cms_modal-body').css({
|
|
'width': width,
|
|
'height': height
|
|
});
|
|
this.modal.find('.cms_modal-body').removeClass('cms_loader');
|
|
this.modal.find('.cms_modal-maximize').removeClass('cms_modal-maximize-active');
|
|
this.maximized = false;
|
|
// in case, the window is larger than the windows height, we trigger fullscreen mode
|
|
if(height >= screenHeight) this.triggerMaximized = true;
|
|
|
|
// we need to render the breadcrumb
|
|
this._setBreadcrumb(breadcrumb);
|
|
|
|
// display modal
|
|
this._show(this.options.modalDuration);
|
|
},
|
|
|
|
close: function () {
|
|
var that = this;
|
|
// handle remove option when plugin is new
|
|
if(this.options.newPlugin) {
|
|
var data = this.options.newPlugin;
|
|
var post = '{ "csrfmiddlewaretoken": "' + this.config.csrf + '" }';
|
|
var text = this.config.lang.confirm;
|
|
|
|
// trigger an ajax request
|
|
CMS.API.Toolbar.openAjax(data['delete'], post, text, function () {
|
|
that._hide(100);
|
|
});
|
|
} else {
|
|
this._hide(100);
|
|
}
|
|
|
|
// handle refresh option
|
|
if(this.options.onClose) this.reloadBrowser(this.options.onClose, false, true);
|
|
|
|
// reset maximize or minimize states for #3111
|
|
setTimeout(function () {
|
|
if(that.minimized) { that._minimize(); }
|
|
if(that.maximized) { that._maximize(); }
|
|
}, 300);
|
|
},
|
|
|
|
// private methods
|
|
_show: function (speed) {
|
|
// we need to position the modal in the center
|
|
var that = this;
|
|
var width = this.modal.width();
|
|
var height = this.modal.height();
|
|
|
|
// animates and sets the modal
|
|
this.modal.show().css({
|
|
'width': 0,
|
|
'height': 0,
|
|
'margin-left': 0,
|
|
'margin-top': 0
|
|
}).stop(true, true).animate({
|
|
'width': width,
|
|
'height': height,
|
|
'margin-left': -(width / 2),
|
|
'margin-top': -(height / 2)
|
|
}, speed, function () {
|
|
$(this).removeAttr('style');
|
|
|
|
that.modal.css({
|
|
'margin-left': -(width / 2),
|
|
'margin-top': -(height / 2)
|
|
});
|
|
|
|
// fade in modal window
|
|
that.modal.show();
|
|
|
|
// hide loader
|
|
CMS.API.Toolbar._loader(false);
|
|
|
|
// check if we should maximize
|
|
if(that.triggerMaximized) that._maximize();
|
|
|
|
// changed locked status to allow other modals again
|
|
CMS.API.locked = false;
|
|
});
|
|
|
|
// add esc close event
|
|
$(document).bind('keydown.cms', function (e) {
|
|
if(e.keyCode === 27) that.close();
|
|
});
|
|
|
|
// set focus to modal
|
|
this.modal.focus();
|
|
},
|
|
|
|
_hide: function (speed) {
|
|
this.modal.fadeOut(speed);
|
|
this.modal.find('.cms_modal-frame iframe').remove();
|
|
this.modal.find('.cms_modal-body').removeClass('cms_loader');
|
|
},
|
|
|
|
_minimize: function () {
|
|
var trigger = this.modal.find('.cms_modal-collapse');
|
|
var maximize = this.modal.find('.cms_modal-maximize');
|
|
var contents = this.modal.find('.cms_modal-body, .cms_modal-foot');
|
|
var title = this.modal.find('.cms_modal-title');
|
|
|
|
// cancel action if maximized
|
|
if(this.maximized) return false;
|
|
|
|
if(this.minimized === false) {
|
|
// ensure toolbar is shown
|
|
CMS.API.Toolbar.toggleToolbar(true);
|
|
|
|
// minimize
|
|
trigger.addClass('cms_modal-collapsed');
|
|
contents.hide();
|
|
|
|
// save initial state
|
|
this.modal.data('css', {
|
|
'left': this.modal.css('left'),
|
|
'top': this.modal.css('top'),
|
|
'margin': this.modal.css('margin')
|
|
});
|
|
|
|
this.modal.css({
|
|
'left': this.toolbar.find('.cms_toolbar-left').outerWidth(true) + 50,
|
|
'top': (this.config.debug) ? 6 : 1,
|
|
'margin': 0
|
|
});
|
|
|
|
// enable scrolling
|
|
this.body.css('overflow', '');
|
|
|
|
// ensure maximize element is hidden #3111
|
|
maximize.hide();
|
|
// set correct cursor when maximized #3111
|
|
title.css('cursor', 'default');
|
|
|
|
this.minimized = true;
|
|
} else {
|
|
// minimize
|
|
trigger.removeClass('cms_modal-collapsed');
|
|
contents.show();
|
|
|
|
// reattach css
|
|
this.modal.css(this.modal.data('css'));
|
|
|
|
// disable scrolling
|
|
this.body.css('overflow', 'hidden');
|
|
|
|
// ensure maximize element is shown #3111
|
|
maximize.show();
|
|
// set correct cursor when maximized #3111
|
|
title.css('cursor', 'move');
|
|
|
|
this.minimized = false;
|
|
}
|
|
},
|
|
|
|
_maximize: function () {
|
|
var debug = (this.config.debug) ? 5 : 0;
|
|
var container = this.modal.find('.cms_modal-body');
|
|
var minimize = this.modal.find('.cms_modal-collapse');
|
|
var trigger = this.modal.find('.cms_modal-maximize');
|
|
var title = this.modal.find('.cms_modal-title');
|
|
|
|
// cancel action when minimized
|
|
if(this.minimized) return false;
|
|
|
|
if(this.maximized === false) {
|
|
// maximize
|
|
this.maximized = true;
|
|
trigger.addClass('cms_modal-maximize-active');
|
|
|
|
this.modal.data('css', {
|
|
'left': this.modal.css('left'),
|
|
'top': this.modal.css('top'),
|
|
'margin-left': this.modal.css('margin-left'),
|
|
'margin-top': this.modal.css('margin-top')
|
|
});
|
|
container.data('css', {
|
|
'width': container.width(),
|
|
'height': container.height()
|
|
});
|
|
|
|
// reset
|
|
this.modal.css({
|
|
'left': 0,
|
|
'top': debug,
|
|
'margin': 0
|
|
});
|
|
// bind resize event
|
|
$(window).bind('resize.cms.modal', function () {
|
|
container.css({
|
|
'width': $(window).width(),
|
|
'height': $(window).height() - 60 - debug
|
|
});
|
|
});
|
|
$(window).trigger('resize.cms.modal');
|
|
|
|
// ensure maximize element is hidden #3111
|
|
minimize.hide();
|
|
// set correct cursor when maximized #3111
|
|
title.css('cursor', 'default');
|
|
} else {
|
|
// minimize
|
|
this.maximized = false;
|
|
trigger.removeClass('cms_modal-maximize-active');
|
|
|
|
$(window).unbind('resize.cms.modal');
|
|
|
|
// reattach css
|
|
this.modal.css(this.modal.data('css'));
|
|
container.css(container.data('css'));
|
|
|
|
// ensure maximize element is shown #3111
|
|
minimize.show();
|
|
// set correct cursor when maximized #3111
|
|
title.css('cursor', 'move');
|
|
}
|
|
},
|
|
|
|
_startMove: function (initial) {
|
|
// cancel if maximized
|
|
if(this.maximized) return false;
|
|
// cancel action when minimized
|
|
if(this.minimized) return false;
|
|
|
|
var that = this;
|
|
var position = that.modal.position();
|
|
|
|
this.modal.find('.cms_modal-shim').show();
|
|
|
|
$(document).bind('mousemove.cms', function (e) {
|
|
var left = position.left - (initial.pageX - e.pageX);
|
|
var top = position.top - (initial.pageY - e.pageY);
|
|
|
|
that.modal.css({
|
|
'left': left,
|
|
'top': top
|
|
});
|
|
});
|
|
},
|
|
|
|
_endMove: function () {
|
|
this.modal.find('.cms_modal-shim').hide();
|
|
|
|
$(document).unbind('mousemove.cms');
|
|
},
|
|
|
|
_startResize: function (initial) {
|
|
// cancel if in fullscreen
|
|
if(this.maximized) return false;
|
|
// continue
|
|
var that = this;
|
|
var container = this.modal.find('.cms_modal-body');
|
|
var width = container.width();
|
|
var height = container.height();
|
|
var modalLeft = this.modal.position().left;
|
|
var modalTop = this.modal.position().top;
|
|
|
|
this.modal.find('.cms_modal-shim').show();
|
|
|
|
$(document).bind('mousemove.cms', function (e) {
|
|
var mvX = initial.pageX - e.pageX;
|
|
var mvY = initial.pageY - e.pageY;
|
|
|
|
var w = width - (mvX * 2);
|
|
var h = height - (mvY * 2);
|
|
var max = 680;
|
|
|
|
// add some limits
|
|
if(w <= max || h <= 100) return false;
|
|
|
|
// set centered animation
|
|
container.css({
|
|
'width': width - (mvX * 2),
|
|
'height': height - (mvY * 2)
|
|
});
|
|
that.modal.css({
|
|
'left': modalLeft + mvX,
|
|
'top': modalTop + mvY
|
|
});
|
|
});
|
|
},
|
|
|
|
_endResize: function () {
|
|
this.modal.find('.cms_modal-shim').hide();
|
|
|
|
$(document).unbind('mousemove.cms');
|
|
},
|
|
|
|
_setBreadcrumb: function (breadcrumb) {
|
|
var bread = this.modal.find('.cms_modal-breadcrumb');
|
|
var crumb = '';
|
|
|
|
// cancel if there is no breadcrumb)
|
|
if(!breadcrumb || breadcrumb.length <= 0) return false;
|
|
if(!breadcrumb[0].title) return false;
|
|
|
|
// load breadcrumb
|
|
$.each(breadcrumb, function (index, item) {
|
|
// check if the item is the last one
|
|
var last = (index >= breadcrumb.length - 1) ? 'cms_modal-breadcrumb-last' : '';
|
|
// render breadcrumb
|
|
crumb += '<a href="' + item.url + '" class="' + last + '"><span>' + item.title + '</span></a>';
|
|
});
|
|
|
|
// attach elements
|
|
bread.find('.cms_modal-breadcrumb-items').html(crumb);
|
|
|
|
// show breadcrumb
|
|
bread.show();
|
|
},
|
|
|
|
_setButtons: function (iframe) {
|
|
var djangoSuit = iframe.contents().find('.suit-columns').length > 0;
|
|
var that = this;
|
|
var row;
|
|
if (!djangoSuit) {
|
|
row = iframe.contents().find('.submit-row:eq(0)');
|
|
} else {
|
|
row = iframe.contents().find('.save-box:eq(0)');
|
|
}
|
|
// hide all submit-rows
|
|
iframe.contents().find('.submit-row').hide();
|
|
var buttons = row.find('input, a, button');
|
|
var render = $('<span />'); // seriously jquery...
|
|
|
|
// if there are no given buttons within the submit-row area
|
|
// scan deeper within the form itself
|
|
if(!buttons.length) {
|
|
row = iframe.contents().find('body:not(.change-list) #content form:eq(0)');
|
|
buttons = row.find('input[type="submit"], button[type="submit"]');
|
|
buttons.addClass('deletelink')
|
|
.hide();
|
|
}
|
|
// attach relation id
|
|
buttons.each(function (index, item) {
|
|
$(item).attr('data-rel', '_' + index);
|
|
});
|
|
|
|
// loop over input buttons
|
|
buttons.each(function (index, item) {
|
|
item = $(item);
|
|
|
|
// cancel if item is a hidden input
|
|
if(item.attr('type') === 'hidden') return false;
|
|
|
|
// create helper variables
|
|
var title = item.attr('value') || item.text();
|
|
var cls = 'cms_btn';
|
|
|
|
// set additional special css classes
|
|
if(item.hasClass('default')) cls = 'cms_btn cms_btn-action';
|
|
if(item.hasClass('deletelink')) cls = 'cms_btn cms_btn-caution';
|
|
|
|
// create the element and attach events
|
|
var el = $('<div class="'+cls+' '+item.attr('class')+'">'+title+'</div>');
|
|
el.bind(that.click, function () {
|
|
if(item.is('input') || item.is('button')) item[0].click();
|
|
if(item.is('a')) that._loadContent(item.prop('href'), title);
|
|
|
|
// trigger only when blue action buttons are triggered
|
|
if(item.hasClass('default') || item.hasClass('deletelink')) {
|
|
that.options.newPlugin = null;
|
|
// reset onClose when delete is triggered
|
|
if(item.hasClass('deletelink')) that.options.onClose = null;
|
|
// hide iframe
|
|
that.modal.find('.cms_modal-frame iframe').hide();
|
|
// page has been saved or deleted, run checkup
|
|
that.saved = true;
|
|
}
|
|
});
|
|
|
|
// append element
|
|
render.append(el);
|
|
});
|
|
|
|
// manually add cancel button at the end
|
|
var cancel = $('<div class="cms_btn">'+that.config.lang.cancel+'</div>');
|
|
cancel.bind(that.click, function () {
|
|
that.options.onClose = false;
|
|
that.close();
|
|
});
|
|
render.append(cancel);
|
|
|
|
// render buttons
|
|
this.modal.find('.cms_modal-buttons').html(render);
|
|
},
|
|
|
|
_loadContent: function (url, name) {
|
|
var that = this;
|
|
|
|
// FIXME: A better fix is needed for '&' being interpreted as the
|
|
// start of en entity by jQuery. See #3404
|
|
url = url.replace('&', '&');
|
|
// now refresh the content
|
|
var iframe = $('<iframe src="'+url+'" class="" frameborder="0" />');
|
|
iframe.css('visibility', 'hidden');
|
|
var holder = this.modal.find('.cms_modal-frame');
|
|
|
|
// set correct title
|
|
var title = this.modal.find('.cms_modal-title');
|
|
title.html(name || ' ');
|
|
|
|
// ensure previous iframe is hidden
|
|
holder.find('iframe').css('visibility', 'hidden');
|
|
|
|
// attach load event for iframe to prevent flicker effects
|
|
iframe.bind('load', function () {
|
|
// check if iframe can be accessed
|
|
try {
|
|
iframe.contents();
|
|
} catch (error) {
|
|
CMS.API.Toolbar.showError('<strong>' + error + '</strong>');
|
|
that.close();
|
|
}
|
|
|
|
// show messages in toolbar if provided
|
|
var messages = iframe.contents().find('.messagelist li');
|
|
if(messages.length) CMS.API.Toolbar.openMessage(messages.eq(0).text());
|
|
messages.remove();
|
|
var contents = iframe.contents();
|
|
|
|
// determine if we should close the modal or reload
|
|
if(messages.length && that.enforceReload) that.reloadBrowser();
|
|
if(messages.length && that.enforceClose) {
|
|
that.close();
|
|
return false;
|
|
}
|
|
|
|
// after iframe is loaded append css
|
|
contents.find('head').append($('<link rel="stylesheet" type="text/css" href="' + that.config.urls.static + that.options.urls.css_modal + '" />'));
|
|
|
|
// adding django hacks
|
|
contents.find('.viewsitelink').attr('target', '_top');
|
|
|
|
// set modal buttons
|
|
that._setButtons($(this));
|
|
|
|
// when an error occurs, reset the saved status so the form can be checked and validated again
|
|
if(iframe.contents().find('.errornote').length || iframe.contents().find('.errorlist').length) {
|
|
that.saved = false;
|
|
}
|
|
|
|
// when the window has been changed pressing the blue or red button, we need to run a reload check
|
|
// also check that no delete-confirmation is required
|
|
if(that.saved && !contents.find('.delete-confirmation').length) {
|
|
that.reloadBrowser(window.location.href, false, true);
|
|
} else {
|
|
iframe.show();
|
|
// set title of not provided
|
|
var innerTitle = iframe.contents().find('#content h1:eq(0)');
|
|
if(name === undefined) title.html(innerTitle.text());
|
|
innerTitle.remove();
|
|
|
|
// than show
|
|
iframe.css('visibility', 'visible');
|
|
|
|
// append ready state
|
|
iframe.data('ready', true);
|
|
|
|
// attach close event
|
|
contents.find('body').bind('keydown.cms', function (e) {
|
|
if(e.keyCode === 27) that.close();
|
|
});
|
|
contents.find('body').addClass('cms_modal-window');
|
|
|
|
// figure out if .object-tools is available
|
|
if(contents.find('.object-tools').length) {
|
|
contents.find('#content').css('padding-top', 38);
|
|
}
|
|
}
|
|
});
|
|
|
|
// inject
|
|
setTimeout(function () {
|
|
that.modal.find('.cms_modal-body').addClass('cms_loader');
|
|
holder.html(iframe);
|
|
}, this.options.modalDuration);
|
|
},
|
|
|
|
_changeContent: function (el) {
|
|
if(el.hasClass('cms_modal-breadcrumb-last')) return false;
|
|
|
|
var parents = el.parent().find('a');
|
|
parents.removeClass('cms_modal-breadcrumb-last');
|
|
|
|
el.addClass('cms_modal-breadcrumb-last');
|
|
|
|
this._loadContent(el.attr('href'));
|
|
|
|
// update title
|
|
this.modal.find('.cms_modal-title').text(el.text());
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
})(CMS.$);
|