housekeep: copy static files

we copy static files used by PHP and Python versions into /static

preparation work for the removal of the PHP version

Signed-off-by: moson-mo <mo-son@mailbox.org>

static/js/comment-edit.js

@@ -0,0 +1,61 @@
+function add_busy_indicator(sibling) {
+    const img = document.createElement('img');
+    img.src = "/static/images/ajax-loader.gif";
+    img.classList.add('ajax-loader');
+    img.style.height = 11;
+    img.style.width = 16;
+    img.alt = "Busy…";
+
+    sibling.insertAdjacentElement('afterend', img);
+}
+
+function remove_busy_indicator(sibling) {
+    const elem = sibling.nextElementSibling;
+    elem.parentNode.removeChild(elem);
+}
+
+function getParentsUntil(elem, className) {
+    // Limit to 10 depth
+    for ( ; elem && elem !== document; elem = elem.parentNode) {
+        if (elem.matches(className)) {
+            break;
+        }
+    }
+
+    return elem;
+}
+
+function handleEditCommentClick(event, pkgbasename) {
+    event.preventDefault();
+    const parent_element = getParentsUntil(event.target, '.comment-header');
+    const parent_id = parent_element.id;
+    const comment_id = parent_id.substr(parent_id.indexOf('-') + 1);
+    // The div class="article-content" which contains the comment
+    const edit_form = parent_element.nextElementSibling;
+
+    const url = "/pkgbase/" + pkgbasename + "/comments/" + comment_id + "/form?";
+
+    add_busy_indicator(event.target);
+
+    fetch(url + new URLSearchParams({ next: window.location.pathname }), {
+        method: 'GET',
+        credentials: 'same-origin'
+    })
+    .then(function(response) {
+        if (!response.ok) {
+            throw Error(response.statusText);
+        }
+        return response.json();
+    })
+    .then(function(data) {
+        remove_busy_indicator(event.target);
+        edit_form.innerHTML = data.form;
+        edit_form.querySelector('textarea').focus();
+    })
+    .catch(function(error) {
+        remove_busy_indicator(event.target);
+        console.error(error);
+    });
+
+    return false;
+}

static/js/copy.js

@@ -0,0 +1,9 @@
+document.addEventListener('DOMContentLoaded', function() {
+    let elements = document.querySelectorAll('.copy');
+    elements.forEach(function(el) {
+        el.addEventListener('click', function(e) {
+            e.preventDefault();
+            navigator.clipboard.writeText(e.target.text);
+        });
+    });
+});

static/js/typeahead-home.js

@@ -0,0 +1,6 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const input = document.getElementById('pkgsearch-field');
+    const form = document.getElementById('pkgsearch-form');
+    const type = 'suggest';
+    typeahead.init(type, input, form);
+});

static/js/typeahead-pkgbase-merge.js

@@ -0,0 +1,6 @@
+document.addEventListener('DOMContentLoaded', function() {
+	const input = document.getElementById('merge_into');
+	const form = document.getElementById('merge-form');
+	const type = "suggest-pkgbase";
+	typeahead.init(type, input, form, false);
+});

static/js/typeahead-pkgbase-request.js

@@ -0,0 +1,36 @@
+function showHideMergeSection() {
+    const elem = document.getElementById('id_type');
+    const merge_section = document.getElementById('merge_section');
+    if (elem.value == 'merge') {
+        merge_section.style.display = '';
+    } else {
+        merge_section.style.display = 'none';
+    }
+}
+
+function showHideRequestHints() {
+    document.getElementById('deletion_hint').style.display = 'none';
+    document.getElementById('merge_hint').style.display = 'none';
+    document.getElementById('orphan_hint').style.display = 'none';
+
+    const elem = document.getElementById('id_type');
+    document.getElementById(elem.value + '_hint').style.display = '';
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    showHideMergeSection();
+    showHideRequestHints();
+
+    const input = document.getElementById('id_merge_into');
+    const form = document.getElementById('request-form');
+    const type = "suggest-pkgbase";
+
+    typeahead.init(type, input, form, false);
+});
+
+// Bind the change event here, otherwise we have to inline javascript,
+// which angers CSP (Content Security Policy).
+document.getElementById("id_type").addEventListener("change", function() {
+    showHideMergeSection();
+    showHideRequestHints();
+});

