\r
// Icons\r
help += '<div id="icons">';\r
- // var scale = $("#horizontalNav").transform('scaleX');\r
- // $("#horizontalNav").transform({\r
- // scale: [1, 1]\r
- // }, {\r
- // preserve: true\r
- // });\r
\r
var tooltipSelector = '#horizontalNav a[data-tooltip]';\r
\r
\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
- var menuHeightScaled = (this.fluidbook.datas.menuHeight) * navScale;\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
+\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
\r
- // this.view.css({\r
- // width: ww,\r
- // minHeight: hh - menuHeightScaled,\r
- // top: menuHeightScaled\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
\r
+ this.view.find('.previous, .first').css(prevPosition);\r
+ this.view.find('.next, .last').css(nextPosition);\r
\r
- // Navigation arrows\r
- this.interfaceTop = (hh - 100 * interfaceScale) / 2 + 30 * interfaceScale;\r
- this.view.find('.next, .previous, .first, .last').css({\r
- top: this.interfaceTop\r
- });\r
\r
// Slider label\r
var positionSliderLabel = function () {\r
var sliderHelp = $this.view.find('.slider');\r
var sliderCursor = $('#slidercursor .visible');\r
sliderHelp.css({\r
- bottom: (hh - sliderCursor.offset().top) * navScale,\r
- left: sliderCursor.offset().left + (sliderCursor.width() / 2 * navScale),\r
- transformOrigin: '0 0'\r
+ bottom: Math.round(hh - sliderCursor.offset().top),\r
+ left: Math.round(sliderCursor.offset().left + (sliderCursor.width() / 2)),\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
- 'transformOrigin': '0 100%'\r
+ top: menuHeightScaled,\r
+ transform: 'scale('+ navScale +')'\r
});\r
\r
$("#helpView #icons").css({\r
fontSize: (14 / navScale) * interfaceScale\r
});\r
\r
- // $("#helpView .illustration").transform({\r
- // scale: [interfaceScale, interfaceScale],\r
- // origin: ['50%', '50%']\r
- // });\r
-\r
this.view.find('.illustration').css({\r
transform: 'translate(-50%, -50%) scale('+ interfaceScale +')'\r
});\r
\r
- // ToDo: refactor bookmarkLabel code so that a scale transform can be applied without messing up positioning (wrap all 3 elements in a div? Handle RTL differences)\r
-\r
$("#helpView .interface").find('> div').transform({\r
scale: [interfaceScale, interfaceScale]\r
})\r
\r
- // ToDo: refactor this and try to move transform-origins to CSS. Make sure that .first and .last label positions factor in interfaceScale\r
-\r
- $("#helpView .interface").find('.last').transform({\r
- origin: ['100%', '100%']\r
- }, {\r
- preserve: true\r
- });\r
-\r
- $("#helpView .interface").find('.first').transform({\r
- origin: ['0%', '100%']\r
- }, {\r
- preserve: true\r
- });\r
-\r
- $("#helpView .interface").find('.next').transform({\r
- origin: ['100%', '0%']\r
- }, {\r
- preserve: true\r
- });\r
-\r
-\r
- $("#helpView .interface").find('.previous').transform({\r
- origin: ['0%', '0%']\r
- }, {\r
- preserve: true\r
- });\r
-\r
- //this.view.find('.illustration').css('margin-top', (hh - 200 * interfaceScale) / 2);\r
},\r
clearTimeout: function() {\r
clearTimeout(this.autoTimeout);\r
baseElement = $('#links .bookmark.' + side), // Original element used to provide position and sizing for overlay\r
html = '';\r
\r
- // Don't show the label if there's no space for it (ie. the side doesn't exist in this view)\r
- // if ((isFirst && side == firstMissing) || (isLast && side == lastMissing)) {\r
- // return '';\r
- // }\r
-\r
// If bookmark icon isn't present on the side we want, it means that we're on\r
// the first/last page and that side is missing so we can't display the help\r
if (baseElement.length == 0) {\r
\r
// Get the offset and dimensions of the element, taking into account the scaling\r
var box = baseElement[0].getBoundingClientRect(),\r
- circleExtra = 20, // How much bigger the circle should be around the bookmark icon\r
+ circleExtra = 20 * this.fluidbook.resize.interfaceScale, // How much bigger the circle should be around the bookmark icon\r
lineLength = 30; // Length of the line to the label text\r
\r
+ // The bookmark icon sits inside a circle that is slightly bigger so in order to make the icon sit exactly\r
+ // on the corner of the page, we must offset the difference added by the larger wrapping circle.\r
+ var circleOffset = circleExtra / 2;\r
+\r
// Build a HTML string via jQuery with all the styling\r
// Bookmark icon:\r
- html += $('<div/>').css({\r
- 'position': 'absolute',\r
- 'display': 'block',\r
- 'top': Math.round(box.top),\r
- 'left': Math.round(box.left),\r
- 'width': Math.round(box.width),\r
- 'height': Math.round(box.height),\r
- 'backgroundImage': baseElement.css('backgroundImage').replace('off.svg', 'on.svg'), // Show the "on" state if not already set\r
- 'backgroundSize': 'contain'\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
+ backgroundImage: baseElement.css('backgroundImage').replace('off.svg', 'on.svg') // Show the "on" state if not already set\r
})[0].outerHTML;\r
\r
// Circle around the icon - slightly bigger\r
- html += $('<div/>').css({\r
- 'position': 'absolute',\r
- 'display': 'block',\r
- 'top': Math.round(box.top - circleExtra / 2),\r
- 'left': Math.round(box.left - circleExtra / 2),\r
- 'width': Math.round(box.width + circleExtra),\r
- 'height': Math.round(box.height + circleExtra),\r
- 'borderRadius': '50%',\r
- 'border': '1px solid'\r
+ html += $('<div>' + icon + '</div>').css({\r
+ width: Math.round(box.width + circleExtra),\r
+ height: Math.round(box.height + circleExtra),\r
+ borderRadius: '50%',\r
+ border: '1px solid'\r
})[0].outerHTML;\r
\r
- // The line and text need to be positioned differently depending on which side the icon is on\r
- var lineLeft = (side == 'left') ? Math.round(box.left + box.width + circleExtra / 2) : Math.round(box.left - circleExtra / 2 - lineLength),\r
- labelLeft = (side == 'left') ? Math.round(box.left + box.width + circleExtra / 2 + lineLength + 10) : Math.round(box.left - circleExtra / 2 - lineLength - 10),\r
- labelTransform = (side == 'left') ? 'translateY(-50%)' : 'translateY(-50%) translateX(-100%)'; // TranslateX -100% since we don't know how long the text is\r
-\r
// Line to text\r
html += $('<div/>').css({\r
- 'position': 'absolute',\r
- 'display': 'block',\r
- 'top': Math.round(box.top + box.height / 2),\r
- 'left': lineLeft,\r
- 'width': lineLength,\r
- 'height': 0,\r
- 'borderBottom': '1px solid',\r
+ width: lineLength,\r
+ height: 0,\r
+ borderBottom: '1px solid',\r
})[0].outerHTML;\r
\r
// Help text label\r
html += $('<div>'+ this.fluidbook.l10n.__('add / remove bookmark') +'</div>').css({\r
- 'position': 'absolute',\r
- 'display': 'block',\r
- 'top': Math.round(box.top + box.height / 2),\r
- 'left': labelLeft,\r
- 'transform': labelTransform,\r
- 'whiteSpace': 'nowrap'\r
+ whiteSpace: 'nowrap',\r
+ padding: '0 0.5em' // Ensure spacing around text regardless which side the line is on\r
})[0].outerHTML;\r
\r
- return html;\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
+ left: Math.round(box.left - circleOffset),\r
+ transformOrigin: 'left top',\r
+ flexDirection: 'row' // Flexbox direction controls order of elements (icon, line, label)\r
+ };\r
+ } else {\r
+ wrapperLayout = {\r
+ right: Math.round(this.fluidbook.resize.ww - box.left - box.width - circleOffset),\r
+ transformOrigin: 'right top',\r
+ flexDirection: 'row-reverse' // Reverse order of elements for right hand page\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
+\r
+ return wrapper;\r
}\r
};\r
\r
}
}
-.ltr #helpView .interface .next,
-.ltr #helpView .interface .last,
-.rtl #helpView .interface .first,
-.rtl #helpView .interface .previous {
- text-align: right;
- right: 40px;
- top: 340px;
-}
+#helpView {
+ .next, .last, .previous, .first {
+ margin-top: -0.5em;
+ line-height: 1;
+ }
+
+ .next, .last {
+ transform-origin: right;
+
+ .rtl & {
+ transform-origin: left;
+ }
+ }
-&.sharp {
- .ltr #helpView .interface .next,
- .ltr #helpView .interface .last,
- .rtl #helpView .interface .first,
- .rtl #helpView .interface .previous {
- right: 53px;
+ .previous, .first {
+ transform-origin: left;
+
+ .rtl & {
+ transform-origin: right;
+ }
}
}
content: '------------';
width: 100px;
border-bottom: 1px solid #fff;
- margin: 0 10px;
+ margin-left: 10px;
position: relative;
top: -0.5em;
color: transparent;
}
-.rtl #helpView .interface .next,
-.rtl #helpView .interface .last,
-.ltr #helpView .interface .first,
-.ltr #helpView .interface .previous {
- left: 40px;
- top: 340px;
-}
-
-.sharp {
- .rtl #helpView .interface .next,
- .rtl #helpView .interface .last,
- .ltr #helpView .interface .first,
- .ltr #helpView .interface .previous {
- left: 57px;
- }
-}
-
.rtl #helpView .interface .next:before,
.rtl #helpView .interface .last:before,
.ltr #helpView .interface .first:before,
content: '------------';
width: 100px;
border-bottom: 1px solid #fff;
- margin: 0 10px;
+ margin-right: 10px;
position: relative;
top: -0.5em;
color: transparent;
}
-#helpView .interface .first,
-#helpView .interface .last {
- margin-top: 43px;
-
- .sharp & {
- margin-top: 40px;
- }
-}
-
-#helpView .interface .next,
-#helpView .interface .previous {
- margin-top: -5px;
-}
-#helpView .interface div {
+#helpView .interface > div {
position: absolute;
direction: ltr;
}
projects / fluidbook-html5.git / commitdiff