From af8c6b24190bb325354e8ea4f92585d96a4cb0c2 Mon Sep 17 00:00:00 2001 From: Philmod Date: Thu, 30 May 2013 22:03:36 -0700 Subject: [PATCH] js and css files --- .gitignore | 2 + public/css/jquery.notifyBar.css | 85 ++++++++++++++++++ public/js/jquery.notifyBar.js | 153 ++++++++++++++++++++++++++++++++ views/index.ejs | 2 + 4 files changed, 242 insertions(+) create mode 100644 public/css/jquery.notifyBar.css create mode 100644 public/js/jquery.notifyBar.js diff --git a/.gitignore b/.gitignore index 3a627f6..86d0fd0 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,5 @@ config.js node_modules components _site +pictures +temp.js \ No newline at end of file diff --git a/public/css/jquery.notifyBar.css b/public/css/jquery.notifyBar.css new file mode 100644 index 0000000..f57690b --- /dev/null +++ b/public/css/jquery.notifyBar.css @@ -0,0 +1,85 @@ +/* +* Notify Bar - jQuery plugin +* +* Copyright (c) 2009-2013 Dmitri Smirnov +* +* Licensed under the MIT license: +* http://www.opensource.org/licenses/mit-license.php +* +* Version: 1.4 +* +* Project home: +* http://www.whoop.ee/posts/2013-04-05-the-resurrection-of-jquery-notify-bar/ +*/ + +/* Default bars' style */ +.jquery-notify-bar { + width:100%; + position:fixed; + top:0; + left:0; + z-index:32768; + background-color:#efefef; + font-size:18px; + color:#000; + text-align:center; + font-family: Arial, Verdana, sans-serif; + padding:20px 0px; + cursor: pointer; + border-bottom:1px solid #ddd; + -webkit-box-shadow: inset 0 -1px 0 0 #fff; + -moz-box-shadow: inset 0 -1px 0 0 #fff; + box-shadow: inset 0 -1px 0 0 #fff; +background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0))); +background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%); +background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%); +background-image: -o-linear-gradient(rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%); +background-image: linear-gradient(rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%); +} +.jquery-notify-bar.bottom { + bottom:0; + top:auto; + border-top:1px solid #ddd; + border-bottom:0; + -webkit-box-shadow: inset 0 1px 0 0 #fff; + -moz-box-shadow: inset 0 1px 0 0 #fff; + box-shadow: inset 0 1px 0 0 #fff; +} +.jquery-notify-bar.top {} + +/* Style for errors */ +.jquery-notify-bar.error { + color:#f00; + background-color:#fdd; +} +.jquery-notify-bar.error .notify-bar-text-wrapper { + background: transparent url("../images/cross.png") no-repeat center left; + padding-left:20px; +} + +/* Style for warning */ +.jquery-notify-bar.warning { + color:#000; + background-color:#fffaaa; +} +.jquery-notify-bar.warning .notify-bar-text-wrapper { + background: transparent url("../images/error.png") no-repeat center left; + padding-left:20px; +} + +/* Style for success (notice) */ +.jquery-notify-bar.success { + color:#060; + background-color:#BBFFB6; +} +.jquery-notify-bar.success .notify-bar-text-wrapper { + background: transparent url("../images/tick.png") no-repeat center left; + padding-left:20px; +} + +/* Style for close button */ +.notify-bar-close { + position:absolute; + left:95%; + font-size:11px; +} \ No newline at end of file diff --git a/public/js/jquery.notifyBar.js b/public/js/jquery.notifyBar.js new file mode 100644 index 0000000..e125b44 --- /dev/null +++ b/public/js/jquery.notifyBar.js @@ -0,0 +1,153 @@ +/* +* Notify Bar - $ plugin +* +* Copyright (c) 2009-2013 Dmitri Smirnov +* +* Licensed under the MIT license: +* http://www.opensource.org/licenses/mit-license.php +* +* Version: 1.4 +* +* Project home: +* http://www.whoop.ee/posts/2013-04-05-the-resurrection-of-jquery-notify-bar/ +*/ +(function ($) { + + $.notifyBar = function (options) { + var rand = parseInt(Math.random() * 100000000, 0), + text_wrapper, + bar = {}, + settings = {}; + + settings = $.extend({ + html : 'Your message here', + delay : 2000, + animationSpeed : 200, + cssClass : '', + jqObject : '', + close : false, + closeText : 'Close [X]', + closeOnClick : true, + closeOnOver : false, + onBeforeShow : null, + onShow : null, + onBeforeHide : null, + onHide : null, + position : 'top' + }, options); + + // Use these methods as private. + this.fn.showNB = function () { + if (typeof settings.onBeforeShow === 'function') { + settings.onBeforeShow.call(); + } + $(this).stop().slideDown(asTime, function () { + if (typeof settings.onShow === 'function') { + settings.onShow.call(); + } + }); + }; + + this.fn.hideNB = function (delayed) { + if (typeof settings.onBeforeHide === 'function') { + settings.onBeforeHide.call(); + } + $(this).stop().slideUp(asTime, function () { + if (bar.attr("id") === "__notifyBar" + rand) { + $(this).slideUp(asTime, function () { + $(this).remove(); + if (typeof settings.onHide === 'function') { + settings.onHide.call(); + } + }); + } else { + $(this).slideUp(asTime, function () { + if (typeof settings.onHide === 'function') { + settings.onHide.call(); + } + }); + } + }); + }; + + if (settings.jqObject) { + bar = settings.jqObject; + settings.html = bar.html(); + } else { + bar = $("
") + .addClass("jquery-notify-bar") + .addClass(settings.cssClass) + .attr("id", "__notifyBar" + rand); + } + text_wrapper = $("") + .addClass("notify-bar-text-wrapper") + .html(settings.html); + + bar.html(text_wrapper).hide(); + + var id = bar.attr("id"); + switch (settings.animationSpeed) { + case "slow": + asTime = 600; + break; + case "default": + case "normal": + asTime = 400; + break; + case "fast": + asTime = 200; + break; + default: + asTime = settings.animationSpeed; + } + if (bar !== 'object') { + $("body").prepend(bar); + } + + // Style close button in CSS file + if (settings.close) { + // If close settings is true. Set delay to one billion seconds. + // It'a about 31 years - mre than enough for cases when notify bar is used. + settings.delay = Math.pow(10, 9); + bar.append($("" + settings.closeText + "")); + $(".notify-bar-close").click(function (event) { + event.preventDefault(); + bar.hideNB(); + }); + } + + // Check if we've got any visible bars and if we have, + // slide them up before showing the new one + if ($('.jquery-notify-bar:visible').length > 0) { + $('.jquery-notify-bar:visible').stop().slideUp(asTime, function () { + bar.showNB(); + }); + } else { + bar.showNB(); + } + + // Allow the user to click on the bar to close it + if (settings.closeOnClick) { + bar.click(function () { + bar.hideNB(); + }); + } + + // Allow the user to move mouse on the bar to close it + if (settings.closeOnOver) { + bar.mouseover(function () { + bar.hideNB(); + }); + } + + setTimeout(function () { + bar.hideNB(settings.delay); + }, settings.delay + asTime); + + if (settings.position === 'bottom') { + bar.addClass('bottom'); + } else if (settings.position === 'top') { + bar.addClass('top'); + } + }; +})(jQuery); \ No newline at end of file diff --git a/views/index.ejs b/views/index.ejs index 76641db..c63cc6c 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -6,6 +6,7 @@ <%= title %> + <% for(var i=0; i <% } %> @@ -14,6 +15,7 @@ + <% for(var i=0; i <% } %>