Commit da3ad00c authored by Rémy Coutable's avatar Rémy Coutable

Replace Tipsy by Bootstrap's tooltips

Signed-off-by: default avatarRémy Coutable <remy@rymai.me>
parent 47054451
import 'vendor/jquery.tipsy';
import 'vendor/peek'; import 'vendor/peek';
import 'vendor/peek.performance_bar'; import 'vendor/peek.performance_bar';
import 'vendor/peek.rblineprof'; import 'vendor/peek.rblineprof';
......
...@@ -3,7 +3,7 @@ var requestId; ...@@ -3,7 +3,7 @@ var requestId;
requestId = null; requestId = null;
(function($) { (function($) {
var fetchRequestResults, getRequestId, initializeTipsy, peekEnabled, toggleBar, updatePerformanceBar; var fetchRequestResults, getRequestId, peekEnabled, toggleBar, updatePerformanceBar;
getRequestId = function() { getRequestId = function() {
if (requestId != null) { if (requestId != null) {
return requestId; return requestId;
...@@ -42,16 +42,6 @@ requestId = null; ...@@ -42,16 +42,6 @@ requestId = null;
} }
return $(document).trigger('peek:render', [getRequestId(), results]); return $(document).trigger('peek:render', [getRequestId(), results]);
}; };
initializeTipsy = function() {
return $('#peek .peek-tooltip, #peek .tooltip').each(function() {
var el, gravity;
el = $(this);
gravity = el.hasClass('rightwards') || el.hasClass('leftwards') ? $.fn.tipsy.autoWE : $.fn.tipsy.autoNS;
return el.tipsy({
gravity: gravity
});
});
};
toggleBar = function(event) { toggleBar = function(event) {
var wrapper; var wrapper;
if ($(event.target).is(':input')) { if ($(event.target).is(':input')) {
...@@ -80,7 +70,6 @@ requestId = null; ...@@ -80,7 +70,6 @@ requestId = null;
}); });
}; };
$(document).on('keypress', toggleBar); $(document).on('keypress', toggleBar);
$(document).on('peek:update', initializeTipsy);
$(document).on('peek:update', fetchRequestResults); $(document).on('peek:update', fetchRequestResults);
$(document).on('pjax:end', function(event, xhr, options) { $(document).on('pjax:end', function(event, xhr, options) {
if (xhr != null) { if (xhr != null) {
......
...@@ -85,17 +85,15 @@ PerformanceBar = (function() { ...@@ -85,17 +85,15 @@ PerformanceBar = (function() {
width = this.mapH(time); width = this.mapH(time);
title = name + ": " + (PerformanceBar.formatTime(time)); title = name + ": " + (PerformanceBar.formatTime(time));
bar = $('<li></li>', { bar = $('<li></li>', {
title: title, 'data-title': title,
"class": 'peek-tooltip' 'data-toggle': 'tooltip',
'data-container': 'body'
}); });
bar.css({ bar.css({
width: width + "px", width: width + "px",
left: left + "px", left: left + "px",
background: color background: color
}); });
bar.tipsy({
gravity: $.fn.tipsy.autoNS
});
return this.el.append(bar); return this.el.append(bar);
}; };
...@@ -114,12 +112,10 @@ renderPerformanceBar = function() { ...@@ -114,12 +112,10 @@ renderPerformanceBar = function() {
bar = new PerformanceBar; bar = new PerformanceBar;
bar.render(time); bar.render(time);
span = $('<span>', { span = $('<span>', {
'class': 'peek-tooltip', 'data-toggle': 'tooltip',
title: 'Total navigation time for this page.' 'data-title': 'Total navigation time for this page.',
'data-container': 'body'
}).text(PerformanceBar.formatTime(bar.total())); }).text(PerformanceBar.formatTime(bar.total()));
span.tipsy({
gravity: $.fn.tipsy.autoNS
});
return updateStatus(span); return updateStatus(span);
}; };
...@@ -168,12 +164,10 @@ $(document).on('pjax:end page:load turbolinks:load', function(event, xhr) { ...@@ -168,12 +164,10 @@ $(document).on('pjax:end page:load turbolinks:load', function(event, xhr) {
tech = 'Turbolinks'; tech = 'Turbolinks';
} }
span = $('<span>', { span = $('<span>', {
'class': 'peek-tooltip', 'data-toggle': 'tooltip',
title: tech + " navigation time" 'data-title': tech + " navigation time",
'data-container': 'body'
}).text(PerformanceBar.formatTime(total)); }).text(PerformanceBar.formatTime(total));
span.tipsy({
gravity: $.fn.tipsy.autoNS
});
updateStatus(span); updateStatus(span);
return ajaxStart = null; return ajaxStart = null;
}, 0); }, 0);
...@@ -186,6 +180,3 @@ $(function() { ...@@ -186,6 +180,3 @@ $(function() {
return $('#peek-view-performance-bar').remove(); return $('#peek-view-performance-bar').remove();
} }
}); });
// ---
// generated by coffee-script 1.9.2
...@@ -86,29 +86,5 @@ ...@@ -86,29 +86,5 @@
} }
#modal-peek-pg-queries-content { #modal-peek-pg-queries-content {
// background: #999;
color: #000; color: #000;
} }
.tipsy { font-size: 10px; position: absolute; padding: 5px; z-index: 100000; }
.tipsy-inner { background-color: #000; color: #FFF; max-width: 200px; padding: 5px 8px 4px 8px; text-align: center; }
/* Rounded corners */
.tipsy-inner { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
.tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; }
/* Rules to colour arrows */
.tipsy-arrow-n { border-bottom-color: #000; }
.tipsy-arrow-s { border-top-color: #000; }
.tipsy-arrow-e { border-left-color: #000; }
.tipsy-arrow-w { border-right-color: #000; }
.tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
.tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; }
.tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; }
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment