Dieses Repository beinhaltet HTML- und Javascript Code zur einer NotizenWebApp auf Basis von Web Storage. Zudem sind Mocha/Chai Tests im Browser enthalten. https://meinenotizen.netlify.app/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

directory.html 2.2KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset='utf-8'>
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  6. <title>listing directory {directory}</title>
  7. <style>{style}</style>
  8. <script>
  9. function $(id){
  10. var el = 'string' == typeof id
  11. ? document.getElementById(id)
  12. : id;
  13. el.on = function(event, fn){
  14. if ('content loaded' == event) {
  15. event = window.attachEvent ? "load" : "DOMContentLoaded";
  16. }
  17. el.addEventListener
  18. ? el.addEventListener(event, fn, false)
  19. : el.attachEvent("on" + event, fn);
  20. };
  21. el.all = function(selector){
  22. return $(el.querySelectorAll(selector));
  23. };
  24. el.each = function(fn){
  25. for (var i = 0, len = el.length; i < len; ++i) {
  26. fn($(el[i]), i);
  27. }
  28. };
  29. el.getClasses = function(){
  30. return this.getAttribute('class').split(/\s+/);
  31. };
  32. el.addClass = function(name){
  33. var classes = this.getAttribute('class');
  34. el.setAttribute('class', classes
  35. ? classes + ' ' + name
  36. : name);
  37. };
  38. el.removeClass = function(name){
  39. var classes = this.getClasses().filter(function(curr){
  40. return curr != name;
  41. });
  42. this.setAttribute('class', classes.join(' '));
  43. };
  44. return el;
  45. }
  46. function search() {
  47. var str = $('search').value.toLowerCase();
  48. var links = $('files').all('a');
  49. links.each(function(link){
  50. var text = link.textContent.toLowerCase();
  51. if ('..' == text) return;
  52. if (str.length && ~text.indexOf(str)) {
  53. link.addClass('highlight');
  54. } else {
  55. link.removeClass('highlight');
  56. }
  57. });
  58. }
  59. $(window).on('content loaded', function(){
  60. $('search').on('keyup', search);
  61. });
  62. </script>
  63. </head>
  64. <body class="directory">
  65. <input id="search" type="text" placeholder="Search" autocomplete="off" />
  66. <div id="wrapper">
  67. <h1><a href="/">~</a>{linked-path}</h1>
  68. {files}
  69. </div>
  70. </body>
  71. </html>