API CHANGE Changed <p id=statusMessage> to <div class=notice-wrap> in…

… LeftAndMain_right.ss and subclasses ENHANCEMENT Using external jquery.notice library to handle status message updates in the CMS git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@92696 467b73ca-7a2a-4603-9d3b-597d59a354a9
silverstripe · Nov 21, 2009 · 8b8867b · 8b8867b
1 parent 42a5de8
commit 8b8867b
Show file tree

Hide file tree

Showing 10 changed files with 162 additions and 147 deletions.
diff --git a/code/LeftAndMain.php b/code/LeftAndMain.php
@@ -213,6 +213,7 @@ function init() {
 		Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/behaviour/behaviour.js');
 		Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-livequery/jquery.livequery.js');
 		Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-cookie/jquery.cookie.js');
+		Requirements::javascript(CMS_DIR . '/thirdparty/jquery-notice/jquery.notice.js');
 		Requirements::javascript(SAPPHIRE_DIR . '/javascript/jquery-ondemand/jquery.ondemand.js');
 		Requirements::javascript(CMS_DIR . '/javascript/jquery-changetracker/lib/jquery.changetracker.js');
 		Requirements::javascript(SAPPHIRE_DIR . '/javascript/prototype_improvements.js');

diff --git a/css/cms_right.css b/css/cms_right.css
@@ -333,37 +333,57 @@
 		font-style: italic;
 	}
 
+
 /**
  * Status Messages
  */
-#statusMessage {
+.notice-wrap {
 	position: absolute;
 	z-index: 500;
 	bottom: 4px;
 	left: 10px;
-	text-align: left;
- 	padding: 2px 20px 2px 20px;
- 	font-size: 14px;
-	font-weight: bold; 	
-	color: #660;
+	z-index: 9999;
+	width: auto;
+}
+
+* html .notice-wrap {
+	position: absolute;		
+}
+
+.notice-item {
+	display: block;
+	position: relative;
+	width: auto;
 	background: #f4f3eb;
 	border: 1px solid #a9a67d;
-	margin: 0 !important;
+	margin-top: 6px;
+	padding: 2px 20px 2px 20px;
+	font-size: 14px;
+	font-weight: bold;
 	line-height: 1.5;
 }
-	#statusMessage.good {
-	 	padding: 2px 20px 2px 40px;
+
+.notice-item-close {
+	position: absolute;
+	font-family: Arial;
+	font-size: 12px;
+	font-weight: bold;
+	right: 6px;
+	top: 6px;
+	cursor: pointer;
+}
+
+	.notice-wrap .good {
+		padding-left: 40px;
 		color: #060;
 		background: #E2F9E3 url(../images/alert-good.gif) 7px 50% no-repeat;
 		border: 1px solid #8dd38d;
 	}
