Anpassungen für jscolor

Mit Ilch 2.2.0 wurde neben den größeren Änderungen, wie der Wechsel auf Bootstrap 5 und CKEditor 5 auch jscolor auf Version 2.5.2 aktualisiert. Hier sind kleinere Anpassungen nötig, die hier anhand der nötigen Änderungen am Kalender-Modul erläutert werden. Sollten Sie jscolor in einer anderen Art nutzen, ziehen Sie bitte die offizielle Dokumentation für eventuell nötige Änderungen zu Rate.

Dokumentation von jscolor: https://jscolor.com/docs/

Beim Kalendar-Modul und auch allen anderen Nutzungen von jscolor in Ilch musste beim input-Element jediglich das "data-jscolor"-Attribut (data-jscolor="") ergänzt, sowie im Javascript-Code für die Schaltfläche zum Zurücksetzen der Eingabe die Eigenschaft von "color" zu "jscolor" (jscolor.fromString(...)) umbenannt werden. Der Dateiname von jscolor hat sich ebenfalls geändert. Daher muss anstatt "jscolor.js" nun "jscolor.min.js" eingebunden werden.

Vorher:

<div class="row mb-3<?=$this->validation()->hasError('color') ? ' has-error' : '' ?>">
    <label for="color" class="col-xl-2 col-form-label">
        <?=$this->getTrans('color') ?>:
    </label>
    <div class="col-xl-4 input-group date">
        <input class="form-control color {hash:true}"
               id="color"
               name="color"
               value="<?=$this->escape($this->originalInput('color', ($entry->getId()?$entry->getColor():'#32333B'))) ?>">
        <span class="input-group-text">
            <span class="fa-solid fa-arrow-rotate-left" onclick="document.getElementById('color').color.fromString('32333B')"></span>
        </span>
    </div>
</div>

<script src="<?=$this->getStaticUrl('js/jscolor/jscolor.js') ?>"></script>

Nachher:

<div class="row mb-3<?=$this->validation()->hasError('color') ? ' has-error' : '' ?>">
    <label for="color" class="col-xl-2 col-form-label">
        <?=$this->getTrans('color') ?>:
    </label>
    <div class="col-xl-4 input-group date">
        <input class="form-control color {hash:true}"
               id="color"
               name="color"
               data-jscolor=""
               value="<?=$this->escape($this->originalInput('color', ($entry->getId()?$entry->getColor():'#32333B'))) ?>">
        <span class="input-group-text">
            <span class="fa-solid fa-arrow-rotate-left" onclick="document.getElementById('color').jscolor.fromString('32333B')"></span>
        </span>
    </div>
</div>

<script src="<?=$this->getStaticUrl('js/jscolor/jscolor.min.js') ?>"></script>