Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

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

Browse Source
This commit is contained in:
wxa
2019-12-13 10:34:04 +03:00
committed by wxa
parent fa81c24825
commit 7f18fca219
3 changed files with 41 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
assets/js/src/newsletter_editor/behaviors/WooCommerceStylesBehavior.js Normal file
View File

@ -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;
},
});

4
assets/js/src/newsletter_editor/components/sidebar.js
View File

@ -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 () {

1
assets/js/src/newsletter_editor/webpack_index.jsx
View File

@ -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()