Älteres Plugin auffrischen: elBySel funktioniert leider nicht

  • Affected Version
    WoltLab Suite 5.4

    Hallo zusammen,


    ich bin kein Entwickler und versuche ein älteres Plugin ein wenig zu erweitern. Ich dachte Anfangs das wäre simple, aber dem scheint nicht so.

    Der eigentliche Entwickler ist aus Zeitgrünen schon länger nicht mehr zugegen.


    Das ganze ist ein BBCode, welches mit imgur.com kommuniziert und entsprechend Bilder hochladen kann.

    Das ganze klappt auch aktuell im WSC 5.4, nur eben die Erweiterung funktioniert nicht.


    Das Modal sieht aktuell so aus und funktioniert ohne meine Erweiterung Problemlos.

    Ich habe nun folgendes hinzugefügt:

    JavaScript
                        + '<dl>'
                            + '<dt><label for="categoryID">Bildgröße</label></dt>'
                                + '<dd class="floated">'
                                    + '<label><input type="radio" name="imagesize" value="t"> Klein</label>'
                                    + '<label><input type="radio" name="imagesize" value="m" checked=""> Mittel</label>'
                                    + '<label><input type="radio" name="imagesize" value="l"> Groß</label>'
                                    + '<label><input type="radio" name="imagesize" value="h"> Original</label>'
                                + '</dd>'
                        + '</dl>'

    Soweit so gut. Bei imgur.com kann man an die Bilddatei Buchstaben setzen, wie in den value zu sehen. Diese geben das Bild dann entsprechend in einer anderen Größe aus. Diese Möglichkeit wollte ich eben mit verbauen, dass man das direkt mit anfügen kann.


    Mir sagte nun jemand, dass ich var imagesize = elBySel('input[name=imagesize]:checked'); nutzen könne, aber ich weiß weder wo das hin soll, noch wie ich diesen Bereich dafür modifizieren müsste:


    Alles was ich versucht habe, ergab sowas wie [object HTMLInputElement] oder sö ähnlich.


    Dann dachte ich mir, dass ich die ImgurUploadAction.class.php bearbeite und habe aus:

    PHP
            if ($returnValues !== null) {
                // send JSON-encoded response
                header('Content-type: application/json');
                echo JSON::encode($returnValues);
            }

    Das gemacht:

    PHP
            if ($returnValues !== null) {
                // send JSON-encoded response
                header('Content-type: application/json');
                $image = JSON::encode($returnValues);
                $fileArray = pathinfo($image);
                echo $fileArray['dirname'].'/'.$fileArray['filename'].'l'.'.'.$fileArray['extension'];
            }

    Das klappt auch in dem ich dann .'l'. den Buchstabe ändere.


    Daher meine Frage: WIe kann ich das ganze innerhalb des Javascript abfragen und die URL entsprechend mit dem value ergänzen oder wenigstens an die CLASS übergeben?

    Danke im Voraus.

    Mit freundlichen Grüßen

    Sunny Cuewitzki

  • elBySel sollte gar nicht mehr genutzt werden, nutze stattdessen


    Code
    document.querySelector('input[name=imagesize]:checked')


    Und was du suchst, ist der Wert des Elements, also value und nicht das Element selbst.

  • elBySel sollte gar nicht mehr genutzt werden, nutze stattdessen


    Code
    document.querySelector('input[name=imagesize]:checked')

    Vollständigkeitshalber hier noch der Migrations-Guide: https://docs.woltlab.com/5.4/m…for-deprecated-components


    Ansonsten steht auch direkt in der Doku bei den einzelnen Funktionen, was die im Hintergrund machen: https://docs.woltlab.com/5.4/javascript/helper-functions/

  • Vielen Dank dafür,


    aber auch mit

    Code
    document.querySelector('input[name=imagesize]:checked')

    erhalte ich [object HTMLInputElement]

    Daher meine Frage: WIe kann ich das ganze innerhalb des Javascript abfragen und die URL entsprechend mit dem value ergänzen oder wenigstens an die CLASS übergeben?

    Das verstehe ich absolut nicht.

    Das habe ich

    Code
    var imagesize = document.querySelector('input[name=imagesize]:checked');

    über dem hier stehen

    Code
    var html = '<img src="' + WCF.String.escapeHTML(source) + '">';

    und es für den Test so abgewandelt

    Code
    var html = '<img src="' + WCF.String.escapeHTML(imagesize) + '">';

    Leider erziele ich damit gar nichts.

    Mit freundlichen Grüßen

    Sunny Cuewitzki

    • Official Post

    Statt

    HTML
    var html = '<img src="' + WCF.String.escapeHTML(imagesize) + '">';

    sollte es

    HTML
    var html = '<img src="' + WCF.String.escapeHTML(imagesize.value) + '">';

    lauten :)

    Alexander Ebert
    Senior Developer WoltLab® GmbH

  • var html = '<img src="' + WCF.String.escapeHTML(imagesize.value) + '">';

    Ich brech ab ... :huh:

    Und ich bin gestern sicher einige Jahre gealtert... :D


    Habe zu Danken, es funktioniert :thumbup:

    Mit freundlichen Grüßen

    Sunny Cuewitzki