Commit 8c63804c authored by Dominik Hebeler's avatar Dominik Hebeler
Browse files

Merge branch '615' into 'MetaGer-Redesign'

615

See merge request !1087
parents 9871fc04 f23c97f5
......@@ -12,6 +12,7 @@ $(document).ready(function () {
setActionListeners();
loadInitialCustomFocuses();
loadSavedResults();
checkFocusEditable();
});
/**
......@@ -60,12 +61,14 @@ function setActionListeners () {
}
$('.focusCheckbox').click(toggleDeleteButton);
$('#addFocusBtn').click(() => showFocusCreateDialog(''));
$('#editFocusBtn').click(editCurrentFocus);
$('.save-focus-btn').click(saveFocus);
$('.delete-focus-btn').click(deleteFocus);
$('#focus-select').change(checkFocusEditable);
// Save Focus on clicking enter while in the focus name input
$('#focus-name').keyup(function (event) {
if (event.keyCode == 13) {
$('.save-focus-btn').click();
saveFocus();
}
});
$('#create-focus-modal').on('shown.bs.modal', function () {
......@@ -85,7 +88,7 @@ function setSettings () {
if (key === 'param_' + acceptedParams[i]) {
accepted = true;
}
}
}
if (accepted) {
key = key.substring(6);
// Check for existing hidden fields for this key
......@@ -242,8 +245,8 @@ function showFocusCreateDialog (id) {
}
}
toggleDeleteButton();
}
/**
* Shows the focus create dialog for a given id
*/
......@@ -251,11 +254,25 @@ function showFocusEditDialog (id) {
showFocusCreateDialog(id);
}
function getCurrentFocus () {
return document.getElementById('focus-select').value;
}
/**
* Shows an edit dialog for the current selected focus
*/
function editCurrentFocus () {
console.log('hi');
var currentFocus = getCurrentFocus();
console.log(currentFocus);
showFocusEditDialog(currentFocus);
}
/**
* Shows/Hides the delete button if (no) checkboxes are selected
*/
function toggleDeleteButton() {
if(atLeastOneChecked()) {
function toggleDeleteButton () {
if (atLeastOneChecked()) {
$('.delete-focus-btn').show();
} else {
$('.delete-focus-btn').hide();
......@@ -267,34 +284,10 @@ function toggleDeleteButton() {
* Listens for save button
*/
function saveFocus () {
var name = document.getElementById('focus-name').value;
if (isValidName(name) && atLeastOneChecked()) {
var oldId = document.getElementById('original-id').value;
var id = getIdFromName(name);
var overwrite = true;
if (alreadyInUse(name) && oldId !== id) {
overwrite = confirm('Name bereits genutzt\nüberschreiben?');
if (overwrite) {
localStorage.removeItem(id);
removeFocusById(id);
}
}
if (overwrite) {
var focus = {};
$('input[type=checkbox]:checked').each(function (el) {
focus[$(this).attr('name')] = $(this).val();
});
focus['name'] = name;
if (oldId !== '') {
localStorage.removeItem(oldId);
removeFocusById(oldId);
}
localStorage.setItem(id, JSON.stringify(focus));
addFocus(name);
$('#create-focus-modal').modal('hide');
}
} else {
switch(document.documentElement.lang) {
/* 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;
......@@ -304,128 +297,129 @@ function saveFocus () {
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 then a-z, A-Z, 0-9, ä, ö, ü, ß, -, _ allowed, at least 1 character');
break;
case 'es':
alert(''); // TODO
break;
default:
alert(''); // TODO
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;
if ($('#' + oldId).prop('checked')) {
setFocusToDefault();
}
localStorage.removeItem(oldId);
removeFocusById(oldId);
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);
return /^[a-zA-Z0-9äöüß\-_ ]+$/.test(name);
}
/**
* Is at least one focus selected?
*/
function atLeastOneChecked () {
return $('input[type=checkbox]:checked').length > 0;
return $('.focusCheckbox:checked').length > 0;
}
/**
* Is there already a focus with this name?
*/
function alreadyInUse (name) {
return localStorage.hasOwnProperty(getIdFromName(name));
}
/**
* Adds a focus html-element to the focus selection
*
* <input id="NAME" class="hide" type="radio" name="focus" value="NAME" form="searchForm" checked required>
* <label id="NAME-label" for="NAME">
* <i class="fa fa-star" aria-hidden="true"></i>
* <span class="content">NAME</span>
* <button class="btn btn-default">
* <i class="fa fa-pencil" aria-hidden="true"></i>
* </button>
* </label>
* Adds an option to the focus selector
*/
function addFocus (name) {
var id = getIdFromName(name);
var foki = document.getElementById('foki');
// create <div> to wrap all Elements
var wrapper = document.createElement('div');
wrapper.classList.add('focus');
// create <input>
var newFocus = document.createElement('input');
newFocus.id = id;
newFocus.classList.add('focus-radio');
newFocus.classList.add('custom-focus');
newFocus.classList.add('hide');
newFocus.type = 'radio';
newFocus.name = 'focus';
newFocus.value = id;
newFocus.setAttribute('Form', 'searchForm');
newFocus.checked = true;
newFocus.required = true;
// create <label>
var newFocusLabel = document.createElement('label');
newFocusLabel.id = id + '-label';
newFocusLabel.classList.add('focus-label');
newFocusLabel.classList.add('custom-focus-label');
newFocusLabel.htmlFor = id;
// create <i> icon
var newFocusIcon = document.createElement('i');
newFocusIcon.classList.add('fa');
newFocusIcon.classList.add('fa-star');
newFocusIcon.setAttribute('aria-hidden', 'true');
// create content
var newFocusContent = document.createElement('span');
newFocusIcon.classList.add('content');
newFocusContent.textContent = ' ' + name;
// create edit button
var newFocusEditLink = document.createElement('a');
newFocusEditLink.classList.add('focus-edit');
newFocusEditLink.classList.add('custom-focus-edit');
newFocusEditLink.classList.add('mutelink');
newFocusEditLink.href = '#';
newFocusEditLink.onclick = function () {
showFocusEditDialog(id);
};
var newFocusEditLinkIcon = document.createElement('i');
newFocusEditLinkIcon.classList.add('fa');
newFocusEditLinkIcon.classList.add('fa-pencil');
newFocusEditLinkIcon.setAttribute('aria-hidden', 'true');
// add new elements
var addFocusBtn = document.getElementById('addFocusBtnDiv');
foki.insertBefore(wrapper, addFocusBtn);
wrapper.appendChild(newFocus);
wrapper.appendChild(newFocusLabel);
newFocusLabel.appendChild(newFocusIcon);
newFocusLabel.appendChild(newFocusContent);
wrapper.appendChild(newFocusEditLink);
newFocusEditLink.appendChild(newFocusEditLinkIcon);
$('#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 == '') {
if (id == '') {
return;
}
var focusRadio = document.getElementById(id);
var focus = focusRadio.parentNode;
var parent = focus.parentNode;
parent.removeChild(focus);
$('#focus-select option[value="' + id + '"]').remove();
}
/**
* Turns a name into an id
* Converts special characters and spaces
......@@ -438,18 +432,21 @@ function getIdFromName (name) {
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);
}
/**
* Resets all settings
*/
......@@ -480,7 +477,24 @@ function setFocusToDefault () {
* @param {String} focusID The id of the focus, without #
*/
function setFocus (focusID) {
$('#' + focusID).prop('checked', true);
$('#focus-select option[value="' + focusID + '"]').prop('selected', true);
$('#focus-select').change();
}
function checkFocusEditable () {
if (getCurrentFocus().startsWith('focus_')) {
enableEditFocusBtn();
} else {
disableEditFocusBtn();
}
}
function enableEditFocusBtn () {
$('#editFocusBtn').removeClass('disabled').click(editCurrentFocus);
}
function disableEditFocusBtn () {
$('#editFocusBtn').addClass('disabled').off('click');
}
function loadSavedResults () {
......
@import "./bootstrap/bootstrap.less";
@import "./metager/metager.less";
@import "./variables-default.less";
......
.settings-btn {
margin: 5px;
#settings-buttons {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
justify-content: end;
>* {
margin: 10px;
}
}
#settingsButtons {
#settings-selectors {
display: flex;
flex-wrap: wrap;
a,
input {
margin-top: 25px;
>* {
margin: 10px;
}
}
......
......@@ -13,9 +13,16 @@
display: flex;
align-items: stretch;
font-size: 16px;
background-color: white;
> * {
border: 1px solid #aaa;
background-color: transparent;
&:not(:first-child) {
border-left: none;
}
}
.search-focus-selector {
background-color: transparent;
border: 1px solid #aaa;
border-radius: 5px 0px 0px 5px;
select {
width: 100%;
......@@ -27,11 +34,42 @@
padding-right: 35px;
}
}
.search-add-focus {
display: flex;
button {
background-color: white;
border: none;
padding: 0px 8px;
font-size: 16px;
&:hover {
background-color: #e6e6e6;
}
}
}
.search-edit-focus {
display: flex;
button {
background-color: white;
border: none;
padding: 0px 8px;
font-size: 16px;
&:hover {
background-color: #e6e6e6;
}
}
}
.search-settings {
display: flex;
a.btn {
border: none;
padding: 0px 8px;
display: flex;
align-items: center;
font-size: 16px;
}
}
.search-input-submit {
flex-grow: 1;
border-left: none;
border: 1px solid #aaa;
border-left: none;
border-radius: 0px 5px 5px 0px;
display: flex;
}
......
......@@ -462,10 +462,6 @@ select[name=focus]>option {
font-size: 12px;
}
.settings-btn+.settings-btn {
margin-left: 10px;
}
.wikiqtextract p {
margin-bottom: 0;
}
......
......@@ -32,3 +32,5 @@
max-height: 1000px;
}
}
......@@ -5,25 +5,37 @@
@brand-danger: #d9534f;
@body-bg: rgb(250, 250, 250);
@input-border-focus: rgb(255, 128, 0);
@font-family-sans-serif: "Liberation Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-sans-serif: "Liberation Sans",
"Helvetica Neue",
Helvetica,
Arial,
sans-serif;
//** Global textual link color.
@link-color: #2A2ADE;
@link-color: #2A2ADE;
//@link-color: rgb(255, 128, 0);
//** Link hover color set via `darken()` function.
@link-hover-color: darken(@link-color, 15%);
@link-hover-color: darken(@link-color, 15%);
//** Link hover decoration.
@link-hover-decoration: underline;
@font-size-base: 14px;
@screen-md: 992px;
@container-desktop: (920px + @grid-gutter-width);
@screen-lg: 1440px;
@container-large-desktop: (1370px + @grid-gutter-width);
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint: 865px;
/* Screen sizes */
@font-size-base: 14px;
@screen-md: 992px;
@container-desktop: (920px + @grid-gutter-width);
@screen-lg: 1440px;
@container-large-desktop: (1370px + @grid-gutter-width);
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint: 865px;
\ No newline at end of file
@screen-xs: 480px;
@screen-sm: 768px;
@screen-md: 992px;
@screen-lg: 1200px;
@screen-xs-min: @screen-xs;
@screen-sm-min: @screen-sm;
@screen-md-min: @screen-md;
@screen-lg-min: @screen-lg;
@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);
@grid-gutter-width: 30px;
\ No newline at end of file
......@@ -113,4 +113,7 @@ return [
'plugin.vivaldi.8' => 'MetaGer als Startseite im :browser einrichten',
'plugin.vivaldi.9' => 'Klicken Sie in Ihrem Browser oben links auf das rote Vivaldi Logo und wählen Sie zuerst "Werkzeuge", dann im Untermenü "Einstellungen".',
'plugin.vivaldi.10' => 'Tragen Sie im Feld "Startseite" "https://metager.de" ein.',
'add-focus' => 'Eigenen Fokus hinzufügen',
'edit-focus' => 'Fokus bearbeiten',
];
......@@ -204,69 +204,11 @@
</div>
</div>
<h1 id="mglogo"><a class="hidden-xs" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}">MetaGer</a></h1>
<!-- Create the focus selection and options -->
<!-- <div id="foki" class="startpage-foki">
<div class="focus">
<input id="web" class="focus-radio hide" type="radio" name="focus" value="web" form="searchForm" @if ($focus === 'web') checked @endif required="">
<label id="web-label" class="focus-label" for="web">
<i class="fa fa-globe" aria-hidden="true"></i>
<span class="content">{{ trans('index.foki.web') }}</span>
</label>
</div>
<div class="focus">
<input id="nachrichten" class="focus-radio hide" type="radio" name="focus" value="nachrichten" form="searchForm" @if ($focus === 'nachrichten') checked @endif required="">
<label id="nachrichten-label" class="focus-label" for="nachrichten">
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<span class="content">{{ trans('index.foki.nachrichten') }}</span>
</label>
</div>
<div class="focus">
<input id="wissenschaft" class="focus-radio hide" type="radio" name="focus" value="wissenschaft" form="searchForm" @if ($focus === 'wissenschaft') checked @endif required="">
<label id="wissenschaft-label" class="focus-label" for="wissenschaft">
<i class="fa fa-file-text" aria-hidden="true"></i>
<span class="content">{{ trans('index.foki.wissenschaft') }}</span>
</label>
</div>
<div class="focus">
<input id="produkte" class="focus-radio hide" type="radio" name="focus" value="produktsuche" form="searchForm" @if ($focus === 'produkte') checked @endif required="">
<label id="produkte-label" class="focus-label" for="produkte">
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
<span class="content">{{ trans('index.foki.produkte') }}</span>
</label>
</div>
<div class="focus">
<input id="maps" class="focus-radio hide" type="radio" name="focus" value="maps" form="searchForm" @if ($focus === 'maps') checked @endif required="">
<label id="maps-label" class="focus-label" for="maps">
<i class="fa fa-map" aria-hidden="true"></i>
<span class="content">{{ trans('index.foki.maps') }}</span>
</label>
</div>
{{-- Fix for older Versions --}}
@if ($focus === 'angepasst')
<div class="focus">
<input id="angepasst" class="focus-radio hide" type="radio" name="focus" value="angepasst" form="searchForm" checked required="">
<label id="anpassen-label" class="focus-label" for="angepasst">
<i class="fa fa-cog" aria-hidden="true"></i>
<span class="content">{{ trans('index.foki.angepasst') }}</span>
</label>
</div>
@endif
<div id="addFocusBtnDiv">
<button id="addFocusBtn" class="btn btn-default hide">
<i class="fa fa-plus" aria-hidden="true"></i>
</button>
</div>
<div id="settingsBtnDiv">
<a id="settings-btn" class="mutelink btn btn-default" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "settings") }}">
<i class="fa fa-cog" aria-hidden="true"></i>
</a>
</div>
</div>-->
<fieldset>
<form id="searchForm" method={{ $request }} action="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/meta/meta.ger3") }}" accept-charset="UTF-8">
<div class="search-bar">
<div class="search-focus-selector">
<select name="focus" style="font-family: FontAwesome, sans-serif;">
<select id="focus-select" name="focus" style="font-family: FontAwesome, sans-serif;">
<option value="web" style="font-family: FontAwesome, sans-serif;" selected >&#xf0ac; Websuche</option>
<option value="nachrichten" style="font-family: FontAwesome, sans-serif;" >&#xf0a1; Nachrichtensuche</option>
<option value="wissenschaft" style="font-family: FontAwesome, sans-serif;" >&#xf15c; Wissenschaftssuche</option>