Add UAParser and Update Uninstall (#4)

* Add UAParser and Update Uninstall * Cleanup * Update
cssnr · Jun 17, 2024 · a3016b6 · a3016b6
1 parent 62f4822
commit a3016b6
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 63 deletions.
diff --git a/src/_config.yml b/src/_config.yml
@@ -1,9 +1,10 @@
 timezone: America/Los_Angeles
 encoding: utf-8
 
+url: https://open-links-in-new-tab.cssnr.com
+
 author: Shane
 site_name: Open Links in New Tab
-site_url: https://open-links-in-new-tab.cssnr.com
 
 github_name: cssnr/open-links-in-new-tab
 github_url: https://github.com/cssnr/open-links-in-new-tab

diff --git a/src/_includes/alerts.html b/src/_includes/alerts.html
@@ -1,21 +1,26 @@
 
-<div id="alerts" class="alert alert-warning mt-2 d-none" role="alert" data-nosnippet>
-    <h5>Known Issues:</h5>
-    {% comment %}<ul>{% endcomment %}
+<div id="alerts" class="alert alert-warning p-2 mb-2 d-none" role="alert" data-nosnippet>
+    <h5>Old Version Warning</h5>
+    <p class="mb-1">
+        You were using an old version of the extension, which may have missing features or bugs.
+        You should try updating to the latest version of the web extension
+        for <a href="{{ site.chrome_url }}" target="_blank" rel="noopener">Chrome</a>
+        or <a href="{{ site.firefox_url }}" target="_blank" rel="noopener">Firefox</a>.
+    </p>
+    {% comment %}<h5>Known Issues:</h5>{% endcomment %}
+    {% comment %}<ul class="mb-1">{% endcomment %}
         {% comment %}<li>{% endcomment %}
             {% comment %}Saving Options on the Options Page does not work prior to 0.6.1.{% endcomment %}
             {% comment %}<br>{% endcomment %}
             {% comment %}<strong>Work Around:</strong> Set your options in the Popup.{% endcomment %}
         {% comment %}</li>{% endcomment %}
-    {% comment %}</ul>{% endcomment %}
-    {% comment %}<ul>{% endcomment %}
         {% comment %}<li>{% endcomment %}
             {% comment %}Opening Links from the Parse Links Option in the Popup does not work prior to 0.6.1.{% endcomment %}
             {% comment %}<br>{% endcomment %}
             {% comment %}<strong>Work Around:</strong> Use Open Lines or Parse URLs then Open from Links Results.{% endcomment %}
         {% comment %}</li>{% endcomment %}
     {% comment %}</ul>{% endcomment %}
-    {% comment %}<p class="mb-0 small">{% endcomment %}
+    {% comment %}<p class="mb-1 small">{% endcomment %}
         {% comment %}Chrome Web Store Publishing can take several days (and sometimes weeks) to complete.{% endcomment %}
         {% comment %}These issues have already been fixed; however, are still awaiting approval from Google.{% endcomment %}
     {% comment %}</p>{% endcomment %}

diff --git a/src/_layouts/default.html b/src/_layouts/default.html
@@ -42,8 +42,8 @@
 <header>
     <nav class="navbar navbar-expand-sm">
         <div class="container-fluid">
-            <a class="navbar-brand" href="/">
-                <img src="{{ "/media/logo.png" | relative_url }}" width="30" height="30" alt="logo"></a>
+            <a class="me-2" href="/">
+                <img src="{{ "/media/logo.png" | relative_url }}" width="24" height="24" alt="logo" class="my-auto"></a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                     data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                     aria-expanded="false" aria-label="Toggle navigation">
@@ -73,24 +73,26 @@
 <footer class="footer mt-auto p-2 flex-shrink-0">
     <div class="container-fluid">
         <div class="row">
-            <div class="col-12 col-sm-4">
-                <p><a class="link-body-emphasis text-decoration-none" href="{{ site.github_url }}" target="_blank" rel="noopener">
-                        <i class="fab fa-github"></i> {{ site.site_name }}</a></p>
+            <div class="col-12 col-sm-5">
+                <a class="link-body-emphasis text-decoration-none" href="{{ site.github_url }}" target="_blank" rel="noopener">
+                        <i class="fab fa-github"></i> {{ site.site_name }}</a>
             </div>
-            <div class="col-12 col-sm-8 text-sm-end">
-                <ul class="list-inline">
+            <div class="col-12 col-sm-7 text-sm-end">
+                <nav aria-label="Secondary Navigation">
+                <ol class="list-inline mb-1">
                     <li class="list-inline-item">
                         <a class="link-body-emphasis text-decoration-none {% if page.title == 'Home' %}fw-bold{% endif %}" href="{{ "/" | relative_url }}">
                             Home</a></li>
-                    <li class="list-inline-item">|</li>
+                    {% comment %}<li class="list-inline-item">|</li>{% endcomment %}
                     <li class="list-inline-item">
                         <a class="link-body-emphasis text-decoration-none {% if page.title == 'Docs' %}fw-bold{% endif %}" href="{{ "/docs/" | relative_url }}">
                             Docs</a></li>
-                    <li class="list-inline-item">|</li>
+                    {% comment %}<li class="list-inline-item">|</li>{% endcomment %}
                     <li class="list-inline-item">
                         <a class="link-body-emphasis text-decoration-none" href="{{ "/screenshots/" | relative_url }}" target="_blank">
                             Screen Shots <i class="fa-solid fa-arrow-up-right-from-square"></i></a></li>
-                </ul>
+                </ol>
+                </nav>
             </div>
         </div>
     </div>

diff --git a/src/css/main.css b/src/css/main.css
@@ -12,3 +12,8 @@
     max-width: 260px;
     width: 100%;
 }
