├── lib
    └── Bricky
    │   ├── Brick
    │       ├── Headline
    │       │   ├── readme.md
    │       │   ├── fragments
    │       │   │   ├── brick_headline_frontend_output.php
    │       │   │   └── brick_headline_backend_output.php
    │       │   └── Headline.php
    │       ├── Text
    │       │   ├── fragments
    │       │   │   ├── brick_text_frontend_output.php
    │       │   │   └── brick_text_backend_output.php
    │       │   └── Text.php
    │       ├── Card
    │       │   ├── fragments
    │       │   │   └── brick_card_backend_output.php
    │       │   └── Card.php
    │       └── Image
    │       │   └── Image.php
    │   ├── Brick.php
    │   ├── Bricky.php
    │   └── Module.php
├── plugins
    └── docs
    │   ├── docs
    │       ├── de_de
    │       │   ├── main_ausgaben_anpassen.md
    │       │   ├── was_ist_ein_brick.md
    │       │   ├── main_navi.md
    │       │   ├── main_funktionsweise.md
    │       │   ├── main_intro.md
    │       │   └── _vorlage.md
    │       └── README.md
    │   ├── boot.php
    │   ├── lang
    │       └── de_de.lang
    │   ├── package.yml
    │   ├── pages
    │       └── index.php
    │   └── assets
    │       └── docs.css
├── CHANGELOG.md
├── update.php
├── pages
    ├── index.php
    ├── info.php
    └── module.php
├── package.yml
├── lang
    └── de_de.lang
├── install.php
├── LICENSE.md
├── README.md
├── boot.php
├── fragments
    ├── bricky_module_input.php
    └── bricky_grid_output.php
└── assets
    ├── bricky.js
    └── bricky.css


/lib/Bricky/Brick/Headline/readme.md:
--------------------------------------------------------------------------------
1 | <h4>Überschrift</h4>
2 | 
3 | <p>Textfeld + Auswahl von H1-H6 </p>
4 | 


--------------------------------------------------------------------------------
/plugins/docs/docs/de_de/main_ausgaben_anpassen.md:
--------------------------------------------------------------------------------
1 | # Ausgaben anpassen
2 | 
3 | * eigene Fragmente erstellen und bestehende Fragmente überschreiben 


--------------------------------------------------------------------------------
/plugins/docs/boot.php:
--------------------------------------------------------------------------------
1 | <?php
2 | 
3 | if (rex::isBackend() && rex::getUser()) {
4 |     rex_view::addCssFile($this->getAssetsUrl('docs.css'));
5 | }
6 | 


--------------------------------------------------------------------------------
/lib/Bricky/Brick/Text/fragments/brick_text_frontend_output.php:
--------------------------------------------------------------------------------
1 | <?php
2 | 
3 | if ($this->getVar('SHOW', '') == 'true') {
4 | 
5 |     if ($this->getVar('TEXT', '') != '') {
6 |         echo $this->getVar('TEXT', '');
7 |     }
8 | }


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | 
2 | Bricky - Changelog
3 | ================================================================================
4 | 
5 | 0.0.0 (00.00.0000)
6 | --------------------------------------------------------------------------------
7 | 


--------------------------------------------------------------------------------
/plugins/docs/lang/de_de.lang:
--------------------------------------------------------------------------------
1 | bricky_docs = Dokumentation
2 | bricky_docs_filenotfound = Datei wurde nicht gefunden. Inhalt existiert (noch) nicht. <br />Wir freuen uns über Mithilfe!
3 | bricky_docs_navigation = Navigation
4 | bricky_docs_content = Inhalt
5 | 


--------------------------------------------------------------------------------
/plugins/docs/package.yml:
--------------------------------------------------------------------------------
 1 | package: bricky/docs
 2 | version: '0.0'
 3 | author: 'Friends Of REDAXO'
 4 | supportpage: 'https://github.com/FriendsOfREDAXO/bricky'
 5 | 
 6 | page:
 7 |     title: 'translate:bricky_docs'
 8 |     perm: admin
 9 |     itemclass: pull-right 
10 | 


--------------------------------------------------------------------------------
/plugins/docs/docs/README.md:
--------------------------------------------------------------------------------
 1 | # Dokumentation für das REDAXO-AddOn "Bricky"
 2 | 
 3 | ## Deutsch
 4 | 
 5 | Inhaltsverzeichnis:  
 6 | [de_de/main_navi.md](de_de/main_navi.md)
 7 | 
 8 | Vorlage zur Formatierung:  
 9 | [de_de/_vorlage.md](de_de/_vorlage.md)
10 | 
11 | 
12 | 
13 | 


--------------------------------------------------------------------------------
/plugins/docs/docs/de_de/was_ist_ein_brick.md:
--------------------------------------------------------------------------------
1 | # Was ist ein Brick?
2 | 
3 | Ein Brick ist ein aus einer oder mehreren Dateien bestehender Baustein für die Verwaltung von Content innerhalb einbe Moduls weclhes durch Bricky erstellt wurde.
4 | 
5 | **Hier ein Beispiel beschreiben**
6 | 


--------------------------------------------------------------------------------
/update.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | /**
 4 |  * This file is part of the Bricky package.
 5 |  *
 6 |  * @author (c) Friends Of REDAXO
 7 |  *
 8 |  * For the full copyright and license information, please view the LICENSE
 9 |  * file that was distributed with this source code.
10 |  */
11 | 
12 | $this->includeFile('install.php');
13 | 


--------------------------------------------------------------------------------
/lib/Bricky/Brick/Headline/fragments/brick_headline_frontend_output.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | $text = $this->getVar('TEXT', '');
 4 | $tag = $this->getVar('TAG', '');
 5 | 
 6 | if ($this->getVar('SHOW', '') == 'true') {
 7 |     if ($this->getVar('TEXT', '') != '') {
 8 |         echo '<' . $tag . ' class="headline" >' . $text . '</' . $tag . '>';
 9 |     }
10 | }


--------------------------------------------------------------------------------
/pages/index.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | /**
 4 |  * This file is part of the Bricky package.
 5 |  *
 6 |  * @author (c) Friends Of REDAXO
 7 |  *
 8 |  * For the full copyright and license information, please view the LICENSE
 9 |  * file that was distributed with this source code.
10 |  */
11 | 
12 | echo rex_view::title($this->i18n('title'));
13 | rex_be_controller::includeCurrentPageSubPath();
14 | 


--------------------------------------------------------------------------------
/pages/info.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | $file = rex_file::get(rex_path::addon('bricky','README.md'));
 4 | $Parsedown = new Parsedown();
 5 | 
 6 | $content =  '<div id="bricky">'.$Parsedown->text($file).'</div>';
 7 | 
 8 | $fragment = new rex_fragment();
 9 | 
10 | $fragment->setVar('title', $this->i18n('bricky_info'));
11 | $fragment->setVar('body', $content, false);
12 | echo $fragment->parse('core/page/section.php');
13 | 
14 | 
15 | 


--------------------------------------------------------------------------------
/package.yml:
--------------------------------------------------------------------------------
 1 | package: bricky
 2 | version: '0.0.1'
 3 | author: 'Friends Of REDAXO'
 4 | supportpage: https://github.com/FriendsOfREDAXO/bricky
 5 | 
 6 | requires:
 7 |     packages:
 8 |     mblock: '^3.0.0'
 9 |     redaxo: '^5.6.0'
10 | 
11 | page:
12 |     title: 'translate:title'
13 |     perm: admin
14 |     pjax: false
15 |     icon: rex-icon fa-th
16 |     subpages:
17 |         module: { title: 'translate:module' }
18 |         info:
19 |             title: 'translate:bricky_info'
20 |             itemclass: 'pull-right'


--------------------------------------------------------------------------------
/plugins/docs/docs/de_de/main_navi.md:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | - Bricky?
 4 |     - [Intro](main_intro.md)
 5 |     - [Funktionsweise](main_funktionsweise.md)
 6 |     - [Ausgabe anpassen](main_ausgaben_anpassen.md)
 7 | - Eigene Bricks entwicklen
 8 |     - [Was ist ein Brick (Grundlage)](was_ist_ein_brick.md)
 9 |     - Project und Theme Addon
10 | - Beispiele
11 |     - Überschrift (Text & Select)
12 |     - Fließtext (Textarea)
13 |     - Bootstrap 4 Grid
14 | - Tipps und Tricks
15 |     - mForm nutzen
16 |     - MediaManager Typ installieren
17 |     - TextEditor integrieren
18 | 
19 | 


--------------------------------------------------------------------------------
/lib/Bricky/Brick/Text/fragments/brick_text_backend_output.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | if ($this->getVar('SHOW', '') == 'true') {
 4 | 
 5 |     if ($this->getVar('TEXT', '') != '') {
 6 |         $text = $this->getVar('TEXT', '');
 7 |     } else {
 8 |         $text = '<span class="alert">Bitte einen Text eingeben!<span>';
 9 |     }
10 | 
11 |     echo '
12 |       <h3>Text</h3>
13 |       <div class="form-group">
14 |           <label class="col-sm-3 control-label">Text</label>
15 |           <div class="col-sm-9">
16 |           ' . $text . '
17 |           </div>
18 |       </div>
19 |       ';
20 | }


--------------------------------------------------------------------------------
/lib/Bricky/Brick/Card/fragments/brick_card_backend_output.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | $article = null;
 3 | if ($this->getVar('LINK_1', 0) > 0) {
 4 |     $article = \rex_article::get($this->getVar('LINK_1'));
 5 | }
 6 | ?>
 7 | 
 8 | <?php if ($article): ?>
 9 | <a href="<?= $article->getUrl() ?>">
10 |     <?php endif ?>
11 | 
12 |     <?php if ($this->getVar('TITLE', '') != ''): ?>
13 |         <h2><?= $this->getVar('TITLE') ?></h2>
14 |     <?php endif ?>
15 | 
16 |     <?php if ($this->getVar('TEXT', '') != ''): ?>
17 |         <p><?= nl2br($this->getVar('TEXT')) ?></p>
18 |     <?php endif ?>
19 | 
20 |     <?php if ($article): ?>
21 | </a>
22 | <?php endif ?>
23 | 


--------------------------------------------------------------------------------
/plugins/docs/docs/de_de/main_funktionsweise.md:
--------------------------------------------------------------------------------
 1 | # Funktionsweise
 2 | 
 3 | 
 4 | ## Bezeichnungen
 5 | 
 6 | | Name | Beschreibung |
 7 | | - | - |
 8 | | Bricky | AddOn Name |
 9 | | Brick | Ein Baustein/Element welches man dem Modul zuführen kann (Headline, Image etc.) | 
10 | | Ctypes | Sind bei Bricky die Tabs bzw. deren Inhalte (könnten theoretisch auch anders als Tabs dargestellt werden) |
11 | | Darstellung Normal | Alle Bricks/Bausteine sind in einem MBlock zu sehen |
12 | | Darstellung Slices | Man wählt zuvor für den MBlock einen Brick/Baustein aus. Man erhält somit ein Modul, welches vom Prinzip wie ein REDAXO-Artikel mit Slices arbeitet |
13 | | Grid | Raster, Auswahl der Spalten und deren Breiten | 
14 | | Modul | normales REDAXO Modul, welches bei Bricky aber über die AddOn-Seite gepflegt wird. |
15 | 


--------------------------------------------------------------------------------
/lang/de_de.lang:
--------------------------------------------------------------------------------
 1 | bricks_select_notice = Wird ein Brick abgewählt, kann es passieren das bisher angelegte Slices beim nächsten Speichern ihre Daten verlieren.
 2 | bricky_bricks_registered = registrierte Bricks
 3 | bricky_bricks_saved = bisher zugewiesene Brikcs
 4 | bricky_grid = Raster
 5 | bricky_module = Bricky-Module
 6 | bricky_module_exists = Dieses Modul existiert bereits
 7 | bricky_module_id = REDAXO Modul ID
 8 | bricky_module_name = REDAXO Modulname
 9 | bricky_bricks = Bricks
10 | bricky_module_not_exists = ACHTUNG: Das Modul existiert nicht mehr
11 | bricky_title = Bricky
12 | bricky_view = Darstellung
13 | 
14 | bricky_info = Info
15 | 
16 | bricky_module_input_ctype_settings = Einstellungen
17 | bricky_module_input_ctype_settings_grid = Raster
18 | bricky_module_input_ctype_settings_select = Auswahl
19 | 


--------------------------------------------------------------------------------
/plugins/docs/docs/de_de/main_intro.md:
--------------------------------------------------------------------------------
 1 | # Bricky für REDAXO 5
 2 | 
 3 | Diese Addon ermöglicht die Erstellung von individuellen Modulen auf Basis von voher entwickelten Elementen (Klassen und Framenten).
 4 | 
 5 | Bei der Modulerstellung können die Elemente (_Bricks_) sowie die Bereiche (_das Grid_), die für dieses Modul zur Auswahl stehen sollen gewählt werden. 
 6 | 
 7 | Die _Bricks_ können im Project / Theme Addon verwaltet werden (die Verwaltung in einem eigenem AddOn ist natürlich auch möglich).
 8 |     
 9 | In dem der erstellten Modulen können die Inhalte innerhalb eines Bereiches oder auch ganze Bereiche verschoben werden.
10 | 
11 | 
12 | ## Voraussetzungen
13 | 
14 | * REDAXO ab Version 5.6.x
15 | * mBlock 3.0
16 | 
17 | 
18 | ## Was ist enthalten?
19 | 
20 | Das Addon liefert einige Beispiel-Bricks, deren Ausgabe das Bootstrap 4 Framework berücksichtigt, mit.
21 | 
22 | Diese sind:
23 | 
24 | * Überschrift
25 | * Text (ohne Editor)


