From 6e5eb5a209e45d696521532e63a03ed4575873e9 Mon Sep 17 00:00:00 2001 From: Nikhil S Date: Wed, 28 Jan 2015 15:37:04 -0500 Subject: [PATCH] add option to make text uppercase --- source/javascripts/models/meme.js | 2 ++ source/javascripts/settings.js.erb | 12 +++++++----- source/javascripts/views/meme-canvas.js | 5 +++++ source/javascripts/views/meme-editor.js | 8 +++++++- source/partials/_editor.html.erb | 10 ++++++---- 5 files changed, 27 insertions(+), 10 deletions(-) diff --git a/source/javascripts/models/meme.js b/source/javascripts/models/meme.js index 72ef90c5..94eb9192 100644 --- a/source/javascripts/models/meme.js +++ b/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: '', diff --git a/source/javascripts/settings.js.erb b/source/javascripts/settings.js.erb index 97fddf34..45396e33 100644 --- a/source/javascripts/settings.js.erb +++ b/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. -}; \ No newline at end of file +}; diff --git a/source/javascripts/views/meme-canvas.js b/source/javascripts/views/meme-canvas.js index b5e0f0e1..6fb4c2ac 100644 --- a/source/javascripts/views/meme-canvas.js +++ b/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 = ''; diff --git a/source/javascripts/views/meme-editor.js b/source/javascripts/views/meme-editor.js index b5792f8c..8bbceed7 100644 --- a/source/javascripts/views/meme-editor.js +++ b/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'); } } -}); \ No newline at end of file +}); diff --git a/source/partials/_editor.html.erb b/source/partials/_editor.html.erb index 03708220..022bdf62 100644 --- a/source/partials/_editor.html.erb +++ b/source/partials/_editor.html.erb @@ -1,12 +1,12 @@
Drop Image Here
- +

- +

- + @@ -20,8 +20,10 @@
- + + +