+
+footer li + li::before {
+    content: '| ';
+    margin-right: 8px;
+}
diff --git a/src/css/uninstall.css b/src/css/uninstall.css
@@ -1,35 +1,27 @@
 body {
-    margin: 0;
-    /*background: #011467;*/
+    background: url('https://picsum.photos/1920/1080') no-repeat center fixed;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
 }
 
-video {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    min-width: 100%;
-    min-height: 100%;
-    width: auto;
-    height: auto;
-    z-index: -100;
-    transform: translateX(-50%) translateY(-50%);
-    filter: blur(10px);
-    /*background: url('/media/loop1.jpg') no-repeat;*/
-    background-size: cover;
-    transition: 1s opacity;
+#inputCounter {
+    margin-top: -25px;
+    margin-right: 15px;
 }
 
 #login-outer {
     border-radius: 15px;
-    background: rgba(0 0 0 / 30%);
+    background: rgba(0 0 0 / 50%);
     filter: drop-shadow(15px 15px 12px #000000);
 }
 
 .form-control {
-    background: rgba(0 0 0 / 30%);
+    background: rgba(0 0 0 / 70%);
 }
 
-#inputCounter {
-    margin-top: -25px;
-    margin-right: 15px;
+.navbar,
+.footer {
+    background: rgba(0 0 0 / 70%) !important;
 }
diff --git a/src/js/uninstall.js b/src/js/uninstall.js
@@ -3,6 +3,7 @@
 const searchParams = new URLSearchParams(window.location.search)
 const version = searchParams.get('version') || 'unknown'
 
+const noAlertVersion = '0.2.0'
 const uninstallMessage = `Open Links in New Tab Uninstall, Version: **${version}**`
 const discordUsername = 'Open In Tab'
 const discordAvatar = 'https://open-links-in-new-tab.cssnr.com/media/logo.png'
@@ -12,28 +13,39 @@ const uninstallResponse = document.getElementById('uninstall-response')
 const inputCount = document.getElementById('input-count')
 const submitBtn = document.getElementById('submit-btn')
 const errorAlert = document.getElementById('error-alert')
+const notWorkingExtra = document.getElementById('not-working-extra')
 
+uninstallForm.addEventListener('change', formChange)
 uninstallForm.addEventListener('submit', formSubmit)
+
 uninstallResponse.addEventListener('input', function () {
     inputCount.textContent = this.value.length
 })
 
