Change names of newsletter JSON attributes

assets/js/src/newsletter_editor/components/content.js

@@ -11,7 +11,7 @@ define([
   // Does not hold newsletter content nor newsletter styles, those are
   // handled by other components.
   Module.NewsletterModel = SuperModel.extend({
-    stale: ['data', 'styles'],
+    stale: ['content', 'globalStyles'],
     initialize: function(options) {
       this.on('change', function() {
           App.getChannel().trigger('autoSave');
@@ -45,8 +45,8 @@ define([
 
   Module.toJSON = function() {
     return _.extend({
-      data: App._contentContainer.toJSON(),
+      content: App._contentContainer.toJSON(),
-      styles: App.getGlobalStyles().toJSON(),
+      globalStyles: App.getGlobalStyles().toJSON(),
     }, App.getNewsletter().toJSON());
   };
 

assets/js/src/newsletter_editor/components/sidebar.js

@@ -157,8 +157,8 @@ define([
         "change #mailpoet_a_font_underline": function(event) {
           this.model.set('link.textDecoration', (event.target.checked) ? event.target.value : 'none');
         },
-        "change #mailpoet_newsletter_background_color": _.partial(this.changeColorField, 'newsletter.backgroundColor'),
+        "change #mailpoet_newsletter_background_color": _.partial(this.changeColorField, 'wrapper.backgroundColor'),
-        "change #mailpoet_background_color": _.partial(this.changeColorField, 'background.backgroundColor'),
+        "change #mailpoet_background_color": _.partial(this.changeColorField, 'body.backgroundColor'),
       };
     },
     templateHelpers: function() {

assets/js/src/newsletter_editor/components/styles.js

@@ -34,10 +34,10 @@ define([
         fontColor: '#21759B',
         textDecoration: 'underline',
       },
-      newsletter: {
+      wrapper: {
         backgroundColor: '#ffffff',
       },
-      background: {
+      body: {
         backgroundColor: '#cccccc',
       },
     },
@@ -72,7 +72,7 @@ define([
 
     App.getAvailableStyles = Module.getAvailableStyles;
 
-    this.setGlobalStyles(options.newsletter.styles);
+    this.setGlobalStyles(options.newsletter.globalStyles);
   });
 
   App.on('start', function(options) {

tests/javascript/newsletter_editor/components/content.spec.js

@@ -9,11 +9,11 @@ define([
 
       beforeEach(function() {
         model = new (ContentComponent.NewsletterModel)({
-          styles: {
+          globalStyles: {
             style1: 'style1Value',
             style2: 'style2Value',
           },
-          data: {
+          content: {
             data1: 'data1Value',
             data2: 'data2Value',
           },
@@ -79,8 +79,8 @@ define([
         };
         var json = ContentComponent.toJSON();
         expect(json).to.deep.equal(_.extend({
-          data: dataField,
+          content: dataField,
-          styles: stylesField
+          globalStyles: stylesField
         }, newsletterFields));
       });
     });

tests/javascript/newsletter_editor/components/sidebar.spec.js

@@ -67,10 +67,10 @@ define([
               fontColor: '#000005',
               textDecoration: 'none',
             },
-            newsletter: {
+            wrapper: {
               backgroundColor: '#090909',
             },
-            background: {
+            body: {
               backgroundColor: '#020202',
             },
           });
@@ -118,12 +118,12 @@ define([
 
         it('changes model if newsletter background color field changes', function() {
           view.$('#mailpoet_newsletter_background_color').val('#636237').change();
-          expect(model.get('newsletter.backgroundColor')).to.equal('#636237');
+          expect(model.get('wrapper.backgroundColor')).to.equal('#636237');
         });
 
         it('changes model if background color field changes', function() {
           view.$('#mailpoet_background_color').val('#878587').change();
-          expect(model.get('background.backgroundColor')).to.equal('#878587');
+          expect(model.get('body.backgroundColor')).to.equal('#878587');
         });
 
         it('changes model if text font family field changes', function() {

views/newsletter/editor.html

@@ -245,7 +245,7 @@
 
   <script type="text/javascript">
     var newsletter = {
-      "data": {
+      "content": {
         "type": "container",
         "orientation": "vertical",
         "styles": {
@@ -1296,7 +1296,7 @@
           }]
         }]
       },
-      "styles": {
+      "globalStyles": {
         "text": {
           "fontColor": "#565656",
           "fontFamily": "Arial",
@@ -1321,16 +1321,16 @@
           "fontColor": "#a86b6b",
           "textDecoration": "underline"
         },
-        "newsletter": {
+        "wrapper": {
           "backgroundColor": "#999999"
         },
-        "background": {
+        "body": {
           "backgroundColor": "#333333"
         }
       },
-      "newsletter_subject": "Click to change the subject!",
+      "subject": "Click to change the subject!",
-      "newsletter_preheader": "",
+      "preheader": "",
-      "newsletter": 3,
+      "id": 3,
     }, config = {
         availableStyles: {
             textSizes: [

views/newsletter/templates/components/sidebar/styles.hbs

@@ -70,12 +70,12 @@
         <hr />
         <div class="mailpoet_form_field">
             <span>
-                <span><input type="text" class="mailpoet_color" size="6" maxlength="6" name="newsletter-color" value="{{ model.newsletter.backgroundColor }}" id="mailpoet_newsletter_background_color"></span>
+                <span><input type="text" class="mailpoet_color" size="6" maxlength="6" name="newsletter-color" value="{{ model.wrapper.backgroundColor }}" id="mailpoet_newsletter_background_color"></span>
             </span><label for="mailpoet_newsletter_background_color"><%= __('Newsletter') %></label>
         </div>
         <div class="mailpoet_form_field">
             <span>
-                <span><input type="text" class="mailpoet_color" size="6" maxlength="6" name="background-color" value="{{ model.background.backgroundColor }}" id="mailpoet_background_color"></span>
+                <span><input type="text" class="mailpoet_color" size="6" maxlength="6" name="background-color" value="{{ model.body.backgroundColor }}" id="mailpoet_background_color"></span>
             </span><label for="mailpoet_background_color"><%= __('Background') %></label>
         </div>
     </form>

views/newsletter/templates/components/styles.hbs

@@ -29,9 +29,9 @@
         text-decoration: {{ link.textDecoration }};
     }
     .mailpoet_container_block, .mailpoet_container {
-        background-color: {{ newsletter.backgroundColor }};
+        background-color: {{ wrapper.backgroundColor }};
     }
     #mailpoet_editor_main_wrapper {
-        background-color: {{ background.backgroundColor }};
+        background-color: {{ body.backgroundColor }};
     }
 </style>