Updated Meme features

Gemfile.lock

@@ -1,63 +1,72 @@
 GEM
   remote: http://rubygems.org/
   specs:
-    activesupport (4.1.1)
+    activesupport (4.1.16)
       i18n (~> 0.6, >= 0.6.9)
       json (~> 1.7, >= 1.7.7)
       minitest (~> 5.1)
       thread_safe (~> 0.1)
       tzinfo (~> 1.1)
-    chunky_png (1.3.1)
-    coffee-script (2.2.0)
+    celluloid (0.16.0)
+      timers (~> 4.0.0)
+    chunky_png (1.3.8)
+    coffee-script (2.4.1)
       coffee-script-source
       execjs
-    coffee-script-source (1.7.0)
-    compass (0.12.6)
+    coffee-script-source (1.12.2)
+    compass (1.0.3)
       chunky_png (~> 1.2)
-      fssm (>= 0.2.7)
-      sass (~> 3.2.19)
-    compass-import-once (1.0.4)
+      compass-core (~> 1.0.2)
+      compass-import-once (~> 1.0.5)
+      rb-fsevent (>= 0.9.3)
+      rb-inotify (>= 0.9)
+      sass (>= 3.3.13, < 3.5)
+    compass-core (1.0.3)
+      multi_json (~> 1.0)
+      sass (>= 3.3.0, < 3.5)
+    compass-import-once (1.0.5)
       sass (>= 3.2, < 3.5)
     em-websocket (0.5.1)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0.6.0)
     erubis (2.7.0)
-    eventmachine (1.0.3)
-    execjs (2.2.0)
-    ffi (1.9.3)
-    fssm (0.2.10)
-    haml (4.0.5)
+    eventmachine (1.2.5)
+    execjs (2.7.0)
+    ffi (1.9.18)
+    haml (5.0.2)
+      temple (>= 0.8.0)
       tilt
     hike (1.2.3)
-    hooks (0.4.0)
-      uber (~> 0.0.4)
+    hitimes (1.2.6)
+    hooks (0.4.1)
+      uber (~> 0.0.14)
     http_parser.rb (0.6.0)
-    i18n (0.6.9)
-    json (1.8.1)
-    kramdown (1.4.0)
-    listen (1.3.1)
+    i18n (0.7.0)
+    json (1.8.6)
+    kramdown (1.14.0)
+    listen (2.10.1)
+      celluloid (~> 0.16.0)
       rb-fsevent (>= 0.9.3)
       rb-inotify (>= 0.9)
-      rb-kqueue (>= 0.2)
-    middleman (3.3.3)
-      coffee-script (~> 2.2.0)
-      compass (>= 0.12.4)
-      compass-import-once (= 1.0.4)
+    middleman (3.3.12)
+      coffee-script (~> 2.2)
+      compass (>= 1.0.0, < 2.0.0)
+      compass-import-once (= 1.0.5)
       execjs (~> 2.0)
       haml (>= 4.0.5)
       kramdown (~> 1.2)
-      middleman-core (= 3.3.3)
+      middleman-core (= 3.3.12)
       middleman-sprockets (>= 3.1.2)
-      sass (>= 3.2.17, < 4.0)
+      sass (>= 3.4.0, < 4.0)
       uglifier (~> 2.5)
-    middleman-core (3.3.3)
+    middleman-core (3.3.12)
       activesupport (~> 4.1.0)
       bundler (~> 1.1)
       erubis
       hooks (~> 0.3)
-      i18n (~> 0.6.9)
-      listen (~> 1.1)
-      padrino-helpers (~> 0.12.1)
+      i18n (~> 0.7.0)
+      listen (>= 2.7.9, < 3.0)
+      padrino-helpers (~> 0.12.3)
       rack (>= 1.4.5, < 2.0)
       rack-test (~> 0.6.2)
       thor (>= 0.15.2, < 2.0)
@@ -67,47 +76,48 @@ GEM
       middleman-core (>= 3.0.2)
       multi_json (~> 1.0)
       rack-livereload
-    middleman-sprockets (3.3.3)
-      middleman-core (>= 3.2)
-      sprockets (~> 2.2)
+    middleman-sprockets (3.5.0)
+      middleman-core (>= 3.3)
+      sprockets (~> 2.12.1)
       sprockets-helpers (~> 1.1.0)
