Tabs in whois

public/assets/2021whois.js

@@ -2,7 +2,8 @@
     var locked = false,
         input = document.getElementById('lookup-input'),
         submit = document.getElementById('lookup-submit'),
-        result = document.getElementById('lookup-result');
+        result = document.getElementById('lookup-result'),
+        tabs = document.getElementById('lookup-tabs');
 
     var lock = function() {
         if(locked)
@@ -32,40 +33,44 @@
         xhr.addEventListener('load', function() {
             var resp = JSON.parse(xhr.responseText);
 
-            if(resp.error) {
+            if(resp.error)
                 alert(resp.text);
-            } else {
-                var lastWhois = resp.result.responses[resp.result.responses.length - 1],
-                    isIpAddr = false;
 
-                for(var i = 0; i < lastWhois.lines.length; ++i) {
+            tabs.innerHTML = '';
-                    var line = lastWhois.lines[i];
+            if(resp.result && resp.result.responses) {
-                    if(line.substring(0, 4) === 'inet') {
-                        isIpAddr = true;
-                        break;
-                    }
-                }
-
-                var text = '';
-
-                if(isIpAddr) {
-                    text += 'RESULTS FOUND: ' + resp.result.responses.length.toString() + "\r\n";
                 for(var i = 0; i < resp.result.responses.length; ++i) {
-                        var response = resp.result.responses[i];
+                    (function(response) {
-                        text += "\r\n-------------\r\n";
+                        var tab = document.createElement('a'),
-                        text += 'Lookup results for ' + resp.result.target + ' from ' + response.server + ":\r\n\r\n";
+                            tabHeader = document.createElement('div'),
-                        text += response.lines.join("\r\n").trim() + "\r\n";
+                            tabServer = document.createElement('div');
-                    }
+
-                } else {
+                        tab.href = 'javascript:;';
-                    for(var i = 0; i < resp.result.responses.length; ++i) {
+                        tab.className = 'whois-result-tab';
-                        var response = resp.result.responses[i];
+                        if(i === 0) tab.className += ' whois-result-tab-active';
-                        text += resp.result.target + ' domain lookup result from ' + response.server + "\r\n\r\n";
+
-                        text += response.lines.join("\r\n").trim() + "\r\n\r\n";
+                        tab.onclick = function() {
+                            var active = document.querySelector('.whois-result-tab-active');
+                            if(active) active.classList.remove('whois-result-tab-active');
+                            tab.classList.add('whois-result-tab-active');
+                            result.textContent = response.lines.join("\r\n").trim();
+                        };
+
+                        tabHeader.className = 'whois-result-tab-header';
+                        tabHeader.textContent = i === 0 ? 'Result' : ('Hop #' + (resp.result.responses.length - i).toString());
+
+                        tabServer.className = 'whois-result-tab-server';
+                        tabServer.textContent = response.server;
+                        console.log(response);
+
+                        tab.appendChild(tabHeader);
+                        tab.appendChild(tabServer);
+                        tabs.appendChild(tab);
+                    })(resp.result.responses[i]);
                 }
             }
 
-                result.textContent = text;
+            if(tabs.firstChild)
-            }
+                tabs.firstChild.click();
 
             unlock();
         });

public/assets/2022.css

@@ -0,0 +1,12 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    position: relative;
+    outline-style: none;
+}
+
+html, body {
+    width: 100%;
+    height: 100%;
+}

public/css/2021.css

@@ -1182,3 +1182,43 @@ body {
 .whois-locked .whois-result {
     opacity: .5;
 }
+
+.whois-result-tabs {
+    display: flex;
+    margin: 0 5px;
+}
+.whois-locked .whois-result-tabs {
+    opacity: .5;
+}
+.whois-result-tab {
+    margin: 0 5px;
+    padding: 6px 10px;
+    font-size: 14px;
+    transition: opacity .2s;
+    background-color: #202020;
+    border-radius: 5px;
+    box-shadow: 0 1px 5px #222;
+    opacity: .5;
+    cursor: pointer;
+    display: block;
+    color: #fff;
+    text-decoration: none;
+}
+.whois-result-tab:hover,
+.whois-result-tab:focus {
+    opacity: .7;
+}
+.whois-result-tab-active {
+    opacity: 1 !important;
+}
+.whois-result-tab-header {
+    font-size: 1.3em;
+    line-height: 1.2em;
+}
+.whois-result-tab-server {
+    font-size: .9em;
+    line-height: 1.2em;
+    color: #888;
+    white-space: pre-wrap;
+    font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+}

public/userscripts/index.php

@@ -1,59 +0,0 @@
-<?php
-$userscripts = [
-    [
-        'file' => 'remove-trending-tab.user.js',
-        'name' => 'Remove the Youtube Trending Tab',
-    ],
-    [
-        'file' => 'skip-youtube-home.user.js',
-        'name' => 'Skip the Youtube homepage and go straight to subscriptions',
-    ],
-    [
-        'file' => 'mpvfriend.user.js',
-        'name' => 'Open youtube links in mpv',
-    ],
-];
-
-$userstyles = [
-    [
-        'file' => 'sock-emote-overflow-fix.user.css',
-        'name' => 'Fix emoticon overflow in sock chat client',
-    ],
-    [
-        'file' => 'nabucco-cleanup.user.css',
-        'name' => 'Cleaner nabucco',
-    ],
-];
-?>
-<h1>Scripts</h1>
-You'll need something like <a href="https://addons.mozilla.org/en-GB/firefox/addon/greasemonkey/" class="link">GreaseMonkey</a> for this.<br>
-<?php
-
-echo '<ul style="margin-left: 1em;">';
-
-foreach($userscripts as $us) {
-    echo <<<HTML
-    <li><a href="{$us['file']}" class="link">
-        {$us['name']}
-    </a></li>
-HTML;
-}
-
-echo '</ul>';
-?>
-<h1>Styles</h1>
-You'll need something like <a href="https://addons.mozilla.org/en-GB/firefox/addon/styl-us/" class="link">Stylus</a> for this.<br>
-<?php
-echo '<ul style="margin-left: 1em;">';
-
-foreach($userstyles as $us) {
-    echo <<<HTML
-    <li><a href="{$us['file']}" class="link">
-        {$us['name']}
-    </a></li>
-HTML;
-}
-
-echo '</ul>';
-?>
-<div style="font-size: .6em;">i can't be bothered to style this page</div>

public/userscripts/nabucco-cleanup.user.css

@@ -1,28 +0,0 @@
-body {
-    background-image: initial;
-}
-
-#logo {
-    width: 100%;
-}
-
-#logo img {
-    display: none;
-}
-
-#logo a {
-    display: block;
-    margin: 15px auto 0;
-    width: 120px;
-    height: 120px;
-    background-image: url('https://flashii.net/user-assets.php?u=9&m=avatar');
-    background-size: 120px;
-}
-
-#center {
-    font-size: 0.1em;
-}
-
-#err {
-    font-size: 10em;
-}

