Skip to content

M
mynij
Commit 2f822e9b authored by Alain Takoudjou's avatar Alain Takoudjou
Browse files
Options

Mynij Search: Fix search result and improve layout for mobile too

parent 554312dc
Hide whitespace changes
Inline Side-by-side
Showing with 773 additions and 396 deletions
bt5/Mynij Search/PathTemplateItem/image_module/mynij_google_logo.png.xml
View file @ 2f822e9b
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
</item> </item>
<item> <item>
<key> <string>content_md5</string> </key> <key> <string>content_md5</string> </key>
<value> <string>346ac88b9877bb714c42f55a4badcfa4</string> </value> <value> <string>950a69b80543dc973375ccffa5f0f872</string> </value>
</item> </item>
<item> <item>
<key> <string>content_type</string> </key> <key> <string>content_type</string> </key>
...@@ -99,11 +99,11 @@ ...@@ -99,11 +99,11 @@
</item> </item>
<item> <item>
<key> <string>filename</string> </key> <key> <string>filename</string> </key>
<value> <string>google_logo.png</string> </value> <value> <string>mynij_google_logo.png</string> </value>
</item> </item>
<item> <item>
<key> <string>height</string> </key> <key> <string>height</string> </key>
<value> <int>3000</int> </value> <value> <int>1261</int> </value>
</item> </item>
<item> <item>
<key> <string>id</string> </key> <key> <string>id</string> </key>
......
bt5/Mynij Search/PathTemplateItem/image_module/mynij_logo.png.xml
View file @ 2f822e9b
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
</item> </item>
<item> <item>
<key> <string>content_md5</string> </key> <key> <string>content_md5</string> </key>
<value> <string>9beb13edeabd6fa0008d2e960b4a358f</string> </value> <value> <string>d4bb131f30becd7ac1289780b144e5cf</string> </value>
</item> </item>
<item> <item>
<key> <string>content_type</string> </key> <key> <string>content_type</string> </key>
...@@ -103,7 +103,7 @@ ...@@ -103,7 +103,7 @@
</item> </item>
<item> <item>
<key> <string>height</string> </key> <key> <string>height</string> </key>
<value> <int>3000</int> </value> <value> <int>1848</int> </value>
</item> </item>
<item> <item>
<key> <string>id</string> </key> <key> <string>id</string> </key>
......
bt5/Mynij Search/PathTemplateItem/web_page_module/gadget_erp5_page_mynij_search_html.html
View file @ 2f822e9b
...@@ -8,15 +8,18 @@ ...@@ -8,15 +8,18 @@
<link rel="stylesheet" type="text/css" href="mynij-style.css"> <link rel="stylesheet" type="text/css" href="mynij-style.css">
</head> </head>
<body> <body>
<div class="search" id="logo-search">
<img class="logo-search" src="mynij_logo.png" />
</div>
<div id="search_div"> <div id="search_div">
<form id = "search_bar"> <form id="search_bar">
<input type="search" id = "search_input" required> <input type="search" id="search_input" required>
</form> </form>
<select id="select_index"></select> <select id="select_index"></select>
</div> </div>
<div id = "gadget_result" data-gadget-url="gadget_mynij_result.html" <div id="gadget_result" data-gadget-url="gadget_mynij_result.html"
data-gadget-scope="result" data-gadget-sandbox="public"> data-gadget-scope="result" data-gadget-sandbox="public"></div>
<div data-gadget-url="gadget_mynij_model.html" data-gadget-scope="model" <div data-gadget-url="gadget_mynij_model.html" data-gadget-scope="model"
data-gadget-sandbox="public"> data-gadget-sandbox="public"></div>
</body> </body>
</html> </html>
\ No newline at end of file
bt5/Mynij Search/PathTemplateItem/web_page_module/gadget_erp5_page_mynij_search_html.xml
View file @ 2f822e9b
...@@ -103,7 +103,7 @@ ...@@ -103,7 +103,7 @@
</item> </item>
<item> <item>
<key> <string>title</string> </key> <key> <string>title</string> </key>
<value> <string>Mynij Home Page gadget</string> </value> <value> <string>Mynij Search Page gadget</string> </value>
</item> </item>
<item> <item>
<key> <string>version</string> </key> <key> <string>version</string> </key>
......
bt5/Mynij Search/PathTemplateItem/web_page_module/gadget_erp5_page_mynij_search_js.js
View file @ 2f822e9b
/*jslint nomen: true, indent: 2, maxerr: 3, maxlen: 80*/
/*global window, RSVP, rJS, document*/
(function (window, document, rJS, RSVP) { (function (window, document, rJS, RSVP) {
var gadget; var gadget;
rJS(window) rJS(window)
.setState({
.setState({ model_gadget : null,
model_gadget : null, result_gadget : null
result_gadget : null })
.ready(function () {
var model_gadget,
result_gadget,
gadget = this;
return gadget.getDeclaredGadget("model")
.push(function (model) {
model_gadget = model;
}) })
.push(function () {
.ready(function(){ return gadget.getDeclaredGadget("result");
var model_gadget,
result_gadget,
gadget = this;
return gadget.getDeclaredGadget("model")
.push(function(model){
model_gadget = model;
})
.push(function(){
return gadget.getDeclaredGadget("result");
})
.push(function(result){
return gadget.changeState({
model_gadget : model_gadget,
result_gadget : result
});
})
.push(function(){
setTimeout(function () {
return gadget.fill_available_indices();
}, 100);
});
}) })
.push(function (result) {
.declareMethod("fill_available_indices", function(){ return gadget.changeState({
var gadget = this, model_gadget : model_gadget,
drop_list = document.getElementById("select_index"); result_gadget : result
return gadget.state.model_gadget.get_available_indices() });
.push(function(results){
results.forEach((item, i) => {
var option_item = document.createElement("option");
option_item.value = item;
option_item.appendChild(document.createTextNode(item));
drop_list.appendChild(option_item);
});
});
}) })
.push(function () {
.declareMethod("search", function (key){ setTimeout(function () {
var gadget = this, return gadget.fill_available_indices();
chosen_index = document.getElementById("select_index").selectedOptions[0]; }, 100);
if (chosen_index == null){ });
return gadget.state.result_gadget.addItem({title : "Error : No index built", link : "", body : ""}, key); })
.declareMethod("fill_available_indices", function () {
var gadget = this,
drop_list = document.getElementById("select_index");
return gadget.state.model_gadget.get_available_indices()
.push(function (results) {
results.forEach((item, i) => {
var option_item = document.createElement("option");
option_item.value = item;
option_item.appendChild(document.createTextNode(item));
drop_list.appendChild(option_item);
});
});
})
.declareMethod("search", function (key) {
var gadget = this,
chosen_index;
chosen_index = document.getElementById("select_index").selectedOptions[0];
if (chosen_index === null) {
return gadget.state.result_gadget.addItem(
{
title: "Error : No index built",
link: "",
body: ""
},
key);
}
return gadget.state.result_gadget.clear()
.push(function () {
console.log("starting search");
return gadget.state.model_gadget.search(key, chosen_index.value);
})
.push(function (result) {
console.log("search done");
var i, promise_list = [];
if (result.length === 0) {
return gadget.state.result_gadget.addItem(
{
title : "No results found",
link : ""
},
"");
} else {
for (i = 0; i < result.length; i += 1) {
promise_list.push(gadget.state.model_gadget.get_page(result[i]));
}
return new RSVP.Queue()
.push(function () {
return RSVP.all(promise_list);
})
.push(function (result) {
var i, promise_list = [];
for (i = 0; i < result.length; i += 1) {
promise_list.push(gadget.state.result_gadget.addItem(
result[i],
key));
}
});
} }
return gadget.state.result_gadget.clear() });
.push(function(){ })
console.log("starting search");
return gadget.state.model_gadget.search(key, chosen_index.value); .declareMethod("add_searx_results", function (key) {
}) var gadget = this;
.push(function(result){ return new RSVP.Queue()
console.log("search done"); .push(function () {
if (result.length === 0) { return jIO.util.ajax({
return gadget.state.result_gadget.addItem({ url : "https://cors-anywhere.herokuapp.com/search.disroot.org/?q=" +
title : "No results found", key + "&category_general=on&theme=oscar"
link : ""
}, "");
} else {
var i, promise_list = [];
for (i=0; i<result.length; i+=1){
promise_list.push(gadget.state.model_gadget.get_page(result[i]));
}
return new RSVP.Queue()
.push(function(){
return RSVP.all(promise_list);
})
.push(function(result){
var i, promise_list = [];
for (i=0; i<result.length; i+=1){
promise_list.push(gadget.state.result_gadget.addItem(result[i], key));
}
});
}
}); });
}) })
.push(undefined, function (error) {
.declareMethod("add_searx_results", function(key){ var error_html;
var gadget = this; error_html = document.createElement("p");
return new RSVP.Queue() error_html.className = "no-result";
.push(function(){ error_html.textContent = "AN error occured, please try again. " +
return jIO.util.ajax({url : "https://cors-anywhere.herokuapp.com/search.disroot.org/?q=" + key + "&category_general=on&theme=oscar"}); error.message || '';
}) return gadget.state.result_gadget.show_searx_result(error_html);
.push(function(resultHTML){ })
var i, .push(function (resultHTML) {
promise_list = [], var i,
elements, promise_list = [],
doc = new DOMParser().parseFromString(resultHTML.currentTarget.response, "text/html"); elements,
elements = doc.body.querySelectorAll('div.result.result-default'); doc = new DOMParser().parseFromString(
for (i=0; i<elements.length; i+=1){ resultHTML.currentTarget.response,
promise_list.push(gadget.state.result_gadget.show_searx_result(elements[i], key)); "text/html");
} elements = doc.body.querySelectorAll('div.result.result-default');
return RSVP.all(promise_list); for (i = 0; i < elements.length; i += 1) {
}); promise_list.push(gadget.state.result_gadget.show_searx_result(
}) elements[i],
key));
.onEvent("submit", function(event){ }
var gadget = this, return RSVP.all(promise_list);
search_key = document.getElementById("search_input").value; });
})
.onEvent("submit", function (event) {
var gadget = this,
top = document.getElementById("logo-search"),
search_key = document.getElementById("search_input").value;
if(top) {
gadget.element.removeChild(top);
}
return gadget.state.result_gadget.startLoading()
.push(function () {
return gadget.state.result_gadget.showResultBox();
})
.push(function () {
return gadget.search(search_key) return gadget.search(search_key)
.push(function(){ })
return gadget.add_searx_results(search_key); .push(function () {
}); return gadget.add_searx_results(search_key);
}); });
});
}(window, document, rJS, RSVP)); }(window, document, rJS, RSVP));
\ No newline at end of file
bt5/Mynij Search/PathTemplateItem/web_page_module/gadget_mynij_model.js.js
View file @ 2f822e9b
/*jslint nomen: true, indent: 2, maxerr: 3, maxlen: 80*/ /*jslint nomen: true, indent: 2, maxerr: 3, maxlen: 80*/
/*global window, RSVP, rJS, jIO*/ /*global window, RSVP, rJS, jIO*/
(function (window, document, RSVP, rJS, jIO) { (function (window, document, RSVP, rJS, jIO) {
"use strict"; "use strict";
rJS(window) rJS(window)
.declareMethod("preRenderDocument", function (parent_options) { .declareMethod("preRenderDocument", function (parent_options) {
var gadget = this; var gadget = this;
return gadget.jio_get(parent_options.jio_key) return gadget.jio_get(parent_options.jio_key)
.push(function (parent_document) { .push(function (parent_document) {
return parent_document; return parent_document;
}); });
})
.ready(function () {
var indices = [], db;
db = jIO.createJIO({
type: "query",
sub_storage: {
type: "indexeddb",
database: "mynij"
}
});
this.changeState({
indices: indices,
db: db
});
})
.declareMethod("add_page", function (page, index_name) {
var gadget = this,
indices,
index;
if (! gadget.state.indices[index_name]) {
indices = gadget.state.indices;
indices[index_name] = new FlexSearch(
"memory",
{stemmer : "en", filter : "en"}
);
gadget.changeState({
indices : indices
});
}
index = gadget.state.indices[index_name];
return gadget.state.db.put(page.id, page)
.push(function () {
return index.add(page.id, page.title + "\n" + page.content);
});
})
.declareMethod("get_page", function (id) {
return this.state.db.get(id);
})
.declareMethod("save_index", function (index_name) {
var gadget = this,
serialized = this.state.indices[index_name].export_test(),
index_id = "index-" + index_name;
return this.state.db.put(
index_id,
{type: "index", info: this.state.indices[index_name].info()}
)
.push(function () {
return gadget.state.db.putAttachment(
index_id, "ids",
new Blob([serialized.ids], {type : "application/json"}));
}) })
.push(function () {
.ready(function(){ return gadget.state.db.putAttachment(
var indices = [], db; index_id,
"map",
db = jIO.createJIO( new Blob([serialized.map], {type : "application/json"}));
{
type:"query",
sub_storage: {
type : "indexeddb",
database : "mynij"
}
}
);
this.changeState({
indices : indices,
db : db
});
}) })
.push(function () {
.declareMethod("add_page", function(page, index_name){ return gadget.state.db.putAttachment(
var gadget = this, index; index_id,
if (! gadget.state.indices[index_name]){ "ctx",
var indices = gadget.state.indices; new Blob([serialized.ctx], {type : "application/json"}));
indices[index_name] = new FlexSearch("memory", {stemmer : "en", filter : "en"});
gadget.changeState({
indices : indices
});
}
index = gadget.state.indices[index_name];
return gadget.state.db.put(page.id, page)
.push(function(){
return index.add(page.id, page.title + "\n" + page.content);
});
}) })
.push(function () {
.declareMethod("get_page", function(id){ console.log("Index saved : ");
return this.state.db.get(id); console.log(gadget.state.indices[index_name].info());
return gadget.state.indices[index_name].info().items;
}) })
.push(undefined, function (my_error) {
.declareMethod("save_index", function(index_name){ console.log(my_error);
var gadget = this, });
serialized = this.state.indices[index_name].export_test(), })
index_id = "index-" + index_name;
return this.state.db.put(index_id, {type: "index", info : this.state.indices[index_name].info()}) .declareMethod("get_index", function (index_name) {
.push(function(){ var gadget = this,
return gadget.state.db.putAttachment(index_id, "ids", new Blob([serialized.ids], {type : "application/json"})); ids,
}) map,
.push(function(){ index_id = "index-" + index_name,
return gadget.state.db.putAttachment(index_id, "map", new Blob([serialized.map], {type : "application/json"})); new_index;
})
.push(function(){ new_index = FlexSearch.create("memory", {stemmer : "en", filter : "en"});
return gadget.state.db.putAttachment(index_id, "ctx", new Blob([serialized.ctx], {type : "application/json"})); return gadget.state.db.getAttachment(index_id, "ids", {"format": "text"})
}) .push(function (result) {
.push(function(){ ids = result;
console.log("Index saved : "); return gadget.state.db.getAttachment(
console.log(gadget.state.indices[index_name].info()); index_id,
return gadget.state.indices[index_name].info().items; "map",
}) {"format": "text"});
.push(undefined, function (my_error) { })
console.log(my_error); .push(function (result) {
}); map = result;
return gadget.state.db.getAttachment(index_id, "ctx", {"format": "text"});
}) })
.push(function (result) {
.declareMethod("get_index", function(index_name){ new_index.import_test(ids, map, result);
var gadget = this, return new_index;
ids, })
map, .push(undefined, function (my_error) {
index_id = "index-" + index_name, console.log(my_error);
new_index = FlexSearch.create("memory", {stemmer : "en", filter : "en"}); });
return gadget.state.db.getAttachment(index_id, "ids", {"format": "text"}) })
.push(function(result){
ids = result; .declareMethod("get_available_indices", function () {
return gadget.state.db.getAttachment(index_id, "map", {"format": "text"}); var gadget = this,
}) indices = [],
.push(function(result){ query = 'type:index';
map = result; return gadget.state.db.allDocs({"query" : query})
return gadget.state.db.getAttachment(index_id, "ctx", {"format": "text"}); .push(function (results) {
}) results.data.rows.forEach((item, i) => {
.push(function(result){ indices.push(item.id.split("index-")[1]);
new_index.import_test(ids, map, result); });
return new_index; return indices;
}) });
.push(undefined, function (my_error) {console.log(my_error)}); })
// .declareMethod("get_index_info", function(){
// console.log("index in state : ");
// console.log(this.state.index.info());
// return this.get_index()
// .push(function(index){
// console.log("index in db :");
// console.log(index.info());
// });
// })
.declareMethod("search", function (search_key, index_name) {
var gadget = this,
results = [];
return gadget.get_index(index_name)
.push(function (index) {
console.log(index.info());
return index.search(search_key);
}) })
.push(function (index_results) {
.declareMethod("get_available_indices", function(){ return index_results;
var gadget = this,
indices = [],
query='type:index';
return gadget.state.db.allDocs({"query" : query})
.push(function(results){
results.data.rows.forEach((item, i) => {
indices.push(item.id.split("index-")[1]);
});
return indices;
});
}) })
.push(undefined, function (my_error) {
// .declareMethod("get_index_info", function(){ console.log(my_error);
// console.log("index in state : ");
// console.log(this.state.index.info());
// return this.get_index()
// .push(function(index){
// console.log("index in db :");
// console.log(index.info());
// });
// })
.declareMethod("search", function(search_key, index_name){
var gadget = this,
results = [];
return gadget.get_index(index_name)
.push(function(index){
console.log(index.info());
return index.search(search_key);
})
.push(function(index_results){
return index_results;
})
.push(undefined, function (my_error) {console.log(my_error)});
}); });
});
}(window, document, RSVP, rJS, jIO)); }(window, document, RSVP, rJS, jIO));
\ No newline at end of file
bt5/Mynij Search/PathTemplateItem/web_page_module/gadget_mynij_result.html.html
View file @ 2f822e9b
...@@ -8,16 +8,31 @@ ...@@ -8,16 +8,31 @@
<link rel="stylesheet" type="text/css" href="mynij-style.css"> <link rel="stylesheet" type="text/css" href="mynij-style.css">
</head> </head>
<body> <body>
<div id="results" class="result-box"> <div id="results" class="tabs result-box hide">
<div id ="mynij" class="mynij-results"> <input type="radio" id="tab1" name="tab-control" checked>
<div class="logo-img"><img src="mynij_logo.png"></div> <input type="radio" id="tab2" name="tab-control">
<ul id="mynij-results"> <ul>
</ul> <li title="Mynij"><label for="tab1" role="button">
</div> <span><img class="logo-img logo-mynij" src="mynij_logo.png"></span></label>
<div id ="google" class="searx-results"> </li>
<div class="logo-img"><img src="mynij_google_logo.png"></div> <li title="Google"><label for="tab2" role="button">
<ul id="searx-results"> <span><img class="logo-img" src="mynij_google_logo.png"></span></label>
</ul> </li>
</ul>
<div class="slider"><div class="indicator"></div></div>
<div class="slider-border"></div>
<div class="content">
<section class="section-result">
<ul id="mynij-results">
</ul>
<div id="mynij-loading" class="loading" style="display: none"><div class="loader"></div></div>
</section>
<section class="section-result">
<ul id="searx-results">
</ul>
<div id="searx-loading" class="loading" style="display: none"><div class="loader"></div></div>
</section>
</div> </div>
</div> </div>
</body> </body>
......
bt5/Mynij Search/PathTemplateItem/web_page_module/gadget_mynij_result.js.js
View file @ 2f822e9b
/*jslint nomen: true, indent: 2, maxerr: 3, maxlen: 80*/ /*jslint nomen: true, indent: 2, maxerr: 3, maxlen: 80*/
/*global window, RSVP, rJS, jIO*/ /*global window, RSVP, rJS, document, DOMParser*/
(function(window, RSVP, rJS, jIO) { (function (window, RSVP, rJS, document, DOMParser) {
"use strict"; "use strict";
rJS(window) rJS(window)
.declareMethod("addItem", function(item, key) { .declareAcquiredMethod("getUrlFor", "getUrlFor")
var list,
list_item, .declareMethod("showResultBox", function () {
title, var box = document.getElementById("results");
link,
link_par, if (box.classList.contains("hide")) {
body, box.classList.remove("hide");
gadget = this; }
})
list = document.getElementById("mynij-results");
list_item = document.createElement("LI"); .declareMethod("startLoading", function () {
var loader;
title = document.createElement("a");
title.appendChild(document.createTextNode(item.title)); loader = document.getElementById("mynij-loading");
title.className="title"; loader.style.display = "block";
title.href = item.link; loader = document.getElementById("searx-loading");
list_item.appendChild(title); loader.style.display = "block";
})
return this.cut_link(item.link)
.push(function(cut_link){ .declareMethod("addItem", function (item, key) {
link = document.createElement("a"); var list,
link.appendChild(document.createTextNode(cut_link)); list_item,
link.href = item.link; title,
link.className = "link"; link,
link_par = document.createElement('p'); link_par,
link_par.appendChild(link); body,
list_item.appendChild(link_par); gadget = this;
})
.push(function(){ list = document.getElementById("mynij-results");
body = document.createElement('p'); list_item = document.createElement("LI");
body.className = "body"; if (item.link.startsWith("?url=")) {
item.body = new DOMParser().parseFromString(item.body, "text/html").body.textContent || ""; item.link = item.link.substring(5);
if (key === "" || item.body === ""){ }
body.innerHTML = "";
list.appendChild(list_item); return gadget.cut_link(item.link)
} else { .push(function (cut_link) {
return gadget.cut_description(item.body, key) //return gadget.cut_description(item.body, item.description, key) title = document.createElement("a");
.push(function (result){ title.appendChild(document.createTextNode(item.title));
var array = [...result.matchAll(key)], title.className = "title";
i; title.href = item.link;
for (i=0; i<array.length; i+=1){ list_item.appendChild(title);
result = result.slice(0, array[i].index) + "<b>" + result.slice(array[i].index, array[i].index+array[i][0].length+1) + "</b>" + result.slice(array[i].index+array[i][0].length+1); link = document.createElement("a");
} link.appendChild(document.createTextNode(item.link));
body.innerHTML = result; link.href = item.link;
list_item.appendChild(body); link.className = "link";
list.appendChild(list_item); link_par = document.createElement('p');
link_par.appendChild(link);
list_item.appendChild(link_par);
})
.push(function () {
var loader = document.getElementById("mynij-loading");
loader.style.display = "none";
body = document.createElement('p');
body.className = "body";
item.body = new DOMParser().parseFromString(
item.body,
"text/html"
).body.textContent || "";
if (key === "" || item.body === "") {
body.innerHTML = "";
list.appendChild(list_item);
} else {
//return gadget.cut_description(item.body, item.description, key)
return gadget.cut_description(item.body, key)
.push(function (result) {
var array = [...result.matchAll(key)],
i;
for (i = 0; i < array.length; i += 1) {
result = result.slice(0, array[i].index) +
"<b>" + result.slice(array[i].index,
array[i].index + array[i][0].length + 1
) +
"</b>" + result.slice(array[i].index +
array[i][0].length + 1);
}
body.innerHTML = result;
list_item.appendChild(body);
list.appendChild(list_item);
}); });
} }
}); });
})
}) .declareMethod("show_searx_result", function (item, key) {
var list,
.declareMethod("show_searx_result", function(item, key){ list_item,
var list, title,
list_item, link,
title, link_par,
link, body,
link_par, loader = document.getElementById("searx-loading");
body;
loader.style.display = "none";
list = document.getElementById("searx-results"); list = document.getElementById("searx-results");
list_item = document.createElement("li"); list_item = document.createElement("li");
title = document.createElement("a"); title = document.createElement("a");
title.appendChild(document.createTextNode(item.querySelector('h4.result_header').textContent)); title.appendChild(document.createTextNode(
title.className="title"; item.querySelector('h4.result_header').textContent));
title.href =item.querySelector('div.external-link').textContent; title.className = "title";
list_item.appendChild(title); title.href = item.querySelector('div.external-link').textContent;
list_item.appendChild(title);
link = document.createElement("a");
link.appendChild(document.createTextNode(item.querySelector('div.external-link').textContent)); link = document.createElement("a");
link.href = item.querySelector('div.external-link').textContent; link.appendChild(document.createTextNode(
link.className = "link"; item.querySelector('div.external-link').textContent));
link_par = document.createElement("p"); link.href = item.querySelector('div.external-link').textContent;
link_par.appendChild(link); link.className = "link";
list_item.appendChild(link_par); link_par = document.createElement("p");
link_par.appendChild(link);
body = document.createElement("p"); list_item.appendChild(link_par);
body.className = "body";
if (item.querySelector('p.result-content') !== null) body.innerHTML = item.querySelector('p.result-content').outerHTML; body = document.createElement("p");
else body.innerHTML = ""; body.className = "body";
list_item.appendChild(body); if (item.querySelector('p.result-content') !== null)
body.innerHTML = item.querySelector('p.result-content').outerHTML;
list.appendChild(list_item); else
}) body.innerHTML = "";
list_item.appendChild(body);
.declareMethod("clear", function(){
var list = document.getElementById("mynij-results"); list.appendChild(list_item);
while (list.firstChild) { })
list.removeChild(list.firstChild); .declareMethod("clear", function () {
} var list = document.getElementById("mynij-results");
list = document.getElementById("searx-results"); while (list.firstChild) {
while (list.firstChild) { list.removeChild(list.firstChild);
list.removeChild(list.firstChild); }
} list = document.getElementById("searx-results");
}) while (list.firstChild) {
list.removeChild(list.firstChild);
.declareMethod("cut_description", function(body, key){ //function(body, description, key) }
var result = new RegExp('[^.?!]*' + ' ' + key + ' ' + '[^.?!]*[.?!]', 'gm').exec(body); })
if (result === null) { .declareMethod("cut_description", function (body, key) {
result = new RegExp('[^.?!]*[.?!]').exec(body); //if (description !== "") return description; else.... //function(body, description, key)
if (result === null) return ""; var result = new RegExp(
else return result[0]; '[^.?!]*' + ' ' + key + ' ' + '[^.?!]*[.?!]', 'gm').exec(body);
}
if (result === null) {
//if (description !== "") return description; else....
result = new RegExp('[^.?!]*[.?!]').exec(body);
if (result === null) return "";
else return result[0]; else return result[0];
}) }
else return result[0];
.declareMethod("cut_link", function(link){ })
if (link === undefined) return ""; .declareMethod("cut_link", function (link) {
if (link.length > 70) return link.slice(0,70) + "..."; if (link === undefined) return "";
else return link; if (link.length > 70) return link.slice(0, 70) + "...";
}); else return link;
});
}(window, RSVP, rJS, jIO));
\ No newline at end of file }(window, RSVP, rJS, document, DOMParser));
\ No newline at end of file
bt5/Mynij Search/PathTemplateItem/web_page_module/gadget_mynij_style.css.css
View file @ 2f822e9b
#search_div { #search_div {
display : flex; display : flex;
transition: all 1s;
} }
#search_bar { #search_bar {
...@@ -11,6 +12,26 @@ ...@@ -11,6 +12,26 @@
width: 20%; width: 20%;
} }
.search {
width: 100%;
text-align: center;
margin-bottom: 40px;
}
.logo-search {
max-height: 130px;
}
.hide {
display: none;
}
@media (max-width: 600px) {
#mynij-results > li, #searx-results > li {
width: 100%;
}
}
/* body { /* body {
padding: 0; padding: 0;
margin: 0; margin: 0;
...@@ -133,14 +154,6 @@ input[type="button"]:hover{ ...@@ -133,14 +154,6 @@ input[type="button"]:hover{
} */ } */
.result-box {
display : flex;
}
.result-box:after {
content: "";
clear: both;
}
.mynij-results, .searx-results { .mynij-results, .searx-results {
margin-top : 20px; margin-top : 20px;
...@@ -148,45 +161,43 @@ input[type="button"]:hover{ ...@@ -148,45 +161,43 @@ input[type="button"]:hover{
} }
.logo-img { .logo-img {
width: 100%; height: 25px;
text-align: left;
height: 80px;
} }
.logo-mynij {
.logo-img img { margin-bottom: 5px;
height: 100%; }
#mynij-results, #searx-results {
display: inline-block;
width: 100%;
} }
#mynij-results > li, #searx-results > li { #mynij-results > li, #searx-results > li {
list-style-type: none; list-style-type: none;
position: relative; position: relative;
margin-bottom: 20px; padding: 10px 1%;
padding-top: 1%;
padding-bottom: 1%;
padding-left : 1%;
background: #fff; background: #fff;
color: #2b2b5d; color: #2b2b5d;
width: 90%; width: 90%;
max-width: 40em; max-width: 50em;
text-align : left; text-align : left;
flex: inherit;
} }
.title { .title {
color: #3c459e; color: #3c459e;
text-decoration: none; text-decoration: none;
font-size: 1.3em; font-size: 1.3em;
max-width: 40em; max-width: 50em;
} }
.link, .link:visited { .link, .link:visited {
text-decoration: none; text-decoration: none;
color: #009933; color: #009933;
max-width: 40em; max-width: 50em;
} }
.body { .body {
color : #444444; color : #444444;
max-width: 40em; max-width: 50em;
} }
#mynij-results > a, #searx-results > a { #mynij-results > a, #searx-results > a {
...@@ -223,3 +234,256 @@ input[type="button"]:hover{ ...@@ -223,3 +234,256 @@ input[type="button"]:hover{
font-weight: 100; font-weight: 100;
font-size: .8em; font-size: .8em;
} }
.loading {
margin-top: 80px;
position: absolute;
top: 100px;
left: 50%;
transform: translate(-50%, -50%);
}
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
border: 2px solid red;
border-color: transparent #ff2c2c transparent #ff2c2c;
border-radius: 50%;
animation: spin .6s linear infinite;
display: inline-block;
}
.section-result {
position: relative;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/** Tabs CSS **/
.tabs {
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
position: relative;
background: white;
padding: 20px;
padding-bottom: 80px;
border-radius: 5px;
min-width: 240px;
}
.tabs input[name="tab-control"] {
display: none;
}
.tabs ul li label {
font-family: "Montserrat";
font-weight: bold;
font-size: 18px;
color: #428bff;
}
.tabs ul {
list-style-type: none;
padding-left: 0;
display: -webkit-box;
display: flex;
flex-direction: row;
margin-bottom: 10px;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
margin: 0;
}
.tabs ul li {
box-sizing: border-box;
flex: 1;
width: 25%;
padding: 0 10px;
text-align: center;
}
.tabs ul li label {
color: #929daf;
overflow: hidden;
text-overflow: ellipsis;
display: block;
cursor: pointer;
transition: all 0.2s ease-in-out;
white-space: nowrap;
}
.tabs ul li label br {
display: none;
}
.tabs ul li label svg {
fill: #929daf;
height: 1.2em;
vertical-align: bottom;
margin-right: 0.2em;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.tabs ul li label:hover, .tabs ul li label:focus, .tabs ul li label:active {
outline: 0;
color: #bec5cf;
}
.tabs ul li label:hover svg, .tabs ul li label:focus svg, .tabs ul li label:active svg {
fill: #bec5cf;
}
.tabs .slider {
position: relative;
width: 50%;
-webkit-transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);
transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);
}
.tabs .slider .indicator {
position: relative;
/*width: 50px;*/
max-width: 100%;
margin: 0 auto;
height: 4px;
background: #428bff;
border-radius: 1px;
}
.tabs .slider-border {
border-top: 4px solid #e2e6ef;
height: 1px;
width: 100%;
margin-top: -4px;
border-radius: 1px;
}
.tabs .content {
margin-top: 30px;
}
.tabs .content section {
display: none;
-webkit-animation-name: content;
animation-name: content;
-webkit-animation-direction: normal;
animation-direction: normal;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
line-height: 1.4;
}
.tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label {
cursor: default;
color: #428bff;
}
.tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label svg {
fill: #428bff;
}
.tabs input[name="tab-control"]:nth-of-type(1):checked ~ .slider {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
.tabs input[name="tab-control"]:nth-of-type(1):checked ~ .content > section:nth-child(1) {
display: block;
}
.tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label {
cursor: default;
color: #428bff;
}
.tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label svg {
fill: #428bff;
}
.tabs input[name="tab-control"]:nth-of-type(2):checked ~ .slider {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.tabs input[name="tab-control"]:nth-of-type(2):checked ~ .content > section:nth-child(2) {
display: block;
}
.tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label {
cursor: default;
color: #428bff;
}
.tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label svg {
fill: #428bff;
}
@media (max-width: 600px) {
.tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label {
background: rgba(0, 0, 0, 0.08);
}
}
.tabs input[name="tab-control"]:nth-of-type(3):checked ~ .slider {
-webkit-transform: translateX(200%);
transform: translateX(200%);
}
.tabs input[name="tab-control"]:nth-of-type(3):checked ~ .content > section:nth-child(3) {
display: block;
}
.tabs input[name="tab-control"]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label {
cursor: default;
color: #428bff;
}
.tabs input[name="tab-control"]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label svg {
fill: #428bff;
}
@media (max-width: 600px) {
.tabs input[name="tab-control"]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label {
background: rgba(0, 0, 0, 0.08);
}
}
.tabs input[name="tab-control"]:nth-of-type(4):checked ~ .slider {
-webkit-transform: translateX(300%);
transform: translateX(300%);
}
.tabs input[name="tab-control"]:nth-of-type(4):checked ~ .content > section:nth-child(4) {
display: block;
}
@-webkit-keyframes content {
from {
opacity: 0;
-webkit-transform: translateY(5%);
transform: translateY(5%);
}
to {
opacity: 1;
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
}
@keyframes content {
from {
opacity: 0;
-webkit-transform: translateY(5%);
transform: translateY(5%);
}
to {
opacity: 1;
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
}
@media (max-width: 1000px) {
.tabs ul li label {
white-space: initial;
}
.tabs ul li label br {
display: initial;
}
.tabs ul li label svg {
height: 1.5em;
}
}
@media (max-width: 600px) {
/*.tabs ul li label span {
display: none;
}
.tabs .slider {
display: none;
}
.tabs .slider-border {
display: none;
}*/
.tabs .content {
margin-top: 20px;
}
}
/** END Tabs CSS **/
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7