andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

material search bar

Browse Source
This commit is contained in:
David Wu
2017-12-20 10:13:29 +01:00
parent 508c406701
commit 3a8a95ba68
2 changed files with 153 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
docs/index.html
View File

@ -19,15 +19,79 @@
code, kbd { font-size: 1em; }
code { transform: scale(1); } /* Deals with the issue described in #243 */
pre { font-size: 1rem; border: 0.0625rem solid var(--secondary-border-color); border-radius: var(--universal-border-radius);}
.group {
position:relative;
margin-top: 3em;
padding-bottom: -1em;
}
.search {
font-size:18px;
padding:10px 10px 10px 5px;
display:block;
width:300px;
border:none;
border-bottom:1px solid var(--nav-link-color);
}
.search:focus { outline:none; }
/* LABEL ======================================= */
label {
color: var(--nav-link-color);
font-size:18px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:10px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
/* active state */
.search:focus ~ label, .search:valid ~ label {
top:-20px;
font-size:14px;
color: var(--nav-link-color);
}
/* BOTTOM BARS ================================= */
.bar { position:relative; display:block; width:300px; }
.bar:before, .bar:after {
content:'';
height:2px;
width:0;
bottom:1px;
position:absolute;
background: var(--nav-link-color);
}
.bar:before {
left:50%;
}
.bar:after {
right:50%;
}
/* HIGHLIGHTER ================================== */
.highlight {
position:absolute;
height:60%;
width:100px;
top:25%;
left:0;
pointer-events:none;
opacity:0.5;
}
</style>
<link rel="stylesheet" href="prism.css">
</head>
<script>
document.addEventListener("load", alert("Attention! This site is only a fork of the original project demonstrating the newest changes made by myself. The original project can be found by clicking on the logo."));
const search = (node) => {
Array.from(node.parentElement.getElementsByTagName('a')).forEach(x => x.style.display = x.getAttribute("href").toUpperCase().indexOf(node.value.toUpperCase()) + 1 ? '' : 'none');
var remove = false, childs = Array.from(node.parentElement.children), toRemove = childs[0];
Array.from(node.parentElement.children).forEach(x => x.tagName == 'H3' ? (toRemove.style.display = (remove ? 'none' : ''), toRemove = x, remove = true) : (x.style.display == '' ? remove = false : remove=remove));
Array.from(node.parentElement.parentElement.getElementsByTagName('a')).forEach(x => x.style.display = x.getAttribute("href").toUpperCase().indexOf(node.value.toUpperCase()) + 1 ? '' : 'none');
var remove = false, childs = Array.from(node.parentElement.parentElement.children), toRemove = childs[0];
Array.from(node.parentElement.parentElement.children).forEach(x => x.tagName == 'H3' ? (toRemove.style.display = (remove ? 'none' : ''), toRemove = x, remove = true) : (x.style.display == '' ? remove = false : remove=remove));
}
</script>
<body>
@ -40,7 +104,13 @@
<div class="row" style="height: calc(100vh - 5.875rem);overflow: hidden;">
<input id="doc-drawer-checkbox" class="drawer" value="on" type="checkbox">
<nav class="col-md-4 col-lg-3" style="border-top: 0">
<input type="text" id="searchInput" onkeyup="search(this)" placeholder="Search for snippet..">
<!-- <input type="text" id="searchInput" onkeyup="search(this)" placeholder="Search for snippet.."> -->
<div class="group">
<input class="search" type="text" id="searchInput" onkeyup="search(this)">
<span class="highlight"></span>
<span class="bar"></span>
<label>Search for snippet...</label>
</div>
<label for="doc-drawer-checkbox" class="button drawer-close"></label>
<h3>Array
@ -309,7 +379,7 @@ Use <code>Array.reduce()</code> to create an object, where the keys are produced
<p>Initializes an array containing the numbers in the specified range where <code>start</code> and <code>end</code> are inclusive.</p>
<p>Use <code>Array((end + 1) - start)</code> to create an array of the desired length, <code>Array.map()</code> to fill with the desired values in a range.
You can omit <code>start</code> to use a default value of <code>0</code>.</p>
<pre><code class="language-js">const initializeArrayWithRange = (end, start = 0) =&gt;
<pre><code class="language-js">const initializeArrayWithRange = (end, start = 0) =&gt;
Array.from({ length: (end + 1) - start }).map((v, i) =&gt; i + start);
// initializeArrayWithRange(5) -&gt; [0,1,2,3,4,5]
// initializeArrayWithRange(7, 3) -&gt; [3,4,5,6,7]
@ -336,7 +406,7 @@ You can omit <code>value</code> to use a default value of <code>0</code>.</p>
</div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="mapobject">mapObject</h3></div><div class="section double-padded">
<p>Maps the values of an array to an object using a function, where the key-value pairs consist of the original value as the key and the mapped value.</p>
<p>Use an anonymous inner function scope to declare an undefined memory space, using closures to store a return value. Use a new <code>Array</code> to stor the array with a map of the function over its data set and a comma operator to return a second step, without needing to move from one context to another (due to closures and order of operations).</p>
<pre><code class="language-js">const mapObject = (arr, fn) =&gt;
<pre><code class="language-js">const mapObject = (arr, fn) =&gt;
(a =&gt; (a = [arr, arr.map(fn)], a[0].reduce( (acc,val,ind) =&gt; (acc[val] = a[1][ind], acc), {}) )) ( );
/*
const squareIt = arr =&gt; mapObject(arr, a =&gt; a*a)
@ -386,7 +456,7 @@ Use <code>Array.push()</code> to keep track of pulled values</p>
let removed = [];
let pulled = arr.map((v, i) =&gt; pullArr.includes(i) ? removed.push(v) : v)
.filter((v, i) =&gt; !pullArr.includes(i))
arr.length = 0;
arr.length = 0;
pulled.forEach(v =&gt; arr.push(v));
return removed;
}
@ -403,7 +473,7 @@ Use <code>Array.push()</code> to keep track of pulled values</p>
Use <code>Array.length = 0</code> to mutate the passed in array by resetting it's length to zero and <code>Array.push()</code> to re-populate it with only the pulled values.
Use <code>Array.push()</code> to keep track of pulled values</p>
<pre><code class="language-js">const pullAtValue = (arr, pullArr) =&gt; {
let removed = [],
let removed = [],
pushToRemove = arr.forEach((v, i) =&gt; pullArr.includes(v) ? removed.push(v) : v),
mutateTo = arr.filter((v, i) =&gt; !pullArr.includes(v));
arr.length = 0;
@ -1183,3 +1253,4 @@ Use <code>Number()</code> to check if the coercion holds.</p>
<script src="prism.js"></script>
</body>
</html>

78
static-parts/index-start.html
View File

@ -19,15 +19,79 @@
code, kbd { font-size: 1em; }
code { transform: scale(1); } /* Deals with the issue described in #243 */
pre { font-size: 1rem; border: 0.0625rem solid var(--secondary-border-color); border-radius: var(--universal-border-radius);}
.group {
position: relative;
margin-top: 2em;
margin-bottom: -1em;
}
.search {
font-size: 14px;
margin-top: -0.1em;
display: block;
width: 320px;
border: none;
border-bottom: 1px solid var(--nav-link-color);
}
.search:focus { outline:none; }
/* LABEL ======================================= */
label {
color: var(--nav-link-color);
font-size:18px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:10px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
/* active state */
.search:focus ~ label, .search:valid ~ label {
top:-20px;
font-size:14px;
color: var(--nav-link-color);
}
/* BOTTOM BARS ================================= */
.bar { position:relative; display:block; width:inherit; }
.bar:before, .bar:after {
content:'';
height:2px;
width:0;
bottom:1px;
position:absolute;
background: var(--nav-link-color);
}
.bar:before {
left:50%;
}
.bar:after {
right:50%;
}
/* HIGHLIGHTER ================================== */
.highlight {
position:absolute;
height:60%;
width:100px;
top:25%;
left:0;
pointer-events:none;
opacity:0.5;
}
</style>
<link rel="stylesheet" href="prism.css">
</head>
<script>
document.addEventListener("load", alert("Attention! This site is only a fork of the original project demonstrating the newest changes made by myself. The original project can be found by clicking on the logo."));
const search = (node) => {
Array.from(node.parentElement.getElementsByTagName('a')).forEach(x => x.style.display = x.getAttribute("href").toUpperCase().indexOf(node.value.toUpperCase()) + 1 ? '' : 'none');
var remove = false, childs = Array.from(node.parentElement.children), toRemove = childs[0];
Array.from(node.parentElement.children).forEach(x => x.tagName == 'H3' ? (toRemove.style.display = (remove ? 'none' : ''), toRemove = x, remove = true) : (x.style.display == '' ? remove = false : remove=remove));
Array.from(node.parentElement.parentElement.getElementsByTagName('a')).forEach(x => x.style.display = x.getAttribute("href").toUpperCase().indexOf(node.value.toUpperCase()) + 1 ? '' : 'none');
var remove = false, childs = Array.from(node.parentElement.parentElement.children), toRemove = childs[0];
Array.from(node.parentElement.parentElement.children).forEach(x => x.tagName == 'H3' ? (toRemove.style.display = (remove ? 'none' : ''), toRemove = x, remove = true) : (x.style.display == '' ? remove = false : remove=remove));
}
</script>
<body>
@ -40,5 +104,11 @@
<div class="row" style="height: calc(100vh - 5.875rem);overflow: hidden;">
<input id="doc-drawer-checkbox" class="drawer" value="on" type="checkbox">
<nav class="col-md-4 col-lg-3" style="border-top: 0">
<input type="text" id="searchInput" onkeyup="search(this)" placeholder="Search for snippet..">
<!-- <input type="text" id="searchInput" onkeyup="search(this)" placeholder="Search for snippet.."> -->
<div class="group">
<input class="search" type="text" id="searchInput" onkeyup="search(this)">
<span class="highlight"></span>
<span class="bar"></span>
<label>Search for snippet...</label>
</div>
<label for="doc-drawer-checkbox" class="button drawer-close"></label>