Add humane messages jQuery plugin
authorJesse Weaver <pianohacker@gmail.com>
Mon, 7 Sep 2009 04:55:22 +0000 (22:55 -0600)
committerJesse Weaver <pianohacker@gmail.com>
Mon, 7 Sep 2009 04:55:22 +0000 (22:55 -0600)
This is required by the preference editor.

koha-tmpl/intranet-tmpl/prog/en/css/humanmsg.css [new file with mode: 0644]
koha-tmpl/intranet-tmpl/prog/en/lib/jquery/plugins/humanmsg.js [new file with mode: 0755]

diff --git a/koha-tmpl/intranet-tmpl/prog/en/css/humanmsg.css b/koha-tmpl/intranet-tmpl/prog/en/css/humanmsg.css
new file mode 100644 (file)
index 0000000..47eb2e6
--- /dev/null
@@ -0,0 +1,118 @@
+/*
+       HUMANIZED MESSAGES 1.0
+       idea - http://www.humanized.com/weblog/2006/09/11/monolog_boxes_and_transparent_messages
+       home - http://humanmsg.googlecode.com
+*/
+
+html, body {
+       height: 100%; /* Damn you IE! */
+}
+
+.humanMsg {
+       font: normal 20px/50px Helvetica, Arial, Sans-Serif;
+       letter-spacing: -1px;
+       position: fixed;
+       top: 130px;
+       left: 25%;
+       width: 50%;
+       color: white;
+       background-color: black;
+       text-align: center;
+       display: none;
+       opacity: 0;
+       z-index: 100000;
+}
+
+.humanMsg h3 {
+       margin: 0.3em;
+       margin-top: 0;
+       font-size: 24px/50px;
+       font-weight: bold;
+}
+
+.humanMsg .round {
+    border-left: solid 2px white;
+       border-right: solid 2px white;
+    font-size: 1px; height: 2px;
+       }
+
+.humanMsg p {
+       margin: 0.3em;
+       }
+
+.humanMsg a {
+       display: none;
+       }
+
+#humanMsgLog {
+       font: normal 10px Helvetica, Arial, Sans-Serif;
+       color: white;
+       position: fixed;
+       bottom: 0;
+       left: 0;
+       width: 100%;
+       max-height: 200px;
+       display: none;
+       z-index: 10000;
+       }
+
+#humanMsgLog p.launcher {
+       position: relative;
+       left: 50%;
+       width: 200px;
+       margin: 0;
+       margin-left: -100px;
+       padding: 0 10px;
+       line-height: 20px;
+       background: #333;
+       text-align: center;
+       white-space: pre;
+       cursor: pointer;
+       }
+
+#humanMsgLog p.launcher:hover {
+       background: #222;
+       }
+
+#humanMsgLog ul {
+       background: #eee url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAARCAIAAACaSvE/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNqEjVEKACAIQ516Ee//5wVNCjIjaB/iY5vC3YkoIgDkVDOjQ5pqLCI3r2bLFzNzyydvM4uKqfJPKN4vyl9LO/7o3/6PhwADAIWkFPjc5eRrAAAAAElFTkSuQmCC) repeat-x;
+       margin: 0;
+       padding: 0;
+       position: relative;
+       max-height: 180px;
+       overflow: auto;
+       display: none;
+       }
+
+#humanMsgLog ul li {
+       color: #555;
+       font-size: 12px;
+       list-style-type: none;
+       border-bottom: 1px solid #ddd;
+       line-height: 40px;
+       display: none;
+       padding: 0 20px;
+       position: relative;
+       overflow: hidden;
+       white-space: pre;
+       }
+
+#humanMsgLog ul li:hover {
+       background: #f2f2f2;
+       }
+
+#humanMsgLog ul li:first-child {
+       margin-top: 1px;
+       }
+
+#humanMsgLog ul li .error {
+       color: orangered;
+       }
+
+#humanMsgLog ul li .indent {
+       position: absolute;
+       top: 0;
+       left: 100px;
+       margin-right: 200px;
+       height: inherit;
+       }
diff --git a/koha-tmpl/intranet-tmpl/prog/en/lib/jquery/plugins/humanmsg.js b/koha-tmpl/intranet-tmpl/prog/en/lib/jquery/plugins/humanmsg.js
new file mode 100755 (executable)
index 0000000..d38cf93
--- /dev/null
@@ -0,0 +1,95 @@
+/*
+       HUMANIZED MESSAGES 1.0
+       idea - http://www.humanized.com/weblog/2006/09/11/monolog_boxes_and_transparent_messages
+       home - http://humanmsg.googlecode.com
+*/
+
+var humanMsg = {
+       setup: function(appendTo, logName, msgOpacity) {
+               humanMsg.msgID = 'humanMsg';
+               humanMsg.logID = 'humanMsgLog';
+
+               // appendTo is the element the msg is appended to
+               if (appendTo == undefined) appendTo = 'body';
+
+               // The text on the Log tab
+               if (logName == undefined) logName = 'Message Log';
+
+               // Opacity of the message
+               humanMsg.msgOpacity = 0.8;
+
+               if (msgOpacity != undefined) humanMsg.msgOpacity = parseFloat(msgOpacity);
+
+               // Inject the message structure
+               jQuery(appendTo).append('<div id="'+humanMsg.msgID+'" class="humanMsg"><div class="round"></div><div id="'+humanMsg.msgID+'-contents"></div><div class="round"></div></div> <div id="'+humanMsg.logID+'"><p class="launcher">'+logName+'</p><ul></ul></div>')
+
+               jQuery('#'+humanMsg.logID+' p').click(
+                       function() { jQuery(this).siblings('ul').slideToggle() }
+               )
+       },
+
+       displayAlert: function(msg, options) {
+               humanMsg.displayMsg(msg, options, true);
+       },
+
+       displayMsg: function(msg, options, is_alert) {
+               if (msg == '')
+                       return;
+
+               if (options != undefined) {
+                       delay = 'delay' in options ? parseInt(options.delay) * 1000 : 1000
+                       life = 'life' in options ? parseInt(options.life) * 1000 : Infinity
+               } else {
+                       delay = 1000
+                       life = Infinity
+               }
+
+               clearTimeout(humanMsg.t2);
+
+               // Inject message
+               jQuery('#'+humanMsg.msgID+'-contents').html(is_alert ? ('<p>' + msg + '</p>') : msg)
+
+               // Show message
+               jQuery('#'+humanMsg.msgID).show().animate({ opacity: humanMsg.msgOpacity}, 200, function() {
+                       jQuery('#'+humanMsg.logID)
+                               .show().children('ul').prepend('<li>'+msg+'</li>')      // Prepend message to log
+                               .children('li:first').slideDown(200)                            // Slide it down
+
+                       if ( jQuery('#'+humanMsg.logID+' ul').css('display') == 'none') {
+                               jQuery('#'+humanMsg.logID+' p').animate({ bottom: 40 }, 200, 'linear', function() {
+                                       jQuery(this).animate({ bottom: 0 }, 300, 'swing', function() { jQuery(this).css({ bottom: 0 }) })
+                               })
+                       }
+
+               })
+
+               // Watch for mouse & keyboard in `delay`
+               humanMsg.t1 = setTimeout("humanMsg.bindEvents()", delay)
+               // Remove message after `life`
+               humanMsg.t2 = setTimeout("humanMsg.removeMsg()", life)
+       },
+
+       bindEvents: function() {
+       // Remove message if mouse is moved or key is pressed
+               jQuery(window)
+                       .mousemove(humanMsg.removeMsg)
+                       .click(humanMsg.removeMsg)
+                       .keypress(humanMsg.removeMsg)
+       },
+
+       removeMsg: function() {
+               // Unbind mouse & keyboard
+               jQuery(window)
+                       .unbind('mousemove', humanMsg.removeMsg)
+                       .unbind('click', humanMsg.removeMsg)
+                       .unbind('keypress', humanMsg.removeMsg)
+
+               // If message is fully transparent, fade it out
+               if (jQuery('#'+humanMsg.msgID).css('opacity') == humanMsg.msgOpacity)
+                       jQuery('#'+humanMsg.msgID).animate({ opacity: 0 }, 500, function() { jQuery(this).hide() })
+       }
+};
+
+jQuery(document).ready(function(){
+       humanMsg.setup();
+})