Merge pull request #5 from jamesmortensen/manifest-v3

Upgrade to Manifest v3 and Implement Quote Insertion in Replies

README.md

@@ -3,7 +3,7 @@
 
   ----
 
-  Copyright 2013, 2014, James Mortensen
+  Copyright 2013, 2014, 2022, James Mortensen
 
   I made this extension because I couldn't find a tool to let me randomly inject my own user-selected
   quotes into my email signature. I specifically wanted the quotes to be hand-selected. 
@@ -33,3 +33,7 @@
 // @history        0.9.3  Modified the quote manager to make it easier to use.
 
 // @history        1.0.0  Deployed 1.0.0 to the Chrome Web Store.
+
+// @history        2.0.0  Upgrade to manifest v3. Added ability to have quotes with replies.
+
+// @history        2.0.1  Fixed bug where only the 29th quote in the list is inserted.

chrome-extension/css/quoteManagerPageAction.css

@@ -77,6 +77,9 @@ textarea {
   left: 4%;
   margin-bottom: 15px;
 }
+.modal-footer span.alert {
+  padding: 10px 15px 11px 15px;
+}
 .icon {
   margin-right: 52px;
 }

chrome-extension/js/lib/fade-in-out.js

@@ -0,0 +1,73 @@
+// fade-in-out.js - https://github.com/jamesmortensen/fade-in-out-visibility @d6c9febb630e43e7bb3ac3997198fd8968cec139 - Sat Sep 17 14:26:23 2022 +0530
+
+/*
+Similar to jQuery's fadeIn and fadeOut, except relies on visibility and opacity instead of display, 
+which preserves element height and width.
+*/
+
+class ElementFader {
+
+    constructor(selector, doc) {
+        doc = doc || window.document;
+        this.selector = selector;
+        this.elem = doc.querySelector(selector);
+        this.opacity = parseFloat(this.elem.style.opacity);
+        this.queue = [];
+        this.interval = null;
+    }
+
+    fadeIn() {
+        if(this.queue.length === 4)
+            this.queue.shift();
+        this.queue.push(this.#fadeIn);
+        if (this.interval === null) {
+            this.queue.shift()(this);
+        }
+    }
+
+    fadeOut() {
+        if(this.queue.length === 4)
+            this.queue.shift();
+        this.queue.push(this.#fadeOut);
+        if (this.interval === null) {
+            this.queue.shift()(this);
+        }
+    }
+
+    #fadeIn(that) {
+        that.interval = setInterval(((_this) => {
+            return function () {
+                _this.opacity = Math.round( (_this.opacity + .1) * 10 ) / 10;
+                _this.elem.style.opacity = _this.opacity;
+                if (_this.opacity >= 1) {
+                    clearInterval(_this.interval);
+                    _this.interval = null;
+                    if (_this.queue.length > 0)
+                        _this.queue.shift()(_this);
+                }
+            }
+        })(that), 80); // increased to 80 from 100
+    }
+
+    #fadeOut(that) {
+        that.interval = setInterval(((_this) => {
+            return function () {
+                _this.opacity = Math.round( (_this.opacity - .1) * 10 ) / 10; 
+                _this.elem.style.opacity = _this.opacity;
+                if (_this.opacity <= 0) {
+                    clearInterval(_this.interval);
+                    _this.interval = null;
+                    if (_this.queue.length > 0)
+                        _this.queue.shift()(_this);
+                }
+            }
+        })(that), 80); // increased to 80 from 100
+    }
+
+    getOpacity() {
+        return this.opacity;
+    }
+}
+
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined')
+    module.exports = ElementFader;

chrome-extension/js/quoteManagerPageAction.js

@@ -4,7 +4,7 @@
 
 The MIT License (MIT)
 
-Copyright (c) 2013, 2014 James Mortensen
+Copyright (c) 2013, 2014, 2022 James Mortensen
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -41,6 +41,7 @@ var keyFilterer;
 if (typeof KeyFilterer !== 'undefined')
     keyFilterer = new KeyFilterer();
 