--------------------------------------------------------------------------------
/lib/Bricky/Brick.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | /**
 4 |  * This file is part of the Bricky package.
 5 |  *
 6 |  * @author (c) Friends Of REDAXO
 7 |  *
 8 |  * For the full copyright and license information, please view the LICENSE
 9 |  * file that was distributed with this source code.
10 |  */
11 | 
12 | namespace Bricky\Brick;
13 | 
14 | abstract class Brick
15 | {
16 |     const PREFIX = '__';
17 | 
18 |     abstract public function getName();
19 | 
20 |     abstract public function getInput();
21 | 
22 |     abstract public function getBackendOutput(array $brickValues);
23 | 
24 |     abstract public function getFrontendOutput(array $brickValues);
25 | 
26 |     public function getClassName()
27 |     {
28 |         return (new \ReflectionClass($this))->getShortName();
29 |     }
30 | 
31 |     public function getPrefixedName()
32 |     {
33 |         return strtoupper($this->getClassName()).self::PREFIX;
34 |     }
35 | 
36 |     public function getFragmentDir()
37 |     {
38 |         return __DIR__.'/Brick/'.$this->getClassName().'/fragments/';
39 |     }
40 | 
41 | }
42 | 


--------------------------------------------------------------------------------
/install.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | /**
 4 |  * This file is part of the Bricky package.
 5 |  *
 6 |  * @author (c) Friends Of REDAXO
 7 |  *
 8 |  * For the full copyright and license information, please view the LICENSE
 9 |  * file that was distributed with this source code.
10 |  */
11 | 
12 | \rex_sql_table::get(
13 |     \rex::getTable('bricky_module'))
14 |     ->ensurePrimaryIdColumn()
15 |     ->ensureColumn(new \rex_sql_column('module_name', 'VARCHAR(255)'))
16 |     ->ensureColumn(new \rex_sql_column('module_id', 'INT(11)'))
17 |     ->ensureColumn(new \rex_sql_column('bricks', 'TEXT', true))
18 |     ->ensureColumn(new \rex_sql_column('grids', 'TEXT', true))
19 |     ->ensureColumn(new \rex_sql_column('view', 'ENUM("NORMAL","SLICES")'))
20 |     ->ensureColumn(new \rex_sql_column('createdate', 'DATETIME'))
21 |     ->ensureColumn(new \rex_sql_column('createuser', 'VARCHAR(255)'))
22 |     ->ensureColumn(new \rex_sql_column('updatedate', 'DATETIME'))
23 |     ->ensureColumn(new \rex_sql_column('updateuser', 'VARCHAR(255)'))
24 | 
25 |     ->ensureIndex(new \rex_sql_index('module', ['module_id'], \rex_sql_index::UNIQUE))
26 |     ->ensure();
27 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Friends Of REDAXO
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/lib/Bricky/Brick/Headline/fragments/brick_headline_backend_output.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | 
 4 | if ($this->getVar('SHOW', '') == 'true') {
 5 | 
 6 |     if ($this->getVar('TEXT', '') != '') {
 7 |         $headline = $this->getVar('TEXT', '');
 8 |     } else {
 9 |         $headline = '<span class="alert">Bitte eine Überschrift angeben!<span>';
10 |     }
11 | 
12 |     echo '
13 |       <h3>Überschrift</h3>
14 |       <div class="form-group">
15 |           <label class="col-sm-3 control-label">Überschrift</label>
16 |           <div class="col-sm-9">
17 |           ' . $headline . '
18 |           </div>
19 |       </div>
20 |       <div class="form-group">
21 |         <label class="col-sm-3 control-label">Art der Überschrift</label>
22 |         <div class="col-sm-9">';
23 |     switch ($this->getVar('TAG')) {
24 |         case 'h1':
25 |             echo 'Überschrift 1 (H1) - Nur einmal pro Seite verwenden';
26 |             break;
27 |         case 'h2':
28 |             echo 'Überschrift 2 (H2)';
29 |             break;
30 |         case 'h3':
31 |             echo 'Überschrift 3 (H3)';
32 |             break;
33 |         case 'h4':
34 |             echo 'Überschrift 4 (H4)';
35 |             break;
36 |         case 'h5':
37 |             echo 'Überschrift 5 (H5)';
38 |             break;
39 |         case 'h6':
40 |             echo 'Überschrift 6 (H6)';
41 |             break;
42 |     }
43 |     echo '
44 |         </div>
45 |       </div>';
46 | }
47 | 
48 | 
49 | 
50 | 
51 | 


--------------------------------------------------------------------------------
/lib/Bricky/Brick/Text/Text.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | /**
 4 |  * This file is part of the Bricky package.
 5 |  *
 6 |  * @author (c) Friends Of REDAXO
 7 |  *
 8 |  * For the full copyright and license information, please view the LICENSE
 9 |  * file that was distributed with this source code.
10 |  */
11 | 
12 | namespace Bricky\Brick;
13 | 
14 | class Text extends Brick
15 | {
16 |     public function getName()
17 |     {
18 |         return 'Text';
19 |     }
20 |     public function getInput()
21 |     {
22 | 
23 |         return '
24 |             <input type="hidden" name="BRICK_INPUT_VALUE[SHOW]" class="show" value="false">
25 |             <div class="form-group">
26 |                 <label class="col-md-3">
27 |                     Text
28 |                 </label>
29 |                 <div class="col-md-9">
30 |                      <textarea class="form-control" name="BRICK_INPUT_VALUE[TEXT]">BRICK_INPUT_VALUE[TEXT]</textarea>
31 |                 </div>
32 |             </div>';
33 |     }
34 | 
35 |     public function getBackendOutput(array $brickValues)
36 |     {
37 |         $fragment = new \rex_fragment();
38 |         foreach ($brickValues as $var => $value) {
39 |             $fragment->setVar($var, $value, false);
40 |         }
41 |         return $fragment->parse('brick_text_backend_output.php');
42 | 
43 |     }
44 | 
45 |     public function getFrontendOutput(array $brickValues)
46 |     {
47 |         $fragment = new \rex_fragment();
48 |         foreach ($brickValues as $var => $value) {
49 |             $fragment->setVar($var, $value, false);
50 |         }
51 |         return $fragment->parse('brick_text_frontend_output.php');
52 |     }
53 | }
54 | 
55 | 


--------------------------------------------------------------------------------
/lib/Bricky/Brick/Image/Image.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | /**
 4 |  * This file is part of the Bricky package.
 5 |  *
 6 |  * @author (c) Friends Of REDAXO
 7 |  *
 8 |  * For the full copyright and license information, please view the LICENSE
 9 |  * file that was distributed with this source code.
10 |  */
11 | 
12 | namespace Bricky\Brick;
13 | 
14 | class Image extends Brick
15 | {
16 |     public function getName()
17 |     {
18 |         return 'Image';
19 |     }
20 | 
21 |     public function getInput()
22 |     {
23 |         $s = new \rex_select();
24 |         $s->setName('BRICK_INPUT_VALUE[CAPTION]');
25 |         $s->addOptions(['0' => 'nein', '1' => 'ja']);
26 |         return '
27 |             <div class="form-group">
28 |                 <label class="col-md-3">
29 |                     Bild
30 |                 </label>
31 |                 <div class="col-md-6">
32 |                     BRICK_MEDIA[id=1 category=2]
33 |                 </div>
34 |                 <div class="col-md-3">
35 |                     <div class="rex-select-style">
36 |                         '.$s->get().'
37 |                     </div>
38 |                 </div>
39 |             </div>
40 |             <div class="form-group">
41 |                 <label class="col-md-3">
42 |                     Hover Bild
43 |                 </label>
44 |                 <div class="col-md-6">
45 |                     BRICK_MEDIA[id=2]
46 |                 </div>
47 |             </div>';
48 |     }
49 | 
50 |     public function getBackendOutput(array $brickValues)
51 |     {
52 |         $return = '';
53 |         $media = \rex_media::get($brickValues['MEDIA_1']);
54 |         if ($media) {
55 |             $return .= $media->toImage();
56 |         }
57 |         $media = \rex_media::get($brickValues['MEDIA_2']);
58 |         if ($media) {
59 |             $return .= $media->toImage();
60 |         }
61 |         return $return;
62 |     }
63 | 
64 |     public function getFrontendOutput(array $brickValues)
65 |     {
66 |     }
67 | 
68 | }
69 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Bricky
 2 | 
 3 | 
 4 | 
 5 | Das Addon liefert das Ultimative-Eierlegende-Wollmilch-Sau-Modul mit der Möglichkeit mehrspaltige Inhalte beliebig zu verwalten!
 6 | 
 7 | 
 8 | Module die Bricky nutzen, werden über Bricky selbst verwaltet.
 9 | Das REDAXO-Modul wird automatisch erstellt und wird mit den sogenannten Bricks gefüttert.
10 | 
11 | 
12 | Das Modul enthält dann solchen PHP-Code
13 | 
14 | **Moduleingabe**
15 | ```php
16 | <?php
17 | 
18 | use Bricky\Bricky;
19 | 
20 | echo Bricky::getModule('REX_MODULE_ID')
21 |     ->setCtypesOrder('REX_VALUE[19]')
22 |     ->setSelectedGrid('REX_VALUE[20]')
23 |     ->getInput();
24 | 
25 | ```
26 | 
27 | **Modulausgabe**
28 | ```php
29 | <?php
30 | 
31 | use Bricky\Bricky;
32 | 
33 | echo Bricky::getModule('REX_MODULE_ID')->getOutput(\rex_var::toArray('REX_VALUE[1]'));
34 | 
35 | ```
36 | 
37 | ---
38 | 
39 | 
40 | 
41 | ## Was Bricky werden / können soll
42 | 
43 | Brick ist ein Addon um einfach individuelle Module zu erstellen
44 | 
45 | **Erstellungsseite**
46 | 
47 | - Name des Moduls
48 | - Auswahl von 1-n des "Bricks"
49 | - Auswahl von 1-n möglichen Raster
50 | - Auswahl von "Normal" / "Slices"
51 | - Evtl. Auswahl von zusätzlichen Funktionen des Moduls (Vergabe von Grid-Klassen oder IDs, MediaManager Typen, Link über die komplette Modulausgabe... was auch immer)
52 | 
53 | **Modul**
54 | 
55 | - Auswahl und Nutzung der "Bricks" (wenn "Slice" gewählt. Ansonsten stehen die Bricks untereinander)
56 | - Einstellungsseite für das Raster (und evtl., weitere Funktionen)
57 | - Drag and Drop der einzelen Bricks und der Cols (Tabs)
58 | 
59 | **Was wird vom Addon geliefert?**
60 | 
61 | - 2-5 "Beispielbricks" (Fragmente überschreibbar)
62 | - ein Beispielraster (Bootstrap 4) für die Ausgabe (Fragment überschreibbar)
63 | - eine ausfühlriche Anleitung wie eigene Bricks erstellt werden können bzw. das ausgegebene Raster angepasst werden kann.
64 | 
65 | **Wie ist ein Brick aktuell aufgebaut?**
66 | 
67 | - PHP Klasse für die Formulareingabe (Modulinput)
68 | - Fragment: Backend Output (überschreibbar)
69 | - Fragement: Frontend Output (überschreibbar)
70 | 
71 | ---
72 | 
73 |  Die Beispiele sollen später separat aktiviert werden müssten … direkt dabei sollten die ganz einfachen sein … aber Grid Beispiele, bzw. alles was frontend spezieller wäre sollte separat aktiviert werden.
74 | 
75 | 
76 | 
77 | 


--------------------------------------------------------------------------------
/lib/Bricky/Brick/Headline/Headline.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | /**
 4 |  * This file is part of the Bricky package.
 5 |  *
 6 |  * @author (c) Friends Of REDAXO
 7 |  *
 8 |  * For the full copyright and license information, please view the LICENSE
 9 |  * file that was distributed with this source code.
10 |  */
11 | 
12 | namespace Bricky\Brick;
13 | 
14 | class Headline extends Brick
15 | {
16 |     public function getName()
17 |     {
18 |         return 'Überschrift';
19 |     }
20 | 
21 |     public function getInput()
22 |     {
23 | 
24 |         $s = new \rex_select();
25 |         $s->setName('BRICK_INPUT_VALUE[TAG]');
26 |         $s->addOptions(['h1' => 'Überschrift 1 (H1) - Nur einmal pro Seite verwenden', 'h2' => 'Überschrift 2 (H2)', 'h3' => 'Überschrift 3 (H3)','h4' => 'Überschrift 4 (H4)','h5' => 'Überschrift 5 (H5)','h6' => 'Überschrift 6 (H6)']);
27 |         return '
28 |             <input type="hidden" name="BRICK_INPUT_VALUE[SHOW]" class="show" value="false">
29 |             <div class="form-group">
30 |                 <label class="col-md-3">
31 |                     Überschrift
32 |                 </label>
33 |                 <div class="col-md-9">
34 |                     <input class="form-control" name="BRICK_INPUT_VALUE[TEXT]" type="text" />
35 |                 </div>
36 |             </div>                
37 |             <div class="form-group">
38 |                 <label class="col-md-3">
39 |                     Art der Überschrift
40 |                 </label>
41 |                 <div class="col-md-9">
42 |                     <div class="rex-select-style">
43 |                         '.$s->get().'
44 |                     </div>
45 |                 </div>
46 |             </div>';
47 |     }
48 | 
49 |     public function getBackendOutput(array $brickValues)
50 |     {
51 |         $fragment = new \rex_fragment();
52 |         foreach ($brickValues as $var => $value) {
53 |             $fragment->setVar($var, $value, false);
54 |         }
55 |         return $fragment->parse('brick_headline_backend_output.php');
56 | 
57 |     }
58 | 
59 |     public function getFrontendOutput(array $brickValues)
60 |     {
61 |         $fragment = new \rex_fragment();
62 |         foreach ($brickValues as $var => $value) {
63 |             $fragment->setVar($var, $value, false);
64 |         }
65 |         return $fragment->parse('brick_headline_frontend_output.php');
66 |     }
67 | }
68 | 


