1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 button { font-size: 1.2em; }
6 .qpage { margin: 2px; }
7 </style>
8 </head>
9 <body>
10 <div>
11 <b>New link name:</b>
12 <input type="text" id="link_title">
13 <button id="btn_create">Create <b id="link_page"></b>
14 </button>
15 </div>
16
17 <script>
18 // Create button
19 document.getElementById('btn_create')
20 .addEventListener('click', function(){
21 parent.insert_link(link_page.textContent, link_title.value);
22 parent.close_link_creator();
23 });
24
25 var link_title = document.getElementById('link_title');
26 var link_page = document.getElementById('link_page');
27
28 link_title.addEventListener('input', function(){
29 link_page.textContent = link_title.value.toLowerCase().replace(/[^a-z0-9]/g, '_');
30 });
31
32 // quick link via button
33 function q(page_name, title){
34 parent.insert_link(page_name, title);
35 parent.close_link_creator();
36 }
37 </script>
38
39 <hr>
40 <b>Existing Pages:</b>
41 <input id="qsearch" type="text" placeholder="Search...">
42
43 <?php
44 include 'core.php';
45 $files = scandir($GLOBALS['page_dir']);
46 foreach($files as $file){
47 if(!preg_match('/\.html$/', $file)){
48 continue;
49 }
50 $name = preg_replace('/\.html$/','',$file);
51 $title = ucwords(preg_replace('/_+/', ' ', $name));
52 echo "<button class=\"qpage\" onclick=\"q('$name','$title')\">$title</button>";
53 }
54 ?>
55 <script>
56 function fuzzy_match2(haystack, needle){
57 // Adapted from https://stackoverflow.com/a/15252131
58 var hay = haystack.toLowerCase(), i = 0, n = -1, l;
59 s = needle.toLowerCase();
60 for (; l = s[i++] ;) if (!~(n = hay.indexOf(l, n + 1))) return false;
61 return true;
62 }
63
64 var quickpages = document.querySelectorAll('button.qpage');
65 document.getElementById('qsearch').addEventListener('input', function(e){
66 var search = e.target.value;
67 var all = false;
68 if(search.length < 1){ all = true; }
69 quickpages.forEach(function(qp){
70 qp.style.display = (all || fuzzy_match2(qp.textContent, search))
71 ? 'inline-block' : 'none';
72 });
73 });
74 </script>
75
76 </body>
77 </html>