When you create your emails for displaying on mobile devices, use the mobileContentIndents mixin to add the indents and alignment styles to your email components.
Usage
NOTE: The mobileContentIndents mixin from previous versions of eWizard.js doesn't work in version 5.16.0.
To add the mixin to your email project, import it from eWizard.js. In your email project:
1) Add the following code to the file where the mixin is declared. For example, ./mixins/mobile-content-indents/index.js:
// ./mixins/mobile-content-indents/index.jsimport { getMobileContentIndentsMixin } from 'ewizardjs/mixins/mobile-content-indents';const mobileContentIndents = getMobileContentIndentsMixin();export default {
mixins: [
mobileContentIndents,
],
};The getMobileContentIndentsMixin variable has two properties:
— configs (Array) is an optional parameter. An array with custom configurations.
— replaceConfigs (Boolean) is an optional parameter. Specifies if the default configuration is ignored (true) or merged with custom configurations (false). The default value is false.
Usage example:
// ./mixins/mobile-content-indents/index.jsimport { getMobileContentIndentsMixin } from 'ewizardjs/mixins/mobile-content-indents';
const customConfigs = [
{
rule(context) {
return context.$el.classList.contains('wiz-placeholder');
},
classList: ['xs-p-lr-24'],
},
];
// use only custom configs
const mobileContentIndents = getMobileContentIndentsMixin(customConfigs, true);
export default {
mixins: [
mobileContentIndents,
],
};2) Apply the mixin to components in the file where the components are declared: ./extensions/common.js or ./extensions/globalComponents.js. You can apply the mixin to specific components or to all components at the same time.
— To apply the mixin to the wiz-text, wiz-image, and wiz-video components:
// ./extensions/common.jsconst mixedComponents = [
wizText,
wizImage,
wizVideo,
];mixedComponents.forEach(component => {
if (component.mixins) {
component.mixins.push(editorHooks);
} else {
component.mixins = [editorHooks];
}Vue.component(component.name, component);
});— To apply the mixin to all components in the email template:
// ./extensions/globalComponents.jsif (component.mixins) {
component.mixins.push(mobileContentIndents);
} else {
component.mixins = [mobileContentIndents];
}3) Add the mixedClasses class to the index.vue file of a component. For example, wiz-text:
<!-- ./node_modules/wiz-text/index.vue --><template> <table class="wiz-text" :class="mixedClasses" cellpadding="0" cellspacing="0"> <tr> <td style="height: 100%;" class="text" v-html="_text"/> </tr> </table> </template>
If a component has other classes defined, you can add the mixedClasses class like this:
<template>
<table class="wiz-text" :class="getClassArray" cellpadding="0" cellspacing="0">
<tr>
<td style="height: 100%;" class="text" v-html="_text"/>
</tr>
</table>
</template>
<script>
export default {
data() {
return {
empty: false,
mixedClasses: []
}
},
computed: {
getClassArray() {
return [{ empty: this.empty }, ...this.mixedClasses];
}
},
}</script>How it works
The mobileContentIndents mixin has the defaultConfig.ts and index.ts configuration files.
The defaultConfig.ts file includes objects with:
• the rule function that defines how to add the class.
• the classList array that defines what classes to insert into the component from the rule.
The mixin parses all the objects and adds the specified class, for example, the 'm-p-lr-20' class.
// ./node_modules/ewizardjs/src/mixins/mobile-content-indents/defaultConfig.tsexport default function getDefaultConfig() {
return [{
rule(context) {
return context.$parent?.$el.classList.contains('wiz-block');
},
classList: ['m-p-lr-20'],
},
{
rule(context) {
return context.$parent?.$el.classList.contains('wiz-column');
},
classList: ['m-p-lr-0'],
},
];
}