--------------------------------------------------------------------------------
/plugins/docs/pages/index.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | $lang = 'de_de';
 4 | $path = rex_path::plugin('bricky', 'docs', 'docs/'.$lang.'/');
 5 | 
 6 | $files = [];
 7 | foreach (scandir($path) as $i_file) {
 8 |     if ($i_file != '.' && $i_file != '..') {
 9 |         $files[$i_file] = $i_file;
10 |     }
11 | }
12 | 
13 | if (rex_request('bricky_docs_image', 'string') != '' && isset($files[rex_request('bricky_docs_image', 'string')])) {
14 |     ob_end_clean();
15 |     $content = rex_file::get($path.basename(rex_request('bricky_docs_image', 'string')));
16 |     echo $content;
17 |     exit;
18 | }
19 | 
20 | $navi = rex_file::get($path.'main_navi.md');
21 | 
22 | $file = rex_request('bricky_docs_file', 'string', 'bricky_intro.md');
23 | if (!in_array($file, $files)) {
24 |     $file = 'main_intro.md';
25 | }
26 | $content = rex_file::get($path.basename($file));
27 | if ($content == '') {
28 |     $content = '<p class="alert alert-warning">'.rex_i18n::rawMsg('bricky_docs_filenotfound').'</p>';
29 | }
30 | 
31 | if (class_exists('rex_markdown')) {
32 |     $miu = rex_markdown::factory();
33 |     $navi = $miu->parse($navi);
34 |     $content = $miu->parse($content);
35 | 
36 |     foreach ($files as $i_file) {
37 |         $search = '#href="('.$i_file.')"#';
38 |         $replace = 'href="index.php?page=bricky/docs&bricky_docs_file=$1"';
39 |         $navi = preg_replace($search, $replace, $navi);
40 |         $content = preg_replace($search, $replace, $content);
41 | 
42 |         // ![Alt-Text](bildname.png)
43 |         // ![Ein Screenshot](screenshot.png)
44 |         $search = '#\!\[(.*)\]\(('.$i_file.')\)#';
45 |         $replace = '<img src="index.php?page=bricky/docs&bricky_docs_image=$2" alt="$1" style="width:100%"/>';
46 |         $content = preg_replace($search, $replace, $content);
47 |     }
48 | }
49 | 
50 | $fragment = new rex_fragment();
51 | $fragment->setVar('title', rex_i18n::msg('bricky_docs_navigation'), false);
52 | $fragment->setVar('body', $navi, false);
53 | $navi = $fragment->parse('core/page/section.php');
54 | 
55 | $fragment = new rex_fragment();
56 | $fragment->setVar('title', rex_i18n::msg('bricky_docs_content'), false);
57 | $fragment->setVar('body', $content, false);
58 | $content = $fragment->parse('core/page/section.php');
59 | 
60 | echo '<section class="rex-bricky-docs">
61 |     <div class="row">
62 |     <div class="col-md-4 bricky-docs-navi">'.$navi.'</div>
63 |     <div class="col-md-8 bricky-docs-content">'.$content.'</div>
64 |     </div>
65 | </section>';
66 | 


--------------------------------------------------------------------------------
/lib/Bricky/Brick/Card/Card.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | /**
 4 |  * This file is part of the Bricky package.
 5 |  *
 6 |  * @author (c) Friends Of REDAXO
 7 |  *
 8 |  * For the full copyright and license information, please view the LICENSE
 9 |  * file that was distributed with this source code.
10 |  */
11 | 
12 | namespace Bricky\Brick;
13 | 
14 | class Card extends Brick
15 | {
16 |     public function getName()
17 |     {
18 |         return 'Karte';
19 |     }
20 | 
21 |     public function getInput()
22 |     {
23 |         return '
24 |             <div class="form-group">
25 |                 <label class="col-md-2">
26 |                     Titel
27 |                 </label>
28 |                 <div class="col-md-10">
29 |                     <input class="form-control" name="BRICK_INPUT_VALUE[TITLE]" type="text" />
30 |                 </div>
31 |             </div>
32 |             <div class="form-group">
33 |                 <label class="col-md-2">
34 |                     Text
35 |                 </label>
36 |                 <div class="col-md-10">
37 |                     <textarea class="form-control cke5-editor" data-profile="default" data-lang="<?php echo \Cke5\Utils\Cke5Lang::getUserLang(); ?>" name="BRICK_INPUT_VALUE[TEXT]">BRICK_INPUT_VALUE[TEXT]</textarea>                    
38 |                     
39 |                 </div>
40 |             </div>
41 |             <div class="form-group">
42 |                 <label class="col-md-2">
43 |                     Link setzen
44 |                 </label>
45 |                 <div class="col-md-10">
46 |                     BRICK_LINK[id=1]
47 |                 </div>
48 |             </div>';
49 |     }
50 | 
51 |     public function getBackendOutput(array $brickValues)
52 |     {
53 |         $fragment = new \rex_fragment();
54 |         foreach ($brickValues as $var => $value) {
55 |             $fragment->setVar($var, $value, false);
56 |         }
57 |         return $fragment->parse('brick_card_backend_output.php');
58 |     }
59 | 
60 |     public function getFrontendOutput(array $brickValues)
61 |     {
62 |         $return = '';
63 |         if ($brickValues['TITLE'] != '') {
64 |             $return .= sprintf('<h2>%s</h2>', $brickValues['TITLE']);
65 |         }
66 |         if ($brickValues['TEXT'] != '') {
67 |             $return .= sprintf('<p>%s</p>', nl2br($brickValues['TEXT']));
68 |         }
69 |         if ($article = \rex_article::get($brickValues['LINK_1'])) {
70 |             $return = sprintf('<a href="%s">%s</a>', $article->getUrl(), $return);
71 |         }
72 | 
73 | 
74 |         return $return;
75 |     }
76 | 
77 | }
78 | 


--------------------------------------------------------------------------------
/plugins/docs/assets/docs.css:
--------------------------------------------------------------------------------
  1 | .rex-bricky-docs h1 {
  2 |     font-size: 22px;
  3 |     margin-top: 5px;
  4 |     margin-bottom: 20px;
  5 | }
  6 | .rex-bricky-docs h2 {
  7 |     font-size: 16px;
  8 |     margin-top: 40px;
  9 |     text-transform: uppercase;
 10 |     margin-bottom: 20px;
 11 |     letter-spacing: 0.02em;
 12 |     border-bottom: 1px solid #ccc;
 13 |     padding: 13px 15px 10px;
 14 |     background: #eee;
 15 | }
 16 | .rex-bricky-docs h3 {
 17 |     margin-top: 40px;
 18 |     margin-bottom: 5px;
 19 | }
 20 | 
 21 | .rex-bricky-docs blockquote {
 22 |     margin: 20px 0;
 23 |     background: #f3f6fb;
 24 | }
 25 | .rex-bricky-docs blockquote h2 {
 26 |     margin: -10px -20px 20px;
 27 |     background: transparent;
 28 | 	border-top: 1px #ccc;
 29 | }
 30 | 
 31 | .rex-bricky-docs ol {
 32 |     padding-left: 18px;
 33 | }
 34 | 
 35 | .rex-bricky-docs ul {
 36 |     margin-bottom: 10px;
 37 | 	padding-bottom: 5px;;
 38 |     padding-left: 16px;
 39 | }
 40 | .rex-bricky-docs ul li {
 41 |     list-style-type: square;
 42 |     list-style-position: outside;
 43 | }
 44 | .rex-bricky-docs ul ul {
 45 |     padding-top: 5px;
 46 | }
 47 | .rex-bricky-docs ul ul li {
 48 |     list-style-type: circle;
 49 |     list-style-position: outside;
 50 |     padding-bottom: 0;
 51 | }
 52 | 
 53 | .rex-bricky-docs p,
 54 | .rex-bricky-docs li {
 55 |     font-size: 14px;
 56 |     line-height: 1.6;
 57 | }
 58 | 
 59 | .rex-bricky-docs hr {
 60 |     margin-top: 40px;
 61 |     border-top: 1px solid #ddd;
 62 | }
 63 | 
 64 | .rex-bricky-docs table {
 65 |     width: 100%;
 66 |     max-width: 100%;
 67 |     border-top: 1px solid #ddd;
 68 |     border-bottom: 1px solid #ddd;
 69 |     margin: 20px 0 30px;
 70 | }
 71 | .rex-bricky-docs th {
 72 |     background: #f7f7f7;
 73 |     border-bottom: 2px solid #ddd;
 74 |     border-collapse: separate;
 75 | }
 76 | .rex-bricky-docs th,
 77 | .rex-bricky-docs td {
 78 |     border-top: 1px solid #ddd;
 79 |     padding: 8px;
 80 |     line-height: 1.42857143;
 81 |     vertical-align: top;
 82 |     font-size: 13px;
 83 | }
 84 | 
 85 | 
 86 | .rex-bricky-docs .bricky-docs-navi ul {
 87 |     margin-bottom: 10px;
 88 |     padding-left: 0;
 89 | }
 90 | .rex-bricky-docs .bricky-docs-navi ul li {
 91 |     list-style-type: none;
 92 |     background: #eee;
 93 |     padding: 0 15px;
 94 |     line-height: 40px;
 95 | }
 96 | .rex-bricky-docs .bricky-docs-navi ul {
 97 |     background: #fff;
 98 |     margin-left: -15px;
 99 |     margin-right: -15px;
100 | }
101 | .rex-bricky-docs .bricky-docs-navi ul li li {
102 |     list-style-type: none;
103 |     background: #fff;
104 |     line-height: 30px;
105 | }
106 | .rex-bricky-docs .bricky-docs-navi ul li li:before {
107 | font-family: FontAwesome;
108 |     content: '\f0a9';
109 |     margin-right: 10px;
110 | }
111 | .rex-bricky-docs .bricky-docs-navi ul sup {
112 |     display: none;
113 | }
114 | 


--------------------------------------------------------------------------------
/boot.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | /**
 4 |  * This file is part of the Bricky package.
 5 |  *
 6 |  * @author (c) Friends Of REDAXO
 7 |  *
 8 |  * For the full copyright and license information, please view the LICENSE
 9 |  * file that was distributed with this source code.
10 |  */
11 | 
12 | 
13 | use Bricky\Brick\Headline;
14 | use Bricky\Brick\Text;
15 | // use Bricky\Brick\Image;
16 | // use Bricky\Brick\Card;
17 | use Bricky\Bricky;
18 | use Bricky\Module;
19 | 
20 | Bricky::getInstance()->addBrick(new Headline());
21 | Bricky::getInstance()->addBrick(new Text());
22 | 
23 | // Bricky::getInstance()->addBrick(new Image());
24 | // Bricky::getInstance()->addBrick(new Card());
25 | 
26 | \rex_fragment::addDirectory(\rex_path::addon('project', 'fragments/'));
27 | 
28 | if (rex::isBackend() && rex::getUser()) {
29 | 
30 |     if (rex_be_controller::getCurrentPage() == 'content/edit') {
31 |         \rex_view::addCssFile($this->getAssetsUrl('bricky.css'));
32 |         \rex_view::addJsFile($this->getAssetsUrl('bricky.js'));
33 |     }
34 | 
35 |     rex_extension::register('REX_FORM_SAVED', function (rex_extension_point $ep) {
36 |         $params = $ep->getParams();
37 | 
38 |         /* @var rex_form $form */
39 |         $form = $params['form'];
40 | 
41 |         if ($form->getParam('page') != 'bricky/module') {
42 |             return;
43 |         }
44 | 
45 |         if ($form->getParam('func') == 'add') {
46 |             $sql = rex_sql::factory();
47 |             $brickModules = $sql->getArray('SELECT id, module_name FROM '.rex::getTable(Module::TABLE_NAME).' WHERE module_id = "0"');
48 |             if (!count($brickModules)) {
49 |                 return;
50 |             }
51 |             foreach ($brickModules as $brickModule) {
52 |                 $moduleSql = rex_sql::factory();
53 |                 $moduleSql->setTable(rex::getTable('module'));
54 |                 $moduleSql->setValue('input', Bricky::getModuleInput());
55 |                 $moduleSql->setValue('output', Bricky::getModuleOutput());
56 |                 $moduleSql->setValue('name', $brickModule['module_name']);
57 |                 $moduleSql->insert();
58 |                 $lastInsertModuleId = (int)$moduleSql->getLastId();
59 | 
60 |                 $sql = rex_sql::factory();
61 |                 $sql->setTable(rex::getTable('bricky_module'));
62 |                 $sql->setWhere('id = :id', ['id' => $brickModule['id']]);
63 |                 $sql->setValue('module_id', $lastInsertModuleId);
64 |                 $sql->setValue('module_name', '');
65 |                 $sql->addGlobalUpdateFields();
66 |                 $sql->update();
67 |             }
68 |         }
69 | 
70 |         if ($form->getParam('func') == 'edit') {
71 |             $query = '  SELECT      `b`.`id`,
72 |                                     `b`.`module_id`,
73 |                                     `m`.`name`
74 |                         FROM        '.rex::getTable(Module::TABLE_NAME) .' AS b
75 |                         LEFT JOIN   '.rex::getTable('module').' AS m
76 |                             ON      `b`.`module_id` = `m`.`id`
77 |                         WHERE       `b`.`id` = :id
78 |                         LIMIT       2
79 |                         ';
80 |             $sql = rex_sql::factory();
81 |             $brickModules = $sql->getArray($query, ['id' => $form->getParam('id')]);
82 |             if (count($brickModules) != 1) {
83 |                 return;
84 |             }
85 | 
86 |             $brickModule = $brickModules[0];
87 |         }
88 |     });
89 | }
90 | 


