Permalink
Browse files

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
  • Loading branch information...
1 parent 42a5de8 commit 8b8867ba762ba4473849c2f02dbf52d63fff0478 @chillu chillu committed Nov 21, 2009
View
@@ -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');
View
@@ -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;
}
/**
View
@@ -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) {
@@ -9,4 +9,4 @@
</form>
<% end_if %>
-<p id="statusMessage" style="visibility:hidden"></p>
+<div class="notice-wrap"></div>
@@ -12,4 +12,4 @@
</form>
<% end_if %>
-<div id="statusMessage"></div>
+<div class="notice-wrap"></div>
@@ -6,4 +6,4 @@
</form>
<% end_if %>
-<p id="statusMessage" style="visibility:hidden"></p>
+<div class="notice-wrap"></div>
@@ -9,4 +9,4 @@
</form>
<% end_if %>
-<p id="statusMessage" style="visibility:hidden"></p>
+<div class="notice-wrap"></div>
@@ -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
@@ -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;
+}
@@ -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);

0 comments on commit 8b8867b

Please sign in to comment.