code refactoring

2026-02-03 13:53:23 +00:00 · 2019-02-17 18:07:54 +05:30
parent 780b2ca674
commit 1806e90e8a
4 changed files with 70 additions and 52 deletions
--- a/README.md
+++ b/README.md
@@ -75,6 +75,7 @@ View the Contributing guidelines [here](CONTRIBUTING.md).
 If you like my work, you can 

 <a href="https://www.buymeacoffee.com/abhijithvijayan" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/purple_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>
+<a href="https://www.patreon.com/join/abhijithvijayan?" target="_blank"><img src="https://c5.patreon.com/external/logo/become_a_patron_button.png" alt="Become A Patron" style="height: 37px !important;width: auto !important; margin-left: 10px;" ></a>

 ## Licence
 Code released under the [MIT License](LICENSE).
--- a/src/scripts/history.js
+++ b/src/scripts/history.js
@@ -1,6 +1,13 @@
 import browser from 'webextension-polyfill';
 import QRCode from 'qrcode';

+
+const copy__alert = document.getElementById('flash_copy'),
+    qrcode__child = document.getElementById('qrcode__template'),
+    clear__btn = document.getElementById('table__clearAll--btn'),
+    main__element = document.getElementById('delegation__element');
+
+
 // on page load
 document.addEventListener('DOMContentLoaded', () => {
    let updatedHTML;
@@ -19,7 +26,7 @@ document.addEventListener('DOMContentLoaded', () => {
                        updatedHTML = updatedHTML.replace(/%num%/g, ++pass);
                        updatedHTML = updatedHTML.replace(/%shortLink%/g, el.shortUrl);
                        // inject to DOM
-                        document.getElementById('delegation__element').insertAdjacentHTML('afterbegin', updatedHTML);
+                        main__element.insertAdjacentHTML('afterbegin', updatedHTML);
                    }
                }
            } else {
@@ -32,11 +39,10 @@ document.addEventListener('DOMContentLoaded', () => {


 // Clear all history
-document.getElementById('table__clearAll--btn').addEventListener('click', () => {
+clear__btn.addEventListener('click', () => {
    browser.storage.local.set({ URL_array: [] })
        .then(() => {
-            const el = document.getElementById('delegation__element');
-            el.parentNode.removeChild(el);
+            main__element.parentNode.removeChild(main__element);
        });
 });

@@ -45,8 +51,7 @@ function buttonAction(type, id) {
    function flashCopy(flashHTML) {
        document.getElementById(`table__shortened-${id}`).insertAdjacentHTML('afterbegin', flashHTML);
        setTimeout(() => {
-            const el = document.getElementById('flash_copy');
-            el.parentNode.removeChild(el);
+            copy__alert.parentNode.removeChild(copy__alert);
        }, 1300);
    }
    if (type === 'copy') {
@@ -86,14 +91,13 @@ function buttonAction(type, id) {
            })
            .catch(err => {
                // fetch qrcode from http://goqr.me
-                const qrcode__src = 'https://api.qrserver.com/v1/create-qr-code/?size=120x120&data=';
-                updatedHTML = html.replace('%qrcodeLink%', `${qrcode__src}${shortUrl}`);
+                const qrcode__api = 'https://api.qrserver.com/v1/create-qr-code/?size=120x120&data=';
+                updatedHTML = html.replace('%qrcodeLink%', `${qrcode__api}${shortUrl}`);
                document.getElementById(`btns-${id}`).insertAdjacentHTML('afterend', updatedHTML);
            });
    }
    else if (type === 'close__btn') {
-        const el = document.getElementById('qrcode__template');
-        el.parentNode.removeChild(el);
+        qrcode__child.parentNode.removeChild(qrcode__child);
    }
 }

@@ -112,7 +116,7 @@ function getButtonDetails(e) {


 // Button Action (qrcode / copy)
-document.getElementById('delegation__element').addEventListener('click', getButtonDetails);
+main__element.addEventListener('click', getButtonDetails);


 // prevent enter key press
--- a/src/scripts/options.js
+++ b/src/scripts/options.js
@@ -1,5 +1,17 @@
 import browser from 'webextension-polyfill';

+
+const pwd__holder = document.getElementById('pwd__holder'),
+    submit__btn = document.getElementById('button__submit'),
+    pwd__value = document.getElementById('password--value'),
+    api__holder = document.getElementById('api__key--value'),
+    pwd__view = document.getElementById('view__password--eye'),
+    pwd__switch = document.getElementById('password__label--switch'),
+    pwd__checkbox = document.getElementById('password__label--checkbox'),
+    history__checkbox = document.getElementById('history__label--checkbox'),
+    autocopy__checkbox = document.getElementById('autocopy__label--checkbox');
+
+
 // update UI - API Key on options page load
 document.addEventListener('DOMContentLoaded', () => {
    // replace the input value with current value on load
@@ -9,31 +21,31 @@ document.addEventListener('DOMContentLoaded', () => {
            const API_KEY = `${result.key}`;
            let pwd = result.pwd;
            if (API_KEY === 'undefined') {
-                document.getElementById('api__key--value').value = '';
+                api__holder.value = '';
            } else {
-                document.getElementById('api__key--value').value = API_KEY;
-                document.getElementById('password__label--checkbox').checked = result.userOptions.pwdForUrls;
+                api__holder.value = API_KEY;
+                pwd__checkbox.checked = result.userOptions.pwdForUrls;
                // if disabled -> delete save password
                if (!result.userOptions.pwdForUrls) {
                    pwd = '';
                }
-                document.getElementById('password--value').value = pwd;
+                pwd__value.value = pwd;
                // view password holder
                toggleView(result.userOptions.pwdForUrls);
            }
-            document.getElementById('autocopy__label--checkbox').checked = result.userOptions.autoCopy;
-            document.getElementById('history__label--checkbox').checked = result.userOptions.keepHistory;
+            autocopy__checkbox.checked = result.userOptions.autoCopy;
+            history__checkbox.checked = result.userOptions.keepHistory;
        });
 });


 // Store Data and alert message
 const saveData = () => {
-    let password = document.getElementById('password--value').value;
-    const API_KEY = document.getElementById('api__key--value').value;
-    let pwdForUrls = document.getElementById('password__label--checkbox').checked;
-    const autoCopy = document.getElementById('autocopy__label--checkbox').checked;
-    const keepHistory = document.getElementById('history__label--checkbox').checked;
+    let password = pwd__value.value;
+    const API_KEY = api__holder.value;
+    let pwdForUrls = pwd__checkbox.checked;
+    const autoCopy = autocopy__checkbox.checked;
+    const keepHistory = history__checkbox.checked;

    if (password == '') {
        pwdForUrls = false;
@@ -51,10 +63,9 @@ const saveData = () => {
    // store value locally
    browser.storage.local.set({ key: API_KEY, pwd: password, URL_array: [], userOptions: userOptions }).then(() => {
        // Saved Alert
-        const element = document.getElementById('button__submit');
-        element.textContent = 'Saved!';
+        submit__btn.textContent = 'Saved!';
        setTimeout(() => {
-            element.textContent = 'Save';
+            submit__btn.textContent = 'Save';
            // close current tab
            browser.tabs.getCurrent().then((tabInfo) => {
                browser.tabs.remove(tabInfo.id);
@@ -65,7 +76,7 @@ const saveData = () => {


 // on save button click
-document.getElementById('button__submit').addEventListener('click', saveData);
+submit__btn.addEventListener('click', saveData);


 // on enter key press
@@ -77,32 +88,30 @@ document.addEventListener('keypress', (e) => {


 // Show Password
-document.getElementById('view__password--eye').addEventListener('click', () => {
-    const element = document.getElementById('password--value');
-    const view = document.getElementById('view__password--eye');
+pwd__view.addEventListener('click', () => {
+    const element = pwd__value;
    if (element.type === 'password') {
        element.type = 'text';
-        view.textContent = 'HIDE';
+        pwd__view.textContent = 'HIDE';
    } else {
        element.type = 'password';
-        view.textContent = 'SHOW';
+        pwd__view.textContent = 'SHOW';
    }
 });


 // Password Holder View Toggle
 function toggleView(checked) {
-    const pwdHolder = document.getElementById('pwd__holder');
    if (checked) {
-        pwdHolder.classList.remove('d-none');
+        pwd__holder.classList.remove('d-none');
    } else {
-        pwdHolder.classList.add('d-none');
+        pwd__holder.classList.add('d-none');
    }
 }


 // Password Option toggle key press
-document.getElementById('password__label--switch').addEventListener('click', () => {
-    const checked = document.getElementById('password__label--checkbox').checked;
+pwd__switch.addEventListener('click', () => {
+    const checked = pwd__checkbox.checked;
    toggleView(checked);
 });
--- a/src/scripts/popup.js
+++ b/src/scripts/popup.js
@@ -1,16 +1,21 @@
 import browser from 'webextension-polyfill';
 import QRCode from 'qrcode';

-let shortUrl;

+let shortUrl, longUrl, start, API_key, password, keepHistory, autoCopy;
+const qrcode__holder = document.getElementById('qr_code'),
+    url__holder = document.getElementById('url__content-inner'),
+    copy__btn = document.getElementById('button__copy--holder'),
+    qrcode__btn = document.getElementById('button__qrcode--holder'),
+    qrcode__api = 'https://api.qrserver.com/v1/create-qr-code/?size=120x120&data=';
+
+
+// Initialize
 document.addEventListener('DOMContentLoaded', () => {

-    // 1. Initialize
+    // 1. KuttUrl
    browser.tabs.query({ 'active': true, 'lastFocusedWindow': true }).then(tabs => {

-        let longUrl, start, API_key, password, keepHistory, autoCopy;
-        const qrcode__backup = 'https://api.qrserver.com/v1/create-qr-code/?size=120x120&data=';  // in case package fails
-
        // extract page url
        longUrl = tabs[0].url;
        // extract first 4 chars
@@ -24,7 +29,7 @@ document.addEventListener('DOMContentLoaded', () => {

            // update DOM function
            const updateContent = (value) => {
-                document.getElementById('url__content-inner').textContent = value;
+                url__holder.textContent = value;
            };

            if (start === 'http' && API_key !== '' && API_key !== undefined) {
@@ -39,8 +44,6 @@ document.addEventListener('DOMContentLoaded', () => {
                            updateContent('API Limit Exceeded!');
                        } else if (response === 401) {
                            updateContent('Invalid API Key');
-                            // } else if (response === 400) {
-                            //     updateContent('Unknown Error!!!');
                        } else if (response === 504) {
                            updateContent('Time-out!');
                        } else {
@@ -56,11 +59,11 @@ document.addEventListener('DOMContentLoaded', () => {
                        // 3. QR Code Generation
                        QRCode.toDataURL(shortUrl)
                            .then(url => {
-                                document.getElementById('qr_code').src = url;
+                                qrcode__holder.src = url;
                            })
                            .catch(err => {
                                // fetch qrcode from http://goqr.me (in case package fails)
-                                document.getElementById('qr_code').src = `${qrcode__backup}${shortUrl}`;
+                                qrcode__holder.src = `${qrcode__api}${shortUrl}`;
                            });
                        // 4. Add to history
                        browser.storage.local.get(['userOptions'])
@@ -119,6 +122,7 @@ document.addEventListener('DOMContentLoaded', () => {
    });


+    // 2. Copy Function
    function copyLink() {
        try {
            const copyTextarea = shortUrl;
@@ -146,23 +150,23 @@ document.addEventListener('DOMContentLoaded', () => {
    }


-    // 2. Copy Function
-    document.getElementById('button__copy--holder').addEventListener('click', copyLink);
+    // 3. Copy Button
+    copy__btn.addEventListener('click', copyLink);


-    // 3. QR Code
-    document.getElementById('button__qrcode--holder').addEventListener('click', () => {
+    // 4. QR Code Button
+    qrcode__btn.addEventListener('click', () => {
        toggleDisplay('.qrcode__content--holder');
    });


-    // 4. elements display function
+    // 5. Display function
    function toggleDisplay(className) {
        const element = document.querySelector(className);
        element.classList.toggle('d-none');
    }

-
+    // 6. Copy alert
    function flasher(id) {
        const element = document.getElementById(id);
        element.classList.toggle('v-none');