depicter / app / src / Document / Models / Common / Layout / AutoLayout.php

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

185 lines 3.9 KB

Raw Download Zip

1	<?php
2
3	namespace Depicter\Document\Models\Common\Layout;
4
5	use Depicter\Document\CSS\Breakpoints;
6
7	class AutoLayout {
8
9	/**
10	* @var bool
11	*/
12	public $enable = false;
13
14	/**
15	* @var States\|null
16	*/
17	public $mode;
18
19	/**
20	* @var States\|null
21	*/
22	public $gap;
23
24	/**
25	* @var States\|null
26	*/
27	public $direction;
28
29	/**
30	* @var States\|null
31	*/
32	public $alignment;
33
34	/**
35	* @var States\|null
36	*/
37	public $columns;
38
39	/**
40	* @var States\|null
41	*/
42	public $reverse;
43
44	/**
45	* @var States\|null
46	*/
47	public $wrap;
48
49	public string $latestDirection = 'horizontal';
50
51	public string $latestMode = 'flex';
52
53
54
55	public function getStyles() {
56	$css = [];
57
58	if( empty( $this->mode ) ){
59	return $css;
60	}
61
62	foreach ( Breakpoints::names() as $device ) {
63
64	if ( !empty( $this->mode->{$device} ) ) {
65	$this->latestMode = $this->mode->{$device};
66	$css[ $device ]['display'] = $this->latestMode;
67	}
68
69	if ( !empty( $this->alignment->{$device} ) ) {
70	if ( $this->latestMode == 'grid' ) {
71	$css[ $device ]['place-items'] = $this->getChildrenAlignment( 'place-items', $this->alignment->{$device}, '' );
72	} else {
73	$this->latestDirection = $this->direction->{$device} ?? $this->latestDirection;
74	$css[ $device ]['align-items'] = $this->getChildrenAlignment( 'align-items', $this->alignment->{$device}, $this->latestDirection );
75	$css[ $device ]['justify-content'] = $this->getChildrenAlignment( 'justify-content', $this->alignment->{$device}, $this->latestDirection );
76	}
77	}
78
79	if ( !empty( $this->direction->{$device} ) ) {
80	$css[ $device ]['flex-direction'] = !empty( $this->reverse->{$device} ) ? $this->direction->{$device} . '-reverse' : $this->direction->{$device};
81	}
82
83	if ( $this->latestMode == 'grid') {
84	// get or inherit the column number
85	$column = $this->columns->{$device} ?? $this->columns->tablet ?? $this->columns->default;
86	$css[ $device ]['grid-template-columns'] = "repeat( " . $column . ", 1fr)";
87	}
88
89	if ( !empty( $this->gap->{$device} ) ) {
90	if ( is_numeric( $this->gap->{$device} ) ) {
91	$css[ $device ]['gap'] = $this->gap->{$device} . 'px';
92	} else if ( $this->gap->{$device} == 'auto' ) {
93	$css[ $device ]['justify-content'] = 'space-between';
94	}
95	}
96
97	if ( !empty( $this->wrap->{$device} ) ) {
98	$css[ $device ]['flex-wrap'] = 'wrap';
99	}
100	}
101
102	return $css;
103	}
104
105	/**
106	* Get children alignment if display type is flex
107	*
108	* @param string $property
109	* @param string $alignment
110	* @return string
111	*/
112	public function getChildrenAlignment( $property, $alignment, $direction ) {
113	if ( $direction == 'column' ) {
114	if ( $property == 'align-items') {
115	switch ( $alignment[1] ) {
116	case 'c':
117	return 'center';
118	case 'r':
119	return 'end';
120	case 'l':
121	default:
122	return 'start';
123	}
124	} else if ( $property == 'justify-content' ) {
125	switch ( $alignment[0] ) {
126	case 'm':
127	return 'center';
128	case 'b':
129	return 'end';
130	case 't':
131	default:
132	return 'start';
133	}
134	}
135	} else {
136	if ( $property == 'justify-content') {
137	switch ( $alignment[1] ) {
138	case 'c':
139	return 'center';
140	case 'r':
141	return 'end';
142	case 'l':
143	default:
144	return 'start';
145	}
146	} else if ( $property == 'align-items' ) {
147	switch ( $alignment[0] ) {
148	case 'm':
149	return 'center';
150	case 'b':
151	return 'end';
152	case 't':
153	default:
154	return 'start';
155	}
156	} else if ( $property == 'place-items' ) {
157	switch( $alignment ) {
158	case 'tl':
159	return 'flex-start start';
160	case 'ml':
161	return 'center start';
162	case 'bl':
163	return 'flex-end start';
164	case 'tc':
165	return 'flex-start center';
166	case 'mc':
167	return 'center';
168	case 'bc':
169	return 'flex-end center';
170	case 'tr':
171	return 'flex-start end';
172	case 'mr':
173	return 'center end';
174	case 'br':
175	return 'flex-end end';
176	default:
177	return 'center';
178	}
179	}
180	}
181
182	return '';
183	}
184	}
185