PluginProbe
Depicter — Popup & Slider Builder / trunk
Depicter — Popup & Slider Builder vtrunk
4.8.1 trunk 1.0.0 1.1.0 1.1.2 1.1.4 1.1.6 1.1.7 1.1.8 1.1.9 1.2.0 1.3.0 1.3.1 1.3.2 1.3.3 1.3.5 1.3.8 1.5.0 1.5.1 1.5.2 1.5.5 1.6.0 1.6.1 1.6.2 1.7.0 All 76 releases
depicter / app / src / Document / Models / Element.php

Element.php in Depicter — Popup & Slider Builder trunk, at app/src/Document/Models/Element.php

638 lines 15.2 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2 namespace Depicter\Document\Models;
3
4 use Averta\Core\Utility\Arr;
5 use Depicter\Document\CSS\Breakpoints;
6 use Depicter\Document\CSS\Selector;
7 use Depicter\Document\Helper\Helper;
8 use Depicter\Document\Models\Common\Styles as CommonStyles;
9 use Depicter\Document\Models\Traits\HasDataSheetTrait;
10 use Depicter\Document\Models\Traits\HasDocumentIdTrait;
11 use Depicter\Editor\Models\Common\Size;
12 use Depicter\Editor\Models\Common\Styles;
13 use Depicter\Html\Html;
14
15 class Element
16 {
17 use HasDocumentIdTrait;
18 use HasDataSheetTrait;
19
20 /**
21 * @var string
22 */
23 public $id;
24
25 /**
26 * @var string
27 */
28 public $name;
29
30 /**
31 * @var string
32 */
33 public $type;
34
35 /**
36 * @var string
37 */
38 public $section;
39
40 /**
41 * @var array|null
42 */
43 public $hideOnSections = [];
44
45 /**
46 * @var string
47 */
48 public $parent;
49
50 /**
51 * @var \Depicter\Document\Models\Common\Position\States
52 */
53 public $position;
54
55 /**
56 * @var bool
57 */
58 public $wrap;
59
60 /**
61 * @var bool
62 */
63 public $locked = false;
64
65 /**
66 * @var object
67 */
68 public $visible = true;
69
70 /**
71 * @var bool|null
72 */
73 public $keepAspectRatio;
74
75 /**
76 * @var array|null
77 */
78 public $children;
79
80 /**
81 * @var array
82 */
83 public $childrenObjects = [];
84
85 /**
86 * @var \Depicter\Document\Models\Common\Size\States|null
87 */
88 public $size;
89
90 /**
91 * @var \Depicter\Document\Models\Common\Styles|null
92 */
93 public $styles;
94
95 /**
96 * @var \Depicter\Document\Models\Common\InnerStyles|null
97 */
98 public $innerStyles;
99
100 /**
101 * @var object|null
102 */
103 public $options;
104
105 /**
106 * @var \Depicter\Document\Models\Common\Animation|null
107 */
108 public $animation;
109
110 /**
111 * @var \Depicter\Document\Models\Common\Parallax|null
112 */
113 public $parallax;
114
115 /**
116 * @var array|null
117 */
118 public $actions;
119
120 /**
121 * @var int
122 */
123 public $depth;
124
125 /**
126 * @var array
127 */
128 public $devices;
129
130 /**
131 * @var string|null
132 */
133 public $componentType = null;
134
135 /**
136 * Selector and CSS list
137 *
138 * @var array
139 */
140 protected $selectorCssList = [];
141
142 /**
143 * Instance of Element type or base Element class
144 *
145 * @var Element
146 */
147 protected $alias;
148
149 /**
150 * @var object|null
151 */
152 public $cropData;
153
154 /**
155 * @var \Depicter\Document\Models\Common\ResponsiveScale|null
156 */
157 public $responsiveScale;
158
159 /**
160 * @var string
161 */
162 protected $markup;
163
164 /**
165 * @var \Depicter\Document\Models\Common\Layout\AutoLayout|null
166 */
167 public $autoLayout;
168
169 /**
170 * @var bool
171 */
172 public $isChild = false;
173
174 /**
175 * Element constructor.
176 */
177 public function __construct() {
178 $this->devices = Breakpoints::names();
179 }
180
181 /**
182 * get element number
183 *
184 * @return string
185 */
186 public function getID() {
187 return Helper::getElementIdFromSlug( $this->id );
188 }
189
190 /**
191 * get element slug
192 *
193 * @return string
194 */
195 public function getSlug() {
196 return $this->id;
197 }
198
199 /**
200 * Get element name
201 *
202 * @return string
203 */
204 public function getName() {
205 return $this->name ? $this->name : $this->id;
206 }
207
208 /**
209 * Get section ID number
210 *
211 * @return int
212 */
213 public function getSectionID() {
214 return Helper::getSectionIdFromSlug( $this->section );
215 }
216
217 /**
218 * Return child elements IDs for group type element
219 * @return array|null
220 */
221 public function getElementIds() {
222 return $this->children;
223 }
224
225 /**
226 * Sets belonging elements for group type element
227 *
228 * @param array $elementObjects
229 */
230 public function setElementObjects( $elementObjects )
231 {
232 $this->childrenObjects = $elementObjects;
233 }
234
235 /**
236 * Prepare class for rendering markup
237 *
238 * @return Element
239 * @throws \JsonMapper_Exception
240 */
241 public function prepare() {
242 return $this->alias();
243 }
244
245 /**
246 * Check if unique element class exist then render element through that class
247 *
248 * @return Element
249 * @throws \JsonMapper_Exception
250 */
251 public function alias(){
252 if( $this->alias ){
253 return $this->alias;
254 }
255
256 if ( strpos( $this->type, 'dpc' ) !== false ) {
257 $this->componentType = $this->type;
258 $this->type = 'component';
259 } else if ( strpos( $this->type, 'form:' ) !== false || $this->type === "hiddenInput" ) {
260 $this->componentType = $this->type;
261 $this->type = $this->type !== 'form:submit'? 'form' : 'button';
262 } else if ( strpos( $this->type, 'survey:' ) !== false ) {
263 $this->componentType = $this->type;
264 $this->type = $this->type == 'survey:submit' || $this->type == 'survey:next' || $this->type == 'survey:prev' ? 'button' : 'survey';
265 }
266
267 if ( $this->type == 'vector' && empty( $this->options->customColors ) ) {
268 $this->type = 'image';
269 }
270
271 $className = '\\Depicter\\Document\\Models\\Elements\\' . ucfirst( $this->type );
272 if ( class_exists( $className ) ) {
273 $mapper = new \JsonMapper();
274 $this->alias = $mapper->map( $this, new $className() );
275 // pass the document ID to new class too
276 $this->alias->setDocumentID( $this->getDocumentID() );
277
278 return $this->alias;
279 }
280
281 return $this;
282 }
283
284 public function render() {}
285
286 /**
287 * Get list of CSS class names of this element
288 *
289 * @return array
290 */
291 public function getClassNamesList() {
292 $classes = [];
293
294 $classes[] = Selector::prefixify('element');
295 $classes[] = Selector::prefixify('layer');
296
297 $classes[] = $this->getSelector();
298
299 if( $this->getDataSheetClassName() ){
300 $classes[] = $this->getDataSheetClassName();
301 }
302
303 if( $this->options->className ?? 0 ){
304 $classes[] = $this->options->className;
305 }
306
307 if ( isset( $this->visible->default ) && $this->visible->default === false ) {
308 $classes[] = 'depicter-hide-on-desktop ';
309 }
310
311 if ( isset( $this->visible->tablet ) && $this->visible->tablet === false ) {
312 $classes[] = 'depicter-hide-on-tablet ';
313 }
314
315 if ( isset( $this->visible->mobile ) && $this->visible->mobile === false ) {
316 $classes[] = 'depicter-hide-on-mobile ';
317 }
318
319 return $classes;
320 }
321
322 /**
323 * Get CSS class names of this element
324 *
325 * @return string
326 */
327 public function getClassNames() {
328 return trim( implode(' ', $this->getClassNamesList() ) );
329 }
330
331 /**
332 * Get default data attributes
333 *
334 * @return array
335 * @throws \JsonMapper_Exception
336 */
337 public function getDefaultAttributes() {
338 $attrs = [
339 'id' => $this->getCssID(),
340 'class' => $this->getClassNames(),
341 'data-type' => $this->type,
342 'data-wrap' => !!$this->wrap ? "true" : "false",
343 'data-name' => $this->getName(),
344 'data-local-id' => $this->id
345 ];
346
347 if ( !empty( $this->position ) ) {
348 if( ! empty( $this->position->getOffset("default" ) ) && $this->position->getPositionType("default" ) != 'static' ){
349 $attrs['data-offset'] = $this->position->getOffset("default" );
350 }
351 if( ! empty( $this->position->getOffset("tablet" ) ) && $this->position->getPositionType("tablet" ) != 'static' ){
352 $attrs['data-tablet-offset'] = $this->position->getOffset("tablet" );
353 }
354 if( ! empty( $this->position->getOffset("mobile" ) ) && $this->position->getPositionType("mobile" ) != 'static' ){
355 $attrs['data-mobile-offset'] = $this->position->getOffset("mobile" );
356 }
357
358 if( ! empty( $this->position->getPositionType("default" ) ) ){
359 $attrs['data-position-type'] = $this->position->getPositionType("default" );
360 }
361 if( ! empty( $this->position->getPositionType("tablet" ) ) ){
362 $attrs['data-tablet-position-type'] = $this->position->getPositionType("tablet" );
363 }
364 if( ! empty( $this->position->getPositionType("mobile" ) ) ){
365 $attrs['data-mobile-position-type'] = $this->position->getPositionType("mobile" );
366 }
367 }
368
369 if( $this->hideOnSections && $hideOnSections = Helper::getInvisibleSectionsCssIdList( $this->hideOnSections, $this->getDocumentID() ) ){
370 $attrs['data-hide-on-sections'] = $hideOnSections;
371 }
372
373 if ( $actions = Helper::getActions( $this->actions ) ) {
374 $attrs['data-actions'] = $actions;
375 }
376 if ( $this->animation && false !== $animationData = $this->animation->getAnimationAttrs() ) {
377 $attrs = Arr::merge( $attrs, $animationData );
378 }
379
380 if ( $this->parallax && false !== $parallaxData = $this->parallax->getParallaxAttrs() ) {
381 $attrs = Arr::merge( $attrs, $parallaxData );
382 }
383
384 if( ! empty( $this->size ) ){
385 $attrs['data-width' ] = implode( ',', $this->size->getResponsiveSizes( 'width' , true ) );
386 $attrs['data-height'] = implode( ',', $this->size->getResponsiveSizes( 'height', true ) );
387 }
388
389 $attrs['data-responsive-scale' ] = ! empty( $this->responsiveScale ) ? implode( ',', $this->responsiveScale->getResponsiveSizes() ) : 'true,,';
390
391 if( ! empty( $this->prepare()->styles->hover ) && $hoverOffDevices = $this->prepare()->styles->hover->getDisabledDeviceList() ){
392 $attrs['data-hover-off' ] = implode( ',', $hoverOffDevices );
393 }
394
395 if ( ! empty( $this->prepare()->styles->blendingMode ) || ! empty( $this->prepare()->styles->flex ) ) {
396 $attrs['data-frame-class'] = $this->getSelector() . '-frame' ;
397 }
398
399 return $attrs;
400 }
401
402 /**
403 * Get section CSS ID for data sheet if dataSource is assigned
404 *
405 * @return string
406 */
407 public function getDataSheetClassName() {
408 if( $this->getDataSheetID() ){
409 return $this->getCssID();
410 }
411 return '';
412 }
413
414 /**
415 * Check if element has link
416 * @return false|\TypeRocket\Html\Html
417 */
418 public function getLinkTag() {
419 if ( !empty( $this->options->url->path ) ) {
420 $urlPath = $this->maybeReplaceDataSheetTags( $this->options->url->path );
421 $urlArgs = (isset( $this->options->url->openInNewTab ) && empty( $this->options->url->openInNewTab )) || ! isset( $this->options->url->openInNewTab ) ? [] : ['target' => '_blank'];
422 return Html::a( '', $urlPath, $urlArgs );
423 }
424
425 return false;
426 }
427
428 /**
429 * Retrieves list of fonts used in typography options
430 *
431 * @return array
432 * @throws \JsonMapper_Exception
433 */
434 public function getFontsList()
435 {
436 $fontsList = ! empty( $this->prepare()->styles ) ? $this->prepare()->styles->getFontsList() : [];
437 $innerStyles = ! empty( $this->prepare()->innerStyles ) ? $this->prepare()->innerStyles : [];
438 if ( !empty( $innerStyles ) ) {
439
440 foreach( $innerStyles as $property => $styleInstance ){
441 if ( empty( $styleInstance ) || ! $styleInstance instanceof CommonStyles ) {
442 continue;
443 }
444 \Depicter::app()->documentFonts()->addFonts( $this->getDocumentID(), $styleInstance->getFontsList(), 'google' );
445 }
446 }
447 \Depicter::app()->documentFonts()->addFonts( $this->getDocumentID(), $fontsList, 'google' );
448
449 return $fontsList;
450 }
451
452 /**
453 * Retrieves the content of element
454 *
455 * @return string
456 */
457 protected function getContent(){
458 return $this->options->content ?? '';
459 }
460
461 /**
462 * Get element CSS ID
463 *
464 * @return string
465 */
466 public function getCssID() {
467 $cssID = Selector::getFullSelectorPath( $this->getDocumentID(), null, $this->getID() );
468 if( $dataSheetId = $this->getDataSheetID() ){
469 $cssID .= "-{$dataSheetId}";
470 }
471
472 return $cssID;
473 }
474
475 /**
476 * Get element selector
477 *
478 * @return string
479 */
480 public function getSelector() {
481 return Selector::getUniqueSelector( $this->getDocumentID(), $this->getSectionID(), $this->getID(), Selector::ELEMENT_PREFIX );
482 }
483
484
485 /**
486 * Get element style selector
487 *
488 * @return string
489 */
490 public function getStyleSelector() {
491 return Selector::PREFIX_CSS . " ." . $this->getSelector();
492 }
493
494 /**
495 * Get element style selector
496 *
497 * @return string
498 */
499 public function getStyleSelectorHoverEnabled() {
500 return $this->getStyleSelector() . ':not(.depicter-hover-off)';
501 }
502
503 /**
504 * Get element frame selector
505 *
506 * @return string
507 */
508 public function getFrameStyleSelector() {
509 return Selector::PREFIX_CSS . ' .' . $this->getSelector() . '-frame';
510 }
511
512 /**
513 * Get list of selector and CSS for element
514 *
515 * @return array
516 * @throws \JsonMapper_Exception
517 */
518 public function getSelectorAndCssList(){
519
520 $this->selectorCssList[ '.' . $this->getStyleSelector() ] = [];
521 if( ! empty( $this->prepare()->styles ) ){
522 $this->prepare()->styles->setDataSheet( $this->getDataSheet() );
523 $this->selectorCssList[ '.' . $this->getStyleSelector() ] = $this->prepare()->styles->getGeneralCss('normal');
524
525 $transitionCss = $this->prepare()->styles->getTransitionCss();
526 $hoverCss = $this->prepare()->styles->getGeneralCss('hover');
527 $transitionCss['hover'] = $hoverCss['hover'];
528
529 $this->selectorCssList[ '.' . $this->getStyleSelectorHoverEnabled() ] = $transitionCss;
530
531 if ( !empty( $this->prepare()->styles->blendingMode ) ) {
532 $this->selectorCssList[ '.' . $this->getFrameStyleSelector() ] = $this->prepare()->styles->getBlendingModeStyle();
533 }
534 if ( $this->isChild() && !empty( $this->prepare()->styles->flex ) ) {
535 $this->selectorCssList[ '.' . $this->getFrameStyleSelector() ] = $this->prepare()->styles->getFlexAlignStyle();
536 }
537 }
538
539 if ( $this->getCustomStyles() ) {
540 $this->selectorCssList[ '.' . $this->getStyleSelector() ]['customStyle'] = $this->getCustomStyles();
541 }
542
543 // add AutoLayout styles
544 if ( $this->autoLayout && !empty( $this->autoLayout->enable ) ) {
545 if( $styles = $this->autoLayout->getStyles() ){
546 $this->selectorCssList[ '.' . $this->getStyleSelector() ] = array_merge_recursive( $this->selectorCssList[ '.' . $this->getStyleSelector() ], $styles );
547 }
548 }
549
550 $innerStyles = $this->prepare()->innerStyles;
551 if ( !empty( $innerStyles ) ) {
552
553 foreach( $innerStyles as $cssSelector => $styles ){
554 // Handle "dynamicStyleProperties" specially
555 $styleItems = $cssSelector === 'dynamicStyleProperties' ? (array) $styles : [$cssSelector => $styles];
556
557 foreach ($styleItems as $selector => $style) {
558 if (empty($style) || ! $style instanceof CommonStyles) {
559 continue;
560 }
561
562 $key = '.' . $this->getStyleSelector() . ' .' . Helper::camelCaseToHyphenated($selector);
563
564 // Normal CSS
565 $generalCss = $style->getGeneralCss('normal');
566 $svgCss = $this->getInnerSvgCss($selector);
567
568 $this->selectorCssList[$key] = array_merge_recursive($generalCss, $svgCss);
569
570 // Hover CSS
571 $hoverCss = $style->getGeneralCss('hover');
572 if (!empty($hoverCss)) {
573 $this->selectorCssList[$key]['hover'] = Arr::merge(
574 $hoverCss['hover'],
575 $this->selectorCssList[$key]['hover']
576 );
577 }
578 }
579 }
580 }
581
582 return $this->selectorCssList;
583 }
584
585 /**
586 * Get styles of svg
587 *
588 * @return array|array[]
589 * @throws \JsonMapper_Exception
590 */
591 protected function getInnerSvgCss( $cssSelector ): array
592 {
593 // Get styles list from styles property
594 if ( ! empty( $this->innerStyles->{$cssSelector} ) ) {
595 return $this->innerStyles->{$cssSelector}->getSvgCss();
596 } else if ( ! empty( $this->innerStyles->dynamicStyleProperties[ $cssSelector ] ) ) {
597 return $this->innerStyles->dynamicStyleProperties[ $cssSelector ]->getSvgCss();
598 }
599
600 return [];
601 }
602
603 /**
604 * Retrieves custom styles of document
605 *
606 * @return string
607 */
608 protected function getCustomStyles(){
609 if ( ! is_null( $this->options ) && ! empty( $this->options->customStyle ) ) {
610 $customStyles = $this->options->customStyle;
611 // replace "selector" with unique selector of section
612 return str_replace('selector', '.'.$this->getStyleSelector(), $customStyles );
613 }
614 return '';
615 }
616
617 /**
618 * Get markup for preloading media urls
619 *
620 * @return string
621 */
622 public function getPreloadTags(){
623 if( method_exists( $this, 'getPreloadMarkup' ) ){
624 return $this->getPreloadMarkup();
625 }
626 return '';
627 }
628
629 /**
630 * Check if element is child element of a group element or not
631 * @return bool
632 */
633 public function isChild(): bool{
634 return $this->isChild;
635 }
636
637 }
638