Behaviorizes search

This commit is contained in:
Rico Sta. Cruz 2017-10-01 02:36:27 +08:00
parent 431881414f
commit b8e3bc1d99
No known key found for this signature in database
GPG Key ID: CAAD38AE2962619A
6 changed files with 51 additions and 29 deletions

View File

@ -18,6 +18,5 @@
<!-- 2017 layout --> <!-- 2017 layout -->
<link href='{{base}}/assets/2017/style.css?t={{ timestamp }}' rel='stylesheet'> <link href='{{base}}/assets/2017/style.css?t={{ timestamp }}' rel='stylesheet'>
<script src='{{base}}/assets/2017/script.js?t={{ timestamp }}'></script>
</head> </head>
<body> <body>

View File

@ -1,3 +1,6 @@
import $ from 'jquery'
import * as Search from '../helpers/search'
/* /*
* Behavior: Search * Behavior: Search
*/ */
@ -69,30 +72,6 @@ function splitwords (str) {
return words return words
} }
/*
* Search
*/
const Search = {
showAll () {
$('[data-search-index]').removeAttr('aria-hidden')
},
show (val) {
const keywords = splitwords(val)
if (!keywords.length) return Search.showAll()
const selectors = keywords
.map(k => `[data-search-index~=${JSON.stringify(k)}]`)
.join('')
$('[data-search-index]').attr('aria-hidden', true)
$(selectors).removeAttr('aria-hidden')
}
}
/* /*
* Helper: minimal qs implementation * Helper: minimal qs implementation
*/ */

View File

@ -3,6 +3,10 @@ import $ from 'jquery'
import onmount from 'onmount' import onmount from 'onmount'
import permutate from '../helpers/permutate' import permutate from '../helpers/permutate'
/**
* Sets search indices (`data-search-index` attribute)
*/
onmount('[data-js-searchable-item]', function () { onmount('[data-js-searchable-item]', function () {
const $this = $(this) const $this = $(this)
const data = $this.data('js-searchable-item') const data = $this.data('js-searchable-item')

40
_js/helpers/search.js Normal file
View File

@ -0,0 +1,40 @@
import { splitwords } from './permutate'
import qsa from 'dom101/query-selector-all'
/**
* Show everything.
*
* @example
* Search.showAll()
*/
export function showAll () {
qsa('[data-search-index]').forEach(el => {
el.removeAttribute('aria-hidden')
})
}
/**
* Search for a given keyword.
*
* @example
* Search.show('hello')
*/
export function show (val) {
const keywords = splitwords(val)
if (!keywords.length) return showAll()
const selectors = keywords
.map(k => `[data-search-index~=${JSON.stringify(k)}]`)
.join('')
qsa('[data-search-index]').forEach(el => {
el.setAttribute('aria-hidden', true)
})
qsa(selectors).forEach(el => {
el.removeAttribute('aria-hidden')
})
}

View File

@ -19,7 +19,7 @@
}, },
"dependencies": { "dependencies": {
"babel-polyfill": "6.26.0", "babel-polyfill": "6.26.0",
"dom101": "1.3.0", "dom101": "2.0.1",
"hint.css": "2.5.0", "hint.css": "2.5.0",
"isotope-layout": "3.0.4", "isotope-layout": "3.0.4",
"jquery": "3.2.1", "jquery": "3.2.1",

View File

@ -1194,9 +1194,9 @@ diffie-hellman@^5.0.0:
miller-rabin "^4.0.0" miller-rabin "^4.0.0"
randombytes "^2.0.0" randombytes "^2.0.0"
dom101@1.3.0: dom101@2.0.1:
version "1.3.0" version "2.0.1"
resolved "https://registry.yarnpkg.com/dom101/-/dom101-1.3.0.tgz#d7fca30686240171b6cf17c2e855d6a32fa2c9c9" resolved "https://registry.yarnpkg.com/dom101/-/dom101-2.0.1.tgz#b40f643ce977e30989014bce40479bceef0ff29a"
domain-browser@^1.1.1: domain-browser@^1.1.1:
version "1.1.7" version "1.1.7"