last change before radical rewrite

README.md

@@ -1,6 +1,8 @@
 Chromoji
 ========
 
-This is a Google Chrome extension for Windows and Linux that adds Mac OS X emoji to the web.
-The images are linked to the unicode standard: http://www.unicode.org/charts/PDF/U1F300.pdf
+This is a Google Chrome extension for Windows, OS X, and Linux that adds support
+for textual emoji, based on the Unicode standard: http://www.unicode.org/charts/PDF/U1F300.pdf
 A good test page is located on Wikipedia: https://en.wikipedia.org/wiki/Emoji
+
+This `master` branch has been abandoned for now; development continues on the `simple` branch.

TODO.md

@@ -1,13 +1,8 @@
 Todo
 ----
 
-Add descriptions to all emoji in the locales file.
-Get better images for
- - 1f303
- - 1f50a
- - 1f51d
- - 1f528
- - 1f68b
- - 1f684
- - 1f687
-
+Get Private-Use Area and blacklisting options working.
+
+Get intelligent markup/style additions working.
+
+Eliminate dependence on jQuery.

background.js

@@ -1,8 +1,7 @@
-function setDefaultSettings() {
-  'use strict';
-  if (localStorage.hidePrivate == null) localStorage.hidePrivate = 'true';
-  if (localStorage.blacklist == null) localStorage.blacklist = 'one.example,another.example';
-}
+(function bkgrd(window, undefined) {
+'use strict';
+if (localStorage.hidePrivate == null) localStorage.hidePrivate = true;
+if (localStorage.blacklist == null) localStorage.blacklist = 'one.example,another.example';
 
 function listenEmo(request, sender, sendResponse) {
   'use strict';
@@ -14,10 +13,10 @@ function listenEmo(request, sender, sendResponse) {
         else dest[prop] = strt[prop];
       }
     }
-  }, response = clone(Object.create(Object.getPrototypeOf(request)), request);
+  }, response = Object.create(Object.getPrototypeOf(request));
+  clone(response, request);
   if (request.setting) response.result = localStorage[request.setting];
   sendResponse(response);
 }
-
-setDefaultSettings();
 chrome.extension.onMessage.addListener(listenEmo);
+}(this));

common.js

@@ -398,7 +398,6 @@ var charDictionary = {
         "\uE24A"
       ]
     },
