Inline and Modal background image layouts

.gitignore

@@ -8,4 +8,5 @@ docs/docs/examples/preview
 .env.json
 package-lock.json
 coverage/
-yarn.lock
+yarn.lock
+.vscode

dist/pathfora.css

@@ -505,20 +505,20 @@
   display: table;
   width: 100%;
 }
-.pf-widget-modal form input[type="text"],
-.pf-widget-modal form input[type="email"],
+.pf-widget-modal form input[type='text'],
+.pf-widget-modal form input[type='email'],
 .pf-widget-modal form select,
 .pf-widget-modal form textarea {
   font-size: 16px;
 }
-.pf-widget-modal form input[type="text"],
-.pf-widget-modal form input[type="email"],
+.pf-widget-modal form input[type='text'],
+.pf-widget-modal form input[type='email'],
 .pf-widget-modal form select {
   height: 45px;
 }
-.pf-widget-modal form input[type="text"][data-required="active"]:focus,
-.pf-widget-modal form input[type="email"][data-required="active"]:focus,
-.pf-widget-modal form select[data-required="active"]:focus {
+.pf-widget-modal form input[type='text'][data-required='active']:focus,
+.pf-widget-modal form input[type='email'][data-required='active']:focus,
+.pf-widget-modal form select[data-required='active']:focus {
   margin-top: 1px;
   margin-bottom: 10px;
 }
@@ -537,6 +537,42 @@
   width: 140px;
   height: 140px;
 }
+.pf-widget-modal.pf-widget-variant-4 .pf-widget-background-image {
+  background-size: cover;
+  background-image: inherit;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+.pf-widget-modal.pf-widget-variant-4 .pf-widget-background-image.top {
+  height: 50%;
+}
+.pf-widget-modal.pf-widget-variant-4 .pf-widget-background-image.bottom {
+  height: 50%;
+  bottom: 0;
+  top: unset;
+}
+.pf-widget-modal.pf-widget-variant-4 .pf-widget-background-image.right {
+  width: 50%;
+  left: unset;
+  right: 0;
+}
+.pf-widget-modal.pf-widget-variant-4 .pf-widget-background-image.left {
+  width: 50%;
+}
+.pf-widget-modal.pf-widget-variant-4 .pf-widget-text.left {
+  padding-left: inherit;
+  margin-left: 50%;
+  width: 50%;
+}
+.pf-widget-modal.pf-widget-variant-4 .pf-widget-text.right {
+  padding-right: inherit;
+  margin-right: 50%;
+  width: 50%;
+}
 .pf-widget-modal.pf-subscription .pf-widget-btn {
   margin-top: 2px;
 }
@@ -972,6 +1008,42 @@
   left: 50%;
   margin-left: -50px;
 }
+.pf-widget-inline.pf-widget-variant-4 .pf-widget-background-image {
+  background-size: cover;
+  background-image: inherit;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+.pf-widget-inline.pf-widget-variant-4 .pf-widget-background-image.top {
+  height: 50%;
+}
+.pf-widget-inline.pf-widget-variant-4 .pf-widget-background-image.bottom {
+  height: 50%;
+  bottom: 0;
+  top: unset;
+}
+.pf-widget-inline.pf-widget-variant-4 .pf-widget-background-image.right {
+  width: 50%;
+  left: unset;
+  right: 0;
+}
+.pf-widget-inline.pf-widget-variant-4 .pf-widget-background-image.left {
+  width: 50%;
+}
+.pf-widget-inline.pf-widget-variant-4 .pf-widget-text.left {
+  padding-left: 20px;
+  margin-left: 50%;
+  width: 50%;
+}
+.pf-widget-inline.pf-widget-variant-4 .pf-widget-text.right {
+  padding-right: 20px;
+  margin-right: 50%;
+  width: 50%;
+}
 .pf-widget-inline.pf-subscription .pf-widget-btn {
   line-height: 39px;
 }
@@ -993,7 +1065,7 @@
   bottom: -10px;
   right: -10px;
 }
-.pf-widget-inline form:not(.pf-custom-form) input[type=text].invalid,
-.pf-widget-inline form:not(.pf-custom-form) input[type=email].invalid {
+.pf-widget-inline form:not(.pf-custom-form) input[type='text'].invalid,
+.pf-widget-inline form:not(.pf-custom-form) input[type='email'].invalid {
   margin: -1px -1px 9px;
 }

dist/pathfora.js

@@ -2250,7 +2250,8 @@
         widgetHeadline = widget.querySelectorAll('.pf-widget-headline'),
         widgetBody = widget.querySelector('.pf-widget-body'),
         widgetMessage = widget.querySelector('.pf-widget-message'),
-        widgetFooter = widget.querySelector('.pf-widget-footer');
+        widgetFooter = widget.querySelector('.pf-widget-footer'),
+        widgetText = widget.querySelector('.pf-widget-text');
 
     if (widgetCancel !== null && !config.cancelShow) {
       node = widgetCancel;
@@ -2413,6 +2414,25 @@
       }
     }
 
+    // Adds background image and appends class
+    if (config.backgroundImage && config.backgroundImage.src) {
+      var bgConfig = config.backgroundImage;
+      if (config.layout === 'modal' || config.layout === 'inline') {
+        var widgetBg = document$1.createElement('div');
+        var textParent = widgetText.parentNode;
+        var url = 'url(' + bgConfig.src + ')';
+
+        textParent.insertBefore(widgetBg, widgetText);
+        widgetBg.style.setProperty('background-image', url, '');
+        addClass(widgetBg, 'pf-widget-background-image');
+
+        if (bgConfig.position) {
+          addClass(widgetBg, bgConfig.position);
+          addClass(widgetText, bgConfig.position);
+        }
+      }
+    }
+
     switch (config.type) {
     case 'sitegate':
     case 'form':

docs/docs/customization/css.md

@@ -10,7 +10,7 @@ The outer most `<div>` of all Pathfora modules have the `pf-widget` class. For m
 |---|---|
 | `pf-[type]` | select modules by type |
 | `pf-widget-[layout]` | select modules by layout |
-| `pf-position-[position]` | select modules by position |  
+| `pf-position-[position]` | select modules by position |
 | `pf-widget-variant-[variant]` | select modules by variant |
 | `opened` | added once the module becomes visiable to the user, can be used for changing the transition animation |
 
@@ -23,12 +23,14 @@ Within the `pf-widget` div most key elements are assigned class names. Form comp
 | `pf-widget-content` | second container div inside `pf-widget` (for modal and gate layouts this will the the box surrounding the actual module content) |
 | `pf-widget-text` | third container div inside `pf-widget` for modals, gates, and inline layouts (it contains the text: headline and message/form) |
 | `pf-widget-headline` | `<h2>` headline text |
-| `pf-widget-message` | `<p>` containing widget message text |  
+| `pf-widget-message` | `<p>` containing widget message text |
 | `pf-widget-close` | "x" icon to close the modal |
 | `pf-widget-btn` | general class for all buttons |
 | `pf-widget-ok` | "Confirm" button |
 | `pf-widget-cancel` | "Cancel" button |
-| `pf-widget-img` | image element for modules of [variant 2](/layouts/modal.md#variant)
+| `pf-widget-img` | image element for modules of [variant 2](/layouts/modal#image)
+| `pf-widget-background-image` | background image for modules of [variant 4](/layouts/modal#background-image)
+| `pf-widget-text` | text block for modules of [variant 4](/layouts/modal#background-image)
 
 To see these classes in action, you can view the html [templates](https://github.com/lytics/pathforajs/tree/master/src/templates) that will be rendered on your website. This is the html that gets minified, and added to a div with the class `pf-widget`. That div then gets added to the DOM of your website.
 

docs/docs/examples/src/layouts/inline/backgroundImage.css

@@ -0,0 +1,3 @@
+.inline-module {
+  width: 400px;
+}

docs/docs/examples/src/layouts/inline/backgroundImage.html

@@ -0,0 +1 @@
+<div class="inline-module"></div>

docs/docs/examples/src/layouts/inline/backgroundImage.js

@@ -0,0 +1,13 @@
+var module = new pathfora.Subscription({
+  id: 'message-inline',
+  layout: 'inline',
+  position: '.inline-module',
+  headline: 'Welcome!',
+  msg: 'Please sign up for our newsletter for more updates.',
+  variant: 4,
+  backgroundImage: {
+    src: '../../../../assets/desk.png'
+  }
+});
+
+pathfora.initializeWidgets([module]);

docs/docs/examples/src/layouts/inline/backgroundImagePosition.css

@@ -0,0 +1,3 @@
+.inline-module {
+  width: 600px;
+}

docs/docs/examples/src/layouts/inline/backgroundImagePosition.html

@@ -0,0 +1 @@
+<div class="inline-module"></div>

docs/docs/examples/src/layouts/inline/backgroundImagePosition.js

@@ -0,0 +1,14 @@
+var module = new pathfora.Subscription({
+  id: 'message-inline',
+  layout: 'inline',
+  position: '.inline-module',
+  headline: 'Welcome!',
+  msg: 'Please sign up for our newsletter for more updates.',
+  variant: 4,
+  backgroundImage: {
+    src: '../../../../assets/desk.png',
+    position: 'left'
+  }
+});
+
+pathfora.initializeWidgets([module]);

docs/docs/examples/src/layouts/modal/backgroundImage.js

@@ -0,0 +1,12 @@
+var module = new pathfora.Form({
+  id: 'modal-background',
+  layout: 'modal',
+  headline: 'Sign Up!',
+  msg: 'Submit this form to get updates',
+  variant: 4,
+  backgroundImage: {
+    src: '../../../../assets/desk.png'
+  }
+});
+
+pathfora.initializeWidgets([module]);

docs/docs/examples/src/layouts/modal/backgroundImageBottom.js

@@ -0,0 +1,13 @@
+var module = new pathfora.Form({
+  id: 'modal-background',
+  layout: 'modal',
+  headline: 'Sign Up!',
+  msg: 'Submit this form to get updates',
+  variant: 4,
+  backgroundImage: {
+    src: '../../../../assets/desk.png',
+    position: 'bottom'
+  }
+});
+
+pathfora.initializeWidgets([module]);

docs/docs/examples/src/layouts/modal/backgroundImageLeft.js

@@ -0,0 +1,13 @@
+var module = new pathfora.Form({
+  id: 'modal-background',
+  layout: 'modal',
+  headline: 'Sign Up!',
+  msg: 'Submit this form to get updates',
+  variant: 4,
+  backgroundImage: {
+    src: '../../../../assets/desk.png',
+    position: 'left'
+  }
+});
+
+pathfora.initializeWidgets([module]);

docs/docs/examples/src/layouts/modal/backgroundImageRight.js

@@ -0,0 +1,13 @@
+var module = new pathfora.Form({
+  id: 'modal-background',
+  layout: 'modal',
+  headline: 'Sign Up!',
+  msg: 'Submit this form to get updates',
+  variant: 4,
+  backgroundImage: {
+    src: '../../../../assets/desk.png',
+    position: 'right'
+  }
+});
+
+pathfora.initializeWidgets([module]);

docs/docs/examples/src/layouts/modal/backgroundImageTop.js

@@ -0,0 +1,13 @@
+var module = new pathfora.Form({
+  id: 'modal-background',
+  layout: 'modal',
+  headline: 'Sign Up!',
+  msg: 'Submit this form to get updates',
+  variant: 4,
+  backgroundImage: {
+    src: '../../../../assets/desk.png',
+    position: 'top'
+  }
+});
+
+pathfora.initializeWidgets([module]);