[RockSolid Custom Elements] Progressbar

[RockSolid Custom Elements] Progressbar

erstellt eine „statische“ Progressbar mit der Möglichkeit die Balkenlänge
- automatisch aus einem fixen Wert aus dem Template zu errechnen
- durch Eingabe eines eigenen Prozentwertes zu errechnen
- durch Eingabe eines eigenen Berechnungswertes zu errechnen

Es stehen zwei Felder zur Eingabe von 'Wert' und 'Value/Bezeichnung' zur Verfügung.

Webprojekt zur Ansicht

PHP-Code:

---

<?php

    ## rsce_progressbar_config.php

return array(
    'label' => [
        'de' => ['Progressbar','Erstellt eine Progressbar'],
    ],
    'types' => ['content','module'],
    'standardFields' => ['cssID'], 
    'contentCategory' => 'WERBEpanorama', 
    'moduleCategory' => 'WERBEpanorama', 
    'fields' => [ 
        'labelvalue' => [
            'label' => [
                'de' => ['Wert','Geben Sie den Wert ein, der angezeigt werden soll und die Länge des Balkens darstellt.'],
            ],
            'inputType' => 'text',
            'eval' => [
                'tl_class' => 'w50',
            ],
        ],
        'labeltext' => [
            'label' => [
                'de' => ['Titel','Geben Sie die Bezeichnung für die Progressbar ein.'],
            ],
            'inputType' => 'text',
            'eval' => [
                'tl_class' => 'w50',
            ],
        ],
        'mode' => [
            'label' => [
                'de' => ['Berechnungsmodus','Wählen Sie aus, wie der Fortschrittsbalken berechnet wird. Bei \'automatisch\' 
                wird der im Template rsce_progressbar.html5 verwendete Wert zur Berechnung verwendet. Standardwert ist
                200 eingestellt.'],
            ],
            'inputType' => 'radio',
            'options' => [
                'automatic' => 'automatisch, durch den Wert aus dem Template',
                'percent' => 'durch Eingabe eines eigenen Prozentwertes',
                'ownval' => 'durch Eingabe eines eigenen Berechnungswertes',
            ],
            'default' => 'automatic',
            'eval' => [
                'tl_class' => 'w50 clr m12',
            ],
        ],

        'percent' => [
            'label' => [
                'de' => ['Prozent','Geben Sie die Länge des Balkens in % an. Zahl zwischen 0 und 100 - ohne Eingabe von \'%\'.'],
            ], 
            'inputType' => 'text',  
            'dependsOn' => [
                'field' => 'mode',
                'value' => 'percent',
            ],
            'eval' => [ 
                'tl_class' => 'w50 clr',
                'maxlength' => 3,
                'rgxp' => 'digit',
            ], 
            'default' => '50',
        ], 

        'ownval' => [
            'label' => [
                'de' => ['eigener Berechnungswert','Dieser Wert überschreibt den Standardwert aus dem Template \'rsce_progressbar.html5\'.
                Er dient zur Berechnung der Länge des Balkens.'],
            ],
            'inputType' => 'text',
            'dependsOn' => [
                'field' => 'mode',
                'value' => 'ownval',
            ],
            'eval' => [ 
                'tl_class' => 'w50 clr',
                'rgxp' => 'digit',
            ], 
            'default' => '200',
        ],
    ],
);

---

PHP-Code:

---

<?php

    ## rsce_progressbar.html5

    ## change this value foR your experience
    $base = 200;
    ## end of change

    if ($this->mode == 'ownval') {
        $base = $this->ownval;
    }    

    $val = $this->labelvalue;
    $percent = round($val / $base);
    
    $cssCanvas = [
        'progressbar',
        $this->class,
    ];

?>
<div class="progressbarwrapper">
    <div class="<?php echo implode(' ', $cssCanvas) ?>"<?php echo $this->cssID ?>>
        <span><?php echo $this->labeltext ?></span>
        <span><?php echo $this->labelvalue ?></span>

        <?php if ($this->mode == 'automatic'): ?>
        <progress class="progress" value="<?php echo $percent ?>" max="100"></progress>
        <?php elseif ($this->mode == 'ownval'): ?>
        <progress class="progress" value="<?php echo $percent ?>" max="100"></progress>
        <?php else: ?>
        <progress class="progress" value="<?php echo $this->percent ?>" max="100"></progress>
        <?php endif; ?>
    </div>    
</div>

---

Backendansichten:

automatisch, durch den Wert aus dem Template
https://community.contao.org/de/atta...1&d=1631864679

durch Eingabe eines eigenen Prozentwertes
https://community.contao.org/de/atta...2&d=1631864693

durch Eingabe eines eigenen Berechnungswertes
https://community.contao.org/de/atta...3&d=1631864702



Anhang 24911
Anhang 24912
Anhang 24913