Add WebExtension version + link to published browser stores.

Shimmi · Feb 8, 2018 · 1d12e8f · 1d12e8f
1 parent 7396c8e
commit 1d12e8f
Show file tree

Hide file tree

Showing 10 changed files with 328 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -9,7 +9,11 @@ Starting with January 2018, Slack does no longer provide options to choose your
 [update](https://get.slack.help/hc/en-us/articles/115004846068-Slack-updates-and-changes#january-2018) announcement and
 [help](https://get.slack.help/hc/en-us/articles/202931348-Emoji-and-emoticons#change-your-emoji-display).
 
-Available emoji styles:
+## Published browser extensions
+* [Chrome](https://chrome.google.com/webstore/detail/slacks-emoji-style-choose/ghhoeeojiokhdmaelkllggbhjnlfpbop?utm_source=github)
+* [Firefox](https://addons.mozilla.org/cs/firefox/addon/slack-s-emoji-style-chooser/)
+
+## Available emoji styles
 * Apple
 * Emojione
 * Facebook

diff --git a/WebExtensions/icon.png b/WebExtensions/icon.png
diff --git a/WebExtensions/manifest.json b/WebExtensions/manifest.json
@@ -0,0 +1,29 @@
+{
+    "name": "Slack's Emoji Style Chooser",
+    "description": "Do not like your emoji set on Slack? Pick one of six different Emoji styles!",
+    "version": "0.9",
+    "manifest_version": 2,
+    "homepage_url": "https://github.com/Shimmi/slack-emoji-style-chooser",
+    "permissions": [
+        "storage",
+        "tabs",
+        "*://*.slack.com/*"
+    ],
+    "content_scripts": [
+        {
+            "matches": [
+                "*://*.slack.com/*"
+            ],
+            "js": [
+                "styles.js"
+            ]
+        }
+    ],
+    "options_ui": {
+        "page": "options.html",
+        "browser_style": true
+    },
+    "icons": {
+        "128": "icon.png"
+    }
+}
diff --git a/WebExtensions/options.css b/WebExtensions/options.css
@@ -0,0 +1,84 @@
+body {
+    width: 520px;
+}
+
+h3 {
+    -webkit-margin-start: -18px;
+}
+
+section {
+    -webkit-padding-start: 18px;
+}
+
+#status {
+    display: inline-block;
+    font-weight: bold;
+    margin-top: 8px;
+    transition: opacity 0s;
+    opacity: 1;
+}
+
+#status.hide {
+    transition: opacity 1s ease-in-out;
+    opacity: 0;
+}
+
+label input {
+    display: none;
+}
+
+h4 {
+    float: left;
+    margin-top: 0;
+    margin-bottom: 12px;
+}
+
+label {
+    background: #ffffff;
+    border: 1px solid #e8e8e8;
+    border-radius: 5px;
+    display: inline-block;
+    padding: 12px 16px 16px;
+    margin-bottom: 18px;
+    margin-right: 18px;
+}
+
+label.selected {
+    background: #eaf5fc;
+    border-color: #2d9ee0;
+}
+
+.preview {
+    clear: both;
+}
+
+.preview div {
+    background-size: 5200% 5200%;
+    width: 32px;
+    height: 32px;
+    display: inline-block;
+}
+
+.preview-apple div {
+    background-image: url(https://raw.githubusercontent.com/iamcal/emoji-data/master/sheets-indexed-256/sheet_apple_32_indexed_256.png);
+}
+
+.preview-emojione div {
+    background-image: url(https://raw.githubusercontent.com/iamcal/emoji-data/master/sheets-indexed-256/sheet_emojione_32_indexed_256.png);
+}
+
+.preview-facebook div {
+    background-image: url(https://raw.githubusercontent.com/iamcal/emoji-data/master/sheets-indexed-256/sheet_facebook_32_indexed_256.png);
+}
+
+.preview-google div {
+    background-image: url(https://raw.githubusercontent.com/iamcal/emoji-data/master/sheets-indexed-256/sheet_google_32_indexed_256.png);
+}
+
+.preview-messenger div {
+    background-image: url(https://raw.githubusercontent.com/iamcal/emoji-data/master/sheets-indexed-256/sheet_messenger_32_indexed_256.png);
+}
+
+.preview-twitter div {
+    background-image: url(https://raw.githubusercontent.com/iamcal/emoji-data/master/sheets-indexed-256/sheet_twitter_32_indexed_256.png);
+}
diff --git a/WebExtensions/options.html b/WebExtensions/options.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Slack's Emoji Style Chooser</title>
+    <link rel="stylesheet" href="options.css">
+    <meta charset="UTF-8">
+</head>
+
+<body>
+
+<section>
+    <h3>Emoji sets</h3>
+
+    <label>
+        <input id="apple" type="radio" name="set" value="apple">
+        <h4>Apple</h4>
+        <div class="preview preview-apple">
+            <div style="background-position:60.78431372549019% 74.50980392156863%;"></div>
+            <div style="background-position:98.03921568627452% 15.686274509803921%;"></div>
+            <div style="background-position:74.50980392156863% 80.3921568627451%;"></div>
+            <div style="background-position:15.686274509803921% 56.86274509803921%;"></div>
+            <div style="background-position:49.01960784313726% 19.607843137254903%;"></div>
+        </div>
+    </label>
+    <label>
+        <input id="emojione" type="radio" name="set" value="emojione">
+        <h4>Emojione</h4>
+        <div class="preview preview-emojione">
+            <div style="background-position:60.78431372549019% 74.50980392156863%;"></div>
+            <div style="background-position:98.03921568627452% 15.686274509803921%;"></div>
+            <div style="background-position:74.50980392156863% 80.3921568627451%;"></div>
+            <div style="background-position:15.686274509803921% 56.86274509803921%;"></div>
+            <div style="background-position:49.01960784313726% 19.607843137254903%;"></div>
+        </div>
+    </label>
+    <label>
+        <input id="facebook" type="radio" name="set" value="facebook">
+        <h4>Facebook</h4>
+        <div class="preview preview-facebook">
+            <div style="background-position:60.78431372549019% 74.50980392156863%;"></div>
+            <div style="background-position:98.03921568627452% 15.686274509803921%;"></div>
+            <div style="background-position:74.50980392156863% 80.3921568627451%;"></div>
+            <div style="background-position:15.686274509803921% 56.86274509803921%;"></div>
+            <div style="background-position:49.01960784313726% 19.607843137254903%;"></div>
+        </div>
+    </label>
+    <label>
+        <input id="google" type="radio" name="set" value="google">
+        <h4>Google</h4>
+        <div class="preview preview-google">
+            <div style="background-position:60.78431372549019% 74.50980392156863%;"></div>
+            <div style="background-position:98.03921568627452% 15.686274509803921%;"></div>
+            <div style="background-position:74.50980392156863% 80.3921568627451%;"></div>
+            <div style="background-position:15.686274509803921% 56.86274509803921%;"></div>
+            <div style="background-position:49.01960784313726% 19.607843137254903%;"></div>
+        </div>
+    </label>
+    <label>
+        <input id="messenger" type="radio" name="set" value="messenger">
+        <h4>Messenger</h4>
+        <div class="preview preview-messenger">
+            <div style="background-position:60.78431372549019% 74.50980392156863%;"></div>
+            <div style="background-position:98.03921568627452% 15.686274509803921%;"></div>
+            <div style="background-position:74.50980392156863% 80.3921568627451%;"></div>
+            <div style="background-position:15.686274509803921% 56.86274509803921%;"></div>
+            <div style="background-position:49.01960784313726% 19.607843137254903%;"></div>
+        </div>
+    </label>
+    <label>
+        <input id="twitter" type="radio" name="set" value="twitter">
+        <h4>Twitter</h4>
+        <div class="preview preview-twitter">
+            <div style="background-position:60.78431372549019% 74.50980392156863%;"></div>
+            <div style="background-position:98.03921568627452% 15.686274509803921%;"></div>
+            <div style="background-position:74.50980392156863% 80.3921568627451%;"></div>
+            <div style="background-position:15.686274509803921% 56.86274509803921%;"></div>
+            <div style="background-position:49.01960784313726% 19.607843137254903%;"></div>
+        </div>
+    </label>
+
+</section>
+
+<section id="footer">
+    <div id="status" class="hide">Saved...</div>
+</section>
+
+<script src="options.js"></script>
+
+</body>
+</html>
diff --git a/WebExtensions/options.js b/WebExtensions/options.js
@@ -0,0 +1,71 @@
+'use strict';
+
+/**
+ * Save options.
+ *
+ * Saves options to browser storage.
+ */
+function saveOptions() {
+    const set = document.querySelector('input[name="set"]:checked').value;
+
+    const setOptions = browser.storage.local.set({
+        emojiSet: set
+    });
+
+    setOptions.then(function () {
+        const status = document.getElementById('status');
+
+        status.className = '';
+        setTimeout(function () {
+            status.className = 'hide';
+        }, 1000);
+
+        browser.tabs.query({url: "*://*.slack.com/*"}, function (tabs) {
+            for (let i = 0; i < tabs.length; i++) {
+                browser.tabs.executeScript(tabs[i].id, {file: "styles.js"}, function () {
+                });
+            }
+        });
+    });
+}
+
+/**
+ * Restore options.
+ *
+ * Restores options from browser storage.
+ */
+function restoreOptions() {
+    const getOptions = browser.storage.local.get({
+        emojiSet: 'apple'
+    });
+
+    getOptions.then(function (items) {
+        const selected = document.getElementById(items.emojiSet);
+        selected.checked = true;
+        selected.parentNode.className = "selected";
+    });
+}
+
+/**
+ * Change selected preview box.
+ *
+ * Toggles "selected" class for proper label tags.
+ *
+ * @param {Event} event
+ */
+function changeSelected(event) {
+    const selected = document.querySelector('label.selected');
+    if (null !== selected) {
+        selected.className = "";
+    }
+    document.getElementById(event.target.id).parentNode.className = "selected";
+
+    saveOptions();
+}
+
+
+const radios = document.querySelectorAll('input[name="set"]');
+Array.prototype.forEach.call(radios, function (radio) {
+    radio.addEventListener('change', changeSelected);
+});
+document.addEventListener('DOMContentLoaded', restoreOptions);
diff --git a/WebExtensions/styles.js b/WebExtensions/styles.js
@@ -0,0 +1,41 @@
+'use strict';
+
+/**
+ * Update the emoji set.
+ *
+ * @param {string} set Name of the Emoji set to use.
+ */
+function updateSet(set) {
+    let style = document.querySelector("style#slackEmoji");
+
+    if (null === style) {
+        style = document.createElement("style");
+        style.type = "text/css";
+        style.id = "slackEmoji";
+        document.head.appendChild(style);
+    }
+
+    const url = 'https://raw.githubusercontent.com/iamcal/emoji-data/master/sheets-indexed-256/sheet_'
+        + set + '_64_indexed_256.png';
+
+    style.innerHTML = `
+.emoji-outer, .msg_input_wrapper .emoji[style*="background-position"] {
+    background-image: url("${url}") !important;
+}
+    `;
+}
+
+/**
+ * Restore options from storage.
+ */
+function restoreOptions() {
+    const getOptions = browser.storage.local.get({
+        emojiSet: 'apple'
+    });
+
+    getOptions.then(function (items) {
+        updateSet(undefined !== items.emojiSet ? items.emojiSet : 'apple');
+    });
+}
+
+restoreOptions();
diff --git a/chrome/manifest.json b/chrome/manifest.json
@@ -1,8 +1,9 @@
 {
     "name": "Slack's Emoji Style Chooser",
     "description": "Do not like your emoji set on Slack? Pick one of six different Emoji styles!",
-    "version": "0.8",
+    "version": "0.9",
     "manifest_version": 2,
+    "homepage_url": "https://github.com/Shimmi/slack-emoji-style-chooser",
     "permissions": [
         "storage",
         "tabs",

diff --git a/chrome/options.html b/chrome/options.html
@@ -3,6 +3,7 @@
 <head>
     <title>Slack's Emoji Style Chooser</title>
     <link rel="stylesheet" href="options.css">
+    <meta charset="UTF-8">
 </head>
 
 <body>

diff --git a/chrome/options.js b/chrome/options.js
@@ -3,7 +3,7 @@
 /**
  * Save options.
  *
- * Saves options to Chrome storestorage.
+ * Saves options to Chrome storage.
  */
 function saveOptions() {
     const set = document.querySelector('input[name="set"]:checked').value;
@@ -18,11 +18,10 @@ function saveOptions() {
             status.className = 'hide';
         }, 1000);
 
-        chrome.tabs.query({ url: "*://*.slack.com/*" }, function(tabs)
-        {
-            for(let i = 0; i < tabs.length; i++)
-            {
-                chrome.tabs.executeScript(tabs[i].id, { file: "styles.js" }, function() {});
+        chrome.tabs.query({url: "*://*.slack.com/*"}, function (tabs) {
+            for (let i = 0; i < tabs.length; i++) {
+                chrome.tabs.executeScript(tabs[i].id, {file: "styles.js"}, function () {
+                });
             }
         });
     });