Contao-Camp 2024
Ergebnis 1 bis 1 von 1

Thema: [RockSolid Custom Elements] Progressbar

  1. #1
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.849
    Contao-Projekt unterstützen

    Support Contao

    Standard [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


    durch Eingabe eines eigenen Prozentwertes


    durch Eingabe eines eigenen Berechnungswertes




    rsce_progressbar_01.jpg
    rsce_progressbar_02.jpg
    rsce_progressbar_03.jpg
    Geändert von derRenner (17.09.2021 um 09:55 Uhr)
    Grüsse
    Bernhard


Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •