diff --git a/productMods/css/jquery_plugins/ui.notify.css b/productMods/css/jquery_plugins/ui.notify.css new file mode 100644 index 00000000..4ad11e3c --- /dev/null +++ b/productMods/css/jquery_plugins/ui.notify.css @@ -0,0 +1,16 @@ +.ui-notify { width:350px; position:fixed; top:10px; right:10px; } +.ui-notify-message { padding:10px; margin-bottom:15px; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px } +.ui-notify-message h1 { font-size:14px; margin:0; padding:0 } +.ui-notify-message p { margin:3px 0; padding:0; line-height:18px } +.ui-notify-message:last-child { margin-bottom:0 } +.ui-notify-message-style { background:#000; background:rgba(0,0,0,0.8); -moz-box-shadow: 0 0 6px #000; -webkit-box-shadow: 0 0 6px #000; box-shadow: 0 0 6px #000; } +.ui-notify-message-style h1 { color:#fff; font-weight:bold } +.ui-notify-message-style p { color:#fff } +.ui-notify-close { color:#fff; text-decoration:underline } +.ui-notify-click { cursor:pointer } +.ui-notify-cross { margin-top:-4px; float:right; cursor:pointer; text-decoration:none; font-size:12px; font-weight:bold; text-shadow:0 1px 1px #fff; padding:2px } +.ui-notify-cross:hover { color:#ffffab } +.ui-notify-cross:active { position:relative; top:1px } + +.ui-state-error h1 { font-size:14px; margin:0; padding:0; color: #CD0A0A; font-weight: bold; } +.ui-state-error p { color: #CD0A0A; } \ No newline at end of file diff --git a/productMods/css/visualization/entitycomparison/layout.css b/productMods/css/visualization/entitycomparison/layout.css index bd0b5915..892221a0 100644 --- a/productMods/css/visualization/entitycomparison/layout.css +++ b/productMods/css/visualization/entitycomparison/layout.css @@ -58,6 +58,17 @@ form{ text-align: center; } +#notification-container { +position: inherit; +} + +.disabled-checkbox-event-receiver { + height: 21px; + position: absolute; + width: 21px; + display:none; +} + #functions{ margin-top: 20px; margin-bottom: -40px; diff --git a/productMods/js/jquery_plugins/jquery.notify.js b/productMods/js/jquery_plugins/jquery.notify.js new file mode 100644 index 00000000..9507d656 --- /dev/null +++ b/productMods/js/jquery_plugins/jquery.notify.js @@ -0,0 +1,140 @@ +/* + * jQuery Notify UI Widget 1.4 + * Copyright (c) 2010 Eric Hynds + * + * http://www.erichynds.com/jquery/a-jquery-ui-growl-ubuntu-notification-widget/ + * + * Depends: + * - jQuery 1.4 + * - jQuery UI 1.8 widget factory + * + * Dual licensed under the MIT and GPL licenses: + * http://www.opensource.org/licenses/mit-license.php + * http://www.gnu.org/licenses/gpl.html + * +*/ +(function($){ + +$.widget("ech.notify", { + options: { + speed: 500, + expires: 5000, + stack: 'below', + custom: false + }, + _create: function(){ + var self = this; + this.templates = {}; + this.keys = []; + + // build and save templates + this.element.addClass("ui-notify").children().addClass("ui-notify-message ui-notify-message-style").each(function(i){ + var key = this.id || i; + self.keys.push(key); + self.templates[key] = $(this).removeAttr("id").wrap("
").parent().html(); // because $(this).andSelf().html() no workie + }).end().empty().show(); + }, + create: function(template, msg, opts){ + if(typeof template === "object"){ + opts = msg; + msg = template; + template = null; + } + + var tpl = this.templates[ template || this.keys[0]]; + + // remove default styling class if rolling w/ custom classes + if(opts && opts.custom){ + tpl = $(tpl).removeClass("ui-notify-message-style").wrap("
").parent().html(); + } + + // return a new notification instance + return new $.ech.notify.instance(this)._create(msg, $.extend({}, this.options, opts), tpl); + } +}); + +// instance constructor +$.extend($.ech.notify, { + instance: function(widget){ + this.parent = widget; + this.isOpen = false; + } +}); + +// instance methods +$.extend($.ech.notify.instance.prototype, { + _create: function(params, options, template){ + this.options = options; + + var self = this, + + // build html template + html = template.replace(/#(?:\{|%7B)(.*?)(?:\}|%7D)/g, function($1, $2){ + return ($2 in params) ? params[$2] : ''; + }), + + // the actual message + m = (this.element = $(html)), + + // close link + closelink = m.find(".ui-notify-close"); + + // clickable? + if(typeof this.options.click === "function"){ + m.addClass("ui-notify-click").bind("click", function(e){ + self._trigger("click", e, self); + }); + } + + // show close link? + if(closelink.length){ + closelink.bind("click", function(){ + self.close(); + return false; + }); + } + + this.open(); + + // auto expire? + if(typeof options.expires === "number"){ + window.setTimeout(function(){ + self.close(); + }, options.expires); + } + + return this; + }, + close: function(){ + var self = this, speed = this.options.speed; + + this.element.fadeTo(speed, 0).slideUp(speed, function(){ + self._trigger("close"); + self.isOpen = false; + }); + + return this; + }, + open: function(){ + if(this.isOpen || this._trigger("beforeopen") === false){ + return this; + } + + var self = this; + + this.element[this.options.stack === 'above' ? 'prependTo' : 'appendTo'](this.parent.element).css({ display:"none", opacity:"" }).fadeIn(this.options.speed, function(){ + self._trigger("open"); + self.isOpen = true; + }); + + return this; + }, + widget: function(){ + return this.element; + }, + _trigger: function(type, e, instance){ + return this.parent._trigger.call( this, type, e, instance ); + } +}); + +})(jQuery); \ No newline at end of file diff --git a/productMods/js/jquery_plugins/jquery.notify.min.js b/productMods/js/jquery_plugins/jquery.notify.min.js new file mode 100644 index 00000000..babc0d1d --- /dev/null +++ b/productMods/js/jquery_plugins/jquery.notify.min.js @@ -0,0 +1,16 @@ +/* + * jQuery Notify UI Widget 1.4 + * Copyright (c) 2010 Eric Hynds + * + * http://www.erichynds.com/jquery/a-jquery-ui-growl-ubuntu-notification-widget/ + * + * Depends: + * - jQuery 1.4 + * - jQuery UI 1.8 widget factory + * + * Dual licensed under the MIT and GPL licenses: + * http://www.opensource.org/licenses/mit-license.php + * http://www.gnu.org/licenses/gpl.html + * +*/ +(function(d){d.widget("ech.notify",{options:{speed:500,expires:5E3,stack:"below",custom:false},_create:function(){var a=this;this.templates={};this.keys=[];this.element.addClass("ui-notify").children().addClass("ui-notify-message ui-notify-message-style").each(function(b){b=this.id||b;a.keys.push(b);a.templates[b]=d(this).removeAttr("id").wrap("
").parent().html()}).end().empty().show()},create:function(a,b,c){if(typeof a==="object"){c=b;b=a;a=null}a=this.templates[a||this.keys[0]];if(c&&c.custom)a=d(a).removeClass("ui-notify-message-style").wrap("
").parent().html();return(new d.ech.notify.instance(this))._create(b,d.extend({},this.options,c),a)}});d.extend(d.ech.notify,{instance:function(a){this.parent=a;this.isOpen=false}});d.extend(d.ech.notify.instance.prototype,{_create:function(a,b,c){this.options=b;var e=this;c=c.replace(/#(?:\{|%7B)(.*?)(?:\}|%7D)/g,function(f,g){return g in a?a[g]:""});c=this.element=d(c);var h=c.find(".ui-notify-close");typeof this.options.click==="function"&&c.addClass("ui-notify-click").bind("click",function(f){e._trigger("click",f,e)});h.length&&h.bind("click",function(){e.close();return false});this.open();typeof b.expires==="number"&&window.setTimeout(function(){e.close()},b.expires);return this},close:function(){var a=this,b=this.options.speed;this.isOpen=false;this.element.fadeTo(b,0).slideUp(b,function(){a._trigger("close")});return this},open:function(){if(this.isOpen||this._trigger("beforeopen")===false)return this;var a=this;this.isOpen=true;this.element[this.options.stack==="above"?"prependTo":"appendTo"](this.parent.element).css({display:"none",opacity:""}).fadeIn(this.options.speed,function(){a._trigger("open")});return this},widget:function(){return this.element},_trigger:function(a,b,c){return this.parent._trigger.call(this,a,b,c)}})})(jQuery); \ No newline at end of file diff --git a/productMods/js/visualization/entitycomparison/util.js b/productMods/js/visualization/entitycomparison/util.js index e176d53d..07074377 100644 --- a/productMods/js/visualization/entitycomparison/util.js +++ b/productMods/js/visualization/entitycomparison/util.js @@ -660,14 +660,13 @@ function clearRenderedObjects(){ } +function createNotification( template, vars, opts ){ + return $notificationContainer.notify("create", template, vars, opts); +} + function updateCounter(){ //notification about the max items that can be clicked $("#counter").text(renderedObjects.length); - if (freeColors.length == 0) { - $.jGrowl("You can not select more than 10 entities at one time.", { - life: 3000 - }); - } } function displayLineGraphs(){ @@ -737,7 +736,7 @@ function prepareTableForDataTablePagination(jsonData){ var row = $(''); var checkboxTD = $(''); - checkboxTD.html(''); + checkboxTD.html('
 
'); var labelTD = $(''); labelTD.css("width", "100px"); @@ -876,6 +875,7 @@ function disableUncheckedEntities(){ $.each($("input[type=checkbox].if_clicked_on_school:not(:checked)"), function(index, val){ $(val).attr('disabled', true); + $(val).prev().show(); }); //console.log($("input[type=checkbox].if_clicked_on_school:not(:checked)")); @@ -887,6 +887,7 @@ function enableUncheckedEntities(){ $.each($("input[type=checkbox].if_clicked_on_school:not(:checked)"), function(index, val){ $(val).attr('disabled', false); + $(val).prev().hide(); }); diff --git a/productMods/templates/freemarker/visualization/entitycomparison/entityComparisonStandaloneActivator.ftl b/productMods/templates/freemarker/visualization/entitycomparison/entityComparisonStandaloneActivator.ftl index 5e7c9eaa..2afcf1a8 100644 --- a/productMods/templates/freemarker/visualization/entitycomparison/entityComparisonStandaloneActivator.ftl +++ b/productMods/templates/freemarker/visualization/entitycomparison/entityComparisonStandaloneActivator.ftl @@ -20,7 +20,10 @@ <#assign flot = '${urls.base}/js/visualization/entitycomparison/jquery_plugins/flot/jquery.flot.js'> <#assign fliptext = '${urls.base}/js/visualization/entitycomparison/jquery_plugins/fliptext/jquery.mb.flipText.js'> -<#assign jgrowl = '${urls.base}/js/visualization/entitycomparison/jquery_plugins/jgrowl/jquery.jgrowl.js'> + +<#assign jqueryNotify = '${urls.base}/js/jquery_plugins/jquery.notify.min.js'> +<#assign jqueryUI = '${urls.base}/js/jquery-ui/js/jquery-ui-1.8.4.custom.min.js'> + <#assign datatable = '${urls.base}/js/visualization/entitycomparison/jquery_plugins/datatable/jquery.dataTables.js'> <#assign autoellipsis = '${urls.base}/js/visualization/entitycomparison/jquery_plugins/jquery.AutoEllipsis.js'> @@ -30,26 +33,37 @@ - + + + + + + + <#-- CSS files --> -<#assign jgrowlStyle = "${urls.base}/js/visualization/entitycomparison/jquery_plugins/jgrowl/jquery.jgrowl.css" /> <#assign demoTable = "${urls.base}/js/visualization/entitycomparison/jquery_plugins/datatable/demo_table.css" /> +<#assign jqueryUIStyle = "${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.8.4.custom.css" /> +<#assign jqueryNotifyStyle = "${urls.base}/css/jquery_plugins/ui.notify.css" /> + <#assign entityComparisonStyle = "${urls.base}/css/visualization/entitycomparison/layout.css" /> <#assign vizStyle = "${urls.base}/css/visualization/visualization.css" /> - + + <#-- variables passed from server-side code --> @@ -77,6 +91,8 @@ var temporalGraphSmallIcon = "${temporalGraphSmallIcon}"; $("#organizationMoniker").text(organizationLabel); $("#organizationMoniker").attr("href", "${organizationVivoProfileURL}"); + $notificationContainer = $("#notification-container").notify(); + var jsonObject = { prepare : function(arg1){ loadData(arg1); @@ -157,12 +173,31 @@ var temporalGraphSmallIcon = "${temporalGraphSmallIcon}"; // setLineWidthAndTickSize(yearRange, FlotOptions); //setTickSizeOfYAxis(calcMaxOfComparisonParameter(labelToEntityRecord), FlotOptions); + + + $(".disabled-checkbox-event-receiver").live("click", function() { + + if ($(this).next().is(':disabled')) { + + createNotification("error-notification", { title:'Error', + text:'A Maximum 10 entities can be compared. Please remove some & try again.' },{ + custom: true, + expires: 3500 + }); + + } + + + }); + /* * When the elements in the paginated div * are clicked this event handler is called */ $("input.if_clicked_on_school").live('click', function(){ + + var checkbox = $(this); var checkboxValue = $(this).attr("value"); var entity = labelToEntityRecord[checkboxValue]; @@ -208,6 +243,7 @@ var temporalGraphSmallIcon = "${temporalGraphSmallIcon}";
+

@@ -229,6 +265,25 @@ var temporalGraphSmallIcon = "${temporalGraphSmallIcon}";
+

Who do you want to compare?

@@ -259,5 +314,6 @@ var temporalGraphSmallIcon = "${temporalGraphSmallIcon}";
-
-
+ + + \ No newline at end of file