-      sprockets-sass (~> 1.1.0)
-    minitest (5.3.5)
-    multi_json (1.10.1)
-    padrino-helpers (0.12.2)
+      sprockets-sass (~> 1.3.0)
+    minitest (5.10.3)
+    multi_json (1.12.1)
+    padrino-helpers (0.12.8.1)
       i18n (~> 0.6, >= 0.6.7)
-      padrino-support (= 0.12.2)
+      padrino-support (= 0.12.8.1)
       tilt (~> 1.4.1)
-    padrino-support (0.12.2)
+    padrino-support (0.12.8.1)
       activesupport (>= 3.1)
-    rack (1.5.2)
-    rack-livereload (0.3.15)
+    rack (1.6.8)
+    rack-livereload (0.3.16)
       rack
-    rack-test (0.6.2)
+    rack-test (0.6.3)
       rack (>= 1.0)
-    rb-fsevent (0.9.4)
-    rb-inotify (0.9.5)
-      ffi (>= 0.5.0)
-    rb-kqueue (0.2.3)
-      ffi (>= 0.5.0)
-    sass (3.2.19)
-    sprockets (2.12.1)
+    rb-fsevent (0.10.2)
+    rb-inotify (0.9.10)
+      ffi (>= 0.5.0, < 2)
+    sass (3.4.25)
+    sprockets (2.12.4)
       hike (~> 1.2)
       multi_json (~> 1.0)
       rack (~> 1.0)
       tilt (~> 1.1, != 1.3.0)
     sprockets-helpers (1.1.0)
       sprockets (~> 2.0)
-    sprockets-sass (1.1.0)
+    sprockets-sass (1.3.1)
       sprockets (~> 2.0)
       tilt (~> 1.1)
-    thor (0.19.1)
-    thread_safe (0.3.4)
+    temple (0.8.0)
+    thor (0.19.4)
+    thread_safe (0.3.6)
     tilt (1.4.1)
-    tzinfo (1.2.1)
+    timers (4.0.4)
+      hitimes
+    tzinfo (1.2.3)
       thread_safe (~> 0.1)
-    uber (0.0.6)
-    uglifier (2.5.1)
+    uber (0.0.15)
+    uglifier (2.7.2)
       execjs (>= 0.3.0)
       json (>= 1.8.0)
 
@@ -119,3 +129,6 @@ DEPENDENCIES
   middleman-livereload (~> 3.1.0)
   tzinfo-data
   wdm (~> 0.1.0)
+
+BUNDLED WITH
+   1.14.6

source/javascripts/models/meme.js