-	#statusMessage.bad {
- 		padding: 2px 20px 2px 40px;
-		border-color: #ff8e8e;
+	.notice-wrap .bad {
+		padding-left: 40px;
 		color: #c80700;
 		background: #ffe9e9 url(../images/alert-bad.gif) 7px 50% no-repeat;
-		max-height: 300px;
-		overflow: auto;
+		border: 1px solid #ff8e8e;
 	}
 
 /**

diff --git a/javascript/LeftAndMain.js b/javascript/LeftAndMain.js
@@ -38,7 +38,7 @@
 				this.find('.ss-tabset').bind('tabsshow', function() {self._resizeChildren();});
 
 				$('#Form_EditForm').bind('loadnewpage', function() {self._resizeChildren();});
-
+				
 				this._super();
 			},
 
@@ -278,135 +278,12 @@
 
 })(jQuery);
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-// Event.observe(window, 'beforeunload', LeftAndMain_window_unload);
-
-/**
- * Unlock the locked status message.
- * Show a queued message, if one exists
- */
-function unlockStatusMessage() {
-	statusMessage.locked = false;
-	if(statusMessage.queued) {
-		statusMessage(
-			statusMessage.queued.msg,
-			statusMessage.queued.type,
-			statusMessage.queued.showNetworkActivity);
-
-		statusMessage.queued = null;
-	}
-}
-
-/**
- * Behaviour of the statuts message.
- */
-Behaviour.register({
-	'#statusMessage' : {
-		showMessage : function(message, type, waitTime, clearManually) {
-			if(this.fadeTimer) {
-				clearTimeout(this.fadeTimer);
-				this.fadeTimer = null;
-			}
-			if(this.currentEffect) {
-				this.currentEffect.cancel();
-				this.currentEffect = null;
-			}
-
-			this.innerHTML = message;
-			this.className = type;
-			Element.setOpacity(this, 1);
-
-			//this.style.position = 'absolute';
-			this.style.display = '';
-			this.style.visibility = '';
-
-			if(!clearManually) {
-				this.fade(0.5,waitTime ? waitTime : 5);
-			}
-		},
-		clearMessage : function(waitTime) {
-			this.fade(0.5, waitTime);
-		},
-		fade: function(fadeTime, waitTime) {
-			if(!fadeTime) fadeTime = 0.5;
-
-			// Wait a bit before fading
-			if(waitTime) {
-				this.fadeTimer = setTimeout((function() {
-					this.fade(fadeTime);
-				}).bind(this), waitTime * 1000);
-
-			// Fade straight away
-			} else {
-			 	this.currentEffect = new Effect.Opacity(this,
-				    { duration: 0.5,
-				      transition: Effect.Transitions.linear,
-				      from: 1.0, to: 0.0,
-				      afterFinish : this.afterFade.bind(this) });
-			}
-		},
-		afterFade : function() {
-			this.style.visibility = 'hidden';
-			this.style.display = 'none';
-			this.innerHTML = '';
-		}
-	}
-});
-
-/**
- * Show a status message.
- *
- * @param msg String
- * @param type String (optional) can be 'good' or 'bad'
- * @param clearManually boolean Don't automatically fade message.
- * @param container custom #statusMessage element to show message.
- */
-function statusMessage(msg, type, clearManually, container) {
-	var statusMessageEl = $('statusMessage');
-	if(container != null) statusMessageEl = container; 
-	if(statusMessageEl) {
-		if(msg) {
-			statusMessageEl.showMessage(msg, type, msg.length / 10, clearManually);
-		} else {
-			statusMessageEl.clearMessage();
-		}
-	}
-}
-
-function clearStatusMessage() {
-	$('statusMessage').clearMessage();
+// Backwards compatibility
+var statusMessage = function(text, type) {
+	jQuery.noticeAdd({text: text, type: type});
 }
-
-/**
- * Called when something goes wrong
- */
-function errorMessage(msg, fullMessage) {
-	// Show complex error for developers in the console
-	if(fullMessage) {
-		// Get the message from an Ajax response object
-		try {
-			if(typeof fullMessage == 'object') fullMessage = fullMessage.status + '//' + fullMessage.responseText;
-		} catch(er) {
-			fullMessage = "";
-		}
-		console.error(fullMessage);
-	}
-
-	msg = msg.replace(/\n/g,'<br>');
-
-	$('statusMessage').showMessage(msg,'bad');
+var errorMessage = function(text) {
+	jQuery.noticeAdd({text: text, type: 'error'});
 }
 
 function ajaxErrorHandler(response) {

diff --git a/templates/Includes/CommentAdmin_right.ss b/templates/Includes/CommentAdmin_right.ss
@@ -9,4 +9,4 @@
 	</form>
 <% end_if %>
 
-<p id="statusMessage" style="visibility:hidden"></p>
+<div class="notice-wrap"></div>
diff --git a/templates/Includes/LeftAndMain_right.ss b/templates/Includes/LeftAndMain_right.ss
@@ -12,4 +12,4 @@
 	</form>
 <% end_if %>
 
-<div id="statusMessage"></div>
+<div class="notice-wrap"></div>
diff --git a/templates/Includes/ReportAdmin_right.ss b/templates/Includes/ReportAdmin_right.ss
@@ -6,4 +6,4 @@
 	</form>
 <% end_if %>
 
-<p id="statusMessage" style="visibility:hidden"></p>
+<div class="notice-wrap"></div>
diff --git a/templates/Includes/SecurityAdmin_right.ss b/templates/Includes/SecurityAdmin_right.ss
@@ -9,4 +9,4 @@
 	</form>
 <% end_if %>
 
-<p id="statusMessage" style="visibility:hidden"></p>
+<div class="notice-wrap"></div>
diff --git a/thirdparty/jquery-notice/.piston.yml b/thirdparty/jquery-notice/.piston.yml
@@ -0,0 +1,8 @@
+--- 
+format: 1
+handler: 
+  piston:remote-revision: 14
+  piston:uuid: c0f28f7c-efbc-11dd-aa46-671127399dce
+lock: false
+repository_url: http://jquery-notice.googlecode.com/svn/trunk/
+repository_class: Piston::Svn::Repository
diff --git a/thirdparty/jquery-notice/jquery.notice.css b/thirdparty/jquery-notice/jquery.notice.css
@@ -0,0 +1,36 @@
+.notice-wrap {
+	position: fixed;
+	top: 20px;
+	right: 20px;
+	width: 250px;
+	z-index: 9999;
+}
+
+* html .notice-wrap {
+	position: absolute;		
+}
+
+.notice-item {
+	height: 60px;
+	background: #333;
+	-moz-border-radius: 6px;
+	-webkit-border-radius: 6px;
+	color: #eee;
+	padding: 6px 6px 0 6px;
+	font-family: lucida Grande;
+	font-size: 11px;
+	border: 2px solid #999;
+	display: block;
+	position: relative;
+	margin: 0 0 12px 0;
+}
+
+.notice-item-close {
+	position: absolute;
+	font-family: Arial;
+	font-size: 12px;
+	font-weight: bold;
+	right: 6px;
+	top: 6px;
+	cursor: pointer;
+}
diff --git a/thirdparty/jquery-notice/jquery.notice.js b/thirdparty/jquery-notice/jquery.notice.js
@@ -0,0 +1,73 @@
+/**
+*	jQuery.noticeAdd() and jQuery.noticeRemove()
+*	These functions create and remove growl-like notices
+*		
+*   Copyright (c) 2009 Tim Benniks
+*
+*	Permission is hereby granted, free of charge, to any person obtaining a copy
+*	of this software and associated documentation files (the "Software"), to deal
+*	in the Software without restriction, including without limitation the rights
+*	to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+*	copies of the Software, and to permit persons to whom the Software is
+*	furnished to do so, subject to the following conditions:
+*
+*	The above copyright notice and this permission notice shall be included in
+*	all copies or substantial portions of the Software.
+*
+*	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+*	IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+*	FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+*	AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+*	LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+*	OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+*	THE SOFTWARE.
+*	
+*	@author 	Tim Benniks <tim@timbenniks.com>
+* 	@copyright  2009 timbenniks.com
+*	@version    $Id: jquery.notice.js 1 2009-01-24 12:24:18Z timbenniks $
+**/
+(function(jQuery)
+{
+	jQuery.extend({			
+		noticeAdd: function(options)
+		{	
+			var defaults = {
+				inEffect: 			{opacity: 'show'},	// in effect
+				inEffectDuration: 	600,				// in effect duration in miliseconds
+				stayTime: 			3000,				// time in miliseconds before the item has to disappear
+				text: 				'',					// content of the item
+				stay: 				false,				// should the notice item stay or not?
+				type: 				'notice' 			// could also be error, succes
+			}
+
+			// declare varaibles
+			var options, noticeWrapAll, noticeItemOuter, noticeItemInner, noticeItemClose;
+
+			options 		= jQuery.extend({}, defaults, options);
+			noticeWrapAll	= (!jQuery('.notice-wrap').length) ? jQuery('<div></div>').addClass('notice-wrap').appendTo('body') : jQuery('.notice-wrap');
+			noticeItemOuter	= jQuery('<div></div>').addClass('notice-item-wrapper');
+			noticeItemInner	= jQuery('<div></div>').hide().addClass('notice-item ' + options.type).appendTo(noticeWrapAll).html('<p>'+options.text+'</p>').animate(options.inEffect, options.inEffectDuration).wrap(noticeItemOuter);
+			noticeItemClose	= jQuery('<div></div>').addClass('notice-item-close').prependTo(noticeItemInner).html('x').click(function() { jQuery.noticeRemove(noticeItemInner) });
+
+			if(!options.stay)
+			{
+				setTimeout(function()
+				{
+					jQuery.noticeRemove(noticeItemInner);
+				},
+				options.stayTime);
+			}
+		},
+
+		noticeRemove: function(obj)
+		{
+			obj.animate({opacity: '0'}, 600, function()
+			{
+				obj.parent().animate({height: '0px'}, 300, function()
+				{
+					obj.parent().remove();
+				});
+			});
+		}
+	});
+})(jQuery);