Add a citation to your clip.

audiogram/draw-frames.js

@@ -25,6 +25,7 @@ function drawFrames(renderer, options, cb) {
 
     renderer.drawFrame(context, {
       caption: options.caption,
+      citation: options.citation,
       label: options.label,
       waveform: options.waveform[frameNumber],
       frame: frameNumber

audiogram/index.js

@@ -115,6 +115,7 @@ Audiogram.prototype.drawFrames = function(cb) {
       numFrames: self.numFrames,
       frameDir: self.frameDir,
       caption: self.settings.caption,
+      citation: self.settings.citation,
       label: self.settings.label,
       waveform: self.waveform,
       tick: function() {

client/index.js

@@ -58,6 +58,7 @@ function submitted() {
 
   var theme = preview.theme(),
       caption = preview.caption(),
+      citation = preview.citation(),
       label = preview.label(),
       selection = preview.selection(),
       file = preview.file();
@@ -91,6 +92,7 @@ function submitted() {
   }
   formData.append("theme", JSON.stringify($.extend({}, theme, { backgroundImageFile: null })));
   formData.append("caption", caption);
+  formData.append("citation", citation);
   formData.append("label", label);
 
   setClass("loading");
@@ -176,6 +178,9 @@ function initialize(err, themesWithImages) {
   // Get initial caption (e.g. back button)
   d3.select("#input-caption").on("change keyup", updateCaption).each(updateCaption);
 
+  // Get initial citation (e.g. back button)
+  d3.select("#input-citation").on("change keyup", updateCitation).each(updateCitation);
+
   // Space bar listener for audio play/pause
   d3.select(document).on("keypress", function(){
     if (!d3.select("body").classed("rendered") && d3.event.key === " " && !d3.matcher("input, textarea, button, select").call(d3.event.target)) {
@@ -245,6 +250,10 @@ function updateCaption() {
   preview.caption(this.value);
 }
 
+function updateCitation() {
+  preview.citation(this.value);
+}
+
 function updateLabel() {
   preview.label(this.value);
 }

client/preview.js

@@ -10,6 +10,7 @@ var context = d3.select("canvas").node().getContext("2d");
 
 var theme,
     caption,
+    citation,
     label,
     file,
     selection;
@@ -26,6 +27,10 @@ function _caption(_) {
   return arguments.length ? (caption = _, redraw()) : caption;
 }
 
+function _citation(_) {
+  return arguments.length ? (citation = _, redraw()) : citation;
+}
+
 function _label(_) {
   return arguments.length ? (label = _, redraw()) : label;
 }
@@ -85,6 +90,7 @@ function redraw() {
 
   renderer.drawFrame(context, {
     caption: caption,
+    citation: citation,
     label: label,
     waveform: sampleWave,
     frame: 0
@@ -114,6 +120,7 @@ function loadAudio(f, cb) {
 
 module.exports = {
   caption: _caption,
+  citation: _citation,
   label: _label,
   theme: _theme,
   file: _file,

editor/index.html

@@ -40,6 +40,12 @@
           </label>
           <input id="input-caption" name="caption" type="text" autocomplete="off" placeholder="Add a caption" />
         </div>
+        <div class="row form-row" id="row-citation">
+          <label for="input-citation">
+            Citation
+          </label>
+          <input id="input-citation" name="citation" type="text" autocomplete="off" placeholder="Who's being quoted? In what context?" />
+        </div>
         <div id="preview">
           <div style="background-color: black;">
             <div id="canvas">

renderer/index.js

@@ -58,6 +58,11 @@ module.exports = function(t) {
       wrapText(context, options.caption, 'caption');
     }
 
+    // Write the citation
+    if (options.citation) {
+      wrapText(context, options.citation, 'citation');
+    }
+
     // Write the label
     if (options.label) {
       wrapText(context, options.label, 'label');

renderer/text-wrapper.js

@@ -7,6 +7,10 @@ module.exports = function(theme) {
       right = ifNumeric(theme.captionRight, theme.width),
       bottom = ifNumeric(theme.captionBottom, null),
       top = ifNumeric(theme.captionTop, null),
+      citationLeft = ifNumeric(theme.citationLeft, 0),
+      citationRight = ifNumeric(theme.citationRight, theme.width),
+      citationBottom = ifNumeric(theme.citationBottom, null),
+      citationTop = ifNumeric(theme.citationTop, null),
       labelLeft = ifNumeric(theme.labelLeft, 0),
       labelRight = ifNumeric(theme.labelRight, theme.width),
       labelBottom = ifNumeric(theme.labelBottom, null),
@@ -23,6 +27,7 @@ module.exports = function(theme) {
   }
 
   var captionWidth = right - left,
+      citationWidth = citationRight - citationLeft;
       labelWidth = labelRight - labelLeft;
 
   return function(context, caption, type) {
@@ -98,6 +103,74 @@ module.exports = function(theme) {
     } // end if caption
 
 
+    if (type === 'citation') {
+      var lines = [[]],
+          maxWidth = 0,
+          words = smartquotes(caption + "").trim().replace(/\s\s+/g, " \n").split(/ /g);
+
+      context.font = theme.citationFont;
+      context.textBaseline = "top";
+      context.textAlign = theme.citationAlign || "center";
+
+      // Check whether each word exceeds the width limit
+      // Wrap onto next line as needed
+      words.forEach(function(word,i){
+
+        var width = context.measureText(lines[lines.length - 1].concat([word]).join(" ")).width;
+
+        if (word[0] === "\n" || (lines[lines.length - 1].length && width > citationWidth)) {
+
+          word = word.trim();
+          lines.push([word]);
+          width = context.measureText(word).width;
+
+        } else {
+
+          word = (i === 0) ? '— ' + word : word;
+          lines[lines.length - 1].push(word);
+
+        }
+
+        maxWidth = Math.max(maxWidth,width);
+
+      });
+
+      var totalHeight = lines.length * theme.citationLineHeight + (lines.length - 1) * theme.citationLineSpacing;
+
+      // horizontal alignment
+      var x = theme.citationAlign === "left" ? left : theme.citationAlign === "right" ? right : (left + right) / 2;
+
+      // Vertical alignment
+      var y;
+
+      if (citationTop !== null && citationBottom !== null) {
+        // Vertical center
+        y = (citationBottom + citationTop - totalHeight) / 2;
+      } else if (citationBottom !== null) {
+        // Vertical align bottom
+        y = citationBottom - totalHeight;
+      } else {
+        // Vertical align top
+        y = citationTop;
+      }
+
+      // draw citation
+      context.fillStyle = theme.citationColor;
+      lines.forEach(function(line, i){
+
+        // negative indentation for opening em dash
+        var indented_x = (x + 50);
+
+        if (i === 0 && /^—/.test(line[0])) {
+          context.fillText(line.join(" "), x, y + i * (theme.citationLineHeight + theme.citationLineSpacing));
+        }
+        else {
+          context.fillText(line.join(" "), indented_x, y + i * (theme.citationLineHeight + theme.citationLineSpacing));
+        }
+      });
+    } // end if citation
+
+
     if (type === 'label' && caption != 'None') {
       var lines = [[]],
           maxWidth = 0,

settings/themes.json

@@ -12,9 +12,18 @@
     "captionTop": 70,
     "captionLeft": 50,
     "captionRight": 860,
-    "captionFont": "300 71px 'NYT Franklin Light'",
-    "captionLineHeight": 80,
+    "captionFont": "300 68px 'NYT Franklin Light'",
+    "captionLineHeight": 76,
     "captionLineSpacing": 7,
+    "citationAlign": "left",
+    "citationFont": "300 38px 'NYT Franklin Light'",
+    "citationTopMargin": 40,
+    "citationTop": 342,
+    "citationLeft": 50,
+    "citationRight": 890,
+    "citationMaxBottom": 390,
+    "citationLineHeight": 38,
+    "citationLineSpacing": 7,
     "labelFont": "44px 'NYT Karnak'",
     "labelAlign": "left",
     "labelTop": 470,
@@ -25,6 +34,7 @@
   "NYT Light": {
     "waveColor": "#d9d9d9",
     "foregroundColor": "#000",
+    "citationColor": "#000",
     "backgroundImage": "t_logo_light.png",
     "labelColor": "#000"
   },
@@ -32,12 +42,14 @@
     "backgroundColor": "#000",
     "waveColor": "#4d4d4d",
     "foregroundColor": "#fff",
+    "citationColor": "#fff",
     "backgroundImage": "t_logo_dark.png",
     "labelColor": "#fff"
   },
   "Still Processing": {
     "waveColor": "rgba(102, 80, 62, 0.25)",
     "foregroundColor": "#66503e",
+    "citationColor": "#66503e",
     "backgroundColor": "#f4d7b9",
     "backgroundImage": "t_logo_white_alpha.png",
     "labelColor": "#fff",
@@ -46,6 +58,7 @@
   "The Daily": {
     "waveColor": "rgba(102, 102, 102, 0.25)",
     "foregroundColor": "#fff",
+    "citationColor": "#fff",
     "backgroundColor": "#f4d7b9",
     "backgroundImage": "the_daily_audiogram_background.png",
     "labelColor": "#fff",