google fonts and closed source fonts handling

saintsebastian · Aug 3, 2017 · c8f79e3 · c8f79e3
1 parent 9e1cb12
commit c8f79e3
Show file tree

Hide file tree

Showing 5 changed files with 139 additions and 85 deletions.
diff --git a/README.md b/README.md
@@ -9,12 +9,9 @@
 
 
 ## TODO functional
+* accesibility
 * better font parsing
-* closed source fonts (check if google font)
-http://worknotes.scripting.com/february2012/22612ByDw/listOfGoogleFonts
-https://stackoverflow.com/questions/13856272/google-fonts-getting-a-list-of-available-fonts-through-ajax
-https://github.com/jonathantneal/google-fonts-complete
-https://github.com/google/fonts
+* closed source fonts style and links
 * printable guide
 * mobile version
 

diff --git a/content_scripts/generate.js b/content_scripts/generate.js
@@ -8,7 +8,7 @@ var weights =[];
 var colors = [];
 var bgs = [];
 
-function getAllValues(cb) {
+function getAllValues(cb, gf) {
   var items = document.getElementsByTagName('*');
   for (var i = items.length; i--;) {
     var style = window.getComputedStyle(items[i]);
@@ -19,27 +19,46 @@ function getAllValues(cb) {
     colors.push(style.getPropertyValue('color'));
     bgs.push(style.getPropertyValue('background-color'));
   }
-  cb(fonts, styles, weights, colors, bgs);
+  cb(fonts, styles, weights, colors, bgs, gf);
 }
 
 function unique(value, index, self) {
   return self.indexOf(value) === index && unwanted.indexOf(value) < 0;
 }
 
+function getGoogleFonts(get, send) {
+  const url = 'https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyA2OmOnNDbuIAJt89qGrp7BUms9XmLP-Ec';
+  let fonts;
+  const req = new XMLHttpRequest();
+  req.open('GET', url, true);
+  req.onload = function() {
+    const fonts = JSON.parse(req.responseText);
+    const cleanFonts = fonts.items.map(el => el.family);
+    get(send, cleanFonts);
+  };
+  req.send();
+}
+
 // send message to the script
 
-function sendCollected(f, fs, fw, c, b) {
+function sendCollected(f, fs, fw, c, b, gf) {
   f = f.filter(unique);
   fs = fs.filter(unique);
   fw = fw.filter(unique);
   c = c.filter(unique);
   b = b.filter(unique);
   chrome.runtime.sendMessage({
+    data: {
+      fonts: f,
+      colors: c,
+      bgs: b,
+      style: fs,
+      weight: fw,
+    },
     title: document.title,
     address: location.href,
-    // data: {fonts: f, colors: c, bgs: b}
-    data: {fonts: f, colors: c, bgs: b, style: fs, weight: fw}
+    googleFonts: gf
   });
 }
 
-getAllValues(sendCollected);
+getGoogleFonts(getAllValues, sendCollected);
diff --git a/manifest.json b/manifest.json
@@ -12,7 +12,8 @@
   },
 
   "permissions": [
-    "activeTab"
+    "activeTab",
+    "<all_urls>"
   ],
 
   "background": {

diff --git a/styleguide.html b/styleguide.html
@@ -4,7 +4,7 @@
 <head>
   <meta charset="utf-8">
   <link rel="stylesheet" href="styleguide.css"/>
-  <link href="https://fonts.googleapis.com/css?family=Arvo|Open+Sans" rel="stylesheet"> 
+  <link href="https://fonts.googleapis.com/css?family=Arvo|Open+Sans" rel="stylesheet">
   <title>Style Guide for </title>
 </head>
 
@@ -30,9 +30,12 @@ <h3>Background Colors</h3>
 
     <aside id="right">
       <h2>Typography</h2>
-      <h3>Typefaces</h3>
+      <h3>Free Typefaces</h3>
       <ul id="fonts">
       </ul>
+      <h3 id="prop"></h3>
+      <ul id="pFonts">
+      </ul>
       <h3>Variations</h3>
       <ul id="styles">
       </ul>

diff --git a/styleguide.js b/styleguide.js
@@ -1,45 +1,49 @@
 /* global chrome */
+
+// NECESSARY VARIABLES
 let received = false;
-var defaultText = 'The quick brown fox jumps over the lazy dog';
-var defaultStyleText = 'Aa';
+let googleFonts;
+const defaultText = 'The quick brown fox jumps over the lazy dog';
+const defaultStyleText = 'Aa';
 
-var safeFonts = [
-  'arial',
-  'helvetica',
-  'times new roman',
-  'times',
-  'courier new',
-  'courier',
-  'palatino',
-  'verdana',
-  'georgia',
-  'vomic sans ms',
-  'trebuchet ms',
-  'arial black',
-  'impact',
-  'monospace',
-  'sans-serif',
-  'serif',
-  'tahoma',
-  'andale mono'
-];
+// COMMUNICATION
 
 chrome.runtime.sendMessage({response: true});
 chrome.runtime.onMessage.addListener(insertStyles);
 
+// HELPERS
+
+function setSource(title, address) {
+  const titleLink = makeLink(title, address)
+  const heading = document.getElementById('source');
+  heading.appendChild(titleLink);
+}
+
+function makeLink(title, address) {
+  const link = document.createElement('a');
+  link.textContent = title;
+  link.title = title;
+  link.href = address;
+  link.target="_blank"
+  return link;
+}
+
+// GENERATE THE STYLE GUIDE
+
 function insertStyles(message) {
   if (message && !received) {
+    received = true;
+    googleFonts = message.googleFonts;
     setSource(message.title, message.address);
     for (let i in message.data)
       addCard(message.data[i], i);
-    received = true;
   }
 }
 
 function addCard(row, type) {
   for (let i of row) {
     if (type === 'fonts')
-      addFont(i, type);
+      checkFont(i, type);
     else if (type === 'style' || type === 'weight')
       addFontStyle(i, 'styles', type);
     else
@@ -50,18 +54,18 @@ function addCard(row, type) {
 // COLORS ACTIONS
 
 function addColor(item, type) {
-  var card = document.createElement('li');
+  const card = document.createElement('li');
   card.classList.add('color');
 
-  var swatch = document.createElement('div');
+  const swatch = document.createElement('div');
   swatch.classList.add('circleSwatch');
   swatch.style.backgroundColor = item;
 
-  var hex = convertColors(item);
-  var desc = makeLink('#' + hex, 'http://www.colorhexa.com/' + hex)
+  const hex = convertColors(item);
+  const desc = makeLink('#' + hex, 'http://www.colorhexa.com/' + hex)
   desc.classList.add('colorDesc');
 
-  var section = document.getElementById(type);
+  const section = document.getElementById(type);
   card.appendChild(swatch);
   card.appendChild(desc);
   section.appendChild(card);
@@ -73,88 +77,118 @@ function convertColors(color) {
     return hexodec.length == 1 ? '0' + hexodec : hexodec;
   }
   var parsed = color.replace('rgb(', '')
-                    .replace(')', '')
-                    .split(', ')
-                    .map(el => {
-                      var hexodec = parseInt(el).toString(16);
-                      return hexodec.length == 1 ? '0' + hexodec : hexodec;
-                    });
+  .replace(')', '')
+  .split(', ')
+  .map(el => {
+    var hexodec = parseInt(el).toString(16);
+    return hexodec.length == 1 ? '0' + hexodec : hexodec;
+  });
   return parsed.join('');
 }
 
 // FONTS ACTIONS
 
-function addFont(item, type) {
-  var goalFont = item.split(',')[0].replace(/"/g, '');
+const safeFonts = [
+  'arial',
+  'helvetica',
+  'times new roman',
+  'times',
+  'courier new',
+  'courier',
+  'palatino',
+  'verdana',
+  'georgia',
+  'vomic sans ms',
+  'trebuchet ms',
+  'arial black',
+  'impact',
+  'monospace',
+  'sans-serif',
+  'serif',
+  'tahoma',
+  'andale mono'
+];
+
+function checkFont(item, type) {
+  const goalFont = item.split(',')[0].replace(/"/g, '');
+  if(safeFonts.includes(goalFont.toLowerCase())) {
+    addFreeFont(item, type, goalFont, false);
+  } else if (googleFonts.includes(goalFont)) {
+    addFreeFont(item, type, goalFont, true);
+  } else
+    addProprietaryFont(item, goalFont);
+}
 
-  var card = document.createElement('li');
+function addFreeFont(item, type, goalFont, link) {
+  const card = document.createElement('li');
   card.classList.add('font');
 
-  var swatch = document.createElement('h5');
+  const swatch = document.createElement('h5');
   swatch.classList.add('fontSwatch');
   swatch.textContent = defaultText;
-  if (safeFonts.includes(goalFont.toLowerCase())) {
-    swatch.style.fontFamily = item;
-    var desc = document.createElement('h5');
+  swatch.style.fontFamily = item;
+  let desc;
+  if (link) {
+    desc = makeLink(goalFont, 'https://fonts.google.com/specimen/' + goalFont);
     desc.classList.add('fontDesc');
-    desc.textContent = goalFont;
-  } else {
     loadFonts(goalFont, swatch);
-    var desc = makeLink(goalFont, 'https://fonts.google.com/specimen/' + goalFont)
-    desc.classList.add('fontDesc');
+  } else {
+    desc = document.createElement('h5');
+    desc.textContent = goalFont;
   }
-
-  var section = document.getElementById(type);
+  desc.classList.add('fontDesc');
+  const section = document.getElementById(type);
   card.appendChild(desc);
   card.appendChild(swatch);
   section.appendChild(card);
 }
 
+function addProprietaryFont(item, goalFont) {
+  if (document.getElementById('prop').textContent === '') {
+    document.getElementById('prop').textContent = 'Proprietary Typefaces';
+  }
+  const card = document.createElement('li');
+  card.classList.add('pFont');
+
+  const desc = document.createElement('h5');
+  desc.classList.add('fontDesc');
+  desc.textContent = goalFont;
+
+  const section = document.getElementById('pFonts');
+  card.appendChild(desc);
+  section.appendChild(card);
+}
+
 function addFontStyle(item, type, style) {
-  var card = document.createElement('li');
+  const card = document.createElement('li');
   card.classList.add('style');
-  var swatch = document.createElement('div');
+  const swatch = document.createElement('div');
   swatch.classList.add('styleSwatch');
 
-  var text = document.createElement('span');
+  const text = document.createElement('span');
   text.classList.add('styleText');
-  var atr =  'font-' + style + ':' + item;
+  const atr =  'font-' + style + ':' + item;
   text.setAttribute('style', atr);
   text.textContent = defaultStyleText;
   swatch.appendChild(text);
 
-  var desc = document.createElement('span');
+  const desc = document.createElement('span');
   desc.classList.add('styleDesc');
   desc.textContent = style + ': ' +item;
 
-  var section = document.getElementById(type);
+  const section = document.getElementById(type);
   card.appendChild(swatch);
   card.appendChild(desc);
   section.appendChild(card);
 }
 
 function loadFonts(fontName, element) {
-  var head = document.getElementsByTagName('head')[0];
-  var link = document.createElement('link');
+  const head = document.getElementsByTagName('head')[0];
+  const link = document.createElement('link');
   link.id = fontName;
   link.rel = 'stylesheet';
   link.type = 'text/css';
   link.href = 'http://fonts.googleapis.com/css?family=' + fontName;
   head.appendChild(link);
   element.style.fontFamily = fontName;
 }
-
-function setSource(title, address) {
-  var titleLink = makeLink(title, address)
-  var heading = document.getElementById('source');
-  heading.appendChild(titleLink);
-}
-
-function makeLink(title, address) {
-  var link = document.createElement('a');
-  link.textContent = title;
-  link.title = title;
-  link.href = address;
-  link.target="_blank"
-  return link;
-}