From e2a176f8effd0413241f62cc81c6488bb12ba8f3 Mon Sep 17 00:00:00 2001 From: Andrey Savchenko Date: Wed, 4 Dec 2013 22:18:38 +0200 Subject: [PATCH] Switched tooltips implementation to modified Bootstrap script --- css/hint.css | 265 ------------------------------ css/laps.css | 110 ++++++++++++- css/laps.less | 31 ++-- css/mixins.less | 7 + css/tooltip.less | 94 +++++++++++ css/variables.less | 18 +++ js/tooltip.js | 387 ++++++++++++++++++++++++++++++++++++++++++++ src/class-laps.php | 35 +++- views/laps.mustache | 9 +- 9 files changed, 664 insertions(+), 292 deletions(-) delete mode 100644 css/hint.css create mode 100644 css/tooltip.less create mode 100644 css/variables.less create mode 100644 js/tooltip.js diff --git a/css/hint.css b/css/hint.css deleted file mode 100644 index 7290998..0000000 --- a/css/hint.css +++ /dev/null @@ -1,265 +0,0 @@ -/*! Hint.css - v1.2.1 - 2013-03-24 -* http://kushagragour.in/lab/hint/ -* Copyright (c) 2013 Kushagra Gour; Licensed MIT */ - -/*-------------------------------------*\ - HINT.css - A CSS tooltip library -\*-------------------------------------*/ -/** - * HINT.css is a tooltip library made in pure CSS. - * - * Source: https://github.com/chinchang/hint.css - * Demo: http://kushagragour.in/labs/hint/ - * - * Release under The MIT License - * - */ -/** - * source: hint-core.scss - * - * Defines the basic styling for the tooltip. - * Each tooltip is made of 2 parts: - * 1) body (:after) - * 2) arrow (:before) - * - * Classes added: - * 1) hint - */ -.hint, [data-hint] { - position: relative; - display: inline-block; - /** - * tooltip arrow - */ - /** - * tooltip body - */ } - .hint:before, .hint:after, [data-hint]:before, [data-hint]:after { - position: absolute; - visibility: hidden; - opacity: 0; - z-index: 1000000; - pointer-events: none; - -webkit-transition: 0.3s ease; - -moz-transition: 0.3s ease; - transition: 0.3s ease; } - .hint:hover:before, .hint:hover:after, [data-hint]:hover:before, [data-hint]:hover:after { - visibility: visible; - opacity: 1; } - .hint:before, [data-hint]:before { - content: ''; - position: absolute; - background: transparent; - border: 6px solid transparent; - z-index: 1000001; } - .hint:after, [data-hint]:after { - content: attr(data-hint); - background: #383838; - color: white; - text-shadow: 0 -1px 0px black; - padding: 8px 10px; - font-size: 12px; - line-height: 12px; - white-space: nowrap; - box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); } - -/** - * source: hint-position.scss - * - * Defines the positoning logic for the tooltips. - * - * Classes added: - * 1) hint--top - * 2) hint--bottom - * 3) hint--left - * 4) hint--right - */ -/** - * set default color for tooltip arrows - */ -.hint--top:before { - border-top-color: #383838; } - -.hint--bottom:before { - border-bottom-color: #383838; } - -.hint--left:before { - border-left-color: #383838; } - -.hint--right:before { - border-right-color: #383838; } - -/** - * top tooltip - */ -.hint--top:before { - margin-bottom: -12px; } -.hint--top:after { - margin-left: -18px; } -.hint--top:before, .hint--top:after { - bottom: 100%; - left: 50%; } -.hint--top:hover:before, .hint--top:hover:after { - -webkit-transform: translateY(-8px); - -moz-transform: translateY(-8px); - transform: translateY(-8px); } - -/** - * bottom tooltip - */ -.hint--bottom:before { - margin-top: -12px; } -.hint--bottom:after { - margin-left: -18px; } -.hint--bottom:before, .hint--bottom:after { - top: 100%; - left: 50%; } -.hint--bottom:hover:before, .hint--bottom:hover:after { - -webkit-transform: translateY(8px); - -moz-transform: translateY(8px); - transform: translateY(8px); } - -/** - * right tooltip - */ -.hint--right:before { - margin-left: -12px; - margin-bottom: -6px; } -.hint--right:after { - margin-bottom: -14px; } -.hint--right:before, .hint--right:after { - left: 100%; - bottom: 50%; } -.hint--right:hover:before, .hint--right:hover:after { - -webkit-transform: translateX(8px); - -moz-transform: translateX(8px); - transform: translateX(8px); } - -/** - * left tooltip - */ -.hint--left:before { - margin-right: -12px; - margin-bottom: -6px; } -.hint--left:after { - margin-bottom: -14px; } -.hint--left:before, .hint--left:after { - right: 100%; - bottom: 50%; } -.hint--left:hover:before, .hint--left:hover:after { - -webkit-transform: translateX(-8px); - -moz-transform: translateX(-8px); - transform: translateX(-8px); } - -/** - * source: hint-color-types.scss - * - * Contains tooltips of various types based on color differences. - * - * Classes added: - * 1) hint--error - * 2) hint--warning - * 3) hint--info - * 4) hint--success - * - */ -/** - * Error - */ -.hint--error:after { - background-color: #b34e4d; - text-shadow: 0 -1px 0px #5a2626; } -.hint--error.hint--top:before { - border-top-color: #b34e4d; } -.hint--error.hint--bottom:before { - border-bottom-color: #b34e4d; } -.hint--error.hint--left:before { - border-left-color: #b34e4d; } -.hint--error.hint--right:before { - border-right-color: #b34e4d; } - -/** - * Warning - */ -.hint--warning:after { - background-color: #c09854; - text-shadow: 0 -1px 0px #6d5228; } -.hint--warning.hint--top:before { - border-top-color: #c09854; } -.hint--warning.hint--bottom:before { - border-bottom-color: #c09854; } -.hint--warning.hint--left:before { - border-left-color: #c09854; } -.hint--warning.hint--right:before { - border-right-color: #c09854; } - -/** - * Info - */ -.hint--info:after { - background-color: #3986ac; - text-shadow: 0 -1px 0px #193c4c; } -.hint--info.hint--top:before { - border-top-color: #3986ac; } -.hint--info.hint--bottom:before { - border-bottom-color: #3986ac; } -.hint--info.hint--left:before { - border-left-color: #3986ac; } -.hint--info.hint--right:before { - border-right-color: #3986ac; } - -/** - * Success - */ -.hint--success:after { - background-color: #458746; - text-shadow: 0 -1px 0px #1a331a; } -.hint--success.hint--top:before { - border-top-color: #458746; } -.hint--success.hint--bottom:before { - border-bottom-color: #458746; } -.hint--success.hint--left:before { - border-left-color: #458746; } -.hint--success.hint--right:before { - border-right-color: #458746; } - -/** - * source: hint-always.scss - * - * Defines a persisted tooltip which shows always. - * - * Classes added: - * 1) hint--always - * - */ -.hint--always:after, .hint--always:before { - opacity: 1; - visibility: visible; } -.hint--always.hint--top:after, .hint--always.hint--top:before { - -webkit-transform: translateY(-8px); - -moz-transform: translateY(-8px); - transform: translateY(-8px); } -.hint--always.hint--bottom:after, .hint--always.hint--bottom:before { - -webkit-transform: translateY(8px); - -moz-transform: translateY(8px); - transform: translateY(8px); } -.hint--always.hint--left:after, .hint--always.hint--left:before { - -webkit-transform: translateX(-8px); - -moz-transform: translateX(-8px); - transform: translateX(-8px); } -.hint--always.hint--right:after, .hint--always.hint--right:before { - -webkit-transform: translateX(8px); - -moz-transform: translateX(8px); - transform: translateX(8px); } - -/** - * source: hint-rounded.scss - * - * Defines rounded corner tooltips. - * - * Classes added: - * 1) hint--rounded - * - */ -.hint--rounded:after { - border-radius: 4px; } diff --git a/css/laps.css b/css/laps.css index 647567c..efb0758 100644 --- a/css/laps.css +++ b/css/laps.css @@ -32,7 +32,7 @@ font-size: 12px; color: #fff; text-align: center; - background-color: #428bca; + background-color: #5bc0de; -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -webkit-transition: width 0.6s ease; @@ -52,11 +52,109 @@ #wpadminbar .laps-timeline .event-query { background-color: #5bc0de; } -#wpadminbar [data-hint]:after { - font-size: 13px; - background-color: #464646; - text-shadow: none; +#wpadminbar .tooltip { + position: absolute; + z-index: 100000; + display: block; + visibility: visible; + font-size: 12px; + line-height: 1.4; + opacity: 0; + filter: alpha(opacity=0); } -#wpadminbar .hint--bottom:before { +#wpadminbar .tooltip.in { + opacity: 0.9; + filter: alpha(opacity=90); +} +#wpadminbar .tooltip.top { + margin-top: -3px; + padding: 5px 0; +} +#wpadminbar .tooltip.right { + margin-left: 3px; + padding: 0 5px; +} +#wpadminbar .tooltip.bottom { + margin-top: 3px; + padding: 5px 0; +} +#wpadminbar .tooltip.left { + margin-left: -3px; + padding: 0 5px; +} +#wpadminbar .tooltip-inner { + max-width: 300px; + padding: 3px 8px; + color: #cccccc; + text-align: center; + text-decoration: none; + background-color: #464646; + border-radius: 4px; +} +#wpadminbar .tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; +} +#wpadminbar .tooltip.top .tooltip-arrow { + bottom: 0; + left: 50%; + margin-left: -5px; + border-width: 5px 5px 0; + border-top-color: #464646; +} +#wpadminbar .tooltip.top-left .tooltip-arrow { + bottom: 0; + left: 5px; + border-width: 5px 5px 0; + border-top-color: #464646; +} +#wpadminbar .tooltip.top-right .tooltip-arrow { + bottom: 0; + right: 5px; + border-width: 5px 5px 0; + border-top-color: #464646; +} +#wpadminbar .tooltip.right .tooltip-arrow { + top: 50%; + left: 0; + margin-top: -5px; + border-width: 5px 5px 5px 0; + border-right-color: #464646; +} +#wpadminbar .tooltip.left .tooltip-arrow { + top: 50%; + right: 0; + margin-top: -5px; + border-width: 5px 0 5px 5px; + border-left-color: #464646; +} +#wpadminbar .tooltip.bottom .tooltip-arrow { + top: 0; + left: 50%; + margin-left: -5px; + border-width: 0 5px 5px; border-bottom-color: #464646; } +#wpadminbar .tooltip.bottom-left .tooltip-arrow { + top: 0; + left: 5px; + border-width: 0 5px 5px; + border-bottom-color: #464646; +} +#wpadminbar .tooltip.bottom-right .tooltip-arrow { + top: 0; + right: 5px; + border-width: 0 5px 5px; + border-bottom-color: #464646; +} +#wpadminbar .tooltip.in { + opacity: 1; + filter: alpha(opacity=100); +} +#wpadminbar .tooltip-inner { + line-height: 20px; + text-align: left; +} diff --git a/css/laps.less b/css/laps.less index 91cb038..3efdc20 100644 --- a/css/laps.less +++ b/css/laps.less @@ -1,8 +1,10 @@ +@import "variables.less"; @import "mixins.less"; #wpadminbar { #wp-admin-bar-laps { + .ab-sub-wrapper { min-width: 90%; width: 90%; @@ -32,7 +34,7 @@ overflow: hidden; height: 20px; margin: 6px 0; - background-color: #f5f5f5; + background-color: @timeline-bg; border-radius: 4px; .box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); } @@ -41,40 +43,41 @@ float: left; width: 0%; height: 20px; - font-size: 12px; + font-size: @font-size-small; color: #fff; text-align: center; - background-color: #428bca; + background-color: @event-info-color; .box-shadow(inset 0 -1px 0 rgba(0, 0, 0, .15)); .transition(width .6s ease); position: absolute; // disable stacking at start - border-left: 1px solid #f5f5f5; + border-left: 1px solid @timeline-bg; } .laps-timeline .event-theme { - background-color: #5cb85c; + background-color: @event-theme-color; } .laps-timeline .event-plugin { - background-color: #428bca; + background-color: @event-plugin-color; } .laps-timeline .event-core { - background-color: #f0ad4e; + background-color: @event-core-color; } .laps-timeline .event-query { - background-color: #5bc0de; + background-color: @event-info-color; } - [data-hint]:after { - font-size: 13px; - background-color: #464646; - text-shadow: none; + @import "tooltip.less"; + + .tooltip.in { + .opacity(1); } - .hint--bottom:before { - border-bottom-color: #464646; + .tooltip-inner { + line-height: 20px; + text-align: left; } } diff --git a/css/mixins.less b/css/mixins.less index 0c58afe..8b7191e 100644 --- a/css/mixins.less +++ b/css/mixins.less @@ -6,4 +6,11 @@ .box-shadow(@shadow) { -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1 box-shadow: @shadow; +} + +.opacity(@opacity) { + opacity: @opacity; + // IE8 filter + @opacity-ie: (@opacity * 100); + filter: ~"alpha(opacity=@{opacity-ie})"; } \ No newline at end of file diff --git a/css/tooltip.less b/css/tooltip.less new file mode 100644 index 0000000..1814b01 --- /dev/null +++ b/css/tooltip.less @@ -0,0 +1,94 @@ +// +// Tooltips +// -------------------------------------------------- + +// Base class +.tooltip { + position: absolute; + z-index: @zindex-tooltip; + display: block; + visibility: visible; + font-size: @font-size-small; + line-height: 1.4; + .opacity(0); + + &.in { .opacity(.9); } + &.top { margin-top: -3px; padding: @tooltip-arrow-width 0; } + &.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; } + &.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; } + &.left { margin-left: -3px; padding: 0 @tooltip-arrow-width; } +} + +// Wrapper for the tooltip content +.tooltip-inner { + max-width: @tooltip-max-width; + padding: 3px 8px; + color: @tooltip-color; + text-align: center; + text-decoration: none; + background-color: @tooltip-bg; + border-radius: @border-radius-base; +} + +// Arrows +.tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; +} +.tooltip { + &.top .tooltip-arrow { + bottom: 0; + left: 50%; + margin-left: -@tooltip-arrow-width; + border-width: @tooltip-arrow-width @tooltip-arrow-width 0; + border-top-color: @tooltip-arrow-color; + } + &.top-left .tooltip-arrow { + bottom: 0; + left: @tooltip-arrow-width; + border-width: @tooltip-arrow-width @tooltip-arrow-width 0; + border-top-color: @tooltip-arrow-color; + } + &.top-right .tooltip-arrow { + bottom: 0; + right: @tooltip-arrow-width; + border-width: @tooltip-arrow-width @tooltip-arrow-width 0; + border-top-color: @tooltip-arrow-color; + } + &.right .tooltip-arrow { + top: 50%; + left: 0; + margin-top: -@tooltip-arrow-width; + border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0; + border-right-color: @tooltip-arrow-color; + } + &.left .tooltip-arrow { + top: 50%; + right: 0; + margin-top: -@tooltip-arrow-width; + border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width; + border-left-color: @tooltip-arrow-color; + } + &.bottom .tooltip-arrow { + top: 0; + left: 50%; + margin-left: -@tooltip-arrow-width; + border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; + border-bottom-color: @tooltip-arrow-color; + } + &.bottom-left .tooltip-arrow { + top: 0; + left: @tooltip-arrow-width; + border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; + border-bottom-color: @tooltip-arrow-color; + } + &.bottom-right .tooltip-arrow { + top: 0; + right: @tooltip-arrow-width; + border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; + border-bottom-color: @tooltip-arrow-color; + } +} diff --git a/css/variables.less b/css/variables.less new file mode 100644 index 0000000..e4f7629 --- /dev/null +++ b/css/variables.less @@ -0,0 +1,18 @@ +@font-size-small: 12px; + +// colors +@timeline-bg: #f5f5f5; +@event-theme-color: #5cb85c; +@event-plugin-color: #428bca; +@event-core-color: #f0ad4e; +@event-info-color: #5bc0de; +@event-warning-color: #d9534f; + +// because admin bar is 99999 +@zindex-tooltip: 100000; +@tooltip-max-width: 300px; +@tooltip-color: #ccc; +@tooltip-bg: #464646; +@tooltip-arrow-width: 5px; +@tooltip-arrow-color: @tooltip-bg; +@border-radius-base: 4px; \ No newline at end of file diff --git a/js/tooltip.js b/js/tooltip.js new file mode 100644 index 0000000..3749141 --- /dev/null +++ b/js/tooltip.js @@ -0,0 +1,387 @@ +/* ======================================================================== + * Bootstrap: tooltip.js v3.0.2 + * http://getbootstrap.com/javascript/#tooltip + * Inspired by the original jQuery.tipsy by Jason Frame + * ======================================================================== + * Copyright 2013 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. + * ======================================================================== */ + +// modified to use lapstooltip as name + ++function ($) { "use strict"; + + // TOOLTIP PUBLIC CLASS DEFINITION + // =============================== + + var Tooltip = function (element, options) { + this.type = + this.options = + this.enabled = + this.timeout = + this.hoverState = + this.$element = null + + this.init('lapstooltip', element, options) + } + + Tooltip.DEFAULTS = { + animation: true + , placement: 'top' + , selector: false + , template: '
' + , trigger: 'hover focus' + , title: '' + , delay: 0 + , html: false + , container: false + } + + Tooltip.prototype.init = function (type, element, options) { + this.enabled = true + this.type = type + this.$element = $(element) + this.options = this.getOptions(options) + + var triggers = this.options.trigger.split(' ') + + for (var i = triggers.length; i--;) { + var trigger = triggers[i] + + if (trigger == 'click') { + this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this)) + } else if (trigger != 'manual') { + var eventIn = trigger == 'hover' ? 'mouseenter' : 'focus' + var eventOut = trigger == 'hover' ? 'mouseleave' : 'blur' + + this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this)) + this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this)) + } + } + + this.options.selector ? + (this._options = $.extend({}, this.options, { trigger: 'manual', selector: '' })) : + this.fixTitle() + } + + Tooltip.prototype.getDefaults = function () { + return Tooltip.DEFAULTS + } + + Tooltip.prototype.getOptions = function (options) { + options = $.extend({}, this.getDefaults(), this.$element.data(), options) + + if (options.delay && typeof options.delay == 'number') { + options.delay = { + show: options.delay + , hide: options.delay + } + } + + return options + } + + Tooltip.prototype.getDelegateOptions = function () { + var options = {} + var defaults = this.getDefaults() + + this._options && $.each(this._options, function (key, value) { + if (defaults[key] != value) options[key] = value + }) + + return options + } + + Tooltip.prototype.enter = function (obj) { + var self = obj instanceof this.constructor ? + obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type) + + clearTimeout(self.timeout) + + self.hoverState = 'in' + + if (!self.options.delay || !self.options.delay.show) return self.show() + + self.timeout = setTimeout(function () { + if (self.hoverState == 'in') self.show() + }, self.options.delay.show) + } + + Tooltip.prototype.leave = function (obj) { + var self = obj instanceof this.constructor ? + obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type) + + clearTimeout(self.timeout) + + self.hoverState = 'out' + + if (!self.options.delay || !self.options.delay.hide) return self.hide() + + self.timeout = setTimeout(function () { + if (self.hoverState == 'out') self.hide() + }, self.options.delay.hide) + } + + Tooltip.prototype.show = function () { + var e = $.Event('show.bs.'+ this.type) + + if (this.hasContent() && this.enabled) { + this.$element.trigger(e) + + if (e.isDefaultPrevented()) return + + var $tip = this.tip() + + this.setContent() + + if (this.options.animation) $tip.addClass('fade') + + var placement = typeof this.options.placement == 'function' ? + this.options.placement.call(this, $tip[0], this.$element[0]) : + this.options.placement + + var autoToken = /\s?auto?\s?/i + var autoPlace = autoToken.test(placement) + if (autoPlace) placement = placement.replace(autoToken, '') || 'top' + + $tip + .detach() + .css({ top: 0, left: 0, display: 'block' }) + .addClass(placement) + + this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element) + + var pos = this.getPosition() + var actualWidth = $tip[0].offsetWidth + var actualHeight = $tip[0].offsetHeight + + if (autoPlace) { + var $parent = this.$element.parent() + + var orgPlacement = placement + var docScroll = document.documentElement.scrollTop || document.body.scrollTop + var parentWidth = this.options.container == 'body' ? window.innerWidth : $parent.outerWidth() + var parentHeight = this.options.container == 'body' ? window.innerHeight : $parent.outerHeight() + var parentLeft = this.options.container == 'body' ? 0 : $parent.offset().left + + placement = placement == 'bottom' && pos.top + pos.height + actualHeight - docScroll > parentHeight ? 'top' : + placement == 'top' && pos.top - docScroll - actualHeight < 0 ? 'bottom' : + placement == 'right' && pos.right + actualWidth > parentWidth ? 'left' : + placement == 'left' && pos.left - actualWidth < parentLeft ? 'right' : + placement + + $tip + .removeClass(orgPlacement) + .addClass(placement) + } + + var calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight) + + this.applyPlacement(calculatedOffset, placement) + this.$element.trigger('shown.bs.' + this.type) + } + } + + Tooltip.prototype.applyPlacement = function(offset, placement) { + var replace + var $tip = this.tip() + var width = $tip[0].offsetWidth + var height = $tip[0].offsetHeight + + // manually read margins because getBoundingClientRect includes difference + var marginTop = parseInt($tip.css('margin-top'), 10) + var marginLeft = parseInt($tip.css('margin-left'), 10) + + // we must check for NaN for ie 8/9 + if (isNaN(marginTop)) marginTop = 0 + if (isNaN(marginLeft)) marginLeft = 0 + + offset.top = offset.top + marginTop + offset.left = offset.left + marginLeft + + $tip + .offset(offset) + .addClass('in') + + // check to see if placing tip in new offset caused the tip to resize itself + var actualWidth = $tip[0].offsetWidth + var actualHeight = $tip[0].offsetHeight + + if (placement == 'top' && actualHeight != height) { + replace = true + offset.top = offset.top + height - actualHeight + } + + if (/bottom|top/.test(placement)) { + var delta = 0 + + if (offset.left < 0) { + delta = offset.left * -2 + offset.left = 0 + + $tip.offset(offset) + + actualWidth = $tip[0].offsetWidth + actualHeight = $tip[0].offsetHeight + } + + this.replaceArrow(delta - width + actualWidth, actualWidth, 'left') + } else { + this.replaceArrow(actualHeight - height, actualHeight, 'top') + } + + if (replace) $tip.offset(offset) + } + + Tooltip.prototype.replaceArrow = function(delta, dimension, position) { + this.arrow().css(position, delta ? (50 * (1 - delta / dimension) + "%") : '') + } + + Tooltip.prototype.setContent = function () { + var $tip = this.tip() + var title = this.getTitle() + + $tip.find('.tooltip-inner')[this.options.html ? 'html' : 'text'](title) + $tip.removeClass('fade in top bottom left right') + } + + Tooltip.prototype.hide = function () { + var that = this + var $tip = this.tip() + var e = $.Event('hide.bs.' + this.type) + + function complete() { + if (that.hoverState != 'in') $tip.detach() + } + + this.$element.trigger(e) + + if (e.isDefaultPrevented()) return + + $tip.removeClass('in') + + $.support.transition && this.$tip.hasClass('fade') ? + $tip + .one($.support.transition.end, complete) + .emulateTransitionEnd(150) : + complete() + + this.$element.trigger('hidden.bs.' + this.type) + + return this + } + + Tooltip.prototype.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') || '').attr('title', '') + } + } + + Tooltip.prototype.hasContent = function () { + return this.getTitle() + } + + Tooltip.prototype.getPosition = function () { + var el = this.$element[0] + return $.extend({}, (typeof el.getBoundingClientRect == 'function') ? el.getBoundingClientRect() : { + width: el.offsetWidth + , height: el.offsetHeight + }, this.$element.offset()) + } + + Tooltip.prototype.getCalculatedOffset = function (placement, pos, actualWidth, actualHeight) { + return placement == 'bottom' ? { top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2 } : + placement == 'top' ? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2 } : + placement == 'left' ? { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth } : + /* placement == 'right' */ { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width } + } + + Tooltip.prototype.getTitle = function () { + var title + var $e = this.$element + var o = this.options + + title = $e.attr('data-original-title') + || (typeof o.title == 'function' ? o.title.call($e[0]) : o.title) + + return title + } + + Tooltip.prototype.tip = function () { + return this.$tip = this.$tip || $(this.options.template) + } + + Tooltip.prototype.arrow = function () { + return this.$arrow = this.$arrow || this.tip().find('.tooltip-arrow') + } + + Tooltip.prototype.validate = function () { + if (!this.$element[0].parentNode) { + this.hide() + this.$element = null + this.options = null + } + } + + Tooltip.prototype.enable = function () { + this.enabled = true + } + + Tooltip.prototype.disable = function () { + this.enabled = false + } + + Tooltip.prototype.toggleEnabled = function () { + this.enabled = !this.enabled + } + + Tooltip.prototype.toggle = function (e) { + var self = e ? $(e.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type) : this + self.tip().hasClass('in') ? self.leave(self) : self.enter(self) + } + + Tooltip.prototype.destroy = function () { + this.hide().$element.off('.' + this.type).removeData('bs.' + this.type) + } + + + // TOOLTIP PLUGIN DEFINITION + // ========================= + + var old = $.fn.lapstooltip + + $.fn.lapstooltip = function (option) { + return this.each(function () { + var $this = $(this) + var data = $this.data('bs.lapstooltip') + var options = typeof option == 'object' && option + + if (!data) $this.data('bs.lapstooltip', (data = new Tooltip(this, options))) + if (typeof option == 'string') data[option]() + }) + } + + $.fn.lapstooltip.Constructor = Tooltip + + + // TOOLTIP NO CONFLICT + // =================== + + $.fn.lapstooltip.noConflict = function () { + $.fn.lapstooltip = old + return this + } + +}(jQuery); diff --git a/src/class-laps.php b/src/class-laps.php index 87eeae2..28429dc 100644 --- a/src/class-laps.php +++ b/src/class-laps.php @@ -139,15 +139,35 @@ class Laps { add_action( 'wp_enqueue_scripts', array( __CLASS__, 'enqueue_scripts' ) ); add_action( 'admin_enqueue_scripts', array( __CLASS__, 'enqueue_scripts' ) ); add_action( 'admin_bar_menu', array( __CLASS__, 'admin_bar_menu' ), 100 ); + add_action( 'wp_print_footer_scripts', array( __CLASS__, 'print_footer_scripts' ), 11 ); + add_action( 'admin_print_footer_scripts', array( __CLASS__, 'print_footer_scripts' ), 11 ); } static function enqueue_scripts() { - wp_register_style( 'laps-hint', plugins_url( 'css/hint.css', __DIR__ ), array(), '1.2.1' ); - wp_register_style( 'laps', plugins_url( 'css/laps.css', __DIR__ ), array( 'laps-hint' ) ); + wp_register_script( 'laps-tooltip', plugins_url( 'js/tooltip.js', __DIR__ ), array( 'jquery' ), '3.0.2', true ); + wp_register_style( 'laps', plugins_url( 'css/laps.css', __DIR__ ) ); - if ( is_admin_bar_showing() ) + if ( is_admin_bar_showing() ) { wp_enqueue_style( 'laps' ); + } + } + + static function print_footer_scripts( ) { + + if ( ! is_admin_bar_showing() ) + return; + + wp_print_scripts( 'laps-tooltip' ); + ?>queries, $query_data ); - $html = $mustache->render( 'laps', array( 'events' => $event_data, 'queries' => $query_data ) ); + $html = $mustache->render( + 'laps', + array( + 'events' => $event_data, + 'queries' => $query_data, + 'savequeries' => defined( 'SAVEQUERIES' ) && SAVEQUERIES, + ) + ); $wp_admin_bar->add_node( array( 'id' => 'laps', diff --git a/views/laps.mustache b/views/laps.mustache index 14a2174..e333b14 100644 --- a/views/laps.mustache +++ b/views/laps.mustache @@ -1,10 +1,13 @@
{{#events}} -
+
{{/events}}
+ +{{#savequeries}}
{{#queries}} -
+
{{/queries}} -
\ No newline at end of file + +{{/savequeries}} \ No newline at end of file