-// document.addEventListener('DOMContentLoaded', function (event) {
-//     const ver = searchParams.get('version')
-//     const ok = '0.6.1'
-//     if (ver) {
-//         // const div = document.getElementById('version')
-//         // div.textContent = `v${ver}`
-//         const res = ver.localeCompare(ok, undefined, {
-//             numeric: true,
-//             sensitivity: 'base',
-//         })
-//         if (res === -1) {
-//             console.debug(`Show Warning for Version: ${version}`)
-//             document.getElementById('alerts')?.classList.remove('d-none')
-//         }
-//     }
-// })
+document.addEventListener('DOMContentLoaded', function (event) {
+    const ver = searchParams.get('version')
+    if (ver) {
+        const res = ver.localeCompare(noAlertVersion, undefined, {
+            numeric: true,
+            sensitivity: 'base',
+        })
+        if (res === -1) {
+            console.debug(`Show Warning for Version: ${version}`)
+            document.getElementById('alerts')?.classList.remove('d-none')
+        }
+    }
+})
+
+function formChange(event) {
+    console.debug('formChange:', event)
+    if (event.target.id === 'not-working') {
+        if (event.target.checked) {
+            notWorkingExtra.classList.remove('d-none')
+        } else {
+            notWorkingExtra.classList.add('d-none')
+        }
+    }
+}
 
 async function formSubmit(event) {
     console.debug('formSubmit:', event)
@@ -48,9 +60,13 @@ async function formSubmit(event) {
         return console.warn('No Data to Send.')
     }
     submitBtn.classList.add('disabled')
+
+    const parser = new UAParser()
+    const res = parser.getResult()
     const lines = [
         uninstallMessage,
-        `\`${navigator.userAgent}\``,
+        `**Browser**: ${res.browser.name} ${res.browser.version} (${res.engine.name})`,
+        `**System**: ${res.os.name} ${res.os.version} (${res.cpu.architecture})`,
         `${getBoolIcon(notUsed)} Not Used`,
         `${getBoolIcon(notExpected)} Not as Expected`,
         `${getBoolIcon(notWorking)} Not Working`,
@@ -59,12 +75,13 @@ async function formSubmit(event) {
         lines.push(`\`\`\`\n${feedbackText}\n\`\`\``)
     }
     // console.debug('lines:', lines)
+
     const response = await sendDiscord(url, lines.join('\n'))
     console.debug('response:', response)
     submitBtn.classList.remove('disabled')
     if (response.status >= 200 && response.status <= 299) {
         console.debug('Success')
-        window.location = '/'
+        window.location = '/docs/'
     } else {
         console.warn(`Error ${response.status}`, response)
         errorAlert.textContent = `Error ${response.status}: ${response.statusText}`
@@ -74,6 +91,7 @@ async function formSubmit(event) {
 
 async function sendDiscord(url, content) {
     // console.debug('sendDiscord', url, content)
+    // console.debug('content.length', content.length)
     const body = {
         username: discordUsername,
         avatar_url: discordAvatar,

diff --git a/src/media/loop1.webm b/src/media/loop1.webm
diff --git a/src/uninstall.html b/src/uninstall.html
@@ -7,10 +7,6 @@
 description: Uninstall Feedback
 ---
 
-<video id="bgvid" playsinline autoplay muted loop>
-    <source src="{{ "/media/loop1.webm" | relative_url }}" type="video/mp4" id="bgvidsrc">
-</video>
-
 <div class="d-flex flex-column h-100 align-items-center">
     <div class="d-flex flex-grow-1 justify-content-center align-items-center w-100">
         <div class="row flex-grow-1">
@@ -25,6 +21,7 @@ <h1 class="align-middle mb-0">{{ site.site_name }}</h1>
                         All <a href="{{ site.github_url }}/issues" target="_blank" rel="noopener">bugs that get reported</a> will be fixed!
                         <a href="{{ site.github_url }}/discussions/categories/feature-requests" target="_blank" rel="noopener">Feature Requests</a> are also greatly appreciated...
                     </p>
+                    {% include alerts.html %}
                     <form id="uninstall-form">
                         <input type="hidden" value="{{ site.discord_webhook }}" id="discord-webhook" hidden="hidden">
                         <div class="form-check form-switch fs-5">
@@ -39,21 +36,24 @@ <h1 class="align-middle mb-0">{{ site.site_name }}</h1>
                             <input class="form-check-input" type="checkbox" role="switch" id="not-working">
                             <label class="form-check-label text-danger-emphasis" for="not-working">Not Working or Broken</label>
                         </div>
+                        <div id="not-working-extra" class="alert alert-warning text-center p-2 mt-2 mb-0 mx-2 d-none">
+                            Please provide a <strong>link to the site</strong> that is not functioning and we will investigate.
+                        </div>
                         <div class="my-2">
                             <label for="uninstall-response" class="form-label visually-hidden">Uninstall Feedback</label>
-                            <textarea class="form-control" id="uninstall-response" rows="4" maxlength="500"
+                            <textarea class="form-control" id="uninstall-response" rows="4" maxlength="1000"
                                       placeholder="Optional Feedback. Bugs, Missing Features, etc..." autofocus></textarea>
-                            <span id="inputCounter" class="float-end label label-default"><span id="input-count">0</span> / 500</span>
+                            <span id="inputCounter" class="float-end label label-default"><span id="input-count">0</span> / 1000</span>
                         </div>
                         <button id="submit-btn" class="btn btn-success w-100" type="submit">
                             Submit Feedback <i class="fa-regular fa-comment-dots ms-2"></i></button>
                     </form>
                     <div id="error-alert" class="alert alert-danger alert-dismissible fade show text-center mt-3" role="alert" style="display: none;"></div>
-                    {% include alerts.html %}
                 </div>
             </div>
         </div>
     </div>
 </div>
 
+<script src="https://cdnjs.cloudflare.com/ajax/libs/UAParser.js/1.0.37/ua-parser.min.js" integrity="sha512-LAchvH0Y4sxYM1ouOaqHQ6WbSXvOgkioPaiyW0oPOFNNMNfpsBEpvzYmsxgDf8pQM/fMaMdxYP/nFenquTAkdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script type="text/javascript" src="{{ "/js/uninstall.js" | relative_url }}"></script>