CustomFonts.php
3 years ago
Export.php
2 months ago
FieldNameObfuscator.php
3 years ago
Styles.php
3 years ago
index.php
3 years ago
Styles.php
257 lines
| 1 | <?php // phpcs:ignore SlevomatCodingStandard.TypeHints.DeclareStrictTypes.DeclareStrictTypesMissing |
| 2 | |
| 3 | namespace MailPoet\Form\Util; |
| 4 | |
| 5 | if (!defined('ABSPATH')) exit; |
| 6 | |
| 7 | |
| 8 | use MailPoet\Entities\FormEntity; |
| 9 | use MailPoetVendor\Sabberworm\CSS\Parser as CSSParser; |
| 10 | |
| 11 | class Styles { |
| 12 | public function prefixStyles($stylesheet, $prefix = '') { |
| 13 | if (!$stylesheet) return; |
| 14 | $styles = new CSSParser($stylesheet); |
| 15 | $styles = $styles->parse(); |
| 16 | $formattedStyles = []; |
| 17 | foreach ($styles->getAllDeclarationBlocks() as $styleDeclaration) { |
| 18 | $selectors = array_map(function($selector) use ($prefix) { |
| 19 | $stringSelector = is_string($selector) ? $selector : $selector->__toString(); |
| 20 | return sprintf('%s %s', $prefix, $stringSelector); |
| 21 | }, $styleDeclaration->getSelectors()); |
| 22 | $selectors = implode(', ', $selectors); |
| 23 | $rules = array_map(function($rule) { |
| 24 | return $rule->__toString(); |
| 25 | }, $styleDeclaration->getRules()); |
| 26 | $rules = sprintf('{ %s }', implode(' ', $rules)); |
| 27 | $formattedStyles[] = sprintf('%s %s', $selectors, $rules); |
| 28 | } |
| 29 | return implode(PHP_EOL, $formattedStyles); |
| 30 | } |
| 31 | |
| 32 | public function renderFormSettingsStyles(FormEntity $form, string $selector, string $displayType): string { |
| 33 | if (!is_array($form->getSettings())) return ''; |
| 34 | $formSettings = $form->getSettings(); |
| 35 | // Wrapper styles |
| 36 | $styles = []; |
| 37 | |
| 38 | if (isset($formSettings['border_size']) && isset($formSettings['border_color'])) { |
| 39 | $styles[] = 'border: ' . $formSettings['border_size'] . 'px solid ' . $formSettings['border_color']; |
| 40 | } |
| 41 | |
| 42 | if (isset($formSettings['border_radius'])) { |
| 43 | $styles[] = 'border-radius: ' . $formSettings['border_radius'] . 'px'; |
| 44 | } |
| 45 | |
| 46 | $backgrounds = []; |
| 47 | $mobileBackgrounds = []; |
| 48 | if (isset($formSettings['background_image_url']) && $formSettings['background_image_url']) { |
| 49 | $backgroundPosition = 'center'; |
| 50 | $backgroundRepeat = 'no-repeat'; |
| 51 | $backgroundSize = 'cover'; |
| 52 | if (isset($formSettings['background_image_display']) && $formSettings['background_image_display'] === 'fit') { |
| 53 | $backgroundPosition = 'center top'; |
| 54 | $backgroundSize = 'contain'; |
| 55 | } |
| 56 | if (isset($formSettings['background_image_display']) && $formSettings['background_image_display'] === 'tile') { |
| 57 | $backgroundRepeat = 'repeat'; |
| 58 | $backgroundSize = 'auto'; |
| 59 | } |
| 60 | $backgrounds[] = "url(" . trim($formSettings['background_image_url']) . ") $backgroundPosition / $backgroundSize $backgroundRepeat"; |
| 61 | } |
| 62 | |
| 63 | if (!empty($formSettings['gradient'])) { |
| 64 | $backgrounds[] = trim($formSettings['gradient']); |
| 65 | $mobileBackgrounds[] = trim($formSettings['gradient']); |
| 66 | } |
| 67 | |
| 68 | if (!empty($formSettings['backgroundColor'])) { |
| 69 | $backgrounds[] = trim($formSettings['backgroundColor']); |
| 70 | $mobileBackgrounds[] = trim($formSettings['backgroundColor']); |
| 71 | } |
| 72 | |
| 73 | if ($backgrounds) { |
| 74 | $styles[] = 'background: ' . join(', ', $backgrounds); |
| 75 | } |
| 76 | |
| 77 | if (isset($formSettings['fontColor'])) { |
| 78 | $styles[] = 'color: ' . trim($formSettings['fontColor']); |
| 79 | } |
| 80 | |
| 81 | if (isset($formSettings['alignment'])) { |
| 82 | $styles[] = 'text-align: ' . $formSettings['alignment']; |
| 83 | } |
| 84 | $formWrapperStyles = $selector . '{' . join(';', $styles) . ';}'; |
| 85 | |
| 86 | // Media styles for mobile |
| 87 | $media = $this->getMobileStyles($selector, $displayType, $mobileBackgrounds); |
| 88 | |
| 89 | // Form element styles |
| 90 | $formStyles = []; |
| 91 | if (isset($formSettings['form_padding'])) { |
| 92 | if ( |
| 93 | in_array( |
| 94 | $displayType, |
| 95 | [FormEntity::DISPLAY_TYPE_POPUP, FormEntity::DISPLAY_TYPE_FIXED_BAR, FormEntity::DISPLAY_TYPE_SLIDE_IN] |
| 96 | ) |
| 97 | ) { |
| 98 | $padding = $formSettings['form_padding']; |
| 99 | $media .= " @media (min-width: 500px) {{$selector} {padding: {$padding}px;}} "; |
| 100 | } else { |
| 101 | $formStyles[] = 'padding: ' . $formSettings['form_padding'] . 'px'; |
| 102 | } |
| 103 | } |
| 104 | $formElementStyles = ''; |
| 105 | if ($formStyles) { |
| 106 | $formElementStyles = $selector . ' form.mailpoet_form {' . join(';', $formStyles) . ';}'; |
| 107 | } |
| 108 | |
| 109 | // Width styles |
| 110 | $widthStyles = $this->renderWidthStyles($formSettings, $selector, $displayType); |
| 111 | |
| 112 | $typeSpecificStyles = $this->getFormTypeSpecificStyles($selector, $displayType); |
| 113 | |
| 114 | $messagesStyles = $this->renderFormMessageStyles($form, $selector); |
| 115 | |
| 116 | $additionalStyles = $selector . ' .mailpoet_paragraph.last {margin-bottom: 0} '; |
| 117 | $media .= " @media (min-width: 500px) {{$selector} .last .mailpoet_paragraph:last-child {margin-bottom: 0}} "; |
| 118 | $media .= " @media (max-width: 500px) {{$selector} .mailpoet_form_column:last-child .mailpoet_paragraph:last-child {margin-bottom: 0}} "; |
| 119 | |
| 120 | return $formWrapperStyles |
| 121 | . $formElementStyles |
| 122 | . $widthStyles |
| 123 | . $messagesStyles |
| 124 | . $typeSpecificStyles |
| 125 | . $additionalStyles |
| 126 | . $media; |
| 127 | } |
| 128 | |
| 129 | private function renderWidthStyles(array $formSettings, string $selector, string $displayType): string { |
| 130 | $styles = []; |
| 131 | |
| 132 | if (isset($formSettings['form_placement'][$displayType]['styles']['width'])) { |
| 133 | $width = $this->getWidthValue($formSettings['form_placement'][$displayType]['styles']['width']); |
| 134 | } |
| 135 | |
| 136 | if ($displayType === FormEntity::DISPLAY_TYPE_POPUP) { |
| 137 | if (isset($width)) { |
| 138 | $styles[] = "width: $width"; |
| 139 | $styles[] = "max-width: 100vw"; |
| 140 | } else { // BC compatibilty |
| 141 | $styles[] = 'width: 560px'; |
| 142 | $styles[] = 'max-width: 560px'; |
| 143 | } |
| 144 | } elseif ($displayType === FormEntity::DISPLAY_TYPE_SLIDE_IN) { |
| 145 | if (isset($width)) { |
| 146 | $styles[] = "width: $width"; |
| 147 | $styles[] = "max-width: 100vw"; |
| 148 | } else { // BC compatibilty |
| 149 | $styles[] = 'max-width: 600px'; |
| 150 | $styles[] = 'min-width: 350px'; |
| 151 | } |
| 152 | } elseif ($displayType === FormEntity::DISPLAY_TYPE_FIXED_BAR) { |
| 153 | if (isset($width)) { |
| 154 | $styles[] = "width: $width"; |
| 155 | $styles[] = "max-width: 100%"; |
| 156 | } else { // BC compatibilty |
| 157 | $styles[] = 'max-width: 960px'; |
| 158 | } |
| 159 | } elseif ($displayType === FormEntity::DISPLAY_TYPE_BELOW_POST) { |
| 160 | if (isset($width)) { |
| 161 | $styles[] = "width: $width"; |
| 162 | } |
| 163 | } elseif ($displayType === FormEntity::DISPLAY_TYPE_OTHERS) { |
| 164 | if (isset($width)) { |
| 165 | $styles[] = "width: $width"; |
| 166 | } |
| 167 | } |
| 168 | |
| 169 | $widthSelector = $selector; |
| 170 | $widthSelector .= $displayType === FormEntity::DISPLAY_TYPE_FIXED_BAR ? ' form.mailpoet_form' : ''; |
| 171 | |
| 172 | if (!$styles) { |
| 173 | return ''; |
| 174 | } |
| 175 | return $widthSelector . '{' . join(';', $styles) . ';}'; |
| 176 | } |
| 177 | |
| 178 | private function getWidthValue(array $width) { |
| 179 | return $width['value'] . ($width['unit'] === 'percent' ? '%' : 'px'); |
| 180 | } |
| 181 | |
| 182 | public function renderFormMessageStyles(FormEntity $form, string $selector): string { |
| 183 | $formSettings = $form->getSettings(); |
| 184 | if (!is_array($formSettings)) { |
| 185 | return ''; |
| 186 | } |
| 187 | return $this->renderMessagesStyles($formSettings, $selector); |
| 188 | } |
| 189 | |
| 190 | private function renderMessagesStyles(array $formSettings, string $selector): string { |
| 191 | $styles = "$selector .mailpoet_message {margin: 0; padding: 0 20px;}"; |
| 192 | if (isset($formSettings['success_validation_color']) && $formSettings['success_validation_color']) { |
| 193 | $success = $formSettings['success_validation_color']; |
| 194 | $styles .= " |
| 195 | $selector .mailpoet_validate_success {color: $success} |
| 196 | $selector input.parsley-success {color: $success} |
| 197 | $selector select.parsley-success {color: $success} |
| 198 | $selector textarea.parsley-success {color: $success} |
| 199 | "; |
| 200 | } |
| 201 | if (isset($formSettings['error_validation_color']) && $formSettings['error_validation_color']) { |
| 202 | $error = $formSettings['error_validation_color']; |
| 203 | $styles .= " |
| 204 | $selector .mailpoet_validate_error {color: $error} |
| 205 | $selector input.parsley-error {color: $error} |
| 206 | $selector select.parsley-error {color: $error} |
| 207 | $selector textarea.textarea.parsley-error {color: $error} |
| 208 | $selector .parsley-errors-list {color: $error} |
| 209 | $selector .parsley-required {color: $error} |
| 210 | $selector .parsley-custom-error-message {color: $error} |
| 211 | "; |
| 212 | } |
| 213 | return $styles; |
| 214 | } |
| 215 | |
| 216 | private function getFormTypeSpecificStyles(string $selector, string $displayType): string { |
| 217 | $styles = []; |
| 218 | if ($displayType === FormEntity::DISPLAY_TYPE_SLIDE_IN) { |
| 219 | $styles[] = $selector . '.mailpoet_form_slide_in { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }'; |
| 220 | $styles[] = $selector . '.mailpoet_form_position_right { border-top-right-radius: 0; }'; |
| 221 | $styles[] = $selector . '.mailpoet_form_position_left { border-top-left-radius: 0; }'; |
| 222 | } |
| 223 | return join('', $styles); |
| 224 | } |
| 225 | |
| 226 | private function getMobileStyles(string $selector, string $displayType, array $mobileBackgrounds): string { |
| 227 | $wrapperStyles = []; |
| 228 | if ($mobileBackgrounds) { |
| 229 | $wrapperStyles[] = 'background: ' . join(', ', $mobileBackgrounds) . ';'; |
| 230 | } else { |
| 231 | $wrapperStyles[] = 'background-image: none;'; |
| 232 | } |
| 233 | if ( |
| 234 | in_array( |
| 235 | $displayType, |
| 236 | [FormEntity::DISPLAY_TYPE_POPUP, FormEntity::DISPLAY_TYPE_FIXED_BAR, FormEntity::DISPLAY_TYPE_SLIDE_IN] |
| 237 | ) |
| 238 | ) { |
| 239 | $wrapperStyles = array_merge($wrapperStyles, [ |
| 240 | 'animation: none;', |
| 241 | 'border: none;', |
| 242 | 'border-radius: 0;', |
| 243 | 'bottom: 0;', |
| 244 | 'left: 0;', |
| 245 | 'max-height: 40%;', |
| 246 | 'padding: 20px;', |
| 247 | 'right: 0;', |
| 248 | 'top: auto;', |
| 249 | 'transform: none;', |
| 250 | 'width: 100%;', |
| 251 | 'min-width: 100%;', |
| 252 | ]); |
| 253 | } |
| 254 | return "@media (max-width: 500px) {{$selector} {" . join('', $wrapperStyles) . "}}"; |
| 255 | } |
| 256 | } |
| 257 |