From 2072eb297526a61e5352c2bc335d535e9b1e6d7d Mon Sep 17 00:00:00 2001 From: Jesse Weaver Date: Sun, 6 Sep 2009 22:55:22 -0600 Subject: [PATCH] Add humane messages jQuery plugin This is required by the preference editor. --- .../intranet-tmpl/prog/en/css/humanmsg.css | 118 ++++++++++++++++++ .../prog/en/lib/jquery/plugins/humanmsg.js | 95 ++++++++++++++ 2 files changed, 213 insertions(+) create mode 100644 koha-tmpl/intranet-tmpl/prog/en/css/humanmsg.css create mode 100755 koha-tmpl/intranet-tmpl/prog/en/lib/jquery/plugins/humanmsg.js 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 index 0000000000..47eb2e6787 --- /dev/null +++ b/koha-tmpl/intranet-tmpl/prog/en/css/humanmsg.css @@ -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 index 0000000000..d38cf93953 --- /dev/null +++ b/koha-tmpl/intranet-tmpl/prog/en/lib/jquery/plugins/humanmsg.js @@ -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('

'+logName+'

') + + 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 ? ('

' + msg + '

') : msg) + + // Show message + jQuery('#'+humanMsg.msgID).show().animate({ opacity: humanMsg.msgOpacity}, 200, function() { + jQuery('#'+humanMsg.logID) + .show().children('ul').prepend('
  • '+msg+'
    • ') // 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(); +}) -- 2.39.5