mobileContentIndents mixin

When you create your emails for displaying on mobile devices, use the mobileContentIndents mixin to add the indents and alignment styles to your email markup. To add this mixin to your email project, import it from eWizard.js.

Usage

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.js
   
   import { 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.js
   
   import { 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.js
     
     const mixedComponents = [
       wizText,
       wizImage,
       wizVideo,
     ];
     
       mixedComponents.forEach(component => { // POC: add mixin for specific components only
         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.js
     
             if (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.ts

export 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'],
    },
  ];
}