Commit 57fffb25 authored by Karl Hasselbring's avatar Karl Hasselbring
Browse files

Refactoring: JS Dateien sortiert und weiteres

parent 49a151c4
This diff is collapsed.
$(function () { $(function () {
loadLocalStorage(); loadLocalStorage();
setSearchbarActionListeners();
}); });
/** /**
...@@ -11,6 +12,10 @@ function loadLocalStorage () { ...@@ -11,6 +12,10 @@ function loadLocalStorage () {
} }
} }
function setSearchbarActionListeners () {
$('#toggleOptBtn').click(toggleOptionsDialog);
}
function setSettings () { function setSettings () {
var acceptedParams = ['autocomplete', 'key', 'lang', 'newtab', 'sprueche']; var acceptedParams = ['autocomplete', 'key', 'lang', 'newtab', 'sprueche'];
for (var key in localStorage) { for (var key in localStorage) {
...@@ -38,4 +43,382 @@ function setSettings () { ...@@ -38,4 +43,382 @@ function setSettings () {
} }
} }
function toggleOptionsDialog () {
var btnMode = $('#toggleOptBtn').attr('data-mode');
if (btnMode == 'o') {
openOptionsDialog();
} else {
closeOptionsDialog();
}
}
$(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 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 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 //# sourceMappingURL=searchbar.js.map
...@@ -12,7 +12,6 @@ function setFocusCreatorActionListeners () { ...@@ -12,7 +12,6 @@ function setFocusCreatorActionListeners () {
$('.focusCheckbox').click(checkboxCheckListener); $('.focusCheckbox').click(checkboxCheckListener);
$('#addFocusBtn').click(() => showFocusCreateDialog('')); $('#addFocusBtn').click(() => showFocusCreateDialog(''));
$('#editFocusBtn').click(editCurrentFocus); $('#editFocusBtn').click(editCurrentFocus);
$('#toggleOptBtn').click(toggleOptionsDialog);
$('.save-focus-btn').click(saveFocus); $('.save-focus-btn').click(saveFocus);
$('.delete-focus-btn').click(deleteFocus); $('.delete-focus-btn').click(deleteFocus);
$('#focus-select').change(focusChanged); $('#focus-select').change(focusChanged);
...@@ -340,15 +339,6 @@ function getFocusInUrl () { ...@@ -340,15 +339,6 @@ function getFocusInUrl () {
} }
} }
function toggleOptionsDialog () {
var btnMode = $('#toggleOptBtn').attr('data-mode');
if (btnMode == 'o') {
openOptionsDialog();
} else {
closeOptionsDialog();
}
}
function openOptionsDialog () { function openOptionsDialog () {
$('#toggleOptBtn').html('<i class="fa fa-chevron-up" aria-hidden="true"></i>'); $('#toggleOptBtn').html('<i class="fa fa-chevron-up" aria-hidden="true"></i>');
$('#toggleOptBtn').attr('data-mode', 'c'); $('#toggleOptBtn').attr('data-mode', 'c');
......
$(function () { $(function () {
loadLocalStorage(); loadLocalStorage();
setSearchbarActionListeners();
}); });
/** /**
...@@ -11,6 +12,10 @@ function loadLocalStorage () { ...@@ -11,6 +12,10 @@ function loadLocalStorage () {
} }
} }
function setSearchbarActionListeners () {
$('#toggleOptBtn').click(toggleOptionsDialog);
}
function setSettings () { function setSettings () {
var acceptedParams = ['autocomplete', 'key', 'lang', 'newtab', 'sprueche']; var acceptedParams = ['autocomplete', 'key', 'lang', 'newtab', 'sprueche'];
for (var key in localStorage) { for (var key in localStorage) {
...@@ -37,3 +42,12 @@ function setSettings () { ...@@ -37,3 +42,12 @@ function setSettings () {
$('#searchForm').attr('method', requestMethod); $('#searchForm').attr('method', requestMethod);
} }
} }
function toggleOptionsDialog () {
var btnMode = $('#toggleOptBtn').attr('data-mode');
if (btnMode == 'o') {
openOptionsDialog();
} else {
closeOptionsDialog();
}
}
...@@ -12,19 +12,16 @@ ...@@ -12,19 +12,16 @@
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
&>button { &>button {
border: none; border: none;
border-right: 1px solid rgb(170, 170, 170); border-right: 1px solid rgb(170, 170, 170);
background-color: white; background-color: white;
margin: 5px; margin: 5px;
} }
.search-settings:only-child { .search-settings:only-child {
padding: 5px; padding: 5px;
border-right: solid 1px #ccc; border-right: solid 1px #ccc;
} }
select { select {
width: 100%; width: 100%;
-webkit-appearance: none; -webkit-appearance: none;
...@@ -40,7 +37,7 @@ ...@@ -40,7 +37,7 @@
} }
&:after { &:after {
content: "\f078"; content: "\f078";
font: 15px "FontAwesome", sans-serif; //text-align: center; font: 15px "FontAwesome", sans-serif;
line-height: 30px; line-height: 30px;
background-color: transparent; background-color: transparent;
right: 8px; right: 8px;
...@@ -50,7 +47,6 @@ ...@@ -50,7 +47,6 @@
pointer-events: none; pointer-events: none;
} }
} }
.search-option-frame { .search-option-frame {
display: flex; display: flex;
position: absolute; position: absolute;
...@@ -59,7 +55,6 @@ ...@@ -59,7 +55,6 @@
padding: 10px; padding: 10px;
border: 1px solid rgb(175, 175, 175); border: 1px solid rgb(175, 175, 175);
border-radius: 4px; border-radius: 4px;
.searchbar-options-arrow { .searchbar-options-arrow {
width: 0; width: 0;
height: 0; height: 0;
...@@ -71,14 +66,22 @@ ...@@ -71,14 +66,22 @@
margin-left: 3%; margin-left: 3%;
} }
} }
.search-button-container { .search-button-container {
display: flex; display: flex;
margin-top: 3%; margin-top: 3%;
@media (max-width: @screen-xs-max) {
flex-direction: column;
}
>* {
display: flex;
justify-content: space-between;
align-items: baseline;
&:hover {
background-color: #e6e6e6;
}
}
} }
.search-add-focus { .search-add-focus {
//display: flex;
position: relative; position: relative;
button { button {
background-color: white; background-color: white;
...@@ -91,10 +94,9 @@ ...@@ -91,10 +94,9 @@
} }
} }
.search-edit-focus { .search-edit-focus {
//display: flex;
position: relative; position: relative;
button { button {
background-color: white; background-color: transparent;
border: none; border: none;
padding: 0px 8px; padding: 0px 8px;
font-size: 16px; font-size: 16px;
...@@ -104,7 +106,6 @@ ...@@ -104,7 +106,6 @@
} }
} }
.search-settings { .search-settings {
//display: flex;
position: relative; position: relative;
a.btn { a.btn {
border: none; border: none;
...@@ -114,7 +115,6 @@ ...@@ -114,7 +115,6 @@
font-size: 16px; font-size: 16px;
} }
} }