From e43b38559c63ff5816fc536aaba6a409f27e56b1 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Thu, 24 Aug 2017 17:47:14 +0200 Subject: [PATCH] wip #811 @4 --- _index.html | 1 + js/libs/fluidbook/fluidbook.js | 11 +- js/libs/fluidbook/fluidbook.loader.js | 1 - js/libs/fluidbook/fluidbook.menu.js | 7 +- js/libs/fluidbook/fluidbook.resize.js | 6 +- js/libs/fluidbook/fluidbook.search.js | 310 +++++++++++++++----------- style/fluidbook.less | 51 +++-- style/mixins.less | 5 + 8 files changed, 233 insertions(+), 159 deletions(-) diff --git a/_index.html b/_index.html index a5264422..f3b168db 100644 --- a/_index.html +++ b/_index.html @@ -45,6 +45,7 @@
+
diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js index 030840c3..221e8700 100644 --- a/js/libs/fluidbook/fluidbook.js +++ b/js/libs/fluidbook/fluidbook.js @@ -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'); diff --git a/js/libs/fluidbook/fluidbook.loader.js b/js/libs/fluidbook/fluidbook.loader.js index ee6b45b9..0e7b50cc 100644 --- a/js/libs/fluidbook/fluidbook.loader.js +++ b/js/libs/fluidbook/fluidbook.loader.js @@ -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; } diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js index f1532833..0a00751e 100644 --- a/js/libs/fluidbook/fluidbook.menu.js +++ b/js/libs/fluidbook/fluidbook.menu.js @@ -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(); } diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js index 5beb2067..e8f67a06 100644 --- a/js/libs/fluidbook/fluidbook.resize.js +++ b/js/libs/fluidbook/fluidbook.resize.js @@ -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(); } diff --git a/js/libs/fluidbook/fluidbook.search.js b/js/libs/fluidbook/fluidbook.search.js index 672d284c..45c8c4a6 100644 --- a/js/libs/fluidbook/fluidbook.search.js +++ b/js/libs/fluidbook/fluidbook.search.js @@ -1,134 +1,194 @@ - -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 = $('
'); + $(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); + } }; diff --git a/style/fluidbook.less b/style/fluidbook.less index 1fba16ad..c93c39b7 100644 --- a/style/fluidbook.less +++ b/style/fluidbook.less @@ -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 { diff --git a/style/mixins.less b/style/mixins.less index 2e893964..7ec6c1ac 100644 --- a/style/mixins.less +++ b/style/mixins.less @@ -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 -- 2.39.5