Initial commit: CloudOps infrastructure platform
This commit is contained in:
root
@@ -0,0 +1,246 @@
|
||||
.focus-builder .website-preview .viewport-switcher {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 75px;
|
||||
z-index: 1025;
|
||||
}
|
||||
.focus-builder .website-preview .viewport-switcher .btn-viewport {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
display: table;
|
||||
}
|
||||
.focus-builder .website-preview .viewport-switcher .btn-viewport i {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.focus-builder .website-preview .website-placeholder {
|
||||
z-index: 1020;
|
||||
margin-top: 10%;
|
||||
}
|
||||
.focus-builder #websiteScreenshot {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
z-index: 0;
|
||||
}
|
||||
.focus-builder #websiteScreenshot .screenshot-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
.focus-builder #websiteScreenshot.css-device .screenshot-container {
|
||||
height: 392px;
|
||||
}
|
||||
.builder-panel-focus {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.builder-panel-focus #focusFormContent {
|
||||
min-height: 1000px;
|
||||
}
|
||||
.builder-panel-focus .panel-title a {
|
||||
display: block;
|
||||
}
|
||||
.builder-panel-focus .nav > li > a {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
.builder-panel-focus .focus-hide {
|
||||
display: none;
|
||||
}
|
||||
.builder-panel-focus .focus-style.list-group-item,
|
||||
.builder-panel-focus .focus-type.list-group-item {
|
||||
background-color: #f5f5f5;
|
||||
color: #555555;
|
||||
cursor: pointer;
|
||||
}
|
||||
.builder-panel-focus .focus-style.list-group-item:not(.focus-active):not(.focus-hover) i.fa,
|
||||
.builder-panel-focus .focus-type.list-group-item:not(.focus-active):not(.focus-hover) i.fa {
|
||||
color: #8393a2 !important;
|
||||
}
|
||||
.builder-panel-focus .focus-active,
|
||||
.builder-panel-focus .focus-hover {
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
.builder-panel-focus .focus-type-form .visible-focus-type-form {
|
||||
display: block !important;
|
||||
}
|
||||
.builder-panel-focus .focus-type-form .hidden-focus-type-form {
|
||||
display: none !important;
|
||||
}
|
||||
.builder-panel-focus .focus-type-notice .visible-focus-type-notice {
|
||||
display: inherit !important;
|
||||
}
|
||||
.builder-panel-focus .focus-type-notice .hidden-focus-type-notice {
|
||||
display: none !important;
|
||||
}
|
||||
.builder-panel-focus .focus-type-link .visible-focus-type-link {
|
||||
display: inherit !important;
|
||||
}
|
||||
.builder-panel-focus .focus-type-link .hidden-focus-type-link {
|
||||
display: none !important;
|
||||
}
|
||||
.builder-panel-focus .focus-type-all .focus-type {
|
||||
display: block !important;
|
||||
}
|
||||
.builder-panel-focus .focus-type-all .visible-focus-type-all {
|
||||
display: inherit !important;
|
||||
}
|
||||
.builder-panel-focus .focus-type-all .hidden-focus-type-all {
|
||||
display: none !important;
|
||||
}
|
||||
.builder-panel-focus .focus-style-bar .visible-focus-style-bar {
|
||||
display: block !important;
|
||||
}
|
||||
.builder-panel-focus .focus-style-bar .hidden-focus-style-bar {
|
||||
display: none !important;
|
||||
}
|
||||
.builder-panel-focus .focus-style-modal .visible-focus-style-modal {
|
||||
display: inherit !important;
|
||||
}
|
||||
.builder-panel-focus .focus-style-modal .hidden-focus-style-modal {
|
||||
display: none !important;
|
||||
}
|
||||
.builder-panel-focus .focus-style-notification .visible-focus-style-notification {
|
||||
display: inherit !important;
|
||||
}
|
||||
.builder-panel-focus .focus-style-notification .hidden-focus-style-notification {
|
||||
display: none !important;
|
||||
}
|
||||
.builder-panel-focus .focus-style-page .visible-focus-style-page {
|
||||
display: inherit !important;
|
||||
}
|
||||
.builder-panel-focus .focus-style-page .hidden-focus-style-page {
|
||||
display: none !important;
|
||||
}
|
||||
.builder-panel-focus .focus-style-all .focus-style {
|
||||
display: block !important;
|
||||
}
|
||||
.builder-panel-focus .focus-style-all .visible-focus-style-all {
|
||||
display: inherit !important;
|
||||
}
|
||||
.builder-panel-focus .focus-style-all .hidden-focus-style-all {
|
||||
display: none !important;
|
||||
}
|
||||
.builder-panel-focus .label-site-color {
|
||||
width: 25px;
|
||||
height: 10px;
|
||||
display: block;
|
||||
float: left;
|
||||
margin-right: 3px;
|
||||
cursor: hand;
|
||||
}
|
||||
/* =============================================================================
|
||||
https://github.com/callmenick/CSS-Device-Mockups
|
||||
Licensed under the MIT license.
|
||||
Copyright 2014, Call Me Nick.
|
||||
|
||||
COMMON STUFF FOR CSS DEVICES
|
||||
============================================================================= */
|
||||
.css-device {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.css-device__image {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
/* =============================================================================
|
||||
MOBILE
|
||||
============================================================================= */
|
||||
.css-device--mobile {
|
||||
width: 270px;
|
||||
height: 500px;
|
||||
border-top: solid 24px #ddd;
|
||||
border-left: solid 12px #ddd;
|
||||
border-right: solid 12px #ddd;
|
||||
border-bottom: solid 48px #ddd;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.css-device--mobile::before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: -14px;
|
||||
width: 2px;
|
||||
height: 12px;
|
||||
background-color: #bbb;
|
||||
box-shadow: 0 0 0 0 #bbb, 0 24px 0 0 #bbb;
|
||||
border-radius: 2px 0 0 2px;
|
||||
content: "";
|
||||
}
|
||||
.css-device--mobile::after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -36px;
|
||||
left: 50%;
|
||||
margin-left: -12px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: #bbb;
|
||||
border-radius: 12px;
|
||||
content: "";
|
||||
}
|
||||
@media all and (min-width: 720px) {
|
||||
.css-device--mobile {
|
||||
width: 270px;
|
||||
border-top: solid 36px #ddd;
|
||||
border-left: solid 18px #ddd;
|
||||
border-right: solid 18px #ddd;
|
||||
border-bottom: solid 72px #ddd;
|
||||
border-radius: 18px;
|
||||
}
|
||||
.css-device--mobile::before {
|
||||
top: 18px;
|
||||
left: -21px;
|
||||
width: 3px;
|
||||
height: 18px;
|
||||
background-color: #bbb;
|
||||
box-shadow: 0 0 0 0 #bbb, 0 36px 0 0 #bbb;
|
||||
border-radius: 3px 0 0 3px;
|
||||
content: "";
|
||||
}
|
||||
.css-device--mobile::after {
|
||||
bottom: -54px;
|
||||
margin-left: -18px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 18px;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
.focus-builder .website-preview .website-placeholder.has-error input,
|
||||
.focus-builder .website-preview .website-placeholder.has-error button {
|
||||
border-color: #a94442;
|
||||
}
|
||||
#websiteScreenshot.mobile .screenshot-container {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
width: 320px;
|
||||
margin: 0px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
#websiteScreenshot.mobile .preview-body,
|
||||
#websiteScreenshot.mobile #websiteCanvas {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left: -50%;
|
||||
width: 320px;
|
||||
height: 568px;
|
||||
}
|
||||
#websiteScreenshot.mobile #websiteCanvas {
|
||||
z-index: 0;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
#websiteScreenshot.mobile #websiteCanvas iframe {
|
||||
height: 100%;
|
||||
width: 320px;
|
||||
border: 0;
|
||||
}
|
||||
@@ -0,0 +1,303 @@
|
||||
.focus-builder {
|
||||
.website-preview {
|
||||
.viewport-switcher {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 75px;
|
||||
z-index: 1025;
|
||||
.btn-viewport {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
display: table;
|
||||
|
||||
i {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.website-placeholder {
|
||||
z-index: 1020;
|
||||
margin-top: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
#websiteScreenshot {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
z-index: 0;
|
||||
|
||||
.screenshot-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&.css-device {
|
||||
.screenshot-container {
|
||||
height: 392px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.builder-panel-focus {
|
||||
overflow-y: scroll;
|
||||
|
||||
#focusFormContent {
|
||||
min-height: 1000px;
|
||||
}
|
||||
|
||||
.panel-title a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav > li > a {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.focus-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.focus-style.list-group-item, .focus-type.list-group-item {
|
||||
background-color: #f5f5f5;
|
||||
color: #555555;
|
||||
cursor: pointer;
|
||||
|
||||
&:not(.focus-active):not(.focus-hover) {
|
||||
i.fa {
|
||||
color: #8393a2 !important;;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.focus-active, .focus-hover {
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
.focus-type-form {
|
||||
.visible-focus-type-form {
|
||||
display: block !important;
|
||||
}
|
||||
.hidden-focus-type-form {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.focus-type-notice {
|
||||
.visible-focus-type-notice {
|
||||
display: inherit !important;
|
||||
}
|
||||
.hidden-focus-type-notice {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.focus-type-link {
|
||||
.visible-focus-type-link {
|
||||
display: inherit !important;
|
||||
}
|
||||
.hidden-focus-type-link {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.focus-type-all {
|
||||
.focus-type {
|
||||
display: block !important;
|
||||
}
|
||||
.visible-focus-type-all {
|
||||
display: inherit !important;
|
||||
}
|
||||
.hidden-focus-type-all {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.focus-style-bar {
|
||||
.visible-focus-style-bar {
|
||||
display: block !important;
|
||||
}
|
||||
.hidden-focus-style-bar {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.focus-style-modal {
|
||||
.visible-focus-style-modal {
|
||||
display: inherit !important;
|
||||
}
|
||||
.hidden-focus-style-modal {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.focus-style-notification {
|
||||
.visible-focus-style-notification {
|
||||
display: inherit !important;
|
||||
}
|
||||
.hidden-focus-style-notification {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.focus-style-page {
|
||||
.visible-focus-style-page {
|
||||
display: inherit !important;
|
||||
}
|
||||
.hidden-focus-style-page {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.focus-style-all {
|
||||
.focus-style {
|
||||
display: block !important;
|
||||
}
|
||||
.visible-focus-style-all {
|
||||
display: inherit !important;
|
||||
}
|
||||
.hidden-focus-style-all {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.label-site-color {
|
||||
width: 25px;
|
||||
height: 10px;
|
||||
display: block;
|
||||
float: left;
|
||||
margin-right: 3px;
|
||||
cursor: hand;
|
||||
}
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
https://github.com/callmenick/CSS-Device-Mockups
|
||||
Licensed under the MIT license.
|
||||
Copyright 2014, Call Me Nick.
|
||||
|
||||
COMMON STUFF FOR CSS DEVICES
|
||||
============================================================================= */
|
||||
.css-device {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.css-device__image {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
MOBILE
|
||||
============================================================================= */
|
||||
.css-device--mobile {
|
||||
width: 270px;
|
||||
height: 500px;
|
||||
border-top: solid 24px #ddd;
|
||||
border-left: solid 12px #ddd;
|
||||
border-right: solid 12px #ddd;
|
||||
border-bottom: solid 48px #ddd;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.css-device--mobile::before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: -14px;
|
||||
width: 2px;
|
||||
height: 12px;
|
||||
background-color: #bbb;
|
||||
box-shadow: 0 0 0 0 #bbb, 0 24px 0 0 #bbb;
|
||||
border-radius: 2px 0 0 2px;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.css-device--mobile::after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -36px;
|
||||
left: 50%;
|
||||
margin-left: -12px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: #bbb;
|
||||
border-radius: 12px;
|
||||
content: "";
|
||||
}
|
||||
|
||||
@media all and (min-width: 720px) {
|
||||
.css-device--mobile {
|
||||
width: 270px;
|
||||
border-top: solid 36px #ddd;
|
||||
border-left: solid 18px #ddd;
|
||||
border-right: solid 18px #ddd;
|
||||
border-bottom: solid 72px #ddd;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.css-device--mobile::before {
|
||||
top: 18px;
|
||||
left: -21px;
|
||||
width: 3px;
|
||||
height: 18px;
|
||||
background-color: #bbb;
|
||||
box-shadow: 0 0 0 0 #bbb, 0 36px 0 0 #bbb;
|
||||
border-radius: 3px 0 0 3px;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.css-device--mobile::after {
|
||||
bottom: -54px;
|
||||
margin-left: -18px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 18px;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
.focus-builder .website-preview .website-placeholder.has-error input, .focus-builder .website-preview .website-placeholder.has-error button {
|
||||
border-color: #a94442;
|
||||
}
|
||||
|
||||
#websiteScreenshot.mobile .screenshot-container{
|
||||
position: absolute;
|
||||
left : 50%;
|
||||
width: 320px;
|
||||
margin: 0px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#websiteScreenshot.mobile .preview-body, #websiteScreenshot.mobile #websiteCanvas {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left : -50%;
|
||||
width: 320px;
|
||||
height: 568px;
|
||||
}
|
||||
|
||||
#websiteScreenshot.mobile #websiteCanvas {
|
||||
z-index: 0;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
#websiteScreenshot.mobile #websiteCanvas iframe {
|
||||
height: 100%;
|
||||
width: 320px;
|
||||
border: 0;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
@@ -0,0 +1,461 @@
|
||||
//@ sourceURL=/plugins/MauticFocusBundle/Assets/js/focus.js
|
||||
|
||||
Mautic.disabledFocusActions = function(opener) {
|
||||
if (typeof opener == 'undefined') {
|
||||
opener = window;
|
||||
}
|
||||
var email = opener.mQuery('#campaignevent_properties_focus').val();
|
||||
|
||||
var disabled = email === '' || email === null;
|
||||
|
||||
opener.mQuery('#campaignevent_properties_editFocusButton').prop('disabled', disabled);
|
||||
opener.mQuery('#campaignevent_properties_previewFocusButton').prop('disabled', disabled);
|
||||
};
|
||||
|
||||
Mautic.focusOnLoad = function () {
|
||||
if (mQuery('.builder').length) {
|
||||
// Activate droppers
|
||||
mQuery('.btn-dropper').each(function () {
|
||||
mQuery(this).click(function () {
|
||||
if (mQuery(this).hasClass('active')) {
|
||||
// Deactivate
|
||||
mQuery(this).removeClass('active btn-primary').addClass('btn-ghost');
|
||||
|
||||
mQuery('#websiteCanvas').css('cursor', 'inherit');
|
||||
} else {
|
||||
// Remove active state from all the droppers
|
||||
mQuery('.btn-dropper').removeClass('active btn-primary').addClass('btn-ghost');
|
||||
|
||||
// Activate this dropper
|
||||
mQuery(this).removeClass('btn-ghost').addClass('active btn-primary');
|
||||
|
||||
// Activate the cross hairs for image
|
||||
mQuery('#websiteCanvas').css('cursor', 'crosshair');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Update type
|
||||
var activateType = function (el, thisType) {
|
||||
mQuery('[data-focus-type]').removeClass('focus-active');
|
||||
mQuery(el).addClass('focus-active');
|
||||
|
||||
mQuery('#focusFormContent').removeClass(function (index, css) {
|
||||
return (css.match(/(^|\s)focus-type\S+/g) || []).join(' ');
|
||||
}).addClass('focus-type-' + thisType);
|
||||
|
||||
mQuery('.focus-type-header').removeClass('text-danger');
|
||||
mQuery('#focus_type').val(thisType);
|
||||
|
||||
var props = '.focus-' + thisType + '-properties';
|
||||
mQuery('#focusTypeProperties').appendTo(
|
||||
mQuery(props)
|
||||
).removeClass('hide');
|
||||
|
||||
mQuery('#focusType .focus-properties').each(function () {
|
||||
if (!mQuery(this).is(':hidden') && mQuery(this).data('focus-type') != thisType) {
|
||||
mQuery(this).slideUp('fast', function () {
|
||||
mQuery(this).hide();
|
||||
});
|
||||
}
|
||||
});
|
||||
if (mQuery(props).length) {
|
||||
if (mQuery(props).is(':hidden')) {
|
||||
mQuery(props).slideDown('fast');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
mQuery('[data-focus-type]').on({
|
||||
click: function () {
|
||||
var thisType = mQuery(this).data('focus-type');
|
||||
|
||||
if (mQuery('#focus_type').val() == thisType) {
|
||||
return;
|
||||
}
|
||||
|
||||
activateType(this, thisType);
|
||||
|
||||
Mautic.focusUpdatePreview();
|
||||
},
|
||||
mouseenter: function () {
|
||||
mQuery(this).addClass('focus-hover');
|
||||
},
|
||||
mouseleave: function () {
|
||||
mQuery(this).removeClass('focus-hover');
|
||||
}
|
||||
});
|
||||
|
||||
var activateStyle = function (el, thisStyle) {
|
||||
mQuery('[data-focus-style]').removeClass('focus-active');
|
||||
mQuery(el).addClass('focus-active');
|
||||
|
||||
if (!mQuery('#focusType').hasClass('hidden-focus-style-all')) {
|
||||
mQuery('#focusType').addClass('hidden-focus-style-all');
|
||||
}
|
||||
|
||||
mQuery('#focusFormContent').removeClass(function (index, css) {
|
||||
return (css.match(/(^|\s)focus-style\S+/g) || []).join(' ');
|
||||
}).addClass('focus-style-' + thisStyle);
|
||||
|
||||
mQuery('.focus-style-header').removeClass('text-danger');
|
||||
mQuery('#focus_style').val(thisStyle);
|
||||
|
||||
var props = '.focus-' + thisStyle + '-properties';
|
||||
mQuery('#focusStyleProperties').appendTo(
|
||||
mQuery(props)
|
||||
).removeClass('hide');
|
||||
|
||||
mQuery('#focusStyle .focus-properties').each(function () {
|
||||
if (!mQuery(this).is(':hidden')) {
|
||||
mQuery(this).slideUp('fast', function () {
|
||||
mQuery(this).hide();
|
||||
});
|
||||
}
|
||||
});
|
||||
if (mQuery(props).length) {
|
||||
if (mQuery(props).is(':hidden')) {
|
||||
mQuery(props).slideDown('fast');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Update style
|
||||
mQuery('[data-focus-style]').on({
|
||||
click: function () {
|
||||
var thisStyle = mQuery(this).data('focus-style');
|
||||
|
||||
if (mQuery('#focus_style').val() == thisStyle) {
|
||||
return;
|
||||
}
|
||||
|
||||
activateStyle(this, thisStyle);
|
||||
Mautic.focusUpdatePreview();
|
||||
},
|
||||
mouseenter: function () {
|
||||
mQuery(this).addClass('focus-hover');
|
||||
},
|
||||
mouseleave: function () {
|
||||
mQuery(this).removeClass('focus-hover');
|
||||
}
|
||||
});
|
||||
|
||||
// Select the current type and style
|
||||
var currentType = mQuery('#focus_type').val();
|
||||
if (currentType) {
|
||||
activateType(mQuery('[data-focus-type="' + currentType + '"]'), currentType);
|
||||
}
|
||||
|
||||
var currentStyle = mQuery('#focus_style').val();
|
||||
if (currentStyle) {
|
||||
activateStyle(mQuery('[data-focus-style="' + currentStyle + '"]'), currentStyle);
|
||||
}
|
||||
|
||||
mQuery('#focus_properties_content_font').on('chosen:showing_dropdown', function () {
|
||||
// Little trickery to add style to the chosen dropdown font list
|
||||
var arrayIndex = 1;
|
||||
mQuery('#focus_properties_content_font option').each(function () {
|
||||
mQuery('#focus_properties_content_font_chosen li[data-option-array-index="' + arrayIndex + '"]').css('fontFamily', mQuery(this).attr('value'));
|
||||
arrayIndex++;
|
||||
});
|
||||
});
|
||||
|
||||
mQuery('.btn-fetch').on('click', function () {
|
||||
var url = mQuery('#websiteUrlPlaceholderInput').val();
|
||||
if (url) {
|
||||
mQuery('#focus_website').val(url);
|
||||
Mautic.launchFocusBuilder();
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
Mautic.focusInitViewportSwitcher();
|
||||
} else {
|
||||
Mautic.initDateRangePicker();
|
||||
}
|
||||
|
||||
if (mQuery('[data-conversion-rate-table]').length) {
|
||||
Mautic.focusLoadConversionRateTable();
|
||||
}
|
||||
else {
|
||||
Mautic.focusLoadViewCountTable();
|
||||
}
|
||||
};
|
||||
|
||||
Mautic.launchFocusBuilder = function (forceFetch) {
|
||||
mQuery('body').css('overflow-y', 'hidden');
|
||||
|
||||
// Prevent preview updates till the website snapshot is loaded
|
||||
Mautic.ignoreMauticFocusPreviewUpdate = true;
|
||||
|
||||
if (!mQuery('#builder-overlay').length) {
|
||||
var builderCss = {
|
||||
margin: "0",
|
||||
padding: "0",
|
||||
border: "none",
|
||||
width: "100%",
|
||||
height: "100%"
|
||||
};
|
||||
|
||||
var spinnerLeft = (mQuery(document).width() - 300) / 2;
|
||||
var overlay = mQuery('<div id="builder-overlay" class="modal-backdrop fade in"><div style="position: absolute; top:50%; left:' + spinnerLeft + 'px"><i class="ri-loader-3-line ri-spin ri-5x"></i></div></div>').css(builderCss).appendTo('.builder-content');
|
||||
}
|
||||
|
||||
// Disable the close button until everything is loaded
|
||||
mQuery('.btn-close-builder').prop('disabled', true);
|
||||
|
||||
// Activate the builder
|
||||
mQuery('.builder').addClass('builder-active').removeClass('hide');
|
||||
|
||||
var url = mQuery('#focus_website').val();
|
||||
|
||||
if (!url) {
|
||||
if (!mQuery('#focus_unlockId').val()) {
|
||||
Mautic.setFocusDefaultColors();
|
||||
}
|
||||
mQuery('#builder-overlay').addClass('hide');
|
||||
mQuery('.btn-close-builder').prop('disabled', false);
|
||||
mQuery('#websiteUrlPlaceholderInput').prop('disabled', false);
|
||||
mQuery('#websiteCanvas').html('');
|
||||
mQuery('#websiteUrlPlaceholderInput').val('');
|
||||
Mautic.focusUpdatePreview();
|
||||
} else {
|
||||
mQuery('#websiteUrlPlaceholderInput').val(url).prop('disabled', false);
|
||||
|
||||
let iframe = mQuery('#websiteCanvas iframe');
|
||||
|
||||
if (!forceFetch && iframe.length && url === iframe.attr('src')) {
|
||||
return;
|
||||
}
|
||||
|
||||
mQuery('#builder-overlay').removeClass('hide');
|
||||
|
||||
Mautic.loadedPreviewImage = url;
|
||||
|
||||
// Fetch image
|
||||
var data = {
|
||||
id: mQuery('#focus_unlockId').val(),
|
||||
website: url
|
||||
}
|
||||
|
||||
mQuery('.preview-body').html('');
|
||||
|
||||
Mautic.ajaxActionRequest('plugin:focus:checkIframeAvailability', data, function (response) {
|
||||
if (response.errorMessage.length) {
|
||||
mQuery('.website-placeholder')
|
||||
.addClass('has-error')
|
||||
.find('.help-block')
|
||||
.html(response.errorMessage)
|
||||
mQuery('#builder-overlay').hide();
|
||||
mQuery('#websiteCanvas').html('');
|
||||
mQuery('.builder-panel-top p button').prop('disabled', false);
|
||||
return;
|
||||
}
|
||||
|
||||
mQuery('#builder-overlay').addClass('hide');
|
||||
mQuery('.btn-close-builder').prop('disabled', false);
|
||||
|
||||
mQuery('#websiteUrlPlaceholderInput').prop('disabled', false);
|
||||
|
||||
// Disable droppers
|
||||
mQuery('.btn-dropper').addClass('disabled');
|
||||
|
||||
Mautic.focusCreateIframe(url);
|
||||
|
||||
Mautic.ignoreMauticFocusPreviewUpdate = false;
|
||||
}, false, false, "GET");
|
||||
}
|
||||
};
|
||||
|
||||
// Called when you click on the show builder button
|
||||
Mautic.focusUpdatePreview = function () {
|
||||
|
||||
// Generate a preview
|
||||
var data = mQuery('form[name=focus]').formToArray();
|
||||
Mautic.ajaxActionRequest('plugin:focus:generatePreview', data, function (response) {
|
||||
var container = mQuery('<div />');
|
||||
var innerContainer = mQuery('<div />').html(response.html);
|
||||
|
||||
if (mQuery('.btn-viewport').data('viewport') == 'mobile') {
|
||||
innerContainer.addClass('mf-responsive');
|
||||
} else {
|
||||
innerContainer.removeClass('mf-responsive');
|
||||
}
|
||||
|
||||
container.append(innerContainer);
|
||||
|
||||
mQuery('.preview-body').html(container);
|
||||
|
||||
if (!mQuery('.mf-bar').length && mQuery('.builder-content').length) {
|
||||
mQuery('.builder-content').on('click', function () {
|
||||
Mautic.closeFocusModal(mQuery('#focus_style').val());
|
||||
});
|
||||
mQuery('.mautic-focus').on('click', function (e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
Mautic.setFocusDefaultColors = function () {
|
||||
mQuery('#focus_properties_colors_primary').minicolors('value', '4e5d9d');
|
||||
mQuery('#focus_properties_colors_text').minicolors('value', (mQuery('#focus_style').val() == 'bar') ? 'ffffff' : '000000');
|
||||
mQuery('#focus_properties_colors_button').minicolors('value', 'fdb933');
|
||||
mQuery('#focus_properties_colors_button_text').minicolors('value', 'ffffff');
|
||||
};
|
||||
|
||||
Mautic.toggleBarCollapse = function () {
|
||||
var svg = '.mf-bar-collapser-icon svg';
|
||||
var currentSize = mQuery(svg).data('transform-size');
|
||||
var currentDirection = mQuery(svg).data('transform-direction');
|
||||
var currentScale = mQuery(svg).data('transform-scale');
|
||||
var newDirection = (parseInt(currentDirection) * -1);
|
||||
|
||||
setTimeout(function () {
|
||||
mQuery(svg).find('g').first().attr('transform', 'scale(' + currentScale + ') rotate(' + newDirection + ' ' + currentSize + ' ' + currentSize + ')');
|
||||
mQuery(svg).data('transform-direction', newDirection);
|
||||
}, 500);
|
||||
|
||||
if (mQuery('.mf-bar-collapser').hasClass('mf-bar-collapsed')) {
|
||||
// Open
|
||||
if (mQuery('.mf-bar').hasClass('mf-bar-top')) {
|
||||
mQuery('.mf-bar').css('margin-top', 0);
|
||||
} else {
|
||||
mQuery('.mf-bar').css('margin-bottom', 0);
|
||||
}
|
||||
mQuery('.mf-bar-collapser').removeClass('mf-bar-collapsed');
|
||||
} else {
|
||||
// Collapse
|
||||
if (mQuery('.mf-bar').hasClass('mf-bar-top')) {
|
||||
mQuery('.mf-bar').css('margin-top', -60);
|
||||
} else {
|
||||
mQuery('.mf-bar').css('margin-bottom', -60);
|
||||
}
|
||||
mQuery('.mf-bar-collapser').addClass('mf-bar-collapsed');
|
||||
}
|
||||
}
|
||||
|
||||
Mautic.closeFocusModal = function (style) {
|
||||
mQuery('.mf-' + style).remove();
|
||||
if (mQuery('.mf-' + style + '-overlay').length) {
|
||||
mQuery('.mf-' + style + '-overlay').remove();
|
||||
}
|
||||
}
|
||||
|
||||
Mautic.closeFocusBuilder = function (el) {
|
||||
// Kill preview updates
|
||||
if (typeof Mautic.ajaxActionXhr != 'undefined' && typeof Mautic.ajaxActionXhr['plugin:focus:generatePreview'] != 'undefined') {
|
||||
Mautic.ajaxActionXhr['plugin:focus:generatePreview'].abort();
|
||||
delete Mautic.ajaxActionXhr['plugin:focus:generatePreview'];
|
||||
}
|
||||
|
||||
// mQuery('#websiteUrlPlaceholderInput').prop('disabled', true);
|
||||
|
||||
Mautic.stopIconSpinPostEvent();
|
||||
|
||||
// Hide builder
|
||||
mQuery('.builder').removeClass('builder-active').addClass('hide');
|
||||
|
||||
mQuery('body').css('overflow-y', '');
|
||||
};
|
||||
|
||||
Mautic.focusInitViewportSwitcher = function () {
|
||||
mQuery('.btn-viewport').on('click', function () {
|
||||
if (mQuery(this).data('viewport') == 'mobile') {
|
||||
mQuery('.btn-viewport i').removeClass('ri-macbook-line ri-2x').addClass('ri-smartphone-line ri-2x');
|
||||
mQuery(this).data('viewport', 'desktop');
|
||||
Mautic.launchFocusBuilder(true);
|
||||
} else {
|
||||
mQuery('.btn-viewport i').removeClass('ri-smartphone-line ri-2x').addClass('ri-macbook-line ri-2x');
|
||||
mQuery(this).data('viewport', 'mobile');
|
||||
Mautic.launchFocusBuilder(true);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Create IFRAME with proper sizing
|
||||
*/
|
||||
Mautic.focusCreateIframe = function (url) {
|
||||
|
||||
let builderCss = {
|
||||
"pointer-events": "none", // Disable clicks in iframe
|
||||
};
|
||||
|
||||
if (mQuery('.btn-viewport').data('viewport') === 'mobile') {
|
||||
mQuery('#websiteScreenshot').addClass('mobile');
|
||||
} else {
|
||||
builderCss.width = "100%";
|
||||
builderCss.height = mQuery('#websiteScreenshot').height(); // 100% does not work. Needs to be specified
|
||||
mQuery('#websiteScreenshot').removeClass('mobile');
|
||||
}
|
||||
|
||||
// Not catching empty iframe
|
||||
try {
|
||||
mQuery('#websiteCanvas').html('<iframe src="'+url+'" scrolling="no" frameBorder="0"></iframe>');
|
||||
mQuery('#websiteCanvas iframe').css(builderCss);
|
||||
} catch(err) {
|
||||
alert(err.toString());
|
||||
} finally {
|
||||
Mautic.focusUpdatePreview();
|
||||
}
|
||||
}
|
||||
|
||||
Mautic.focusLoadConversionRateTable = function() {
|
||||
var $conversionRateTable = mQuery('[data-conversion-rate-table]');
|
||||
var $conversionRateCells = mQuery('[data-conversion-rate-cell]', $conversionRateTable);
|
||||
var $conversionRateTotalCell = mQuery('[data-conversion-rate-total-cell]', $conversionRateTable);
|
||||
var $focusTotalViewsCell = mQuery('[data-focus-total-views-cell]');
|
||||
var $focusTotalUniqueViewsCell = mQuery('[data-focus-total-unique-views-cell]');
|
||||
var focusId = $conversionRateTable.data('entity-id');
|
||||
var views = null;
|
||||
var uniqueViews = null;
|
||||
var clickThrough = null;
|
||||
|
||||
var updateTotalClickThroughRate = function() {
|
||||
if (uniqueViews === null || clickThrough === null) return;
|
||||
|
||||
var totalConversionRate = uniqueViews > 0 ? Math.round(clickThrough / uniqueViews * 10000) / 100 : 0;
|
||||
$conversionRateTotalCell.children('.spinner').remove();
|
||||
$conversionRateTotalCell.prepend(totalConversionRate + '%')
|
||||
};
|
||||
|
||||
Mautic.ajaxActionRequest('plugin:focus:getViewsCount', {focusId: focusId}, function(response){
|
||||
views = response.views;
|
||||
uniqueViews = response.uniqueViews;
|
||||
|
||||
$conversionRateCells.each(function(i, el) {
|
||||
var $cell = mQuery(el);
|
||||
var uniqueClicks = $cell.data('unique-hits');
|
||||
var conversionRate = views > 0 ? Math.round(uniqueClicks / uniqueViews * 10000) / 100 : 0;
|
||||
$cell.html(conversionRate + '%');
|
||||
})
|
||||
|
||||
$focusTotalViewsCell.html(views);
|
||||
$focusTotalUniqueViewsCell.html(uniqueViews);
|
||||
updateTotalClickThroughRate();
|
||||
}, false, true, "GET");
|
||||
|
||||
Mautic.ajaxActionRequest('plugin:focus:getClickThroughCount', {focusId: focusId}, function(response){
|
||||
clickThrough = response.clickThrough;
|
||||
updateTotalClickThroughRate();
|
||||
}, false, true, "GET");
|
||||
}
|
||||
|
||||
Mautic.focusLoadViewCountTable = function() {
|
||||
var $viewTable = mQuery('[data-view-table]');
|
||||
var $focusTotalViewsCell = mQuery('[data-focus-total-views-cell]');
|
||||
var $focusTotalUniqueViewsCell = mQuery('[data-focus-total-unique-views-cell]');
|
||||
var focusId = $viewTable.data('entity-id');
|
||||
var views = null;
|
||||
var uniqueViews = null;
|
||||
|
||||
Mautic.ajaxActionRequest('plugin:focus:getViewsCount', {focusId: focusId}, function(response){
|
||||
views = response.views;
|
||||
uniqueViews = response.uniqueViews;
|
||||
|
||||
$focusTotalViewsCell.html(views);
|
||||
$focusTotalUniqueViewsCell.html(uniqueViews);
|
||||
}, false, true, "GET");
|
||||
}
|
||||
Reference in New Issue
Block a user