diff --git a/.gitignore b/.gitignore index 77634e1..006bf21 100644 --- a/.gitignore +++ b/.gitignore @@ -8,4 +8,5 @@ docs/docs/examples/preview .env.json package-lock.json coverage/ -yarn.lock \ No newline at end of file +yarn.lock +.vscode \ No newline at end of file diff --git a/dist/pathfora.css b/dist/pathfora.css index 5f18c16..aeaa108 100644 --- a/dist/pathfora.css +++ b/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; } diff --git a/dist/pathfora.js b/dist/pathfora.js index 5f8c934..3ce9f3c 100644 --- a/dist/pathfora.js +++ b/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': diff --git a/dist/pathfora.min.css b/dist/pathfora.min.css index 1a84c3f..5bf0b1b 100644 --- a/dist/pathfora.min.css +++ b/dist/pathfora.min.css @@ -1 +1 @@ -.pf-widget,.pf-widget *{box-sizing:border-box;-webkit-sizing:border-box}.pf-widget,.pf-widget .pf-widget-body{color:#888}.pf-widget,.pf-widget *{-webkit-sizing:border-box}.pf-hidden,.pf-widget .pf-content-unit{display:none}.pf-widget .pf-widget-btn,.pf-widget .pf-widget-close,.pf-widget a{text-decoration:none;cursor:pointer}.pf-box-shadow{box-shadow:0 4px 4px -4px rgba(0,0,0,.5)}.pf-widget{z-index:9999;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;visibility:hidden;opacity:0;transition:all .3s;text-align:left;-moz-box-sizing:border-box;background-color:#f1f1f1;font-size:15px}.pf-widget .pf-widget-footer{font-size:12px;margin-top:10px}@media screen and (max-width:736px),screen and (max-height:640px){.pf-widget.pf-mobile-hide{display:none}}.pf-widget *{-moz-box-sizing:border-box;text-shadow:none}.pf-widget a,.pf-widget h2,.pf-widget input,.pf-widget p,.pf-widget select,.pf-widget textarea{margin:0;padding:0;border:0;background:0 0}.pf-widget .pf-widget-headline{margin:0 0 10px;color:#444;font-weight:500}.pf-widget input[type=email],.pf-widget input[type=text],.pf-widget select,.pf-widget textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;border-radius:3px;font-size:14px;width:100%;padding:10px 15px;background:#fff;box-shadow:inset 0 1px 1px rgba(0,0,0,.2);position:relative;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-sizing:border-box}.pf-widget input[type=email]::-webkit-input-placeholder,.pf-widget input[type=text]::-webkit-input-placeholder,.pf-widget select::-webkit-input-placeholder,.pf-widget textarea::-webkit-input-placeholder{color:#a9a9a9}.pf-widget input[type=email]:-moz-placeholder,.pf-widget input[type=text]:-moz-placeholder,.pf-widget select:-moz-placeholder,.pf-widget textarea:-moz-placeholder{color:#a9a9a9}.pf-widget input[type=email]::-moz-placeholder,.pf-widget input[type=text]::-moz-placeholder,.pf-widget select::-moz-placeholder,.pf-widget textarea::-moz-placeholder{color:#a9a9a9}.pf-widget input[type=email]:-ms-input-placeholder,.pf-widget input[type=text]:-ms-input-placeholder,.pf-widget select:-ms-input-placeholder,.pf-widget textarea:-ms-input-placeholder{color:#a9a9a9}.pf-widget select{-webkit-appearance:none;-moz-appearance:none;appearance:none}.pf-widget select::-ms-expand{display:none}.pf-widget select.default{color:#a9a9a9}.pf-widget form:not(.pf-custom-form) input[type=email],.pf-widget form:not(.pf-custom-form) input[type=text],.pf-widget form:not(.pf-custom-form) select,.pf-widget form:not(.pf-custom-form) textarea{margin-bottom:10px}.pf-widget form:not(.pf-custom-form) [data-required=true].invalid{border:1px solid #f12626}.pf-widget input[type=email],.pf-widget input[type=text],.pf-widget select{clear:both}.pf-widget textarea{resize:none}.pf-widget .pf-widget-img{display:none;border-radius:50%}.pf-widget .pf-widget-message{line-height:1.5;font-size:15px}.pf-widget .pf-widget-btn{display:inline-block;padding:0 26px;line-height:35px;font-size:14px;border-radius:5px;transition:all .3s;border:0;margin-bottom:2px}.pf-widget .error-state,.pf-widget .success-state,.pf-widget.success .pf-widget-headline,.pf-widget.success .pf-widget-message,.pf-widget.success form{display:none}.pf-widget .pf-widget-btn.pf-widget-ok{box-shadow:0 1px 1px rgba(0,0,0,.2);color:#444;background-color:#fff}.pf-widget .pf-widget-btn.pf-widget-cancel{color:#bbb;background-color:#f1f1f1}.pf-widget .pf-widget-btn+.pf-widget-btn{margin-left:5px;margin-right:5px}.pf-widget .pf-widget-close{font-size:24px;transition:all .3s;position:absolute;top:4px;line-height:1;right:0;margin-right:12px;color:#bbb;padding:0;background-color:transparent;border:0}.pf-widget.error,.pf-widget.success{transition:opacity .3s}.pf-widget.opened{visibility:visible;opacity:1}.pf-widget .branding{position:relative}.pf-widget .branding svg{position:absolute;bottom:-25px;right:-25px;fill:#888;opacity:.25;width:120px}@media screen and (max-width:736px),screen and (max-height:640px){.pf-widget .branding svg{right:-8px}}.pf-widget.success .success-state,.pf-widget.success .success-state .pf-widget-headline,.pf-widget.success .success-state .pf-widget-message,.pf-widget.success .success-state form{display:block}.pf-widget.error .pf-widget-headline,.pf-widget.error .pf-widget-message,.pf-widget.error form{display:none}.pf-widget-variant-2 .pf-widget-img,.pf-widget.error .error-state,.pf-widget.error .error-state .pf-widget-headline,.pf-widget.error .error-state .pf-widget-message,.pf-widget.error .error-state form{display:block}.pf-widget-variant-3 .pf-content-unit{display:block;text-align:left;margin-bottom:20px;position:relative;background-color:#fff}.pf-widget-variant-3 .pf-content-unit .pf-content-unit-meta{padding:10px 15px}.pf-widget-variant-3 .pf-content-unit .pf-content-unit-meta span.pf-content-unit-info{font-size:12px;display:block;margin-bottom:5px;color:#444}.pf-widget-variant-3 .pf-content-unit .pf-content-unit-meta h4{font-weight:500;margin:0 0 5px;line-height:1.4;color:#444}.pf-widget-variant-3 .pf-content-unit .pf-content-unit-meta p{line-height:1.3;color:#888}.pf-widget-variant-3 .pf-content-unit .pf-content-unit-img{background-size:cover;background-position:center center;background-repeat:no-repeat}.pf-widget-variant-3 .pf-content-unit:not(.stack){width:95%;margin:0 auto 30px}.pf-widget-variant-3 .pf-content-unit:not(.stack) .pf-content-unit-img{position:absolute;display:block;height:100%;width:40%}.pf-widget-variant-3 .pf-content-unit:not(.stack) .pf-content-unit-img+.pf-content-unit-meta{width:60%;min-height:135px}.pf-widget-variant-3 .pf-content-unit:not(.stack) .pf-content-unit-meta{padding:15px;display:block;margin:0 0 0 auto}.pf-widget-variant-3 .pf-content-unit:not(.stack) .pf-content-unit-meta span.pf-content-unit-info{font-size:13px}.pf-widget-variant-3 .pf-content-unit:not(.stack) .pf-content-unit-meta h4{font-size:18px}.pf-widget-variant-3 .pf-content-unit.stack .pf-content-unit-meta h4,.pf-widget-variant-3 .pf-content-unit:not(.stack) .pf-content-unit-meta p{font-size:14px}.pf-widget-variant-3 .pf-content-unit.stack{width:100%;display:block;text-align:left}.pf-widget-variant-3 .pf-content-unit.stack .pf-content-unit-meta p{font-size:13px}.pf-widget-variant-3 .pf-content-unit.stack .pf-content-unit-img{width:100%;height:135px}.pf-subscription form{width:100%;display:block;margin:0 auto}.pf-subscription form input[type=email],.pf-subscription form input[type=text]{width:100%;margin-bottom:1px}.pf-subscription form .pf-widget-btn{float:right;margin-left:5px;padding:0 16px}.pf-subscription form span{display:block;padding:2px;overflow:hidden}.pf-widget-modal .pf-widget-content,.pf-widget-slideout{max-height:100%;overflow-x:hidden;overflow-y:auto;box-shadow:0 4px 4px -4px rgba(0,0,0,.5)}.pf-form input.pf-field-half-width,.pf-form select.pf-field-half-width,.pf-sitegate input.pf-field-half-width,.pf-sitegate select.pf-field-half-width{width:49%;display:block;clear:none;float:left}.pf-form input.pf-field-half-width.right,.pf-form select.pf-field-half-width.right,.pf-sitegate input.pf-field-half-width.right,.pf-sitegate select.pf-field-half-width.right{float:right}.pf-form .pf-widget-btn,.pf-sitegate .pf-widget-btn{clear:both;margin-top:5px}.pf-form form.pf-custom-form>div,.pf-sitegate form.pf-custom-form>div{text-align:left;margin-bottom:10px}.pf-widget-modal,.pf-widget-modal .pf-widget-footer{text-align:center}.pf-form .pf-form-label,.pf-sitegate .pf-form-label{font-weight:700}.pf-form .pf-widget-checkbox,.pf-form .pf-widget-radio,.pf-sitegate .pf-widget-checkbox,.pf-sitegate .pf-widget-radio{display:block;padding:4px}.pf-form .pf-widget-checkbox input,.pf-form .pf-widget-radio input,.pf-sitegate .pf-widget-checkbox input,.pf-sitegate .pf-widget-radio input{margin-right:10px}.pf-form .pf-has-label,.pf-sitegate .pf-has-label{margin-top:7px}.pf-form div.pf-form-required,.pf-sitegate div.pf-form-required{position:relative}.pf-form div.pf-form-required.invalid [data-required=true]:not(.pf-has-label),.pf-sitegate div.pf-form-required.invalid [data-required=true]:not(.pf-has-label){border:1px solid #f12626;margin:-1px}.pf-form div.pf-form-required.pf-widget-checkbox-group [data-required=true],.pf-form div.pf-form-required.pf-widget-radio-group,.pf-sitegate div.pf-form-required.pf-widget-checkbox-group [data-required=true],.pf-sitegate div.pf-form-required.pf-widget-radio-group{border-radius:3px}.pf-form div.pf-form-required.invalid div.pf-required-flag,.pf-sitegate div.pf-form-required.invalid div.pf-required-flag{opacity:1;margin-left:10px}.pf-form div.pf-form-required div.pf-required-flag,.pf-sitegate div.pf-form-required div.pf-required-flag{font-size:12px;font-weight:700;position:relative;padding:3px 7px;display:inline;width:auto;color:#fff;background-color:#f12626;box-shadow:0 4px 4px -4px rgba(0,0,0,.5);transition:all .3s;margin-left:5px;opacity:0}.pf-form div.pf-form-required div.pf-required-flag span,.pf-sitegate div.pf-form-required div.pf-required-flag span{position:absolute;width:0;height:0;top:6px;left:-6px;border-top:4px solid transparent;border-bottom:4px solid transparent;content:'';border-right:6px solid #f12626}.pf-form div.pf-form-required span.required,.pf-sitegate div.pf-form-required span.required{color:#f12626}.pf-form.pf-widget-slideout input.pf-field-half-width,.pf-form.pf-widget-slideout select.pf-field-half-width,.pf-sitegate.pf-widget-slideout input.pf-field-half-width,.pf-sitegate.pf-widget-slideout select.pf-field-half-width{width:48%}.pf-widget-modal{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.5);z-index:9999}.pf-widget-modal .pf-va-middle{display:table-cell;vertical-align:middle}.pf-widget-modal .pf-widget-btn{font-size:16px;line-height:45px}.pf-widget-slideout .pf-widget-footer,.pf-widget-slideout.pf-widget-variant-1 .pf-widget-content .pf-widget-headline,.pf-widget-slideout.pf-widget-variant-1 .pf-widget-content .pf-widget-message{text-align:left}.pf-widget-modal .pf-widget-container{display:table;width:100%;height:100%;position:relative;top:-100vh;transition:all .3s}.pf-widget-modal .pf-widget-content{background-color:#f1f1f1;color:#888;width:100%;position:fixed;max-width:780px;margin:0 auto;padding:40px;border-radius:5px;top:50%;left:50%;transform:translate(-50%,-50%)}.pf-widget-modal .pf-widget-headline{font-size:28px}.pf-widget-modal .pf-widget-message{font-size:18px;margin:0 0 30px}.pf-widget-modal .pf-widget-body{display:table;width:100%}.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 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{margin-top:1px;margin-bottom:10px}.pf-widget-modal.opened .pf-widget-container{top:0}.pf-widget-modal.pf-widget-variant-2 .pf-widget-headline{margin-top:140px}.pf-widget-modal.pf-widget-variant-2 .pf-widget-img{float:none;position:absolute;top:20px;left:50%;margin-left:-70px;width:140px;height:140px}.pf-widget-modal.pf-subscription .pf-widget-btn{margin-top:2px}.pf-widget-modal.pf-subscription.pf-widget-has-branding span{margin-bottom:13px}.pf-widget-slideout{bottom:50px;width:350px;border-radius:4px;top:auto;position:fixed}@media screen and (max-width:736px),screen and (max-height:640px){.pf-widget-modal .pf-widget-content{padding:40px 20px}.pf-widget-slideout{width:100%;max-width:350px}.pf-widget-slideout.pf-position-bottom-left,.pf-widget-slideout.pf-position-left,.pf-widget-slideout.pf-position-top-left{bottom:0}}.pf-widget-slideout .pf-widget-message{margin:0 0 20px}.pf-widget-slideout .pf-widget-btn{line-height:40px}.pf-widget-slideout .pf-widget-content{padding:30px;width:100%}.pf-widget-slideout .pf-widget-headline{font-size:20px}.pf-widget-slideout.pf-position-bottom-left,.pf-widget-slideout.pf-position-left,.pf-widget-slideout.pf-position-top-left{left:-100%}.pf-widget-slideout.pf-position-bottom-left.pf-origin-bottom,.pf-widget-slideout.pf-position-left.pf-origin-bottom,.pf-widget-slideout.pf-position-top-left.pf-origin-bottom{left:50px}@media screen and (max-width:736px),screen and (max-height:640px){.pf-widget-slideout.pf-position-bottom-left.pf-origin-bottom,.pf-widget-slideout.pf-position-left.pf-origin-bottom,.pf-widget-slideout.pf-position-top-left.pf-origin-bottom{left:0}.pf-widget-slideout.pf-position-bottom-right,.pf-widget-slideout.pf-position-right,.pf-widget-slideout.pf-position-top-right{bottom:0}}.pf-widget-slideout.pf-position-bottom-right,.pf-widget-slideout.pf-position-right,.pf-widget-slideout.pf-position-top-right{left:auto;right:-100%}.pf-widget-slideout.pf-position-bottom-right.pf-origin-bottom,.pf-widget-slideout.pf-position-right.pf-origin-bottom,.pf-widget-slideout.pf-position-top-right.pf-origin-bottom{right:50px}.pf-widget-slideout.pf-position-left,.pf-widget-slideout.pf-position-right{bottom:auto;top:50%;transform:translateY(-50%);-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%)}.pf-widget-slideout.pf-position-top-left,.pf-widget-slideout.pf-position-top-right{bottom:auto;top:50px}@media screen and (max-width:736px),screen and (max-height:640px){.pf-widget-slideout.pf-position-bottom-right.pf-origin-bottom,.pf-widget-slideout.pf-position-right.pf-origin-bottom,.pf-widget-slideout.pf-position-top-right.pf-origin-bottom{left:auto;right:0}.pf-widget-slideout.pf-position-top-left,.pf-widget-slideout.pf-position-top-right{top:0}}.pf-widget-slideout.pf-origin-bottom{bottom:-100%}.pf-widget-slideout.opened.pf-position-bottom-left,.pf-widget-slideout.opened.pf-position-left,.pf-widget-slideout.opened.pf-position-top-left{left:50px}.pf-widget-slideout.opened.pf-position-bottom-right,.pf-widget-slideout.opened.pf-position-right,.pf-widget-slideout.opened.pf-position-top-right{right:50px}.pf-widget-slideout.opened.pf-origin-bottom{bottom:50px}@media screen and (max-width:736px),screen and (max-height:640px){.pf-widget-slideout.opened.pf-position-bottom-left,.pf-widget-slideout.opened.pf-position-left,.pf-widget-slideout.opened.pf-position-top-left{left:0}.pf-widget-slideout.opened.pf-position-bottom-right,.pf-widget-slideout.opened.pf-position-right,.pf-widget-slideout.opened.pf-position-top-right{right:0;left:auto}.pf-widget-slideout.opened.pf-origin-bottom{bottom:0}}.pf-widget-slideout .branding svg{bottom:-22px;right:-20px;width:100px}.pf-widget-inline.pf-widget-variant-2 .pf-widget-content,.pf-widget-slideout.pf-widget-variant-2 .pf-widget-content{text-align:center}.pf-widget-slideout.pf-widget-variant-2 .pf-widget-content .pf-widget-headline{margin-top:110px}.pf-widget-slideout.pf-widget-variant-2 .pf-widget-img{width:100px;height:100px;float:none;position:absolute;top:20px;left:50%;margin-left:-50px}.pf-widget-slideout.pf-form{width:370px}.pf-widget-slideout.pf-subscription.pf-widget-has-branding span{margin-bottom:13px}.pf-widget-slideout form:not(.pf-custom-form) input[type=email].invalid,.pf-widget-slideout form:not(.pf-custom-form) input[type=text].invalid{margin:-1px -1px 9px}.pf-push-down{transition:margin-top .3s}.pf-widget-inline,.pf-widget-inline .pf-widget-btn{transition:all 0s}.pf-push-down.opened{margin-top:59px}@media screen and (max-width:736px),screen and (max-height:640px){.pf-widget-slideout.pf-form{width:100%;max-width:370px}.pf-push-down.opened{margin-top:0}}.pf-widget-bar{height:auto;padding:10px 0;min-height:59px;left:0;right:0;box-shadow:0 4px 4px -4px rgba(0,0,0,.5)}.pf-widget-bar .pf-widget-body{margin:0 20px;float:left}.pf-widget-bar .pf-widget-close{top:50%;position:absolute;margin-top:-16px;right:20px;line-height:1;margin-right:0}.pf-widget-bar .pf-widget-btn{line-height:35px}.pf-widget-bar .pf-bar-content{text-align:center;padding:0 40px}@media screen and (max-width:736px),screen and (max-height:640px){.pf-widget-bar .pf-bar-content{padding:0 40px 0 20px}}.pf-widget-bar .pf-bar-content .pf-widget-message{text-overflow:ellipsis;max-width:100%;overflow:hidden;display:inline-block;white-space:normal;margin:6px 16px}.pf-widget-bar .pf-bar-content input[type=email],.pf-widget-bar .pf-bar-content input[type=text]{margin:0 1px;max-width:200px}.pf-widget-bar .pf-bar-content form:not(.pf-custom-form) input[type=email],.pf-widget-bar .pf-bar-content form:not(.pf-custom-form) input[type=text]{margin-bottom:0}.pf-widget-bar .pf-bar-content form:not(.pf-custom-form) input[type=email].invalid,.pf-widget-bar .pf-bar-content form:not(.pf-custom-form) input[type=text].invalid{margin:0}.pf-widget-bar .pf-bar-content>*{display:inline-block;vertical-align:middle}.pf-widget-bar.pf-position-bottom-absolute,.pf-widget-bar.pf-position-top-absolute{position:absolute}.pf-widget-bar.pf-position-top-absolute,.pf-widget-bar.pf-position-top-fixed{top:-50px}.pf-widget-bar.opened.pf-position-top-absolute,.pf-widget-bar.opened.pf-position-top-fixed{top:0}.pf-widget-bar.pf-position-top-absolute .pf-bar-content,.pf-widget-bar.pf-position-top-fixed .pf-bar-content{padding-top:0}.pf-widget-bar.pf-position-bottom-fixed{bottom:-50px}.pf-widget-bar.pf-position-bottom-fixed,.pf-widget-bar.pf-position-top-fixed{position:fixed}.pf-widget-bar.opened.pf-position-bottom-fixed{bottom:0}.pf-widget-bar.pf-widget-variant-2 .pf-widget-img{height:35px;width:35px;top:50%;margin-top:-17.5px;position:absolute}.pf-widget-bar.pf-message .pf-widget-btn,.pf-widget-bar.pf-subscription form .pf-widget-btn{margin-top:2px}@media screen and (max-width:736px),screen and (max-height:640px){.pf-widget-bar.pf-widget-variant-2 .pf-widget-img{display:none}}.pf-widget-bar.pf-subscription form{width:auto}.pf-widget-bar.pf-subscription form input[type=email]{height:35px}.pf-widget-button{position:fixed;box-shadow:1px 0 4px 0 rgba(0,0,0,.5);border-radius:2px}.pf-widget-button .pf-widget-message{border:0;background-color:transparent;line-height:42px;padding:0 16px 5px;margin:0;font-weight:700;display:block;cursor:pointer;overflow:hidden;max-width:150px;white-space:nowrap;text-overflow:ellipsis;color:#888}.pf-widget-button.pf-position-left{transform-origin:left bottom;transform:rotate(90deg);left:-50px}.pf-widget-button.pf-position-right{box-shadow:-1px 0 4px 0 rgba(0,0,0,.5);transform-origin:right bottom;transform:rotate(-90deg);right:-50px}.pf-widget-button.pf-position-left,.pf-widget-button.pf-position-right{top:10%}.pf-widget-button.pf-position-bottom-left,.pf-widget-button.pf-position-top-left{left:42px}.pf-widget-button.pf-position-bottom-right,.pf-widget-button.pf-position-top-right{right:42px}.pf-widget-button.pf-position-bottom-left,.pf-widget-button.pf-position-bottom-right{bottom:-50px}.pf-widget-button.pf-position-top-left,.pf-widget-button.pf-position-top-right{top:-50px}.pf-widget-button.pf-position-top-left .pf-widget-message,.pf-widget-button.pf-position-top-right .pf-widget-message{padding:5px 16px 0}.pf-widget-button.opened.pf-position-left{left:-6px}.pf-widget-button.opened.pf-position-left:hover{left:-1px}.pf-widget-button.opened.pf-position-right{right:-6px}.pf-widget-button.opened.pf-position-right:hover{right:-1px}.pf-widget-button.opened.pf-position-bottom-left,.pf-widget-button.opened.pf-position-bottom-right{bottom:-6px;box-shadow:0 1px 4px 0 rgba(0,0,0,.5)}.pf-widget-button.opened.pf-position-bottom-left:hover,.pf-widget-button.opened.pf-position-bottom-right:hover{bottom:-1px}.pf-widget-button.opened.pf-position-top-left,.pf-widget-button.opened.pf-position-top-right{top:-6px;box-shadow:0 1px 4px 0 rgba(0,0,0,.5)}.pf-widget-button.opened.pf-position-top-left:hover,.pf-widget-button.opened.pf-position-top-right:hover{top:-1px}.pf-widget-inline{padding:20px;border-radius:2px;box-shadow:0 4px 4px -4px rgba(0,0,0,.5);position:relative}.pf-widget-inline .pf-widget-message{margin:0 0 20px}.pf-widget-inline.pf-widget-variant-2 .pf-widget-content .pf-widget-headline{margin-top:110px}.pf-widget-inline.pf-widget-variant-2 .pf-widget-img{width:100px;height:100px;float:none;position:absolute;top:20px;left:50%;margin-left:-50px}.pf-widget-inline.pf-subscription .pf-widget-btn{line-height:39px}.pf-widget-inline.pf-subscription.pf-widget-has-branding span{margin-bottom:35px}.pf-widget-inline.pf-widget-variant-3 .pf-content-unit{max-width:650px}.pf-widget-inline.pf-widget-variant-3 .pf-content-unit.stack{margin:0 auto;max-width:400px}.pf-widget-inline .branding{position:relative}.pf-widget-inline .branding svg{position:absolute;bottom:-10px;right:-10px}.pf-widget-inline form:not(.pf-custom-form) input[type=email].invalid,.pf-widget-inline form:not(.pf-custom-form) input[type=text].invalid{margin:-1px -1px 9px} \ No newline at end of file +.pf-widget,.pf-widget *{box-sizing:border-box;-webkit-sizing:border-box}.pf-widget,.pf-widget .pf-widget-body{color:#888}.pf-widget,.pf-widget *{-webkit-sizing:border-box}.pf-hidden,.pf-widget .pf-content-unit{display:none}.pf-widget .pf-widget-btn,.pf-widget .pf-widget-close,.pf-widget a{text-decoration:none;cursor:pointer}.pf-box-shadow{box-shadow:0 4px 4px -4px rgba(0,0,0,.5)}.pf-widget{z-index:9999;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;visibility:hidden;opacity:0;transition:all .3s;text-align:left;-moz-box-sizing:border-box;background-color:#f1f1f1;font-size:15px}.pf-widget .pf-widget-footer{font-size:12px;margin-top:10px}@media screen and (max-width:736px),screen and (max-height:640px){.pf-widget.pf-mobile-hide{display:none}}.pf-widget *{-moz-box-sizing:border-box;text-shadow:none}.pf-widget a,.pf-widget h2,.pf-widget input,.pf-widget p,.pf-widget select,.pf-widget textarea{margin:0;padding:0;border:0;background:0 0}.pf-widget .pf-widget-headline{margin:0 0 10px;color:#444;font-weight:500}.pf-widget input[type=email],.pf-widget input[type=text],.pf-widget select,.pf-widget textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;border-radius:3px;font-size:14px;width:100%;padding:10px 15px;background:#fff;box-shadow:inset 0 1px 1px rgba(0,0,0,.2);position:relative;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-sizing:border-box}.pf-widget input[type=email]::-webkit-input-placeholder,.pf-widget input[type=text]::-webkit-input-placeholder,.pf-widget select::-webkit-input-placeholder,.pf-widget textarea::-webkit-input-placeholder{color:#a9a9a9}.pf-widget input[type=email]:-moz-placeholder,.pf-widget input[type=text]:-moz-placeholder,.pf-widget select:-moz-placeholder,.pf-widget textarea:-moz-placeholder{color:#a9a9a9}.pf-widget input[type=email]::-moz-placeholder,.pf-widget input[type=text]::-moz-placeholder,.pf-widget select::-moz-placeholder,.pf-widget textarea::-moz-placeholder{color:#a9a9a9}.pf-widget input[type=email]:-ms-input-placeholder,.pf-widget input[type=text]:-ms-input-placeholder,.pf-widget select:-ms-input-placeholder,.pf-widget textarea:-ms-input-placeholder{color:#a9a9a9}.pf-widget select{-webkit-appearance:none;-moz-appearance:none;appearance:none}.pf-widget select::-ms-expand{display:none}.pf-widget select.default{color:#a9a9a9}.pf-widget form:not(.pf-custom-form) input[type=email],.pf-widget form:not(.pf-custom-form) input[type=text],.pf-widget form:not(.pf-custom-form) select,.pf-widget form:not(.pf-custom-form) textarea{margin-bottom:10px}.pf-widget form:not(.pf-custom-form) [data-required=true].invalid{border:1px solid #f12626}.pf-widget input[type=email],.pf-widget input[type=text],.pf-widget select{clear:both}.pf-widget textarea{resize:none}.pf-widget .pf-widget-img{display:none;border-radius:50%}.pf-widget .pf-widget-message{line-height:1.5;font-size:15px}.pf-widget .pf-widget-btn{display:inline-block;padding:0 26px;line-height:35px;font-size:14px;border-radius:5px;transition:all .3s;border:0;margin-bottom:2px}.pf-widget .error-state,.pf-widget .success-state,.pf-widget.success .pf-widget-headline,.pf-widget.success .pf-widget-message,.pf-widget.success form{display:none}.pf-widget .pf-widget-btn.pf-widget-ok{box-shadow:0 1px 1px rgba(0,0,0,.2);color:#444;background-color:#fff}.pf-widget .pf-widget-btn.pf-widget-cancel{color:#bbb;background-color:#f1f1f1}.pf-widget .pf-widget-btn+.pf-widget-btn{margin-left:5px;margin-right:5px}.pf-widget .pf-widget-close{font-size:24px;transition:all .3s;position:absolute;top:4px;line-height:1;right:0;margin-right:12px;color:#bbb;padding:0;background-color:transparent;border:0}.pf-widget.error,.pf-widget.success{transition:opacity .3s}.pf-widget.opened{visibility:visible;opacity:1}.pf-widget .branding{position:relative}.pf-widget .branding svg{position:absolute;bottom:-25px;right:-25px;fill:#888;opacity:.25;width:120px}@media screen and (max-width:736px),screen and (max-height:640px){.pf-widget .branding svg{right:-8px}}.pf-widget.success .success-state,.pf-widget.success .success-state .pf-widget-headline,.pf-widget.success .success-state .pf-widget-message,.pf-widget.success .success-state form{display:block}.pf-widget.error .pf-widget-headline,.pf-widget.error .pf-widget-message,.pf-widget.error form{display:none}.pf-widget-variant-2 .pf-widget-img,.pf-widget.error .error-state,.pf-widget.error .error-state .pf-widget-headline,.pf-widget.error .error-state .pf-widget-message,.pf-widget.error .error-state form{display:block}.pf-widget-variant-3 .pf-content-unit{display:block;text-align:left;margin-bottom:20px;position:relative;background-color:#fff}.pf-widget-variant-3 .pf-content-unit .pf-content-unit-meta{padding:10px 15px}.pf-widget-variant-3 .pf-content-unit .pf-content-unit-meta span.pf-content-unit-info{font-size:12px;display:block;margin-bottom:5px;color:#444}.pf-widget-variant-3 .pf-content-unit .pf-content-unit-meta h4{font-weight:500;margin:0 0 5px;line-height:1.4;color:#444}.pf-widget-variant-3 .pf-content-unit .pf-content-unit-meta p{line-height:1.3;color:#888}.pf-widget-variant-3 .pf-content-unit .pf-content-unit-img{background-size:cover;background-position:center center;background-repeat:no-repeat}.pf-widget-variant-3 .pf-content-unit:not(.stack){width:95%;margin:0 auto 30px}.pf-widget-variant-3 .pf-content-unit:not(.stack) .pf-content-unit-img{position:absolute;display:block;height:100%;width:40%}.pf-widget-variant-3 .pf-content-unit:not(.stack) .pf-content-unit-img+.pf-content-unit-meta{width:60%;min-height:135px}.pf-widget-variant-3 .pf-content-unit:not(.stack) .pf-content-unit-meta{padding:15px;display:block;margin:0 0 0 auto}.pf-widget-variant-3 .pf-content-unit:not(.stack) .pf-content-unit-meta span.pf-content-unit-info{font-size:13px}.pf-widget-variant-3 .pf-content-unit:not(.stack) .pf-content-unit-meta h4{font-size:18px}.pf-widget-variant-3 .pf-content-unit.stack .pf-content-unit-meta h4,.pf-widget-variant-3 .pf-content-unit:not(.stack) .pf-content-unit-meta p{font-size:14px}.pf-widget-variant-3 .pf-content-unit.stack{width:100%;display:block;text-align:left}.pf-widget-variant-3 .pf-content-unit.stack .pf-content-unit-meta p{font-size:13px}.pf-widget-variant-3 .pf-content-unit.stack .pf-content-unit-img{width:100%;height:135px}.pf-subscription form{width:100%;display:block;margin:0 auto}.pf-subscription form input[type=email],.pf-subscription form input[type=text]{width:100%;margin-bottom:1px}.pf-subscription form .pf-widget-btn{float:right;margin-left:5px;padding:0 16px}.pf-subscription form span{display:block;padding:2px;overflow:hidden}.pf-widget-modal .pf-widget-content,.pf-widget-slideout{max-height:100%;overflow-x:hidden;overflow-y:auto;box-shadow:0 4px 4px -4px rgba(0,0,0,.5)}.pf-form input.pf-field-half-width,.pf-form select.pf-field-half-width,.pf-sitegate input.pf-field-half-width,.pf-sitegate select.pf-field-half-width{width:49%;display:block;clear:none;float:left}.pf-form input.pf-field-half-width.right,.pf-form select.pf-field-half-width.right,.pf-sitegate input.pf-field-half-width.right,.pf-sitegate select.pf-field-half-width.right{float:right}.pf-form .pf-widget-btn,.pf-sitegate .pf-widget-btn{clear:both;margin-top:5px}.pf-form form.pf-custom-form>div,.pf-sitegate form.pf-custom-form>div{text-align:left;margin-bottom:10px}.pf-widget-modal,.pf-widget-modal .pf-widget-footer{text-align:center}.pf-form .pf-form-label,.pf-sitegate .pf-form-label{font-weight:700}.pf-form .pf-widget-checkbox,.pf-form .pf-widget-radio,.pf-sitegate .pf-widget-checkbox,.pf-sitegate .pf-widget-radio{display:block;padding:4px}.pf-form .pf-widget-checkbox input,.pf-form .pf-widget-radio input,.pf-sitegate .pf-widget-checkbox input,.pf-sitegate .pf-widget-radio input{margin-right:10px}.pf-form .pf-has-label,.pf-sitegate .pf-has-label{margin-top:7px}.pf-form div.pf-form-required,.pf-sitegate div.pf-form-required{position:relative}.pf-form div.pf-form-required.invalid [data-required=true]:not(.pf-has-label),.pf-sitegate div.pf-form-required.invalid [data-required=true]:not(.pf-has-label){border:1px solid #f12626;margin:-1px}.pf-form div.pf-form-required.pf-widget-checkbox-group [data-required=true],.pf-form div.pf-form-required.pf-widget-radio-group,.pf-sitegate div.pf-form-required.pf-widget-checkbox-group [data-required=true],.pf-sitegate div.pf-form-required.pf-widget-radio-group{border-radius:3px}.pf-form div.pf-form-required.invalid div.pf-required-flag,.pf-sitegate div.pf-form-required.invalid div.pf-required-flag{opacity:1;margin-left:10px}.pf-form div.pf-form-required div.pf-required-flag,.pf-sitegate div.pf-form-required div.pf-required-flag{font-size:12px;font-weight:700;position:relative;padding:3px 7px;display:inline;width:auto;color:#fff;background-color:#f12626;box-shadow:0 4px 4px -4px rgba(0,0,0,.5);transition:all .3s;margin-left:5px;opacity:0}.pf-form div.pf-form-required div.pf-required-flag span,.pf-sitegate div.pf-form-required div.pf-required-flag span{position:absolute;width:0;height:0;top:6px;left:-6px;border-top:4px solid transparent;border-bottom:4px solid transparent;content:'';border-right:6px solid #f12626}.pf-form div.pf-form-required span.required,.pf-sitegate div.pf-form-required span.required{color:#f12626}.pf-form.pf-widget-slideout input.pf-field-half-width,.pf-form.pf-widget-slideout select.pf-field-half-width,.pf-sitegate.pf-widget-slideout input.pf-field-half-width,.pf-sitegate.pf-widget-slideout select.pf-field-half-width{width:48%}.pf-widget-modal{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.5);z-index:9999}.pf-widget-modal .pf-va-middle{display:table-cell;vertical-align:middle}.pf-widget-modal .pf-widget-btn{font-size:16px;line-height:45px}.pf-widget-slideout .pf-widget-footer,.pf-widget-slideout.pf-widget-variant-1 .pf-widget-content .pf-widget-headline,.pf-widget-slideout.pf-widget-variant-1 .pf-widget-content .pf-widget-message{text-align:left}.pf-widget-modal .pf-widget-container{display:table;width:100%;height:100%;position:relative;top:-100vh;transition:all .3s}.pf-widget-modal .pf-widget-content{background-color:#f1f1f1;color:#888;width:100%;position:fixed;max-width:780px;margin:0 auto;padding:40px;border-radius:5px;top:50%;left:50%;transform:translate(-50%,-50%)}@media screen and (max-width:736px),screen and (max-height:640px){.pf-widget-modal .pf-widget-content{padding:40px 20px}}.pf-widget-modal .pf-widget-headline{font-size:28px}.pf-widget-modal .pf-widget-message{font-size:18px;margin:0 0 30px}.pf-widget-modal .pf-widget-body{display:table;width:100%}.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 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{margin-top:1px;margin-bottom:10px}.pf-widget-modal.opened .pf-widget-container{top:0}.pf-widget-modal.pf-widget-variant-2 .pf-widget-headline{margin-top:140px}.pf-widget-modal.pf-widget-variant-2 .pf-widget-img{float:none;position:absolute;top:20px;left:50%;margin-left:-70px;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}.pf-widget-modal.pf-subscription.pf-widget-has-branding span{margin-bottom:13px}.pf-widget-slideout{bottom:50px;width:350px;border-radius:4px;top:auto;position:fixed}.pf-widget-slideout .pf-widget-message{margin:0 0 20px}.pf-widget-slideout .pf-widget-btn{line-height:40px}.pf-widget-slideout .pf-widget-content{padding:30px;width:100%}.pf-widget-slideout .pf-widget-headline{font-size:20px}.pf-widget-slideout.pf-position-bottom-left,.pf-widget-slideout.pf-position-left,.pf-widget-slideout.pf-position-top-left{left:-100%}.pf-widget-slideout.pf-position-bottom-left.pf-origin-bottom,.pf-widget-slideout.pf-position-left.pf-origin-bottom,.pf-widget-slideout.pf-position-top-left.pf-origin-bottom{left:50px}@media screen and (max-width:736px),screen and (max-height:640px){.pf-widget-slideout{width:100%;max-width:350px}.pf-widget-slideout.pf-position-bottom-left,.pf-widget-slideout.pf-position-left,.pf-widget-slideout.pf-position-top-left{bottom:0}.pf-widget-slideout.pf-position-bottom-left.pf-origin-bottom,.pf-widget-slideout.pf-position-left.pf-origin-bottom,.pf-widget-slideout.pf-position-top-left.pf-origin-bottom{left:0}.pf-widget-slideout.pf-position-bottom-right,.pf-widget-slideout.pf-position-right,.pf-widget-slideout.pf-position-top-right{bottom:0}}.pf-widget-slideout.pf-position-bottom-right,.pf-widget-slideout.pf-position-right,.pf-widget-slideout.pf-position-top-right{left:auto;right:-100%}.pf-widget-slideout.pf-position-bottom-right.pf-origin-bottom,.pf-widget-slideout.pf-position-right.pf-origin-bottom,.pf-widget-slideout.pf-position-top-right.pf-origin-bottom{right:50px}.pf-widget-slideout.pf-position-left,.pf-widget-slideout.pf-position-right{bottom:auto;top:50%;transform:translateY(-50%);-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%)}.pf-widget-slideout.pf-position-top-left,.pf-widget-slideout.pf-position-top-right{bottom:auto;top:50px}@media screen and (max-width:736px),screen and (max-height:640px){.pf-widget-slideout.pf-position-bottom-right.pf-origin-bottom,.pf-widget-slideout.pf-position-right.pf-origin-bottom,.pf-widget-slideout.pf-position-top-right.pf-origin-bottom{left:auto;right:0}.pf-widget-slideout.pf-position-top-left,.pf-widget-slideout.pf-position-top-right{top:0}}.pf-widget-slideout.pf-origin-bottom{bottom:-100%}.pf-widget-slideout.opened.pf-position-bottom-left,.pf-widget-slideout.opened.pf-position-left,.pf-widget-slideout.opened.pf-position-top-left{left:50px}.pf-widget-slideout.opened.pf-position-bottom-right,.pf-widget-slideout.opened.pf-position-right,.pf-widget-slideout.opened.pf-position-top-right{right:50px}.pf-widget-slideout.opened.pf-origin-bottom{bottom:50px}@media screen and (max-width:736px),screen and (max-height:640px){.pf-widget-slideout.opened.pf-position-bottom-left,.pf-widget-slideout.opened.pf-position-left,.pf-widget-slideout.opened.pf-position-top-left{left:0}.pf-widget-slideout.opened.pf-position-bottom-right,.pf-widget-slideout.opened.pf-position-right,.pf-widget-slideout.opened.pf-position-top-right{right:0;left:auto}.pf-widget-slideout.opened.pf-origin-bottom{bottom:0}}.pf-widget-slideout .branding svg{bottom:-22px;right:-20px;width:100px}.pf-widget-inline.pf-widget-variant-2 .pf-widget-content,.pf-widget-slideout.pf-widget-variant-2 .pf-widget-content{text-align:center}.pf-widget-slideout.pf-widget-variant-2 .pf-widget-content .pf-widget-headline{margin-top:110px}.pf-widget-slideout.pf-widget-variant-2 .pf-widget-img{width:100px;height:100px;float:none;position:absolute;top:20px;left:50%;margin-left:-50px}.pf-widget-slideout.pf-form{width:370px}.pf-widget-slideout.pf-subscription.pf-widget-has-branding span{margin-bottom:13px}.pf-widget-slideout form:not(.pf-custom-form) input[type=email].invalid,.pf-widget-slideout form:not(.pf-custom-form) input[type=text].invalid{margin:-1px -1px 9px}.pf-push-down{transition:margin-top .3s}.pf-widget-inline,.pf-widget-inline .pf-widget-btn{transition:all 0s}.pf-push-down.opened{margin-top:59px}@media screen and (max-width:736px),screen and (max-height:640px){.pf-widget-slideout.pf-form{width:100%;max-width:370px}.pf-push-down.opened{margin-top:0}}.pf-widget-bar{height:auto;padding:10px 0;min-height:59px;left:0;right:0;box-shadow:0 4px 4px -4px rgba(0,0,0,.5)}.pf-widget-bar .pf-widget-body{margin:0 20px;float:left}.pf-widget-bar .pf-widget-close{top:50%;position:absolute;margin-top:-16px;right:20px;line-height:1;margin-right:0}.pf-widget-bar .pf-widget-btn{line-height:35px}.pf-widget-bar .pf-bar-content{text-align:center;padding:0 40px}@media screen and (max-width:736px),screen and (max-height:640px){.pf-widget-bar .pf-bar-content{padding:0 40px 0 20px}}.pf-widget-bar .pf-bar-content .pf-widget-message{text-overflow:ellipsis;max-width:100%;overflow:hidden;display:inline-block;white-space:normal;margin:6px 16px}.pf-widget-bar .pf-bar-content input[type=email],.pf-widget-bar .pf-bar-content input[type=text]{margin:0 1px;max-width:200px}.pf-widget-bar .pf-bar-content form:not(.pf-custom-form) input[type=email],.pf-widget-bar .pf-bar-content form:not(.pf-custom-form) input[type=text]{margin-bottom:0}.pf-widget-bar .pf-bar-content form:not(.pf-custom-form) input[type=email].invalid,.pf-widget-bar .pf-bar-content form:not(.pf-custom-form) input[type=text].invalid{margin:0}.pf-widget-bar .pf-bar-content>*{display:inline-block;vertical-align:middle}.pf-widget-bar.pf-position-bottom-absolute,.pf-widget-bar.pf-position-top-absolute{position:absolute}.pf-widget-bar.pf-position-top-absolute,.pf-widget-bar.pf-position-top-fixed{top:-50px}.pf-widget-bar.opened.pf-position-top-absolute,.pf-widget-bar.opened.pf-position-top-fixed{top:0}.pf-widget-bar.pf-position-top-absolute .pf-bar-content,.pf-widget-bar.pf-position-top-fixed .pf-bar-content{padding-top:0}.pf-widget-bar.pf-position-bottom-fixed{bottom:-50px}.pf-widget-bar.pf-position-bottom-fixed,.pf-widget-bar.pf-position-top-fixed{position:fixed}.pf-widget-bar.opened.pf-position-bottom-fixed{bottom:0}.pf-widget-bar.pf-widget-variant-2 .pf-widget-img{height:35px;width:35px;top:50%;margin-top:-17.5px;position:absolute}.pf-widget-bar.pf-message .pf-widget-btn,.pf-widget-bar.pf-subscription form .pf-widget-btn{margin-top:2px}@media screen and (max-width:736px),screen and (max-height:640px){.pf-widget-bar.pf-widget-variant-2 .pf-widget-img{display:none}}.pf-widget-bar.pf-subscription form{width:auto}.pf-widget-bar.pf-subscription form input[type=email]{height:35px}.pf-widget-button{position:fixed;box-shadow:1px 0 4px 0 rgba(0,0,0,.5);border-radius:2px}.pf-widget-button .pf-widget-message{border:0;background-color:transparent;line-height:42px;padding:0 16px 5px;margin:0;font-weight:700;display:block;cursor:pointer;overflow:hidden;max-width:150px;white-space:nowrap;text-overflow:ellipsis;color:#888}.pf-widget-button.pf-position-left{transform-origin:left bottom;transform:rotate(90deg);left:-50px}.pf-widget-button.pf-position-right{box-shadow:-1px 0 4px 0 rgba(0,0,0,.5);transform-origin:right bottom;transform:rotate(-90deg);right:-50px}.pf-widget-button.pf-position-left,.pf-widget-button.pf-position-right{top:10%}.pf-widget-button.pf-position-bottom-left,.pf-widget-button.pf-position-top-left{left:42px}.pf-widget-button.pf-position-bottom-right,.pf-widget-button.pf-position-top-right{right:42px}.pf-widget-button.pf-position-bottom-left,.pf-widget-button.pf-position-bottom-right{bottom:-50px}.pf-widget-button.pf-position-top-left,.pf-widget-button.pf-position-top-right{top:-50px}.pf-widget-button.pf-position-top-left .pf-widget-message,.pf-widget-button.pf-position-top-right .pf-widget-message{padding:5px 16px 0}.pf-widget-button.opened.pf-position-left{left:-6px}.pf-widget-button.opened.pf-position-left:hover{left:-1px}.pf-widget-button.opened.pf-position-right{right:-6px}.pf-widget-button.opened.pf-position-right:hover{right:-1px}.pf-widget-button.opened.pf-position-bottom-left,.pf-widget-button.opened.pf-position-bottom-right{bottom:-6px;box-shadow:0 1px 4px 0 rgba(0,0,0,.5)}.pf-widget-button.opened.pf-position-bottom-left:hover,.pf-widget-button.opened.pf-position-bottom-right:hover{bottom:-1px}.pf-widget-button.opened.pf-position-top-left,.pf-widget-button.opened.pf-position-top-right{top:-6px;box-shadow:0 1px 4px 0 rgba(0,0,0,.5)}.pf-widget-button.opened.pf-position-top-left:hover,.pf-widget-button.opened.pf-position-top-right:hover{top:-1px}.pf-widget-inline{padding:20px;border-radius:2px;box-shadow:0 4px 4px -4px rgba(0,0,0,.5);position:relative}.pf-widget-inline .pf-widget-message{margin:0 0 20px}.pf-widget-inline.pf-widget-variant-2 .pf-widget-content .pf-widget-headline{margin-top:110px}.pf-widget-inline.pf-widget-variant-2 .pf-widget-img{width:100px;height:100px;float:none;position:absolute;top:20px;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}.pf-widget-inline.pf-subscription.pf-widget-has-branding span{margin-bottom:35px}.pf-widget-inline.pf-widget-variant-3 .pf-content-unit{max-width:650px}.pf-widget-inline.pf-widget-variant-3 .pf-content-unit.stack{margin:0 auto;max-width:400px}.pf-widget-inline .branding{position:relative}.pf-widget-inline .branding svg{position:absolute;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{margin:-1px -1px 9px} \ No newline at end of file diff --git a/dist/pathfora.min.js b/dist/pathfora.min.js index 65ea227..dc80371 100644 --- a/dist/pathfora.min.js +++ b/dist/pathfora.min.js @@ -1 +1 @@ -!function(){"use strict";function a(o){return o.generic={className:"pathfora",branding:!1,responsive:!0,headline:"",themes:{dark:{background:"#333",headline:"#fefefe",text:"#aaa",close:"#888",actionText:"#fff",actionBackground:"#444",cancelText:"#888",cancelBackground:"#333"},light:{background:"#f1f1f1",headline:"#444",text:"#888",close:"#bbb",actionText:"#444",actionBackground:"#fff",cancelText:"#bbb",cancelBackground:"#f1f1f1"}},displayConditions:{showOnInit:!0,showOnExitIntent:!1,showDelay:0,hideAfter:0,displayWhenElementVisible:"",scrollPercentageToDisplay:0}},o.message={layout:"modal",position:"",variant:"1",okMessage:"Confirm",cancelMessage:"Cancel",okShow:!0,cancelShow:!0},o.subscription={layout:"modal",position:"",variant:"1",placeholders:{email:"Email"},okMessage:"Confirm",cancelMessage:"Cancel",okShow:!0,cancelShow:!0},o.form={layout:"modal",position:"",variant:"1",placeholders:{name:"Name",title:"Title",email:"Email",message:"Message",company:"Company",phone:"Phone Number",country:"Country",referralEmail:"Referral Email"},required:{name:!0,email:!0},fields:{company:!1,phone:!1,country:!1,referralEmail:!1},okMessage:"Send",okShow:!0,cancelMessage:"Cancel",cancelShow:!0},o.sitegate={layout:"modal",position:"",variant:"1",placeholders:{name:"Name",title:"Title",email:"Email",message:"Message",company:"Company",phone:"Phone Number",country:"Country",referralEmail:"Referral Email"},required:{name:!0,email:!0},fields:{message:!1,phone:!1,country:!1,referralEmail:!1},okMessage:"Submit",okShow:!0,cancelShow:!1,showForm:!0},o}function p(o){return o.delayedWidgets={},o.openedWidgets=[],o.initializedWidgets=[],o.prioritizedWidgets=[],o.readyWidgets=[],o.triggeredWidgets={},o}function l(o){return o.pageViews=0,o.timeSpentOnPage=0,o.closedWidgets=[],o.completedActions=[],o.cancelledActions=[],o.displayedWidgets=[],o.abTestingGroups=[],o}function o(){for(var o=[],t=0;t

