From 6b9431da147bfc604fd07a0e7eb8355331f23207 Mon Sep 17 00:00:00 2001
From: Karl Hasselbring <Karl Hasselbring>
Date: Mon, 4 Dec 2017 12:29:07 +0100
Subject: [PATCH] =?UTF-8?q?Improved:=20Resultsaver=20grunds=C3=A4tzlich=20?=
=?UTF-8?q?eingebaut?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
resources/assets/js/results.js | 247 ++++++++++--------
resources/assets/js/scriptResultPage.js | 16 --
.../assets/less/metager/result-page.less | 9 +-
.../assets/less/metager/result-saver.less | 25 ++
.../views/layouts/researchandtabs.blade.php | 28 +-
resources/views/layouts/result.blade.php | 2 +-
resources/views/layouts/resultPage.blade.php | 2 +-
resources/views/metager3.blade.php | 7 +-
8 files changed, 187 insertions(+), 149 deletions(-)
create mode 100644 resources/assets/less/metager/result-saver.less
diff --git a/resources/assets/js/results.js b/resources/assets/js/results.js
index c551d583e..c35d79f38 100644
--- a/resources/assets/js/results.js
+++ b/resources/assets/js/results.js
@@ -1,9 +1,9 @@
/*
* This object gathers all stored Result Objects and can Update the Interface to show them.
*/
-function Results(sort){
- if(!localStorage) return;
- this.prefix = "result_";
+function Results (sort) {
+ if (!localStorage) return;
+ this.prefix = 'result_';
this.sort = sort;
this.results = [];
this.updateResults();
@@ -11,146 +11,153 @@ function Results(sort){
this.sortResults();
}
-Results.prototype.sortResults = function(){
- if(this.sort === undefined) this.sort = "chronological";
+Results.prototype.sortResults = function () {
+ if (this.sort === undefined) this.sort = 'chronological';
var sortType = this.sort;
- switch(sortType){
- case "chronological":
- this.results.sort(function(a,b){
- if(a.added > b.added) return -1;
- if(a.added < b.added) return 1;
+ switch (sortType) {
+ case 'chronological':
+ this.results.sort(function (a, b) {
+ if (a.added > b.added) return -1;
+ if (a.added < b.added) return 1;
return 0;
});
break;
- case "rank":
- this.results.sort(function(a,b){
- if(a.rank > b.rank) return -1;
- if(a.rank < b.rank) return 1;
+ case 'rank':
+ this.results.sort(function (a, b) {
+ if (a.rank > b.rank) return -1;
+ if (a.rank < b.rank) return 1;
return 0;
});
break;
- case "alphabetical":
- this.results.sort(function(a,b){
- if(b.hostname > a.hostname) return -1;
- if(b.hostname < a.hostname) return 1;
+ case 'alphabetical':
+ this.results.sort(function (a, b) {
+ if (b.hostname > a.hostname) return -1;
+ if (b.hostname < a.hostname) return 1;
return 0;
});
break;
}
-}
+};
-Results.prototype.updateResults = function(){
+Results.prototype.updateResults = function () {
// Iterate over all Keys in the LocalStorage
- for(var i = 0; i < localStorage.length; i++){
- if(localStorage.key(i).indexOf(this.prefix) === 0){
+ for (var i = 0; i < localStorage.length; i++) {
+ if (localStorage.key(i).indexOf(this.prefix) === 0) {
var key = localStorage.key(i);
key = key.substr(this.prefix.length);
- var tmpResult = new Result(undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, key);
+ var tmpResult = new Result(undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, key);
tmpResult.setIndex(i);
this.results.push(tmpResult);
}
}
-}
+};
-Results.prototype.deleteResults = function(){
+Results.prototype.deleteResults = function () {
var keys = [];
- for(var i = 0; i < localStorage.length; i++){
- if(localStorage.key(i).indexOf(this.prefix) === 0){
+ for (var i = 0; i < localStorage.length; i++) {
+ if (localStorage.key(i).indexOf(this.prefix) === 0) {
var key = localStorage.key(i);
keys.push(key);
}
}
- $.each(keys, function(index, value){
+ $.each(keys, function (index, value) {
localStorage.removeItem(value);
});
-}
+};
-Results.prototype.updateResultPageInterface = function(){
+Results.prototype.updateResultPageInterface = function () {
var sortType = this.sort;
- if(this.results.length === 0){
- $("#savedFokiTabSelector, #savedFoki").remove();
- $($("#foki > li[data-loaded=1]").get(0)).find(">a").tab("show");
+ if (this.results.length === 0) {
+ $('#savedFokiTabSelector, #savedFoki').remove();
return;
}
- if($("#savedFokiTabSelector").length === 0){
+ /*if ($('#savedFokiTabSelector').length === 0) {
var savedFoki = $('\
- <li id="savedFokiTabSelector" data-loaded="1" class="tab-selector" role="presentation">\
+ <div id="savedFokiTabSelector">\
<a aria-controls="savedFoki" href="#savedFoki" role="tab" data-toggle="tab">\
<span class="glyphicon glyphicon-floppy-disk"></span> gespeicherte Ergebnisse\
<span class="badge">' + this.results.length + '</span>\
</a>\
- </li>\
- ');
- $("#foki").append(savedFoki);
- }else{
- $("#savedFokiTabSelector span.badge").html(this.results.length);
- }
- if($("#savedFoki").length === 0){
- // Now append the Tab Panel
- var tabPanel = $('\
- <div role="tabpanel" class="tab-pane" id="savedFoki">\
+ </div>\
+ ')
+ $('#foki').append(savedFoki)
+ } else {
+ $('#savedFokiTabSelector span.badge').html(this.results.length)
+ }*/
+ if ($('#savedFoki').length === 0) {
+ // Now append the Tab Panel
+ var tabPanel = $('\
+ <div id="savedFoki">\
</div>\
');
- $("#main-content-tabs").append(tabPanel);
- }else{
- $("#savedFoki").html("");
- var tabPanel = $("#savedFoki");
- }
- this.addToContainer(tabPanel, sortType);
-}
+ $('#additions-container').append(tabPanel);
+ } else {
+ $('#savedFoki').html('');
+ var tabPanel = $('#savedFoki');
+ }
+ this.addToContainer(tabPanel, sortType);
+};
-Results.prototype.addToContainer = function(container){
+Results.prototype.addToContainer = function (container) {
var sortType = this.sort;
- $.each(this.results, function(index, result){
+ $.each(this.results, function (index, result) {
$(container).append(result.toHtml());
});
var options = $('\
- <div class="saver-options row">\
- <input class="form-control" type="text" placeholder="Filtern">\
- <select class="form-control">\
- <option value="chronological">Chronologisch</option>\
- <option value="rank">MetaGer-Ranking</option>\
- <option value="alphabetical">Alphabetisch (Hostname)</option>\
- </select>\
- <button class="btn btn-danger btn-md"><span class="glyphicon glyphicon-trash"></span> <span class="hidden-xs">Ergebnisse</span> löschen</button>\
+ <div id="saver-options">\
+ <div class="saver-option saver-option-filter">\
+ <input class="form-control" type="text" placeholder=" Filtern">\
+ </div>\
+ <div class="saver-option saver-option-sort">\
+ <select class="form-control" style="font-family: FontAwesome, sans-serif;">\
+ <option value="chronological" style="font-family: FontAwesome, sans-serif;"> Chronologisch</option>\
+ <option value="rank" style="font-family: FontAwesome, sans-serif;"> MetaGer-Ranking</option>\
+ <option value="alphabetical" style="font-family: FontAwesome, sans-serif;"> Alphabetisch (Hostname)</option>\
+ </select>\
+ </div>\
+ <div class="saver-option saver-option-delete">\
+ <button class="btn btn-danger btn-md" id="saver-options-btn">\
+ <i class="fa fa-trash-o" aria-hidden="true"></i>\
+ <span class="hidden-xs">Ergebnisse</span> löschen</button>\
+ </div>\
</div>\
');
- $(options).find("select").val(sortType);
+ $(options).find('select').val(sortType);
$(container).prepend(options);
- $(options).find("select").change(function(){
+ $(options).find('select').change(function () {
new Results($(this).val()).updateResultPageInterface();
});
- $(options).find("button").click({caller: this}, function(event){
- event.data.caller.deleteResults();
- new Results().updateResultPageInterface();
+ $(options).find('button').click({caller: this}, function (event) {
+ event.data.caller.deleteResults();
+ new Results().updateResultPageInterface();
});
- $(options).find("input").keyup(function(){
+ $(options).find('input').keyup(function () {
var search = $(this).val();
- $("#savedFoki > div.result").each(function(index, value){
+ $('#savedFoki > div.result').each(function (index, value) {
var html = $(this).html();
- if(html.toLowerCase().indexOf(search.toLowerCase()) === -1){
- $(value).addClass("hidden");
- }else{
- $(value).removeClass("hidden");
+ if (html.toLowerCase().indexOf(search.toLowerCase()) === -1) {
+ $(value).addClass('hidden');
+ }else {
+ $(value).removeClass('hidden');
}
});
});
+};
-}
-
-function Result(title, link, anzeigeLink, gefVon, hoster, anonym, description, color, rank, hash){
- this.prefix = "result_"; // Präfix for the localStorage so we can find all Items
+function Result (title, link, anzeigeLink, gefVon, hoster, anonym, description, rank, hash) {
+ this.prefix = 'result_'; // Präfix for the localStorage so we can find all Items
- if(hash !== null && hash !== undefined){
+ if (hash !== null && hash !== undefined) {
this.hash = hash;
this.load();
- }else{
+ } else {
+ console.log('Result: ', title, link, anzeigeLink, gefVon, hoster, anonym, description);
this.hash = MD5(title + link + anzeigeLink + gefVon + hoster + anonym + description);
this.title = title;
@@ -160,20 +167,19 @@ function Result(title, link, anzeigeLink, gefVon, hoster, anonym, description, c
this.hoster = hoster;
this.anonym = anonym;
this.description = description;
- this.color = color;
this.rank = rank;
this.added = new Date().getTime();
var parser = document.createElement('a');
parser.href = this.anzeigeLink;
this.hostname = parser.hostname;
- this.save()
+ this.save();
}
}
-Result.prototype.load = function(){
- if(localStorage){
- var result = localStorage.getItem(this. prefix + this.hash);
- if(result === null) return false;
+Result.prototype.load = function () {
+ if (localStorage) {
+ var result = localStorage.getItem(this.prefix + this.hash);
+ if (result === null) return false;
result = b64DecodeUnicode(result);
result = JSON.parse(result);
this.title = result.title;
@@ -184,21 +190,19 @@ Result.prototype.load = function(){
this.anonym = result.anonym;
this.description = result.description;
this.added = result.added;
- this.color = result.color;
this.rank = result.rank;
this.hostname = result.hostname;
return true;
- }else{
+ }else {
return false;
}
-}
+};
-Result.prototype.save = function(){
+Result.prototype.save = function () {
/*
* This function will save the data of this Result to the LocalStorage
*/
- if(localStorage){
-
+ if (localStorage) {
var result = {
title: this.title,
link: this.link,
@@ -208,7 +212,6 @@ Result.prototype.save = function(){
anonym: this.anonym,
description: this.description,
added: this.added,
- color: this.color,
rank: this.rank,
hostname: this.hostname
};
@@ -219,34 +222,33 @@ Result.prototype.save = function(){
localStorage.setItem(this.prefix + this.hash, result);
return true;
- }else{
+ }else {
return false;
}
-}
+};
-function b64EncodeUnicode(str) {
- return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
- return String.fromCharCode('0x' + p1);
- }));
+function b64EncodeUnicode (str) {
+ return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function (match, p1) {
+ return String.fromCharCode('0x' + p1);
+ }));
}
-function b64DecodeUnicode(str) {
- return decodeURIComponent(Array.prototype.map.call(atob(str), function(c) {
- return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
- }).join(''));
+function b64DecodeUnicode (str) {
+ return decodeURIComponent(Array.prototype.map.call(atob(str), function (c) {
+ return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+ }).join(''));
}
-
-Result.prototype.setIndex = function(index){
+Result.prototype.setIndex = function (index) {
this.index = index;
-}
+};
-Result.prototype.remove = function(){
+Result.prototype.remove = function () {
localStorage.removeItem(this.prefix + this.hash);
new Results().updateResultPageInterface();
-}
+};
-Result.prototype.toHtml = function(){
+Result.prototype.toHtml = function () {
var result = $('\
<div class="result row">\
<div class="col-sm-1 glyphicon glyphicon-trash remover" title="Ergebnis aus dem Speicher löschen">\
@@ -278,8 +280,33 @@ Result.prototype.toHtml = function(){
<div class="description">' + this.description + '</div>\
</div>\
</div>');
- $(result).find(".remover").click({caller: this}, function(event){
+ $(result).find('.remover').click({caller: this}, function (event) {
event.data.caller.remove();
});
return result;
-}
\ No newline at end of file
+};
+
+/**
+ * Saves the result at the given index
+ * @param {int} index The index of the result to save
+ */
+function resultSaver (index) {
+ // Read the necessary data from the result html
+ var title = $('.result[data-count=' + index + '] .result-title a').html();
+ var link = $('.result[data-count=' + index + '] .result-title a').attr('href');
+ var anzeigeLink = $('.result[data-count=' + index + '] .result-link a').html();
+ var gefVon = $('.result[data-count=' + index + '] .result-hoster a').html();
+ var hoster = $('.result[data-count=' + index + '] .result-hoster a').attr('href');
+ var anonym = $('.result[data-count=' + index + '] .result-proxy').attr('href');
+ var description = $('.result[data-count=' + index + '] .result-description').html();
+
+ // Create the result object
+ new Result(title, link, anzeigeLink, gefVon, hoster, anonym, description, index, undefined);
+
+ // Animate the result transfer to the saved results
+ /*var transferTarget = $('#savedFokiTabSelector').length ? $('#savedFokiTabSelector') : $('#foki')
+ $('.result[data-count=' + index + ']').transfer({to: transferTarget, duration: 1000});*/
+
+ // Update the saved results
+ new Results().updateResultPageInterface();
+}
diff --git a/resources/assets/js/scriptResultPage.js b/resources/assets/js/scriptResultPage.js
index 540590274..2d0147eb3 100644
--- a/resources/assets/js/scriptResultPage.js
+++ b/resources/assets/js/scriptResultPage.js
@@ -375,19 +375,3 @@ function initialLoadContent (fokus) {
getDocumentReadyForUse(fokus);
});
}
-
-function resultSaver (index) {
- var title = $('div.tab-pane.active .result[data-count=' + index + '] a.title').html();
- var link = $('div.tab-pane.active .result[data-count=' + index + '] a.title').attr('href');
- var anzeigeLink = $('div.tab-pane.active .result[data-count=' + index + '] div.link-link > a').html();
- var gefVon = $('div.tab-pane.active .result[data-count=' + index + '] span.hoster').html();
- var hoster = $('div.tab-pane.active .result[data-count=' + index + '] a.title').attr('data-hoster');
- var anonym = $('div.tab-pane.active .result[data-count=' + index + '] a.proxy').attr('href');
- var description = $('div.tab-pane.active .result[data-count=' + index + '] div.description').html();
- var color = $('div.tab-pane.active .result[data-count=' + index + '] div.number').css('color');
- var rank = parseFloat($('div.tab-pane.active .result[data-count=' + index + ']').attr('data-rank'));
- new Result(title, link, anzeigeLink, gefVon, hoster, anonym, description, color, rank, undefined);
- var to = $('#savedFokiTabSelector').length ? $('#savedFokiTabSelector') : $('#foki');
- $('div.tab-pane.active .result[data-count=' + index + ']').transfer({to: to, duration: 1000});
- new Results().updateResultPageInterface();
-}
diff --git a/resources/assets/less/metager/result-page.less b/resources/assets/less/metager/result-page.less
index 32b060005..71331aa7f 100644
--- a/resources/assets/less/metager/result-page.less
+++ b/resources/assets/less/metager/result-page.less
@@ -1,6 +1,7 @@
/* Ergebnisseite */
@import "./quicktips.less";
+@import "./result-saver.less";
@import "./result.less";
@import "./product.less";
//
@@ -342,12 +343,12 @@ a {
@result-width: 700px;
@quicktip-width: 500px;
-.resultpage-container {
+#resultpage-container {
width: @result-width + @quicktip-width;
align-self: center;
@media (max-width: (@result-width + @quicktip-width - 1px)) {
width: @result-width;
- #quicktips {
+ #additions-container {
display: none;
}
}
@@ -356,11 +357,11 @@ a {
}
display: flex;
justify-content: center;
- #results {
+ #results-container {
max-width: @result-width;
width: 100%;
}
- #quicktips {
+ #additions-container {
padding-left: 50px;
width: @quicktip-width;
}
diff --git a/resources/assets/less/metager/result-saver.less b/resources/assets/less/metager/result-saver.less
new file mode 100644
index 000000000..cad391a2f
--- /dev/null
+++ b/resources/assets/less/metager/result-saver.less
@@ -0,0 +1,25 @@
+#savedFoki {
+ padding-top: 50px;
+ #saver-options {
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ >* {
+ margin: 5px 0px;
+ display: flex;
+ align-items: center;
+ }
+ .saver-option-filter>input {
+ font-family: FontAwesome, sans-serif;
+ }
+ .saver-option-sort>select {
+ &,
+ option {
+ font-family: FontAwesome, sans-serif;
+ }
+ }
+ .saver-option-delete button {
+ width: 100%;
+ }
+ }
+}
\ No newline at end of file
diff --git a/resources/views/layouts/researchandtabs.blade.php b/resources/views/layouts/researchandtabs.blade.php
index bfebfcc57..4c1187aa1 100644
--- a/resources/views/layouts/researchandtabs.blade.php
+++ b/resources/views/layouts/researchandtabs.blade.php
@@ -8,18 +8,22 @@
</div>
</div>
@endif
-<div class="content-wrapper">
- <header id="research-bar">
- <div id="header-logo">
- <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}"><h1 class="mg-logo">MetaGer</h1></a>
- </div>
- <div id="header-searchbar">
- @include('parts.searchbar', ['class' => 'resultpage-searchbar', 'request' => Request::method()])
- </div>
- </header>
- <div id="research-bar-placeholder">
+<header id="research-bar">
+ <div id="header-logo">
+ <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}"><h1 class="mg-logo">MetaGer</h1></a>
+ </div>
+ <div id="header-searchbar">
+ @include('parts.searchbar', ['class' => 'resultpage-searchbar', 'request' => Request::method()])
</div>
- <main class="resultpage-container">
+</header>
+<div id="research-bar-placeholder"></div>
+<div id="resultpage-container">
+ <div id="results-container">
@yield('results')
- </main>
+ </div>
+ <div id="additions-container">
+ @if( $metager->showQuicktips() )
+ <div id="quicktips"></div>
+ @endif
+ </div>
</div>
\ No newline at end of file
diff --git a/resources/views/layouts/result.blade.php b/resources/views/layouts/result.blade.php
index 7daf17c73..03bf4ab35 100644
--- a/resources/views/layouts/result.blade.php
+++ b/resources/views/layouts/result.blade.php
@@ -48,7 +48,7 @@
</div>
</div>
<span class="result-hoster">
- <span>von {!! $result->gefVon !!}</span>
+ von {!! $result->gefVon !!}
</span>
@if( isset($result->partnershop) && $result->partnershop === TRUE )
<span class="partnershop-info">
diff --git a/resources/views/layouts/resultPage.blade.php b/resources/views/layouts/resultPage.blade.php
index 095e907e3..4420e83d0 100644
--- a/resources/views/layouts/resultPage.blade.php
+++ b/resources/views/layouts/resultPage.blade.php
@@ -25,7 +25,7 @@
@include('modals.create-focus-modal')
@include('layouts.researchandtabs')
@else
- <div class="resultpage-container">
+ <div id="resultpage-container">
@yield('results')
</div>
@endif
diff --git a/resources/views/metager3.blade.php b/resources/views/metager3.blade.php
index 3bbad8cb1..4828f89fc 100644
--- a/resources/views/metager3.blade.php
+++ b/resources/views/metager3.blade.php
@@ -21,7 +21,7 @@
</ul>
</div>
@endif
- <div id="results">
+ <main id="results">
{{-- Show initial products or ads --}}
@if($metager->hasProducts())
@if( $metager->getFokus() !== "produktsuche" && !$apiAuthorized)
@@ -54,8 +54,5 @@
<a @if($metager->nextSearchLink() !== "#") href="{{ $metager->nextSearchLink() }}" @endif>{{ trans('results.weiter') }}</a>
</div>
</nav>
- </div>
- @if( $metager->showQuicktips() )
- <div id="quicktips"></div>
- @endif
+ </main>
@endsection
--
GitLab