Skip to content

Commit

Permalink
Replace tipuesearch's jQuery with a mix of JS and preact
Browse files Browse the repository at this point in the history
  • Loading branch information
onigoetz committed Sep 18, 2019
1 parent 75f34ca commit 194110e
Show file tree
Hide file tree
Showing 27 changed files with 3,073 additions and 803 deletions.
4 changes: 4 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,7 @@ node_modules
static

/vendor

/prettier.config.js
/.eslintrc.js
/stylelint.config.js
2 changes: 1 addition & 1 deletion Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ COPY bin/ /daux/bin/
COPY libs/ /daux/libs/
COPY templates/ /daux/templates/
COPY themes/ /daux/themes/
COPY tipuesearch/ /daux/tipuesearch/
COPY search/ /daux/search/
COPY global.json /daux/global.json
COPY index.php /daux/index.php

Expand Down
86 changes: 48 additions & 38 deletions crafty.config.js
Original file line number Diff line number Diff line change
@@ -1,48 +1,58 @@

module.exports = {
browsers: "> 0.25%, Edge >= 15, Safari >= 10, iOS >= 10, Chrome >= 56, Firefox >= 51, IE >= 11, not op_mini all",
browsers:
"> 0.25%, Edge >= 15, Safari >= 10, iOS >= 10, Chrome >= 56, Firefox >= 51, IE >= 11, not op_mini all",
presets: [
"@swissquote/crafty-preset-postcss",
"@swissquote/crafty-runner-gulp"
"@swissquote/crafty-preset-babel",
"@swissquote/crafty-runner-rollup",
"@swissquote/crafty-preset-postcss",
"@swissquote/crafty-runner-gulp"
],
destination_css: "themes",
destination_js: ".",
stylelint_pattern: [
"themes/daux/scss/**/*.scss",
"themes/daux_singlepage/scss/**/*.scss",
"!*.min.css",
"!**/vendor/**/*.scss"
"themes/daux/scss/**/*.scss",
"themes/daux_singlepage/scss/**/*.scss",
"!*.min.css",
"!**/vendor/**/*.scss"
],
stylelint: {
rules: {
"swissquote/no-type-outside-scope": null,
"plugin/no-unsupported-browser-features": null
}
rules: {
"swissquote/no-type-outside-scope": null,
"plugin/no-unsupported-browser-features": null
}
},
js: {
search: {
runner: "rollup",
source: "src/js/search/index.js",
destination: "search/search.min.js"
}
},
css: {
"theme_blue": {
source: "themes/daux/scss/theme-blue.scss",
destination: "daux/css/theme-blue.min.css",
watch: ["themes/daux/scss/**"]
},
"theme_green": {
source: "themes/daux/scss/theme-green.scss",
destination: "daux/css/theme-green.min.css",
watch: ["themes/daux/scss/**"]
},
"theme_navy": {
source: "themes/daux/scss/theme-navy.scss",
destination: "daux/css/theme-navy.min.css",
watch: ["themes/daux/scss/**"]
},
"theme_red": {
source: "themes/daux/scss/theme-red.scss",
destination: "daux/css/theme-red.min.css",
watch: ["themes/daux/scss/**"]
},
"daux_singlepage": {
source: "themes/daux_singlepage/scss/main.scss",
destination: "daux_singlepage/css/main.min.css",
watch: ["themes/daux_singlepage/scss/**"]
}
theme_blue: {
source: "themes/daux/scss/theme-blue.scss",
destination: "daux/css/theme-blue.min.css",
watch: ["themes/daux/scss/**"]
},
theme_green: {
source: "themes/daux/scss/theme-green.scss",
destination: "daux/css/theme-green.min.css",
watch: ["themes/daux/scss/**"]
},
theme_navy: {
source: "themes/daux/scss/theme-navy.scss",
destination: "daux/css/theme-navy.min.css",
watch: ["themes/daux/scss/**"]
},
theme_red: {
source: "themes/daux/scss/theme-red.scss",
destination: "daux/css/theme-red.min.css",
watch: ["themes/daux/scss/**"]
},
daux_singlepage: {
source: "themes/daux_singlepage/scss/main.scss",
destination: "daux_singlepage/css/main.min.css",
watch: ["themes/daux_singlepage/scss/**"]
}
}
};
};
6 changes: 3 additions & 3 deletions libs/Format/HTML/Generator.php
Original file line number Diff line number Diff line change
Expand Up @@ -74,11 +74,11 @@ function() use ($destination, $params) {

if ($params['html']['search']) {
GeneratorHelper::copyRecursive(
$this->daux->local_base . DIRECTORY_SEPARATOR . 'tipuesearch' . DIRECTORY_SEPARATOR,
$destination . DIRECTORY_SEPARATOR . 'tipuesearch'
$this->daux->local_base . DIRECTORY_SEPARATOR . 'search' . DIRECTORY_SEPARATOR,
$destination . DIRECTORY_SEPARATOR . 'search'
);
file_put_contents(
$destination . DIRECTORY_SEPARATOR . 'tipuesearch' . DIRECTORY_SEPARATOR . 'tipuesearch_content.json',
$destination . DIRECTORY_SEPARATOR . 'search' . DIRECTORY_SEPARATOR . 'search_index.json',
json_encode(['pages' => $this->indexed_pages])
);

Expand Down
5 changes: 4 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,11 @@
"private": true,
"devDependencies": {
"@swissquote/crafty": "^1.7.3",
"@swissquote/crafty-preset-babel": "^1.8.0",
"@swissquote/crafty-preset-postcss": "^1.7.3",
"@swissquote/crafty-runner-gulp": "^1.7.3"
"@swissquote/crafty-runner-gulp": "^1.7.3",
"@swissquote/crafty-runner-rollup": "^1.8.0",
"preact": "^8.5.2"
},
"scripts": {
"build": "crafty run",
Expand Down
44 changes: 18 additions & 26 deletions tipuesearch/tipuesearch.css → search/search.css
Original file line number Diff line number Diff line change
@@ -1,10 +1,3 @@
/*
Tipue Search 5.0
Copyright (c) 2015 Tipue
Tipue Search is released under the MIT License
http://www.tipue.com/search
*/

body.with-search {
overflow: hidden;
}
Expand All @@ -16,7 +9,7 @@ body.with-search {
margin: 0;

z-index: 100;
position:absolute;
position: absolute;
top: 0;
left: 0;
bottom: 0;
Expand All @@ -27,18 +20,17 @@ body.with-search {
.SearchResultsBackdrop {
z-index: 90;

width:100%;
width: 100%;

position:absolute;
position: absolute;
top: 0;
left: 0;
bottom: 0;

background: #000;
opacity: .6;
opacity: 0.6;
}


.homepage .SearchResults,
.homepage .SearchResultsBackdrop {
top: 50px;
Expand All @@ -54,11 +46,12 @@ body.with-search {
}

.SearchResults__warning {
font-weight:300;
font-size:15px;
font-weight: 300;
font-size: 15px;
line-height: 1.6;
color: #555;
margin: 7px 0;
clear: both;
}

.SearchResults__warning a {
Expand All @@ -71,8 +64,8 @@ body.with-search {
}

.SearchResults__count {
font-weight:300;
font-size:15px;
font-weight: 300;
font-size: 15px;
line-height: 1.7;
color: #555;
}
Expand All @@ -86,12 +79,12 @@ body.with-search {
cursor: pointer;
padding: 0;
margin: 0;
line-height: .8em;
line-height: 0.8em;
}

.SearchResults__title {
font-weight:300;
font-size:21px;
font-weight: 300;
font-size: 21px;
line-height: 1.7;
margin-top: 23px;
}
Expand All @@ -106,8 +99,8 @@ body.with-search {
}

.SearchResults__url {
font-weight:300;
font-size:14px;
font-weight: 300;
font-size: 14px;
line-height: 1.9;
word-wrap: break-word;
hyphens: auto;
Expand All @@ -123,8 +116,8 @@ body.with-search {
}

.SearchResults__text {
font-weight:300;
font-size:15px;
font-weight: 300;
font-size: 15px;
line-height: 1.6;
color: #555;
word-wrap: break-word;
Expand All @@ -133,8 +126,8 @@ body.with-search {
}

.SearchResults__debug {
font-weight:300;
font-size:13px;
font-weight: 300;
font-size: 13px;
line-height: 1.6;
color: #555;
margin: 5px 0;
Expand Down Expand Up @@ -164,7 +157,6 @@ body.with-search {
border: 1px solid #e2e2e2;
}


/* spinner */

@media (min-width: 650px) {
Expand Down
2 changes: 2 additions & 0 deletions search/search.min.js

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions search/search.min.js.map

Large diffs are not rendered by default.

64 changes: 64 additions & 0 deletions src/js/search/Pagination.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import preact from "preact";
import { textLinkPrevious, textLinkNext } from "./translation";
/** @jsx preact.h */

export default function Pagination({ counter, start, settings, onPageSelect }) {
const pages = Math.ceil(counter / settings.show);
const page = start / settings.show;

let displayedPages;
if (page <= 2) {
// Display max three pages
displayedPages = Math.min(pages, 3);
} else {
// Display two more pages, but don't overflow
displayedPages = Math.min(pages, page + 2);
}

const items = [];

for (let f = 0; f < displayedPages; f++) {
if (f === page) {
items.push(<li className="current">{f + 1}</li>);
} else {
items.push(
<li>
<a
className="SearchResults__footer__link"
onClick={() => onPageSelect(f * settings.show)}
>
{f + 1}
</a>
</li>
);
}
}

return (
<div className="SearchResults__footer">
<ul className="SearchResults__footer__links Pager">
{start > 0 && (
<li className="Pager--prev">
<a
className="SearchResults__footer__link"
onClick={() => onPageSelect(start - settings.show)}
>
{textLinkPrevious}
</a>
</li>
)}
{items}
{page + 1 !== pages && (
<li className="Pager--next">
<a
className="SearchResults__footer__link"
onClick={() => onPageSelect(start + settings.show)}
>
{textLinkNext}
</a>
</li>
)}
</ul>
</div>
);
}
55 changes: 55 additions & 0 deletions src/js/search/Result.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import preact from "preact";
/** @jsx preact.h */

// TODO :: restore highlight
/*function highlightText(search, text) {
if (settings.highlightTerms) {
var pattern = new RegExp(
`(${search})`,
settings.highlightEveryTerm ? "gi" : "i"
);
text = text.replace(
pattern,
'<span class="SearchResults__highlight">$1</span>'
);
}
return text;
}*/

export default function Result({ settings, item }) {
let description;
if (item.desc) {
description = item.desc
.split(" ")
.slice(0, settings.descriptiveWords)
.join(" ");
if (
item.desc.length < description.length &&
description.charAt(description.length - 1) !== "."
) {
description += " ...";
}
}

return (
<div className="SearchResult">
<div className="SearchResults__title">
<a href={settings.base_url + item.url}>{item.title}</a>
</div>
{settings.debug && (
<div className="SearchResults__debug">Score: {item.score}</div>
)}
{settings.showURL && (
<div className="SearchResults__url">
<a href={settings.base_url + item.url}>
{item.url.toLowerCase().replace(/https?:\/\//g, "")}
</a>
</div>
)}
{description.desc && (
<div className="SearchResults__text">{description}</div>
)}
</div>
);
}
Loading

0 comments on commit 194110e

Please sign in to comment.