",inline:"

",modal:"",slideout:"

"},sitegate:{modal:""},message:{bar:"

",button:"",inline:"

",modal:"",slideout:"

"},includes:{},form:{inline:"

",modal:"",slideout:"

"},assets:{lytics:"lytics"}},F=window.document;function s(o){var t,e=this,i=F.documentElement.doScroll,n="DOMContentLoaded";(i?/^loaded|^c/:/^loaded|^i|^c/).test(F.readyState)?(e.DOMLoaded=!0,o()):F.addEventListener(n,t=function(){F.removeEventListener(n,t),e.DOMLoaded=!0,o()})}function d(o){return String(o).replace(/[\\^$*+?.()|[\]{}]/g,"\\$&")}function A(o,t){var e=new RegExp(["(^|\\b)",d(t.split(" ").join("|")),"(\\b|$)"].join(""),"gi");o.className=o.className.replace(e," ")}function V(o,t){A(o,t),o.className=[o.className,t].join(" ")}function M(o,t){return new RegExp("(^| )"+d(t)+"( |$)","gi").test(o.className)}function E(o,t,e){var i;i=e?"; expires="+e.toUTCString():"; expires=0",F.cookie=[encodeURIComponent(o),"=",encodeURIComponent(t),i,"; path = /"].join("")}function v(o){E(o,"",new Date("Thu, 01 Jan 1970 00:00:01 GMT"))}function T(o){try{return decodeURIComponent(o)===o&&encodeURIComponent(o)!==o}catch(o){return!1}}function I(t){try{return decodeURIComponent(t)}catch(o){return t}}function Z(o){var t=F.cookie,e=t.match("(^|;)\\s*"+encodeURIComponent(d(o))+"\\s*=\\s*([^;]+)");if(e){var i=e.pop();return T(i)&&(v(o),E(o,i)),I(i)}return e=t.match("(^|;)\\s*"+d(o)+"\\s*=\\s*([^;]+)"),null}function k(o){var t=0,e=[];for(var i in o)if(o.hasOwnProperty(i)){if(0!==t?e.push("&"):e.push("?"),o[i]instanceof Object)for(var n in o[i])o[i].hasOwnProperty(n)&&(n>5]&1<<(31&n)))?p.push("%",s(v>>4),s(15&v)):p.push(c))}return p.join("")}function N(o,t){for(var e in t)t.hasOwnProperty(e)&&"object"==typeof t[e]&&null!==t[e]&&!Array.isArray(t[e])?t.hasOwnProperty(e)&&(void 0===o[e]&&(o[e]={}),N(o[e],t[e])):t.hasOwnProperty(e)&&(o[e]=t[e])}function B(o,t,e){for(var i=o,n=t.split("."),a=0;a()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/g.test(o)}var G={addClass:V,hasClass:M,removeClass:A,readCookie:Z,saveCookie:E,deleteCookie:v,updateLegacyCookies:function(){var t=[w,O,f,x,D,H,r,W],e=0,o=function(o){return 0===o.trim().indexOf(t[e])},i=function(o){var t=o.trim().split("=");if(2===t.length){var e=t[0],i=t[1];T(i)&&(v(e),E(e,i));try{decodeURIComponent(i)!==decodeURIComponent(decodeURIComponent(i))&&(v(e),E(e,decodeURIComponent(decodeURIComponent(i))))}catch(o){}}},n=function(o){var t=sessionStorage.getItem(o);T(t)&&(sessionStorage.removeItem(o),sessionStorage.setItem(encodeURIComponent(o),encodeURIComponent(t)))};for(e=0;e=o.widget.session||i>=o.widget.total||l>=o.global.session)&&(n=!1),n}function Q(o,t,e){var i,n,a,p={"pf-widget-id":t.id,"pf-widget-type":t.type,"pf-widget-layout":t.layout,"pf-widget-variant":t.variant};switch(t.recommend&&t.content&&0*'),p.appendChild(a)),!0===o.required&&(V(p,"pf-form-required"),e.setAttribute("data-required","true"),o.label)){var r=F.createElement("div");r.className="pf-required-flag",r.innerHTML="required";var u=F.createElement("span");r.appendChild(u),p.appendChild(r)}if(o.placeholder){if("select"===o.type){var s=F.createElement("option");s.setAttribute("value",""),s.innerHTML=o.placeholder,e.appendChild(s)}else e.placeholder=o.placeholder;o.label||e.setAttribute("aria-label",o.placeholder)}if(o.values)for(i=0;ii.display.descriptionLimit&&-1!==i.display.descriptionLimit&&(v=(v=v.substring(0,i.display.descriptionLimit)).substring(0,v.lastIndexOf(" "))+"..."),r.innerHTML=v,p.appendChild(r)}e.appendChild(p)}}(i,o),e=o,i.className=["pf-widget ","pf-"+e.type," pf-widget-"+e.layout,e.position?" pf-position-"+e.position:"",e.pushDown?" pf-has-push-down":"",e.origin?" pf-origin-"+e.origin:""," pf-widget-variant-"+e.variant,e.theme?" pf-theme-"+e.theme:"",e.className?" "+e.className:"",e.branding?" pf-widget-has-branding":"",e.responsive?"":" pf-mobile-hide"].join(""),po(i,o),function(o,t){switch(t.theme){case"custom":t.colors&&lo(o,t.colors);break;case"none":break;default:t.theme&&lo(o,u.generic.themes[t.theme])}}(i,o),i}function uo(o,t){if("inline"===o.layout||"modal"===o.layout&&o.recommend){var e=t.querySelector(".pf-content-unit");e&&(t.offsetWidth=i&&A(e,"stack"))}}function so(o){var t=function(t){for(var o=0;o=o.length)){var i=o[t],n=u[i.type],a=u.generic;if(N(i,a),N(i,n),N(i,i.config),!(z.initializedWidgets.indexOf(i.id)<0))throw new Error("Cannot add two widgets with the same id");z.initializedWidgets.push(i.id),i.success&&(i.formStates||(i.formStates={}),i.formStates.success||(i.formStates.success=i.success)),bo(i,p,function(){Co(i,p,function(){if(p.initializeWidget(i,e),e&&e.priority===K){if(z.prioritizedWidgets.length&&z.prioritizedWidgets[0].id===i.id)return;l(o,t+1,e)}})}),e&&e.priority===K||l(o,t+1,e)}};l(o,0,t)}function Mo(o,t,e,i){if(!e||!e.length)return!0;var n,a,p=J(o,t),l=!1;"function"==typeof p&&(p=(a=p.toString()).substring(a.indexOf("{")+1,a.lastIndexOf("}")),n=a.match(/(function.+\()(.+(?=\)))(.+$)/),l=!0);for(var r=0;rnew Date(n.end_at).getTime()&&(a=!1),a)),i.pageVisits&&(o.valid=o.valid&&(l=i.pageVisits,Z(W)>=l)),i.hideAfterAction&&(o.valid=o.valid&&(r=i.hideAfterAction,u=o,d=!0,c=Date.now(),v=Z(x+u.id),f=Z(D+u.id),m=Z(H+u.id),r.confirm&&v&&(s=v.split("|"),parseInt(s[0],10)>=r.confirm.hideCount&&(d=!1),void 0!==s[1]&&Math.abs(s[1]-c)/1e3=r.cancel.hideCount&&(d=!1),void 0!==s[1]&&Math.abs(s[1]-c)/1e3=r.closed.hideCount&&(d=!1),void 0!==s[1]&&Math.abs(s[1]-c)/1e3=F.body.offsetHeight;return!!(k.elem.offsetTop-window.innerHeight/2<=o||t)&&(ko(k,I),!0)}},o.watchers.push(e),No(o)),i.scrollPercentageToDisplay&&(N=i.scrollPercentageToDisplay,e=L={check:function(){return Math.max(F.body.scrollHeight,F.body.offsetHeight,F.documentElement.clientHeight,F.documentElement.scrollHeight,F.documentElement.offsetHeight)*(N/100)<=(F.documentElement.scrollTop||F.body.scrollTop)&&(ko(L,B),!0)}},(B=o).watchers.push(e),No(o)),i.manualTrigger&&(G=i.manualTrigger,e=R={check:function(){return!!(G&&z.triggeredWidgets[P.id]||z.triggeredWidgets["*"])&&(ko(R,P),!0)}},(P=o).watchers.push(e),z.readyWidgets.push(o),vo(o)),0!==o.watchers.length||i.showOnExitIntent||o.valid&&so(o)}}function Lo(o){return o.id=t(),ro(o)}function Go(){var o,t,e=z.openedWidgets,i=z.delayedWidgets;e.forEach(function(o){var t=F.getElementById(o.id);for(var e in A(t,"opened"),t.parentNode.removeChild(t),o.listeners)if(o.listeners.hasOwnProperty(e)){var i=o.listeners[e];i.target.removeEventListener(i.type,i.fn)}}),e.slice(0);for(var n=i.length;-1

