Add and apply tooltip
This commit is contained in:
parent
f4ba6bfd06
commit
2034345d97
1
Makefile
1
Makefile
|
@ -28,6 +28,7 @@ webapp/node_modules:
|
||||||
webapp: webapp/node_modules
|
webapp: webapp/node_modules
|
||||||
cd webapp && npx webpack --config webpack.config.js
|
cd webapp && npx webpack --config webpack.config.js
|
||||||
cp -r webapp/dist/* ./docs/
|
cp -r webapp/dist/* ./docs/
|
||||||
|
cp webapp/node_modules/tooltipster/dist/css/tooltipster.bundle.min.css ./docs/css/
|
||||||
rm webapp/dist/bundle.js
|
rm webapp/dist/bundle.js
|
||||||
|
|
||||||
serve-webapp:
|
serve-webapp:
|
||||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -5,9 +5,10 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
<title>GREEN SPIDER: Websites von Bündnis 90/Die Grünen besser machen</title>
|
<title>GREEN SPIDER: Websites von Bündnis 90/Die Grünen besser machen</title>
|
||||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||||
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
|
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
|
||||||
<link rel="stylesheet" type="text/css" href="https://netzbegruenung.github.io/webfonts/style.css">
|
<link rel="stylesheet" href="https://netzbegruenung.github.io/webfonts/style.css">
|
||||||
<link rel="stylesheet" href="https://unpkg.com/ionicons@4.1.2/dist/css/ionicons.min.css">
|
<link rel="stylesheet" href="https://unpkg.com/ionicons@4.1.2/dist/css/ionicons.min.css">
|
||||||
|
<link rel="stylesheet" href="css/tooltipster.bundle.min.css">
|
||||||
<link rel="icon" href="icon/icon32.png" type="image/png" sizes="32x32">
|
<link rel="icon" href="icon/icon32.png" type="image/png" sizes="32x32">
|
||||||
<link rel="icon" href="icon/icon128.png" type="image/png" sizes="128x128">
|
<link rel="icon" href="icon/icon128.png" type="image/png" sizes="128x128">
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
|
@ -42,11 +43,6 @@
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.screenshot {
|
a.screenshot {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-left: 3px;
|
margin-left: 3px;
|
||||||
|
@ -58,6 +54,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
.screenshot .icon {
|
.screenshot .icon {
|
||||||
|
@ -98,9 +96,9 @@
|
||||||
<th scope="col">Erreichbar</th>
|
<th scope="col">Erreichbar</th>
|
||||||
<th scope="col">Antwortzeit</th>
|
<th scope="col">Antwortzeit</th>
|
||||||
<th scope="col">Icon</th>
|
<th scope="col">Icon</th>
|
||||||
<th scope="col"><abbr title="Site nutzt HTTP-Verschlüsselung">HTTPS</abbr></th>
|
<th scope="col">HTTPS</th>
|
||||||
<th scope="col"><abbr title="Site ist sowohl mit www. als auch ohne www. in URL erreichbar">www. optional</abbr></th>
|
<th scope="col">www. optional</th>
|
||||||
<th scope="col"><abbr title="URL-Varianten leiten auf eine einzige Startseiten-URL weiter">Kanonische URL</abbr></th>
|
<th scope="col">Kanonische URL</th>
|
||||||
<th scope="col">Responsive</th>
|
<th scope="col">Responsive</th>
|
||||||
<th scope="col">Feed</th>
|
<th scope="col">Feed</th>
|
||||||
<th scope="col">Screenshots</th>
|
<th scope="col">Screenshots</th>
|
||||||
|
|
|
@ -5,9 +5,12 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
<title>GREEN SPIDER: Websites von Bündnis 90/Die Grünen besser machen</title>
|
<title>GREEN SPIDER: Websites von Bündnis 90/Die Grünen besser machen</title>
|
||||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||||
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
|
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
|
||||||
<link rel="stylesheet" type="text/css" href="https://netzbegruenung.github.io/webfonts/style.css">
|
<link rel="stylesheet" href="https://netzbegruenung.github.io/webfonts/style.css">
|
||||||
<link rel="stylesheet" href="https://unpkg.com/ionicons@4.1.2/dist/css/ionicons.min.css">
|
<link rel="stylesheet" href="https://unpkg.com/ionicons@4.1.2/dist/css/ionicons.min.css">
|
||||||
|
<link rel="stylesheet" href="css/tooltipster.bundle.min.css">
|
||||||
|
<link rel="icon" href="icon/icon32.png" type="image/png" sizes="32x32">
|
||||||
|
<link rel="icon" href="icon/icon128.png" type="image/png" sizes="128x128">
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
|
|
||||||
h5 {
|
h5 {
|
||||||
|
@ -40,11 +43,6 @@
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.screenshot {
|
a.screenshot {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-left: 3px;
|
margin-left: 3px;
|
||||||
|
@ -56,6 +54,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
.screenshot .icon {
|
.screenshot .icon {
|
||||||
|
@ -96,9 +96,9 @@
|
||||||
<th scope="col">Erreichbar</th>
|
<th scope="col">Erreichbar</th>
|
||||||
<th scope="col">Antwortzeit</th>
|
<th scope="col">Antwortzeit</th>
|
||||||
<th scope="col">Icon</th>
|
<th scope="col">Icon</th>
|
||||||
<th scope="col"><abbr title="Site nutzt HTTP-Verschlüsselung">HTTPS</abbr></th>
|
<th scope="col">HTTPS</th>
|
||||||
<th scope="col"><abbr title="Site ist sowohl mit www. als auch ohne www. in URL erreichbar">www. optional</abbr></th>
|
<th scope="col">www. optional</th>
|
||||||
<th scope="col"><abbr title="URL-Varianten leiten auf eine einzige Startseiten-URL weiter">Kanonische URL</abbr></th>
|
<th scope="col">Kanonische URL</th>
|
||||||
<th scope="col">Responsive</th>
|
<th scope="col">Responsive</th>
|
||||||
<th scope="col">Feed</th>
|
<th scope="col">Feed</th>
|
||||||
<th scope="col">Screenshots</th>
|
<th scope="col">Screenshots</th>
|
||||||
|
|
|
@ -1,10 +1,9 @@
|
||||||
import _ from 'lodash';
|
import _ from 'lodash';
|
||||||
import $ from 'jquery';
|
import $ from 'jquery';
|
||||||
import 'bootstrap';
|
import 'bootstrap';
|
||||||
import 'popper.js';
|
|
||||||
import punycode from 'punycode';
|
import punycode from 'punycode';
|
||||||
import 'datatables.net';
|
import 'datatables.net';
|
||||||
import LazyLoad from 'vanilla-lazyload';
|
import 'tooltipster';
|
||||||
|
|
||||||
$(function(){
|
$(function(){
|
||||||
|
|
||||||
|
@ -37,7 +36,7 @@ $(function(){
|
||||||
} else if (item.meta.level === 'DE:LANDESVERBAND') {
|
} else if (item.meta.level === 'DE:LANDESVERBAND') {
|
||||||
level = 'LV';
|
level = 'LV';
|
||||||
}
|
}
|
||||||
row.append('<td>' + (level === null ? '' : level) + '</td>');
|
row.append('<td data-order="'+ (level === null ? '' : level) +'"><span class="tt" title="Art der Gliederung: LV = Landesverband, KV = Kreisverband, OV = Ortsverband">' + (level === null ? '' : level) + '</span></td>');
|
||||||
|
|
||||||
// land
|
// land
|
||||||
row.append('<td>' + (item.meta.state === null ? '' : item.meta.state) + '</td>');
|
row.append('<td>' + (item.meta.state === null ? '' : item.meta.state) + '</td>');
|
||||||
|
@ -49,47 +48,58 @@ $(function(){
|
||||||
row.append('<td>' + (item.meta.city === null ? '' : item.meta.city) + '</td>');
|
row.append('<td>' + (item.meta.city === null ? '' : item.meta.city) + '</td>');
|
||||||
|
|
||||||
// input URL
|
// input URL
|
||||||
row.append('<td><a href="' + item.input_url + '">' + trunc(punycode.toUnicode(item.input_url), 60) + '</a></td>');
|
row.append('<td data-order="' + item.input_url + '"><span class="tt" title="URL, die als Ausgangspunkt für diese Site vorliegt. Nicht notwendigerweise die kanonische URL."><a href="' + item.input_url + '" target="_blank" rel="noopener noreferrer">' + trunc(punycode.toUnicode(item.input_url), 60) + '</a></span></td>');
|
||||||
|
|
||||||
// score
|
// score
|
||||||
row.append('<td>' + item.score.toFixed(1) + '</td>');
|
row.append('<td data-order="' + item.score.toFixed(3) + '"><span class="tt" title="Punktzahl für diese Site (je höher desto besser)">' + item.score.toFixed(1) + '</span></td>');
|
||||||
|
|
||||||
// IPs
|
// IPs
|
||||||
var ips = _.join(item.details.ipv4_addresses, ', ');
|
var ips = _.join(item.details.ipv4_addresses, ', ');
|
||||||
row.append('<td class="text '+ (ips === '' ? 'bad' : 'good') +' text-center">' + (ips === '' ? no : ips) + '</td>');
|
row.append('<td class="text '+ (ips === '' ? 'bad' : 'good') +' text-center" data-order="' + (ips === '' ? no : ips) + '"><span class="tt" title="IPv4-Adresse(n) des Servers bzw. der Server">' + (ips === '' ? no : ips) + '</span></td>');
|
||||||
|
|
||||||
// SITE_REACHABLE
|
// SITE_REACHABLE
|
||||||
row.append('<td class="'+ (item.result.SITE_REACHABLE.value ? 'good' : 'bad') +' text-center" data-order="'+ (item.result.SITE_REACHABLE.value ? '1' : '0') +'">' + (item.result.SITE_REACHABLE.value ? yes : no) + '</td>');
|
var reachable = '<span class="tt" title="Die Site war beim Check erreichbar.">' + yes + '</span>';
|
||||||
|
if (!item.result.SITE_REACHABLE.value) {
|
||||||
|
reachable = '<span class="tt" title="Die Site war beim Check nicht erreichbar.">' + no + '</span>';
|
||||||
|
}
|
||||||
|
row.append('<td class="'+ (item.result.SITE_REACHABLE.value ? 'good' : 'bad') +' text-center" data-order="'+ (item.result.SITE_REACHABLE.value ? '1' : '0') +'">' + reachable + '</td>');
|
||||||
|
|
||||||
// HTTP_RESPONSE_DURATION
|
// HTTP_RESPONSE_DURATION
|
||||||
var durationClass = 'bad';
|
var durationClass = 'bad';
|
||||||
if (item.result.HTTP_RESPONSE_DURATION.score > 0) { durationClass = 'medium'; }
|
if (item.result.HTTP_RESPONSE_DURATION.score > 0) { durationClass = 'medium'; }
|
||||||
if (item.result.HTTP_RESPONSE_DURATION.score > 0.5) { durationClass = 'good'; }
|
if (item.result.HTTP_RESPONSE_DURATION.score > 0.5) { durationClass = 'good'; }
|
||||||
row.append('<td class="text '+ durationClass +' text-center" data-order="' + item.result.HTTP_RESPONSE_DURATION.value + '">' + item.result.HTTP_RESPONSE_DURATION.value + ' ms</td>');
|
row.append('<td class="text '+ durationClass +' text-center" data-order="' + item.result.HTTP_RESPONSE_DURATION.value + '"><span class="tt" title="Dauer, bis der Server die Seitenanfrage beantwortet. Unter 100 ms ist sehr gut. Unter 1 Sekunde ist okay.">' + item.result.HTTP_RESPONSE_DURATION.value + ' ms</span></td>');
|
||||||
|
|
||||||
// FAVICON
|
// FAVICON
|
||||||
var icon = item.result.FAVICON.value && (item.details.icons[0] != null);
|
var icon = item.result.FAVICON.value && (item.details.icons[0] != null);
|
||||||
var iconFile = (icon && (item.details.icons[0] != null) ? item.details.icons[0] : '');
|
var iconFile = (icon && (item.details.icons[0] != null) ? item.details.icons[0] : '');
|
||||||
row.append('<td class="' + (icon ? 'good' : 'bad') + ' text-center" data-order="'+ iconFile +'">' + (icon ? ('<img src="/siteicons/' + iconFile + '" class="siteicon" title="'+ iconFile +'">') : no) + '</td>');
|
var noicon = '<span class="tt" title="Diese Site hat kein Icon.">'+ no +'</span>'
|
||||||
|
var icontag = (icon ? ('<img src="/siteicons/' + iconFile + '" class="siteicon tt" title="Die Site verweist auf das gezeigte Icon.">') : noicon);
|
||||||
|
row.append('<td class="' + (icon ? 'good' : 'bad') + ' text-center" data-order="'+ iconFile +'">' + icontag + '</td>');
|
||||||
|
|
||||||
// HTTPS
|
// HTTPS
|
||||||
var hasHTTPS = item.result.HTTPS.value;
|
var hasHTTPS = item.result.HTTPS.value;
|
||||||
row.append('<td class="'+ (hasHTTPS ? 'good' : 'bad') +' text-center" data-order="'+ (hasHTTPS ? '1' : '0') +'">' + (hasHTTPS ? yes : no) + '</td>');
|
var hasHTTPScontent = (hasHTTPS ? '<span class="tt" title="Die Site ist über HTTPS erreichbar">' + yes + '</span>' : '<span class="tt" title="Die Site ist nicht über HTTPS erreichbar (-2 Punkte).">' + no + '</span>')
|
||||||
|
row.append('<td class="'+ (hasHTTPS ? 'good' : 'bad') +' text-center" data-order="'+ (hasHTTPS ? '1' : '0') +'">' + hasHTTPScontent + '</td>');
|
||||||
|
|
||||||
// WWW_OPTIONAL
|
// WWW_OPTIONAL
|
||||||
var wwwOptional = item.result.WWW_OPTIONAL.value;
|
var wwwOptional = item.result.WWW_OPTIONAL.value;
|
||||||
row.append('<td class="'+ (wwwOptional ? 'good' : 'bad') +' text-center" data-order="'+ (wwwOptional ? '1' : '0') +'">' + (wwwOptional ? yes : no) + '</td>');
|
var wwwOptionalcontent = (wwwOptional ? '<span class="tt" title="Die Site ist sowohl mit als auch ohne www. in der URL aufrufbar">' + yes + '</span>' : '<span class="tt" title="Die Site ist nicht sowohl mit als auch ohne www. in der URL aufrufbar.">' + no + '</span>')
|
||||||
|
row.append('<td class="'+ (wwwOptional ? 'good' : 'bad') +' text-center" data-order="'+ (wwwOptional ? '1' : '0') +'">' + wwwOptionalcontent + '</td>');
|
||||||
|
|
||||||
// one canonical URL
|
// one canonical URL
|
||||||
var canonical = item.result.CANONICAL_URL.value;
|
var canonical = item.result.CANONICAL_URL.value;
|
||||||
row.append('<td class="'+ (canonical ? 'good' : 'bad') +' text-center" data-order="'+ (canonical ? '1' : '0') +'">' + (canonical ? yes : no) + '</td>');
|
var canonicalContent = (canonical ? '<span class="tt" title="Verschiedene URL-Varianten werden auf eine einzige umgeleitet">' + yes + '</span>' : '<span class="tt" title="Verschiedene URL-Varianten werden nicht auf eine einzige umgeleitet.">' + no + '</span>');
|
||||||
|
row.append('<td class="'+ (canonical ? 'good' : 'bad') +' text-center" data-order="'+ (canonical ? '1' : '0') +'">' + canonicalContent + '</td>');
|
||||||
|
|
||||||
var responsive = item.result.RESPONSIVE.value;
|
var responsive = item.result.RESPONSIVE.value;
|
||||||
row.append('<td class="'+ (responsive ? 'good' : 'bad') +' text-center" data-order="'+ (responsive ? '1' : '0') +'">' + (responsive ? yes : no) + '</td>');
|
var responsiveContent = (responsive ? '<span class="tt" title="Die Site funktioniert anscheinend auch auf mobilen Geräten">' + yes + '</span>' : '<span class="tt" title="Es scheint, als funktioniert die Site nicht auf mobilen Geräten.">' + no + '</span>');
|
||||||
|
row.append('<td class="'+ (responsive ? 'good' : 'bad') +' text-center" data-order="'+ (responsive ? '1' : '0') +'">' + responsiveContent + '</td>');
|
||||||
|
|
||||||
// feeds
|
// feeds
|
||||||
var feeds = item.result.FEEDS.value;
|
var feeds = item.result.FEEDS.value;
|
||||||
row.append('<td class="'+ (feeds ? 'good' : 'bad') +' text-center" data-order="'+ (feeds ? '1' : '0') +'">' + (feeds ? yes : no) + '</td>');
|
var feedsContent = (feeds ? '<span class="tt" title="Die Site verweit auf mind. einen RSS-/Atom-Feed.">' + yes + '</span>' : '<span class="tt" title="Kein Link rel=alternate auf einen RSS-/Atom-Feed gefunden.">' + no + '</span>');
|
||||||
|
row.append('<td class="'+ (feeds ? 'good' : 'bad') +' text-center" data-order="'+ (feeds ? '1' : '0') +'">' + feedsContent + '</td>');
|
||||||
|
|
||||||
// screenshots
|
// screenshots
|
||||||
var screenshot = false;
|
var screenshot = false;
|
||||||
|
@ -97,11 +107,12 @@ $(function(){
|
||||||
if (typeof screenshots[item.details.canonical_urls[0]] !== 'undefined') {
|
if (typeof screenshots[item.details.canonical_urls[0]] !== 'undefined') {
|
||||||
var surl = 'http://green-spider-screenshots.sendung.de/320x640/'+screenshots[item.details.canonical_urls[0]];
|
var surl = 'http://green-spider-screenshots.sendung.de/320x640/'+screenshots[item.details.canonical_urls[0]];
|
||||||
var lurl = 'http://green-spider-screenshots.sendung.de/1500x1500/'+screenshots[item.details.canonical_urls[0]];
|
var lurl = 'http://green-spider-screenshots.sendung.de/1500x1500/'+screenshots[item.details.canonical_urls[0]];
|
||||||
screenshot = '<a class="screenshot" href="'+ surl +'" target="_blank" title="Mobile"><i class="icon ion-md-phone-portrait"></i></a>';
|
screenshot = '<a class="screenshot tt" href="'+ surl +'" target="_blank" title="Screenshot für Smartphone-Ansicht anzeigen"><i class="icon ion-md-phone-portrait"></i></a>';
|
||||||
screenshot += '<a class="screenshot" href="'+ lurl +'" target="_blank" title="Desktop"><i class="icon ion-md-desktop"></i></a>';
|
screenshot += '<a class="screenshot tt" href="'+ lurl +'" target="_blank" title="Screenshot für Desktop-Ansicht anzeigen"><i class="icon ion-md-desktop"></i></a>';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
row.append('<td class="'+ (screenshot ? 'good' : 'bad') +' text-center" data-order="'+ (screenshot ? '1' : '0') +'">' + (screenshot ? screenshot : no) + '</td>');
|
var noscreenshot = '<span class="tt" title="Für diese Site liegen aktuell keine Screenshots vor (führt nicht zu Punktabzug).">' + no + '</span>';
|
||||||
|
row.append('<td class="'+ (screenshot ? 'good' : 'bad') +' text-center" data-order="'+ (screenshot ? '1' : '0') +'">' + (screenshot ? screenshot : noscreenshot) + '</td>');
|
||||||
|
|
||||||
// cms
|
// cms
|
||||||
row.append('<td class="text text-center">' + (item.details.cms ? item.details.cms : '') + '</td>');
|
row.append('<td class="text text-center">' + (item.details.cms ? item.details.cms : '') + '</td>');
|
||||||
|
@ -109,7 +120,7 @@ $(function(){
|
||||||
tbody.append(row);
|
tbody.append(row);
|
||||||
});
|
});
|
||||||
|
|
||||||
// enable data table funcionts (sorting)
|
// enable data table functions (sorting)
|
||||||
table = $('table.table').DataTable({
|
table = $('table.table').DataTable({
|
||||||
order: [[0, "asc"]],
|
order: [[0, "asc"]],
|
||||||
paging: false,
|
paging: false,
|
||||||
|
@ -119,6 +130,11 @@ $(function(){
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// activate tooltips
|
||||||
|
$('.tt').tooltipster({
|
||||||
|
animationDuration: 100
|
||||||
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue