Bug 1159339 - Part 1: Basic skeleton for the app.

DouglasSherk · Apr 28, 2015 · 22801d3 · 22801d3
1 parent d5e08e5
commit 22801d3
Show file tree

Hide file tree

Showing 30 changed files with 6,050 additions and 0 deletions.
diff --git a/bower_components/font-fit/.bower.json b/bower_components/font-fit/.bower.json
@@ -0,0 +1,26 @@
+{
+  "name": "font-fit",
+  "main": "font-fit.js",
+  "version": "0.3.0",
+  "authors": [
+    "Wilson Page <wilsonpage@me.com>"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "homepage": "https://github.com/gaia-components/font-fit",
+  "_release": "0.3.0",
+  "_resolution": {
+    "type": "version",
+    "tag": "v0.3.0",
+    "commit": "229824447d7ac46a2af6eca7d91382bdcf6f0c04"
+  },
+  "_source": "git://github.com/gaia-components/font-fit.git",
+  "_target": "~0.3.0",
+  "_originalSource": "gaia-components/font-fit"
+}
diff --git a/bower_components/font-fit/README.md b/bower_components/font-fit/README.md
@@ -0,0 +1,37 @@
+# font-fit [![](https://travis-ci.org/gaia-components/font-fit.svg)](https://travis-ci.org/gaia-components/font-fit)
+
+A fast, lightweight library for sizing text-content to fit.
+
+## Demo
+
+- [Demo](http://gaia-components.github.io/font-fit/)
+
+## Installation
+
+```bash
+$ bower install gaia-components/font-fit
+```
+
+## Usage
+
+```js
+var result = fontFit({
+  text: 'hello world',
+  font: 'italic 24px arial',
+  space: myElement.clientWidth, // space for text,
+  min: 16, // min font-size (optional)
+  max: 24 // max font-size (optional)
+});
+
+myElement.style.fontSize = result.fontSize + 'px';
+```
+
+## Tests
+
+1. Ensure Firefox Nightly is installed on your machine.
+2. `$ npm install`
+3. `$ npm test`
+
+If your would like tests to run on file change use:
+
+`$ npm run test-dev`
diff --git a/bower_components/font-fit/bower.json b/bower_components/font-fit/bower.json
@@ -0,0 +1,16 @@
+{
+  "name": "font-fit",
+  "main": "font-fit.js",
+  "version": "0.3.0",
+  "authors": [
+    "Wilson Page <wilsonpage@me.com>"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}
diff --git a/bower_components/font-fit/font-fit.js b/bower_components/font-fit/font-fit.js
@@ -0,0 +1,132 @@
+;(function(define){define(function(require,exports,module){
+'use strict';
+
+/**
+ * Simple logger.
+ *
+ * @return {Function}
+ */
+var debug = 0 ? console.log.bind(console) : function(){};
+
+/**
+ * Global canvas cache.
+ *
+ * @type {Object}
+ */
+var cache = {};
+
+/**
+ * Default min/max font-size.
+ *
+ * @type {Number}
+ */
+var MIN = 16;
+var MAX = 24;
+
+/**
+ * The number of pixels to subtract from
+ * the given `config.space` to ensure
+ * HTML text doesn't overflow container.
+ *
+ * Ideally we would use 1px, but in some
+ * cases italicised text in canvas is ~2px
+ * longer than the same text in HTML.
+ *
+ * http://bugzil.la/1126391
+ *
+ * @type {Number}
+ */
+var BUFFER = 3;
+
+/**
+ * Get the font-size that closest fits
+ * the given space with the given font.
+ *
+ * Config:
+ *
+ *   - {String} `text` The text string
+ *   - {String} `font` Font shorthand string
+ *   - {Number} `space` Width (px) to fit the text into
+ *   - {Number} `min` Min font-size (px) (optional)
+ *   - {Number} `max` Max font-size (px) (optional)
+ *
+ * @param  {Object} config
+ * @return {Object} {fontSize,overflowing,textWidth}
+ */
+module.exports = function(config) {
+  debug('font fit', config);
+  var space = config.space - BUFFER;
+  var min = config.min || MIN;
+  var max = config.max || MAX;
+  var text = trim(config.text);
+  var fontSize = max;
+  var textWidth;
+  var font;
+
+  do {
+    font = config.font.replace(/\d+px/, fontSize + 'px');
+    textWidth = getTextWidth(text, font);
+  } while (textWidth > space && fontSize !== min && fontSize--);
+
+  return {
+    textWidth: textWidth,
+    fontSize: fontSize,
+    overflowing: textWidth > space
+  };
+};
+
+/**
+ * Get the width of the given text
+ * with the given font style.
+ *
+ * @param  {String} text
+ * @param  {String} font (CSS shorthand)
+ * @return {Number} (px)
+ */
+function getTextWidth(text, font) {
+  var ctx = getCanvasContext(font);
+  var width = ctx.measureText(text).width;
+  debug('got text width', width);
+  return width;
+}
+
+/**
+ * Get a canvas context configured
+ * to the given font style.
+ *
+ * @param  {String} font
+ * @return {CanvasRenderingContext2D}
+ */
+function getCanvasContext(font) {
+  debug('get canvas context', font);
+
+  var cached = cache[font];
+  if (cached) { return cached; }
+
+  var canvas = document.createElement('canvas');
+  canvas.setAttribute('moz-opaque', 'true');
+  canvas.setAttribute('width', '1px');
+  canvas.setAttribute('height', '1px');
+  debug('created canvas', canvas);
+
+  var ctx = canvas.getContext('2d', { willReadFrequently: true });
+  ctx.font = font;
+
+  return cache[font] = ctx;
+}
+
+/**
+ * Trim leading, trailing
+ * and excess whitespace.
+ *
+ * @param  {String} text
+ * @return {String}
+ */
+function trim(text) {
+  return text.replace(/\s+/g, ' ').trim();
+}
+
+});})(typeof define=='function'&&define.amd?define
+:(function(n,w){'use strict';return typeof module=='object'?function(c){
+c(require,exports,module);}:function(c){var m={exports:{}};c(function(n){
+return w[n];},m.exports,m);w[n]=m.exports;};})('font-fit',this));
diff --git a/bower_components/font-fit/index.html b/bower_components/font-fit/index.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>font-fit demo</title>
+  <script src="font-fit.js"></script>
+  <style>
+
+    * { box-sizing: border-box; }
+
+    body {
+      font: 24px Arial;
+      background: #222;
+      color: #eee;
+      margin: 0;
+    }
+
+    header {
+      position: absolute;
+      right: 0;
+      left: 0;
+      top: 0;
+      z-index: 1;
+
+      display: flex;
+      padding: 20px;
+    }
+
+    input {
+      display: block;
+      background: #151515;
+      border: 0;
+      color: #666;
+      font-size: 16px;
+
+      width: 100%;
+      padding: 8px 14px;
+
+      border-radius: 4px 0 0 4px;
+    }
+
+    button {
+      display: block;
+      vertical-align: top;
+      background: #444;
+      border: 0;
+      color: #fff;
+      font-size: 17px;
+      letter-spacing: 1px;
+      line-height: 1;
+      padding: 8px 11px;
+      border-radius: 0 4px 4px 0;
+
+    }
+
+    section {
+      position: absolute;
+      left: 0;
+      top: -3%;
+      width: 100%;
+      height: 100%;
+
+      display: flex;
+      align-items: center;
+      padding: 20px;
+    }
+
+    h1 {
+      width: 100%;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      text-align: center;
+    }
+
+  </style>
+</head>
+
+<body>
+  <header>
+    <input id="input" value="font-fit.js">
+    <button id="button">Fit</button>
+  </header>
+  <section>
+    <h1 id="el"></h1>
+  </section>
+
+  <script>
+    var fontFit = window['font-fit'];
+
+    function run() {
+      el.textContent = input.value;
+      var result = fontFit({
+        text: el.textContent,
+        font: 'bold 24px sans-serif',
+        space: el.clientWidth,
+        max: 350
+      });
+
+      el.style.fontSize = result.fontSize + 'px';
+    }
+
+    run();
+    button.onclick = run;
+  </script>
+</body>
+</html>
diff --git a/bower_components/font-fit/package.json b/bower_components/font-fit/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "font-fit",
+  "homepage": "https://github.com/gaia-components/font-fit",
+  "version": "0.2.1",
+  "main": "font-fit.js",
+  "directories": {
+    "example": "examples",
+    "test": "test"
+  },
+  "devDependencies": {
+    "bower": "^1.3.5",
+    "browserify": "^5.11.2",
+    "karma": "^0.12.16",
+    "karma-firefox-launcher": "^0.1.3",
+    "karma-mocha": "^0.1.3",
+    "karma-sinon-chai": "^0.1.6",
+    "mozilla-download": "^0.4.3"
+  },
+  "scripts": {
+    "test": "./node_modules/karma/bin/karma start test/karma.conf.js --single-run",
+    "test-dev": "./node_modules/karma/bin/karma start test/karma.conf.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/gaia-components/font-fit.git"
+  },
+  "bugs": {
+    "url": "https://github.com/gaia-components/font-fit/issues"
+  }
+}
diff --git a/bower_components/gaia-component/.bower.json b/bower_components/gaia-component/.bower.json
@@ -0,0 +1,27 @@
+{
+  "name": "gaia-component",
+  "version": "0.3.5",
+  "authors": [
+    "Wilson Page <wilsonpage@me.com>"
+  ],
+  "main": "gaia-component.js",
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "homepage": "https://github.com/gaia-components/gaia-component",
+  "_release": "0.3.5",
+  "_resolution": {
+    "type": "version",
+    "tag": "v0.3.5",
+    "commit": "e29dfbd8e07a96cbe521df8067120b78c306b584"
+  },
+  "_source": "git://github.com/gaia-components/gaia-component.git",
+  "_target": "~0.3.5",
+  "_originalSource": "gaia-components/gaia-component",
+  "_direct": true
+}