",inline:"

",modal:"",slideout:"

"},sitegate:{modal:""},message:{bar:"

",button:"",inline:"

",modal:"",slideout:"

"},includes:{},form:{inline:"

",modal:"",slideout:"

"},assets:{lytics:"lytics"}},F=window.document;function s(o){var t,e=this,i=F.documentElement.doScroll,n="DOMContentLoaded";(i?/^loaded|^c/:/^loaded|^i|^c/).test(F.readyState)?(e.DOMLoaded=!0,o()):F.addEventListener(n,t=function(){F.removeEventListener(n,t),e.DOMLoaded=!0,o()})}function d(o){return String(o).replace(/[\\^$*+?.()|[\]{}]/g,"\\$&")}function I(o,t){var e=new RegExp(["(^|\\b)",d(t.split(" ").join("|")),"(\\b|$)"].join(""),"gi");o.className=o.className.replace(e," ")}function V(o,t){I(o,t),o.className=[o.className,t].join(" ")}function C(o,t){return new RegExp("(^| )"+d(t)+"( |$)","gi").test(o.className)}function A(o,t,e){var i;i=e?"; expires="+e.toUTCString():"; expires=0",F.cookie=[encodeURIComponent(o),"=",encodeURIComponent(t),i,"; path = /"].join("")}function v(o){A(o,"",new Date("Thu, 01 Jan 1970 00:00:01 GMT"))}function M(o){try{return decodeURIComponent(o)===o&&encodeURIComponent(o)!==o}catch(o){return!1}}function E(t){try{return decodeURIComponent(t)}catch(o){return t}}function Z(o){var t=F.cookie,e=t.match("(^|;)\\s*"+encodeURIComponent(d(o))+"\\s*=\\s*([^;]+)");if(e){var i=e.pop();return M(i)&&(v(o),A(o,i)),E(i)}return e=t.match("(^|;)\\s*"+d(o)+"\\s*=\\s*([^;]+)"),null}function k(o){var t=0,e=[];for(var i in o)if(o.hasOwnProperty(i)){if(0!==t?e.push("&"):e.push("?"),o[i]instanceof Object)for(var n in o[i])o[i].hasOwnProperty(n)&&(n>5]&1<<(31&n)))?p.push("%",s(v>>4),s(15&v)):p.push(c))}return p.join("")}function N(o,t){for(var e in t)t.hasOwnProperty(e)&&"object"==typeof t[e]&&null!==t[e]&&!Array.isArray(t[e])?t.hasOwnProperty(e)&&(void 0===o[e]&&(o[e]={}),N(o[e],t[e])):t.hasOwnProperty(e)&&(o[e]=t[e])}function B(o,t,e){for(var i=o,n=t.split("."),a=0;a()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/g.test(o)}var G={addClass:V,hasClass:C,removeClass:I,readCookie:Z,saveCookie:A,deleteCookie:v,updateLegacyCookies:function(){var t=[y,O,f,x,D,H,r,W],e=0,o=function(o){return 0===o.trim().indexOf(t[e])},i=function(o){var t=o.trim().split("=");if(2===t.length){var e=t[0],i=t[1];M(i)&&(v(e),A(e,i));try{decodeURIComponent(i)!==decodeURIComponent(decodeURIComponent(i))&&(v(e),A(e,decodeURIComponent(decodeURIComponent(i))))}catch(o){}}},n=function(o){var t=sessionStorage.getItem(o);M(t)&&(sessionStorage.removeItem(o),sessionStorage.setItem(encodeURIComponent(o),encodeURIComponent(t)))};for(e=0;e=o.widget.session||i>=o.widget.total||l>=o.global.session)&&(n=!1),n}function Q(o,t,e){var i,n,a,p={"pf-widget-id":t.id,"pf-widget-type":t.type,"pf-widget-layout":t.layout,"pf-widget-variant":t.variant};switch(t.recommend&&t.content&&0*'),p.appendChild(a)),!0===o.required&&(V(p,"pf-form-required"),e.setAttribute("data-required","true"),o.label)){var r=F.createElement("div");r.className="pf-required-flag",r.innerHTML="required";var u=F.createElement("span");r.appendChild(u),p.appendChild(r)}if(o.placeholder){if("select"===o.type){var s=F.createElement("option");s.setAttribute("value",""),s.innerHTML=o.placeholder,e.appendChild(s)}else e.placeholder=o.placeholder;o.label||e.setAttribute("aria-label",o.placeholder)}if(o.values)for(i=0;ii.display.descriptionLimit&&-1!==i.display.descriptionLimit&&(v=(v=v.substring(0,i.display.descriptionLimit)).substring(0,v.lastIndexOf(" "))+"..."),r.innerHTML=v,p.appendChild(r)}e.appendChild(p)}}(i,o),e=o,i.className=["pf-widget ","pf-"+e.type," pf-widget-"+e.layout,e.position?" pf-position-"+e.position:"",e.pushDown?" pf-has-push-down":"",e.origin?" pf-origin-"+e.origin:""," pf-widget-variant-"+e.variant,e.theme?" pf-theme-"+e.theme:"",e.className?" "+e.className:"",e.branding?" pf-widget-has-branding":"",e.responsive?"":" pf-mobile-hide"].join(""),po(i,o),function(o,t){switch(t.theme){case"custom":t.colors&&lo(o,t.colors);break;case"none":break;default:t.theme&&lo(o,u.generic.themes[t.theme])}}(i,o),i}function uo(o,t){if("inline"===o.layout||"modal"===o.layout&&o.recommend){var e=t.querySelector(".pf-content-unit");e&&(t.offsetWidth=i&&I(e,"stack"))}}function so(o){var t=function(t){for(var o=0;o=o.length)){var i=o[t],n=u[i.type],a=u.generic;if(N(i,a),N(i,n),N(i,i.config),!(z.initializedWidgets.indexOf(i.id)<0))throw new Error("Cannot add two widgets with the same id");z.initializedWidgets.push(i.id),i.success&&(i.formStates||(i.formStates={}),i.formStates.success||(i.formStates.success=i.success)),bo(i,p,function(){Co(i,p,function(){if(p.initializeWidget(i,e),e&&e.priority===K){if(z.prioritizedWidgets.length&&z.prioritizedWidgets[0].id===i.id)return;l(o,t+1,e)}})}),e&&e.priority===K||l(o,t+1,e)}};l(o,0,t)}function Mo(o,t,e,i){if(!e||!e.length)return!0;var n,a,p=J(o,t),l=!1;"function"==typeof p&&(p=(a=p.toString()).substring(a.indexOf("{")+1,a.lastIndexOf("}")),n=a.match(/(function.+\()(.+(?=\)))(.+$)/),l=!0);for(var r=0;rnew Date(n.end_at).getTime()&&(a=!1),a)),i.pageVisits&&(o.valid=o.valid&&(l=i.pageVisits,Z(W)>=l)),i.hideAfterAction&&(o.valid=o.valid&&(r=i.hideAfterAction,u=o,d=!0,c=Date.now(),v=Z(x+u.id),f=Z(D+u.id),m=Z(H+u.id),r.confirm&&v&&(s=v.split("|"),parseInt(s[0],10)>=r.confirm.hideCount&&(d=!1),void 0!==s[1]&&Math.abs(s[1]-c)/1e3=r.cancel.hideCount&&(d=!1),void 0!==s[1]&&Math.abs(s[1]-c)/1e3=r.closed.hideCount&&(d=!1),void 0!==s[1]&&Math.abs(s[1]-c)/1e3=F.body.offsetHeight;return!!(k.elem.offsetTop-window.innerHeight/2<=o||t)&&(ko(k,I),!0)}},o.watchers.push(e),No(o)),i.scrollPercentageToDisplay&&(N=i.scrollPercentageToDisplay,e=L={check:function(){return Math.max(F.body.scrollHeight,F.body.offsetHeight,F.documentElement.clientHeight,F.documentElement.scrollHeight,F.documentElement.offsetHeight)*(N/100)<=(F.documentElement.scrollTop||F.body.scrollTop)&&(ko(L,B),!0)}},(B=o).watchers.push(e),No(o)),i.manualTrigger&&(G=i.manualTrigger,e=R={check:function(){return!!(G&&z.triggeredWidgets[P.id]||z.triggeredWidgets["*"])&&(ko(R,P),!0)}},(P=o).watchers.push(e),z.readyWidgets.push(o),vo(o)),0!==o.watchers.length||i.showOnExitIntent||o.valid&&so(o)}}function Lo(o){return o.id=t(),ro(o)}function Go(){var o,t,e=z.openedWidgets,i=z.delayedWidgets;e.forEach(function(o){var t=F.getElementById(o.id);for(var e in I(t,"opened"),t.parentNode.removeChild(t),o.listeners)if(o.listeners.hasOwnProperty(e)){var i=o.listeners[e];i.target.removeEventListener(i.type,i.fn)}}),e.slice(0);for(var n=i.length;-1` 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` | `

