Initial commit

Shimmi · Feb 5, 2018 · 5354b5d · 5354b5d
1 parent 0aff7df
commit 5354b5d
Show file tree

Hide file tree

Showing 9 changed files with 285 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+*.zip
+*.pem
+*.crx
+*.psd
diff --git a/chrome/icon.png b/chrome/icon.png
diff --git a/chrome/manifest.json b/chrome/manifest.json
@@ -0,0 +1,26 @@
+{
+    "name": "Slack's Emoji Style Chooser",
+    "description": "Choose from six different Emoji styles!",
+    "version": "0.5",
+    "manifest_version": 2,
+    "permissions": [
+        "storage"
+    ],
+    "content_scripts": [
+        {
+            "matches": [
+                "*://*.slack.com/*"
+            ],
+            "js": [
+                "styles.js"
+            ]
+        }
+    ],
+    "options_ui": {
+        "page": "options.html",
+        "chrome_style": true
+    },
+    "icons": {
+        "128": "icon.png"
+    }
+}
diff --git a/chrome/options.css b/chrome/options.css
@@ -0,0 +1,83 @@
+body {
+    width: 520px;
+}
+
+h3 {
+    -webkit-margin-start: -18px;
+}
+
+section {
+    -webkit-padding-start: 18px;
+}
+
+#footer button {
+    display: inline-block;
+}
+
+#status {
+    display: inline-block;
+    font-weight: bold;
+    -webkit-margin-start: 8px;
+}
+
+label input {
+    float: left;
+}
+
+h4 {
+    float: left;
+    -webkit-margin-before: 0;
+    -webkit-margin-start: 12px;
+    -webkit-margin-after: 12px;
+}
+
+label {
+    background: #f9f9f9;
+    border: 1px solid #e8e8e8;
+    border-radius: 5px;
+    display: inline-block;
+    padding: 12px 16px 16px;
+    -webkit-margin-after: 18px;
+    -webkit-margin-end: 18px;
+}
+
+label.selected {
+    background: #eaf5fc;
+    border-color: #2d9ee0;
+}
+
+.preview {
+    clear: both;
+    -webkit-margin-start: 23px;
+}
+
+.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/chrome/options.html b/chrome/options.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Slack's Emoji Style Chooser</title>
+    <link rel="stylesheet" href="options.css">
+</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">
+    <button id="save">Save</button>
+    <div id="status"></div>
+</section>
+
+<script src="options.js"></script>
+
+</body>
+</html>
diff --git a/chrome/options.js b/chrome/options.js
@@ -0,0 +1,54 @@
+'use strict';
+
+/**
+ * Save options.
+ *
+ * Saves options to Chrome storestorage.
+ */
+function saveOptions() {
+    const set = document.querySelector('input[name="set"]:checked').value;
+
+    chrome.storage.sync.set({
+        emojiSet: set
+    }, function () {
+        const status = document.getElementById('status');
+        status.textContent = 'Options saved. Please refresh you Slack tab.';
+    });
+}
+
+/**
+ * Restore options.
+ *
+ * Restores options from Chrome storage.
+ */
+function restoreOptions() {
+    chrome.storage.sync.get({
+        emojiSet: 'apple'
+    }, 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";
+}
+
+const radios = document.querySelectorAll('input[name="set"]');
+Array.prototype.forEach.call(radios, function (radio) {
+    radio.addEventListener('change', changeSelected);
+});
+document.addEventListener('DOMContentLoaded', restoreOptions);
+document.getElementById('save').addEventListener('click', saveOptions);
diff --git a/chrome/styles.js b/chrome/styles.js
@@ -0,0 +1,28 @@
+'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, .emoji {background-image: url("' + url + '") !important;}';
+}
+
+chrome.storage.sync.get({
+    emojiSet: 'apple'
+}, function (items) {
+    updateSet(items.emojiSet);
+});
diff --git a/resources/screenshot 1 - settings.png b/resources/screenshot 1 - settings.png
diff --git a/resources/screenshot 2.jpg b/resources/screenshot 2.jpg