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>