Standardizing options configuration.

statesman · Sep 5, 2014 · 147631c · 147631c
1 parent 5583d6a
commit 147631c
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 33 deletions.
diff --git a/source/javascripts/helpers/font-monitor.js b/source/javascripts/helpers/font-monitor.js
@@ -2,7 +2,13 @@ MEME.waitForFonts = function(callback) {
 
   // Parse out fonts list:
   var fonts = this.model.get('fontFamily').split(',');
-  fonts = fonts.concat(this.model.get('fontFamilyOpts') || []);
+
+  // Concat on additional font options:
+  fonts = _.map(this.model.get('fontFamilyOpts') || [], function(opt) {
+    return opt.hasOwnProperty('value') ? opt.value : opt;
+  }).concat(fonts);
+
+  // Filter down to unique fonts list:
   fonts = _.unique(fonts);
 
   // Setup loader values:

diff --git a/source/javascripts/models/meme.js b/source/javascripts/models/meme.js
@@ -73,8 +73,9 @@ MEME.MemeModel = Backbone.Model.extend({
     this.loadFileForImage(file, this.watermark);
   }
 
-  /*,setWatermarkSrc: function(src) {
+  /*, setWatermarkSrc: function(src) {
     var option = _.findWhere(this.get('watermarkOpts'), {value: src});
     this.watermark.src = (option && option.data) || src;
+    this.set('watermarkSrc', src);
   }*/
 });
diff --git a/source/javascripts/settings.js.erb b/source/javascripts/settings.js.erb
@@ -8,7 +8,11 @@ var MEME_SETTINGS = {
   fontFamilyOpts: [],
   fontSize: 24, // Font size of main headline.
   // Font size options: set to empty array to disable font-size selector.
-  fontSizeOpts: [14, 24, 36],
+  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.
   imageScale: 1, // Background image scale.
@@ -18,19 +22,23 @@ var MEME_SETTINGS = {
   // Overlay color options: set to empty array to disable overlay options selector.
   overlayColorOpts: ['#000', '#777', '#d32027'],
   paddingRatio: 0.05, // Percentage of canvas width to use as edge padding.
-  textAlign: 'left', // Text alignment.
+  textAlign: 'left', // Text alignment. Valid values are "left", "center", and "right".
   // Text alignment options: set to empty array to disable alignment picker.
-  textAlignOpts: ['left', 'center', 'right'],
+  textAlignOpts: [
+    {text: 'Align left', value: 'left'}, 
+    {text: 'Align center', value: 'center'},
+    {text: 'Align right', value: 'right'}
+  ],
   textShadow: false, // Text shadow.
   textShadowEdit: false, // Toggles text shadow control within the editor.
   watermarkAlpha: 1, // Opacity of watermark image.
   watermarkMaxWidthRatio: 1, // Maximum allowed width of watermark, relative to canvas width.
   watermarkSrc: (localStorage && localStorage.getItem('sbn_meme_watermark')) || '<%= image_path("sbnation.png") %>', // Load watermark pref out of localStorage.
   watermarkOpts: [
-    {text: 'SB Nation', value: '<%= image_path("sbnation.png") %>'}, // data: '<% asset_data_uri("sbnation.png") %>'},
-    {text: 'Bloody Elbow', value: '<%= image_path("bloodyelbow.png") %>'}, // data: '<% asset_data_uri("bloodyelbow.png") %>'},
-    {text: 'MMA Fighting', value: '<%= image_path("mmafighting.png") %>'}, // data: '<% asset_data_uri("mmafighting.png") %>'},
-    {text: 'MMA Mania', value: '<%= image_path("mmamania.png") %>'} // data: '<% asset_data_uri("mmamania.png") %>'}
+    {text: 'SB Nation', value: '<%= image_path("sbnation.png") %>', data: ''}, // data: '<% asset_data_uri("sbnation.png") %>'
+    {text: 'Bloody Elbow', value: '<%= image_path("bloodyelbow.png") %>', data: ''},
+    {text: 'MMA Fighting', value: '<%= image_path("mmafighting.png") %>', data: ''},
+    {text: 'MMA Mania', value: '<%= image_path("mmamania.png") %>', data: ''}
   ],
   width: 755 // Canvas rendering width.
 };
diff --git a/source/javascripts/views/meme-editor.js b/source/javascripts/views/meme-editor.js
@@ -14,53 +14,45 @@ MEME.MemeEditorView = Backbone.View.extend({
   buildForms: function() {
     var d = this.model.toJSON();
 
+    function buildOptions(opts) {
+      return _.reduce(opts, function(memo, opt) {
+        return memo += ['<option value="', opt.hasOwnProperty('value') ? opt.value : opt, '">', opt.hasOwnProperty('text') ? opt.text : opt, '</option>'].join('');
+      }, '');
+    }
+
     if (d.textShadowEdit) {
       $('#text-shadow').parent().show();
     }
 
     // Build text alignment options:
     if (d.textAlignOpts && d.textAlignOpts.length) {
-      var alignOpts = _.reduce(d.textAlignOpts, function(memo, opt) {
-        return memo += ['<option value="', opt, '">Align ', opt, '</option>'].join('');
-      }, '');
-
-      $('#text-align').append(alignOpts).show();
+      $('#text-align').append(buildOptions(d.textAlignOpts)).show();
     }
 
     // Build font size options:
     if (d.fontSizeOpts && d.fontSizeOpts.length) {
-      var sizeLabels = ['Small', 'Medium', 'Large', 'Massive'];
-      var sizeOpts = _.reduce(d.fontSizeOpts, function(memo, opt, index) {
-        return memo += ['<option value="', opt, '">', sizeLabels[index], ' text</option>'].join('');
-      }, '');
-
-      $('#font-size').append(sizeOpts).show();
+      $('#font-size').append(buildOptions(d.fontSizeOpts)).show();
     }
 
     // Build font family options:
     if (d.fontFamilyOpts && d.fontFamilyOpts.length) {
-      var familyOpts = _.reduce(d.fontFamilyOpts, function(memo, opt) {
-        return memo += ['<option value="', opt, '">', opt, '</option>'].join('');
-      }, '');
+      $('#font-family').append(buildOptions(d.fontFamilyOpts)).show();
+    }
 
-      $('#font-family').append(familyOpts).show();
+    // Build watermark options:
+    if (d.watermarkOpts && d.watermarkOpts.length) {
+      $('#watermark').append(buildOptions(d.watermarkOpts)).show();
     }
 
+    // Build overlay color options:
     if (d.overlayColorOpts && d.overlayColorOpts.length) {
       var overlayOpts = _.reduce(d.overlayColorOpts, function(memo, opt) {
-        return memo += '<li><label><input class="m-editor__swatch" style="background-color:'+opt+'" type="radio" name="overlay" value="'+opt+'"></label></li>';
+        var color = opt.hasOwnProperty('value') ? opt.value : opt;
+        return memo += '<li><label><input class="m-editor__swatch" style="background-color:'+color+'" type="radio" name="overlay" value="'+color+'"></label></li>';
       }, '');
 
       $('#overlay').show().find('ul').append(overlayOpts);
     }
-
-    if (d.watermarkOpts && d.watermarkOpts.length) {
-      var watermarkOpts = _.reduce(d.watermarkOpts, function(memo, opt) {
-        return memo += '<option value="'+opt.value+'">'+opt.text+'</option>';
-      }, '');
-
-      $('#watermark').append(watermarkOpts);
-    }
   },
 
   render: function() {