]> _ Git - fluidbook-html5.git/commitdiff
wip #811 @4
authorVincent Vanwaelscappel <vincent@cubedesigners.com>
Thu, 24 Aug 2017 15:47:14 +0000 (17:47 +0200)
committerVincent Vanwaelscappel <vincent@cubedesigners.com>
Thu, 24 Aug 2017 15:47:14 +0000 (17:47 +0200)
_index.html
js/libs/fluidbook/fluidbook.js
js/libs/fluidbook/fluidbook.loader.js
js/libs/fluidbook/fluidbook.menu.js
js/libs/fluidbook/fluidbook.resize.js
js/libs/fluidbook/fluidbook.search.js
style/fluidbook.less
style/mixins.less

index a5264422f6b32af386d5e63dda8eb6f1d71639e7..f3b168db976d84b827a6190198ac88829130f4d6 100644 (file)
@@ -45,6 +45,7 @@
                        </div>
                        <div id="pages" class="double">
                                <div id="currentDoublePage" class="doublePage"></div>
+                               <div id="searchHighlights"></div>
                                <div id="links"></div>
                        </div>
                </div>
index 030840c3ea82f92a9614e138ee172d4a54d772ac..221e870041f8c883178f9dab303e32bca5b4624b 100644 (file)
@@ -59,7 +59,7 @@ Fluidbook.prototype = {
         this.refh = 0;
         this.searchHintXHR = null;
         this.searchString = '';
-        this.termsToHighlight = '';
+
         this.vectorTexts = !this.support.imagesVersion;
         this.displayOnePage = false;
         this.indexHTML = '';
@@ -342,11 +342,10 @@ Fluidbook.prototype = {
             });
             this.zoom.resetZoom();
         }
