Skip to content

Commit

Permalink
Refactor search word matching into a single place
Browse files Browse the repository at this point in the history 
This avoids having to maintain 3 copies of this code, 
although there's still considerable room for cleaning it up.
  • Loading branch information
@acdha
acdha committed Feb 27, 2019
1 parent 8fb2888 commit 49dcba8
Show file tree
Hide file tree
Showing 7 changed files with 105 additions and 96 deletions.
59 changes: 26 additions & 33 deletions core/static/js/highlight.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* global jQuery */
/* global jQuery, ChronAmSearch */

(function($) {
function add_highlights(image) {
Expand All @@ -23,38 +23,31 @@

var vScale = 100 / all_coordinates["height"];
var hScale = 100 / all_coordinates["width"];
$.each(words.split(" "), function(index, word) {
if (word) {
//check word isn't blank
for (var word_on_page in all_coordinates["coords"]) {
//check if the word on the page starts or ends with the word we are looking for
if (
word_on_page
.toLowerCase()
.indexOf(word.toLowerCase()) > -1
) {
var coordinates =
all_coordinates["coords"][word_on_page];
for (var k in coordinates) {
var v = coordinates[k];
div.append(
"<div style='position: absolute; " +
"TOP: " +
v[1] * vScale +
"%; " +
"LEFT: " +
v[0] * hScale +
"%; " +
"HEIGHT: " +
v[3] * vScale +
"%; " +
"WIDTH: " +
v[2] * hScale +
"%;'/>"
);
}
}
}
var matchingWords = ChronAmSearch.matchWords(
words,
all_coordinates
);

$.each(matchingWords, function(index, word_on_page) {
//check if the word on the page starts or ends with the word we are looking for
var coordinates = all_coordinates["coords"][word_on_page];
for (var k in coordinates) {
var v = coordinates[k];
div.append(
"<div style='position: absolute; " +
"TOP: " +
v[1] * vScale +
"%; " +
"LEFT: " +
v[0] * hScale +
"%; " +
"HEIGHT: " +
v[3] * vScale +
"%; " +
"WIDTH: " +
v[2] * hScale +
"%;'/>"
);
}
});
});
Expand Down
53 changes: 19 additions & 34 deletions core/static/js/page.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* globals OpenSeadragon, jQuery */
/* globals OpenSeadragon, jQuery, ChronAmSearch */

(function($) {
var page_url;
Expand Down Expand Up @@ -157,42 +157,27 @@
var params = $.deparam.fragment();
var words = params["words"] || "";

// FIXME: refactor this and search_pages_results.html to share a common implementation
var highlightNoiseRegEx = new RegExp(
/^[/.,/#!$%^&*;:{}=\-_`~()]+|[/.,/#!$%^&*;:{}=\-_`~()]+$|'s$/
);

$.getJSON(coordinates_url, function(all_coordinates) {
var scale = 1 / all_coordinates["width"];

$.each(words.split(" "), function(index, word) {
if (word) {
word = word.toLocaleLowerCase().trim();

for (var word_on_page in all_coordinates["coords"]) {
var match_word = word_on_page
.toLocaleLowerCase()
.replace(highlightNoiseRegEx, " ")
.replace(/\s+/, " ")
.trim();

if (match_word === word) {
var coordinates =
all_coordinates["coords"][word_on_page];
if (coordinates !== undefined) {
$.each(coordinates, function(index, value) {
addOverlay(
viewer,
value[0] * scale,
value[1] * scale,
value[2] * scale,
value[3] * scale
);
});
}
}
}
}
var matchingWords = ChronAmSearch.matchWords(
words,
all_coordinates
);

$.each(matchingWords, function(index, word_on_page) {
$.each(all_coordinates["coords"][word_on_page], function(
index,
value
) {
addOverlay(
viewer,
value[0] * scale,
value[1] * scale,
value[2] * scale,
value[3] * scale
);
});
});
});
}
Expand Down
37 changes: 37 additions & 0 deletions core/static/js/search.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
/* globals $ */

var ChronAmSearch = {};

(function() {
var highlightNoiseRegEx = new RegExp(
/^[/.,/#!$%^&*;:{}=\-_`~()]+|[/.,/#!$%^&*;:{}=\-_`~()]+$|'s$/
);
ChronAmSearch.highlightNoiseRegEx = highlightNoiseRegEx;

ChronAmSearch.matchWords = function(searchWords, all_coordinates) {
var matchedWords = [];

$.each(searchWords.split(" "), function(index, word) {
// don't do anything if the word is blank
if (word) {
word = word.toLocaleLowerCase().trim();

for (var word_on_page in all_coordinates["coords"]) {
var match_word = word_on_page
.toLocaleLowerCase()
.replace(highlightNoiseRegEx, " ")
.replace(/\s+/, " ")
.trim();

if (
match_word === word &&
matchedWords.indexOf(word_on_page) < 0
) {
matchedWords.push(word_on_page);
}
}
}
});
return matchedWords;
};
})();
1 change: 1 addition & 0 deletions core/templates/page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,7 @@ <h3>Missing Page: {{explanation}}</h3>
data-navigation_url="{% url 'chronam_search_pages_navigation' %}?"
></div>

<script src="{% static 'js/search.js' %}"></script>
<script src="{% static 'js/page.js' %}"></script>

<noscript><!-- without javascript the pageviewer does not work; display OCR in this case instead. -->
Expand Down
1 change: 1 addition & 0 deletions core/templates/search_pages_results.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,5 +55,6 @@

{% block javascript %}
{{ block.super }}
<script src="{% static 'js/search.js' %}"></script>
<script src="{% static 'js/highlight.js' %}"></script>
{% endblock %}
1 change: 1 addition & 0 deletions loc/templates/page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
{{ block.super }}
<script type="text/javascript" src="{% static 'js/openseadragon.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/jquery.ba-bbq.min.js' %}"></script>
<script src="{% static 'js/search.js' %}"></script>
<script type="text/javascript" src="{% static 'js/page.js' %}"></script>

<div id="page_data"
Expand Down
49 changes: 20 additions & 29 deletions loc/templates/search_pages_results.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,13 +28,13 @@
});
</script>

<script type="text/javascript" src="{% static 'js/search.js' %}"></script>
<script type="text/javascript">
var padding = 5;
var offset = 2; /* Think the 'a' tag around the thumbnail has a border
that shifts the thumbnail down and to the right a couple pixels... so
we do the same with the highlights */

var highlightNoiseRegEx = new RegExp(/^[/.,/#!$%^&*;:{}=\-_`~()]+|[/.,/#!$%^&*;:{}=\-_`~()]+$|'s$/);

function add_highlights(div) {
var image = div.find(".thumbnail");
Expand All @@ -46,34 +46,25 @@
$.getJSON("{{ script_name }}" + id + "coordinates/", function(all_coordinates) {
var vScale = height / all_coordinates["height"];
var hScale = width / all_coordinates["width"];
$.each(words.split(" "), function(index, word) {
if (word) {
// don't do anything if the word is blank
word = word.toLocaleLowerCase().trim();

for (word_on_page in all_coordinates["coords"]) {
match_word = word_on_page
.toLocaleLowerCase()
.replace(highlightNoiseRegEx, " ")
.replace(/\s+/, " ")
.trim();

if (match_word === word) {
var coordinates = all_coordinates["coords"][word_on_page];
for (k in coordinates) {
var v = coordinates[k];
var $h = $('<img class="highlite">');
$h.attr("src", "{% static 'images/red_60.png' %}");
$h.css({
top: (v[1] * vScale - padding / 2.0 + offset) + "px",
left: (v[0] * hScale - padding / 2.0 + offset) + "px",
height: (v[3] * vScale + padding) + "px",
width: (v[2] * hScale + padding) + "px"
});
$h.appendTo(div);
}
}
}

var matchingWords = ChronAmSearch.matchWords(
words,
all_coordinates
);

$.each(matchingWords, function (index, word_on_page) {
var coordinates = all_coordinates["coords"][word_on_page];
for (var k in coordinates) {
var v = coordinates[k];
var $h = $('<img class="highlite">');
$h.attr("src", "{% static 'images/red_60.png' %}");
$h.css({
top: (v[1] * vScale - padding / 2.0 + offset) + "px",
left: (v[0] * hScale - padding / 2.0 + offset) + "px",
height: (v[3] * vScale + padding) + "px",
width: (v[2] * hScale + padding) + "px"
});
$h.appendTo(div);
}
});
});
Expand Down

0 comments on commit 49dcba8

Please sign in to comment.