Add humane messages jQuery plugin
This is required by the preference editor.
This commit is contained in:
Jesse Weaver
parent
53040ea9e8
commit
2072eb2975
2 changed files with 213 additions and 0 deletions
118
koha-tmpl/intranet-tmpl/prog/en/css/humanmsg.css
Normal file
118
koha-tmpl/intranet-tmpl/prog/en/css/humanmsg.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
95
koha-tmpl/intranet-tmpl/prog/en/lib/jquery/plugins/humanmsg.js
vendored
Executable file
95
koha-tmpl/intranet-tmpl/prog/en/lib/jquery/plugins/humanmsg.js
vendored
Executable file
|
|
@ -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();
|
||||
})
|
||||
Loading…
Reference in a new issue