-
         return;
     },
     pageTransition: function (pageNr) {
-        this.tooltip.hideTooltip();
+
         if (pageNr == undefined) {
             pageNr = this.currentPage;
             if (pageNr == -1) {
@@ -615,6 +614,7 @@ Fluidbook.prototype = {
         if (d == undefined) {
             d = 1;
         }
+        this.tooltip.hideTooltip();
         $(".axis_y").removeClass('axis_y');
         $(".axis_x").removeClass('axis_x');
         $("#links").hide();
@@ -622,6 +622,7 @@ Fluidbook.prototype = {
         this.hideUnnecessaryButtons(page);
         var animationDuration = d <= 1 ? 0 : parseFloat(this.datas.mobileTransitionDuration);
         this.updateShadows(page, animationDuration);
+        this.search.clearHighlights();
     },
     afterTransition: function (page) {
         if (this.transitionning === false) {
@@ -931,9 +932,7 @@ Fluidbook.prototype = {
         return a.cloneNode(false).href;
     },
 
-    highlightSearchTerms: function (pageNr) {
-        return;
-    },
+
     touchOffset: function (offset) {
         offset *= $("#currentDoublePage").width();
         $("#currentDoublePage").addClass('sliding');
index ee6b45b938b6bc39bc1fd0ea372038fcaefe831c..0e7b50cca24b750c95e5aa50606d56086e15b4a9 100644 (file)
@@ -156,7 +156,6 @@ FluidbookLoader.prototype = {
 
             $(page).children(".shade").html(this.loadImage('images/' + shade, this.fluidbook.datas.width / 4, this.fluidbook.datas.height));
             $(page).children('.clinks').html(this.fluidbook.datas.clinks[pageNr]);
-            this.fluidbook.highlightSearchTerms(pageNr);
             callback();
             return;
         }
index f153283357a29b4b66f4faa396848db8f843188b..0a00751e6317762bfe666faa123116ba85e6300c 100644 (file)
@@ -63,6 +63,9 @@ FluidbookMenu.prototype = {
     __openView: function (view, param1, param2, callback) {
         //console.log('__openView(' + view + ',' + param1 + ',' + param2 + ')');
 
+        param1=decodeURIComponent(param1);
+        param2=decodeURIComponent(param2);
+
         var $this = this;
         var camelView = view.charAt(0).toUpperCase() + view.substr(1);
         var cb = function () {
@@ -186,7 +189,9 @@ FluidbookMenu.prototype = {
                     }
                 }
             });
-            $this.termsToHighlight = data.terms;
+            console.log(data);
+            $this.fluidbook.search.setHighlightTerms(data.terms);
+            $this.fluidbook.search.highlightSearchTerms($this.fluidbook.currentPage);
             if (callback != undefined) {
                 callback();
             }
index 5beb206782cbb0d15e0b28c86878ffcd25a1219d..e8f67a06352421f8d9dce53994d56f491471293a 100644 (file)
@@ -130,7 +130,6 @@ FluidbookResize.prototype = {
             height: fhh
         });
 
-
         if ($("#pagesnumbers").data('size') == null) {
             $("#pagesnumbers").data('size', parseInt($("#pagesnumbers").css('font-size')));
         }
@@ -200,10 +199,7 @@ FluidbookResize.prototype = {
         }
 
         this.resizeSplash();
-        /*if (this.fluidbook.support.ie9) {
-         this.resizeIE9Multimedia();
-         }*/
-
+        
         if (this.fluidbook.form) {
             this.fluidbook.form.resize();
         }
index 672d284c2a55a123fb2d01f6f1acb3bfa805a963..45c8c4a6bc3eae68216bba863b8350010d3ea8ce 100644 (file)
-
-function FluidbookSearch() {
-       this.indexLoaded = false;
+function FluidbookSearch(fluidbook) {
+    this.fluidbook = fluidbook;
+    this.indexLoaded = false;
+    this.termsToHighlight = [];
+    this.highlights = [];
+    this.init();
 }
 
 FluidbookSearch.prototype = {
-       getHints: function(q, callback) {
-               var $this = this;
-               this._loadLib(function() {
-                       $this._getHints(q, callback);
-               });
-       },
-       find: function(q, callback) {
-               var $this = this;
-               this._loadLib(function() {
-                       $this._find(q, callback);
-               });
-       },
-       _loadLib: function(callback) {
-               if (this.indexLoaded) {
-                       return callback();
-               }
-               var $this = this;
-               loadJSLibrary('data/search.index.js', function() {
-                       loadJSLibrary('data/search.texts.js', function() {
-                               $this.indexLoaded = true;
-                               callback();
-                       });
-               });
-       },
-       _getHints: function(q, callback) {
-               var words = this.normalizeQuery(q);
-               q = words.pop();
-               var res = [];
-               if (q.length < 3) {
-                       return res;
-               }
+    init: function () {
+        var $this=this;
+        $(this.fluidbook).on('fluidbook.page.change.end', function (e, pageNr) {
+            $this.highlightSearchTerms(pageNr);
+        });
+    },
+    getHints: function (q, callback) {
+        var $this = this;
+        this._loadLib(function () {
+            $this._getHints(q, callback);
+        });
+    },
+    find: function (q, callback) {
+        var $this = this;
+        this._loadLib(function () {
+            $this._find(q, callback);
+        });
+    },
+    _loadLib: function (callback) {
+        if (this.indexLoaded) {
+            return callback();
+        }
+        var $this = this;
+        loadJSLibrary('data/search.index.js', function () {
+            loadJSLibrary('data/search.texts.js', function () {
+                loadJSLibrary('data/search.highlight.js', function () {
+                    $this.indexLoaded = true;
+                    callback();
+                });
+            });
+        });
+    },
+    _getHints: function (q, callback) {
+        var words = this.normalizeQuery(q);
+        q = words.pop();
+        var res = [];
+        if (q.length < 3) {
+            return res;
+        }
+
+        var v;
+        for (var k in INDEX) {
+            v = INDEX[k];
+            if (k.indexOf(q) != 0) {
+                continue;
+            }
+            res.push([k, v.t]);
+        }
+
+        res.sort(this.sortHints);
+        callback(res.slice(0, 12));
+    },
+    _find: function (q, callback) {
+        var words = this.normalizeQuery(q);
+        var res = {};
+        var terms = [];
+        var total = 0;
+        var q, v, k, kk, word, wordata, page, occurences;
+
+        for (kk in words) {
+            q = words[kk];
+            terms.push(q);
+            for (k in INDEX) {
+                v = INDEX[k];
+                if (k.indexOf(q) != 0) {
+                    continue;
+                }
+
+                for (page in v.p) {
+                    var occurences = v.p[page];
+                    page = parseInt(page);
+                    if (res[page] == undefined) {
+                        res[page] = 0;
+                    }
+                    res[page] += occurences;
+                    total += occurences;
+                }
+            }
+        }
+
+        callback({
+            total: total,
+            results: res,
+            terms: terms
+        });
+    },
+    sortHints: function (a, b) {
+        return b[1] - a[1];
+    },
+    kill: function () {
 
-               var v;
-               for (var k in INDEX) {
-                       v = INDEX[k];
-                       if (k.indexOf(q) != 0) {
-                               continue;
-                       }
-                       res.push([k, v.t]);
-               }
+    },
+    normalizeQuery: function (q) {
+        q = this.noAccents(q);
+        q = q.toLowerCase();
+        return q.split(' ');
+    },
+    noAccents: function (source) {
+        source = source.replace(/[àáâãäå]/g, "a");
+        source = source.replace(/[ÀÁÂÃÄÅ]/g, "A");
+        source = source.replace(/[èéêë]/g, "e");
+        source = source.replace(/[ËÉÊÈ]/g, "E");
+        source = source.replace(/[ìíîï]/g, "i");
+        source = source.replace(/[ÌÍÎÏ]/g, "I");
+        source = source.replace(/[ðòóôõöø]/g, "o");
+        source = source.replace(/[ÐÒÓÔÕÖØ]/g, "O");
+        source = source.replace(/[ùúûü]/g, "u");
+        source = source.replace(/[ÙÚÛÜ]/g, "U");
+        source = source.replace(/[ýýÿ]/g, "y");
+        source = source.replace(/[ÝÝŸ]/g, "Y");
+        source = source.replace(/[ç]/g, "c");
+        source = source.replace(/[Ç]/g, "C");
+        source = source.replace(/[ñ]/g, "n");
+        source = source.replace(/[Ñ]/g, "N");
+        source = source.replace(/[š]/g, "s");
+        source = source.replace(/[Š]/g, "S");
+        source = source.replace(/[ž]/g, "z");
+        source = source.replace(/[Ž]/g, "Z");
+        source = source.replace(/[æ]/g, "ae");
+        source = source.replace(/[Æ]/g, "AE");
+        source = source.replace(/[œ]/g, "oe");
+        source = source.replace(/[Œ]/g, "OE");
+        return source;
+    },
+    setHighlightTerms: function (terms) {
+        this.termsToHighlight = terms;
+        this.highlights = [];
+        if (terms.length == 0) {
+            return;
+        }
+        for (var t in terms) {
+            var term = terms[t];
+            for (var w in HIGHLIGHTS) {
+                if (w.indexOf(term) == 0) {
+                    var h = {occurences: HIGHLIGHTS[w], color: t, word: w, term: term};
+                    this.highlights.push(h);
+                }
+            }
+        }
+    },
+    clearHighlights: function () {
+        $("#searchHighlights").html('');
+    },
+    highlightSearchTerms: function (pageNr) {
+        this.clearHighlights();
+        if (this.termsToHighlight.length == 0) {
+            return;
+        }
 
-               res.sort(this.sortHints);
-               callback(res.slice(0, 12));
-       },
-       _find: function(q, callback) {
-               var words = this.normalizeQuery(q);
-               var res = {};
-               var terms = [];
-               var total = 0;
-               var q, v, k, kk, word, wordata, page, occurences;
-               for (kk in words) {
-                       q = words[kk];
-                       for (k in INDEX) {
-                               v = INDEX[k];
-                               if (k.indexOf(q) != 0) {
-                                       continue;
-                               }
-                               for (page in v.p) {
-                                       var occurences = v.p[page];
-                                       page = parseInt(page);
-                                       if (res[page] == undefined) {
-                                               res[page] = 0;
-                                       }
-                                       res[page] += occurences;
-                                       total += occurences;
-                               }
-                               /*for (word in v.w) {
-                                wordata = v.w[word];
-                                terms.push(word);
-                                for (page in wordata.p) {
-                                occurences = wordata.p[page];
-                                page = parseInt(page);
-                                if (res[page] == undefined) {
-                                res[page] = 0;
-                                }
-                                res[page] += occurences;
-                                total += occurences;
-                                }
-                                }*/
-                       }
-               }
+        var pageNrs = [];
+        if (this.fluidbook.resize.orientation == 'portrait') {
+            pageNrs.push(pageNr);
+        } else {
+            if (pageNr % 2 == 1) {
+                pageNr--;
+            }
+            pageNrs.push(pageNr);
+            pageNr++;
+            if (pageNr < this.fluidbook.datas.pages) {
+                pageNrs.push(pageNr);
+            }
+        }
 
-               callback({
-                       total: total,
-                       results: res,
-                       terms: terms.join(' ')
-               });
-       },
-       sortHints: function(a, b) {
-               return b[1] - a[1];
-       },
-       kill: function() {
+        for (var i in this.highlights) {
+            var h = this.highlights[i];
+            for (var j in h.occurences) {
+                var o = h.occurences[j];
+                var pageIndex = pageNrs.indexOf(o.page);
+                if (pageIndex == -1) {
+                    continue;
+                }
+                this.highlightOccurence(o, h.word, h.term, h.color, pageIndex * this.fluidbook.datas.width);
+            }
+        }
+    },
 
-       },
-       normalizeQuery: function(q) {
-               q = this.noAccents(q);
-               q = q.toLowerCase();
-               return q.split(' ');
-       },
-       noAccents: function(source) {
-               source = source.replace(/[àáâãäå]/g, "a");
-               source = source.replace(/[ÀÁÂÃÄÅ]/g, "A");
-               source = source.replace(/[èéêë]/g, "e");
-               source = source.replace(/[ËÉÊÈ]/g, "E");
-               source = source.replace(/[ìíîï]/g, "i");
-               source = source.replace(/[ÌÍÎÏ]/g, "I");
-               source = source.replace(/[ðòóôõöø]/g, "o");
-               source = source.replace(/[ÐÒÓÔÕÖØ]/g, "O");
-               source = source.replace(/[ùúûü]/g, "u");
-               source = source.replace(/[ÙÚÛÜ]/g, "U");
-               source = source.replace(/[ýýÿ]/g, "y");
-               source = source.replace(/[ÝÝŸ]/g, "Y");
-               source = source.replace(/[ç]/g, "c");
-               source = source.replace(/[Ç]/g, "C");
-               source = source.replace(/[ñ]/g, "n");
-               source = source.replace(/[Ñ]/g, "N");
-               source = source.replace(/[š]/g, "s");
-               source = source.replace(/[Š]/g, "S");
-               source = source.replace(/[ž]/g, "z");
-               source = source.replace(/[Ž]/g, "Z");
-               source = source.replace(/[æ]/g, "ae");
-               source = source.replace(/[Æ]/g, "AE");
-               source = source.replace(/[œ]/g, "oe");
-               source = source.replace(/[Œ]/g, "OE");
-               return source;
-       }
+    highlightOccurence: function (position, word, term, color, offset) {
+        var padding = position.height * 0.2;
+        var z = this.fluidbook.datas.pageZoomFactor * 1.19;
+        var h = $('<div class="highlight" data-color="' + color + '"></div>');
+        $(h).css({top: (position.y - position.height - padding * 2) * z, left: (position.x - padding) * z + offset, width: (position.width + 2 * padding) * z, height: (position.height + padding * 3) * z});
+        $("#searchHighlights").append(h);
+    }
 };
 
index 1fba16adb6e4122ade8e858016a13c154d4daabe..c93c39b75154f2c2e9e81fe1f875e2cd0bb433ae 100644 (file)
@@ -298,6 +298,36 @@ body, html {
        overflow: hidden;
 }
 
+/* Search */
+#searchHighlights {
+       position: absolute;
+       top: 0px;
+       left: 0px;
+       .highlight {
+               position: absolute;
+               border-width: 2px;
+               border-radius: 2px;
+               border-style: solid;
+               &[data-color="0"] {
+                       .highlight-area(#00ff00);
+               }
+               &[data-color="1"] {
+                       .highlight-area(#ffff00);
+               }
+               &[data-color="2"] {
+                       .highlight-area(#00ffff);
+               }
+               &[data-color="3"] {
+                       .highlight-area(#ff00ff);
+               }
+               &[data-color="4"] {
+                       .highlight-area(#ff0000);
+               }
+       }
+}
+
+
+
 // Fix for #1489
 
 .chrome.desktop {
@@ -1187,27 +1217,6 @@ form input[type="text"], form input[type="email"] {
 
 }
 
-/* Search */
-.highlight0 {
-       background-color: #00ff00;
-}
-
-.highlight1 {
-       background-color: #ffff00;
-}
-
-.highlight2 {
-       background-color: #00ffff;
-}
-
-.highlight3 {
-       background-color: #ff00ff;
-}
-
-.highlight4 {
-       background-color: #ff0000;
-}
-
 /* Share */
 
 ul.chapters.shareList a.level0 img {
index 2e893964b0ca514159a1b89ecd4e99ecb5bd066b..7ec6c1ace5667ca8615c6077b27f3d3f4cb37563 100644 (file)
@@ -6,4 +6,9 @@
 
 .hideifnot(@display) when not (@display) {
        display: none;
+}
+
+.highlight-area(@color) {
+       border-color: @color;
+       background-color: fade(@color, 30%);
 }
\ No newline at end of file