Skip to content

Commit a33af8e

Browse files
doishubdoishub
authored
Merge pull request #7 from oveleon/develop
2 parents 610ce93 + 09d0ddc commit a33af8e

File tree

8 files changed

+231
-60
lines changed

8 files changed

+231
-60
lines changed

‎README.md

Lines changed: 57 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
11
# Contao Component Style Manager
2-
[![stable](https://img.shields.io/badge/stable-master-%23D6AF23?style=flat-square)](https://github.com/oveleon/contao-component-style-manager/tree/master)
2+
[![maintained](https://img.shields.io/badge/oveleon-maintained-83aa0e?style=flat-square&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAUCAYAAABvVQZ0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA/xpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ1dWlkOjVEMjA4OTI0OTNCRkRCMTE5MTRBODU5MEQzMTUwOEM4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjM5MjZBNjQzMzZFQjExRUFBMTdBQkNFQTAxNjg2RDI4IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjM5MjZBNjQyMzZFQjExRUFBMTdBQkNFQTAxNjg2RDI4IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIElsbHVzdHJhdG9yIENTNiAoV2luZG93cykiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0idXVpZDplMDhkZDhmZC1mOTA4LTQ5YzItYWMwZC00OGE3YTI4ODc2YWEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTA2RDhGOENERUQxRTgxMTgyMjVBMzBGQ0NBNjE4RUQiLz4gPGRjOnRpdGxlPiA8cmRmOkFsdD4gPHJkZjpsaSB4bWw6bGFuZz0ieC1kZWZhdWx0Ij5Mb2dvX292ZWxlb25fWmVpY2hlbl9yejwvcmRmOmxpPiA8L3JkZjpBbHQ+IDwvZGM6dGl0bGU+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+P8iBTQAAAbFJREFUeNqU08srRFEcB/BromGGaJRHKSIaYfIm7JRSsvHIyuM/wMorNeEfUMqKnbKwU2TBwpSUSWYWFmSBDKWmWcgwcX2Pvrc5HXfuXL/6zD2P3z2Puedouq5rilG40JPxAuUmeX84tGTkwyXsghOWYQmKoFazExzVDXFIgEeazcPV9TCnzGplRiHMl7KgCWYghy9vQAasMEfkTqQarJ9JFWw0YlhJFv2rUv8tdKiDhTib0eiHQyhOsR2xyjlp0BF5MBELdr6WohE++X6raBOz6PwWCfiCOLzDN8sRGICYyfdrgBA8Q2kmfnzQJirghlw+XZANUQ5qFmHY52R9/9lWCXjBpbRPcaubDhtHsRoOuN1reAO/1H/PpzfdaqrggzOLK7YFD6zPMqeL9at0gwWZuKa0i3hkuZf1E6tteqEZnmCRbZVwxPIOn3V83litaogzbrPuhDOIwbyUd8q8SavBOpl0rnxROadFugkFVoOJAx1h4rRJvw9e2b9u3ACrY9ENAZaD/L/E0aiHMbbfQc3v7bFxWAchqptHAAqN3HQrM0JcsXFohzzexWPYk5N+BBgAix5VyvzRZbwAAAAASUVORK5CYII=)](https://www.oveleon.de)
3+
[![license](https://img.shields.io/github/license/oveleon/contao-component-style-manager?color=83aa0e&style=flat-square)](https://github.com/oveleon/contao-component-style-manager/blob/master/LICENSE)
4+
[![stable](https://img.shields.io/badge/stable-master-83aa0e?style=flat-square)](https://github.com/oveleon/contao-component-style-manager/tree/master)
35
[![unstable](https://img.shields.io/badge/unstable-develop-F38041?style=flat-square)](https://github.com/oveleon/contao-component-style-manager/tree/develop)
4-
[![downloads](https://img.shields.io/packagist/dt/oveleon/contao-component-style-manager?color=%230A7BBC&style=flat-square)](https://packagist.org/packages/oveleon/contao-component-style-manager)
5-
[![license](https://img.shields.io/github/license/oveleon/contao-component-style-manager?style=flat-square)](https://github.com/oveleon/contao-component-style-manager/blob/master/LICENSE)
6+
[![downloads](https://img.shields.io/packagist/dt/oveleon/contao-component-style-manager?color=0A7BBC&style=flat-square)](https://packagist.org/packages/oveleon/contao-component-style-manager)
67

78
Allows you to easily manage your own CSS classes as groups provided in layouts, pages, articles, modules, news, events, forms, form elements and content elements.
89

910
This plugin is designed to simplify theme customizations without the need of manually adding classes or creating new layouts.
1011

1112
## Overview
12-
- Many possibilities of use (grid, animations, content properties, ...)
13+
- Many possibilities of use (grids, animations, content properties, ...)
1314
- Clear representation in the backend
14-
- Groups and Categories
15+
- Categories and Groups
1516
- Combine and output as tabs [![new](https://img.shields.io/badge/-new-brightgreen?style=flat-square)](#manage-categories)
1617
- Passing variables to the template [![new](https://img.shields.io/badge/-new-brightgreen?style=flat-square)](#passing-style-group-variables-to-a-template)
18+
- Formatting output using predefined methods or your own [![new](https://img.shields.io/badge/-new-brightgreen?style=flat-square)](#passing-style-group-variables-to-a-template)
1719
- Available for
1820
- Layouts
1921
- Pages
@@ -27,10 +29,6 @@ This plugin is designed to simplify theme customizations without the need of man
2729
- Third-Party plugin support
2830
- Rocksolid Custom Elements
2931

30-
<br/>
31-
32-
> Feel free to use it as you need it
33-
3432

3533
## Install
3634
```
@@ -49,13 +47,14 @@ $ composer require oveleon/contao-component-style-manager
4947

5048
![Manage Categories: Image 2](https://www.oveleon.de/share/github-assets/contao-component-style-manager/2.0/categories-2.png)
5149

52-
##### Example view of the combined categories (Group-Idenfifier: "Layout"):
50+
##### Example view of the combined categories:
5351
![Manage Categories: Image 3](https://www.oveleon.de/share/github-assets/contao-component-style-manager/2.0/backend-view.png)
5452

5553
## Manage style groups:
5654
#### Fields:
55+
- `Alias`: Define an alias with which the group can be accessed. This is only required for passing on to the template.
5756
- `Add search field`: Use of chosen for a search field within the select box
58-
- `Use as template variable`: This field declares whether this style group is set in the class of the corresponding element or passed to the template.
57+
- `Use as template variable`: This field declares whether this group is set in the class attribute of the corresponding element or passed to the template.
5958

6059
#### Examples:
6160
![Manage Categories: Image 1](https://www.oveleon.de/share/github-assets/contao-component-style-manager/2.0/groups-edit.png)
@@ -64,25 +63,65 @@ $ composer require oveleon/contao-component-style-manager
6463

6564
## Passing style group variables to a template:
6665
If the checkbox "Use as template variable" is set, these are not automatically passed to the class of the corresponding element but are available in the template.
67-
6866
To access the variables, we can access the corresponding class collection via the `styleManager` object.
6967

68+
#### There are two ways to receive the values:
69+
- **get**: Return selected CSS classes of a category or a specific group
70+
- Parameter:
71+
- `identifier: string`: Category identifier
72+
- `groups: null|array` (optional): Group aliases
73+
- **prepare** + **format**: Different from the get method, you can specify your own output format and a predefined or custom method to validate the output
74+
- `prepare`-Parameter:
75+
- `identifier: string`: Category identifier
76+
- `groups: null|array` (optional): Group aliases
77+
- `format`-Parameter:
78+
- `format: string`: The format parameter must contain a format string valid for `sprintf` (PHP: [sprintf](https://www.php.net/manual/de/function.sprintf.php))).
79+
- `method: string` (optional): Name of Method
80+
81+
#### Predefined methods
82+
- `json`: Returns a JSON object using the alias and value (e.g. `{"alias1":"my-class-1","alias2":"my-class-2"}`)
83+
84+
#### Register your own method per Hook
85+
To set up a custom method for validating the values, the hook `styleManagerFormatMethod` can be registered.
86+
87+
<br/>
88+
89+
> Let us know if you know of any other useful methods that could be included in the standard 👋
90+
7091
#### Examples:
92+
##### Using `get`-Method
7193
```php
7294
// Return of all selected CSS classes of a category
7395
$this->styleManager->get('myCategoryIdentifier');
7496

7597
// Return of all selected CSS classes in specific groups of a category
76-
$this->styleManager->get('myCategoryIdentifier', ['group1', 'group2']);
98+
$this->styleManager->get('myCategoryIdentifier', ['alias1', 'alias2']);
7799
```
100+
101+
##### Using `prepare` + `format`-Method
102+
```php
103+
// Return of all selected CSS classes of a category with class attribute
104+
$this->styleManager->prepare('myCategoryIdentifier')->format('class="%s"');
105+
106+
// Often additional classes are appended to an existing class attribute. In this case, unnecessary if-else statements can be avoided.
107+
$this->styleManager->prepare('myCategoryIdentifier')->format(' %s');
108+
109+
// Return of all selected CSS classes in specific groups of a category as json with data attribute
110+
$this->styleManager->prepare('myCategoryIdentifier', ['alias1'])->format("data-slider='%s'", 'json');
111+
```
112+
78113
##### Example of use
79-
```html
80-
<div
81-
class="<?=$this->styleManager->get('myCategoryIdentifier', ['group1'])?>"
82-
data-attr="<?=$this->styleManager->get('myCategoryIdentifier', ['group2'])?>">
83-
</div>
114+
```
115+
<div class="<?=$this->styleManager->get('myCategoryIdentifier')?>">...</div>
116+
or
117+
<div <?=$this->styleManager->prepare('myCategoryIdentifier')->format("class="%s")?>>...</div>
118+
119+
<div class="my-class-1<?=$this->styleManager->prepare('myCategoryIdentifier')->format(' %s')?>">...</div>
120+
121+
<div data-slider="<?=$this->styleManager->prepare('myCategoryIdentifier', ['slider-alias'])->format("data-slider='%s'", 'json')?>">...</div>
84122
```
85123

124+
##### Backend view
86125
![Passing Variables: Image 1](https://www.oveleon.de/share/github-assets/contao-component-style-manager/2.0/template-vars-list.png)
87126

88127
## Support Rocksolid Custom Elements

‎composer.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
}
1414
],
1515
"require":{
16-
"php":"^5.6 || ^7.0",
1716
"contao/core-bundle":"^4.4"
1817
},
1918
"require-dev": {
@@ -41,4 +40,4 @@
4140
"extra":{
4241
"contao-manager-plugin": "Oveleon\\ContaoComponentStyleManager\\ContaoManager\\Plugin"
4342
}
44-
}
43+
}

‎src/Resources/contao/classes/StyleManager.php

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ public static function clearClasses($varValue, $dc)
7979
}
8080

8181
$varValue = ' ' . $varValue . ' ';
82-
$varValue = str_replace($arrValues, ' ', $varValue);
82+
$varValue = str_replace($arrValues, ' ', $varValue);
8383
$varValue = trim(preg_replace('#\s+#', ' ', $varValue));
8484
}
8585

@@ -197,6 +197,9 @@ public static function cleanupClasses(&$arrValues, $strTable)
197197

198198
while($objStyles->next())
199199
{
200+
$arrExistingKeys[] = $objStyles->id;
201+
202+
// @deprecated: to be removed in Version 3.0. (interception of storage based on the alias. In future, only the ID must be set)
200203
$arrExistingKeys[] = $objStyles->alias;
201204

202205
$arrGroup = \StringUtil::deserialize($objStyles->cssClasses, true);
@@ -293,15 +296,18 @@ public static function serializeValues($varValue, $strTable){
293296
// Rebuild array for template variables
294297
while($objStyleGroups->next())
295298
{
296-
if(array_key_exists($objStyleGroups->alias, $arrValue))
299+
if(array_key_exists($objStyleGroups->id, $arrValue))
297300
{
298301
if(!!$objStyleGroups->passToTemplate)
299302
{
300303
$identifier = $arrArchives[ $objStyleGroups->pid ];
301304

302-
$arrValue['__vars__'][ $identifier ][ $objStyleGroups->alias ] = $arrValue[ $objStyleGroups->alias ];
305+
$arrValue['__vars__'][ $identifier ][ $objStyleGroups->alias ] = array(
306+
'id' => $objStyleGroups->id,
307+
'value' => $arrValue[ $objStyleGroups->id ]
308+
);
303309

304-
unset($arrValue[ $objStyleGroups->alias ]);
310+
unset($arrValue[ $objStyleGroups->id ]);
305311
}
306312
}
307313
}
@@ -322,7 +328,10 @@ public static function deserializeValues($arrValue){
322328
{
323329
foreach ($arrValue['__vars__'] as $key => $values)
324330
{
325-
$arrValue = array_merge($arrValue, $values);
331+
foreach ($values as $alias => $arrItem)
332+
{
333+
$arrValue[ $arrItem['id'] ] = $arrItem['value'];
334+
}
326335
}
327336

328337
unset($arrValue['__vars__']);

‎src/Resources/contao/classes/Styles.php

Lines changed: 131 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,18 @@ class Styles
1515
*/
1616
private $styles = null;
1717

18+
/**
19+
* Current identifier
20+
* @var string
21+
*/
22+
private $currIdentifier = '';
23+
24+
/**
25+
* Current groups
26+
* @var array|null
27+
*/
28+
private $currGroups = null;
29+
1830
/**
1931
* Initialize the object
2032
*
@@ -43,17 +55,17 @@ public function get($identifier, $arrGroups=null)
4355
// return full collection
4456
if($arrGroups === null)
4557
{
46-
return implode(" ", $this->styles[ $identifier ]);
58+
return implode(" ", $this->getCategoryValues($this->styles[ $identifier ]));
4759
}
4860

49-
// return parts of archive (groups)
61+
// return parts of category (groups)
5062
if(is_array($arrGroups))
5163
{
5264
$collection = array();
5365

5466
foreach ($arrGroups as $groupAlias)
5567
{
56-
if($value = $this->styles[ $identifier ][ $groupAlias ])
68+
if($value = $this->getGroupValue($this->styles[ $identifier ][ $groupAlias ]))
5769
{
5870
$collection[] = $value;
5971
}
@@ -64,4 +76,120 @@ public function get($identifier, $arrGroups=null)
6476

6577
return '';
6678
}
79+
80+
/**
81+
* Prepare css classes
82+
*
83+
* @param $identifier
84+
* @param null $arrGroups
85+
*
86+
* @return Styles
87+
*/
88+
public function prepare($identifier, $arrGroups=null)
89+
{
90+
$this->currIdentifier = $identifier;
91+
$this->currGroups = $arrGroups;
92+
93+
return $this;
94+
}
95+
96+
/**
97+
* Return formatted css classes
98+
*
99+
* @param $format
100+
* @param string $method
101+
*
102+
* @return string
103+
*/
104+
public function format($format, $method='')
105+
{
106+
if(!$format || $this->styles === null || !is_array($this->styles[ $this->currIdentifier ]))
107+
{
108+
return '';
109+
}
110+
111+
switch($method)
112+
{
113+
case 'json':
114+
$arrValues = null;
115+
116+
// return full collection
117+
if($this->currGroups === null)
118+
{
119+
foreach ($this->styles[ $this->currIdentifier ] as $alias => $arrVariable)
120+
{
121+
if($value = $this->getGroupValue($arrVariable))
122+
{
123+
$arrValues[ $alias ] = $value;
124+
}
125+
}
126+
}
127+
// return parts of category (groups)
128+
else
129+
{
130+
foreach ($this->currGroups as $alias)
131+
{
132+
if($value = $this->getGroupValue($this->styles[ $this->currIdentifier ][ $alias ]))
133+
{
134+
$arrValues[ $alias ] = $value;
135+
}
136+
}
137+
}
138+
139+
if($arrValues !== null && $jsonValue = json_encode($arrValues))
140+
{
141+
return sprintf($format, $jsonValue);
142+
}
143+
144+
break;
145+
146+
default:
147+
// HOOK: add custom logic format methods
148+
if (isset($GLOBALS['TL_HOOKS']['styleManagerFormatMethod']) && \is_array($GLOBALS['TL_HOOKS']['styleManagerFormatMethod']))
149+
{
150+
foreach ($GLOBALS['TL_HOOKS']['styleManagerFormatMethod'] as $callback)
151+
{
152+
return \System::importStatic($callback[0])->{$callback[1]}($format, $method, $this);
153+
}
154+
}
155+
156+
if($value = $this->get($this->currIdentifier, $this->currGroups))
157+
{
158+
return sprintf($format, $value);
159+
}
160+
}
161+
162+
return '';
163+
}
164+
165+
/**
166+
* Return all values of a category
167+
*
168+
* @param $arrVariables
169+
*
170+
* @return array
171+
*/
172+
private function getCategoryValues($arrVariables)
173+
{
174+
$arrValues = array();
175+
176+
foreach ($arrVariables as $alias => $arrVariable)
177+
{
178+
$arrValues[] = $this->getGroupValue($arrVariable);
179+
}
180+
181+
return $arrValues;
182+
}
183+
184+
/**
185+
* Return the value of a group
186+
*
187+
* @param $arrVariable
188+
*
189+
* @return mixed
190+
*/
191+
private function getGroupValue($arrVariable)
192+
{
193+
return $arrVariable['value'];
194+
}
67195
}

0 commit comments

Comments
 (0)