Added Translation js for settings

c6379b13 · Karl Hasselbring · 80aff3f2 · c6379b13 · c6379b13 · c6379b13
Commit c6379b13 authored 7 years ago by Karl Hasselbring
--- a/public/js/searchbar.js
+++ b/public/js/searchbar.js
+$(function () {
+  loadLocalStorage();
+  setSearchbarActionListeners();
+});
+
+/**
+ * Loads the user theme and stored settings from local storage
+ */
+function loadLocalStorage () {
+  if (localStorage) {
+    setSettings();
+  }
+}
+
+function setSearchbarActionListeners () {
+  $('#toggleOptBtn').click(toggleOptionsDialog);
+}
+
+function setSettings () {
+  var acceptedParams = ['autocomplete', 'key', 'lang', 'newtab', 'sprueche'];
+  for (var key in localStorage) {
+    var value = localStorage.getItem(key);
+    var accepted = false;
+    for (var i in acceptedParams) {
+      if (key === 'param_' + acceptedParams[i]) {
+        accepted = true;
+      }
+    }
+    if (accepted) {
+      key = key.substring(6);
+      // Check for existing hidden fields for this key
+      var existing = $('.search-hidden input[name="' + key + '"]');
+      if (existing.length === 0) {
+        // if none exist, create a new one
+        $('.search-hidden').append('<input type="hidden" name="' + key + '" value="' + value + '">');
+      }
+    }
+  }
+  // Change the request method to the given parameter
+  var requestMethod = localStorage.getItem('request');
+  if (requestMethod !== null && (requestMethod === 'GET' || requestMethod === 'POST')) {
+    $('#searchForm').attr('method', requestMethod);
+  }
+}
+
+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-sliders" aria-hidden="true"></i>');
+  $('#toggleOptBtn').attr('data-mode', 'o');
+  $('.search-option-frame').addClass('hide');
+}
+
+$(function () {
+  setFocusCreatorActionListeners();
+  loadInitialCustomFocuses();
+  loadInitialSelectedFocus();
+  focusChanged();
+});
+
+/**
+ * Sets all action listeners for this page
+ */
+function setFocusCreatorActionListeners () {
+  $('.focusCheckbox').click(checkboxCheckListener);
+  $('#addFocusBtn').click(() => showFocusCreateDialog(''));
+  $('#editFocusBtn').click(editCurrentFocus);
+  $('.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 $("#foki > div.active").attr("id");
+}
+
+/**
+ * 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);
+  var customFocus = $('<div id="' + id +'"><a href="#" target="_self">' + name + '</a><a class="edit-focus" data-id="' + id + '" href="#"><i class="fa fa-wrench"></i></div>');
+  $(customFocus).find(".edit-focus").click(function(){
+    showFocusEditDialog($(this).attr("data-id"));
+  });
+  $("#foki .search-option-frame").before(customFocus);
+}
+
+/**
+ * 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);
+
+  var url ="/meta/meta.ger3?eingabe=x&focus=";
+
+  console.log(focus, url);
+
+  clearCustomSearch();
+  for (var key in focus) {
+    if (key.startsWith('engine_') && focus[key] == 'on') {
+      addSumaToCustomSearch(key);
+    }
+  }
+}
+
+function getFocusInUrl () {
+  var url = window.location;
+  var focReg = /focus=(focus_\w+)/.exec(url);
+  if (focReg && focReg[1]) {
+    return focReg[1];
+  }
+}
+
+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
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -262,63 +262,62 @@
 			</a>
 		</div>
 	</div>
-		<fieldset>
-			<form id="searchForm" @if(Request::has('request') && Request::input('request') === "POST") method="POST" @elseif(Request::has('request') && Request::input('request') === "GET") method="GET" @else method="GET" @endif action="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/meta/meta.ger3") }}" accept-charset="UTF-8">
-				<div class="input-group">
-					<div class="input-group-addon">
-						<button type="button" data-toggle="popover" data-html="true" data-container="body" title="{{ trans('index.design') }}" data-content='&lt;ul id="color-chooser" class="list-inline list-unstyled"&gt;
-							&lt;li &gt;&lt;a id="standard" data-rgba="255,194,107,1" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
-							&lt;li &gt;&lt;a id="standardHard" data-rgba="255,128,0,1" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
-							&lt;li &gt;&lt;a id="blue" data-rgba="164,192,230,1" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
-							&lt;li &gt;&lt;a id="blueHard" data-rgba="2,93,140,1" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
-							&lt;li &gt;&lt;a id="green" data-rgba="177,226,163,1" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
-							&lt;li &gt;&lt;a id="greenHard" data-rgba="127,175,27,1" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
-							&lt;li &gt;&lt;a id="red" data-rgba="255,92,92,1" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
-							&lt;li &gt;&lt;a id="redHard" data-rgba="255,0,0,1" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
-							&lt;li &gt;&lt;a id="pink" data-rgba="255,196,246,1" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
-							&lt;li &gt;&lt;a id="pinkHard" data-rgba="254,67,101,1" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
-							&lt;li &gt;&lt;a id="black" data-rgba="238,238,238,1" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
-							&lt;li &gt;&lt;a id="blackHard" data-rgba="50,50,50,1" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
-						&lt;/ul&gt;'>
-							<i class="fa fa-tint" aria-hidden="true"></i>
-						</button>
-					</div>
-					<input type="text" name="eingabe" required="" autofocus="" autocomplete="{{$autocomplete}}" class="form-control" placeholder="{{ trans('index.placeholder') }}">
-					<input type="hidden" name="encoding" value="utf8">
-					<input type="hidden" name="lang" value={{ $lang }} >
-					<input type="hidden" name="resultCount" value={{ $resultCount }} >
-					<input type="hidden" name="time" value={{ $time }} >
-					<input type="hidden" name="sprueche" value={{ $sprueche }} >
-					<input type="hidden" name="newtab" value={{ $newtab }} >
-					<input type="hidden" name="maps" value={{ $maps }} >
-					<input type="hidden" name="key" value={{ $key }} >
-					@foreach ($focusPages as $fp)
-						<input type="hidden" name={{ $fp }} value="on">
-					@endforeach
-					<input type="hidden" name="theme" value={{ $theme }}>
-					<div class="input-group-addon">
-						<button type="submit">
-							<i class="fa fa-search" aria-hidden="true"></i>
-						</button>
-					</div>
+	<fieldset>
+		<form id="searchForm" @if(Request::has('request') && Request::input('request') === "POST") method="POST" @elseif(Request::has('request') && Request::input('request') === "GET") method="GET" @else method="GET" @endif action="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/meta/meta.ger3") }}" accept-charset="UTF-8">
+			<div class="input-group">
+				<div class="input-group-addon">
+					<button type="button" data-toggle="popover" data-html="true" data-container="body" title="{{ trans('index.design') }}" data-content='&lt;ul id="color-chooser" class="list-inline list-unstyled"&gt;
+						&lt;li &gt;&lt;a id="standard" data-rgba="255,194,107,1" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
+						&lt;li &gt;&lt;a id="standardHard" data-rgba="255,128,0,1" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
+						&lt;li &gt;&lt;a id="blue" data-rgba="164,192,230,1" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
+						&lt;li &gt;&lt;a id="blueHard" data-rgba="2,93,140,1" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
+						&lt;li &gt;&lt;a id="green" data-rgba="177,226,163,1" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
+						&lt;li &gt;&lt;a id="greenHard" data-rgba="127,175,27,1" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
+						&lt;li &gt;&lt;a id="red" data-rgba="255,92,92,1" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
+						&lt;li &gt;&lt;a id="redHard" data-rgba="255,0,0,1" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
+						&lt;li &gt;&lt;a id="pink" data-rgba="255,196,246,1" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
+						&lt;li &gt;&lt;a id="pinkHard" data-rgba="254,67,101,1" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
+						&lt;li &gt;&lt;a id="black" data-rgba="238,238,238,1" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
+						&lt;li &gt;&lt;a id="blackHard" data-rgba="50,50,50,1" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
+					&lt;/ul&gt;'>
+						<i class="fa fa-tint" aria-hidden="true"></i>
+					</button>
 				</div>
-			</form>
-		</fieldset>
-		<ul class="list-inline searchform-bonus">
-			<li id="plug"
-			@unless ($browser === 'Firefox' || $browser === 'Mozilla' || $browser === 'Chrome' || $browser === 'Opera' || $browser === 'IE' || $browser === 'Edge' || $browser === 'Safari' || $browser === 'Vivaldi')
-				class="hidden"
-			@endunless>
-			<a href="#" data-toggle="modal" data-target="#plugin-modal" class="btn btn-default mutelink" title="{{ trans('index.plugintitle') }}"><i class="fa fa-plug" aria-hidden="true"></i> {{ trans('index.plugin') }}</a></li>
-			@if (LaravelLocalization::getCurrentLocale() == "de")
-			<li>
-				<a href="https://suma-ev.de/presse/Werbefreie-Suche-mit-MetaGer.html" target="_blank" class="btn btn-default mutelink">
-						Werbefreie Suche mit MetaGer
-				</a>
-			</li>
-			@endif
-		</ul>
-	
+				<input type="text" name="eingabe" required="" autofocus="" autocomplete="{{$autocomplete}}" class="form-control" placeholder="{{ trans('index.placeholder') }}">
+				<input type="hidden" name="encoding" value="utf8">
+				<input type="hidden" name="lang" value={{ $lang }} >
+				<input type="hidden" name="resultCount" value={{ $resultCount }} >
+				<input type="hidden" name="time" value={{ $time }} >
+				<input type="hidden" name="sprueche" value={{ $sprueche }} >
+				<input type="hidden" name="newtab" value={{ $newtab }} >
+				<input type="hidden" name="maps" value={{ $maps }} >
+				<input type="hidden" name="key" value={{ $key }} >
+				@foreach ($focusPages as $fp)
+					<input type="hidden" name={{ $fp }} value="on">
+				@endforeach
+				<input type="hidden" name="theme" value={{ $theme }}>
+				<div class="input-group-addon">
+					<button type="submit">
+						<i class="fa fa-search" aria-hidden="true"></i>
+					</button>
+				</div>
+			</div>
+		</form>
+	</fieldset>
+	<ul class="list-inline searchform-bonus">
+		<li id="plug"
+		@unless ($browser === 'Firefox' || $browser === 'Mozilla' || $browser === 'Chrome' || $browser === 'Opera' || $browser === 'IE' || $browser === 'Edge' || $browser === 'Safari' || $browser === 'Vivaldi')
+			class="hidden"
+		@endunless>
+		<a href="#" data-toggle="modal" data-target="#plugin-modal" class="btn btn-default mutelink" title="{{ trans('index.plugintitle') }}"><i class="fa fa-plug" aria-hidden="true"></i> {{ trans('index.plugin') }}</a></li>
+		@if (LaravelLocalization::getCurrentLocale() == "de")
+		<li>
+			<a href="https://suma-ev.de/presse/Werbefreie-Suche-mit-MetaGer.html" target="_blank" class="btn btn-default mutelink">
+					Werbefreie Suche mit MetaGer
+			</a>
+		</li>
+		@endif
+	</ul>
 	<script src="{{ elixir('js/translations.js') }}"></script>
 	<script src="{{ elixir('js/scriptStartPage.js') }}"></script>
 @endsection

--- a/resources/views/settings.blade.php
+++ b/resources/views/settings.blade.php
@@ -58,5 +58,6 @@
 			<input id="plugin" class="btn btn-primary settings-btn" type="submit" value="{!! trans('settings.speichern.3') !!}">
 		</div>
 	</form>
+	<script src="{{ elixir('js/translations.js') }}"></script>
 	<script src="{{ elixir('js/settings.js') }}"></script>
 @endsection