[Jifty-commit] r5552 - in jifty/trunk: . lib/Jifty/View/Declare share/web/static/css share/web/static/js share/web/templates/_elements
Jifty commits
jifty-commit at lists.jifty.org
Fri Jul 18 16:29:30 EDT 2008
Author: trs
Date: Fri Jul 18 16:28:31 2008
New Revision: 5552
Added:
jifty/trunk/share/web/static/css/jquery.jgrowl.css (contents, props changed)
jifty/trunk/share/web/static/js/jquery.jgrowl.js (contents, props changed)
Modified:
jifty/trunk/ (props changed)
jifty/trunk/lib/Jifty/View/Declare/Page.pm
jifty/trunk/lib/Jifty/Web.pm
jifty/trunk/share/web/static/css/main.css
jifty/trunk/share/web/static/css/notices.css
jifty/trunk/share/web/static/js/jifty.js
jifty/trunk/share/web/templates/_elements/wrapper
Log:
r37584 at zot: tom | 2008-07-18 16:26:13 -0400
Kill our custom popup notifications in favor of jGrowl.
Modified: jifty/trunk/lib/Jifty/View/Declare/Page.pm
==============================================================================
--- jifty/trunk/lib/Jifty/View/Declare/Page.pm (original)
+++ jifty/trunk/lib/Jifty/View/Declare/Page.pm Fri Jul 18 16:28:31 2008
@@ -196,8 +196,6 @@
show('/keybindings');
with( id => "jifty-wait-message", style => "display: none" ),
div { _('Loading...') };
- with( id => "jifty-result-popup" ),
- div { };
# This is required for jifty server push. If you maintain your own
# wrapper, make sure you have this as well.
Modified: jifty/trunk/lib/Jifty/Web.pm
==============================================================================
--- jifty/trunk/lib/Jifty/Web.pm (original)
+++ jifty/trunk/lib/Jifty/Web.pm Fri Jul 18 16:28:31 2008
@@ -43,6 +43,7 @@
iautocompleter.js
jifty_interface.js
jquery_noconflict.js
+ jquery.jgrowl.js
behaviour.js
formatDate.js
template_declare.js
Added: jifty/trunk/share/web/static/css/jquery.jgrowl.css
==============================================================================
--- (empty file)
+++ jifty/trunk/share/web/static/css/jquery.jgrowl.css Fri Jul 18 16:28:31 2008
@@ -0,0 +1,119 @@
+
+div.jGrowl {
+ padding: 10px;
+ z-index: 9999;
+}
+
+/** Special IE6 Style Positioning **/
+div.ie6 {
+ position: absolute;
+}
+
+div.ie6.top-right {
+ right: auto;
+ bottom: auto;
+ left: expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
+ top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
+}
+
+div.ie6.top-left {
+ left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
+ top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
+}
+
+div.ie6.bottom-right {
+ left: expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
+ top: expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
+}
+
+div.ie6.bottom-left {
+ left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
+ top: expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
+}
+
+div.id6.center {
+ left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
+ top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
+ width: 100%;
+}
+
+/** Normal Style Positions **/
+body > div.jGrowl {
+ position: fixed;
+}
+
+body > div.jGrowl.top-left {
+ left: 0px;
+ top: 0px;
+}
+
+body > div.jGrowl.top-right {
+ right: 0px;
+ top: 0px;
+}
+
+body > div.jGrowl.bottom-left {
+ left: 0px;
+ bottom: 0px;
+}
+
+body > div.jGrowl.bottom-right {
+ right: 0px;
+ bottom: 0px;
+}
+
+body > div.jGrowl.center {
+ top: 0px;
+ width: 50%;
+ left: 25%;
+}
+
+/** Cross Browser Styling **/
+div.center div.jGrowl-notification, div.center div.jGrowl-closer {
+ margin-left: auto;
+ margin-right: auto;
+}
+
+div.jGrowl div.jGrowl-notification, div.jGrowl div.jGrowl-closer {
+ background-color: #000;
+ color: #fff;
+ opacity: .85;
+ filter: alpha(opacity = 85);
+ zoom: 1;
+ width: 235px;
+ padding: 10px;
+ margin-top: 5px;
+ margin-bottom: 5px;
+ font-family: Tahoma, Arial, Helvetica, sans-serif;
+ font-size: 12px;
+ text-align: left;
+ display: none;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+}
+
+div.jGrowl div.jGrowl-notification {
+ height: 40px;
+}
+
+div.jGrowl div.jGrowl-notification div.header {
+ font-weight: bold;
+ font-size: 10px;
+}
+
+div.jGrowl div.jGrowl-notification div.close {
+ float: right;
+ font-weight: bold;
+ font-size: 12px;
+ cursor: pointer;
+}
+
+div.jGrowl div.jGrowl-closer {
+ height: 15px;
+ padding-top: 4px;
+ padding-bottom: 4px;
+ cursor: pointer;
+ font-size: 11px;
+ font-weight: bold;
+ text-align: center;
+}
Modified: jifty/trunk/share/web/static/css/main.css
==============================================================================
--- jifty/trunk/share/web/static/css/main.css (original)
+++ jifty/trunk/share/web/static/css/main.css Fri Jul 18 16:28:31 2008
@@ -14,3 +14,4 @@
@import "yui/menu/menu-core.css";
@import "yui/menu/menu.css";
@import "notices.css";
+ at import "jquery.jgrowl.css";
Modified: jifty/trunk/share/web/static/css/notices.css
==============================================================================
--- jifty/trunk/share/web/static/css/notices.css (original)
+++ jifty/trunk/share/web/static/css/notices.css Fri Jul 18 16:28:31 2008
@@ -37,24 +37,13 @@
text-indent: -9999em;
}
-#jifty-result-popup {
- bottom: 0.6em;
- position: fixed;
- right: 0;
- width: 180px;
- z-index: 43;
+#jGrowl .result-message .message {
+ background: url(/static/images/silk/information.png) no-repeat center left;
+ padding-left: 20px;
}
-#jifty-result-popup .popup_notification {
- background: #A9B7FF url(/static/images/silk/information.png) no-repeat scroll 5px center;
- border: 1px solid #004E75;
- overflow: hidden;
- padding: 0.5em 0.5em 0.5em 27px;
-}
-
-#jifty-result-popup .result-error {
- background: #FFA8A8 url(/static/images/silk/error.png) no-repeat scroll 5px center;
- border: 1px solid #B71111;
- color: #B71111;
+#jGrowl .result-error .message {
+ background: url(/static/images/silk/error.png) no-repeat center left;
+ padding-left: 20px;
}
Modified: jifty/trunk/share/web/static/js/jifty.js
==============================================================================
--- jifty/trunk/share/web/static/js/jifty.js (original)
+++ jifty/trunk/share/web/static/js/jifty.js Fri Jul 18 16:28:31 2008
@@ -1385,9 +1385,6 @@
}
function show_action_result() {
- var $popup = jQuery('#jifty-result-popup');
- if($popup.size() == 0) return;
-
var moniker = arguments[0];
var result = arguments[1];
var status = result.nodeName;
@@ -1409,28 +1406,9 @@
if(status != 'message' && status != 'error') return;
- var node = document.createElement('div');
- var node_id = 'result-' + moniker;
- node.setAttribute('id', node_id);
- node.className = "popup_notification result-" + status;
- node.innerHTML = text;
-
- var wrap1 = document.createElement("div");
- wrap1.className = "dropshadow_wrap1";
- var wrap2 = document.createElement("div");
- wrap2.className = "dropshadow_wrap2";
- var wrap3 = document.createElement("div");
- wrap3.className = "dropshadow_wrap3";
-
- wrap1.appendChild(wrap2);
- wrap2.appendChild(wrap3);
- wrap3.appendChild(node);
-
- $popup.prepend( wrap1 );
-
- setTimeout(function () {
- jQuery(wrap1).fadeOut(3000);
- }, 3500);
+ jQuery.jGrowl( text, {
+ theme: 'result-'+status
+ });
}
Jifty.Autocompleter = function() {
Added: jifty/trunk/share/web/static/js/jquery.jgrowl.js
==============================================================================
--- (empty file)
+++ jifty/trunk/share/web/static/js/jquery.jgrowl.js Fri Jul 18 16:28:31 2008
@@ -0,0 +1,204 @@
+/**
+ * jGrowl 1.1.0
+ *
+ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
+ * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
+ *
+ * Written by Stan Lemon <stanlemon at mac.com>
+ * Last updated: 2008.06.13
+ *
+ * jGrowl is a jQuery plugin implementing unobtrusive userland notifications. These
+ * notifications function similarly to the Growl Framework available for
+ * Mac OS X (http://growl.info).
+ *
+ * Changes in 1.1.0
+ * - Multiple container and instances.
+ * - Standard $.jGrowl() now wraps $.fn.jGrowl() by first establishing a generic jGrowl container.
+ * - Instance methods of a jGrowl container can be called by $.fn.jGrowl(methodName)
+ * - Added glue preferenced, which allows notifications to be inserted before or after nodes in the container
+ * - Added new log callback which is called before anything is done for the notification
+ * - Corner's attribute are now applied on an individual notification basis.
+ *
+ * Changes in 1.0.4
+ * - Various CSS fixes so that jGrowl renders correctly in IE6.
+ *
+ * Changes in 1.0.3
+ * - Fixed bug with options persisting across notifications
+ * - Fixed theme application bug
+ * - Simplified some selectors and manipulations.
+ * - Added beforeOpen and beforeClose callbacks
+ * - Reorganized some lines of code to be more readable
+ * - Removed unnecessary this.defaults context
+ * - If corners plugin is present, it's now customizable.
+ * - Customizable open animation.
+ * - Customizable close animation.
+ * - Customizable animation easing.
+ * - Added customizable positioning (top-left, top-right, bottom-left, bottom-right, center)
+ *
+ * Changes in 1.0.2
+ * - All CSS styling is now external.
+ * - Added a theme parameter which specifies a secondary class for styling, such
+ * that notifications can be customized in appearance on a per message basis.
+ * - Notification life span is now customizable on a per message basis.
+ * - Added the ability to disable the global closer, enabled by default.
+ * - Added callbacks for when a notification is opened or closed.
+ * - Added callback for the global closer.
+ * - Customizable animation speed.
+ * - jGrowl now set itself up and tears itself down.
+ *
+ * Changes in 1.0.1:
+ * - Removed dependency on metadata plugin in favor of .data()
+ * - Namespaced all events
+ *
+ * @todo Group by header.
+ */
+(function($) {
+
+ /** jGrowl Wrapper - Establish a base jGrowl Container for compatibility with older releases. **/
+ $.jGrowl = function( m , o ) {
+ // To maintain compatibility with older version that only supported one instance we'll create the base container.
+ if ( $('#jGrowl').size() == 0 ) $('<div id="jGrowl"></div>').addClass($.jGrowl.defaults.position).appendTo('body');
+ // Create a notification on the container.
+ $('#jGrowl').jGrowl(m,o);
+ };
+
+
+ /** Raise jGrowl Notification on a jGrowl Container **/
+ $.fn.jGrowl = function( m , o ) {
+ if ( $.isFunction(this.each) ) {
+ var args = arguments;
+
+ return this.each(function() {
+ var self = this;
+
+ /** Create a jGrowl Instance on the Container if it does not exist **/
+ if ( $(this).data('jGrowl.instance') == undefined ) {
+ $(this).data('jGrowl.instance', new $.fn.jGrowl());
+ $(this).data('jGrowl.instance').startup( this );
+ }
+
+ /** Optionally call jGrowl instance methods, or just raise a normal notification **/
+ if ( $.isFunction($(this).data('jGrowl.instance')[m]) ) {
+ $(this).data('jGrowl.instance')[m].apply( $(this).data('jGrowl.instance') , $.makeArray(args).slice(1) );
+ } else {
+ $(this).data('jGrowl.instance').notification( m , o );
+ }
+ });
+ };
+ };
+
+ $.extend( $.fn.jGrowl.prototype , {
+
+ /** Default JGrowl Settings **/
+ defaults: {
+ header: '',
+ sticky: false,
+ position: 'top-right', // Is this still needed?
+ glue: 'after',
+ theme: 'default',
+ corners: '10px',
+ check: 500,
+ life: 3000,
+ speed: 'normal',
+ easing: 'swing',
+ closer: true,
+ log: function(e,m,o) {},
+ beforeOpen: function(e,m,o) {},
+ open: function(e,m,o) {},
+ beforeClose: function(e,m,o) {},
+ close: function(e,m,o) {},
+ animateOpen: {
+ opacity: 'show'
+ },
+ animateClose: {
+ opacity: 'hide'
+ }
+ },
+
+ /** jGrowl Container Node **/
+ element: null,
+
+ /** Interval Function **/
+ interval: null,
+
+ /** Create a Notification **/
+ notification: function( message , o ) {
+ var self = this;
+ var o = $.extend({}, this.defaults, o);
+
+ o.log.apply( this.element , [this.element,message,o] );
+
+ var notification = $('<div class="jGrowl-notification"><div class="close">×</div><div class="header">' + o.header + '</div><div class="message">' + message + '</div></div>')
+ .data("jGrowl", o).addClass(o.theme).children('div.close').bind("click.jGrowl", function() {
+ $(this).unbind('click.jGrowl').parent().trigger('jGrowl.beforeClose').animate(o.animateClose, o.speed, o.easing, function() {
+ $(this).trigger('jGrowl.close').remove();
+ });
+ }).parent();
+
+ ( o.glue == 'after' ) ? $('div.jGrowl-notification:last', this.element).after(notification) : $('div.jGrowl-notification:first', this.element).before(notification);
+
+ /** Notification Actions **/
+ $(notification).bind("mouseover.jGrowl", function() {
+ $(this).data("jGrowl").pause = true;
+ }).bind("mouseout.jGrowl", function() {
+ $(this).data("jGrowl").pause = false;
+ }).bind('jGrowl.beforeOpen', function() {
+ o.beforeOpen.apply( self.element , [self.element,message,o] );
+ }).bind('jGrowl.open', function() {
+ o.open.apply( self.element , [self.element,message,o] );
+ }).bind('jGrowl.beforeClose', function() {
+ o.beforeClose.apply( self.element , [self.element,message,o] );
+ }).bind('jGrowl.close', function() {
+ o.close.apply( self.element , [self.element,message,o] );
+ }).trigger('jGrowl.beforeOpen').animate(o.animateOpen, o.speed, o.easing, function() {
+ $(this).data("jGrowl").created = new Date();
+ }).trigger('jGrowl.open');
+
+ /** Optional Corners Plugin **/
+ if ( $.fn.corner != undefined ) $(notification).corner( o.corners );
+
+ /** Add a Global Closer if more than one notification exists **/
+ if ( $('div.jGrowl-notification:parent', this.element).size() > 1 && $('div.jGrowl-closer', this.element).size() == 0 && this.defaults.closer != false ) {
+ $('<div class="jGrowl-closer">[ close all ]</div>').addClass(this.defaults.theme).appendTo(this.element).animate(this.defaults.animateOpen, this.defaults.speed, this.defaults.easing).bind("click.jGrowl", function() {
+ $(this).siblings().children('div.close').trigger("click.jGrowl");
+
+ if ( $.isFunction( self.defaults.closer ) ) self.defaults.closer.apply( $(this).parent()[0] , [$(this).parent()[0]] );
+ });
+ };
+ },
+
+ /** Update the jGrowl Container, removing old jGrowl notifications **/
+ update: function() {
+ $(this.element).find('div.jGrowl-notification:parent').each( function() {
+ if ( $(this).data("jGrowl") != undefined && $(this).data("jGrowl").created != undefined && ($(this).data("jGrowl").created.getTime() + $(this).data("jGrowl").life) < (new Date()).getTime() && $(this).data("jGrowl").sticky != true &&
+ ($(this).data("jGrowl").pause == undefined || $(this).data("jGrowl").pause != true) ) {
+ $(this).children('div.close').trigger('click.jGrowl');
+ }
+ });
+
+ if ( $(this.element).find('div.jGrowl-notification:parent').size() < 2 ) {
+ $(this.element).find('div.jGrowl-closer').animate(this.defaults.animateClose, this.defaults.speed, this.defaults.easing, function() {
+ $(this).remove();
+ });
+ };
+ },
+
+ /** Setup the jGrowl Notification Container **/
+ startup: function(e) {
+ this.element = $(e).addClass('jGrowl').append('<div class="jGrowl-notification"></div>');
+ this.interval = setInterval( function() { jQuery(e).data('jGrowl.instance').update(); }, this.defaults.check);
+
+ if ($.browser.msie && parseInt($.browser.version) < 7) $(this.element).addClass('ie6');
+ },
+
+ /** Shutdown jGrowl, removing it and clearing the interval **/
+ shutdown: function() {
+ $(this.element).removeClass('jGrowl').find('div.jGrowl-notification').remove();
+ clearInterval( this.interval );
+ }
+ });
+
+ /** Reference the Defaults Object for compatibility with older versions of jGrowl **/
+ $.jGrowl.defaults = $.fn.jGrowl.prototype.defaults;
+
+})(jQuery);
\ No newline at end of file
Modified: jifty/trunk/share/web/templates/_elements/wrapper
==============================================================================
--- jifty/trunk/share/web/templates/_elements/wrapper (original)
+++ jifty/trunk/share/web/templates/_elements/wrapper Fri Jul 18 16:28:31 2008
@@ -16,7 +16,6 @@
<& /_elements/keybindings &>
</div>
<div id="jifty-wait-message" style="display: none"><%_('Loading...')%></div>
- <div id="jifty-result-popup"></div>
% Jifty::Mason::Halo->render_component_tree() if (Jifty->config->framework('DevelMode') );
%# This is required for jifty server push. If you maintain your own
%# wrapper, make sure you have this as well.
More information about the Jifty-commit
mailing list