1. Added notification plugin for the temporal graph vis,
2. Made sure that notification appears when more than 10 entites are attempted to be compared.
This commit is contained in:
cdtank
parent
1e27c494eb
commit
c5904868c0
6 changed files with 252 additions and 12 deletions
16
productMods/css/jquery_plugins/ui.notify.css
Normal file
16
productMods/css/jquery_plugins/ui.notify.css
Normal file
|
|
@ -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; }
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
140
productMods/js/jquery_plugins/jquery.notify.js
Normal file
140
productMods/js/jquery_plugins/jquery.notify.js
Normal file
|
|
@ -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("<div></div>").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("<div></div>").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);
|
||||
16
productMods/js/jquery_plugins/jquery.notify.min.js
vendored
Normal file
16
productMods/js/jquery_plugins/jquery.notify.min.js
vendored
Normal file
|
|
@ -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("<div></div>").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("<div></div>").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);
|
||||
|
|
@ -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 = $('<tr>');
|
||||
|
||||
var checkboxTD = $('<td>');
|
||||
checkboxTD.html('<input type="checkbox" class="if_clicked_on_school" value="' + index + '"'+'/>');
|
||||
checkboxTD.html('<div class="disabled-checkbox-event-receiver"> </div><input type="checkbox" class="if_clicked_on_school" value="' + index + '"'+'/>');
|
||||
|
||||
var labelTD = $('<td>');
|
||||
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();
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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 @@
|
|||
<script type="text/javascript" src="${flot}"></script>
|
||||
<script type="text/javascript" src="${fliptext}"></script>
|
||||
|
||||
<script type="text/javascript" src="${jgrowl}"></script>
|
||||
<!--
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
|
||||
-->
|
||||
|
||||
<script type="text/javascript" src="${jqueryUI}"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript" src="${datatable}"></script>
|
||||
<script type="text/javascript" src="${autoellipsis}"></script>
|
||||
<script type="text/javascript" src="${entityComparisonUtils}"></script>
|
||||
<script type="text/javascript" src="${entityComparisonConstants}"></script>
|
||||
<script type="text/javascript" src="${jqueryNotify}"></script>
|
||||
|
||||
<#-- 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" />
|
||||
|
||||
<link href="${jgrowlStyle}" rel="stylesheet" type="text/css" />
|
||||
<link href="${jqueryUIStyle}" rel="stylesheet" type="text/css" />
|
||||
<link href="${demoTable}" rel="stylesheet" type="text/css" />
|
||||
<link href="${entityComparisonStyle}" rel="stylesheet" type="text/css" />
|
||||
<link href="${vizStyle}" rel="stylesheet" type="text/css" />
|
||||
<link href="${jqueryNotifyStyle}" rel="stylesheet" type="text/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}";
|
|||
</script>
|
||||
|
||||
<div id="body">
|
||||
|
||||
<h2 style="width: 36%; padding-left:45px;"><a href="" id = "organizationMoniker"></a></h2>
|
||||
<div id="leftblock">
|
||||
<div id="leftUpper">
|
||||
|
|
@ -229,6 +265,25 @@ var temporalGraphSmallIcon = "${temporalGraphSmallIcon}";
|
|||
</div>
|
||||
|
||||
<div id="leftLower">
|
||||
<div id="notification-container" style="display:none">
|
||||
|
||||
<div id="error-notification" class="ui-state-error" style="padding:10px; -moz-box-shadow:0 0 6px #980000; -webkit-box-shadow:0 0 6px #980000; box-shadow:0 0 6px #980000;">
|
||||
<a class="ui-notify-close" href="#"><span class="ui-icon ui-icon-close" style="float:right"></span></a>
|
||||
<span style="float:left; margin:0 5px 0 0;" class="ui-icon ui-icon-alert"></span>
|
||||
<h1>#{title}</h1>
|
||||
<p>#{text}</p>
|
||||
<p style="text-align:center"><a class="ui-notify-close" href="#">Close Me</a></p>
|
||||
</div>
|
||||
|
||||
<div id="warning-notification" class="ui-state-error" style="padding:10px; -moz-box-shadow:0 0 6px #980000; -webkit-box-shadow:0 0 6px #980000; box-shadow:0 0 6px #980000;">
|
||||
<a class="ui-notify-close" href="#"><span class="ui-icon ui-icon-close" style="float:right"></span></a>
|
||||
<span style="float:left; margin:0 5px 0 0;" class="ui-icon ui-icon-alert"></span>
|
||||
<h1>#{title}</h1>
|
||||
<p>#{text}</p>
|
||||
<p style="text-align:center"><a class="ui-notify-close" href="#">Close Me</a></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<h3>Who do you want to compare?</h3>
|
||||
<div id="paginatedTable">
|
||||
</div>
|
||||
|
|
@ -259,5 +314,6 @@ var temporalGraphSmallIcon = "${temporalGraphSmallIcon}";
|
|||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
Loading…
Add table
Reference in a new issue