]> _ Git - fluidbook-html5.git/commitdiff
(no commit message)
authorVincent Vanwaelscappel <vincent@cubedesigners.com>
Wed, 11 Sep 2013 13:56:07 +0000 (13:56 +0000)
committerVincent Vanwaelscappel <vincent@cubedesigners.com>
Wed, 11 Sep 2013 13:56:07 +0000 (13:56 +0000)
_index.html
js/libs/fluidbook/fluidbook.background.js
js/libs/fluidbook/fluidbook.js
js/libs/fluidbook/fluidbook.nav.js
js/libs/fluidbook/fluidbook.resize.js
style/fluidbook.css

index 8579ab54fc06e1382ebb14c9f790ecff1ce7c0fd..64471236d88b8229f369fa997030969fb128f7f6 100644 (file)
@@ -16,6 +16,7 @@
                <div id="message"></div>\r
 \r
                <div id="main">\r
+                       <div id="background"></div>\r
                        <header>\r
                                <nav id="nav"></nav>\r
                                <div id="search"></div>\r
@@ -34,6 +35,7 @@
                        <a id="down" href="#"></a>\r
                        <footer><!-- $credits --></footer>\r
                </div>\r
+               <div id="searchHints"></div>\r
                <div id="view"></div>\r
                <div id="innerView"></div>\r
 \r
index 9a313e4a6cdef530b95e85ed496d94c56ab25bef..4a27fe5d032984db1180d208666b35badd26f13e 100644 (file)
@@ -6,8 +6,6 @@ function FluidbookBackground(fluidbook) {
 \r
 FluidbookBackground.prototype = {\r
        init: function() {\r
-               $("#main").append('<div id="background"></div>');\r
-               \r
                if (this.fluidbook.datas.links.background != undefined\r
                                && this.fluidbook.datas.repeat != Fluidbook.REPEAT\r
                                && this.fluidbook.datas.repeat != Fluidbook.STRETCH\r
@@ -45,7 +43,7 @@ FluidbookBackground.prototype = {
                } else if (this.fluidbook.datas.backgroundVAlign == Fluidbook.MIDDLE) {\r
                        top = (h - ih) / 2;\r
                }\r
-               \r
+\r
                $("#background .links").css({\r
                        top: top,\r
                        left: left\r
index 8cf6cf3b39728141f7eaf61236fa70caef688d39..c2a4ee2282a16953e59ec50f752b42e1f3f4b515 100644 (file)
@@ -1130,7 +1130,16 @@ Fluidbook.prototype = {
                $.each(hints, function(k, v) {\r
                        $("#searchHints").append('<a class="hint" term="' + v[0] + '" href="#/search/' + v[0] + '">' + v[0] + ' <em>(' + v[1] + ')</em></a>');\r
                });\r
-               $("#searchHints").show();\r
+               var qoffset = $("#q").offset();\r
+               var top = qoffset.top + $("#q").outerHeight() + 5;\r
+\r
+               var left = qoffset.left;\r
+               if (this.l10n.dir == 'rtl') {\r
+                       left = -1 * ($(window).width() - left - $("#q").outerWidth());\r
+               }\r
+\r
+\r
+               $("#searchHints").css({top: top, left: left}).show();\r
        },\r
        killLastSearchHint: function() {\r
                this.search.kill();\r
index 5e900b0cc7f375243f905d3fa5f60d10a77a43aa..f77437b33155fd2c364e0c88cd7c9a94d7c17609 100644 (file)
@@ -179,7 +179,6 @@ FluidbookNav.prototype = {
                var res = '<form action="#" id="searchForm" method="post">';
                res += '<input type="text" id="q" name="q" type="search" value="" placeholder="' + this.fluidbook.l10n.__('search') + '" autocorrect="off" autocomplete="off" autocapitalize="off" />';
                res += this.getLink('interface-search', '#', 'submitSearch');
-               res += '<div id="searchHints"></div>';
                res += '</form>';
                $("#search").append(res);
                $("#submitSearch").click(function() {
index 863b5d7ffc6d3aed05c4c223b91ab0b4fcccde00..b534f7c3ec0255835fd4e988ed8daa506f2a898c 100644 (file)
@@ -17,24 +17,28 @@ function FluidbookResize(fluidbook) {
 \r
 FluidbookResize.prototype = {\r
        init: function() {\r
-               $("#nav").transform({\r
-                       origin: ['0%', '0%']\r
+\r
+               var left = this.fluidbook.l10n.dir == 'ltr' ? '0%' : '100%';\r
+               var right = this.fluidbook.l10n.dir == 'ltr' ? '100%' : '0%';\r
+\r
+               $("#nav,#searchHints").transform({\r
+                       origin: [left, '0%']\r
                });\r
 \r
                $("#logo").transform({\r
-                       origin: ['100%', '0%']\r
+                       origin: [right, '0%']\r
                });\r
 \r
                $("#footer").transform({\r
-                       origin: ['100%', '100%']\r
+                       origin: [right, '100%']\r
                });\r
 \r
                $("#next").transform({\r
-                       origin: ['100%', '50%']\r
+                       origin: [right, '50%']\r
                });\r
 \r
                $("#previous").transform({\r
-                       origin: ['0%', '50%']\r
+                       origin: [left, '50%']\r
                });\r
        },\r
        resize: function(init) {\r
@@ -125,7 +129,7 @@ FluidbookResize.prototype = {
                        translateX: -40 * (1 - interfaceScale) + 'px'\r
                })\r
 \r
-               $("#nav,#logo,footer").transform({\r
+               $("#nav,#logo,footer,#searchHints").transform({\r
                        scale: navScale\r
                });\r
 \r
index 36181e9d75402c1e8ea49e28590468503de4dfef..93899bbbd30ba6ac7628f363bc1ef119dce29d01 100644 (file)
@@ -362,7 +362,7 @@ body{
 }\r
 \r
 /* Header */\r
-header{position:relative;z-index: 1;}\r
+header{position:relative;}\r
 \r
 \r
 #nav>a{\r
@@ -385,7 +385,6 @@ header{position:relative;z-index: 1;}
 \r
 #nav{\r
        position:relative;\r
-       z-index:12;\r
        white-space: nowrap;\r
 }\r
 \r
@@ -444,22 +443,17 @@ header{position:relative;z-index: 1;}
        height:22px;\r
        width:140px;\r
        margin:2px;\r
-       background-color:#fff;\r
-       color:#000;\r
        display:block;\r
        font-size:12px;\r
 }\r
-.hint:hover{\r
-       background-color:#000;\r
-       color:#fff;\r
-}\r
 \r
 #searchHints{\r
-       background:#fff;\r
        border-radius:5px;\r
        width:150px;\r
        padding:5px;\r
        display:none;\r
+       z-index: 25;\r
+       position:relative;\r
 }\r
 \r
 #logo{\r