From 8d7736a249d412caf05530c004b06b538b0f1f98 Mon Sep 17 00:00:00 2001
From: Karl Hasselbring <Karl Hasselbring>
Date: Tue, 28 Nov 2017 10:32:24 +0100
Subject: [PATCH] Refactoring: JS Dateien aufgeteils und formatiert

---
 gulpfile.js                             |   4 +-
 public/js/searchbar.js                  | 380 ------------------------
 resources/assets/js/focus-creator.js    | 378 +++++++++++++++++++++++
 resources/assets/js/quicktips.js        | 126 ++++++++
 resources/assets/js/scriptResultPage.js | 127 --------
 resources/assets/js/searchbar.js        | 380 ------------------------
 6 files changed, 506 insertions(+), 889 deletions(-)
 create mode 100644 resources/assets/js/focus-creator.js
 create mode 100644 resources/assets/js/quicktips.js

diff --git a/gulpfile.js b/gulpfile.js
index 1cf337858..5a1b91ed5 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -17,8 +17,8 @@ elixir(function (mix) {
   // js
   mix.scripts(['lib/jquery.js', 'lib/jquery-ui.min.js', 'lib/bootstrap.js', 'lib/lightslider.js', 'lib/masonry.js', 'lib/imagesloaded.js', 'lib/openpgp.min.js', 'lib/iframeResizer.min.js', 'lib/md5.js'], 'public/js/lib.js')
   mix.scripts(['scriptStartPage.js', 'results.js'], 'public/js/scriptStartPage.js');
-  mix.scripts(['scriptResultPage.js', 'results.js'], 'public/js/scriptResultPage.js');
-  mix.scripts(['searchbar.js'], 'public/js/searchbar.js');
+  mix.scripts(['scriptResultPage.js', 'results.js', 'quicktips.js'], 'public/js/scriptResultPage.js');
+  mix.scripts(['searchbar.js', 'focus-creator.js'], 'public/js/searchbar.js');
   // utility
   mix.scripts(['utility.js'], 'public/js/utility.js');
   mix.less('utility.less', 'public/css/utility.css');
diff --git a/public/js/searchbar.js b/public/js/searchbar.js
index ef8f0bbaf..fbac8eef8 100644
--- a/public/js/searchbar.js
+++ b/public/js/searchbar.js
@@ -1,9 +1,5 @@
 $(function () {
   loadLocalStorage();
-  setSearchbarActionListeners();
-  loadInitialCustomFocuses();
-  loadInitialSelectedFocus();
-  focusChanged();
 });
 
 /**
@@ -15,28 +11,6 @@ function loadLocalStorage () {
   }
 }
 
-/**
- * Sets all action listeners for this page
- */
-function setSearchbarActionListeners () {
-  $('.focusCheckbox').click(checkboxCheckListener);
-  $('#addFocusBtn').click(() => showFocusCreateDialog(''));
-  $('#editFocusBtn').click(editCurrentFocus);
-  $('#toggleOptBtn').click(toggleOptionsDialog);
-  $('.save-focus-btn').click(saveFocus);
-  $('.delete-focus-btn').click(deleteFocus);
-  $('#focus-select').change(focusChanged);
-  // Save Focus on clicking enter while in the focus name input
-  $('#focus-name').keyup(function (event) {
-    if (event.keyCode == 13) {
-      saveFocus();
-    }
-  });
-  $('#create-focus-modal').on('shown.bs.modal', function () {
-    $('#focus-name').focus();
-  });
-}
-
 function setSettings () {
   var acceptedParams = ['autocomplete', 'key', 'lang', 'newtab', 'sprueche'];
   for (var key in localStorage) {
@@ -64,358 +38,4 @@ function setSettings () {
   }
 }
 
-/**
- * Loads all the custom focuses stored in local storage
- */
-function loadInitialCustomFocuses () {
-  for (var key in localStorage) {
-    if (key.startsWith('focus_')) {
-      var focus = loadFocusById(key);
-      addFocus(focus.name);
-    }
-  }
-}
-
-function loadInitialSelectedFocus () {
-  setFocus(getFocusInUrl());
-}
-
-/**
- * Shows the focus create dialog
- * If an id is given it will try to load a focus for the given id
- */
-function showFocusCreateDialog (id) {
-  if (id === undefined) {
-    id = '';
-  }
-  document.getElementById('original-id').value = id;
-  $('#create-focus-modal').modal('show');
-  var storedFocus = loadFocusById(id);
-  var focus = {};
-  // Try to load a focus for the given id
-  $('#focus-name').val('');
-  uncheckAll();
-  if (storedFocus !== null) {
-    try {
-      focus = JSON.parse(localStorage.getItem(id));
-      $('#focus-name').val(focus.name);
-      for (var key in focus) {
-        if (key.startsWith('engine_')) {
-          $('.focusCheckbox[name=' + key + ']').prop('checked', true);
-        }
-      }
-    } catch (ex) {
-      console.error(ex);
-    }
-  }
-  toggleDeleteButton();
-}
-
-/**
- * Shows the focus create dialog for a given id
- */
-function showFocusEditDialog (id) {
-  showFocusCreateDialog(id);
-}
-
-function getCurrentFocus () {
-  return document.getElementById('focus-select').value;
-}
-
-/**
- * Shows an edit dialog for the current selected focus
- */
-function editCurrentFocus () {
-  var currentFocus = getCurrentFocus();
-  showFocusEditDialog(currentFocus);
-}
-
-/**
- * Shows/Hides the delete button if (no) checkboxes are selected
- */
-function toggleDeleteButton () {
-  if (atLeastOneChecked()) {
-    $('.delete-focus-btn').show();
-  } else {
-    $('.delete-focus-btn').hide();
-  }
-}
-
-/**
- * Save the current Focus
- * Listens for save button
- */
-function saveFocus () {
-  /* Vorprüfungen */
-  // Falls keine Suchmaschine ausgewählt wurde
-  if (!atLeastOneChecked()) {
-    switch (document.documentElement.lang) {
-      case 'en':
-        alert('Please select at least 1 search engine.');
-        break;
-      case 'es':
-        alert('Por favor, seleccione al menos un motor de búsqueda.');
-        break;
-      default:
-        alert('Bitte mindestens 1 Suchmaschine auswählen.');
-        break;
-    }
-    return;
-  }
-  // Falls der Name zu kurz ist oder ungültige Zeichen enthält
-  var name = document.getElementById('focus-name').value;
-  if (!isValidName(name)) {
-    switch (document.documentElement.lang) {
-      case 'en':
-        alert('No characters other than a-z, A-Z, 0-9, ä, ö, ü, ß, -, _ allowed, at least 1 character');
-        break;
-      case 'es':
-        alert('Por favor, introduzca un nombre válido');
-        break;
-      default:
-        alert('Bitte gültigen Namen eingeben:\n* Keine Sonderzeichen\n* Mindestens 1 Buchstabe\n');
-        break;
-    }
-    return;
-  }
-  // Liest die original-id des aktuellen fokus-dialogs (gesetzt wenn man einen Fokus bearbeitet)
-  var oldId = document.getElementById('original-id').value;
-  var id = getIdFromName(name);
-  var overwrite = true;
-  // Wenn bereits ein Fokus mit dem Namen existiert, man diesen aber nicht editiert sondern gerade einen Neuen erstellt
-  if (alreadyInUse(name) && oldId !== id) {
-    // Fragt den Nutzer ob er den Fokus überschreiben möchte
-    if (!confirm('Name bereits genutzt\nüberschreiben?')) {
-      // Falls nicht wird das Speichern abgebrochen
-      return;
-    }
-    // Ansonsten wird der andere Fokus gelöscht
-    deleteFocusById(id);
-  }
-  /* Fokus speichern */
-  var focus = {};
-  // Ausgewählte Suchmaschinen lesen und zu Fokus hinzufügen
-  $('input[type=checkbox]:checked').each(function (el) {
-    focus[$(this).attr('name')] = $(this).val();
-  });
-
-  // Name setzen
-  focus['name'] = name;
-  // Alte Version des Fokus löschen (aus localStorage und von der Webseite, falls eine existiert)
-  if (oldId !== '') {
-    localStorage.removeItem(oldId);
-    removeFocusById(oldId);
-  }
-  // Neue Version des Fokus hinzufügen (zu localStorage und der Webseite)
-  localStorage.setItem(id, JSON.stringify(focus));
-  addFocus(name);
-  setFocus(id);
-  // Fokus-Formular verbergen
-  $('#create-focus-modal').modal('hide');
-}
-
-/**
- * Delete current Focus
- * Listens for delete button
- */
-function deleteFocusById (id) {
-  localStorage.removeItem(id);
-  removeFocusById(id);
-  $('#focus-select').change();
-}
-
-/**
- * Delete current Focus
- * Listens for delete button
- */
-function deleteFocus () {
-  var oldId = document.getElementById('original-id').value;
-  deleteFocusById(oldId);
-  $('#create-focus-modal').modal('hide');
-  $('#focus-select').change();
-}
-
-/**
- * Is the name valid (in terms of characters)?
- */
-function isValidName (name) {
-  // no Characters other then a-z, A-Z, 0-9, ä, ö, ü, ß, -, _ allowed
-  // at least 1 character
-  return /^[a-zA-Z0-9äöüß\-_ ]+$/.test(name);
-}
-
-/**
- * Is at least one focus selected?
- */
-function atLeastOneChecked () {
-  return $('.focusCheckbox:checked').length > 0;
-}
-
-/**
- * Is there already a focus with this name?
- */
-function alreadyInUse (name) {
-  return localStorage.hasOwnProperty(getIdFromName(name));
-}
-
-/**
- * Adds an option to the focus selector
- */
-function addFocus (name) {
-  var id = getIdFromName(name);
-  $('#focus-select').append('<option value="' + id + '" style="font-family: FontAwesome, sans-serif;">&#xf2c0; ' + name + '</option>');
-}
-
-/**
- * Remove the focuses html-elements
- */
-function removeFocus (name) {
-  removeFocusById(getIdFromName(name));
-}
-
-/**
- * Remove the focuses html-elements
- */
-function removeFocusById (id) {
-  if (id == '') {
-    return;
-  }
-  $('#focus-select option[value="' + id + '"]').remove();
-}
-
-/**
- * Turns a name into an id
- * Converts special characters and spaces
- */
-function getIdFromName (name) {
-  name = name.toLowerCase();
-  name = name.split(' ').join('_');
-  name = name.split('ä').join('ae');
-  name = name.split('ö').join('oe');
-  name = name.split('ü').join('ue');
-  return 'focus_' + name;
-}
-
-/**
- * Loads the focus object for the given id from local storage
- */
-function loadFocusById (id) {
-  return JSON.parse(localStorage.getItem(id));
-}
-
-/**
- * Unchecks all focuses from the focus creator dialog
- */
-function uncheckAll () {
-  $('.focusCheckbox').prop('checked', false);
-}
-
-/**
- * Sets the selected focus to default
- */
-function setFocusToDefault () {
-  setFocus(DEFAULT_FOCUS);
-}
-
-/**
- * Sets the selected focus
- * @param {String} focusID The id of the focus, without #
- */
-function setFocus (focusID) {
-  $('#focus-select option[value="' + focusID + '"]').prop('selected', true);
-  $('#focus-select').change();
-}
-
-function focusChanged () {
-  var selectedFocus = getCurrentFocus();
-  if (focusIsEditable(selectedFocus)) {
-    enableEditFocusBtn();
-  } else {
-    disableEditFocusBtn();
-  }
-  loadFocusForSearch(selectedFocus);
-}
-
-function focusIsEditable (focus) {
-  if (focus.startsWith('focus_')) {
-    return true;
-  } else {
-    return false;
-  }
-}
-
-function enableEditFocusBtn () {
-  $('#editFocusBtn').removeClass('disabled').click(editCurrentFocus);
-}
-
-function disableEditFocusBtn () {
-  $('#editFocusBtn').addClass('disabled').off('click');
-}
-
-function loadFocusForSearch (focus) {
-  var focus = loadFocusById(focus);
-  clearCustomSearch();
-  for (var key in focus) {
-    if (key.startsWith('engine_') && focus[key] == 'on') {
-      addSumaToCustomSearch(key);
-    }
-  }
-}
-
-function clearCustomSearch () {
-  $('.search-custom-hidden').empty();
-}
-
-function addSumaToCustomSearch (sumaId) {
-  $('.search-custom-hidden').append('<input type="hidden" name="' + sumaId + '" value="on">');
-}
-
-function getFocusInUrl () {
-  var url = window.location;
-  var focReg = /focus=(focus_\w+)/.exec(url);
-  if (focReg && focReg[1]) {
-    return focReg[1];
-  }
-}
-
-function toggleOptionsDialog() {
-  var btnMode = $('#toggleOptBtn').attr('data-mode');
-  if (btnMode == 'o') {
-    openOptionsDialog();
-  } else {
-    closeOptionsDialog();
-  }
-}
-
-function openOptionsDialog() {
-  $('#toggleOptBtn').html('<i class="fa fa-chevron-up" aria-hidden="true"></i>');
-  $('#toggleOptBtn').attr('data-mode', 'c');
-  $('.search-option-frame').removeClass('hide');
-
-}
-
-function closeOptionsDialog() {
-  $('#toggleOptBtn').html('<i class="fa fa-chevron-down" aria-hidden="true"></i>');
-  $('#toggleOptBtn').attr('data-mode', 'o');
-  $('.search-option-frame').addClass('hide');
-}
-
-
-
-function checkboxCheckListener (event) {
-  toggleDeleteButton();
-  var elem = event.target;
-  if (elem.name) {
-    if (elem.checked) {
-      setCheckedForAllWithName(elem.name, true);
-    } else {
-      setCheckedForAllWithName(elem.name, false);
-    }
-  }
-}
-
-function setCheckedForAllWithName(name, checked) {
-  $('.focusCheckbox[name=' + name + ']').prop('checked', checked);
-}
-
 //# sourceMappingURL=searchbar.js.map
diff --git a/resources/assets/js/focus-creator.js b/resources/assets/js/focus-creator.js
new file mode 100644
index 000000000..19e43286f
--- /dev/null
+++ b/resources/assets/js/focus-creator.js
@@ -0,0 +1,378 @@
+$(function () {
+  setFocusCreatorActionListeners();
+  loadInitialCustomFocuses();
+  loadInitialSelectedFocus();
+  focusChanged();
+});
+
+/**
+ * Sets all action listeners for this page
+ */
+function setFocusCreatorActionListeners () {
+  $('.focusCheckbox').click(checkboxCheckListener);
+  $('#addFocusBtn').click(() => showFocusCreateDialog(''));
+  $('#editFocusBtn').click(editCurrentFocus);
+  $('#toggleOptBtn').click(toggleOptionsDialog);
+  $('.save-focus-btn').click(saveFocus);
+  $('.delete-focus-btn').click(deleteFocus);
+  $('#focus-select').change(focusChanged);
+  // Save Focus on clicking enter while in the focus name input
+  $('#focus-name').keyup(function (event) {
+    if (event.keyCode == 13) {
+      saveFocus();
+    }
+  });
+  $('#create-focus-modal').on('shown.bs.modal', function () {
+    $('#focus-name').focus();
+  });
+}
+/**
+ * Loads all the custom focuses stored in local storage
+ */
+function loadInitialCustomFocuses () {
+  for (var key in localStorage) {
+    if (key.startsWith('focus_')) {
+      var focus = loadFocusById(key);
+      addFocus(focus.name);
+    }
+  }
+}
+
+function loadInitialSelectedFocus () {
+  setFocus(getFocusInUrl());
+}
+
+/**
+ * Shows the focus create dialog
+ * If an id is given it will try to load a focus for the given id
+ */
+function showFocusCreateDialog (id) {
+  if (id === undefined) {
+    id = '';
+  }
+  document.getElementById('original-id').value = id;
+  $('#create-focus-modal').modal('show');
+  var storedFocus = loadFocusById(id);
+  var focus = {};
+  // Try to load a focus for the given id
+  $('#focus-name').val('');
+  uncheckAll();
+  if (storedFocus !== null) {
+    try {
+      focus = JSON.parse(localStorage.getItem(id));
+      $('#focus-name').val(focus.name);
+      for (var key in focus) {
+        if (key.startsWith('engine_')) {
+          $('.focusCheckbox[name=' + key + ']').prop('checked', true);
+        }
+      }
+    } catch (ex) {
+      console.error(ex);
+    }
+  }
+  toggleDeleteButton();
+}
+
+/**
+ * Shows the focus create dialog for a given id
+ */
+function showFocusEditDialog (id) {
+  showFocusCreateDialog(id);
+}
+
+function getCurrentFocus () {
+  return document.getElementById('focus-select').value;
+}
+
+/**
+ * Shows an edit dialog for the current selected focus
+ */
+function editCurrentFocus () {
+  var currentFocus = getCurrentFocus();
+  showFocusEditDialog(currentFocus);
+}
+
+/**
+ * Shows/Hides the delete button if (no) checkboxes are selected
+ */
+function toggleDeleteButton () {
+  if (atLeastOneChecked()) {
+    $('.delete-focus-btn').show();
+  } else {
+    $('.delete-focus-btn').hide();
+  }
+}
+
+/**
+ * Save the current Focus
+ * Listens for save button
+ */
+function saveFocus () {
+  /* Vorprüfungen */
+  // Falls keine Suchmaschine ausgewählt wurde
+  if (!atLeastOneChecked()) {
+    switch (document.documentElement.lang) {
+      case 'en':
+        alert('Please select at least 1 search engine.');
+        break;
+      case 'es':
+        alert('Por favor, seleccione al menos un motor de búsqueda.');
+        break;
+      default:
+        alert('Bitte mindestens 1 Suchmaschine auswählen.');
+        break;
+    }
+    return;
+  }
+  // Falls der Name zu kurz ist oder ungültige Zeichen enthält
+  var name = document.getElementById('focus-name').value;
+  if (!isValidName(name)) {
+    switch (document.documentElement.lang) {
+      case 'en':
+        alert('No characters other than a-z, A-Z, 0-9, ä, ö, ü, ß, -, _ allowed, at least 1 character');
+        break;
+      case 'es':
+        alert('Por favor, introduzca un nombre válido');
+        break;
+      default:
+        alert('Bitte gültigen Namen eingeben:\n* Keine Sonderzeichen\n* Mindestens 1 Buchstabe\n');
+        break;
+    }
+    return;
+  }
+  // Liest die original-id des aktuellen fokus-dialogs (gesetzt wenn man einen Fokus bearbeitet)
+  var oldId = document.getElementById('original-id').value;
+  var id = getIdFromName(name);
+  var overwrite = true;
+  // Wenn bereits ein Fokus mit dem Namen existiert, man diesen aber nicht editiert sondern gerade einen Neuen erstellt
+  if (alreadyInUse(name) && oldId !== id) {
+    // Fragt den Nutzer ob er den Fokus überschreiben möchte
+    if (!confirm('Name bereits genutzt\nüberschreiben?')) {
+      // Falls nicht wird das Speichern abgebrochen
+      return;
+    }
+    // Ansonsten wird der andere Fokus gelöscht
+    deleteFocusById(id);
+  }
+  /* Fokus speichern */
+  var focus = {};
+  // Ausgewählte Suchmaschinen lesen und zu Fokus hinzufügen
+  $('input[type=checkbox]:checked').each(function (el) {
+    focus[$(this).attr('name')] = $(this).val();
+  });
+
+  // Name setzen
+  focus['name'] = name;
+  // Alte Version des Fokus löschen (aus localStorage und von der Webseite, falls eine existiert)
+  if (oldId !== '') {
+    localStorage.removeItem(oldId);
+    removeFocusById(oldId);
+  }
+  // Neue Version des Fokus hinzufügen (zu localStorage und der Webseite)
+  localStorage.setItem(id, JSON.stringify(focus));
+  addFocus(name);
+  setFocus(id);
+  // Fokus-Formular verbergen
+  $('#create-focus-modal').modal('hide');
+}
+
+/**
+ * Delete current Focus
+ * Listens for delete button
+ */
+function deleteFocusById (id) {
+  localStorage.removeItem(id);
+  removeFocusById(id);
+  $('#focus-select').change();
+}
+
+/**
+ * Delete current Focus
+ * Listens for delete button
+ */
+function deleteFocus () {
+  var oldId = document.getElementById('original-id').value;
+  deleteFocusById(oldId);
+  $('#create-focus-modal').modal('hide');
+  $('#focus-select').change();
+}
+
+/**
+ * Is the name valid (in terms of characters)?
+ */
+function isValidName (name) {
+  // no Characters other then a-z, A-Z, 0-9, ä, ö, ü, ß, -, _ allowed
+  // at least 1 character
+  return /^[a-zA-Z0-9äöüß\-_ ]+$/.test(name);
+}
+
+/**
+ * Is at least one focus selected?
+ */
+function atLeastOneChecked () {
+  return $('.focusCheckbox:checked').length > 0;
+}
+
+/**
+ * Is there already a focus with this name?
+ */
+function alreadyInUse (name) {
+  return localStorage.hasOwnProperty(getIdFromName(name));
+}
+
+/**
+ * Adds an option to the focus selector
+ */
+function addFocus (name) {
+  var id = getIdFromName(name);
+  $('#focus-select').append('<option value="' + id + '" style="font-family: FontAwesome, sans-serif;">&#xf2c0; ' + name + '</option>');
+}
+
+/**
+ * Remove the focuses html-elements
+ */
+function removeFocus (name) {
+  removeFocusById(getIdFromName(name));
+}
+
+/**
+ * Remove the focuses html-elements
+ */
+function removeFocusById (id) {
+  if (id == '') {
+    return;
+  }
+  $('#focus-select option[value="' + id + '"]').remove();
+}
+
+/**
+ * Turns a name into an id
+ * Converts special characters and spaces
+ */
+function getIdFromName (name) {
+  name = name.toLowerCase();
+  name = name.split(' ').join('_');
+  name = name.split('ä').join('ae');
+  name = name.split('ö').join('oe');
+  name = name.split('ü').join('ue');
+  return 'focus_' + name;
+}
+
+/**
+ * Loads the focus object for the given id from local storage
+ */
+function loadFocusById (id) {
+  return JSON.parse(localStorage.getItem(id));
+}
+
+/**
+ * Unchecks all focuses from the focus creator dialog
+ */
+function uncheckAll () {
+  $('.focusCheckbox').prop('checked', false);
+}
+
+/**
+ * Sets the selected focus to default
+ */
+function setFocusToDefault () {
+  setFocus(DEFAULT_FOCUS);
+}
+
+/**
+ * Sets the selected focus
+ * @param {String} focusID The id of the focus, without #
+ */
+function setFocus (focusID) {
+  $('#focus-select option[value="' + focusID + '"]').prop('selected', true);
+  $('#focus-select').change();
+}
+
+function focusChanged () {
+  var selectedFocus = getCurrentFocus();
+  if (focusIsEditable(selectedFocus)) {
+    enableEditFocusBtn();
+  } else {
+    disableEditFocusBtn();
+  }
+  loadFocusForSearch(selectedFocus);
+}
+
+function focusIsEditable (focus) {
+  if (focus.startsWith('focus_')) {
+    return true;
+  } else {
+    return false;
+  }
+}
+
+function enableEditFocusBtn () {
+  $('#editFocusBtn').removeClass('disabled').click(editCurrentFocus);
+}
+
+function disableEditFocusBtn () {
+  $('#editFocusBtn').addClass('disabled').off('click');
+}
+
+function loadFocusForSearch (focus) {
+  var focus = loadFocusById(focus);
+  clearCustomSearch();
+  for (var key in focus) {
+    if (key.startsWith('engine_') && focus[key] == 'on') {
+      addSumaToCustomSearch(key);
+    }
+  }
+}
+
+function clearCustomSearch () {
+  $('.search-custom-hidden').empty();
+}
+
+function addSumaToCustomSearch (sumaId) {
+  $('.search-custom-hidden').append('<input type="hidden" name="' + sumaId + '" value="on">');
+}
+
+function getFocusInUrl () {
+  var url = window.location;
+  var focReg = /focus=(focus_\w+)/.exec(url);
+  if (focReg && focReg[1]) {
+    return focReg[1];
+  }
+}
+
+function toggleOptionsDialog () {
+  var btnMode = $('#toggleOptBtn').attr('data-mode');
+  if (btnMode == 'o') {
+    openOptionsDialog();
+  } else {
+    closeOptionsDialog();
+  }
+}
+
+function openOptionsDialog () {
+  $('#toggleOptBtn').html('<i class="fa fa-chevron-up" aria-hidden="true"></i>');
+  $('#toggleOptBtn').attr('data-mode', 'c');
+  $('.search-option-frame').removeClass('hide');
+}
+
+function closeOptionsDialog () {
+  $('#toggleOptBtn').html('<i class="fa fa-chevron-down" aria-hidden="true"></i>');
+  $('#toggleOptBtn').attr('data-mode', 'o');
+  $('.search-option-frame').addClass('hide');
+}
+
+function checkboxCheckListener (event) {
+  toggleDeleteButton();
+  var elem = event.target;
+  if (elem.name) {
+    if (elem.checked) {
+      setCheckedForAllWithName(elem.name, true);
+    } else {
+      setCheckedForAllWithName(elem.name, false);
+    }
+  }
+}
+
+function setCheckedForAllWithName (name, checked) {
+  $('.focusCheckbox[name=' + name + ']').prop('checked', checked);
+}
diff --git a/resources/assets/js/quicktips.js b/resources/assets/js/quicktips.js
new file mode 100644
index 000000000..d7e0887ae
--- /dev/null
+++ b/resources/assets/js/quicktips.js
@@ -0,0 +1,126 @@
+function loadQuicktips (search, locale, sprueche) {
+  var blacklist = [];
+  if (!sprueche) {
+    blacklist.push('sprueche');
+  }
+  getQuicktips(search, locale, blacklist, createQuicktips);
+}
+
+const QUICKTIP_SERVER = 'https://quicktips.metager3.de';
+// const QUICKTIP_SERVER = 'http://localhost:63825'
+
+/**
+ * Requests quicktips from the quicktip server and passes them to the loadedHandler
+ * 
+ * @param {String} search search term
+ * @param {String} locale 2 letter locale identifier
+ * @param {Array<String>} blacklist excluded loaders
+ * @param {Function} loadedHandler handler for loaded quicktips
+ */
+function getQuicktips (search, locale, blacklist, loadedHandler) {
+  var getString = QUICKTIP_SERVER + '/quicktips.xml?search=' + search + '&locale=' + locale;
+  blacklist.forEach(function (value) {
+    getString += '&loader_' + value + '=false';
+  });
+  $.get(getString, function (data, status) {
+    if (status === 'success') {
+      var quicktips = $(data).children('feed').children('entry').map(function () {
+        return quicktip = {
+          type: $(this).children('mg\\:type').text(),
+          title: $(this).children('title').text(),
+          summary: $(this).children('content').text(),
+          url: $(this).children('link').text(),
+          gefVon: $(this).children('mg\\:gefVon').text(),
+          score: $(this).children('relevance\\:score').text(),
+          details: $(this).children('mg\\:details').children('entry').map(function () {
+            return {
+              title: $(this).children('title').text(),
+              text: $(this).children('text').text(),
+              url: $(this).children('url').text()
+            };
+          }).toArray()
+        };
+      }).toArray();
+      loadedHandler(quicktips);
+    } else {
+      console.error('Loading quicktips failed with status ' + status);
+    }
+  }, 'xml');
+}
+
+/**
+ * <div id="quicktips">
+ *   <div class="quicktip" type="TYPE">
+ *     <details>
+ *       <summary>
+ *         <h1><a href="URL">TITLE</a></h1>
+ *         <p>SUMMARY</p>
+ *       </summary>
+ *       <div class="quicktip-detail">
+ *         <h2><a href="DETAILURL">DETAILTITLE</a></h1>
+ *         <p>DETAILSUMMARY</p>
+ *       </div>
+ *       <div class="quicktip-detail">
+ *         ...
+ *       </div>
+ *       ...
+ *     </details>
+ *     <span>GEFVON
+ *   </div>
+ * </div>
+ * 
+ * @param {Object} quicktips 
+ */
+function createQuicktips (quicktips, sprueche) {
+  var quicktipsDiv = $('#quicktips');
+  quicktips.sort(function (a, b) {
+    return b.score - a.score;
+  }).forEach(function (quicktip) {
+    var mainElem;
+    if (quicktip.details.length > 0) {
+      mainElem = $('<details>');
+      var summaryElem = $('<summary class="quicktip-summary">');
+      var headlineElem = $('<h1>');
+      if (quicktip.url.length > 0) {
+        headlineElem.append('<a href=' + quicktip.url + '>' + quicktip.title + '</a>');
+      } else {
+        headlineElem.text(quicktip.title);
+      }
+      headlineElem.append('<i class="quicktip-extender fa fa-chevron-circle-down" aria-hidden="true"></i>');
+      summaryElem
+        .append(headlineElem)
+        .append('<p>' + quicktip.summary + '</p>');
+      mainElem.append(summaryElem);
+      quicktip.details.forEach(function (detail) {
+        var detailElem = $('<div class="quicktip-detail">');
+        var detailHeadlineElem = $('<h2>');
+        if (detail.url.length > 0) {
+          detailHeadlineElem.append('<a href=' + detail.url + '>' + detail.title + '</a>');
+        } else {
+          detailHeadlineElem.text(detail.title);
+        }
+        detailElem
+          .append(detailHeadlineElem)
+          .append('<p>' + detail.text + '</p>');
+        mainElem.append(detailElem);
+      });
+    } else {
+      mainElem = $('<div class="quicktip-summary">');
+      if (quicktip.title.length > 0) {
+        var headlineElem = $('<h1>');
+        if (quicktip.url.length > 0) {
+          headlineElem.append('<a href=' + quicktip.url + '>' + quicktip.title + '</a>');
+        } else {
+          headlineElem.text(quicktip.title);
+        }
+        mainElem.append(headlineElem);
+      }
+      mainElem.append('<p>' + quicktip.summary + '</p>');
+    }
+    var quicktipDiv = $('<div class="quicktip" type="' + quicktip.type + '">');
+    quicktipDiv
+      .append(mainElem)
+      .append('<span class="gefVon">' + quicktip.gefVon + '</span>');
+    quicktipsDiv.append(quicktipDiv);
+  });
+}
diff --git a/resources/assets/js/scriptResultPage.js b/resources/assets/js/scriptResultPage.js
index e584431ee..540590274 100644
--- a/resources/assets/js/scriptResultPage.js
+++ b/resources/assets/js/scriptResultPage.js
@@ -391,130 +391,3 @@ function resultSaver (index) {
   $('div.tab-pane.active .result[data-count=' + index + ']').transfer({to: to, duration: 1000});
   new Results().updateResultPageInterface();
 }
-
-function loadQuicktips (search, locale, sprueche) {
-  var blacklist = [];
-  if (!sprueche) {
-    blacklist.push('sprueche');
-  }
-  getQuicktips(search, locale, blacklist, createQuicktips);
-}
-
-const QUICKTIP_SERVER = 'https://quicktips.metager3.de';
-// const QUICKTIP_SERVER = 'http://localhost:63825'
-
-/**
- * Requests quicktips from the quicktip server and passes them to the loadedHandler
- * 
- * @param {String} search search term
- * @param {String} locale 2 letter locale identifier
- * @param {Array<String>} blacklist excluded loaders
- * @param {Function} loadedHandler handler for loaded quicktips
- */
-function getQuicktips (search, locale, blacklist, loadedHandler) {
-  var getString = QUICKTIP_SERVER + '/quicktips.xml?search=' + search + '&locale=' + locale;
-  blacklist.forEach(function (value) {
-    getString += '&loader_' + value + '=false';
-  });
-  $.get(getString, function (data, status) {
-    if (status === 'success') {
-      var quicktips = $(data).children('feed').children('entry').map(function () {
-        return quicktip = {
-          type: $(this).children('mg\\:type').text(),
-          title: $(this).children('title').text(),
-          summary: $(this).children('content').text(),
-          url: $(this).children('link').text(),
-          gefVon: $(this).children('mg\\:gefVon').text(),
-          score: $(this).children('relevance\\:score').text(),
-          details: $(this).children('mg\\:details').children('entry').map(function () {
-            return {
-              title: $(this).children('title').text(),
-              text: $(this).children('text').text(),
-              url: $(this).children('url').text()
-            };
-          }).toArray()
-        };
-      }).toArray();
-      loadedHandler(quicktips);
-    } else {
-      console.error('Loading quicktips failed with status ' + status);
-    }
-  }, 'xml');
-}
-
-/**
- * <div id="quicktips">
- *   <div class="quicktip" type="TYPE">
- *     <details>
- *       <summary>
- *         <h1><a href="URL">TITLE</a></h1>
- *         <p>SUMMARY</p>
- *       </summary>
- *       <div class="quicktip-detail">
- *         <h2><a href="DETAILURL">DETAILTITLE</a></h1>
- *         <p>DETAILSUMMARY</p>
- *       </div>
- *       <div class="quicktip-detail">
- *         ...
- *       </div>
- *       ...
- *     </details>
- *     <span>GEFVON
- *   </div>
- * </div>
- * 
- * @param {Object} quicktips 
- */
-function createQuicktips (quicktips, sprueche) {
-  var quicktipsDiv = $('#quicktips');
-  quicktips.sort(function (a, b) {
-    return b.score - a.score;
-  }).forEach(function (quicktip) {
-    var mainElem;
-    if (quicktip.details.length > 0) {
-      mainElem = $('<details>');
-      var summaryElem = $('<summary class="quicktip-summary">');
-      var headlineElem = $('<h1>');
-      if (quicktip.url.length > 0) {
-        headlineElem.append('<a href=' + quicktip.url + '>' + quicktip.title + '</a>');
-      } else {
-        headlineElem.text(quicktip.title);
-      }
-      headlineElem.append('<i class="quicktip-extender fa fa-chevron-circle-down" aria-hidden="true"></i>');
-      summaryElem
-        .append(headlineElem)
-        .append('<p>' + quicktip.summary + '</p>');
-      mainElem.append(summaryElem);
-      quicktip.details.forEach(function (detail) {
-        var detailElem = $('<div class="quicktip-detail">');
-        var detailHeadlineElem = $('<h2>');
-        if (detail.url.length > 0) {
-          detailHeadlineElem.append('<a href=' + detail.url + '>' + detail.title + '</a>');
-        } else {
-          detailHeadlineElem.text(detail.title);
-        }
-        detailElem
-          .append(detailHeadlineElem)
-          .append('<p>' + detail.text + '</p>');
-        mainElem.append(detailElem);
-      });
-    } else {
-      mainElem = $('<div class="quicktip-summary">');
-      if (quicktip.title.length > 0) {
-        var headlineElem = $('<h1>');
-        if (quicktip.url.length > 0) {
-          headlineElem.append('<a href=' + quicktip.url + '>' + quicktip.title + '</a>');
-        } else {
-          headlineElem.text(quicktip.title);
-        }
-        mainElem.append(headlineElem);
-      }
-      mainElem.append('<p>' + quicktip.summary + '</p>');
-    }
-    var quicktipDiv = $('<div class="quicktip" type="' + quicktip.type + '">');
-    quicktipDiv
-      .append(mainElem)
-      .append('<span class="gefVon">' + quicktip.gefVon + '</span>');
-    quicktipsDiv.append(quicktipDiv);
-  });
-}
diff --git a/resources/assets/js/searchbar.js b/resources/assets/js/searchbar.js
index e4bdaf7ce..e1ed7e291 100644
--- a/resources/assets/js/searchbar.js
+++ b/resources/assets/js/searchbar.js
@@ -1,9 +1,5 @@
 $(function () {
   loadLocalStorage();
-  setSearchbarActionListeners();
-  loadInitialCustomFocuses();
-  loadInitialSelectedFocus();
-  focusChanged();
 });
 
 /**
@@ -15,28 +11,6 @@ function loadLocalStorage () {
   }
 }
 
-/**
- * Sets all action listeners for this page
- */
-function setSearchbarActionListeners () {
-  $('.focusCheckbox').click(checkboxCheckListener);
-  $('#addFocusBtn').click(() => showFocusCreateDialog(''));
-  $('#editFocusBtn').click(editCurrentFocus);
-  $('#toggleOptBtn').click(toggleOptionsDialog);
-  $('.save-focus-btn').click(saveFocus);
-  $('.delete-focus-btn').click(deleteFocus);
-  $('#focus-select').change(focusChanged);
-  // Save Focus on clicking enter while in the focus name input
-  $('#focus-name').keyup(function (event) {
-    if (event.keyCode == 13) {
-      saveFocus();
-    }
-  });
-  $('#create-focus-modal').on('shown.bs.modal', function () {
-    $('#focus-name').focus();
-  });
-}
-
 function setSettings () {
   var acceptedParams = ['autocomplete', 'key', 'lang', 'newtab', 'sprueche'];
   for (var key in localStorage) {
@@ -63,357 +37,3 @@ function setSettings () {
     $('#searchForm').attr('method', requestMethod);
   }
 }
-
-/**
- * Loads all the custom focuses stored in local storage
- */
-function loadInitialCustomFocuses () {
-  for (var key in localStorage) {
-    if (key.startsWith('focus_')) {
-      var focus = loadFocusById(key);
-      addFocus(focus.name);
-    }
-  }
-}
-
-function loadInitialSelectedFocus () {
-  setFocus(getFocusInUrl());
-}
-
-/**
- * Shows the focus create dialog
- * If an id is given it will try to load a focus for the given id
- */
-function showFocusCreateDialog (id) {
-  if (id === undefined) {
-    id = '';
-  }
-  document.getElementById('original-id').value = id;
-  $('#create-focus-modal').modal('show');
-  var storedFocus = loadFocusById(id);
-  var focus = {};
-  // Try to load a focus for the given id
-  $('#focus-name').val('');
-  uncheckAll();
-  if (storedFocus !== null) {
-    try {
-      focus = JSON.parse(localStorage.getItem(id));
-      $('#focus-name').val(focus.name);
-      for (var key in focus) {
-        if (key.startsWith('engine_')) {
-          $('.focusCheckbox[name=' + key + ']').prop('checked', true);
-        }
-      }
-    } catch (ex) {
-      console.error(ex);
-    }
-  }
-  toggleDeleteButton();
-}
-
-/**
- * Shows the focus create dialog for a given id
- */
-function showFocusEditDialog (id) {
-  showFocusCreateDialog(id);
-}
-
-function getCurrentFocus () {
-  return document.getElementById('focus-select').value;
-}
-
-/**
- * Shows an edit dialog for the current selected focus
- */
-function editCurrentFocus () {
-  var currentFocus = getCurrentFocus();
-  showFocusEditDialog(currentFocus);
-}
-
-/**
- * Shows/Hides the delete button if (no) checkboxes are selected
- */
-function toggleDeleteButton () {
-  if (atLeastOneChecked()) {
-    $('.delete-focus-btn').show();
-  } else {
-    $('.delete-focus-btn').hide();
-  }
-}
-
-/**
- * Save the current Focus
- * Listens for save button
- */
-function saveFocus () {
-  /* Vorprüfungen */
-  // Falls keine Suchmaschine ausgewählt wurde
-  if (!atLeastOneChecked()) {
-    switch (document.documentElement.lang) {
-      case 'en':
-        alert('Please select at least 1 search engine.');
-        break;
-      case 'es':
-        alert('Por favor, seleccione al menos un motor de búsqueda.');
-        break;
-      default:
-        alert('Bitte mindestens 1 Suchmaschine auswählen.');
-        break;
-    }
-    return;
-  }
-  // Falls der Name zu kurz ist oder ungültige Zeichen enthält
-  var name = document.getElementById('focus-name').value;
-  if (!isValidName(name)) {
-    switch (document.documentElement.lang) {
-      case 'en':
-        alert('No characters other than a-z, A-Z, 0-9, ä, ö, ü, ß, -, _ allowed, at least 1 character');
-        break;
-      case 'es':
-        alert('Por favor, introduzca un nombre válido');
-        break;
-      default:
-        alert('Bitte gültigen Namen eingeben:\n* Keine Sonderzeichen\n* Mindestens 1 Buchstabe\n');
-        break;
-    }
-    return;
-  }
-  // Liest die original-id des aktuellen fokus-dialogs (gesetzt wenn man einen Fokus bearbeitet)
-  var oldId = document.getElementById('original-id').value;
-  var id = getIdFromName(name);
-  var overwrite = true;
-  // Wenn bereits ein Fokus mit dem Namen existiert, man diesen aber nicht editiert sondern gerade einen Neuen erstellt
-  if (alreadyInUse(name) && oldId !== id) {
-    // Fragt den Nutzer ob er den Fokus überschreiben möchte
-    if (!confirm('Name bereits genutzt\nüberschreiben?')) {
-      // Falls nicht wird das Speichern abgebrochen
-      return;
-    }
-    // Ansonsten wird der andere Fokus gelöscht
-    deleteFocusById(id);
-  }
-  /* Fokus speichern */
-  var focus = {};
-  // Ausgewählte Suchmaschinen lesen und zu Fokus hinzufügen
-  $('input[type=checkbox]:checked').each(function (el) {
-    focus[$(this).attr('name')] = $(this).val();
-  });
-
-  // Name setzen
-  focus['name'] = name;
-  // Alte Version des Fokus löschen (aus localStorage und von der Webseite, falls eine existiert)
-  if (oldId !== '') {
-    localStorage.removeItem(oldId);
-    removeFocusById(oldId);
-  }
-  // Neue Version des Fokus hinzufügen (zu localStorage und der Webseite)
-  localStorage.setItem(id, JSON.stringify(focus));
-  addFocus(name);
-  setFocus(id);
-  // Fokus-Formular verbergen
-  $('#create-focus-modal').modal('hide');
-}
-
-/**
- * Delete current Focus
- * Listens for delete button
- */
-function deleteFocusById (id) {
-  localStorage.removeItem(id);
-  removeFocusById(id);
-  $('#focus-select').change();
-}
-
-/**
- * Delete current Focus
- * Listens for delete button
- */
-function deleteFocus () {
-  var oldId = document.getElementById('original-id').value;
-  deleteFocusById(oldId);
-  $('#create-focus-modal').modal('hide');
-  $('#focus-select').change();
-}
-
-/**
- * Is the name valid (in terms of characters)?
- */
-function isValidName (name) {
-  // no Characters other then a-z, A-Z, 0-9, ä, ö, ü, ß, -, _ allowed
-  // at least 1 character
-  return /^[a-zA-Z0-9äöüß\-_ ]+$/.test(name);
-}
-
-/**
- * Is at least one focus selected?
- */
-function atLeastOneChecked () {
-  return $('.focusCheckbox:checked').length > 0;
-}
-
-/**
- * Is there already a focus with this name?
- */
-function alreadyInUse (name) {
-  return localStorage.hasOwnProperty(getIdFromName(name));
-}
-
-/**
- * Adds an option to the focus selector
- */
-function addFocus (name) {
-  var id = getIdFromName(name);
-  $('#focus-select').append('<option value="' + id + '" style="font-family: FontAwesome, sans-serif;">&#xf2c0; ' + name + '</option>');
-}
-
-/**
- * Remove the focuses html-elements
- */
-function removeFocus (name) {
-  removeFocusById(getIdFromName(name));
-}
-
-/**
- * Remove the focuses html-elements
- */
-function removeFocusById (id) {
-  if (id == '') {
-    return;
-  }
-  $('#focus-select option[value="' + id + '"]').remove();
-}
-
-/**
- * Turns a name into an id
- * Converts special characters and spaces
- */
-function getIdFromName (name) {
-  name = name.toLowerCase();
-  name = name.split(' ').join('_');
-  name = name.split('ä').join('ae');
-  name = name.split('ö').join('oe');
-  name = name.split('ü').join('ue');
-  return 'focus_' + name;
-}
-
-/**
- * Loads the focus object for the given id from local storage
- */
-function loadFocusById (id) {
-  return JSON.parse(localStorage.getItem(id));
-}
-
-/**
- * Unchecks all focuses from the focus creator dialog
- */
-function uncheckAll () {
-  $('.focusCheckbox').prop('checked', false);
-}
-
-/**
- * Sets the selected focus to default
- */
-function setFocusToDefault () {
-  setFocus(DEFAULT_FOCUS);
-}
-
-/**
- * Sets the selected focus
- * @param {String} focusID The id of the focus, without #
- */
-function setFocus (focusID) {
-  $('#focus-select option[value="' + focusID + '"]').prop('selected', true);
-  $('#focus-select').change();
-}
-
-function focusChanged () {
-  var selectedFocus = getCurrentFocus();
-  if (focusIsEditable(selectedFocus)) {
-    enableEditFocusBtn();
-  } else {
-    disableEditFocusBtn();
-  }
-  loadFocusForSearch(selectedFocus);
-}
-
-function focusIsEditable (focus) {
-  if (focus.startsWith('focus_')) {
-    return true;
-  } else {
-    return false;
-  }
-}
-
-function enableEditFocusBtn () {
-  $('#editFocusBtn').removeClass('disabled').click(editCurrentFocus);
-}
-
-function disableEditFocusBtn () {
-  $('#editFocusBtn').addClass('disabled').off('click');
-}
-
-function loadFocusForSearch (focus) {
-  var focus = loadFocusById(focus);
-  clearCustomSearch();
-  for (var key in focus) {
-    if (key.startsWith('engine_') && focus[key] == 'on') {
-      addSumaToCustomSearch(key);
-    }
-  }
-}
-
-function clearCustomSearch () {
-  $('.search-custom-hidden').empty();
-}
-
-function addSumaToCustomSearch (sumaId) {
-  $('.search-custom-hidden').append('<input type="hidden" name="' + sumaId + '" value="on">');
-}
-
-function getFocusInUrl () {
-  var url = window.location;
-  var focReg = /focus=(focus_\w+)/.exec(url);
-  if (focReg && focReg[1]) {
-    return focReg[1];
-  }
-}
-
-function toggleOptionsDialog() {
-  var btnMode = $('#toggleOptBtn').attr('data-mode');
-  if (btnMode == 'o') {
-    openOptionsDialog();
-  } else {
-    closeOptionsDialog();
-  }
-}
-
-function openOptionsDialog() {
-  $('#toggleOptBtn').html('<i class="fa fa-chevron-up" aria-hidden="true"></i>');
-  $('#toggleOptBtn').attr('data-mode', 'c');
-  $('.search-option-frame').removeClass('hide');
-
-}
-
-function closeOptionsDialog() {
-  $('#toggleOptBtn').html('<i class="fa fa-chevron-down" aria-hidden="true"></i>');
-  $('#toggleOptBtn').attr('data-mode', 'o');
-  $('.search-option-frame').addClass('hide');
-}
-
-
-
-function checkboxCheckListener (event) {
-  toggleDeleteButton();
-  var elem = event.target;
-  if (elem.name) {
-    if (elem.checked) {
-      setCheckedForAllWithName(elem.name, true);
-    } else {
-      setCheckedForAllWithName(elem.name, false);
-    }
-  }
-}
-
-function setCheckedForAllWithName(name, checked) {
-  $('.focusCheckbox[name=' + name + ']').prop('checked', checked);
-}
-- 
GitLab