public/userscripts/remove-trending-tab.user.js

@@ -1,18 +0,0 @@
-// ==UserScript==
-// @name     Remove Trending tab
-// @version  7
-// @grant    none
-// @include  https://www.youtube.com/*
-// ==/UserScript==
-
-window.addEventListener('load', function() {
-    var checkInterval = setInterval(function() {
-        var buttons = Array.from(document.querySelectorAll('[href="/feed/explore"], [href="/feed/trending"], [href="/channel/UCqVDpXKLmKeBU_yyt_QkItQ"]'));
-      
-        if(buttons.length) {
-          	while(buttons.length)
-                buttons.pop().parentElement.remove();
-            clearInterval(checkInterval);
-      	}
-    }, 100);
-});

public/userscripts/skip-youtube-home.user.js

@@ -1,9 +0,0 @@
-// ==UserScript==
-// @name     Skip YouTube home.
-// @version  9001
-// @grant    none
-// @include	 https://www.youtube.com/
-// @run-at   document-start
-// ==/UserScript==
-
-location.assign('/feed/subscriptions');

public/userscripts/sock-emote-overflow-fix.user.css

@@ -1,7 +0,0 @@
-#emotes {
-    max-height: 30px;
-    max-width: 600px;
-    overflow: auto;
-    background-color: #212121;
-    border: 1px solid #808080;
-}

tpl/whois.php

@@ -15,7 +15,12 @@ $self->block('container', function($self) {
             <input class="whois-lookup-form-submit" type="submit" value="Look up" id="lookup-submit"/>
         </form>
 
-        <div class="whois-result" id="lookup-result"></div>
+        <div class="whois-result-container">
+            <div class="whois-result-tabs" id="lookup-tabs"></div>
+            <div class="whois-result" id="lookup-result">
+                <noscript>You need JavaScript in order to use this page.</noscript>
+            </div>
+        </div>
     </div>
 
     <script type="text/javascript" src="/assets/2021whois.js"></script>