NB-Public
/
green-spider
mirror of https://github.com/netzbegruenung/green-spider.git
14
0
Fork 0
Code Issues 2 Projects Releases Wiki Activity

Add and apply tooltip

Browse Source
pull/51/head
Marian Steinbach 4 years ago
parent f4ba6bfd06
commit 2034345d97
6 changed files with 74 additions and 58 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      Makefile
  2. 38
      docs/bundle.js
  3. 1
      docs/css/tooltipster.bundle.min.css
  4. 18
      docs/index.html
  5. 20
      webapp/dist/index.html
  6. 54
      webapp/src/index.js

1
Makefile
Unescape View File

@ -28,6 +28,7 @@ webapp/node_modules:
webapp: webapp/node_modules
cd webapp && npx webpack --config webpack.config.js
cp -r webapp/dist/* ./docs/
cp webapp/node_modules/tooltipster/dist/css/tooltipster.bundle.min.css ./docs/css/
rm webapp/dist/bundle.js
serve-webapp:

38
docs/bundle.js
View File

File diff suppressed because one or more lines are too long

1
docs/css/tooltipster.bundle.min.css vendored
View File

File diff suppressed because one or more lines are too long

18
docs/index.html
Unescape View File

@ -5,9 +5,10 @@
<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>
<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" type="text/css" href="https://netzbegruenung.github.io/webfonts/style.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.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="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">
@ -42,11 +43,6 @@
font-size: 0.8rem;
}
.icon {
width: 32px;
height: 32px;
}
a.screenshot {
display: inline-block;
margin-left: 3px;
@ -58,6 +54,8 @@
}
.icon {
width: 32px;
height: 32px;
font-size: 24px;
}
.screenshot .icon {
@ -98,9 +96,9 @@
<th scope="col">Erreichbar</th>
<th scope="col">Antwortzeit</th>
<th scope="col">Icon</th>
<th scope="col"><abbr title="Site nutzt HTTP-Verschlüsselung">HTTPS</abbr></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"><abbr title="URL-Varianten leiten auf eine einzige Startseiten-URL weiter">Kanonische URL</abbr></th>
<th scope="col">HTTPS</th>
<th scope="col">www. optional</th>
<th scope="col">Kanonische URL</th>
<th scope="col">Responsive</th>
<th scope="col">Feed</th>
<th scope="col">Screenshots</th>

20
webapp/dist/index.html vendored
Unescape View File

@ -5,9 +5,12 @@
<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>
<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" type="text/css" href="https://netzbegruenung.github.io/webfonts/style.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.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="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">
h5 {
@ -40,11 +43,6 @@
font-size: 0.8rem;
}
.icon {
width: 32px;
height: 32px;
}
a.screenshot {
display: inline-block;
margin-left: 3px;
@ -56,6 +54,8 @@
}
.icon {
width: 32px;
height: 32px;
font-size: 24px;
}
.screenshot .icon {
@ -96,9 +96,9 @@
<th scope="col">Erreichbar</th>
<th scope="col">Antwortzeit</th>
<th scope="col">Icon</th>
<th scope="col"><abbr title="Site nutzt HTTP-Verschlüsselung">HTTPS</abbr></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"><abbr title="URL-Varianten leiten auf eine einzige Startseiten-URL weiter">Kanonische URL</abbr></th>
<th scope="col">HTTPS</th>
<th scope="col">www. optional</th>
<th scope="col">Kanonische URL</th>
<th scope="col">Responsive</th>
<th scope="col">Feed</th>
<th scope="col">Screenshots</th>

54
webapp/src/index.js
Unescape View File

@ -1,10 +1,9 @@
import _ from 'lodash';
import $ from 'jquery';
import 'bootstrap';
import 'popper.js';
import punycode from 'punycode';
import 'datatables.net';
import LazyLoad from 'vanilla-lazyload';
import 'tooltipster';
$(function(){
@ -37,7 +36,7 @@ $(function(){
} else if (item.meta.level === 'DE:LANDESVERBAND') {
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
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>');
// 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
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
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
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
var durationClass = 'bad';
if (item.result.HTTP_RESPONSE_DURATION.score > 0) { durationClass = 'medium'; }
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
var icon = item.result.FAVICON.value && (item.details.icons[0] != null);
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
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
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
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;
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
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
var screenshot = false;
@ -97,11 +107,12 @@ $(function(){
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 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" href="'+ lurl +'" target="_blank" title="Desktop"><i class="icon ion-md-desktop"></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 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
row.append('<td class="text text-center">' + (item.details.cms ? item.details.cms : '') + '</td>');
@ -109,7 +120,7 @@ $(function(){
tbody.append(row);
});
// enable data table funcionts (sorting)
// enable data table functions (sorting)
table = $('table.table').DataTable({
order: [[0, "asc"]],
paging: false,
@ -119,6 +130,11 @@ $(function(){
}
});
// activate tooltips
$('.tt').tooltipster({
animationDuration: 100
});
});
});

Write Preview
Loading…
Cancel
Save