@@ -9,10 +9,10 @@ MEME.MemeModel = Backbone.Model.extend({
     creditSize: 12,
     downloadName: 'share',
     fontColor: 'white',
+    fontColorOpts: ['#FFF', '#000', '#777', '#2980b9'],
     fontFamily: 'Helvetica Neue',
     fontFamilyOpts: ['Helvetica', 'Helvetica Neue', 'Comic Sans MS'],
     fontSize: 24,
-    fontSizeOpts: [14, 24, 36],
     headlineText: 'Write your own headline',
     height: 378,
     imageScale: 1,

source/javascripts/settings.js.erb

@@ -2,26 +2,23 @@ var MEME_SETTINGS = {
   creditText: 'Source:', // Default "credits" text.
   creditSize: 12, // Font size for credit text.
   downloadName: 'share', // The name of the downloaded image file (will have a ".png" extension added).
+
+  // Font color
   fontColor: 'white', // Universal font color.
+  fontColorOpts: ['#FFF', '#000', '#777', '#2980b9'],
 
   // Universal font family for texts:
   // Note that you'll need to included quoted font names as you would in CSS, ie: '"Knockout 28 B"'.
   fontFamily: 'Helvetica Neue',
   // Font family options: set to empty array to disable font selector.
   // These options may also be formatted as {text:'Knockout', value:'"Knockout 28 B"'}.
   fontFamilyOpts: ['Arial', 'Helvetica Neue', 'Comic Sans MS'],
-  
+
   // Font size of main headline:
   fontSize: 24,
-  // Font size options: set to empty array to disable font-size selector.
-  fontSizeOpts: [
-    {text: 'Small text', value: 14},
-    {text: 'Medium text', value: 24},
-    {text: 'Large text', value: 36}
-  ],
 
   headlineText: 'Write your own headline', // Default headline text.
-  height: 378, // Canvas rendering height.
+  // height: 378, // Canvas rendering height.
   imageScale: 1, // Background image scale.
   imageSrc: '', // Default background image path. MUST reside on host domain, or use base64 data.
   overlayAlpha: 0.5, // Opacity of image overlay.
@@ -30,13 +27,18 @@ var MEME_SETTINGS = {
   overlayColor: '#000',
   // Overlay color options: set to empty array to disable overlay options selector.
   overlayColorOpts: ['#000', '#777', '#2980b9'],
-  paddingRatio: 0.05, // Percentage of canvas width to use as edge padding.
-
+  paddingRatio: 0.1, // Percentage of canvas width to use as edge padding.
+
+  // Background color, or blank ('') for no overlay. Takes precedent over overlay.
+  backgroundColor: '',
+  // Background color options: set to empty array to disable overlay options selector.
+  backgroundColorOpts: ['#000', '#777', '#2980b9'],
+
   // Text alignment: valid settings are "left", "center", and "right".
   textAlign: 'left',
   // Text alignment options: set to empty array to disable alignment picker.
   textAlignOpts: [
-    {text: 'Align left', value: 'left'}, 
+    {text: 'Align left', value: 'left'},
     {text: 'Align center', value: 'center'},
     {text: 'Align right', value: 'right'}
   ],
@@ -49,7 +51,7 @@ var MEME_SETTINGS = {
   // Path to the watermark image source, or blank for no watermark:
   // Alternatively, use '<%= asset_data_uri("vox.png") %>' to populate the watermark with base64 data, avoiding Cross-Origin issues.
   watermarkSrc: (localStorage && localStorage.getItem('meme_watermark')) || '<%= image_path("vox.png") %>',
-  
+
   // Watermark image options: set to empty array to disable watermark picker.
   // NOTE: only populate the "data" attributes with base64 data when concerned about Cross-Origin requests...
   // Otherwise, just leave "data" attributes blank and allow images to load from your server.
@@ -58,5 +60,12 @@ var MEME_SETTINGS = {
     {text: 'The Verge', value: '<%= image_path("theverge.png") %>', data: ''}
   ],
 
-  width: 755 // Canvas rendering width.
+  // width: 755 // Canvas rendering width.
+  aspectRatio: 'twitter',
+  aspectRatioOpts: [
+    {text: '2:1 (Twitter)', value: 'twitter'},
+    {text: '1:1 (Facebook or Instagram)', value: 'instagram'},
+    {text: 'Facebook', value: 'facebook'},
+    {text: 'Pinterest', value: 'pinterest'}
+  ]
 };

source/javascripts/views/meme-canvas.js

@@ -39,6 +39,20 @@ MEME.MemeCanvasView = Backbone.View.extend({
     var ctx = this.canvas.getContext('2d');
     var padding = Math.round(d.width * d.paddingRatio);
 
+    switch (d.aspectRatio) {
+      case "twitter":
+        d.width = 1024, d.height = 512;
+        break;
+      case "facebook":
+        d.width = 1200, d.height = 630;
+        break;
+      case "instagram":
+        d.width = 1080, d.height = 1080;
+        break;
+      case "pinterest":
+        d.width = 736, d.height = 1128
+    }
+
     // Reset canvas display:
     this.canvas.width = d.width;
     this.canvas.height = d.height;
@@ -61,6 +75,16 @@ MEME.MemeCanvasView = Backbone.View.extend({
       }
     }
 
+    function renderBackgroundColor(ctx) {
+      if (d.backgroundColor) {
+        ctx.save();
+        ctx.fillStyle = d.backgroundColor;
+        ctx.fillRect(0, 0, d.width, d.height);
+        ctx.globalAlpha = 1;
+        ctx.restore();
+      }
+    }
+
     function renderOverlay(ctx) {
       if (d.overlayColor) {
         ctx.save();
@@ -157,6 +181,7 @@ MEME.MemeCanvasView = Backbone.View.extend({
 
     renderBackground(ctx);
     renderOverlay(ctx);
+    renderBackgroundColor(ctx);
     renderHeadline(ctx);
     renderCredit(ctx);
     renderWatermark(ctx);