+var elementFader;
 
 function getListQuoteTemplate() {
     return '<li class="list-group-item quote"><input /><span class="remove-quote glyphicon glyphicon-minus"></span></li>';
@@ -76,36 +77,17 @@ function updateQuotePreview(targetElem) {
 
 
 function storeQuotes(quotesToStore, doClose) {
-    chrome.storage.local.set(quotesToStore, function() {
-        // chrome.tabs.getCurrent(function(tab) {
-        // 	var tabId = tab.id;
-        // 	var injectDetails = {
-        // 		code: 'm_quotes = ' + quotesToStore.m_quotes
-        // 	};
-        // 	chrome.tabs.executeScript(tabId, injectDetails, function(results) {
-        // 		console.log(results);
-        // 	});
-
-        // });
+    chrome.storage.local.set(quotesToStore, function () {
 
         /**
          * Smoothes out the success alert message fadeIn/fadeOut.
          */
         clearTimeout(g_saveTimeout);
-        g_saveTimeout = setTimeout(function() {
-            $('.modal-footer span.auto-save').fadeOut();
+        g_saveTimeout = setTimeout(function () {
+            //$('.modal-footer span.auto-save').fadeOut();
+            elementFader.fadeOut();
         }, 250);
 
-        /**
-         * Inject updated quotes in the current tab only.
-         */
-        chrome.tabs.executeScript(null,
-        {
-            code: 'randomQuoteModule.quotes = ' + JSON.stringify(quotesToStore.m_quotes)
-        }
-        );
-        //console.debug(quotesToStore.m_quotes[quotesToStore.m_quotes.length-1]);
-
         if (doClose)
             window.close();
     });
@@ -114,7 +96,8 @@ function storeQuotes(quotesToStore, doClose) {
 
 function showAutoSaveMessage() {
     if ($('.alert-danger:visible').length === 0) {
-        $('.modal-footer span.auto-save').fadeIn();
+        //$('.modal-footer span.auto-save').fadeIn();
+        elementFader.fadeIn();
     }
 }
 
@@ -175,68 +158,59 @@ if (typeof chrome.storage === 'undefined')
     var chrome = {
         storage: {
             local: {
-                get: function(_null, callback) {
+                get: function (_null, callback) {
                     var script = document.createElement('script');
                     script.setAttribute('src', '/quotes.js');
-                    script.addEventListener('load', function() {
+                    script.addEventListener('load', function () {
                         callback(m_quotes);
                     });
                     document.head.appendChild(script);
                 },
-                set: function() {}
+                set: function () { }
             }
         }
     };
 
 
 
-window.addEventListener("load", function() {
+window.addEventListener("load", function () {
+
+    elementFader = new ElementFader('.modal-footer span.auto-save');
 
     chrome.storage.local.get(null, loadQuotes);
 
     /**
      * This is the save action for the JSON panel, which we keep simply for backwards compatibility.
      */
-    $('[data-action="save"]').click(function() {
+    $('[data-action="save"]').click(function () {
         var items = {};
         if ($('[data-value="quotes"]').val().match(/\[\".*/g) != null) {
             items["m_quotes"] = JSON.parse($('[data-value="quotes"]').val());
         } else {
             items["m_quotes"] = [$('[data-value="quotes"]').val()];
         }
-        chrome.storage.local.set(items, function() {
+        chrome.storage.local.set(items, function () {
             window.close();
         });
-        //chrome.tabs.executeScript(null,{code:"document.body.dataset['quote'] = 'fasfdtest';document.body.style.backgroundColor='orange';"});
     });
 
     /**
      * Close the panel.
      */
-    $('[data-action="cancel"]').click(function() {
+    $('[data-action="cancel"]').click(function () {
         window.close();
     });
 
     /**
      * Show the "old" JSON panel most people don't like, and be able to switch back.
      */
-    $('[data-action="json-panel"]').click(function() {
+    $('[data-action="json-panel"]').click(function () {
         window.location.href = '/quoteManagerPageAction.html';
     });
-    $('[data-action="list-panel"]').click(function() {
+    $('[data-action="list-panel"]').click(function () {
         window.location.href = '/quoteManagerPageActionSimple.html';
     });
 
-    /**
-     * This is the save operation for the new UX friendly list panel.
-     *
-     * @deprecated
-     */
-    $('[data-action="save-list"]').click(function() {
-        var doClose = true;
-        saveQuotes(doClose);
-    });
-
     /**
      * Add a textbox and focus it.
      */
@@ -245,7 +219,7 @@ window.addEventListener("load", function() {
     /**
      * On every keystroke, or on cut/paste, update the quote preview.
      */
-    $('.list-group').on('keyup cut paste', '.quote input', function(event) {
+    $('.list-group').on('keyup cut paste', '.quote input', function (event) {
         updateQuotePreview(event.target);
         var doClose = false;
         if (event.type === 'keyup') {
@@ -255,7 +229,7 @@ window.addEventListener("load", function() {
                 saveQuotes(doClose);
             }
         } else if (event.type === 'cut' || event.type === 'paste') {
-            setTimeout(function() {
+            setTimeout(function () {
                 saveQuotes(doClose);
             }, 0);
         }
@@ -274,7 +248,7 @@ window.addEventListener("load", function() {
     /**
      * Uncheck items marked for deletion.
      */
-    $('[data-action="keep-quote"]').click(function() {
+    $('[data-action="keep-quote"]').click(function () {
         $('.list-group .quote.alert-danger').removeClass('alert').removeClass('alert-danger');
         $(this).parent().fadeOut();
     });