commit 4b6a138bcbba4d91e8056694d800f29e5dac74d0 Author: Sathyanarayanan Gunasekaran <gsathya.ceg@gmail.com> Date: Mon Aug 27 20:47:01 2012 +0530 Add tooltips and expand some table headers Tooltips now explain what some of the non-obvious table headers stand for. Some of the abbreviated table headers are expanded. --- static/js/bootstrap-tooltip.js | 275 ++++++++++++++++++++++++++++++++++++++++ templates/result.html | 23 ++-- 2 files changed, 287 insertions(+), 11 deletions(-) diff --git a/static/js/bootstrap-tooltip.js b/static/js/bootstrap-tooltip.js new file mode 100755 index 0000000..b476f1c --- /dev/null +++ b/static/js/bootstrap-tooltip.js @@ -0,0 +1,275 @@ +/* =========================================================== + * bootstrap-tooltip.js v2.0.4 + * http://twitter.github.com/bootstrap/javascript.html#tooltips + * Inspired by the original jQuery.tipsy by Jason Frame + * =========================================================== + * Copyright 2012 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ========================================================== */ + + +!function ($) { + + "use strict"; // jshint ;_; + + + /* TOOLTIP PUBLIC CLASS DEFINITION + * =============================== */ + + var Tooltip = function (element, options) { + this.init('tooltip', element, options) + } + + Tooltip.prototype = { + + constructor: Tooltip + + , init: function (type, element, options) { + var eventIn + , eventOut + + this.type = type + this.$element = $(element) + this.options = this.getOptions(options) + this.enabled = true + + if (this.options.trigger != 'manual') { + eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus' + eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur' + this.$element.on(eventIn, this.options.selector, $.proxy(this.enter, this)) + this.$element.on(eventOut, this.options.selector, $.proxy(this.leave, this)) + } + + this.options.selector ? + (this._options = $.extend({}, this.options, { trigger: 'manual', selector: '' })) : + this.fixTitle() + } + + , getOptions: function (options) { + options = $.extend({}, $.fn[this.type].defaults, options, this.$element.data()) + + if (options.delay && typeof options.delay == 'number') { + options.delay = { + show: options.delay + , hide: options.delay + } + } + + return options + } + + , enter: function (e) { + var self = $(e.currentTarget)[this.type](this._options).data(this.type) + + if (!self.options.delay || !self.options.delay.show) return self.show() + + clearTimeout(this.timeout) + self.hoverState = 'in' + this.timeout = setTimeout(function() { + if (self.hoverState == 'in') self.show() + }, self.options.delay.show) + } + + , leave: function (e) { + var self = $(e.currentTarget)[this.type](this._options).data(this.type) + + if (this.timeout) clearTimeout(this.timeout) + if (!self.options.delay || !self.options.delay.hide) return self.hide() + + self.hoverState = 'out' + this.timeout = setTimeout(function() { + if (self.hoverState == 'out') self.hide() + }, self.options.delay.hide) + } + + , show: function () { + var $tip + , inside + , pos + , actualWidth + , actualHeight + , placement + , tp + + if (this.hasContent() && this.enabled) { + $tip = this.tip() + this.setContent() + + if (this.options.animation) { + $tip.addClass('fade') + } + + placement = typeof this.options.placement == 'function' ? + this.options.placement.call(this, $tip[0], this.$element[0]) : + this.options.placement + + inside = /in/.test(placement) + + $tip + .remove() + .css({ top: 0, left: 0, display: 'block' }) + .appendTo(inside ? this.$element : document.body) + + pos = this.getPosition(inside) + + actualWidth = $tip[0].offsetWidth + actualHeight = $tip[0].offsetHeight + + switch (inside ? placement.split(' ')[1] : placement) { + case 'bottom': + tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2} + break + case 'top': + tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2} + break + case 'left': + tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth} + break + case 'right': + tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width} + break + } + + $tip + .css(tp) + .addClass(placement) + .addClass('in') + } + } + + , isHTML: function(text) { + // html string detection logic adapted from jQuery + return typeof text != 'string' + || ( text.charAt(0) === "<" + && text.charAt( text.length - 1 ) === ">" + && text.length >= 3 + ) || /^(?:[^<]*<[\w\W]+>[^>]*$)/.exec(text) + } + + , setContent: function () { + var $tip = this.tip() + , title = this.getTitle() + + $tip.find('.tooltip-inner')[this.isHTML(title) ? 'html' : 'text'](title) + $tip.removeClass('fade in top bottom left right') + } + + , hide: function () { + var that = this + , $tip = this.tip() + + $tip.removeClass('in') + + function removeWithAnimation() { + var timeout = setTimeout(function () { + $tip.off($.support.transition.end).remove() + }, 500) + + $tip.one($.support.transition.end, function () { + clearTimeout(timeout) + $tip.remove() + }) + } + + $.support.transition && this.$tip.hasClass('fade') ? + removeWithAnimation() : + $tip.remove() + } + + , fixTitle: function () { + var $e = this.$element + if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') { + $e.attr('data-original-title', $e.attr('title') || '').removeAttr('title') + } + } + + , hasContent: function () { + return this.getTitle() + } + + , getPosition: function (inside) { + return $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), { + width: this.$element[0].offsetWidth + , height: this.$element[0].offsetHeight + }) + } + + , getTitle: function () { + var title + , $e = this.$element + , o = this.options + + title = $e.attr('data-original-title') + || (typeof o.title == 'function' ? o.title.call($e[0]) : o.title) + + return title + } + + , tip: function () { + return this.$tip = this.$tip || $(this.options.template) + } + + , validate: function () { + if (!this.$element[0].parentNode) { + this.hide() + this.$element = null + this.options = null + } + } + + , enable: function () { + this.enabled = true + } + + , disable: function () { + this.enabled = false + } + + , toggleEnabled: function () { + this.enabled = !this.enabled + } + + , toggle: function () { + this[this.tip().hasClass('in') ? 'hide' : 'show']() + } + + } + + + /* TOOLTIP PLUGIN DEFINITION + * ========================= */ + + $.fn.tooltip = function ( option ) { + return this.each(function () { + var $this = $(this) + , data = $this.data('tooltip') + , options = typeof option == 'object' && option + if (!data) $this.data('tooltip', (data = new Tooltip(this, options))) + if (typeof option == 'string') data[option]() + }) + } + + $.fn.tooltip.Constructor = Tooltip + + $.fn.tooltip.defaults = { + animation: true + , placement: 'top' + , selector: false + , template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' + , trigger: 'hover' + , title: '' + , delay: 0 + } + +}(window.jQuery); diff --git a/templates/result.html b/templates/result.html index c3c9c44..8dc3b6e 100644 --- a/templates/result.html +++ b/templates/result.html @@ -48,24 +48,23 @@ </div> <div class="container"> - <div class="hero-unit"> <table class="table table-striped table-condensed table-hover table-bordered"> <thead> <tr> <th>#</th> - <th>CW</th> - <th>Advertised Bandwidth</th> - <th>P_Guard</th> - <th>P_Middle</th> - <th>P_Exit</th> + <th><span rel="tooltip" title="Relative bandwidth weight assigned to this relay by the directory authorities">Consensus Weights</span></th> + <th><span rel="tooltip" title="Relative advertised bandwidth of this relay compared to the total advertised bandwidth in the network">Advertised Bandwidth</span></th> + <th><span rel="tooltip" title=" Probability of this relay to be selected for the guard position">Guard Probability</span></th> + <th><span rel="tooltip" title="Probability of this relay to be selected for the middle position">Middle Probability</span></th> + <th><span rel="tooltip" title="Probability of this relay to be selected for the exit position">Exit Probability</span></th> <th>Nickname</th> <th>Fingerprint</th> <th>Exit</th> <th>Guard</th> - <th>CC</th> - <th>AS number</th> - <th>AS name</th> + <th>Country</th> + <th>Autonomous System Number</th> + <th>Autonomous System Name</th> </tr> </thead> <tbody> @@ -114,11 +113,14 @@ <!-- Placed at the end of the document so the pages load faster --> <script src="{{ url_for('static', filename='js/jquery-1.8.0.min.js') }}"></script> + <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script> <script src="{{ url_for('static', filename='js/custom.js') }}"></script> + <script src="{{ url_for('static', filename='js/bootstrap-tooltip.js') }}"></script> - <script> + <script> $(document).ready(function() { addListener(); + $('span[rel=tooltip]').tooltip(); }); </script> <!-- @@ -128,7 +130,6 @@ <script src="{{ url_for('static', filename='js/bootstrap-dropdown.js') }}"></script> <script src="{{ url_for('static', filename='js/bootstrap-scrollspy.js') }}"></script> <script src="{{ url_for('static', filename='js/bootstrap-tab.js') }}"></script> - <script src="{{ url_for('static', filename='js/bootstrap-tooltip.js') }}"></script> <script src="{{ url_for('static', filename='js/bootstrap-popover.js') }}"></script> <script src="{{ url_for('static', filename='js/bootstrap-button.js') }}"></script> <script src="{{ url_for('static', filename='js/bootstrap-collapse.js') }}"></script>