static/js/typeahead.js

@@ -0,0 +1,151 @@
+"use strict";
+
+const typeahead = (function() {
+  var input;
+  var form;
+  var suggest_type;
+  var list;
+  var submit = true;
+
+  function resetResults() {
+    if (!list) return;
+    list.style.display = "none";
+    list.innerHTML = "";
+  }
+
+  function getCompleteList() {
+    if (!list) {
+      list = document.createElement("UL");
+      list.setAttribute("class", "pkgsearch-typeahead");
+      form.appendChild(list);
+      setListLocation();
+    }
+    return list;
+  }
+
+  function onListClick(e) {
+      let target = e.target;
+      while (!target.getAttribute('data-value')) {
+        target = target.parentNode;
+      }
+      input.value = target.getAttribute('data-value');
+      if (submit) {
+        form.submit();
+      }
+  }
+
+  function setListLocation() {
+    if (!list) return;
+    const rects = input.getClientRects()[0];
+    list.style.top = (rects.top + rects.height) + "px";
+    list.style.left = rects.left + "px";
+  }
+
+  function loadData(letter, data) {
+    const pkgs = data.slice(0, 10); // Show maximum of 10 results
+
+    resetResults();
+
+    if (pkgs.length === 0) {
+      return;
+    }
+
+    const ul = getCompleteList();
+    ul.style.display = "block";
+    const fragment = document.createDocumentFragment();
+
+    for (let i = 0; i < pkgs.length; i++) {
+      const item = document.createElement("li");
+      const text = pkgs[i].replace(letter, '<b>' + letter + '</b>');
+      item.innerHTML = '<a href="#">' + text + '</a>';
+      item.setAttribute('data-value', pkgs[i]);
+      fragment.appendChild(item);
+    }
+
+    ul.appendChild(fragment);
+    ul.addEventListener('click', onListClick);
+  }
+
+  function fetchData(letter) {
+    const url = '/rpc?v=5&type=' + suggest_type + '&arg=' + letter;
+    fetch(url).then(function(response) {
+      return response.json();
+    }).then(function(data) {
+      loadData(letter, data);
+    });
+  }
+
+  function onInputClick() {
+    if (input.value === "") {
+      resetResults();
+      return;
+    }
+    fetchData(input.value);
+  }
+
+  function onKeyDown(e) {
+    if (!list) return;
+
+    const elem = document.querySelector(".pkgsearch-typeahead li.active");
+    switch(e.keyCode) {
+      case 13: // enter
+        if (!submit) {
+          return;
+        }
+        if (elem) {
+          input.value = elem.getAttribute('data-value');
+          form.submit();
+        } else {
+          form.submit();
+        }
+        e.preventDefault();
+        break;
+      case 38: // up
+        if (elem && elem.previousElementSibling) {
+          elem.className = "";
+          elem.previousElementSibling.className = "active";
+        }
+        e.preventDefault();
+        break;
+      case 40: // down
+        if (elem && elem.nextElementSibling) {
+          elem.className = "";
+          elem.nextElementSibling.className = "active";
+        } else if (!elem && list.childElementCount !== 0) {
+          list.children[0].className = "active";
+        }
+        e.preventDefault();
+        break;
+    }
+  }
+
+  // debounce https://davidwalsh.name/javascript-debounce-function
+  function debounce(func, wait, immediate) {
+    var timeout;
+    return function() {
+      var context = this, args = arguments;
+      var later = function() {
+        timeout = null;
+        if (!immediate) func.apply(context, args);
+      };
+      var callNow = immediate && !timeout;
+      clearTimeout(timeout);
+      timeout = setTimeout(later, wait);
+      if (callNow) func.apply(context, args);
+    };
+  }
+
+  return {
+    init: function(type, inputfield, formfield, submitdata  = true) {
+      suggest_type = type;
+      input = inputfield;
+      form = formfield;
+      submit = submitdata;
+
+      input.addEventListener("input", onInputClick);
+      input.addEventListener("keydown", onKeyDown);
+      window.addEventListener('resize', debounce(setListLocation, 150));
+      document.addEventListener("click", resetResults);
+    }
+  }
+}());