function FluidbookHelp(fluidbook) {\r
- this.autoTimeout;\r
- this.fluidbook = fluidbook;\r
- this.view = $("#helpView");\r
- this.overlay = $("#helpViewOverlay");\r
- this.initEvents();\r
- this.interfaceTop;\r
+ this.autoTimeout;\r
+ this.fluidbook = fluidbook;\r
+ this.view = $("#helpView");\r
+ this.overlay = $("#helpViewOverlay");\r
+ this.initEvents();\r
+ this.interfaceTop;\r
}\r
\r
FluidbookHelp.prototype = {\r
- init: function() {\r
- var $this = this;\r
- var help = '';\r
-\r
- // Image centrale\r
- var ext = '';\r
- if (this.fluidbook.support.SVG) {\r
- ext = 'svg';\r
- } else {\r
- ext = 'png';\r
- }\r
-\r
- var name = '';\r
- var width = 100;\r
- var height = 200;\r
- var text;\r
- var zoom = 1;\r
- if (this.fluidbook.support.isMobile) {\r
- width = 400;\r
- height = 200;\r
- zoom = 2;\r
- name = 'fingers';\r
- text = this.fluidbook.l10n.__("tap twice or spread your fingers to zoom in");\r
- } else {\r
- name = 'mouse';\r
- text = this.fluidbook.l10n.__('click once to zoom in, click again to zoom out') + '<br />' + this.fluidbook.l10n.__('roll the mouse wheel to zoom in/out');\r
- }\r
-\r
-
help += '<div class="illustration">' + this.fluidbook.loader.getImage('data/images/help-' + name + '.' + ext, width * zoom, height * zoom);
\r-
help += '<p>' + text + '</p>';
\r- help += '</div>';\r
-\r
-\r
- // Icons\r
-
help += '<div id="icons">';
\r+ init: function () {\r
+ var $this = this;\r
+ var help = '';\r
+\r
+ // Image centrale\r
+ var ext = '';\r
+ if (this.fluidbook.support.SVG) {\r
+ ext = 'svg';\r
+ } else {\r
+ ext = 'png';\r
+ }\r
+\r
+ var name = '';\r
+ var width = 100;\r
+ var height = 200;\r
+ var text;\r
+ var zoom = 1;\r
+ if (this.fluidbook.support.isMobile) {\r
+ width = 400;\r
+ height = 200;\r
+ zoom = 2;\r
+ name = 'fingers';\r
+ text = this.fluidbook.l10n.__("tap twice or spread your fingers to zoom in");\r
+ } else {\r
+ name = 'mouse';\r
+ text = this.fluidbook.l10n.__('click once to zoom in, click again to zoom out') + '<br />' + this.fluidbook.l10n.__('roll the mouse wheel to zoom in/out');\r
+ }\r
+\r
+ help += '<div class="illustration">' + this.fluidbook.loader.getImage('data/images/help-' + name + '.' + ext, width * zoom, height * zoom);\r
+ help += '<p>' + text + '</p>';\r
+ help += '</div>';\r
+\r
+\r
+ // Icons\r
+ help += '<div id="icons">';\r
\r
var tooltipSelector = '#horizontalNav li > a[data-tooltip]:visible';\r
\r
// When the menu position is inverted, the icon help lines need\r
// to be drawn in the reverse order to avoid text/line overlaps\r
var tooltips = this.fluidbook.datas.invertMenuPosition ? $(tooltipSelector).get().reverse() : $(tooltipSelector);\r
- var navScale = this.fluidbook.resize.navScale;\r
+ var navScale = this.fluidbook.resize.navScale;\r
var initialHeight = 20 * navScale; // Buffer in line height away from icons\r
- var hStep = 25 * navScale; // The step height - the difference in height between the icon label lines\r
- var h = initialHeight + ($(tooltipSelector).length - 1) * hStep;\r
- var ww = $(window).width();\r
-\r
- $(tooltips).each(function() {\r
- var text = $(this).data('tooltip');\r
- if (text == null || text == undefined || text == '' || $(this).hasClass('hidden')) {\r
- return;\r
- }\r
-\r
- var icon = $(this).find('.nav-icon:visible:first'); // Must get first visible icon so "toggle" icons work\r
- if (icon.length > 0) {\r
+ var hStep = 25 * navScale; // The step height - the difference in height between the icon label lines\r
+ var h = initialHeight + ($(tooltipSelector).length - 1) * hStep;\r
+ var ww = $(window).width();\r
+\r
+ $(tooltips).each(function () {\r
+ var text = $(this).data('tooltip');\r
+ if (text == null || text == undefined || text == '' || $(this).hasClass('hidden')) {\r
+ return;\r
+ }\r
+\r
+ var icon = $(this).find('.nav-icon:visible:first'); // Must get first visible icon so "toggle" icons work\r
+ if (icon.length > 0) {\r
var offset = icon.offset(),\r
- iconWidth = icon.outerWidth() * navScale,\r
- left;\r
+ iconWidth = icon.outerWidth() * navScale,\r
+ left;\r
\r
if ($this.fluidbook.l10n.dir == 'ltr') {\r
left = offset.left + (iconWidth / 2);\r
}\r
\r
// Since the outer container has been scaled, we need to factor that in\r
- // for the left position so the lines still meet with the icons\r
+ // for the left position so the lines still meet with the icons\r
left = left / navScale;\r
\r
var c = 'nav';\r
help += '<div class="icon ' + c + '" style="padding-top:' + h + 'px;left:' + left + 'px;"><span>' + text + '</span></div>';\r
h -= hStep;\r
}\r
- });\r
-\r
- help += '</div>';\r
-\r
- // Interface\r
-\r
- var next = this.fluidbook.l10n.__('next double page');\r
- var previous = this.fluidbook.l10n.__('previous double page');\r
- if (this.fluidbook.pad.enabled) {\r
- next = this.fluidbook.l10n.__('next chapter');\r
- previous = this.fluidbook.l10n.__('previous chapter');\r
- }\r
-\r
-
help += '<div class="interface">';
\r-
help += '<div class="next">' + next + '</div>';
\r-
help += '<div class="last">' + this.fluidbook.l10n.__('last page') + '</div>';
\r-
help += '<div class="previous">' + previous + '</div>';
\r-
help += '<div class="first">' + this.fluidbook.l10n.__('frontpage') + '</div>';
\r-
help += '<div class="slider"><span>' + this.fluidbook.l10n.__('drag handle to switch page') + '</span></div>';
\r- help += this.bookmarkLabel();\r
- help += '</div>';\r
-\r
- if (this.fluidbook.pad.enabled) {\r
-
help += '<div class="down">' + this.fluidbook.l10n.__('read more') + '<hr /></div>';
\r- }\r
-\r
- this.view.html(help);\r
- //resize();\r
- },\r
- initEvents: function() {\r
- var $this = this;\r
-\r
- $(document).on('click', '.icon-help', function(e) {\r
- $this.show();\r
- if (fluidbook.nav.menuIsOpen) {\r
- fluidbook.nav.menuAPI.close();\r
- }\r
- e.preventDefault();\r
- });\r
-\r
- // Click handler on main helpView div to hide it\r
- $this.overlay.click(function(e) {\r
+ });\r
+\r
+ help += '</div>';\r
+\r
+ // Interface\r
+\r
+ var next = this.fluidbook.l10n.__('next double page');\r
+ var previous = this.fluidbook.l10n.__('previous double page');\r
+ if (this.fluidbook.pad.enabled) {\r
+ next = this.fluidbook.l10n.__('next chapter');\r
+ previous = this.fluidbook.l10n.__('previous chapter');\r
+ }\r
+\r
+ help += '<div class="interface">';\r
+ help += '<div class="next">' + next + '</div>';\r
+ help += '<div class="last">' + this.fluidbook.l10n.__('last page') + '</div>';\r
+ help += '<div class="previous">' + previous + '</div>';\r
+ help += '<div class="first">' + this.fluidbook.l10n.__('frontpage') + '</div>';\r
+ help += '<div class="slider"><span>' + this.fluidbook.l10n.__('drag handle to switch page') + '</span></div>';\r
+ help += this.bookmarkLabel();\r
+ help += '</div>';\r
+\r
+ if (this.fluidbook.pad.enabled) {\r
+ help += '<div class="down">' + this.fluidbook.l10n.__('read more') + '<hr /></div>';\r
+ }\r
+\r
+ this.view.html(help);\r
+ //resize();\r
+ },\r
+ initEvents: function () {\r
+ var $this = this;\r
+\r
+ $(document).on('click', '.icon-help', function (e) {\r
+ $this.show();\r
+ if (fluidbook.nav.menuIsOpen) {\r
+ fluidbook.nav.menuAPI.close();\r
+ }\r
+ e.preventDefault();\r
+ });\r
+\r
+ // Click handler on main helpView div to hide it\r
+ $this.overlay.click(function (e) {\r
e.stopImmediatePropagation();\r
e.stopPropagation();\r
e.preventDefault();\r
\r
$this.hide();\r
return false;\r
- });\r
- },\r
- isVisible: function() {\r
- return this.view.is(":visible");\r
- },\r
- show: function(time) {\r
- this.clearTimeout();\r
- if (time == undefined) {\r
- time = 0;\r
- }\r
-\r
- if (this.isVisible()) {\r
- return false;\r
- }\r
-\r
- var $this = this;\r
-\r
- this.init(); // Re-run init because layout and options might have changed since last run\r
- resize();\r
+ });\r
+ },\r
+ isVisible: function () {\r
+ return this.view.is(":visible");\r
+ },\r
+ show: function (time) {\r
+ this.clearTimeout();\r
+ if (time == undefined) {\r
+ time = 0;\r
+ }\r
+\r
+ this.fluidbook.interface.displayInterface();\r
+\r
+ if (this.isVisible()) {\r
+ return false;\r
+ }\r
+\r
+ var $this = this;\r
+\r
+ this.init(); // Re-run init because layout and options might have changed since last run\r
+ resize();\r
this.overlay.show();\r
- this.view.show();\r
+ this.view.show();\r
\r
- $("body,#previous,#next").addClass('help');\r
- this.fluidbook.showAllButtons();\r
+ $("body,#previous,#next").addClass('help');\r
+ this.fluidbook.showAllButtons();\r
\r
if (time != 0) {\r
- this.autoTimeout = setTimeout(function() {\r
+ this.autoTimeout = setTimeout(function () {\r
$this.hide();\r
}, time * 1000);\r
}\r
\r
- return false;\r
- },\r
- hide: function() {\r
- this.clearTimeout();\r
- var $this = this;\r
- if (this.isVisible()) {\r
- this.overlay.hide();\r
- this.view.hide();\r
- $("body,#previous,#next").removeClass('help');\r
- this.fluidbook.hideUnnecessaryButtons();\r
- if (this.fluidbook.support.isMobile) {\r
- $("*").unbind('click', function() {\r
- $this.hide();\r
- });\r
- }\r
- }\r
- return false;\r
- },\r
- toggle: function() {\r
- if (this.isVisible()) {\r
- this.hide();\r
- } else {\r
- this.show();\r
- }\r
- },\r
- resize: function(ww, hh, interfaceScale, navScale) {\r
-\r
- // Repopulate and reposition help overlay elements.\r
+ return false;\r
+ },\r
+ hide: function () {\r
+ this.clearTimeout();\r
+ this.fluidbook.interface.checkHidden();\r
+ var $this = this;\r
+ if (this.isVisible()) {\r
+ this.overlay.hide();\r
+ this.view.hide();\r
+ $("body,#previous,#next").removeClass('help');\r
+ this.fluidbook.hideUnnecessaryButtons();\r
+ if (this.fluidbook.support.isMobile) {\r
+ $("*").unbind('click', function () {\r
+ $this.hide();\r
+ });\r
+ }\r
+ }\r
+ return false;\r
+ },\r
+ toggle: function () {\r
+ if (this.isVisible()) {\r
+ this.hide();\r
+ } else {\r
+ this.show();\r
+ }\r
+ },\r
+ resize: function (ww, hh, interfaceScale, navScale) {\r
+\r
+ // Repopulate and reposition help overlay elements.\r
// Mostly important for the RTL languages where icon label position must be recalculated/\r
// ToDo: Replace this sledgehammer approach with something more elegant\r
- this.init();\r
+ this.init();\r
\r
- // ToDo: access variables from fluidbook.resize.* if they're not passed to the function. So resize function can be called directly...\r
+ // ToDo: access variables from fluidbook.resize.* if they're not passed to the function. So resize function can be called directly...\r
\r
- var $this = this,\r
- dir = this.fluidbook.l10n.dir,\r
- menuHeightScaled = (this.fluidbook.datas.menuHeight) * navScale,\r
- arrow = $('#interface #next').get(0).getBoundingClientRect(), // Used for calculating offsets for both #next & #previous\r
- nextTop,\r
- firstTop;\r
+ var $this = this,\r
+ dir = this.fluidbook.l10n.dir,\r
+ menuHeightScaled = (this.fluidbook.datas.menuHeight) * navScale,\r
+ arrow = $('#interface #next').get(0).getBoundingClientRect(), // Used for calculating offsets for both #next & #previous\r
+ nextTop,\r
+ firstTop;\r
\r
- // The arrow element contains both arrows in a single image\r
- // so we calculate the top position of the labels by percentage\r
- nextTop = Math.round(arrow.top + arrow.height * 0.35);\r
- firstTop = Math.round(arrow.top + arrow.height * 0.71);\r
+ // The arrow element contains both arrows in a single image\r
+ // so we calculate the top position of the labels by percentage\r
+ nextTop = Math.round(arrow.top + arrow.height * 0.35);\r
+ firstTop = Math.round(arrow.top + arrow.height * 0.71);\r
\r
// Navigation arrow labels\r
- this.view.find('.previous, .next').css({\r
- top: nextTop\r
- });\r
- this.view.find('.first, .last').css({\r
- top: firstTop\r
- });\r
+ this.view.find('.previous, .next').css({\r
+ top: nextTop\r
+ });\r
+ this.view.find('.first, .last').css({\r
+ top: firstTop\r
+ });\r
\r
- // Labels are swapped for RTL documents\r
- var prevPosition = (dir == 'ltr') ? {left: Math.round(arrow.width)} : {right: Math.round(arrow.width)},\r
- nextPosition = (dir == 'ltr') ? {right: Math.round(arrow.width)} : {left: Math.round(arrow.width)};\r
+ // Labels are swapped for RTL documents\r
+ var prevPosition = (dir == 'ltr') ? {left: Math.round(arrow.width)} : {right: Math.round(arrow.width)},\r
+ nextPosition = (dir == 'ltr') ? {right: Math.round(arrow.width)} : {left: Math.round(arrow.width)};\r
\r
- this.view.find('.previous, .first').css(prevPosition);\r
- this.view.find('.next, .last').css(nextPosition);\r
+ this.view.find('.previous, .first').css(prevPosition);\r
+ this.view.find('.next, .last').css(nextPosition);\r
\r
\r
- // Slider label\r
+ // Slider label\r
var positionSliderLabel = function () {\r
var sliderHelp = $this.view.find('.slider');\r
var sliderCursor = $('#slidercursor .visible');\r
sliderHelp.css({\r
bottom: Math.round(hh - sliderCursor.offset().top),\r
left: Math.round(sliderCursor.offset().left + (sliderCursor.width() / 2)),\r
- transformOrigin: 'left bottom'\r
+ transformOrigin: 'left bottom'\r
});\r
};\r
positionSliderLabel(); // Run immediately\r
- setTimeout(positionSliderLabel, 250); // delay slightly to make sure co-ordinates are correct\r
-\r
- this.view.find('#icons').css({\r
- top: menuHeightScaled,\r
- transform: 'scale('+ navScale +')'\r
- });\r
-\r
- $("#helpView #icons").css({\r
- fontSize: (14 / navScale) * interfaceScale\r
- });\r
-\r
- this.view.find('.illustration').css({\r
- transform: 'translate(-50%, -50%) scale('+ interfaceScale +')'\r
- });\r
-\r
- $("#helpView .interface").find('> div').transform({\r
- scale: [interfaceScale, interfaceScale]\r
- })\r
-\r
- },\r
- clearTimeout: function() {\r
- clearTimeout(this.autoTimeout);\r
- },\r
- displayAtStartup: function() {\r
- if (this.fluidbook.datas.helpStartup) {\r
- this.show(parseInt(this.fluidbook.datas.helpStartupTime));\r
- if (this.fluidbook.pad.enabled) {\r
- this.fluidbook.pad.displayInterface();\r
- }\r
- } else {\r
- this.fluidbook.hideUnnecessaryButtons();\r
- }\r
- },\r
-\r
- bookmarkLabel: function() {\r
-\r
- // The bookmark help element is a bit complex because it must be placed in a section of the help overlay that is\r
+ setTimeout(positionSliderLabel, 250); // delay slightly to make sure co-ordinates are correct\r
+\r
+ this.view.find('#icons').css({\r
+ top: menuHeightScaled,\r
+ transform: 'scale(' + navScale + ')'\r
+ });\r
+\r
+ $("#helpView #icons").css({\r
+ fontSize: (14 / navScale) * interfaceScale\r
+ });\r
+\r
+ this.view.find('.illustration').css({\r
+ transform: 'translate(-50%, -50%) scale(' + interfaceScale + ')'\r
+ });\r
+\r
+ $("#helpView .interface").find('> div').transform({\r
+ scale: [interfaceScale, interfaceScale]\r
+ })\r
+\r
+ },\r
+ clearTimeout: function () {\r
+ clearTimeout(this.autoTimeout);\r
+ },\r
+ displayAtStartup: function () {\r
+ if (this.fluidbook.datas.helpStartup) {\r
+ this.show(parseInt(this.fluidbook.datas.helpStartupTime));\r
+ if (this.fluidbook.pad.enabled) {\r
+ this.fluidbook.pad.displayInterface();\r
+ }\r
+ } else {\r
+ this.fluidbook.hideUnnecessaryButtons();\r
+ }\r
+ },\r
+\r
+ bookmarkLabel: function () {\r
+\r
+ // The bookmark help element is a bit complex because it must be placed in a section of the help overlay that is\r
// not already used by the icon labels. Since the menu can be either on the left or right, this needs to be taken\r
// into account. On the first and last pages of the Fluidbook we don't have a left or right page so it might not\r
// be possible to always display the bookmark icon in this case...\r
var icon = $('<div/>').css({\r
width: Math.round(box.width),\r
height: Math.round(box.height),\r
- margin: Math.round(circleOffset), // Centre inside circle\r
- backgroundSize: 'contain',\r
- backgroundPosition: 'center',\r
- backgroundRepeat: 'no-repeat',\r
+ margin: Math.round(circleOffset), // Centre inside circle\r
+ backgroundSize: 'contain',\r
+ backgroundPosition: 'center',\r
+ backgroundRepeat: 'no-repeat',\r
backgroundImage: baseElement.css('backgroundImage').replace('off.svg', 'on.svg') // Show the "on" state if not already set\r
})[0].outerHTML;\r
\r
})[0].outerHTML;\r
\r
// Help text label\r
- html += $('<div>'+ this.fluidbook.l10n.__('add / remove bookmark') +'</div>').css({\r
+ html += $('<div>' + this.fluidbook.l10n.__('add / remove bookmark') + '</div>').css({\r
whiteSpace: 'nowrap',\r
- padding: '0 0.5em' // Ensure spacing around text regardless which side the line is on\r
+ padding: '0 0.5em' // Ensure spacing around text regardless which side the line is on\r
})[0].outerHTML;\r
\r
\r
// Wrapper with positioning and layout switched depending on the side\r
- var wrapperCSS = { // Shared properties\r
- display: 'flex',\r
- alignItems: 'center',\r
- position: 'absolute',\r
- top: Math.round(box.top - circleOffset)\r
- },\r
- wrapperLayout;\r
-\r
- if (side == 'left') {\r
- wrapperLayout = {\r
+ var wrapperCSS = { // Shared properties\r
+ display: 'flex',\r
+ alignItems: 'center',\r
+ position: 'absolute',\r
+ top: Math.round(box.top - circleOffset)\r
+ },\r
+ wrapperLayout;\r
+\r
+ if (side == 'left') {\r
+ wrapperLayout = {\r
left: Math.round(box.left - circleOffset),\r
- transformOrigin: 'left top',\r
+ transformOrigin: 'left top',\r
flexDirection: 'row' // Flexbox direction controls order of elements (icon, line, label)\r
- };\r
- } else {\r
- wrapperLayout = {\r
+ };\r
+ } else {\r
+ wrapperLayout = {\r
right: Math.round(this.fluidbook.resize.ww - box.left - box.width - circleOffset),\r
- transformOrigin: 'right top',\r
+ transformOrigin: 'right top',\r
flexDirection: 'row-reverse' // Reverse order of elements for right hand page\r
- }\r
- }\r
+ }\r
+ }\r
\r
var wrapper = $('<div class="bookmark-help">' + html + '</div>')\r
- .css(\r
- $.extend(wrapperCSS, wrapperLayout) // Merge all properties\r
- )[0].outerHTML\r
+ .css(\r
+ $.extend(wrapperCSS, wrapperLayout) // Merge all properties\r
+ )[0].outerHTML\r
\r
return wrapper;\r
}\r
projects / fluidbook-html5.git / commitdiff