Skip to content

Commit

Permalink
Add background-position and background-image to section content and w…
Browse files Browse the repository at this point in the history 
…rapper (#7211)

* Add background-position to section
Add background-image vml support (https://backgrounds.cm)

* Add background-image to section content

* Fix comments selection

* Skip outlook hack If table is section wrapper

* Add background-position to section
Add background-image vml support (https://backgrounds.cm)

* Add background-image to section content

* Fix comments selection

* Skip outlook hack If table is section wrapper

* Update BuilderSectionType.php

* Update BuilderSectionType.php

* CS fixer

Co-authored-by: Zdeno Kuzmany <zdeno@kuzmany.biz>
Co-authored-by: Norman Pracht - Webmecanik <npr@webmecanik.com>
Co-authored-by: Ruth Cheesley <ruth.cheesley@acquia.com>
Co-authored-by: Dennis Ameling <dennis@dennisameling.com>
  • Loading branch information
@Enc3phale @kuzmany
@npracht @RCheesley @dennisameling
5 people committed May 15, 2021
1 parent f81ae01 commit 8699293
Show file tree
Hide file tree
Showing 3 changed files with 199 additions and 3 deletions.
124 changes: 121 additions & 3 deletions app/bundles/CoreBundle/Assets/js/4.builder.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -809,26 +809,51 @@ Mautic.initSectionListeners = function() {
sectionForm.find('#builder_section_content-background-color').val(Mautic.rgb2hex(section.css('backgroundColor')));
}

// Prefill The Content Background Image
if (bgImage = section.css('background-image')) {
sectionForm.find('#builder_section_content-background-image').val(bgImage.replace(/url\((?:'|")(.+)(?:'|")\)/g, '$1'));
}

// Prefill The Content Background Size
if (bgSize = section.css('background-size')) {
sectionForm.find('#builder_section_content-background-size').val(bgSize || 'auto auto');
}

// Prefill The Content Background Repeat
if (bgRepeat = section.css('background-repeat')) {
sectionForm.find('#builder_section_content-background-repeat').val(bgRepeat);
}

// Prefill The Content Background Position
if (bgPosition = section.css('background-position')) {
sectionForm.find('#builder_section_content-background-position').val(bgPosition);
}

// Prefill the sectionform with section wrapper color
if (sectionWrapper.css('background-color') !== 'rgba(0, 0, 0, 0)') {
sectionForm.find('#builder_section_wrapper-background-color').val(Mautic.rgb2hex(sectionWrapper.css('backgroundColor')));
}

// Prefill The Background Image
// Prefill The Wrapper Background Image
if (bgImage = sectionWrapper.css('background-image')) {
sectionForm.find('#builder_section_wrapper-background-image').val(bgImage.replace(/url\((?:'|")(.+)(?:'|")\)/g, '$1'));
}

// Prefill The Background Size
// Prefill The Wrapper Background Size
if (bgSize = sectionWrapper.css('background-size')) {
sectionForm.find('#builder_section_wrapper-background-size').val(bgSize || 'auto auto');
}

// Prefill The Background Repeat
// Prefill The Wrapper Background Repeat
if (bgRepeat = sectionWrapper.css('background-repeat')) {
sectionForm.find('#builder_section_wrapper-background-repeat').val(bgRepeat);
}

// Prefill The Wrapper Background Position
if (bgPosition = sectionWrapper.css('background-position')) {
sectionForm.find('#builder_section_wrapper-background-position').val(bgPosition);
}

// Initialize the color picker
sectionFormContainer.find('input[data-toggle="color"]').each(function() {
parent.Mautic.activateColorPicker(this);
Expand All @@ -841,6 +866,18 @@ Mautic.initSectionListeners = function() {
case 'builder_section_content-background-color':
Mautic.sectionBackgroundChanged(section, field.val());
break;
case 'builder_section_content-background-image':
Mautic.sectionBackgroundImageChanged(section, field.val());
break;
case 'builder_section_content-background-repeat':
section.css('background-repeat', field.val());
break;
case 'builder_section_content-background-size':
Mautic.sectionBackgroundSize(section, field.val());
break;
case 'builder_section_content-background-position':
section.css('background-position', field.val());
break;
case 'builder_section_wrapper-background-color':
Mautic.sectionBackgroundChanged(sectionWrapper, field.val());
break;
Expand All @@ -853,6 +890,9 @@ Mautic.initSectionListeners = function() {
case 'builder_section_wrapper-background-size':
Mautic.sectionBackgroundSize(sectionWrapper, field.val());
break;
case 'builder_section_wrapper-background-position':
sectionWrapper.css('background-position', field.val());
break;
}
});

Expand Down Expand Up @@ -970,6 +1010,7 @@ Mautic.sectionBackgroundChanged = function(element, color) {
}
element.css('background-color', color).attr('bgcolor', color);

Mautic.updateOutlookTag(element);

// Change the color of the editor for selected slots
mQuery(element).find('[data-slot-focus]').each(function() {
Expand All @@ -991,6 +1032,8 @@ Mautic.sectionBackgroundImageChanged = function (element, imageUrl) {
} else {
element.css('background-image', "url(" + imageUrl + ")");
}

Mautic.updateOutlookTag(element);
};

Mautic.sectionBackgroundSize = function (element, size) {
Expand All @@ -999,6 +1042,7 @@ Mautic.sectionBackgroundSize = function (element, size) {
}

element.css('background-size', size);
Mautic.updateOutlookTag(element);
};

Mautic.rgb2hex = function(orig) {
Expand All @@ -1009,6 +1053,80 @@ Mautic.rgb2hex = function(orig) {
("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : orig;
};

Mautic.updateOutlookTag = function (element) {
if (parent.mQuery('.builder').hasClass('email-builder')) {

// section-wrapper is TABLE element, no outlook hack need
if (element.get(0).tagName == 'TABLE') {
return;
}

var sectionForm = parent.mQuery('#section-form-container');

if (element[0].hasAttribute('data-section-wrapper')) {
var color = sectionForm.find('#builder_section_wrapper-background-color').val() ? '#'+sectionForm.find('#builder_section_wrapper-background-color').val() : '';
var image = sectionForm.find('#builder_section_wrapper-background-image').val();
var size = sectionForm.find('#builder_section_wrapper-background-size').val();
} else {
var color = sectionForm.find('#builder_section_content-background-color').val() ? '#'+sectionForm.find('#builder_section_content-background-color').val() : '';
var image = sectionForm.find('#builder_section_content-background-image').val();
var size = sectionForm.find('#builder_section_content-background-size').val();
}

var comments = element.contents().filter(function(){return this.nodeType == 8;});

if (comments.length === 0) {
element.prepend(
'<!--[if gte mso 9]>\n' +
'<v:rect style="" xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false">\n' +
'<v:fill type="tile" src="" color=""/>\n' +
'<v:textbox style="" inset="0,0,0,0">\n' +
'<![endif]-->'
);

element.append(
'<!--[if gte mso 9]>\n' +
'</v:textbox>\n' +
'</v:rect>\n' +
'<![endif]-->'
);
}

comments.each(function(i, e) {
if (i == 0) {
mQuery(this)[0].data = e.data.replace(/src\s*=\s*".*?"/mg, 'src="' + image + '"');
mQuery(this)[0].data = e.data.replace(/color\s*=\s*".*?"/mg, 'color="' + color + '"');

if (!size) {
mQuery(this)[0].data = e.data.replace(/rect\s*style=\s*".*?"/mg, 'rect style="mso-width-percent:1000;"');
mQuery(this)[0].data = e.data.replace(/textbox\s*style=\s*".*?"/mg, 'textbox style="mso-fit-shape-to-text:true"');
} else {
var newSize = "";
var splitedSize = size.split(" ");

if (splitedSize[0] && splitedSize[0].match(/[0-9]*?px/gm)) {
newSize = "width:"+splitedSize[0]+";";
} else {
newSize = "mso-width-percent:1000;";
}

if (splitedSize[1] && splitedSize[1].match(/[0-9]*?px/gm)) {
newSize += "height:"+splitedSize[1]+";";
mQuery(this)[0].data = e.data.replace(/textbox\s*style=\s*".*?"/mg, 'textbox style=""');
} else {
mQuery(this)[0].data = e.data.replace(/textbox\s*style=\s*".*?"/mg, 'textbox style="mso-fit-shape-to-text:true"');
}

mQuery(this)[0].data = e.data.replace(/rect\s*style=\s*".*?"/mg, 'rect style="'+newSize+'"');
}

return false;
}
}
);
}
};

Mautic.initSlots = function(slotContainers) {
if (!slotContainers) {
slotContainers = Mautic.builderContents.find('[data-slot-container]');
Expand Down
73 changes: 73 additions & 0 deletions app/bundles/CoreBundle/Form/Type/BuilderSectionType.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,67 @@ public function buildForm(FormBuilderInterface $builder, array $options)
]
);

// Content - Background Image
$builder->add(
'content-background-image',
UrlType::class,
[
'label' => 'mautic.core.content.background.image',
'label_attr' => ['class' => 'control-label'],
'required' => false,
'attr' => [
'class' => 'form-control',
'value' => 'none',
],
]
);

// Content - Background Repeat
$builder->add(
'content-background-repeat',
ChoiceType::class,
[
'choices' => [
'no-repeat' => 'no-repeat',
'repeat' => 'repeat',
'repeat-x' => 'repeat-x',
'repeat-y' => 'repeat-y',
'space' => 'space',
'round' => 'round',
'repeat-space' => 'repeat-space',
'space-round' => 'space-round',
],
'label' => 'mautic.core.content.background.repeat',
'label_attr' => ['class' => 'control-label'],
'required' => false,
'attr' => ['class' => 'form-control'],
]
);

// Content - Background Size Width
$builder->add(
'content-background-size',
TextType::class,
[
'label' => 'mautic.core.content.background.size',
'label_attr' => ['class' => 'control-label'],
'required' => false,
'attr' => ['class' => 'form-control'],
]
);

// Content - Background Position
$builder->add(
'content-background-position',
TextType::class,
[
'label' => 'mautic.core.content.background.position',
'label_attr' => ['class' => 'control-label'],
'required' => false,
'attr' => ['class' => 'form-control'],
]
);

// Wrapper - Background Color
$builder->add(
'wrapper-background-color',
Expand Down Expand Up @@ -104,6 +165,18 @@ public function buildForm(FormBuilderInterface $builder, array $options)
'attr' => ['class' => 'form-control'],
]
);

// Wrapper - Background Position
$builder->add(
'wrapper-background-position',
TextType::class,
[
'label' => 'mautic.core.wrapper.background.position',
'label_attr' => ['class' => 'control-label'],
'required' => false,
'attr' => ['class' => 'form-control'],
]
);
}

/**
Expand Down
5 changes: 5 additions & 0 deletions app/bundles/CoreBundle/Translations/en_US/messages.ini
View file
Original file line number Diff line number Diff line change
Expand Up @@ -465,11 +465,16 @@ mautic.core.facebook.url="Facebook URL"
mautic.core.caption.color="Caption background Color"
mautic.core.background.color="Background Color"
mautic.core.content.background.color="Content Background Color"
mautic.core.content.background.image="Content Background Image"
mautic.core.content.background.repeat="Content Background Repeat"
mautic.core.content.background.size="Content Background Size (width height | 'cover' | 'contain')"
mautic.core.content.background.position="Content Background Position (horizontal vertical)"
mautic.core.continue="Continue"
mautic.core.wrapper.background.color="Wrapper Background Color"
mautic.core.wrapper.background.image="Wrapper Background Image"
mautic.core.wrapper.background.repeat="Wrapper Background Repeat"
mautic.core.wrapper.background.size="Wrapper Background Size (width height | 'cover' | 'contain')"
mautic.core.wrapper.background.position="Wrapper Background Position (horizontal vertical)"
mautic.core.text.color="Text color"
mautic.core.slot.types="Slot types"
mautic.core.section.types="Section types"
Expand Down

0 comments on commit 8699293

Please sign in to comment.