Compute heading and link colors based on the base color [MAILPOET-2569]

assets/js/src/newsletter_editor/behaviors/WooCommerceStylesBehavior.js

@@ -0,0 +1,39 @@
+/**
+ * WooCommerce styles behavior
+ *
+ * Handles relations between different WC style settings (e.g. one color depends on another)
+ */
+import Marionette from 'backbone.marionette';
+import BehaviorsLookup from 'newsletter_editor/behaviors/BehaviorsLookup';
+
+var BL = BehaviorsLookup;
+
+BL.WooCommerceStylesBehavior = Marionette.Behavior.extend({
+  events: function () { // eslint-disable-line func-names
+    return {
+      'change #mailpoet_wc_branding_color': function (event) { // eslint-disable-line func-names
+        let linkFontColor;
+        const brandingColor = event.target.value;
+        const headingFontColor = (this.wcHexIsLight(brandingColor)) ? '#202020' : '#ffffff';
+        if (this.wcHexIsLight(this.view.model.get('wrapper.backgroundColor'))) {
+          linkFontColor = (this.wcHexIsLight(brandingColor)) ? headingFontColor : brandingColor;
+        } else {
+          linkFontColor = (this.wcHexIsLight(brandingColor)) ? brandingColor : headingFontColor;
+        }
+        this.view.model.set('woocommerce.brandingColor', brandingColor);
+        this.view.model.set('woocommerce.headingFontColor', headingFontColor);
+        this.view.model.set('link.fontColor', linkFontColor);
+      },
+    };
+  },
+  // This is the wc_hex_is_light() WooCommerce function ported from PHP to JS.
+  // Taken from https://stackoverflow.com/a/51567564
+  wcHexIsLight: function (color) { // eslint-disable-line func-names
+    const hex = color.replace('#', '');
+    const colR = parseInt(hex.substr(0, 2), 16);
+    const colG = parseInt(hex.substr(2, 2), 16);
+    const colB = parseInt(hex.substr(4, 2), 16);
+    const brightness = ((colR * 299) + (colG * 587) + (colB * 114)) / 1000;
+    return brightness > 155;
+  },
+});

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

@@ -170,6 +170,7 @@ Module.SidebarStylesView = Marionette.View.extend({
   getTemplate: function () { return window.templates.sidebarStyles; },
   behaviors: {
     ColorPickerBehavior: {},
+    WooCommerceStylesBehavior: {},
   },
   events: function () {
     return {
@@ -215,9 +216,6 @@ Module.SidebarStylesView = Marionette.View.extend({
       },
       'change #mailpoet_newsletter_background_color': _.partial(this.changeColorField, 'wrapper.backgroundColor'),
       'change #mailpoet_background_color': _.partial(this.changeColorField, 'body.backgroundColor'),
-      // WooCommerce styles
-      'change #mailpoet_wc_heading_font_color': _.partial(this.changeColorField, 'woocommerce.headingFontColor'),
-      'change #mailpoet_wc_branding_color': _.partial(this.changeColorField, 'woocommerce.brandingColor'),
     };
   },
   templateContext: function () {

assets/js/src/newsletter_editor/webpack_index.jsx

@@ -33,6 +33,7 @@ import 'newsletter_editor/behaviors/ResizableBehavior.js'; // side effect - assi
 import 'newsletter_editor/behaviors/SortableBehavior.js'; // side effect - assigns to BehaviorsLookup
 import 'newsletter_editor/behaviors/ShowSettingsBehavior.js'; // side effect - assigns to BehaviorsLookup
 import 'newsletter_editor/behaviors/TextEditorBehavior.js'; // side effect - assigns to BehaviorsLookup
+import 'newsletter_editor/behaviors/WooCommerceStylesBehavior.js'; // side effect - assigns to BehaviorsLookup
 
 // blocks
 import 'newsletter_editor/blocks/container.js'; // side effect - calls App.on()