--------------------------------------------------------------------------------
/fragments/bricky_module_input.php:
--------------------------------------------------------------------------------
 1 | <div class="bricky-module-input" data-bricky="module">
 2 |     <input data-bricky="ctypesOrder" type="hidden" name="REX_INPUT_VALUE[<?= Bricky\Bricky::VALUE_ID_CTYPES_ORDER ?>]" value="<?= $this->ctypesOrder ?>" />
 3 |     <div class="nav rex-page-nav">
 4 |         <ul class="nav nav-tabs" data-bricky="ctypes">
 5 |             <?php
 6 |             $ctypesOrderNew = explode(',',$this->ctypesOrder);
 7 | 
 8 |             if ($ctypesOrderNew[0] == '') { $ctypesOrderNew = array(1,2,3,4); }
 9 |             for ($i = 1; $i <= $this->maxCtypes; $i++):
10 |                $ctypeID = $ctypesOrderNew[($i-1)];
11 |             ?>
12 |                 <li data-id="<?= $ctypeID?>">
13 |                 <a id="tab-<?= $ctypeID ?>" href="#bricky-ctype-content-<?= $ctypeID ?>" data-toggle="tab">
14 |                     <i>B<?= $i ?></i>
15 |                     <span>Bereich <?= $i ?></span>
16 |                 </a>
17 |             </li>
18 |             <?php endfor; ?>
19 |             <?php if (!empty($this->getVar('grids', []))): ?>
20 |             <li class="pull-right" data-bricky="ctypeGrid" data-bricky-ctype="locked">
21 |                 <a href="#bricky-ctype-content-settings" data-toggle="tab">
22 |                     <i class="rex-icon rex-icon-metafuncs"></i>
23 |                     <span><?= rex_i18n::msg('bricky_module_input_ctype_settings') ?></span>
24 |                 </a>
25 |             </li>
26 |             <?php endif ?>
27 |         </ul>
28 |     </div>
29 | 
30 |     <div class="tab-content">
31 |         <?php foreach ($this->getVar('ctypes', []) as $index => $ctype): ?>
32 |         <div class="tab-pane fade in" id="bricky-ctype-content-<?= $index ?>">
33 |             <div data-bricky-view="<?= $this->getVar('view')?>">
34 |                 <?= $ctype ?>
35 |             </div>
36 |         </div>
37 |         <?php endforeach; ?>
38 | 
39 |         <?php if (!empty($this->getVar('grids', []))): ?>
40 |         <div class="tab-pane fade in" id="bricky-ctype-content-settings">
41 |             <fieldset class="form-horizontal">
42 |                 <legend><?= rex_i18n::msg('bricky_module_input_ctype_settings_grid') ?></legend>
43 |                 <input data-bricky="selectedGrid" type="hidden" value="<?= $this->selectedGrid ?>" />
44 |                 <div class="form-group" data-bricky="grids">
45 |                     <label class="col-sm-2 control-label"><?= rex_i18n::msg('bricky_module_input_ctype_settings_select') ?></label>
46 |                     <div class="col-sm-10">
47 |                         <div class="bricky-module-input-grid-items">
48 |                         <?php foreach ($this->getVar('grids', []) as $index => $grid): ?>
49 |                             <label class="bricky-module-input-grid-item" data-bricky-grid="<?= $grid ?>">
50 |                                 <input name="REX_INPUT_VALUE[<?= Bricky\Bricky::VALUE_ID_SELECTED_GRID ?>]" value="<?= $grid ?>" type="radio"<?= $grid == $this->selectedGrid ? 'checked="checked"' : '' ?>/>
51 |                                 <span class="bricky-module-input-grid-item-view">
52 |                                     <?php foreach (explode('-', $grid) as $number): ?>
53 |                                         <span></span>
54 |                                     <?php endforeach; ?>
55 |                                 </span>
56 |                             </label>
57 |                         <?php endforeach; ?>
58 |                         </div>
59 |                     </div>
60 |                 </div>
61 |             </fieldset>
62 |         </div>
63 |         <?php endif ?>
64 |     </div>
65 | </div>
66 | 


