2018-12-26 08:45:53 +01:00
|
|
|
var search = (function() {
|
|
|
|
|
|
|
|
var bind = function() {
|
|
|
|
var searchInput = helper.e(".search-input");
|
|
|
|
var searchClear = helper.e(".search-clear");
|
|
|
|
searchInput.addEventListener("input", function() {
|
2019-01-03 23:30:27 +01:00
|
|
|
_toggle(this);
|
|
|
|
_searchClear();
|
2019-01-13 23:54:48 +01:00
|
|
|
link.clear();
|
2019-05-23 20:15:14 +02:00
|
|
|
link.render.link();
|
2018-12-26 08:45:53 +01:00
|
|
|
}, false);
|
2018-12-28 08:04:22 +01:00
|
|
|
searchClear.addEventListener("click", function() {
|
2019-01-03 23:30:27 +01:00
|
|
|
_toggle(this);
|
|
|
|
_searchClear();
|
2018-12-28 08:04:22 +01:00
|
|
|
clear();
|
2018-12-26 08:45:53 +01:00
|
|
|
}, false);
|
|
|
|
};
|
|
|
|
|
2019-01-03 23:30:27 +01:00
|
|
|
var _toggle = function(input) {
|
2019-04-04 17:52:29 +02:00
|
|
|
var html = helper.e("html");
|
2018-12-28 08:04:22 +01:00
|
|
|
if (input.value != "") {
|
2019-02-03 14:51:54 +01:00
|
|
|
helper.setObject({
|
|
|
|
object: state.get(),
|
|
|
|
path: "search",
|
|
|
|
newValue: true
|
|
|
|
});
|
2019-04-04 17:52:29 +02:00
|
|
|
helper.addClass(html, "is-header-searching");
|
2018-12-28 08:04:22 +01:00
|
|
|
} else {
|
2019-02-03 14:51:54 +01:00
|
|
|
helper.setObject({
|
|
|
|
object: state.get(),
|
|
|
|
path: "search",
|
|
|
|
newValue: false
|
|
|
|
});
|
2019-04-04 17:52:29 +02:00
|
|
|
helper.removeClass(html, "is-header-searching");
|
2018-12-28 08:04:22 +01:00
|
|
|
};
|
|
|
|
};
|
|
|
|
|
2019-01-03 23:30:27 +01:00
|
|
|
var _searchClear = function() {
|
2018-12-26 08:45:53 +01:00
|
|
|
var searchInput = helper.e(".search-input");
|
|
|
|
var searchClear = helper.e(".search-clear");
|
2019-02-03 14:51:54 +01:00
|
|
|
if (state.get().search) {
|
2018-12-26 18:43:38 +01:00
|
|
|
searchClear.removeAttribute("disabled");
|
2018-12-26 08:45:53 +01:00
|
|
|
} else {
|
2018-12-26 18:43:38 +01:00
|
|
|
searchClear.setAttribute("disabled", "");
|
|
|
|
};
|
2018-12-26 08:45:53 +01:00
|
|
|
};
|
|
|
|
|
2019-01-13 23:54:48 +01:00
|
|
|
var get = function() {
|
2018-12-28 08:04:22 +01:00
|
|
|
var searchInput = helper.e(".search-input");
|
2019-02-03 14:51:54 +01:00
|
|
|
if (state.get().search) {
|
2019-01-13 23:54:48 +01:00
|
|
|
var searchedBookmarks = {
|
|
|
|
total: 0,
|
|
|
|
matching: []
|
|
|
|
};
|
|
|
|
searchedBookmarks.total = bookmarks.get().length;
|
2018-12-28 08:04:22 +01:00
|
|
|
bookmarks.get().forEach(function(arrayItem, index) {
|
2019-01-13 23:54:48 +01:00
|
|
|
if (arrayItem.url.replace(/^https?\:\/\//i, "").replace(/\/$/, "").toLowerCase().includes(searchInput.value.toLowerCase().replace(/\s/g, "")) || arrayItem.name.toLowerCase().includes(searchInput.value.toLowerCase().replace(/\s/g, ""))) {
|
|
|
|
var bookmarkDataCopy = JSON.parse(JSON.stringify(arrayItem));
|
|
|
|
searchedBookmarks.matching.push(bookmarkDataCopy);
|
2018-12-28 08:04:22 +01:00
|
|
|
};
|
|
|
|
});
|
2019-01-13 23:54:48 +01:00
|
|
|
return searchedBookmarks;
|
2018-12-28 08:04:22 +01:00
|
|
|
};
|
2018-12-26 08:45:53 +01:00
|
|
|
};
|
|
|
|
|
2019-04-03 14:10:37 +02:00
|
|
|
var render = function() {
|
2019-01-03 23:30:27 +01:00
|
|
|
var search = helper.e(".search");
|
2019-04-03 14:10:37 +02:00
|
|
|
var searchInput = helper.e(".search-input");
|
2019-04-04 16:26:52 +02:00
|
|
|
var placeholder = "";
|
2019-05-23 20:15:14 +02:00
|
|
|
if (state.get().link.show) {
|
2019-04-04 16:26:52 +02:00
|
|
|
placeholder = "Find bookmarks or search";
|
2019-04-03 14:10:37 +02:00
|
|
|
} else {
|
2019-04-04 16:26:52 +02:00
|
|
|
placeholder = "Search";
|
2019-04-03 14:10:37 +02:00
|
|
|
};
|
2019-04-04 19:08:26 +02:00
|
|
|
placeholder = placeholder + " " + state.get().header.search.engine[state.get().header.search.engine.selected].name;
|
2019-04-04 16:26:52 +02:00
|
|
|
searchInput.setAttribute("placeholder", placeholder);
|
2019-01-03 23:30:27 +01:00
|
|
|
search.setAttribute("action", state.get().header.search.engine[state.get().header.search.engine.selected].url);
|
|
|
|
};
|
|
|
|
|
2018-12-28 08:04:22 +01:00
|
|
|
var clear = function() {
|
|
|
|
var searchInput = helper.e(".search-input");
|
|
|
|
searchInput.value = "";
|
|
|
|
searchInput.focus();
|
2019-01-03 23:30:27 +01:00
|
|
|
link.clear();
|
2019-05-23 20:15:14 +02:00
|
|
|
link.render.link();
|
2018-12-28 08:04:22 +01:00
|
|
|
};
|
2018-12-26 08:45:53 +01:00
|
|
|
|
2019-01-25 00:21:00 +01:00
|
|
|
var _focus = function() {
|
|
|
|
if (state.get().header.search.focus) {
|
|
|
|
window.addEventListener("load", function(event) {
|
|
|
|
helper.e(".search-input").focus();
|
|
|
|
});
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
2018-12-26 08:45:53 +01:00
|
|
|
var init = function() {
|
|
|
|
bind();
|
2019-04-03 14:10:37 +02:00
|
|
|
render();
|
2019-01-25 00:21:00 +01:00
|
|
|
_focus();
|
2018-12-26 08:45:53 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
// exposed methods
|
|
|
|
return {
|
|
|
|
init: init,
|
2019-01-13 23:54:48 +01:00
|
|
|
get: get,
|
2019-04-03 14:10:37 +02:00
|
|
|
render: render,
|
2018-12-26 08:45:53 +01:00
|
|
|
clear: clear
|
|
|
|
};
|
|
|
|
|
|
|
|
})();
|