` headline text | -| `pf-widget-message` | `

` containing widget message text | +| `pf-widget-message` | `

` 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. diff --git a/docs/docs/examples/img/layouts/inline/backgroundImage.png b/docs/docs/examples/img/layouts/inline/backgroundImage.png new file mode 100644 index 0000000..a20d723 Binary files /dev/null and b/docs/docs/examples/img/layouts/inline/backgroundImage.png differ diff --git a/docs/docs/examples/img/layouts/inline/backgroundImagePosition.png b/docs/docs/examples/img/layouts/inline/backgroundImagePosition.png new file mode 100644 index 0000000..bb125d8 Binary files /dev/null and b/docs/docs/examples/img/layouts/inline/backgroundImagePosition.png differ diff --git a/docs/docs/examples/img/layouts/modal/backgroundImage-bottom.png b/docs/docs/examples/img/layouts/modal/backgroundImage-bottom.png new file mode 100644 index 0000000..b7509bb Binary files /dev/null and b/docs/docs/examples/img/layouts/modal/backgroundImage-bottom.png differ diff --git a/docs/docs/examples/img/layouts/modal/backgroundImage-left.png b/docs/docs/examples/img/layouts/modal/backgroundImage-left.png new file mode 100644 index 0000000..680b9f5 Binary files /dev/null and b/docs/docs/examples/img/layouts/modal/backgroundImage-left.png differ diff --git a/docs/docs/examples/img/layouts/modal/backgroundImage-right.png b/docs/docs/examples/img/layouts/modal/backgroundImage-right.png new file mode 100644 index 0000000..c9274c9 Binary files /dev/null and b/docs/docs/examples/img/layouts/modal/backgroundImage-right.png differ diff --git a/docs/docs/examples/img/layouts/modal/backgroundImage-top.png b/docs/docs/examples/img/layouts/modal/backgroundImage-top.png new file mode 100644 index 0000000..2937568 Binary files /dev/null and b/docs/docs/examples/img/layouts/modal/backgroundImage-top.png differ diff --git a/docs/docs/examples/img/layouts/modal/backgroundImage.png b/docs/docs/examples/img/layouts/modal/backgroundImage.png new file mode 100644 index 0000000..65551d9 Binary files /dev/null and b/docs/docs/examples/img/layouts/modal/backgroundImage.png differ diff --git a/docs/docs/examples/src/layouts/inline/backgroundImage.css b/docs/docs/examples/src/layouts/inline/backgroundImage.css new file mode 100644 index 0000000..d347e1e --- /dev/null +++ b/docs/docs/examples/src/layouts/inline/backgroundImage.css @@ -0,0 +1,3 @@ +.inline-module { + width: 400px; +} \ No newline at end of file diff --git a/docs/docs/examples/src/layouts/inline/backgroundImage.html b/docs/docs/examples/src/layouts/inline/backgroundImage.html new file mode 100644 index 0000000..55a8d60 --- /dev/null +++ b/docs/docs/examples/src/layouts/inline/backgroundImage.html @@ -0,0 +1 @@ +

\ No newline at end of file diff --git a/docs/docs/examples/src/layouts/inline/backgroundImage.js b/docs/docs/examples/src/layouts/inline/backgroundImage.js new file mode 100644 index 0000000..90595e3 --- /dev/null +++ b/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]); diff --git a/docs/docs/examples/src/layouts/inline/backgroundImagePosition.css b/docs/docs/examples/src/layouts/inline/backgroundImagePosition.css new file mode 100644 index 0000000..79e9fe1 --- /dev/null +++ b/docs/docs/examples/src/layouts/inline/backgroundImagePosition.css @@ -0,0 +1,3 @@ +.inline-module { + width: 600px; +} \ No newline at end of file diff --git a/docs/docs/examples/src/layouts/inline/backgroundImagePosition.html b/docs/docs/examples/src/layouts/inline/backgroundImagePosition.html new file mode 100644 index 0000000..55a8d60 --- /dev/null +++ b/docs/docs/examples/src/layouts/inline/backgroundImagePosition.html @@ -0,0 +1 @@ +
\ No newline at end of file diff --git a/docs/docs/examples/src/layouts/inline/backgroundImagePosition.js b/docs/docs/examples/src/layouts/inline/backgroundImagePosition.js new file mode 100644 index 0000000..6cddf70 --- /dev/null +++ b/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]); diff --git a/docs/docs/examples/src/layouts/modal/backgroundImage.js b/docs/docs/examples/src/layouts/modal/backgroundImage.js new file mode 100644 index 0000000..c237f35 --- /dev/null +++ b/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]); diff --git a/docs/docs/examples/src/layouts/modal/backgroundImageBottom.js b/docs/docs/examples/src/layouts/modal/backgroundImageBottom.js new file mode 100644 index 0000000..db9c956 --- /dev/null +++ b/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]); diff --git a/docs/docs/examples/src/layouts/modal/backgroundImageLeft.js b/docs/docs/examples/src/layouts/modal/backgroundImageLeft.js new file mode 100644 index 0000000..91459c2 --- /dev/null +++ b/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]); diff --git a/docs/docs/examples/src/layouts/modal/backgroundImageRight.js b/docs/docs/examples/src/layouts/modal/backgroundImageRight.js new file mode 100644 index 0000000..e19cf7c --- /dev/null +++ b/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]); diff --git a/docs/docs/examples/src/layouts/modal/backgroundImageTop.js b/docs/docs/examples/src/layouts/modal/backgroundImageTop.js new file mode 100644 index 0000000..159d1c5 --- /dev/null +++ b/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]); diff --git a/docs/docs/layouts/inline.md b/docs/docs/layouts/inline.md index d098d0f..1090a59 100644 --- a/docs/docs/layouts/inline.md +++ b/docs/docs/layouts/inline.md @@ -16,7 +16,7 @@ Position determines the HTML element that should contain the inline module. Behavior - + selector Javascript selector of an existing div on the page where the module should appear. @@ -44,7 +44,7 @@ Variant determines any extra content that may be used by the module. Behavior - + 1 default text-only-module @@ -57,6 +57,10 @@ Variant determines any extra content that may be used by the module. 3 module includes a content recommendation + + 4 + module includes a background image + ## image @@ -73,7 +77,7 @@ Define the featured image you would like to use for the module. Behavior - + image string @@ -85,4 +89,50 @@ Define the featured image you would like to use for the module. ![Image Inline Module](../examples/img/layouts/inline/image.png) -

\ No newline at end of file
+

+
+## background image
+
+Define the background image and position you would like to use for the module.
+
+**Note:** This setting is only valid for modules with a variant value of 2.
+
+
+  
+    
+      
+    
+    
+      
+      
+      
+    
+  
+
+  
+    
+    
+    
+  
+
+  
+    
+    
+    
+  
+
backgroundImage object
KeyTypeBehavior
srcstringURL of the image
positionstringoptional position of the image: top, bottom, right, or left

+
+
Customzing position

+
The position of the background image and the text block can be tweaked with custom css.

+
+
Background Image (variant 4) - Live Preview

+
+![Background Image Inline Module](../examples/img/layouts/inline/backgroundImage.png)
+
+

+
+
Background Image with Position (variant 4) - Live Preview

+
+![Background Image with Position Inline Module](../examples/img/layouts/inline/backgroundImagePosition.png)
+
+

\ No newline at end of file
diff --git a/docs/docs/layouts/modal.md b/docs/docs/layouts/modal.md
index 88af466..efc1323 100644
--- a/docs/docs/layouts/modal.md
+++ b/docs/docs/layouts/modal.md
@@ -14,7 +14,7 @@ Variant determines any extra content (dictated by extra keys in the config) that
       Behavior
     
   
-  
+
   
     1
     default text-only-module
@@ -27,6 +27,10 @@ Variant determines any extra content (dictated by extra keys in the config) that
     3
     module includes a content recommendation
   
+  
+    4
+    module icludes a background image
+  
 
 
 ## image
@@ -43,7 +47,7 @@ Define the featured image you would like to use for the module.
       Behavior
     
   
-  
+
   
     image
     string
@@ -56,3 +60,57 @@ Define the featured image you would like to use for the module.
 ![Image Slideout Module](../examples/img/layouts/modal/image.png)
 
 

+
+## background image
+
+Define the background image and position you would like to use for the module.
+
+**Note:** This setting is only valid for modules with a variant value of 4
+
+
+  
+    
+      
+    
+    
+      
+      
+      
+    
+  
+
+  
+    
+    
+    
+  
+
+  
+    
+    
+    
+  
+
backgroundImage object
KeyTypeBehavior
srcstringURL of the image
positionstringoptional position of the image: top, bottom, right, or left

+
+
Customzing position

+
The position of the background image and the text block can be tweaked with custom css.

+
+
Background Image (variant 4) - Live Preview

+![Background Image Module](../examples/img/layouts/modal/backgroundImage.png)
+

+
+
Background Image (variant 4) - Position Top - Live Preview

+![Background Image Module Position Top](../examples/img/layouts/modal/backgroundImage-top.png)
+

+
+
Background Image (variant 4) - Position Bottom - Live Preview

+![Background Image Module Position Bottom](../examples/img/layouts/modal/backgroundImage-bottom.png)
+

+
+
Background Image (variant 4) - Position Right - Live Preview

+![Background Image Module Position Bottom](../examples/img/layouts/modal/backgroundImage-right.png)
+

+
+
Background Image (variant 4) - Position Left - Live Preview

+![Background Image Module Position Bottom](../examples/img/layouts/modal/backgroundImage-left.png)
+

diff --git a/src/less/widgets/inlines.less b/src/less/widgets/inlines.less
index d6594ae..dcaccb4 100644
--- a/src/less/widgets/inlines.less
+++ b/src/less/widgets/inlines.less
@@ -34,6 +34,53 @@
     }
   }
 
+  &.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;
+
+      &.top {
+        height: 50%;
+      }
+
+      &.bottom {
+        height: 50%;
+        bottom: 0;
+        top: unset;
+      }
+
+      &.right {
+        width: 50%;
+        left: unset;
+        right: 0;
+      }
+
+      &.left {
+        width: 50%;
+      }
+    }
+
+    .pf-widget-text {
+      &.left {
+        padding-left: 20px;
+        margin-left: 50%;
+        width: 50%;
+      }
+
+      &.right {
+        padding-right: 20px;
+        margin-right: 50%;
+        width: 50%;
+      }
+    }
+  }
+
   /* type specific styles */
   &.pf-subscription {
     .pf-widget-btn {
@@ -69,8 +116,8 @@
   }
 
   form:not(.pf-custom-form) {
-    input[type=text],
-    input[type=email] {
+    input[type='text'],
+    input[type='email'] {
       &.invalid {
         margin: -1px -1px 9px;
       }
diff --git a/src/less/widgets/modals.less b/src/less/widgets/modals.less
index c504389..e87e43f 100644
--- a/src/less/widgets/modals.less
+++ b/src/less/widgets/modals.less
@@ -4,7 +4,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  background: rgba(0,0,0,.5);
+  background: rgba(0, 0, 0, 0.5);
   z-index: 9999;
   text-align: center;
 
@@ -28,7 +28,7 @@
     height: 100%;
     position: relative;
     top: -100vh;
-    transition: all .3s;
+    transition: all 0.3s;
   }
 
   .pf-widget-content {
@@ -48,9 +48,7 @@
     left: 50%;
     transform: translate(-50%, -50%);
 
-    .mobile ({
-      padding: 40px 20px;
-    });
+    .mobile ({padding: 40px 20px;});
   }
 
   .pf-widget-headline {
@@ -68,19 +66,19 @@
   }
 
   form {
-    input[type="text"],
-    input[type="email"],
+    input[type='text'],
+    input[type='email'],
     select,
     textarea {
       font-size: 16px;
     }
 
-    input[type="text"],
-    input[type="email"],
+    input[type='text'],
+    input[type='email'],
     select {
       height: 45px;
 
-      &[data-required="active"]:focus {
+      &[data-required='active']:focus {
         margin-top: 1px;
         margin-bottom: 10px;
       }
@@ -111,6 +109,53 @@
     }
   }
 
+  &.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;
+
+      &.top {
+        height: 50%;
+      }
+
+      &.bottom {
+        height: 50%;
+        bottom: 0;
+        top: unset;
+      }
+
+      &.right {
+        width: 50%;
+        left: unset;
+        right: 0;
+      }
+
+      &.left {
+        width: 50%;
+      }
+    }
+
+    .pf-widget-text {
+      &.left {
+        padding-left: inherit;
+        margin-left: 50%;
+        width: 50%;
+      }
+
+      &.right {
+        padding-right: inherit;
+        margin-right: 50%;
+        width: 50%;
+      }
+    }
+  }
+
   /* Type Styles */
   &.pf-subscription {
     .pf-widget-btn {
diff --git a/src/rollup/widgets/construct-widget-layout.js b/src/rollup/widgets/construct-widget-layout.js
index 685a3ec..a2f598e 100644
--- a/src/rollup/widgets/construct-widget-layout.js
+++ b/src/rollup/widgets/construct-widget-layout.js
@@ -34,7 +34,8 @@ export default function constructWidgetLayout (widget, config) {
       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;
@@ -199,6 +200,25 @@ export default function constructWidgetLayout (widget, config) {
     }
   }
 
+  // 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.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':
diff --git a/test.html b/test.html
index 5e2ce26..5229cab 100644
--- a/test.html
+++ b/test.html
@@ -5,15 +5,20 @@
   
   
     
Action widget example

+