--------------------------------------------------------------------------------
/plugins/docs/docs/de_de/_vorlage.md:
--------------------------------------------------------------------------------
  1 | # Seitenüberschrift
  2 | 
  3 | -   [Kopfbereich](#kopfbereich)
  4 | -   [Überschriften](#ueberschriften)
  5 | -   [Links](#links)
  6 | -   [Listen](#listen)
  7 | -   [Tabellen](#tabellen)
  8 | -   [Code](#code)
  9 | -   [Bilder](#bilder)
 10 | -   [Hinweise](#hinweise)
 11 | -   [Markdown-Referenz](#markdown)
 12 | 
 13 | 
 14 | ---
 15 | 
 16 | <a name="kopfbereich"></a>
 17 | ## Kopfbereich
 18 | 
 19 | 1. Seitenüberschrift als h1 auszeichnen
 20 | 2. TOC Liste mit Anker erstellen, Die erste Ebene wird im Text mit `h2`, die zweite Ebene mit `h3` ausgezeichnet.
 21 | 
 22 | **Beispiel Kopfbereich**
 23 | 
 24 |     # Seitenüberschrift
 25 | 
 26 |     - [Überschrift](#anker-zur-ueberschrift)
 27 |     - [Anker 2](#anker-2)
 28 |         - [Anker 2a](#anker2a)
 29 |     - [Anker 3](#anker-3)
 30 |         - [Anker 3a](#anker-3a)
 31 |         - [Anker 3b](#anker-3b)
 32 |         - [Anker 3c](#anker-3c)
 33 |     - [Anker 4](#anker-4)
 34 | 
 35 | 
 36 | <a name="ueberschriften"></a>
 37 | ## Überschriften mit Anker setzen
 38 | 
 39 | Die Sprunganker müssen an der betreffenden Stelle gesetzt werden.
 40 | 
 41 | **Beispiel Sprunganker**
 42 | 
 43 |     <a name="anker-zur-ueberschrift"></a>
 44 |     ## Überschrift
 45 | 
 46 | ---
 47 | 
 48 | <a name="links"></a>
 49 | ## Links
 50 | 
 51 | Der verlinkte Text wird in eckige Klammern gesetzt, der Link dahinter in runden Klammern.
 52 | 
 53 | **Beispiel Link**
 54 | 
 55 |     [Linktitel](markdown-datei.md)
 56 | 
 57 | **Ausgabe Link**
 58 | 
 59 | [Linktitel](markdown-datei.md)
 60 | 
 61 | ---
 62 | 
 63 | <a name="listen"></a>
 64 | ## Listen
 65 | 
 66 | **Beispiel Liste**
 67 | 
 68 |     - Listenpunkt 1
 69 |     - Listenpunkt 2
 70 |     - Listenpunkt 3
 71 |     - Listenpunkt 4
 72 | 
 73 | **Ausgabe Liste**
 74 | 
 75 | - Listenpunkt 1
 76 | - Listenpunkt 2
 77 | - Listenpunkt 3
 78 | - Listenpunkt 4
 79 | 
 80 | ---
 81 | 
 82 | <a name="tabellen"></a>
 83 | ## Tabellen
 84 | 
 85 | **Beispiel Tabelle**
 86 | 
 87 | ```
 88 | Alt | Neu
 89 | ------ | ------
 90 | `$REX['SERVERNAME']` | `rex::getServername()`
 91 | ```
 92 | 
 93 | **Ausgabe Tabelle**
 94 | 
 95 | | Alt                  | Neu                    |
 96 | | -------------------- | ---------------------- |
 97 | | `$REX['SERVERNAME']` | `rex::getServername()` |
 98 | 
 99 | ---
100 | 
101 | <a name="code"></a>
102 | ## Code
103 | 
104 | **Beispiel Code Block**
105 | 
106 | ```php
107 |     <?php
108 |     // Code wird einfach nur mit Tabs eingerückt.
109 |     // Nicht (wie hier auf Github möglich ) die ``` verwenden.
110 |     $article = rex_article::get();
111 | ```
112 | 
113 | 
114 | **Beispiel Code Inline**
115 | 
116 | 	Code innerhalb eines Text wird `ganz normal` mit Backticks ausgezeichnet.
117 | 
118 | **Ausgabe Code Inline**
119 | 
120 | Code innerhalb eines Text wird `ganz normal` mit Backticks ausgezeichnet.
121 | 
122 | ---
123 | 
124 | <a name="bilder"></a>
125 | ## Bilder
126 | 
127 | **Beispielcode**
128 | 
129 | 	![Bildtitel](/screenshot.png)
130 | 
131 | ---
132 | 
133 | 
134 | 
135 | <a name="hinweise"></a>
136 | ## Hinweise
137 | 
138 | Für Hinweise könnten wir die Blockquote-Formatierung verwenden.
139 | 
140 | **Beispiel Hinweis**
141 | 
142 |     > **Hinweis:** Aliquam arcu lectus, imperdiet sollicitudin vehicula ultricies, pellentesque at nunc. Pellentesque ut consectetur nisl. In finibus efficitur turpis, posuere facilisis dui tristique ac.
143 | 
144 | **Ausgabe Hinweis**
145 | 
146 | > **Hinweis:** Aliquam arcu lectus, imperdiet sollicitudin vehicula ultricies, pellentesque at nunc. Pellentesque ut consectetur nisl. In finibus efficitur turpis, posuere facilisis dui tristique ac.
147 | 
148 | ---
149 | <a name="markdown"></a>
150 | ## Markdown-Referenz
151 | 
152 | [https://daringfireball.net/projects/markdown/syntax](https://daringfireball.net/projects/markdown/syntax)  
153 | [http://markdown.de/](http://markdown.de/)
154 | 


--------------------------------------------------------------------------------
/assets/bricky.js:
--------------------------------------------------------------------------------
 1 | $(document).on('rex:ready', function (e, container) {
 2 |     function brickyToggleCtypeContent($grid) {
 3 |         $grid = $grid.split('-');
 4 |         $ctypes.find('li:not([data-bricky-ctype="locked"])').css('display', 'none');
 5 |         for (var i = 0; i < $grid.length; i++) {
 6 |             $ctypes.find('li:not([data-bricky-ctype="locked"])').eq(i).css('display', 'block');
 7 |         }
 8 |         $ctypes.find('li:first-child a').click();
 9 |     }
10 | 
11 |     var $module = container.find('[data-bricky="module"]');
12 |     if ($module.length > 0) {
13 |         var $ctypes = $module.find('[data-bricky="ctypes"]');
14 |         var $ctypesOrder = $module.find('[data-bricky="ctypesOrder"]');
15 |         var $grids = $module.find('[data-bricky="grids"] input[type="radio"]');
16 |         var $selectedGrid = $module.find('[data-bricky="selectedGrid"]').val();
17 |         var $view = $module.find('[data-bricky-view]').data('bricky-view');
18 | 
19 |         if (typeof $view !== 'undefined' && $view === 'SLICES') {
20 |             // Alle fieldsets display none setzen
21 |             $module.find('[data-bricky-selectable]').each(function(i) {
22 |                 $(this).hide();
23 |             });
24 | 
25 |             $(document).on('rex:ready', function (event, container) {
26 |                 $('[data-bricky-select-a-brick] option:selected').each(function () {
27 |                     var value = $(this).val();
28 |                     if (value === '') {
29 |                         $(this).closest('[data-bricky-select-a-brick]').siblings('[data-bricky-selectable]').hide();
30 |                     } else {
31 |                     }
32 |                 });
33 |             });
34 | 
35 |             // only show selected elements on edit
36 |             $module.find('[data-bricky-select-a-brick] option:selected').each(function(i) {
37 |                 var value = $(this).val();
38 |                 $(this).closest('[data-bricky-select-a-brick]').siblings('[data-bricky-selectable="'+value+'"]').show();
39 | 
40 |             });
41 | 
42 |             $(document).on('change', '[data-bricky-select-a-brick] select', function () {
43 |                 $(this).closest('[data-bricky-select-a-brick]').siblings('[data-bricky-selectable]').hide();
44 |                 $(this).closest('[data-bricky-select-a-brick]').siblings('[data-bricky-selectable]').find('.show').val('false');
45 |                 $(this).closest('[data-bricky-select-a-brick]').siblings('[data-bricky-selectable="'+$(this).val()+'"]').show();
46 |                 $(this).closest('[data-bricky-select-a-brick]').siblings('[data-bricky-selectable="'+$(this).val()+'"]').find('.show').val('true');
47 |             });
48 | 
49 |         }
50 | 
51 |         if (typeof $ctypesOrder !== 'undefined' && $ctypesOrder.length > 0) {
52 | 
53 |             $ctypes.sortable({
54 |                 axis : "x",
55 |                 items: '> li:not([data-bricky-ctype="locked"])',
56 |                 update: function (e, ui) {
57 |                     var csv = [];
58 |                     $ctypes.find('li:not([data-bricky-ctype="locked"])').each(function(i){
59 |                         csv.push($(this).attr('data-id'));
60 |                     });
61 |                     $ctypesOrder.val( csv.join() );
62 |                 }
63 |             });
64 |         }
65 |         if(typeof $selectedGrid === 'undefined') {
66 |             // Kein Gridauswahl möglich
67 |             // ersten Tab "Einstellungen" oeffnen
68 |             $ctypes.find('[data-id] a').click();
69 |         }
70 |         else {
71 |             if ($grids.length >= 2 && $selectedGrid === '') {
72 |                 // Tab "Einstellungen" oeffnen
73 |                 $ctypes.find('[data-bricky="ctypeGrid"] a').click();
74 |             }
75 |             if ($grids.length >= 2 && $selectedGrid !== '') {
76 |                 brickyToggleCtypeContent($selectedGrid);
77 |             }
78 |             if ($grids.length >= 2) {
79 |                 $grids.change(function() {
80 |                     brickyToggleCtypeContent(this.value);
81 |                 });
82 |             }
83 | 
84 |             if ($grids.length === 1 && $selectedGrid === '') {
85 |                 $grids.first().prop('checked', true);
86 |                 brickyToggleCtypeContent($grids.first().val());
87 |                 $ctypes.find('li[data-bricky="ctypeGrid"]').css('display', 'none');
88 |             }
89 |             if ($grids.length === 1 && $selectedGrid !== '') {
90 |                 brickyToggleCtypeContent($selectedGrid);
91 |                 $ctypes.find('li[data-bricky="ctypeGrid"]').css('display', 'none');
92 |             }
93 |         }
94 |     }
95 | });
96 | 


--------------------------------------------------------------------------------
/pages/module.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | /**
  4 |  * This file is part of the Bricky package.
  5 |  *
  6 |  * @author (c) Friends Of REDAXO
  7 |  *
  8 |  * For the full copyright and license information, please view the LICENSE
  9 |  * file that was distributed with this source code.
 10 |  */
 11 | 
 12 | use Bricky\Bricky;
 13 | use Bricky\Module;
 14 | 
 15 | $id = rex_request('id', 'int');
 16 | $func = rex_request('func', 'string');
 17 | $action = rex_request('action', 'string');
 18 | 
 19 | if ($action == 'cache') {
 20 |     Module::deleteCache();
 21 | }
 22 | 
 23 | if ($func == '') {
 24 |     $query = '  SELECT      `b`.`id`,
 25 |                             `b`.`module_id`,
 26 |                             `m`.`name`,
 27 |                             `b`.`bricks` 
 28 |                 FROM        '.rex::getTable(Module::TABLE_NAME) .' AS b
 29 |                 LEFT JOIN   '.rex::getTable('module').' AS m
 30 |                     ON      `b`.`module_id` = `m`.`id`
 31 |                 ';
 32 | 
 33 |     $list = rex_list::factory($query);
 34 |     $list->addTableAttribute('class', 'table-striped');
 35 | 
 36 |     $tdIcon = '<i class="rex-icon fa fa-gears"></i>';
 37 |     $thIcon = '<a href="'.$list->getUrl(['func' => 'add']).'"><i class="rex-icon rex-icon-add-article"></i></a>';
 38 |     $list->addColumn($thIcon, $tdIcon, 0, ['<th class="rex-table-icon">###VALUE###</th>', '<td class="rex-table-icon">###VALUE###</td>']);
 39 |     $list->setColumnParams($thIcon, ['func' => 'edit', 'id' => '###id###']);
 40 | 
 41 |     $list->setColumnLabel('id', rex_i18n::msg('id'));
 42 |     $list->setColumnLayout('id', ['<th class="rex-table-id">###VALUE###</th>', '<td class="rex-table-id" data-title="'.rex_i18n::msg('id').'">###VALUE###</td>']);
 43 | 
 44 |     $list->setColumnLabel('module_id', $this->i18n('module_id'));
 45 |     $list->setColumnLabel('name', $this->i18n('module_name'));
 46 |     $list->setColumnLabel('bricks', $this->i18n('bricks'));
 47 | 
 48 |     $list->addColumn($this->i18n('function'), '<i class="rex-icon rex-icon-edit"></i> '.$this->i18n('edit'));
 49 |     $list->setColumnLayout($this->i18n('function'), ['<th class="rex-table-action" colspan="2">###VALUE###</th>', '<td class="rex-table-action">###VALUE###</td>']);
 50 |     $list->setColumnParams($this->i18n('function'), ['func' => 'edit', 'id' => '###id###']);
 51 | 
 52 |     $content = $list->get();
 53 | 
 54 |     $fragment = new rex_fragment();
 55 |     $fragment->setVar('title', $this->i18n('bricky_module'));
 56 |     $fragment->setVar('content', $content, false);
 57 |     $content = $fragment->parse('core/page/section.php');
 58 | 
 59 |     echo $content;
 60 | } elseif ($func == 'add' || $func == 'edit') {
 61 |     $title = $func == 'edit' ? $this->i18n('edit') : $this->i18n('add');
 62 | 
 63 |     $form = rex_form::factory(rex::getTable('bricky_module'), '', 'id = '.$id, 'post', false);
 64 |     $form->addParam('id', $id);
 65 |     $form->addParam('action', 'cache');
 66 |     $form->setApplyUrl(rex_url::currentBackendPage());
 67 |     $form->setEditMode($func == 'edit');
 68 |     $form->addErrorMessage(REX_FORM_ERROR_VIOLATE_UNIQUE_KEY, $this->i18n('bricky_module_exists'));
 69 | 
 70 |     if ($func == 'add') {
 71 |         $field = $form->addTextField('module_name');
 72 |     } else {
 73 |         $value = $this->i18n('module_not_exists');
 74 |         $sql = rex_sql::factory();
 75 |         $module = $sql->getArray('SELECT `m`.`name` FROM '.rex::getTable(Module::TABLE_NAME) .' AS b LEFT JOIN   '.rex::getTable('module').' AS m ON `b`.`module_id` = `m`.`id` WHERE `b`.`id` = :id LIMIT 1', ['id' => $id]);
 76 |         if (isset($module[0]['name'])) {
 77 |             $value = $module[0]['name'];
 78 |         }
 79 |         $field = $form->addReadOnlyField('module_name', $value);
 80 |     }
 81 |     $field->setLabel($this->i18n('module_name'));
 82 | 
 83 | 
 84 |     $field = $form->addCheckboxField('bricks');
 85 |     $field->setLabel($this->i18n('bricks_registered'));
 86 |     $field->setNotice($this->i18n('bricks_select_notice'));
 87 |     foreach (Bricky::getInstance()->getBricks() as $brick) {
 88 |         $field->addOption($brick->getName(), $brick->getClassName());
 89 |     }
 90 | 
 91 |     $field = $form->addCheckboxField('grids');
 92 |     $field->setLabel($this->i18n('grid'));
 93 |     foreach (Bricky::getInstance()->getAvailableGrids() as $grid) {
 94 |         $field->addOption($grid, $grid);
 95 |     }
 96 | 
 97 |     $field = $form->addRadioField('view');
 98 |     $field->setLabel($this->i18n('view'));
 99 |     foreach (Bricky::getInstance()->getViews() as $view) {
100 |         $field->addOption(ucfirst(mb_strtolower($view)), $view);
101 |     }
102 | 
103 |     $content = $form->get();
104 | 
105 |     $fragment = new rex_fragment();
106 |     //$fragment->setVar('title', $title);
107 |     $fragment->setVar('body', $content, false);
108 |     $content = $fragment->parse('core/page/section.php');
109 | 
110 |     echo $content;
111 | }
112 | 
113 | 


--------------------------------------------------------------------------------
/lib/Bricky/Bricky.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | /**
  4 |  * This file is part of the Bricky package.
  5 |  *
  6 |  * @author (c) Friends Of REDAXO
  7 |  *
  8 |  * For the full copyright and license information, please view the LICENSE
  9 |  * file that was distributed with this source code.
 10 |  */
 11 | 
 12 | namespace Bricky;
 13 | 
 14 | use Bricky\Brick\Brick;
 15 | 
 16 | class Bricky
 17 | {
 18 |     use \rex_singleton_trait;
 19 | 
 20 |     /**
 21 |      * Array of all bricks.
 22 |      *
 23 |      * @var Brick[]
 24 |      */
 25 |     private $bricks = [];
 26 | 
 27 |     private $availableGrids = [
 28 |         '12',
 29 |         '6-6',
 30 |         '4-4-4',
 31 |         '3-3-3-3',
 32 |         '6-3-3',
 33 |         '3-6-3',
 34 |         '3-3-6',
 35 |         '10-2',
 36 |         '9-3',
 37 |         '8-4',
 38 |         '7-5',
 39 |         '6-4',
 40 |         '5-7',
 41 |         '4-8',
 42 |         '3-9',
 43 |         '2-10'
 44 |     ];
 45 | 
 46 | 
 47 |     private $views = [
 48 |         'NORMAL',
 49 |         'SLICES',
 50 |     ];
 51 | 
 52 |     const VALUE_ID_CTYPES_ORDER = 19;
 53 |     const VALUE_ID_SELECTED_GRID = 20;
 54 | 
 55 |     public function addBrick(Brick $instance)
 56 |     {
 57 |         $this->bricks[] = $instance;
 58 |         \rex_fragment::addDirectory($instance->getFragmentDir());
 59 |     }
 60 | 
 61 | 
 62 |     public function getBricks()
 63 |     {
 64 |         if (!count($this->bricks)) {
 65 |             return null;
 66 |         }
 67 | 
 68 |         return $this->bricks;
 69 |     }
 70 | 
 71 |     public function getAvailableGrids()
 72 |     {
 73 |         return $this->availableGrids;
 74 |     }
 75 | 
 76 |     public function getViews()
 77 |     {
 78 |         return $this->views;
 79 |     }
 80 | 
 81 |     public static function getModule($moduleId)
 82 |     {
 83 |         return Module::get($moduleId);
 84 |     }
 85 | 
 86 |     public static function getModuleInput()
 87 |     {
 88 |         return
 89 |             '<?php' . "\n" .
 90 |             "\n" .
 91 |             'use Bricky\Bricky;' . "\n" .
 92 |             "\n" .
 93 |             'echo Bricky::getModule(\'REX_MODULE_ID\')' . "\n" .
 94 |             '    ->setCtypesOrder(\'REX_VALUE[' . self::VALUE_ID_CTYPES_ORDER . ']\')' . "\n" .
 95 |             '    ->setSelectedGrid(\'REX_VALUE[' . self::VALUE_ID_SELECTED_GRID . ']\')' . "\n" .
 96 |             '    ->getInput();' . "\n";
 97 |     }
 98 | 
 99 |     public static function getModuleOutput()
100 |     {
101 |         return
102 |             '<?php' . "\n" .
103 |             "\n" .
104 |             'use Bricky\Bricky;' . "\n" .
105 |             "\n" .
106 |             '$ctypesOrderOutput = explode(\',\',\'REX_VALUE[19]\');' . "\n" .
107 |             "\n" .
108 |             'if ($ctypesOrderOutput[0] == \'\') {'."\n" .
109 |             ' $ctypesOrderOutput = array(1,2,3,4);'. "\n" .
110 |             '};' . "\n".
111 |             "\n" .
112 |             ' $gridOutput   = \'REX_VALUE[20]\';'. "\n" .
113 |             ' $gridCount = explode(\'-\', $gridOutput);'. "\n" .
114 |             "\n" .
115 |             ' $rex_value[1] = \'REX_VALUE[1]\';'. "\n" .
116 |             ' $rex_value[2] = \'REX_VALUE[2]\';'. "\n" .
117 |             ' $rex_value[3] = \'REX_VALUE[3]\';'. "\n" .
118 |             ' $rex_value[4] = \'REX_VALUE[4]\';'. "\n".
119 |             "\n".
120 |             '$i = 0;'. "\n".
121 |             'foreach ($ctypesOrderOutput as $v) {'. "\n".
122 |             '  if(++$i > count($gridCount)) break;'. "\n".
123 |             '    if ($rex_value[$v] != \'\' ) {'."\n".
124 |             '      if(rex::isBackend()) {'. "\n".
125 |             '        echo \'<div class="form-horizontal bricky_backend_output">\';'."\n".
126 |             '        echo \'<h4>Bereich \'.$i.\'</h4>\';'. "\n".
127 |             '        echo Bricky::getModule(\'REX_MODULE_ID\')->getOutput(\rex_var::toArray($rex_value[$v]));'."\n".
128 |             '        echo \'</div>\';'. "\n".
129 |             '      } else {'."\n".
130 |             '    }'. "\n".
131 |             '        $htmlContent[$i] = Bricky::getModule(\'REX_MODULE_ID\')->getOutput(\rex_var::toArray($rex_value[$v]));'."\n".
132 |             '  }'."\n".
133 |             '}'. "\n".
134 |             'if(!rex::isBackend()) {'. "\n".
135 |             '    $fragment = new rex_fragment();'. "\n".
136 |             '    $fragment->setVar( \'gridOutput\',$gridOutput,false);'. "\n".
137 |             '    for( $i= 0 ; $i <= 10 ; $i++ ) {'. "\n".
138 |             '        if(isset($htmlContent[$i])) {'. "\n".
139 |             '            $fragment->setVar( \'htmlContent_\'.$i,$htmlContent[$i],false);'. "\n".
140 |             '        } else {'. "\n".
141 |             '            $fragment->setVar( \'htmlContent_\'.$i,\'\',false);'. "\n".
142 |             '        }'. "\n".
143 |             '    }'. "\n".
144 |             '    echo $fragment->parse(\'bricky_grid_output.php\');'. "\n".
145 |             '}'. "\n".
146 |             'if(rex::isBackend()) {'. "\n".
147 |             ' echo \'<div class="bricky-module-input-grid-item" data-bricky-grid="\'.$gridOutput.\'">\';'."\n".
148 |             ' echo   \'<span class="bricky-module-input-grid-item-view">\';'. "\n".
149 |             '    for( $i= 1 ; $i <= count($gridCount) ; $i++ ) {'. "\n".
150 |             '        echo \'<span></span>\';'."\n".
151 |             '    }'. "\n".
152 |             '   echo \'</span>\';'. "\n".
153 |             ' echo \'</div>\';'. "\n".
154 |             '}'. "\n";
155 |     }
156 | }
157 | 


--------------------------------------------------------------------------------
/fragments/bricky_grid_output.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | // Output for Bootstrap 4
  4 | 
  5 | $fe_output[] = '<div class="container">
  6 |     <div class="row">';
  7 | 
  8 | switch ($this->gridOutput) {
  9 | 
 10 |     case '12':
 11 |         $fe_output[] = '
 12 |         <div class="col-xs-12">
 13 |             ' . $this->htmlContent_1. '
 14 |         </div>' . PHP_EOL;
 15 |         break;
 16 | 
 17 |     case '6-6':
 18 |         $fe_output[] = '
 19 |         <div class="col-xs-12 col-sm-6">
 20 |             ' . $this->htmlContent_1. '
 21 |         </div>
 22 |         <div class="col-xs-12 col-sm-6">
 23 |             ' . $this->htmlContent_2. '
 24 |         </div>' . PHP_EOL;
 25 |         break;
 26 | 
 27 |     case '4-4-4':
 28 |         $fe_output[] = '
 29 |         <div class="col-xs-12 col-sm-4">
 30 |             ' . $this->htmlContent_1. '
 31 |         </div>
 32 |         <div class="col-xs-12 col-sm-4">
 33 |             ' . $this->htmlContent_2. '
 34 |         </div>
 35 |         <div class="col-xs-12 col-sm-4">
 36 |             ' . $this->htmlContent_3. '
 37 |         </div>' . PHP_EOL;
 38 |         break;
 39 | 
 40 |     case '3-3-3-3':
 41 |         $fe_output[] = '
 42 |         <div class="col-xs-12 col-sm-6 col-md-3">
 43 |             ' . $this->htmlContent_1. '
 44 |         </div>
 45 |         <div class="col-xs-12 col-sm-6 col-md-3">
 46 |             ' . $this->htmlContent_2. '
 47 |         </div>
 48 |         <div class="col-xs-12 col-sm-6 col-md-3">
 49 |             ' . $this->htmlContent_3. '
 50 |         </div>
 51 |         <div class="col-xs-12 col-sm-6 col-md-3">
 52 |             ' . $this->htmlContent_4. '
 53 |         </div>' . PHP_EOL;
 54 |         break;
 55 | 
 56 |     case '6-3-3':
 57 |         $fe_output[] = '
 58 |         <div class="col-xs-12 col-sm-6">
 59 |             ' . $this->htmlContent_1. '
 60 |         </div>
 61 |         <div class="col-xs-12 col-sm-3">
 62 |             ' . $this->htmlContent_2. '
 63 |         </div>
 64 |         <div class="col-xs-12 col-sm-3">
 65 |             ' . $this->htmlContent_3. '
 66 |         </div>' . PHP_EOL;
 67 |         break;
 68 | 
 69 |     case '3-6-3':
 70 |         $fe_output[] = '
 71 |         <div class="col-xs-12 col-sm-3">
 72 |             ' . $this->htmlContent_1. '
 73 |         </div>
 74 |         <div class="col-xs-12 col-sm-6">
 75 |             ' . $this->htmlContent_2. '
 76 |         </div>
 77 |         <div class="col-xs-12 col-sm-3">
 78 |             ' . $this->htmlContent_3. '
 79 |         </div>' . PHP_EOL;
 80 |         break;
 81 | 
 82 |     case '3-3-6':
 83 |         $fe_output[] = '
 84 |         <div class="col-xs-12 col-sm-3">
 85 |             ' . $this->htmlContent_1. '
 86 |         </div>
 87 |         <div class="col-xs-12 col-sm-3">
 88 |             ' . $this->htmlContent_2. '
 89 |         </div>
 90 |         <div class="col-xs-12 col-sm-6">
 91 |             ' . $this->htmlContent_3. '
 92 |         </div>' . PHP_EOL;
 93 |         break;
 94 | 
 95 | 
 96 |     case '10-2':
 97 |         $fe_output[] = '
 98 |         <div class="col-xs-12 col-sm-10">
 99 |             ' . $this->htmlContent_1. '
100 |         </div>
101 |         <div class="col-xs-12 col-sm-2">
102 |             ' . $this->htmlContent_2. '
103 |         </div>' . PHP_EOL;
104 |         break;
105 | 
106 |     case '9-3':
107 |         $fe_output[] = '
108 |         <div class="col-xs-12 col-sm-9">
109 |             ' . $this->htmlContent_1. '
110 |         </div>
111 |         <div class="col-xs-12 col-sm-3">
112 |             ' . $this->htmlContent_2. '
113 |         </div>' . PHP_EOL;
114 |         break;
115 | 
116 |     case '8-4':
117 |         $fe_output[] = '
118 |         <div class="col-xs-12 col-sm-8">
119 |             ' . $this->htmlContent_1. '
120 |         </div>
121 |         <div class="col-xs-12 col-sm-4">
122 |             ' . $this->htmlContent_2. '
123 |         </div>' . PHP_EOL;
124 |         break;
125 | 
126 |     case '7-5':
127 |         $fe_output[] = '
128 |         <div class="col-xs-12 col-sm-7">
129 |             ' . $this->htmlContent_1. '
130 |         </div>
131 |         <div class="col-xs-12 col-sm-5">
132 |             ' . $this->htmlContent_2. '
133 |         </div>' . PHP_EOL;
134 |         break;
135 | 
136 |     case '6-4':
137 |         $fe_output[] = '
138 |         <div class="col-xs-12 col-sm-6">
139 |             ' . $this->htmlContent_1. '
140 |         </div>
141 |         <div class="col-xs-12 col-sm-4">
142 |             ' . $this->htmlContent_2. '
143 |         </div>' . PHP_EOL;
144 |         break;
145 | 
146 |     case '6-4':
147 |         $fe_output[] = '
148 |         <div class="col-xs-12 col-sm-5">
149 |             ' . $this->htmlContent_1. '
150 |         </div>
151 |         <div class="col-xs-12 col-sm-7">
152 |             ' . $this->htmlContent_2. '
153 |         </div>' . PHP_EOL;
154 |         break;
155 | 
156 |     case '4-8':
157 |         $fe_output[] = '
158 |         <div class="col-xs-12 col-sm-4">
159 |             ' . $this->htmlContent_1. '
160 |         </div>
161 |         <div class="col-xs-12 col-sm-8">
162 |             ' . $this->htmlContent_2. '
163 |         </div>' . PHP_EOL;
164 |         break;
165 | 
166 |     case '3-9':
167 |         $fe_output[] = '
168 |         <div class="col-xs-12 col-sm-3">
169 |             ' . $this->htmlContent_1. '
170 |         </div>
171 |         <div class="col-xs-12 col-sm-9">
172 |             ' . $this->htmlContent_2. '
173 |         </div>' . PHP_EOL;
174 |         break;
175 | 
176 |     case '2-10':
177 |         $fe_output[] = '
178 |         <div class="col-xs-12 col-sm-2">
179 |             ' . $this->htmlContent_1. '
180 |         </div>
181 |         <div class="col-xs-12 col-sm-10">
182 |             ' . $this->htmlContent_2. '
183 |         </div>' . PHP_EOL;
184 |         break;
185 | }
186 | 
187 | $fe_output[] = '</div>
188 | </div>';
189 | 
190 | echo implode($fe_output);
191 | 


--------------------------------------------------------------------------------
/lib/Bricky/Module.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | /**
  4 |  * This file is part of the Bricky package.
  5 |  *
  6 |  * @author (c) Friends Of REDAXO
  7 |  *
  8 |  * For the full copyright and license information, please view the LICENSE
  9 |  * file that was distributed with this source code.
 10 |  */
 11 | 
 12 | namespace Bricky;
 13 | 
 14 | use Bricky\Brick\Brick;
 15 | 
 16 | class Module
 17 | {
 18 |     const TABLE_NAME = 'bricky_module';
 19 | 
 20 |     private static $cacheLoaded = false;
 21 |     private static $modules = [];
 22 | 
 23 |     private $bricks;
 24 |     private $grids;
 25 |     private $maxCtypes;
 26 |     private $minCtypes;
 27 |     private $module_id;
 28 |     private $view;
 29 | 
 30 |     private $ctypesOrder;
 31 |     private $selectedGrid;
 32 | 
 33 | 
 34 |     private function __construct()
 35 |     {
 36 | 
 37 |     }
 38 | 
 39 |     public function getBricks()
 40 |     {
 41 |         $registeredBricks = Bricky::getInstance()->getBricks();
 42 |         if (!$registeredBricks) {
 43 |             return null;
 44 |         }
 45 | 
 46 |         $moduleBricks = [];
 47 |         foreach ($registeredBricks as $registeredBrick) {
 48 |             if (in_array($registeredBrick->getClassName(), $this->bricks)) {
 49 |                 $moduleBricks[] = $registeredBrick;
 50 |             }
 51 |         }
 52 | 
 53 |         return $moduleBricks;
 54 |     }
 55 | 
 56 |     public function getGrid()
 57 |     {
 58 |     }
 59 | 
 60 |     public function validateValueId($valueId)
 61 |     {
 62 |         $valueId = (int)$valueId;
 63 |         if ($valueId < 1 || $valueId >= 20) {
 64 |             return null;
 65 |         }
 66 |         return $valueId;
 67 |     }
 68 | 
 69 |     public function getInput()
 70 |     {
 71 |         $bricks = $this->getBricks();
 72 |         //if(!$bricks || !$this->validateValueId($valueId)) {
 73 |         //    return null;
 74 |         //}
 75 | 
 76 |         $form = '';
 77 |         // select für die Slices darstellung
 78 |         $bricksSelectOptions = [];
 79 |         foreach ($bricks as $brick) {
 80 |             $prefixedName = $brick->getPrefixedName();
 81 | 
 82 |             // Key-Value-Pair vertauscht überegben, damit später korrekt alphabetisch sortiert werden kann
 83 |             $bricksSelectOptions['- '.rex_escape($brick->getName())] = rex_escape($brick->getClassName());
 84 | 
 85 |             $brickForm = sprintf('
 86 |                 <fieldset class="form-horizontal" data-bricky-selectable="%s">
 87 |                     <legend>%s</legend>
 88 |                     %s
 89 |                 </fieldset>            
 90 |             ', rex_escape($brick->getClassName()), rex_escape($brick->getName()), $brick->getInput());
 91 | 
 92 |             // Widgets finden und anpassen
 93 |             preg_match_all('@(?<complete>BRICK_(?<widget>MEDIA|MEDIALIST|LINK|LINKLIST)\[(?<args>.*?)\])@', $brickForm, $matches, PREG_SET_ORDER | PREG_OFFSET_CAPTURE);
 94 |             if ($matches) {
 95 |                 foreach ($matches as $match) {
 96 |                     $args = \rex_string::split($match['args'][0]);
 97 |                     if (!isset($args['id'])) {
 98 |                         continue;
 99 |                     }
100 |                     $id = $args['id'];
101 |                     unset($args['id']);
102 | 
103 |                     $widgetClass = '\rex_var_'.strtolower($match['widget'][0]);
104 |                     $widget = $widgetClass::getWidget(
105 |                         $id,
106 |                         'REX_INPUT_VALUE[{{{ VALUE_ID }}}][0]['.$prefixedName.$match['widget'][0].'_'.$id.']',
107 |                         '', // kein Value übergeben, wird von MBlock gesetzt
108 |                         $args);
109 |                     $brickForm = str_replace($match['complete'][0], $widget, $brickForm);
110 |                 }
111 |             }
112 | 
113 |             // Inputs finden und anpassen
114 |             $brickForm = str_replace('BRICK_INPUT_VALUE[', 'REX_INPUT_VALUE[{{{ VALUE_ID }}}][0]['.$prefixedName, $brickForm);
115 |             $form .= $brickForm;
116 |         }
117 | 
118 |         if ($this->isSliceView()) {
119 |             // alphabetisch sortieren und Key-Value-Pair vertauschen, damit rex_select korrekt value und label setzen kann
120 |             ksort($bricksSelectOptions);
121 |             $bricksSelectOptions = array_flip($bricksSelectOptions);
122 | 
123 |             $bricksSelect = new \rex_select();
124 |             $bricksSelect->setName('REX_INPUT_VALUE[{{{ VALUE_ID }}}][0][BRICK_SELECT]');
125 |             $bricksSelect->addOption('Brick wählen', '');
126 |             $bricksSelect->addOptions($bricksSelectOptions);
127 | 
128 |             $bricksSelectForm = sprintf('
129 |                 <fieldset class="form-horizontal select_bricky" data-bricky-select-a-brick>
130 |                     <div class="form-group">
131 |                         <label class="col-md-2 control-label">Auswahl</label>
132 |                         <div class="col-md-3">
133 |                             <div class="rex-select-style">
134 |                                 %s
135 |                             </div>
136 |                         </div>
137 |                     </div>
138 |                 </fieldset>            
139 |             ', $bricksSelect->get());
140 | 
141 |             /*
142 |             $bricksSelectForm = sprintf('
143 |                 <fieldset class="form-horizontal" data-bricky-select-a-brick>
144 |                     <legend>kein Element ausgewählt</legend>
145 |                     <div class="form-group">
146 |                         <label class="col-md-2 control-label">Auswahl</label>
147 |                         <div class="col-md-3">
148 |                             <div class="rex-select-style">
149 |                                 %s
150 |                             </div>
151 |                         </div>
152 |                     </div>
153 |                 </fieldset>            
154 |             ', $bricksSelect->get());
155 |             */
156 | 
157 |             $form = $bricksSelectForm.$form;
158 |         }
159 | 
160 |         $ctypes = [];
161 |         for ($i = 1; $i <= $this->maxCtypes; $i++) {
162 |             $ctypes[$i] = \MBlock::show($i, str_replace('{{{ VALUE_ID }}}', $i, $form));
163 |         }
164 | 
165 |         $fragment = new \rex_fragment();
166 |         $fragment->setVar('minCtypes', $this->minCtypes);
167 |         $fragment->setVar('maxCtypes', $this->maxCtypes);
168 |         $fragment->setVar('grids', $this->grids);
169 |         $fragment->setVar('view', $this->view);
170 |         $fragment->setVar('selectedGrid', $this->selectedGrid);
171 |         $fragment->setVar('ctypes', $ctypes, false);
172 |         $fragment->setVar('ctypesOrder', $this->ctypesOrder);
173 | 
174 |         return $fragment->parse('bricky_module_input.php');
175 |     }
176 | 
177 |     public function getOutput(array $blocks)
178 |     {
179 |         if (\rex::isBackend()) {
180 |             return $this->getBackendOutput($blocks);
181 |         }
182 |         return $this->getFrontendOutput($blocks);
183 |     }
184 | 
185 |     public function getBackendOutput(array $blocks)
186 |     {
187 |         return $this->generateOutput($blocks, 'getBackendOutput');
188 |     }
189 | 
190 |     public function getFrontendOutput(array $blocks)
191 |     {
192 |         return $this->generateOutput($blocks, 'getFrontendOutput');
193 |     }
194 | 
195 |     protected function generateOutput(array $blocks, $method)
196 |     {
197 |         $bricks = $this->getBricks();
198 |         if(!$bricks) {
199 |             return null;
200 |         }
201 | 
202 |         $blocks = $this->normalizeOutputBlocks($blocks);
203 | 
204 |         $blockKeys = array_flip(array_keys($blocks[0]));
205 | 
206 |         // alle im Modul verwendeten Bricks sammeln
207 |         $usedBricks = [];
208 |         foreach ($bricks as $brick) {
209 |             if (isset($blockKeys[$brick->getPrefixedName()])) {
210 |                 $usedBricks[$brick->getPrefixedName()] = $brick;
211 |             }
212 |         }
213 | 
214 |         $output = '';
215 |         foreach ($blocks as $blockIndex => $block) {
216 |             foreach ($block as $brickPrefixedName => $blockValues) {
217 |                 if (!isset($usedBricks[$brickPrefixedName])) {
218 |                     // Slices können noch Bricks enthalten,
219 |                     // die nicht mehr zum Modul gehören
220 |                     continue;
221 |                 }
222 |                 $brick = $usedBricks[$brickPrefixedName];
223 |                 $output .= $brick->{$method}($blockValues);
224 |             }
225 |         }
226 | 
227 |         return $output;
228 |     }
229 | 
230 |     /**ctype-
231 |      * Erstellt ein nested Array anhand des Prefixes
232 |      *  $blocks = [
233 |      *      0 => [
234 |      *          'CARD__TITLE' => 'Title'
235 |      *          'CARD__TEXT' => 'Description text'
236 |      *      ]
237 |      *  ]
238 |      *
239 |      *  return [
240 |      *      0 => [
241 |      *          'CARD__' => [
242 |      *              'TITLE' => 'Title'
243 |      *              'TEXT' => 'Description text'
244 |      *          ]
245 |      *      ]
246 |      *  ]
247 |      *
248 |      * @param array $blocks
249 |      *
250 |      * @return array
251 |      */
252 |     protected function normalizeOutputBlocks(array $blocks)
253 |     {
254 |         foreach ($blocks as $blockIndex => $block) {
255 |             foreach ($block as $blockKey => $blockValue) {
256 |                 $pos = strpos($blockKey, Brick::PREFIX) + strlen(Brick::PREFIX);
257 |                 $key = substr($blockKey, 0, $pos);
258 |                 $subKey = substr($blockKey, $pos);
259 |                 $blocks[$blockIndex][$key][$subKey] = $blockValue;
260 |                 unset($blocks[$blockIndex][$blockKey]);
261 |             }
262 |         }
263 |         return $blocks;
264 |     }
265 | 
266 |     public function setCtypesOrder($value)
267 |     {
268 |         $this->ctypesOrder = $value;
269 |         return $this;
270 |     }
271 | 
272 |     public function setSelectedGrid($value)
273 |     {
274 |         $this->selectedGrid = $value;
275 |         return $this;
276 |     }
277 | 
278 |     protected function isSliceView()
279 |     {
280 |         return $this->view == 'SLICES';
281 |     }
282 | 
283 |     /**
284 |      * Returns the module object for the given id.
285 |      *
286 |      * @param int $id Profile id
287 |      *
288 |      * @return self
289 |      */
290 |     public static function get($id)
291 |     {
292 |         if (self::exists($id)) {
293 |             return self::$modules[$id];
294 |         }
295 |         return null;
296 |     }
297 | 
298 |     /**
299 |      * Checks if the given module exists.
300 |      *
301 |      * @param int $id Profile id
302 |      *
303 |      * @return bool
304 |      */
305 |     public static function exists($id)
306 |     {
307 |         self::checkCache();
308 |         return isset(self::$modules[$id]);
309 |     }
310 | 
311 |     /**
312 |      * Loads the cache if not already loaded.
313 |      */
314 |     private static function checkCache()
315 |     {
316 |         if (self::$cacheLoaded) {
317 |             return;
318 |         }
319 | 
320 |         $file = \rex_path::addonCache('bricky', 'modules.cache');
321 |         if (!file_exists($file)) {
322 | 
323 |             $sql = \rex_sql::factory();
324 |             $sql->setQuery('SELECT * FROM '.\rex::getTable(self::TABLE_NAME));
325 | 
326 |             $brickyModules = [];
327 |             /* @var $brickyModule \rex_sql */
328 |             foreach ($sql as $brickyModule) {
329 |                 $id = $brickyModule->getValue('module_id');
330 |                 foreach ($sql->getFieldnames() as $fieldName) {
331 |                     switch ($fieldName) {
332 |                         case 'id':
333 |                         case 'module_name':
334 |                             break;
335 |                         case 'createdate':
336 |                         case 'updatedate':
337 |                             $brickyModules[$id][$fieldName] = $sql->getDateTimeValue($fieldName);
338 |                             break;
339 |                         case 'bricks':
340 |                             $brickyModules[$id][$fieldName] = explode('|', trim($brickyModule->getValue($fieldName), '|'));
341 |                             break;
342 |                         case 'grids':
343 |                             $grids = explode('|', trim($brickyModule->getValue($fieldName), '|'));
344 |                             $availableGrids = Bricky::getInstance()->getAvailableGrids();
345 |                             foreach ($grids as $index => $grid) {
346 |                                 if (!in_array($grid, $availableGrids)) {
347 |                                     unset($grids[$index]);
348 |                                 }
349 |                             }
350 | 
351 |                             $minCtypes = 1;
352 |                             $maxCtypes = 1;
353 |                             if (count($grids) < 1) {
354 |                                 $grids = null;
355 |                             } else {
356 |                                 $min = 1;
357 |                                 $max = 1;
358 |                                 foreach ($grids as $grid) {
359 |                                     $count = substr_count($grid, '-') + 1;
360 |                                     $min = $count > $min ? $min : $count;
361 |                                     $max = $count > $max ? $count : $max;
362 |                                 }
363 |                                 $minCtypes = $min;
364 |                                 $maxCtypes = $max;
365 |                             }
366 | 
367 |                             $brickyModules[$id][$fieldName] = $grids;
368 |                             $brickyModules[$id]['minCtypes'] = $minCtypes;
369 |                             $brickyModules[$id]['maxCtypes'] = $maxCtypes;
370 |                             break;
371 |                         default:
372 |                             $brickyModules[$id][$fieldName] = $brickyModule->getValue($fieldName);
373 |                             break;
374 |                     }
375 |                 }
376 |             }
377 |             $file = \rex_path::addonCache('bricky', 'modules.cache');
378 |             if (\rex_file::putCache($file, $brickyModules) === false) {
379 |                 throw new \rex_exception('Bricky cache file could not be generated');
380 |             }
381 |         }
382 | 
383 |         foreach (\rex_file::getCache($file) as $id => $data) {
384 |             $module = new self();
385 |             foreach ($data as $key => $value) {
386 |                 $module->$key = $value;
387 |             }
388 |             self::$modules[$id] = $module;
389 |         }
390 |         self::$cacheLoaded = true;
391 |     }
392 | 
393 |     public static function deleteCache()
394 |     {
395 |         $file = \rex_path::addonCache('bricky', 'modules.cache');
396 |         \rex_file::delete($file);
397 |     }
398 | }


--------------------------------------------------------------------------------
/assets/bricky.css:
--------------------------------------------------------------------------------
  1 | /**
  2 | * Grid Settings
  3 | */
  4 | :root {
  5 |     --g-z_index: 99999999;
  6 | 
  7 |     --g-color: 0, 0%, 50%;
  8 |     --g-opacity-baseline: 0.1;
  9 |     --g-opacity-line: 0;
 10 |     --g-opacity-column: 0;
 11 |     --g-opacity-gutter: 0;
 12 | 
 13 |     --g-baseline-height: 4px;
 14 |     --g-baseline-start: 3px;
 15 | 
 16 |     --g-column-count: 12;
 17 |     --g-offset: 10px;
 18 |     --g-gutter: 10px;
 19 | 
 20 |     --g-color-line: hsla(var(--g-color), var(--g-opacity-line));
 21 |     --g-color-column: hsla(var(--g-color), var(--g-opacity-column));
 22 |     --g-color-gutter: hsla(var(--g-color), var(--g-opacity-gutter));
 23 |     --g-color-baseline: hsla(var(--g-color), var(--g-opacity-baseline));
 24 | 
 25 |     --line-thickness: 1px;
 26 |     --column-start: 0;
 27 |     --column-start-line: var(--line-thickness);
 28 |     --column-end: calc((100% / var(--g-column-count)) - var(--g-gutter) - var(--line-thickness));
 29 |     --column-end-line: calc((100% / var(--g-column-count)) - var(--g-gutter));
 30 |     --gutter-end: calc(100% / var(--g-column-count));
 31 | 
 32 |     --g-gradient-column:
 33 |         repeating-linear-gradient(
 34 |             to right,
 35 |             var(--g-color-line) var(--column-start),
 36 |             var(--g-color-line) var(--column-start-line),
 37 |             var(--g-color-column) var(--column-start-line),
 38 |             var(--g-color-column) var(--column-end),
 39 |             var(--g-color-line) var(--column-end),
 40 |             var(--g-color-line) var(--column-end-line),
 41 |             var(--g-color-gutter) var(--column-end-line),
 42 |             var(--g-color-gutter) var(--gutter-end)
 43 |         );
 44 |     --g-gradient-baseline:
 45 |         repeating-linear-gradient(
 46 |             to bottom,
 47 |             var(--g-color-baseline),
 48 |             var(--g-color-baseline) var(--line-thickness),
 49 |             transparent var(--line-thickness),
 50 |             transparent var(--g-baseline-height)
 51 |         );
 52 | }
 53 | 
 54 | 
 55 | .bricky-module-input .nav-tabs > li i {
 56 |     display: none;
 57 | }
 58 | .bricky-module-input .nav-tabs > li span {
 59 |     display: inline-block;
 60 | }
 61 | @media (max-width: 767px) {
 62 |     .bricky-module-input .nav-tabs > li i {
 63 |         display: inline-block;
 64 |         padding: 0 5px;
 65 |         font-style: normal;
 66 |     }
 67 |     .bricky-module-input .nav-tabs > li span {
 68 |         display: none;
 69 |     }
 70 | }
 71 | 
 72 | .bricky-module-input-grid-item,
 73 | .bricky-module-input-grid-item-view {
 74 |     display: block;
 75 | }
 76 | .bricky-module-input-grid-item input {
 77 |     display: none;
 78 | }
 79 | 
 80 | .bricky-module-input-grid-item-view {
 81 |     display: flex;
 82 |     flex-wrap: nowrap;
 83 |     width: 100%;
 84 |     padding: 110px;
 85 |     border: 1px solid transparent;
 86 |     border-color: hsla(var(--g-color), .3);
 87 |     transition: border-color 200ms ease-in-out;
 88 |     cursor: pointer;
 89 | }
 90 | .bricky-module-input-grid-item:hover > .bricky-module-input-grid-item-view {
 91 |     border-color: hsla(var(--g-color), .8);
 92 | }
 93 | .bricky-module-input-grid-item input:checked + .bricky-module-input-grid-item-view {
 94 |     border-color: hsla(var(--g-color), 1) !important;
 95 | }
 96 | 
 97 | .bricky-module-input-grid-item-view > span {
 98 |     position: relative;
 99 |     display: inline-block;
100 |     width: 100%;
101 |     height: 70px;
102 |     background-color: hsla(var(--g-color), .1);
103 |     border: 5px solid #fff;
104 | }
105 | .bricky-module-input-grid-item input:checked + .bricky-module-input-grid-item-view > span {
106 |     background-color: hsla(var(--g-color), .2);
107 | }
108 | .bricky-module-input-grid-item-view span::after {
109 |     position: absolute;
110 |     left: 0;
111 |     top: 50%;
112 |     transform: translateY(-50%);
113 |     padding-left: 10px;
114 |     color: hsla(var(--g-color), .8);
115 |     font-size: 16px;
116 | }
117 | .bricky-module-input-grid-item-view span:nth-child(1)::after {
118 |     content: '1';
119 | }
120 | .bricky-module-input-grid-item-view span:nth-child(2)::after {
121 |     content: '2';
122 | }
123 | .bricky-module-input-grid-item-view span:nth-child(3)::after {
124 |     content: '3';
125 | }
126 | .bricky-module-input-grid-item-view span:nth-child(4)::after {
127 |     content: '4';
128 | }
129 | 
130 | [data-bricky-grid="10-2"] > .bricky-module-input-grid-item-view span:nth-child(1),
131 | [data-bricky-grid="2-10"] > .bricky-module-input-grid-item-view span:nth-child(2) {
132 |     width: 83.3333%;
133 | }
134 | [data-bricky-grid="9-3"] > .bricky-module-input-grid-item-view span:nth-child(1),
135 | [data-bricky-grid="3-9"] > .bricky-module-input-grid-item-view span:nth-child(2) {
136 |     width: 75%;
137 | }
138 | [data-bricky-grid="8-4"] > .bricky-module-input-grid-item-view span:nth-child(1),
139 | [data-bricky-grid="4-8"] > .bricky-module-input-grid-item-view span:nth-child(2),
140 | [data-bricky-grid="6-3-3"] > .bricky-module-input-grid-item-view span:nth-child(1),
141 | [data-bricky-grid="3-6-3"] > .bricky-module-input-grid-item-view span:nth-child(2),
142 | [data-bricky-grid="3-3-6"] > .bricky-module-input-grid-item-view span:nth-child(3) {
143 |     width: 66.6667%;
144 | }
145 | [data-bricky-grid="7-5"] > .bricky-module-input-grid-item-view span:nth-child(1),
146 | [data-bricky-grid="5-7"] > .bricky-module-input-grid-item-view span:nth-child(2) {
147 |     width: 58.3333%;
148 | }
149 | [data-bricky-grid="7-5"] > .bricky-module-input-grid-item-view span:nth-child(2),
150 | [data-bricky-grid="5-7"] > .bricky-module-input-grid-item-view span:nth-child(1) {
151 |     width: 41.6667%;
152 | }
153 | [data-bricky-grid="8-4"] > .bricky-module-input-grid-item-view span:nth-child(2),
154 | [data-bricky-grid="4-8"] > .bricky-module-input-grid-item-view span:nth-child(1),
155 | [data-bricky-grid="6-3-3"] > .bricky-module-input-grid-item-view span:nth-child(2),
156 | [data-bricky-grid="6-3-3"] > .bricky-module-input-grid-item-view span:nth-child(3),
157 | [data-bricky-grid="3-6-3"] > .bricky-module-input-grid-item-view span:nth-child(1),
158 | [data-bricky-grid="3-6-3"] > .bricky-module-input-grid-item-view span:nth-child(3),
159 | [data-bricky-grid="3-3-6"] > .bricky-module-input-grid-item-view span:nth-child(1),
160 | [data-bricky-grid="3-3-6"] > .bricky-module-input-grid-item-view span:nth-child(2),
161 | [data-bricky-grid="4-4-4"] > .bricky-module-input-grid-item-view span {
162 |     width: 33.3333%;
163 | }
164 | [data-bricky-grid="9-3"] > .bricky-module-input-grid-item-view span:nth-child(2),
165 | [data-bricky-grid="3-9"] > .bricky-module-input-grid-item-view span:nth-child(1) {
166 |     width: 25%;
167 | }
168 | [data-bricky-grid="10-2"] > .bricky-module-input-grid-item-view span:nth-child(2),
169 | [data-bricky-grid="2-10"] > .bricky-module-input-grid-item-view span:nth-child(1) {
170 |     width: 16.6667%;
171 | }
172 | 
173 | 
174 | .bricky-module-input .nav-tabs > li i {
175 |     display: none;
176 | }
177 | .bricky-module-input .nav-tabs > li span {
178 |     display: inline-block;
179 | }
180 | 
181 | .bricky-module-input li:hover {
182 |     cursor: pointer;
183 | }
184 | 
185 | @media (max-width: 767px) {
186 |     .bricky-module-input .nav-tabs > li i {
187 |         display: inline-block;
188 |         padding: 0 5px;
189 |         font-style: normal;
190 |     }
191 |     .bricky-module-input .nav-tabs > li span {
192 |         display: none;
193 |     }
194 | }
195 | 
196 | .bricky-module-input-grid-item,
197 | .bricky-module-input-grid-item-view {
198 |     display: block;
199 | }
200 | .bricky-module-input-grid-item input {
201 |     display: none;
202 | }
203 | 
204 | .bricky-module-input-grid-item-view {
205 |     display: flex;
206 |     flex-wrap: nowrap;
207 |     width: 100%;
208 |     padding: 10px 5px;
209 |     border: 1px solid transparent;
210 |     border-color: hsla(var(--g-color), .3);
211 |     transition: border-color 200ms ease-in-out;
212 |     cursor: pointer;
213 |     max-width: 450px;
214 |     margin: 0 auto;
215 | }
216 | .bricky-module-input-grid-item:hover > .bricky-module-input-grid-item-view {
217 |     border-color: hsla(var(--g-color), .8);
218 | }
219 | .bricky-module-input-grid-item input:checked + .bricky-module-input-grid-item-view {
220 |     border-color: hsla(var(--g-color), 1) !important;
221 | }
222 | 
223 | .bricky-module-input-grid-item-view > span {
224 |     position: relative;
225 |     display: inline-block;
226 |     width: 100%;
227 |     height: 60px;
228 |     background-color: hsla(var(--g-color), .1);
229 |     border-left: 5px solid #fff;
230 |     border-right: 5px solid #fff;
231 | }
232 | .bricky-module-input-grid-item input:checked + .bricky-module-input-grid-item-view > span {
233 |     background-color: hsla(var(--g-color), .2);
234 | }
235 | .bricky-module-input-grid-item-view span::after {
236 |     position: absolute;
237 |     left: 0;
238 |     top: 50%;
239 |     transform: translateY(-50%);
240 |     padding-left: 10px;
241 |     color: hsla(var(--g-color), .8);
242 |     font-size: 16px;
243 | }
244 | .bricky-module-input-grid-item-view span:nth-child(1)::after {
245 |     content: '1';
246 | }
247 | .bricky-module-input-grid-item-view span:nth-child(2)::after {
248 |     content: '2';
249 | }
250 | .bricky-module-input-grid-item-view span:nth-child(3)::after {
251 |     content: '3';
252 | }
253 | .bricky-module-input-grid-item-view span:nth-child(4)::after {
254 |     content: '4';
255 | }
256 | 
257 | [data-bricky-grid="10-2"] > .bricky-module-input-grid-item-view span:nth-child(1),
258 | [data-bricky-grid="2-10"] > .bricky-module-input-grid-item-view span:nth-child(2) {
259 |     width: 83.3333%;
260 | }
261 | [data-bricky-grid="9-3"] > .bricky-module-input-grid-item-view span:nth-child(1),
262 | [data-bricky-grid="3-9"] > .bricky-module-input-grid-item-view span:nth-child(2) {
263 |     width: 75%;
264 | }
265 | [data-bricky-grid="8-4"] > .bricky-module-input-grid-item-view span:nth-child(1),
266 | [data-bricky-grid="4-8"] > .bricky-module-input-grid-item-view span:nth-child(2),
267 | [data-bricky-grid="6-3-3"] > .bricky-module-input-grid-item-view span:nth-child(1),
268 | [data-bricky-grid="3-6-3"] > .bricky-module-input-grid-item-view span:nth-child(2),
269 | [data-bricky-grid="3-3-6"] > .bricky-module-input-grid-item-view span:nth-child(3) {
270 |     width: 66.6667%;
271 | }
272 | [data-bricky-grid="7-5"] > .bricky-module-input-grid-item-view span:nth-child(1),
273 | [data-bricky-grid="5-7"] > .bricky-module-input-grid-item-view span:nth-child(2) {
274 |     width: 58.3333%;
275 | }
276 | [data-bricky-grid="7-5"] > .bricky-module-input-grid-item-view span:nth-child(2),
277 | [data-bricky-grid="5-7"] > .bricky-module-input-grid-item-view span:nth-child(1) {
278 |     width: 41.6667%;
279 | }
280 | [data-bricky-grid="8-4"] > .bricky-module-input-grid-item-view span:nth-child(2),
281 | [data-bricky-grid="4-8"] > .bricky-module-input-grid-item-view span:nth-child(1),
282 | [data-bricky-grid="6-3-3"] > .bricky-module-input-grid-item-view span:nth-child(2),
283 | [data-bricky-grid="6-3-3"] > .bricky-module-input-grid-item-view span:nth-child(3),
284 | [data-bricky-grid="3-6-3"] > .bricky-module-input-grid-item-view span:nth-child(1),
285 | [data-bricky-grid="3-6-3"] > .bricky-module-input-grid-item-view span:nth-child(3),
286 | [data-bricky-grid="3-3-6"] > .bricky-module-input-grid-item-view span:nth-child(1),
287 | [data-bricky-grid="3-3-6"] > .bricky-module-input-grid-item-view span:nth-child(2),
288 | [data-bricky-grid="4-4-4"] > .bricky-module-input-grid-item-view span {
289 |     width: 33.3333%;
290 | }
291 | [data-bricky-grid="9-3"] > .bricky-module-input-grid-item-view span:nth-child(2),
292 | [data-bricky-grid="3-9"] > .bricky-module-input-grid-item-view span:nth-child(1) {
293 |     width: 25%;
294 | }
295 | [data-bricky-grid="10-2"] > .bricky-module-input-grid-item-view span:nth-child(2),
296 | [data-bricky-grid="2-10"] > .bricky-module-input-grid-item-view span:nth-child(1) {
297 |     width: 16.6667%;
298 | }
299 | 
300 | 
301 | 
302 | .bricky-module-input .mblock_wrapper .sortitem {
303 |     margin: 15px 0 20px 0;
304 |     background: #eee;
305 |     border: 1px solid #ddd;
306 | }
307 | 
308 | .bricky-module-input .tab-content legend {
309 |     font-size: 16px !important;
310 |     margin: 0;
311 |     width: 100%;
312 |     color: #222;
313 |     font-weight: normal;
314 |     background: #none;
315 |     margin-bottom: 20px;
316 |     border-bottom: 2px solid #ddd;
317 | }
318 | 
319 | .bricky-module-input .tab-content label {
320 |     color: #222;
321 |     font-size: 12px;
322 |     font-weight: 400;
323 |     text-align: right;
324 |     margin-top: 10px;
325 | }
326 | 
327 | .bricky-module-input .tab-content input,
328 | .bricky-module-input .tab-content textarea{
329 |     background: #fff;
330 | }
331 | 
332 | .bricky-module-input fieldset {
333 |     clear: both;
334 | }
335 | .bricky-module-input {
336 | 
337 | }
338 | 
339 | .bricky-module-input .rex-page-nav {
340 |     height: 57px;
341 |     overflow: hidden;
342 | }
343 | 
344 | .bricky-module-input .rex-page-nav .nav-tabs > li > a:not(.btn) {
345 |     border: none;
346 |     opacity: 0.8;
347 | }
348 | 
349 | .nav-tabs li {
350 | 
351 | }
352 | 
353 | .bricky-module-input .rex-page-nav .nav-tabs > li > a:not(.btn):hover {
354 |     opacity: 1;
355 |     color: #000;
356 | }
357 | .bricky-module-input .rex-page-nav .nav-tabs > li.active > a:not(.btn) {
358 |     opacity: 1;
359 | }
360 | 
361 | .bricky-module-input .rex-page-nav .nav-tabs li > a{
362 |     color: #31404F;
363 |     background-color: #ddd !important;
364 |     font-size: 12px;
365 |     padding: 10px;
366 |     border-radius: 0 !important;
367 |     border: 1px solid #bbb !important;
368 | }
369 | .bricky-module-input  .rex-page-nav .nav-tabs li.active > a{
370 |     height: 45px;
371 |     color: #000;
372 |     background-color: #f5f5f5 !important;
373 |     border-bottom: none !important;
374 | }
375 | 
376 | 
377 | .bricky-module-input .tab-content {
378 |     margin-top: -40px;
379 |     border: 1px solid #bbb;
380 |     background: #f5f5f5;
381 |     padding: 15px 10px 0 10px;
382 | }
383 | 
384 | .bricky-module-input .select_bricky {
385 |     float: right;
386 |     margin-right: 130px;
387 | }
388 | .bricky-module-input .select_bricky .rex-select-style{
389 |     font-size: 10px;
390 |     line-height: 11px;
391 |     margin-top: -11px;
392 |     height: 24px;
393 |     width: 200px;
394 |     opacity: 0.5;
395 |     border-radius: 2px;
396 |     border: 1px solid #c1c9d4;
397 | }
398 | .bricky-module-input .select_bricky .rex-select-style:hover {
399 |     opacity: 1;
400 | }
401 | 
402 | .bricky-module-input .select_bricky label {
403 |     display: none;
404 | }
405 | 
406 | .bricky-module-input .input_info {
407 |     margin-top: 16px;
408 |     border-left: 1px solid #ddd;
409 | }
410 | 
411 | .bricky_backend_output .bricky_info {
412 |     background: #43b494;
413 |     color: #fff;
414 |     font-size: 12px;
415 |     padding: 8px;
416 | }
417 | 
418 | 
419 | 
420 | .bricky_backend_output {
421 |     border: 1px solid #bbb;
422 |     background: #f5f5f5;
423 |     margin-bottom: 32px;
424 |     padding: 16px;
425 |     min-height: 120px;
426 | 
427 | }
428 | 
429 | .bricky_backend_output h4 {
430 |     font-size: 30px !important;
431 |     margin: -5px 0 -60px 0;
432 |     color: #ddd;
433 |     font-weight: bold;
434 | 
435 |     text-align: right;
436 | }
437 | 
438 | .bricky_backend_output h3 {
439 |     font-size: 16px !important;
440 |     font-weight: normal;
441 |     padding: 24px 0 8px 0;
442 |     border-bottom: 1px solid #ddd;
443 | }
444 | 
445 | 
446 | .bricky_backend_output label {
447 |     font-size: 12px;
448 |     font-weight: normal;
449 |     margin-top: -6px;
450 |     color: #777;
451 | }
452 | 
453 | .bricky_backend_output .alert {
454 |     margin: 0;
455 |     padding: 0;
456 |     font-weight: bold;
457 |     color: #f00;
458 | }
459 | 
460 | .bricky_backend_output .col-sm-9 {
461 |     border-left: 1px solid #ddd;
462 | }
463 | 
464 | .brick_active {
465 |     border: 1px solid red;
466 | }


--------------------------------------------------------------------------------