ThirdMirrors
/
cheatsheets
mirror of https://gitee.com/Hawkin99/cheatsheets.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_includes/2017/head.html
View File

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

27
assets/2017/script.js → _js/behaviors/search.js
View File

@ -1,3 +1,6 @@
import $ from 'jquery'
import * as Search from '../helpers/search'
/*
* Behavior: Search
*/
@ -69,30 +72,6 @@ function splitwords (str) {
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
*/

4
_js/behaviors/searchable-item.js
View File

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

2
package.json
View File

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

6
yarn.lock
View File

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