Merge pull request django-cms#2065 from FinalAngel/feature/fixes

Visual Debug Information

Author: Angelo Dini

cms/static/cms/css/plugins/cms.toolbar.css

@@ -136,6 +136,7 @@ $(document).ready(function () {
 				'cursor': 'move',
 				'opacity': 0.4,
 				'zIndex': 999999,
+				'delay': 150,
 				// nestedSortable
 				'listType': 'div.cms_draggables',
 				'doNotClear': true,
@@ -350,7 +351,8 @@ $(document).ready(function () {
 				'add_plugin': '',
 				'edit_plugin': '',
 				'move_plugin': '',
-				'copy_plugin': ''
+				'copy_plugin': '',
+				'cut_plugin': ''
 			}
 		},
 
@@ -557,7 +559,7 @@ $(document).ready(function () {
 			$('.cms_btn-publish').addClass('cms_btn-publish-active').parent().show();
 		},
 
-		copyPlugin: function () {
+		copyPlugin: function (cut) {
 			var that = this;
 			var data = {
 				'source_placeholder_id': this.options.placeholder_id,
@@ -568,9 +570,12 @@ $(document).ready(function () {
 				'csrfmiddlewaretoken': this.csrf
 			};
 
+			// determine if we are using copy or cut
+			var url = (cut) ? this.options.urls.cut_plugin : this.options.urls.copy_plugin;
+
 			$.ajax({
 				'type': 'POST',
-				'url': this.options.urls.copy_plugin,
+				'url': url,
 				'data': data,
 				'success': function () {
 					// refresh browser after success
@@ -749,7 +754,7 @@ $(document).ready(function () {
 		},
 
 		_delegate: function (el) {
-			return CMS.API.Toolbar.delegate(el);
+			return CMS.API.Toolbar._delegate(el);
 		}
 
 	});

cms/static/cms/css/plugins/cms.toolbar.sideframe.css

@@ -31,12 +31,8 @@ $(document).ready(function () {
 				'css_modal': 'cms/css/plugins/cms.toolbar.modal.css',
 				'css_sideframe': 'cms/css/plugins/cms.toolbar.sideframe.css'
 			},
-			'lang': {
-				'confirm': 'Yes',
-				'cancel': 'Cancel'
-			},
 			'settings': {
-				'version': '3.0.beta1', // this is required to flush storage on new releases
+				'version': '3.0.0', // this is required to flush storage on new releases
 				'toolbar': 'expanded', // expanded or collapsed
 				'mode': 'edit', // live, draft, edit or layout
 				'states': [],
@@ -53,7 +49,6 @@ $(document).ready(function () {
 			this.container = $(container);
 			this.options = $.extend(true, {}, this.options, options);
 			this.settings = this.getSettings() || this.setSettings(this.options.settings);
-
 			// class variables
 			this.toolbar = this.container.find('.cms_toolbar');
 			this.toolbar.hide();
@@ -111,11 +106,14 @@ $(document).ready(function () {
 
 			// add toolbar ready class to body
 			$('body').addClass('cms_toolbar-ready');
+
+			// check if debug is true
+			if(this.options.debug) this._debug();
 		},
 
 		_load: function () {
 			// reset some settings if not authenticated
-			if(!this.options.authenticated) this.reset();
+			if(!this.options.authenticated) this._reset();
 			// check if we should show the sideframe
 			if(this.settings.sideframe.url) {
 				this.openSideframe(this.settings.sideframe.url, false);
@@ -128,7 +126,7 @@ $(document).ready(function () {
 			// attach event to the trigger handler
 			this.toolbarTrigger.bind('click', function (e) {
 				e.preventDefault();
-				that.toggleToolbar(200);
+				that.toggleToolbar();
 			});
 
 			// attach event to the navigation elements
@@ -137,15 +135,15 @@ $(document).ready(function () {
 				// attach delegate event
 				item.find('li ul a').bind('click', function (e) {
 					e.preventDefault();
-					if(!$(this).parent().hasClass('cms_toolbar-item-navigation-disabled')) that.delegate($(this));
+					if(!$(this).parent().hasClass('cms_toolbar-item-navigation-disabled')) that._delegate($(this));
 				});
 				// remove events from first level
 				item.find('> li > a').bind('click', function (e) {
 					e.preventDefault();
 					if($(this).attr('href') !== ''
 						&& $(this).attr('href') !== '#'
 						&& !$(this).parent().hasClass('cms_toolbar-item-navigation-disabled')
-						&& !$(this).parent().hasClass('cms_toolbar-item-navigation-disabled')) that.delegate($(this));
+						&& !$(this).parent().hasClass('cms_toolbar-item-navigation-disabled')) that._delegate($(this));
 				});
 
 				// handle states
@@ -275,13 +273,17 @@ $(document).ready(function () {
 		},
 
 		// public methods
-		toggleToolbar: function (speed) {
-			(this.settings.toolbar === 'collapsed') ? this._showToolbar(speed) : this._hideToolbar(speed);
+		toggleToolbar: function (show) {
+			// overwrite state when provided
+			if(show) this.settings.toolbar = 'collapsed';
+			// toggle bar
+			(this.settings.toolbar === 'collapsed') ? this._showToolbar(200) : this._hideToolbar(200);
 		},
 
 		setSettings: function (settings) {
 			// cancel if local storage is not available
 			if(!window.localStorage) return false;
+
 			// set settings
 			settings = $.extend(true, {}, this.settings, settings);
 			// save inside local storage
@@ -301,47 +303,15 @@ $(document).ready(function () {
 		resetSettings: function () {
 			// cancel if local storage is not available
 			if(!window.localStorage) return false;
+
 			// reset settings
-			localStorage.removeItem('cms_cookie');
-			this.setSettings(this.options.settings);
+			window.localStorage.removeItem('cms_cookie');
+			this.settings = this.setSettings(this.options.settings);
+
 			// enforce reload to apply changes
 			CMS.API.Helpers.reloadBrowser();
 		},
 
-		delegate: function (el) {
-			// save local vars
-			var target = el.attr('data-rel');
-
-			// reset states
-			this.reset();
-
-			switch(target) {
-				case 'modal':
-					this.openModal(el.attr('href'), el.attr('data-name'));
-					break;
-				case 'message':
-					this.openMessage(el.attr('data-text'));
-					break;
-				case 'sideframe':
-					this.openSideframe(el.attr('href'), true);
-					break;
-				case 'ajax':
-					this.openAjax(el.attr('href'), el.attr('data-post'), el.attr('data-text'));
-					break;
-				default:
-					window.location.href = el.attr('href');
-			}
-		},
-
-		reset: function () {
-			// reset sideframe settings
-			this.settings.sideframe = {
-				'url': null,
-				'hidden': false,
-				'maximized': this.settings.sideframe.maximized // we need to keep the default value
-			};
-		},
-
 		openSideframe: function (url, animate) {
 			// prepare iframe
 			var that = this;
@@ -366,6 +336,9 @@ $(document).ready(function () {
 					that.enforceReload = false;
 				}
 
+				// add debug infos
+				if(that.options.debug) iframe.contents().find('body').addClass('cms_debug');
+
 				// save url in settings
 				that.settings.sideframe.url = iframe.get(0).contentWindow.location.href;
 				that.setSettings();
@@ -429,6 +402,9 @@ $(document).ready(function () {
 			// set top to 0 if toolbar is collapsed
 			if(this.settings.toolbar === 'collapsed') top = 0;
 
+			// do we need to add debug styles?
+			if(this.options.debug) top = top + 5;
+
 			// set correct position and show
 			this.messages.css('top', -height).show();
 
@@ -538,7 +514,7 @@ $(document).ready(function () {
 				'type': 'POST',
 				'url': url,
 				'data': (post) ? JSON.parse(post) : {},
-				'success': function (data) {
+				'success': function () {
 					CMS.API.Helpers.reloadBrowser();
 				},
 				'error': function (jqXHR) {
@@ -574,6 +550,10 @@ $(document).ready(function () {
 			if(bound - pos <= 0) $(window).scrollTop(pos - offset);
 		},
 
+		showError: function (msg) {
+			this.openMessage(msg, 'center', this.options.messageDelay, true);
+		},
+
 		// private methods
 		_showToolbar: function (speed, init) {
 			this.toolbarTrigger.addClass('cms_toolbar-trigger-expanded');
@@ -678,6 +658,40 @@ $(document).ready(function () {
 			}, duration);
 		},
 
+		_delegate: function (el) {
+			// save local vars
+			var target = el.attr('data-rel');
+
+			// reset states
+			this._reset();
+
+			switch(target) {
+				case 'modal':
+					this.openModal(el.attr('href'), el.attr('data-name'));
+					break;
+				case 'message':
+					this.openMessage(el.attr('data-text'));
+					break;
+				case 'sideframe':
+					this.openSideframe(el.attr('href'), true);
+					break;
+				case 'ajax':
+					this.openAjax(el.attr('href'), el.attr('data-post'), el.attr('data-text'));
+					break;
+				default:
+					window.location.href = el.attr('href');
+			}
+		},
+
+		_reset: function () {
+			// reset sideframe settings
+			this.settings.sideframe = {
+				'url': null,
+				'hidden': false,
+				'maximized': this.settings.sideframe.maximized // we need to keep the default value
+			};
+		},
+
 		_showSideframe: function (width, animate) {
 			// add class
 			this.sideframe.find('.cms_sideframe-hide').removeClass('cms_sideframe-hidden');
@@ -832,7 +846,7 @@ $(document).ready(function () {
 
 				this.modal.css({
 					'left': this.toolbar.find('.cms_toolbar-left').outerWidth(true) + 50,
-					'top': 1,
+					'top': (this.options.debug) ? 6 : 1,
 					'margin': 0
 				});
 
@@ -850,6 +864,7 @@ $(document).ready(function () {
 		},
 
 		_maximizeModal: function () {
+			var debug = (this.options.debug) ? 5 : 0;
 			var container = this.modal.find('.cms_modal-body');
 			var trigger = this.modal.find('.cms_modal-maximize');
 			var btnCk = this.modal.find('iframe').contents().find('.cke_button__maximize');
@@ -875,14 +890,14 @@ $(document).ready(function () {
 				// reset
 				this.modal.css({
 					'left': 0,
-					'top': 0,
+					'top': debug,
 					'margin': 0
 				});
 				// bind resize event
 				$(window).bind('resize.cms.modal', function () {
 					container.css({
 						'width': $(window).width(),
-						'height': $(window).height() - 60
+						'height': $(window).height() - 60 - debug
 					});
 				});
 				$(window).trigger('resize.cms.modal');
@@ -1141,8 +1156,25 @@ $(document).ready(function () {
 			this.modal.find('.cms_modal-title').text(el.text());
 		},
 
-		showError: function (msg) {
-			this.openMessage(msg, 'center', this.options.messageDelay, true);
+		_debug: function () {
+			var that = this;
+			var timeout = 1000;
+			var timer = function () {};
+
+			// add top margin
+			$('html').css('margin-top', 5);
+
+			// bind message event
+			var debug = this.container.find('.cms_debug-bar');
+				debug.bind('mouseenter mouseleave', function (e) {
+					clearTimeout(timer);
+
+					if(e.type === 'mouseenter') {
+						timer = setTimeout(function () {
+							that.openMessage(that.options.lang.debug);
+						}, timeout);
+					}
+				});
 		}
 
 	});

cms/static/cms/img/toolbar/sprite_toolbar.png

@@ -23,7 +23,18 @@
 //######################################################################################################################
 // #TOOLBAR#
 
-#cms_toolbar { position:absolute; left:0; top:0; z-index:9999999; width:100%; }
+// debug mode
+.cms_toolbar-debug {
+	.cms_toolbar { top:5px !important; }
+	.cms_toolbar-trigger { top:5px !important; }
+
+	.cms_debug-bar { position:fixed; left:0; top:0; z-index:99999999; width:100%; height:4px;
+		border-bottom:1px solid #ddd; background:#fdffc8 url('../../img/toolbar/sprite_toolbar.png') repeat-x left -444px; }
+}
+.cms_toolbar-debug #container { padding-top:35px !important; }
+
+// toolbar
+#cms_toolbar { position:absolute; left:0; top:5px; z-index:9999999; width:100%; }
 #cms_toolbar {
 	.cms_toolbar { display:none; position:fixed; left:0; top:0; z-index:999999; width:100%; min-width:320px; height:30px;
 		border-bottom:1px solid $color-grey !important; background:$color-grey-5;

cms/static/cms/img/toolbar/[email protected]

@@ -11,6 +11,8 @@
 // #SIDEFRAME#
 #header { display:none; }
 #container { padding-top:30px; }
+.cms_debug #container { padding-top:35px; }
+
 #container .breadcrumbs { display:block; background:$color-grey !important; }
 #content { padding-top:10px; }
 

cms/static/cms/js/plugins/cms.placeholders.js

@@ -1,2 +1,2 @@
 {% load i18n %}
-<div class="cms_toolbar-item cms_toolbar-item-logo"><a href="/">{% trans "django CMS" %}</a></div>
+<div class="cms_toolbar-item cms_toolbar-item-logo"><a href="/" title="{{ cms_version }}">{% trans "django CMS" %}</a></div>

cms/static/cms/js/plugins/cms.toolbar.js

@@ -21,6 +21,7 @@
 			'edit_plugin': '{% url "admin:cms_page_edit_plugin" instance.pk %}',
 			'move_plugin': '{% url "admin:cms_page_move_plugin" %}',
 			'copy_plugin': '{% url "admin:cms_page_copy_plugins" %}',
+			{% comment %}'cut_plugin': '{% url "admin:cms_page_cut_plugins" %}',{% endcomment %}
 			'stack_plugin': ''
 		}
 	});