diff options
author | Zara Gebru <zgebru@thoughtworks.com> | 2016-12-02 15:25:23 +0100 |
---|---|---|
committer | Zara Gebru <zgebru@thoughtworks.com> | 2016-12-02 15:25:23 +0100 |
commit | b14833fbb56bcd5bff0750c16fd9214009b955be (patch) | |
tree | a1ec621dd5f76d756ac59b72a763a34a2c189387 /web-ui/public/js/search | |
parent | 688a8b42e8ab7c6d4529b6dda66f40eead07ad02 (diff) |
[refactor] move app dir into public dir
Diffstat (limited to 'web-ui/public/js/search')
-rw-r--r-- | web-ui/public/js/search/results_highlighter.js | 97 | ||||
-rw-r--r-- | web-ui/public/js/search/search_trigger.js | 81 |
2 files changed, 178 insertions, 0 deletions
diff --git a/web-ui/public/js/search/results_highlighter.js b/web-ui/public/js/search/results_highlighter.js new file mode 100644 index 00000000..831be0cd --- /dev/null +++ b/web-ui/public/js/search/results_highlighter.js @@ -0,0 +1,97 @@ +/* + * Copyright (c) 2014 ThoughtWorks, Inc. + * + * Pixelated is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * Pixelated is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with Pixelated. If not, see <http://www.gnu.org/licenses/>. + */ + +define( + [ + 'flight/lib/component', + 'page/events' + ], function (defineComponent, events) { + + 'use strict'; + + return defineComponent(resultsHighlighter); + + function resultsHighlighter(){ + this.defaultAttrs({ + keywords: [] + }); + + this.getKeywordsSearch = function (event, data) { + this.attr.keywords = data.query.split(' ').map(function(keyword) { + return keyword.toLowerCase(); + }); + }; + + this.highlightResults = function (event, data) { + var domIdent = data.where; + if(this.attr.keywords) { + _.each(this.attr.keywords, function (keyword) { + keyword = escapeRegExp(keyword); + $(domIdent).highlightRegex(new RegExp(keyword, 'i'), { + tagType: 'em', + className: 'search-highlight' + }); + }); + } + }; + + this.clearHighlights = function (event, data) { + this.attr.keywords = []; + _.each($('em.search-highlight'), function(highlighted) { + var jqueryHighlighted = $(highlighted); + var text = jqueryHighlighted.text(); + jqueryHighlighted.replaceWith(text); + }); + }; + + this.highlightString = function (string) { + _.each(this.attr.keywords, function (keyword) { + keyword = escapeRegExp(keyword); + var regex = new RegExp('(' + keyword + ')', 'ig'); + string = string.replace(regex, '<em class="search-highlight">$1</em>'); + }); + return string; + }; + + /* + * Alter data.mail.textPlainBody to highlight each of this.attr.keywords + * and pass it back to the mail_view when done + */ + this.highlightMailContent = function(ev, data){ + var mail = data.mail; + mail.textPlainBody = this.highlightString(mail.textPlainBody); + this.trigger(document, events.mail.display, data); + }; + + /* + * Escapes the special charaters used regular expressions that + * would cause problems with strings in the RegExp constructor + */ + function escapeRegExp(string){ + return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); + } + + this.after('initialize', function () { + this.on(document, events.search.perform, this.getKeywordsSearch); + this.on(document, events.ui.tag.select, this.clearHighlights); + this.on(document, events.search.resetHighlight, this.clearHighlights); + + this.on(document, events.search.highlightResults, this.highlightResults); + this.on(document, events.mail.highlightMailContent, this.highlightMailContent); + }); + } +}); diff --git a/web-ui/public/js/search/search_trigger.js b/web-ui/public/js/search/search_trigger.js new file mode 100644 index 00000000..2aff027c --- /dev/null +++ b/web-ui/public/js/search/search_trigger.js @@ -0,0 +1,81 @@ +/* + * Copyright (c) 2014 ThoughtWorks, Inc. + * + * Pixelated is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * Pixelated is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with Pixelated. If not, see <http://www.gnu.org/licenses/>. + */ + +define( + [ + 'flight/lib/component', + 'views/templates', + 'page/events', + 'views/i18n' + ], function (defineComponent, templates, events, i18n) { + + 'use strict'; + + return defineComponent(searchTrigger); + + function searchTrigger() { + this.defaultAttrs({ + input: 'input[type=search]', + form: 'form', + searchResultsPrefix: 'search-results-for' + }); + + this.render = function() { + this.$node.html(templates.search.trigger()); + }; + + this.search = function(ev, data) { + this.trigger(document, events.search.resetHighlight); + ev.preventDefault(); + var input = this.select('input'); + var value = input.val(); + input.blur(); + if(!_.isEmpty(value)){ + this.trigger(document, events.search.perform, { query: value }); + } else { + this.trigger(document, events.search.empty); + } + }; + + this.clearInput = function() { + this.select('input').val(''); + }; + + this.showOnlySearchTerms = function(event){ + var value = this.select('input').val(); + var searchTerms = value.slice((i18n.t(this.attr.searchResultsPrefix) + ': ').length); + this.select('input').val(searchTerms); + }; + + this.showSearchTermsAndPlaceHolder = function(event){ + var value = this.select('input').val(); + if (value.length > 0){ + this.select('input').val(i18n.t(this.attr.searchResultsPrefix) + ': ' + value); + } + }; + + this.after('initialize', function () { + this.render(); + this.on(this.select('form'), 'submit', this.search); + this.on(this.select('input'), 'focus', this.showOnlySearchTerms); + this.on(this.select('input'), 'blur', this.showSearchTermsAndPlaceHolder); + this.on(document, events.ui.tag.selected, this.clearInput); + this.on(document, events.ui.tag.select, this.clearInput); + }); + } + } +); |