function FluidbookTooltip(fluidbook) {
this.fluidbook = fluidbook;
+ this.displaying = false;
this.init();
}
init: function () {
var $this = this;
- $(document).on('mouseover', 'a[data-tooltip]', function () {
- if (Modernizr.ftouch && !$(this).is("[data-tooltip-touch]")) {
- return true;
- }
- var maxWidth = 140;
- if ($(this).data('tooltip-maxwidth') !== null) {
- maxWidth = $(this).data('tooltip-maxwidth');
- }
-
- maxWidth *= 1.28;
- maxWidth = Math.round(maxWidth);
-
- var position = $(this).offset();
- position.top += $(this).outerHeight() + 20;
-
- var text = $(this).data('tooltip');
- text = $('<textarea />').html(text).text();
- if (text.substr(0, 1) == '~') {
- var text = $this.fluidbook.l10n.__(text.substring(1));
- $(this).data('tooltip', text);
- }
- var ok = $this.displayTooltip(text, position, maxWidth);
- if (ok) {
- if (Modernizr.ftouch) {
- $(document).one("touchstart", function () {
- $this.hideTooltip();
- });
- } else {
- $(this).one('mouseout', function () {
- $this.hideTooltip();
- });
- }
- }
- return false;
+ $(window).on('mousemove', function (e) {
+ $this.updateTooltipPosition(e);
});
- $("body").append('<div id="tooltip"></div>');
+ $(window).on('fluidbookzoom', function (e, zoom) {
+ $("#tooltip").transform({scale: 1 / zoom}).css({'marginTop': 20 / zoom, 'marginLeft': -10 / zoom});
+ });
+
+
+ if (Modernizr.ftouch) {
+ $(document).on('touchstart', 'a[data-tooltip-touch][data-tooltip]', function (e) {
+ $this.updateTooltipPosition(e);
+ return $this.eventTriggered(this);
+ });
+ } else {
+ $(document).on('mouseover', 'a[data-tooltip]', function (e) {
+ $this.updateTooltipPosition(e);
+ return $this.eventTriggered(this);
+ });
+ }
+ $("body").append('<div id="tooltip"></div>');
+ },
+ updateTooltipPosition: function (e) {
+ $("#tooltip").css({top: e.pageY, left: e.pageX});
},
- displayTooltip: function (tooltip, position, maxWidth) {
- if (tooltip == undefined || tooltip == '') {
+
+ eventTriggered: function (target) {
+ if (Modernizr.ftouch && !$(target).is("[data-tooltip-touch]")) {
+ return true;
+ }
+ var $this = this;
+ var maxWidth = 140;
+ if ($(target).data('tooltip-maxwidth') !== null) {
+ maxWidth = $(target).data('tooltip-maxwidth');
+ }
+
+ maxWidth *= 1.28;
+ maxWidth = Math.round(maxWidth);
+
+ var position = $(target).offset();
+ position.top += $(target).outerHeight();
+
+ var text = $(target).data('tooltip');
+ text = $('<textarea />').html(text).text();
+ if (text.substr(0, 1) == '~') {
+ var text = $this.fluidbook.l10n.__(text.substring(1));
+ $(target).data('tooltip', text);
+ }
+ if (text == undefined || text == '') {
return false;
}
- position.left -= 10;
- position.maxWidth = maxWidth;
+
+ if (Modernizr.ftouch) {
+ $(document).one("touchstart", function () {
+ $this.hideTooltip();
+ });
+ } else {
+ $(target).one('mouseout', function () {
+ $this.hideTooltip();
+ });
+ }
+
+ this.displayTooltip(text, position, maxWidth);
+ return false;
+ },
+
+ displayTooltip: function (tooltip, position, maxWidth) {
+ var p = {};
+ p.maxWidth = maxWidth;
$("#tooltip").html(tooltip).css(position).show();
return true;
this.offsetX = 0;
this.offsetY = 0;
this.triggered = false;
+ this.updateZoom();
},
gesturestart: function (event) {
if (this.fluidbook.pad.enabled) {
var e = event.originalEvent;
this.enableUserScale();
this.gesturing = true;
+ this.updateZoom();
return true;
},
gesturechange: function (event) {
}
var e = event.originalEvent;
this.gesturing = true;
+ this.updateZoom();
return true;
},
gestureend: function (event) {
} else {
$('html').removeClass('nopan');
}
+ this.updateZoom();
return true;
},
start: function (event) {
}
return true;
},
+ updateZoom: function () {
+ var currentZoom = $('body').data('zoom');
+ var newZoom = DetectZoom.zoom();
+ if (currentZoom != newZoom) {
+ $(window).trigger('fluidbookzoom', newZoom);
+ }
+ },
testOffset: function () {
if (this.triggered) {
return false;