add option to make headline text uppercase

source/javascripts/models/meme.js

@@ -25,6 +25,8 @@ MEME.MemeModel = Backbone.Model.extend({
     textAlignOpts: ['left', 'center', 'right'],
     textShadow: true,
     textShadowEdit: true,
+    textUppercase: true,
+    textUppercaseEdit: true,
     watermarkAlpha: 0.75,
     watermarkMaxWidthRatio: 0.25,
     watermarkSrc: '',

source/javascripts/settings.js.erb

@@ -10,7 +10,7 @@ var MEME_SETTINGS = {
   // 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.
@@ -31,25 +31,27 @@ var MEME_SETTINGS = {
   // 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.
-  
+
   // 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'}
   ],
 
   textShadow: false, // Text shadow toggle.
   textShadowEdit: true, // Toggles text shadow control within the editor.
+  textUppercase: false, // Text uppercase toggle.
+  textUppercaseEdit: false, // Toggles text uppercase control within the editor.
   watermarkAlpha: 1, // Opacity of watermark image.
   watermarkMaxWidthRatio: 0.25, // Maximum allowed width of watermark (percentage of total canvas width).
 
   // 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.
@@ -59,4 +61,4 @@ var MEME_SETTINGS = {
   ],
 
   width: 755 // Canvas rendering width.
-};
+};

source/javascripts/views/meme-canvas.js

@@ -104,6 +104,11 @@ MEME.MemeCanvasView = Backbone.View.extend({
         ctx.textAlign = 'left';
       }
 
+      // Uppercase text:
+      if (d.textUppercase) {
+        d.headlineText = d.headlineText.toUpperCase();
+      }
+
       var words = d.headlineText.split(' ');
       var line  = '';
 

source/javascripts/views/meme-editor.js

@@ -65,6 +65,7 @@ MEME.MemeEditorView = Backbone.View.extend({
     this.$('#font-family').val(d.fontFamily);
     this.$('#text-align').val(d.textAlign);
     this.$('#text-shadow').prop('checked', d.textShadow);
+    this.$('#text-uppercase').prop('checked', d.textUppercase);
     this.$('#overlay').find('[value="'+d.overlayColor+'"]').prop('checked', true);
   },
 
@@ -77,6 +78,7 @@ MEME.MemeEditorView = Backbone.View.extend({
     'change #watermark': 'onWatermark',
     'change #text-align': 'onTextAlign',
     'change #text-shadow': 'onTextShadow',
+    'change #text-uppercase': 'onTextUppercase',
     'change [name="overlay"]': 'onOverlayColor',
     'dragover #dropzone': 'onZoneOver',
     'dragleave #dropzone': 'onZoneOut',
@@ -99,6 +101,10 @@ MEME.MemeEditorView = Backbone.View.extend({
     this.model.set('textShadow', this.$('#text-shadow').prop('checked'));
   },
 
+  onTextUppercase: function() {
+    this.model.set('textUppercase', this.$('#text-uppercase').prop('checked'));
+  },
+
   onFontSize: function() {
     this.model.set('fontSize', this.$('#font-size').val());
   },
@@ -145,4 +151,4 @@ MEME.MemeEditorView = Backbone.View.extend({
       this.$('#dropzone').removeClass('pulse');
     }
   }
-});
+});

source/partials/_editor.html.erb

@@ -1,12 +1,12 @@
 <form class="m-editor" id="meme-editor-view">
   <div class="dropzone" id="dropzone">Drop Image Here</div>
-  
+
   <h2><label for="image-scale">Resize image</label></h2>
   <input id="image-scale" type="range" max="4" min=".01" step=".01" value="1">
-  
+
   <h2><label for="headline">Headline</label></h2>
   <textarea id="headline" name="headline" type="text" value=""></textarea>
-  
+
   <select class="text-align" id="text-align">
     <option value="" disabled>Select alignment</option>
   </select>
@@ -20,8 +20,10 @@
   </select>
 
   <div class="checkbox-group text-shadow">
-    <input id="text-shadow" name="shadow" type="checkbox"> 
+    <input id="text-shadow" name="shadow" type="checkbox">
     <label for="text-shadow">Text Shadow</label>
+    <input id="text-uppercase" name="uppercase" type="checkbox">
+    <label for="text-uppercase">Text Uppercase</label>
   </div>
 
   <select class="watermark" id="watermark">