From 0cfcb396a53ffa86984799da394366b9a8157a7d Mon Sep 17 00:00:00 2001 From: Ezra Mechaber Date: Mon, 7 Aug 2017 20:42:38 -0400 Subject: [PATCH 1/3] Initial updates --- source/javascripts/models/meme.js | 2 +- source/javascripts/settings.js.erb | 22 +++--- source/javascripts/views/meme-canvas.js | 11 +++ source/javascripts/views/meme-editor.js | 77 +++++++++++++++++-- source/partials/_editor.html.erb | 94 +++++++++++++++-------- source/stylesheets/_globals.scss | 24 ++++++ source/stylesheets/modules/_m-editor.scss | 88 ++++++++++++++++++++- 7 files changed, 265 insertions(+), 53 deletions(-) diff --git a/source/javascripts/models/meme.js b/source/javascripts/models/meme.js index 72ef90c5..64eab796 100644 --- a/source/javascripts/models/meme.js +++ b/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, diff --git a/source/javascripts/settings.js.erb b/source/javascripts/settings.js.erb index 97fddf34..6935b17f 100644 --- a/source/javascripts/settings.js.erb +++ b/source/javascripts/settings.js.erb @@ -2,7 +2,10 @@ 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"'. @@ -10,15 +13,9 @@ 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. - 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. @@ -31,12 +28,17 @@ 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. - + + // 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. diff --git a/source/javascripts/views/meme-canvas.js b/source/javascripts/views/meme-canvas.js index b5e0f0e1..cd8d074d 100644 --- a/source/javascripts/views/meme-canvas.js +++ b/source/javascripts/views/meme-canvas.js @@ -61,6 +61,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 +167,7 @@ MEME.MemeCanvasView = Backbone.View.extend({ renderBackground(ctx); renderOverlay(ctx); + renderBackgroundColor(ctx); renderHeadline(ctx); renderCredit(ctx); renderWatermark(ctx); diff --git a/source/javascripts/views/meme-editor.js b/source/javascripts/views/meme-editor.js index b5792f8c..30419c29 100644 --- a/source/javascripts/views/meme-editor.js +++ b/source/javascripts/views/meme-editor.js @@ -39,6 +39,25 @@ MEME.MemeEditorView = Backbone.View.extend({ $('#font-family').append(buildOptions(d.fontFamilyOpts)).show(); } + // Build font color options: + if (d.fontColorOpts && d.fontColorOpts.length) { + var fontOpts = _.reduce( + d.fontColorOpts, + function(memo, opt) { + var color = opt.hasOwnProperty("value") ? opt.value : opt; + return (memo += + '
    • '); + }, + "" + ); + + $("#font-color").show().find("ul").append(fontOpts); + } + // Build watermark options: if (d.watermarkOpts && d.watermarkOpts.length) { $('#watermark').append(buildOptions(d.watermarkOpts)).show(); @@ -55,17 +74,41 @@ MEME.MemeEditorView = Backbone.View.extend({ } }, + // Build background color options: + if (d.backgroundColorOpts && d.backgroundColorOpts.length) { + var backgroundOpts = _.reduce( + d.backgroundColorOpts, + function(memo, opt) { + var color = opt.hasOwnProperty("value") ? opt.value : opt; + return (memo += + '
    • '); + }, + "" + ); + + $("#background-color").show().find("ul").append(backgroundOpts); + } +}, + render: function() { var d = this.model.toJSON(); this.$('#headline').val(d.headlineText); this.$('#credit').val(d.creditText); this.$('#watermark').val(d.watermarkSrc); + this.$("#watermark-alpha").val(d.watermarkAlpha); this.$('#image-scale').val(d.imageScale); this.$('#font-size').val(d.fontSize); this.$('#font-family').val(d.fontFamily); + this.$("#font-color").find('[value="' + d.fontColor + '"]').prop("checked", true); + this.$("#overlay-alpha").val(d.overlayAlpha); this.$('#text-align').val(d.textAlign); this.$('#text-shadow').prop('checked', d.textShadow); this.$('#overlay').find('[value="'+d.overlayColor+'"]').prop('checked', true); + this.$("#backgroundcolor").find('[value="' + d.backgroundColor + '"]').prop("checked", true); }, events: { @@ -74,13 +117,17 @@ MEME.MemeEditorView = Backbone.View.extend({ 'input #image-scale': 'onScale', 'change #font-size': 'onFontSize', 'change #font-family': 'onFontFamily', - 'change #watermark': 'onWatermark', - 'change #text-align': 'onTextAlign', - 'change #text-shadow': 'onTextShadow', - 'change [name="overlay"]': 'onOverlayColor', - 'dragover #dropzone': 'onZoneOver', - 'dragleave #dropzone': 'onZoneOut', - 'drop #dropzone': 'onZoneDrop' + 'change [name="font-color"]': "onFontColor", + "change #watermark": "onWatermark", + "change #watermark-alpha": "onWatermarkAlpha", + "change #text-align": "onTextAlign", + "change #text-shadow": "onTextShadow", + "change #overlay-alpha": "onOverlayAlpha", + 'change [name="overlay"]': "onOverlayColor", + 'change [name="background-color"]': "onBackgroundColor", + "dragover #dropzone": "onZoneOver", + "dragleave #dropzone": "onZoneOut", + "drop #dropzone": "onZoneDrop" }, onCredit: function() { @@ -107,19 +154,35 @@ MEME.MemeEditorView = Backbone.View.extend({ this.model.set('fontFamily', this.$('#font-family').val()); }, + onFontColor: function(evt) { + this.model.set("fontColor", this.$(evt.target).val()); + }, + onWatermark: function() { this.model.set('watermarkSrc', this.$('#watermark').val()); if (localStorage) localStorage.setItem('meme_watermark', this.$('#watermark').val()); }, + onWatermarkAlpha: function() { + this.model.set("watermarkAlpha", this.$("#watermark-alpha").val()); + }, + onScale: function() { this.model.set('imageScale', this.$('#image-scale').val()); }, + onOverlayAlpha: function() { + this.model.set("overlayAlpha", this.$("#overlay-alpha").val()); + }, + onOverlayColor: function(evt) { this.model.set('overlayColor', this.$(evt.target).val()); }, + onBackgroundColor: function(evt) { + this.model.set("backgroundColor", this.$(evt.target).val()); + }, + getDataTransfer: function(evt) { evt.stopPropagation(); evt.preventDefault(); diff --git a/source/partials/_editor.html.erb b/source/partials/_editor.html.erb index 03708220..8c2537ed 100644 --- a/source/partials/_editor.html.erb +++ b/source/partials/_editor.html.erb @@ -1,40 +1,68 @@
    -
    Drop Image Here
    - -

    - - -

    - - - - - - - - -
    - - +
      +

    • Content

      • +

    • Design

      • +
    + +
    +

    + + + + + + +

    + + +
    + + +
    + +
    - +
    +
    Drop Image Here
    + +

    + + +

    + + +
    +

    Overlay Color

    +
      +
      • +
    +
    + +
    +

    Background Color

    +
      +
      • +
    +
    + +
    +

    Font Color

    +
      +
      • +
    +
    + + -

    - +

    + -
    -

    Overlay Color

    -
      -
      • -
    diff --git a/source/stylesheets/_globals.scss b/source/stylesheets/_globals.scss index ad0d33cd..b1574eef 100644 --- a/source/stylesheets/_globals.scss +++ b/source/stylesheets/_globals.scss @@ -28,6 +28,30 @@ body.noselect { margin: 0 auto; } +.instructions { + background: #bebebe; + float: right; + font-size: 14px; + font-weight: 700; + line-height: 35px; + margin: 25px 0; + text-align: center; + text-transform: uppercase; + top: 0; + width: 140px; +} + +.instructions a { + color: #fff; + width: 100%; + height: 100%; + text-decoration: none; + } + +.instructions:hover { + background-color:#2980b9; +} + .left { float: left; } .right { float: right; } diff --git a/source/stylesheets/modules/_m-editor.scss b/source/stylesheets/modules/_m-editor.scss index 8c8f0a0b..bb722558 100644 --- a/source/stylesheets/modules/_m-editor.scss +++ b/source/stylesheets/modules/_m-editor.scss @@ -10,6 +10,31 @@ $m: '.m-editor'; width: 30%; } + .pane-toggle { + padding:0 !important; + } + + .pane-toggle li { + width: calc(50% - 3px); + display: inline-block; + padding: 6px; + line-height: 16px; + text-align: center; + cursor: pointer; + } + + li.content-tab { + border-bottom: 2px solid rgba(76, 78, 77, 0.024); + } + + li.design-tab { + border-bottom: 2px solid rgba(76, 78, 77, 0.2); + } + + .content-pane { + display: none + } + .dropzone { background-color: #fcfcfc; border: 2px dashed #cfcfcf; @@ -43,13 +68,70 @@ $m: '.m-editor'; .text-align, .font-size, .font-family, + .overlay-alpha, .text-shadow, .watermark { display: none; } + #{$m}__fontcolor { + margin-bottom:1.5em; + + // Mini-clearfix: + &:before, + &:after { + content: " "; + display: table; + } + &:after { + clear: both; + } + + ul { + list-style: none; + margin: 0; + padding: 0; + + label { + display: block; + float: left; + height: 20px; + line-height: 20px; + } + } + } + #{$m}__overlay { display: none; + margin-bottom:1.5em; + + // Mini-clearfix: + &:before, + &:after { + content: " "; + display: table; + } + &:after { + clear: both; + } + + ul { + list-style: none; + margin: 0; + padding: 0; + + label { + display: block; + float: left; + height: 20px; + line-height: 20px; + } + } + } + + #{$m}__backgroundcolor { + //display: none; + margin-bottom:1.5em; // Mini-clearfix: &:before, @@ -79,6 +161,7 @@ $m: '.m-editor'; @include appearance(none); background-color: #000; border-radius: 3px; + border: 1px solid #d3d3d3; cursor: pointer; display: block; height: 100%; @@ -90,8 +173,9 @@ $m: '.m-editor'; &:checked:before { content: 'x'; - color: white; + color: #d3d3d3; font-size: 18px; + line-height: 18px; vertical-align: center; } } @@ -119,4 +203,4 @@ $m: '.m-editor'; } @keyframes pulsate { @include pulsate-keyframe(); -} +} \ No newline at end of file From 5b2c4adde22bd7d49be095636a59acea77fb5b62 Mon Sep 17 00:00:00 2001 From: Ezra Mechaber Date: Mon, 7 Aug 2017 20:51:16 -0400 Subject: [PATCH 2/3] Adjusted meme-editor.js --- source/javascripts/views/meme-editor.js | 37 +++++++++++++++++++------ 1 file changed, 28 insertions(+), 9 deletions(-) diff --git a/source/javascripts/views/meme-editor.js b/source/javascripts/views/meme-editor.js index 30419c29..4920b2fb 100644 --- a/source/javascripts/views/meme-editor.js +++ b/source/javascripts/views/meme-editor.js @@ -8,6 +8,12 @@ MEME.MemeEditorView = Backbone.View.extend({ this.buildForms(); this.listenTo(this.model, 'change', this.render); this.render(); + $(".tab").click(function() { + $("." + $(this).attr("data-pane")).css( + "display", + "block" + ), $(this).css("border-bottom", "2px solid rgba(76, 78, 77, .2)"), $(this).siblings().css("border-bottom", "2px solid rgba(76, 78, 77, .025)"), $("." + $(this).siblings().attr("data-pane")).css("display", "none"); + }); }, // Builds all form options based on model option arrays: @@ -15,9 +21,14 @@ MEME.MemeEditorView = Backbone.View.extend({ var d = this.model.toJSON(); function buildOptions(opts) { - return _.reduce(opts, function(memo, opt) { - return memo += [''].join(''); - }, ''); + return _.reduce( + opts, + function(memo, opt) { + return (memo += [ + '"].join("")); + }, + "" + ); } if (d.textShadowEdit) { @@ -65,14 +76,22 @@ MEME.MemeEditorView = Backbone.View.extend({ // Build overlay color options: if (d.overlayColorOpts && d.overlayColorOpts.length) { - var overlayOpts = _.reduce(d.overlayColorOpts, function(memo, opt) { - var color = opt.hasOwnProperty('value') ? opt.value : opt; - return memo += '
    • '; - }, ''); + var overlayOpts = _.reduce( + d.overlayColorOpts, + function(memo, opt) { + var color = opt.hasOwnProperty("value") ? opt.value : opt; + return (memo += + '
    • '); + }, + "" + ); - $('#overlay').show().find('ul').append(overlayOpts); + $("#overlay").show().find("ul").append(overlayOpts); } - }, // Build background color options: if (d.backgroundColorOpts && d.backgroundColorOpts.length) { From b3e37a167367a2f2573761fccb7e276b339894ef Mon Sep 17 00:00:00 2001 From: Ezra Mechaber Date: Fri, 13 Oct 2017 18:18:55 -0400 Subject: [PATCH 3/3] Updated gems, added aspect ratios --- Gemfile.lock | 123 +++++++++++++----------- source/javascripts/settings.js.erb | 13 ++- source/javascripts/views/meme-canvas.js | 14 +++ source/javascripts/views/meme-editor.js | 10 +- source/partials/_editor.html.erb | 4 + 5 files changed, 105 insertions(+), 59 deletions(-) diff --git a/Gemfile.lock b/Gemfile.lock index 515aa77c..771dc998 100644 --- a/Gemfile.lock +++ b/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 diff --git a/source/javascripts/settings.js.erb b/source/javascripts/settings.js.erb index 6935b17f..59544354 100644 --- a/source/javascripts/settings.js.erb +++ b/source/javascripts/settings.js.erb @@ -18,7 +18,7 @@ var MEME_SETTINGS = { fontSize: 24, 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. @@ -27,7 +27,7 @@ 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: '', @@ -60,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'} + ] }; \ No newline at end of file diff --git a/source/javascripts/views/meme-canvas.js b/source/javascripts/views/meme-canvas.js index cd8d074d..4f01dd30 100644 --- a/source/javascripts/views/meme-canvas.js +++ b/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; diff --git a/source/javascripts/views/meme-editor.js b/source/javascripts/views/meme-editor.js index 4920b2fb..fc10cf09 100644 --- a/source/javascripts/views/meme-editor.js +++ b/source/javascripts/views/meme-editor.js @@ -30,6 +30,10 @@ MEME.MemeEditorView = Backbone.View.extend({ "" ); } + // Build font family options: + if (d.aspectRatioOpts && d.aspectRatioOpts.length) { + $('#aspect-ratio').append(buildOptions(d.aspectRatioOpts)).show(); + } if (d.textShadowEdit) { $('#text-shadow').parent().show(); @@ -117,6 +121,7 @@ MEME.MemeEditorView = Backbone.View.extend({ var d = this.model.toJSON(); this.$('#headline').val(d.headlineText); this.$('#credit').val(d.creditText); + this.$('#aspect-ratio').val(d.aspectRatio); this.$('#watermark').val(d.watermarkSrc); this.$("#watermark-alpha").val(d.watermarkAlpha); this.$('#image-scale').val(d.imageScale); @@ -134,6 +139,7 @@ MEME.MemeEditorView = Backbone.View.extend({ 'input #headline': 'onHeadline', 'input #credit': 'onCredit', 'input #image-scale': 'onScale', + 'change #aspect-ratio': 'onAspectRatio', 'change #font-size': 'onFontSize', 'change #font-family': 'onFontFamily', 'change [name="font-color"]': "onFontColor", @@ -156,7 +162,9 @@ MEME.MemeEditorView = Backbone.View.extend({ onHeadline: function() { this.model.set('headlineText', this.$('#headline').val()); }, - + onAspectRatio: function() { + this.model.set("aspectRatio", this.$("#aspect-ratio").val()) + }, onTextAlign: function() { this.model.set('textAlign', this.$('#text-align').val()); }, diff --git a/source/partials/_editor.html.erb b/source/partials/_editor.html.erb index 8c2537ed..5cd2a2a7 100644 --- a/source/partials/_editor.html.erb +++ b/source/partials/_editor.html.erb @@ -28,6 +28,10 @@
    + +
    Drop Image Here