-    /*
     {
       "name":"Black Spade Suit",
       "id":"black_spade_suit",
@@ -431,7 +430,6 @@ var charDictionary = {
         "\uE20D"
       ]
     },
-    */
     {
       "name":"Hot Springs",
       "id":"hot_springs",

emoji.js

@@ -1,7 +1,17 @@
 (function emojiInsertion(window, undefined) {
 'use strict';
 var items = charDictionary.items, allChars = fillChars(items),
-  regexp = filterHiddenEmojis(), nodes, blacklist;
+  regexp = new RegExp(allChars.join('|')), nodes;
+
+function walkTheDOM(node, func) {
+  if (func(node)) {
+    node = node.firstChild;
+    while (node) {
+      walkTheDOM(node, func);
+      node = node.nextSibling;
+    }
+  }
+}
 
 if (typeof MutationObserver !== 'function') window.MutationObserver = window.WebKitMutationObserver;
 
@@ -10,6 +20,9 @@ jQuery.fn.just_text = function just_text() {
 };
 
 function filter_nodes(nodes, regexp) {
+//  var nonEditable = nodes.querySelectorAll('[contenteditable!="true"]').querySelectorAll('[contenteditable!="plaintext-only"]'),
+//    txt = function txt(index) {
+//    };
   return $(nodes).find('[contenteditable!="true"][contenteditable!="plaintext-only"]').addBack().filter(function txt(index) {
     var result = false, html;
     if ($(this).just_text().search(regexp) !== -1) {
@@ -35,8 +48,8 @@ function on_mutation(mutations) {
 }
 
 function run(nodes) {
-  $.each(nodes, function runnode() {
-    var node = $(this), html, replacement;
+  nodes.forEach(function runnode(element, index, array) {
+    var node = element, html, replacement;
     if (!$(node).html()) node = $(node).parent();
     if ($(node).html()) {
       html = $(node).html();
@@ -56,11 +69,6 @@ function isPrivate(ch) {
     code >= 0x100000 && code <= 0x10FFFD;
 }
 
-function filterHiddenEmojis() {
-  if (localStorage.hidePrivate) allChars = allChars.filter(function isNotPrivate(ch) {return !isPrivate(ch);});
-  return new RegExp(allChars.join('|'));
-}
-
 function fillChars(items) {
   var charArr = [];
   items.forEach(function charArray(element, index, array) {
@@ -69,6 +77,9 @@ function fillChars(items) {
       charArr.push(element);
     });
   });
+  chrome.extension.sendMessage({setting: 'hidePrivate'}, function filterHidden(response) {
+    if (response.result) charArr = charArr.filter(function isNotPrivate(ch) {return !isPrivate(ch);});
+  });
   return charArr;
 }
 
@@ -77,16 +88,39 @@ function isInput(el) {
     (el.nodeName.toLowerCase() === 'textarea') || el.isContentEditable;
 }
 
-function fontExtend(e) {
+function isEdit(el) {
+  var n = el.nodeName.toLowerCase();
+  return ((n === 'input' && el.type === 'text') || (n === 'textarea') ||
+    el.isContentEditable);
+}
+
+function fontExtend(el) {
+  var font = window.getComputedStyle(el)['font-family'] || 'monospace';
+  el.dataset.emoji_font = true;
+  el.style.removeProperty('font-family');
+  el.style.cssText += ['; font-family: ', font,
+    ', "Segoe UI Emoji", "Segoe UI Symbol", Symbola, EmojiSymbols !important;'].join('');
+}
+
+function fontExtendEdit(e) {
   var el = e.target;
-  if (isInput(el) && !el.dataset.emoji_font) {
-    el.dataset.emoji_font = true;
-    el.style.cssText += ['; font-family: ', window.getComputedStyle(el)['font-family'] || 'monospace',
-      ', "Segoe UI Emoji", "Segoe UI Symbol", Symbola, EmojiSymbols !important;'].join('');
-  }
+  if (isEdit(el) && !el.dataset.emoji_font) fontExtend(el);
+}
+
+document.addEventListener('focus', fontExtendEdit, true);
+
+function fontExtendLoad(el) {
+  var n = el.nodeName.toLowerCase();
+  if (n !== 'script' && n !== 'stylesheet' && n !== 'link' && !isEdit(el) &&
+      !el.dataset.emoji_font) fontExtend(el);
+}
+
+function fontExtender() {
+  walkTheDOM(document.body, fontExtendLoad);
 }
 
-document.addEventListener('focus', fontExtend, true);
+if (isReady()) fontExtender();
+else document.addEventListener('DOMContentLoaded', fontExtender, false);
 
 function start_observer() {
   var target = document.body, observer = new MutationObserver(on_mutation),
@@ -95,20 +129,32 @@ function start_observer() {
 }
 
 function init() {
+  return; //no init for now
   nodes = filter_nodes($('body'), regexp);
   run(nodes);
   start_observer();
 }
 
-$(document).ready(function setup() {
-  chrome.extension.sendMessage({setting: 'blacklist'}, function bset(response) {
-    blacklist = response.result ? response.result.split(',') : [];
-    var blacklisted = false;
-    $.each(blacklist, function blist(key, value) {
-      if (document.domain.indexOf(value) ===
-          document.domain.length - value.length) blacklisted = true;
-    });
-    if (!blacklisted) init();
+function isReady() {
+  return /complete|loaded|interactive/.test(document.readyState);
+}
+
+chrome.extension.sendMessage({setting: 'blacklist'}, function checkBlacklist(response) {
+  var blacklist = response.result;
+  if (!blacklist) {
+    if (isReady()) return init();
+    return document.addEventListener('DOMContentLoaded', init, false);
+  }
+  blacklist = blacklist.split(',');
+  var blacklisted = false;
+  blacklist.forEach(function blist(element, index, array) {
+    var bdomArr = element.split('.'), bl = bdomArr.length, domArr = document.domain.split('.');
+    if (bl <= domArr.length) for (var i = bl; i--;) if (bdomArr.pop() !== domArr.pop()) break;
+    blacklisted = blacklisted || !bdomArr.length;
   });
+  if (!blacklisted) {
+    if (isReady()) return init();
+    return document.addEventListener('DOMContentLoaded', init, false);
+  }
 });
 }(this));

manifest.json

@@ -18,7 +18,7 @@
   },
   "content_scripts": [{
     "all_frames": true,
-    "run_at": "document_end",
+    "run_at": "document_start",
     "matches": ["\u003Call_urls>"],
     "css": ["emoji.css"],
     "js": ["jquery-1.9.1.min.js", "common.js", "emoji.js"]

options.html

@@ -8,6 +8,7 @@
     <div id="emoji">
       <fieldset class="fieldset">
         <h1><img id="logo" src="../icon48.png" width="24" height="24" alt="" title="">Emoji Polyfill <span>options</span></h1>
+        <h2>For now these options don't work, you'll just see textual emoji everywhere regardless of domain or Private Use Area status.</h2>
         <div class="field">
           <input type="checkbox" name="fieldhidePrivate" id="fieldhidePrivate">
           <label for="fieldhidePrivate" id="labelhidePrivate">Maximum Compatibility</label>

options.js

@@ -1,25 +1,21 @@
+(function optSet(window, undefined) {
+'use strict';
+
 function loadOptions() {
-  'use strict';
   document.getElementById('fieldhidePrivate').checked = (localStorage.hidePrivate == 'true');
   document.getElementById('fieldblacklist').value = localStorage.blacklist;
 }
 
 function saveOptions() {
-  'use strict';
 	localStorage.hidePrivate = document.getElementById('fieldhidePrivate').checked;
 	localStorage.blacklist = document.getElementById('fieldblacklist').value;
 }
 
 function cancelOptions() {
-  'use strict';
   window.close();
 }
 
-function init() {
-  'use strict';
-	document.getElementById('buttoncancel').addEventListener('click', cancelOptions, false);
-	document.getElementById('buttonsave').addEventListener('click', saveOptions, false);
-	loadOptions();
-}
-
-window.addEventListener('load', init, false);
+document.getElementById('buttoncancel').addEventListener('click', cancelOptions, false);
+document.getElementById('buttonsave').addEventListener('click', saveOptions, false);
+loadOptions();
+}(this));