Die wunderbare Welt des Mongke K.

[Tohuwabohu]

Wann bringst du das auf Spotify raus? Civforum muss alle Sparten besetzen.

[Mongke Khan]

Neue Server-Features

Beim Erstellen der aktuellen Freitagsumfrage habe ich über ein paar Features nachgedacht, die ich im Forum ganz nützlich fände. Und über ein paar Quatschfeatures, klar. Als sehr, sehr guter Informatiker weiß ich auch prinzipiell wie man diese (zumindest manche davon) umsetzen könnte und irgendwann ~3 BC hab ich damit auch schon herumgespielt. Prinzipiell muss man sich nur anschauen, wie das HTML-Dokument aussieht und per JavaScript nach dem Laden der Seite selbiges manipulieren.

Wenn man zum Beispiel User ignoriert, sieht das normalerweise so aus:



Das ist nicht so ganz, was ich mir unter "Ignorieren" vorstelle. Vielleicht will man stattdessen überhaupt nicht sehen, dass der betreffende User etwas gepostet hat, weil der Puls sonst auf 180 hochschnellt und man versucht ist, wider besseren Wissens zu schauen, welche Stuss nor... der User diesmal geschrieben hat. Außerdem nimmt die Meldung darüber, dass da was steht, was einen nicht interessiert, relativ viel Platz auf dem Bildschirm ein. Das ist immerhin knapp ein Drittel eines richtigen Beitrags.

Für den Browser ist ein derartiger Beitrag sogar noch länger:

Achtung Spoiler:

<li class="postbitignored postbitim" id="post_9465678">
    <div class="posthead">
        <span class="date">Gestern, <span class="time">20:49</span></span>
        <input type="checkbox" class="postimod" id="post_imod_checkbox_9465678">
    </div>
    <div class="userinfo">
        <div class="popupmenu memberaction" id="yui-gen43">
     <a class="username offline popupctrl"  href="member.php?10855-nordstern" title="nordstern ist offline"  id="yui-gen45"><strong>nordstern</strong></a>
    <ul class="popupbody memberaction_body" id="yui-gen44">
        <li class="left">
            <a href="member.php?10855-nordstern" class="siteicon_profile">
                Profil
            </a>
        </li>
        <li class="right">
             <a  href="search.php?do=finduser&amp;userid=10855&amp;contenttype=vBForum_Post&amp;showposts=1"  class="siteicon_forum" rel="nofollow">
                Beiträge anzeigen
            </a>
        </li>
        <li class="left">
            <a href="private.php?do=newpm&amp;u=10855" class="siteicon_message" rel="nofollow">
                Private Nachricht
            </a>
        </li>
        <li class="left">
            <a href="profile.php?do=addlist&amp;userlist=buddy&amp;u=10855" class="siteicon_add">
                Als Kontakt hinzufügen
            </a>
        </li>
        <li class="right">
            <a href="sendmessage.php?do=mailmember&amp;u=10855" class="siteicon_email">
                E-Mail schicken
            </a>
        </li>
    </ul>
</div>
        <p class="usertitle">Registrierter Benutzer</p>
    </div>

    <div class="postbody">
        <div class="postrow">
        
            <h2 class="title">
                <label>
                     Diese Nachricht wird nicht angezeigt, da sich  <strong>nordstern</strong> auf deiner <a  href="profile.php?do=ignorelist"  target="_blank">Ignorier-Liste</a> befindet.
                </label>
            </h2>
            <div class="content">
                 <div class="floatcontainer"><a  href="showthread.php?90554-Russlands-Krieg-gegen-die-Ukraine&amp;p=9465678#post9465678"  target="_blank" rel="nofollow" onclick="return  display_post(9465678);">Beitrag anzeigen</a></div>
                <blockquote class="postcontent messageignored">
                     <div class="smallfont remove_ignore"><a  href="profile.php?userlist=ignore&amp;do=removelist&amp;u=10855">Benutzer  von Ignorier-Liste entfernen</a></div>
                </blockquote>
            </div>
        </div>
        <div class="nodecontrols">
             <a class="postcounter viewpostlink textcontrol"  href="showthread.php?90554-Russlands-Krieg-gegen-die-Ukraine&amp;p=9465678&amp;viewfull=1#post9465678"  target="_blank" rel="nofollow" onclick="return  display_post(9465678);">Beitrag anzeigen</a>
        </div>
    </div>
    <hr>
</li>

Es handelt sich um einen Listeneintrag in der Liste aller Beiträge, die auf der Seite zu sehen sind. Damit dieser korrekt dargestellt wird, ist er der Klasse "postbitignored" zugeordnet. Diese Klasse gibt zum Beispiel die Hintergrundfarbe vor, weil das sonst anscheinend ein komisches Grau wäre (das kann man interaktiv ausprobieren, wenn man F12 drückt und die entsprechende Eigenschaft deaktiviert):



Wenn man nun dieser Klasse die Eigenschaft "display: none" hinzufügt, dann...



...wird der Post gar nicht mehr angezeigt

Händisch ist das etwas mühselig, vor allem wenn es mehrere ignorierte Beiträge eines Users auf einer Seite gibt. Ein Skript, das ignorierte User wirklich ausblendet, könnte so aussehen:

(function() {
    // JavaScript weniger scheiße machen
    'use strict';

    function hideIgnoredPosts() {
        // Alle Elemente der Seite finden, die der Klasse postbitignored angehören
        const ignoredPosts = document.querySelectorAll('.postbitignored');
        // display: none für diese setzen
        ignoredPosts.forEach(post => {
            post.style.display = 'none'; 
        });
    }

    // Die Funktion ausführen
    hideIgnoredPosts();
})();

Aus Gründen, auf die ich vielleicht nur auf Nachfrage eingehe, ist es (zumindest bei Firefox) nicht so einfach, den Browser dazu zu bringen, sich dieses Skript zu merken. Mit einem Addon wie Tampermonkey geht es aber relativ einfach. Man muss nur ein neues Skript hinzufügen und den Header befüllen, damit es auf den richtigen Webseiten (also civforum.de, alle anderen Webseiten sind Abfall ) ausgeführt wird:



Hat man das Prinzip verstanden, kann man auch recht einfach den verbotenen Knopf ausblenden:

Achtung Spoiler:

(function() {
    'use strict';

    const targetId = 'menu_mty2_685';
    function hideForbiddenButton() {
        const forbiddenButton = document.getElementById(targetId);
        forbiddenButton.style.display = 'none';
    }
    hideForbiddenButton();

})();

Und dann kann man anfangen zu fantasieren, was für Features noch cool wären. Man kann ja alles programmieren! Wie wäre es mit einem Skript, das sehr lange Beiträge von ruc... von (einzelnen) Usern zusammenschrumpft und dieser erst auf Button-Klick expandiert? Oder ein Skript, das als Emo anzeigt?
Man kann auch größer denken! Als Storyleser stört mich beispielsweise, das im Shakkeline-Style auf querformatigen Monitoren Screenshots oft so weit zusammengestaucht werden, dass man Details nicht mehr erkennen kann. Gleichzeitig mag ich die breiten Forenstile nicht, weil eine einzelne Zeile Text dann unglaublich in die Länge gezogen wird (gibt ja nen Grund, warum Papier und Bücher hochformatige Seitenverhältnisse haben). Wie wäre es also mit einem Skript, welches dasjenige Bild vergrößert anzeigt, über welches man die Maus bewegt? Und wenn man das auch noch anpinnen könnte, um weiterzulesen oder per Pfeiltaste durch die anderen Bilder scrollen könnte, wäre das ziemlich

Man kann sich aber auch als Nicht-Informatiker wohl schon denken, dass das etwas aufwändiger ist. Der Aufwand hat mich bisher auch immer davon abgehalten, so etwas umzusetzen. Die Logik ist überschaubar, komplex ist die Problemstellung nicht. Aber man braucht dafür JavaScript. Und ich... mag JavaScript nicht besonders.

Kurzer JavaScript-Rant am Rande:

Achtung Spoiler:

Gefühlt muss man bei JavaScript und diesem Webdreck sehr viel wissen, um sehr wenig zu machen.
Eine Zeile wie "document.querySelectorAll('.postbitignored');" setzt voraus, dass man weiß, wie man Klassen selektiert (mit führendem "."). Es gibt ja auch die Funktion getElementsByClassname. Die klingt mehr nach dem, was ich machen will. Aber wenn ich das im Skript benutze, geht es nicht. Dann googlet man. Dann findet man eine Antwort auf StackOverflow, die so halb passt. Dann probiert man das. Dann geht es nicht. Dann kriegt man keine sinnvollen Informationen, warum, weil alles immer irgendwie im Browser irgendwelche Dinge tut. Oder auch nicht. Vielleicht steht auf der Konsole was. Vielleicht auch nicht. Dann hat man nen Typo im Variablennamen und weil das Zeug nicht kompiliert wird, wird man auch nicht darauf hingewiesen. Man müsste eigentlich viel mehr reguläre Ausdrücke benutzen, weil man ständig Patternmatching betreibt. Aber die Syntax dafür nervt. Dann geht was nicht, weil man irgendein Event observen muss. Dann hat man ein Ergebnis und es ist hässlich. Dann muss man nen Haufen Style-Attribute setzen und rausfinden, wie die heißen und was sinnvolle Werte sind. Warum gibt es drölf Varianten, Länge und Breite anzugeben? Was bedeutet "width: 100"? Will ich Pixel? Was war em nochmal? Wieso macht % nicht, was ich denke, dass es macht? Wieso wird ein Bild größer, wenn ich die Breite reduziere und die Höhe auf auto setze? Aaaah! Wie gesagt, man muss gefühlt sehr viel wissen, um sehr wenig zu machen. Dreckssprache.

Wie war es mir dann möglich, das hier umzusetzen?



Habe ich endlich genug Disziplin und Durchhaltewillen aufgebracht, war der Leidensdruck groß genug?

Ts. Neee. Die Hintergrundmusik ist da schon sehr bezeichnend

[...]

[Flunky]

[Kendogan]

[Shakka]

Wie gesagt, man muss gefühlt sehr viel wissen, um sehr wenig zu machen. Dreckssprache.

Das hat ja nichts mit der Sprache zu tun. Das ist eben die Umgebung, die die Browser so mitbringen.

Das Gute ist hier, dass man mit dieser Toolbox extrem viel grafisches machen kann. Bau mal GUI mit was anderem. Da hat man oft ganz viel Boilerplate oder man hat kaum Möglichkeiten.

Das Forum lädt eine Datei csex.js. Das ist im Prinzip eine Sammlung mit solchen kleinen JS-Hacks. Das kann man problemlos erweitern.

[klops]

Wann CiFo-Bonusfeature-Addon-Pack?
In die Bilderskalierung hab ich auch mal kurz reingeschaut, weil ich das bei RB praktisch finde. Ist aber doch bissl aufwändig für den Nutzen. (zumindest für mich, müsste mich da nochmal richtig einlesen)

[Cailie]

CiFo-Premium mit Superignorieren©

[Mongke Khan]

[...]

Die Tage hab ich bei der ZEIT ein Interview mit dem Deutschen Nick Turley gelesen, der bei OpenAI und ChatGPT irgendwas zu melden hat. Dort sagte er sinngemäß, dass aktuell daran gearbeitet wird, dass ChatGPT selbstständig das Web benutzen kann. Das klingt ein bisschen gruselig, aber auch genau nach dem, was ich will.
Dabei habe ich mit KI (ChatGPT und Copilot) beim Programmieren bisher eher schlechte Erfahrungen gesammelt: beruflich habe ich tendenziell mit Problemen zu tun, die nicht zwangsläufig kompliziert, aber dafür komplex sind. Man muss wenig wissen, aber viel nachdenken, um zu einer Lösung zu kommen. Vor allem, wenn man das effizient machen will, versagt Copilot regelmäßig.
Bei ätzenden Routinetätigkeiten, die nur nerviges Patternmatching und das Setzen von Attributwerten beinhalten und bei denen Performance wayne ist, weil der Flaschenhals vorm Bildschirm sitzt, nehmen sie einem aber durchaus Arbeit ab. Das ist ja quasi alles, wofür JavaScript gut ist - und da ChatGPT das Internet gefressen hat, hat es auch jede Menge JavaScript gefuttert!

Gedacht, getan. Und mit folgender Anfrage begann die Pair-Programming-Session:

Hello. I am a user of the forum https://www.civforum.de/. It is a vBulletin® Version 4.2.2 powered online forum. I want to write a browser extension that allows me to enlarge images when hovering them with the mouse. At the moment, I can only get a larger version by clicking on them but that opens a new tab.

ChatGPT hat aber nicht direkt verstanden, was ich mir vorstelle. Das war seine Interpretation, für welche er gleich Code mitlieferte:

• Detect when the mouse is hovering over a thumbnail image.
• Grab the link to the full-size image (usually wrapped in an < a > tag).
• Create a floating preview of the full-size image near the cursor.

Das liegt aber fairerweise daran, dass meine Beschreibung nicht präzise genug war. Zum einen brauch ich das Feature nur für Anhänge und zum anderen will ich das jeweilige Bild bildschirmfüllend und zentriert als Overlay anzeigen, nicht "near the cursor". Denn dann wandert es mit der Maus mit. "Enlarge" hat die KI wiederum ignoriert.
Die Lösung der KI sah zudem vor, dass man das Bild aktiv anklicken muss. Ich will einfach mit dem Mauszeiger drüberfahren und mir den Klick sparen. Das bekam die KI aber dann recht schnell hin. Aus Neugier habe ich anschließend noch gefragt:

Thanks! Now, how can we improve this little plugin?

...worauf die KI mit ner ganzen Palette an Vorschlägen aufwartete. Schön gruppiert nach UX Polish (Delay before zooming, Fade-in/ Fade-out Animation, Close on scroll), "Feature Boosters" (Cycle through other images, Image metadata overlay, Pin-to-keep) und Under-the-Hood Improvements (v.a. ein Popup-Menü für diverse Einstellungen).
Die UX-Polish-Sachen klangen sinnvoll. Dieser war ich mir auch bewusst, dazu hab ich mal ne Vorlesung besucht (das CiFo hat btw an vielen Stellen ne grauenvolle UI). Fällt aber normalerweise in die Kategorie "zu nervig, um sich drum zu kümmern". Ein Popup-Menü brauche ich nicht, zur Not kann ich das im Code ändern. Soll ja nur für mich funktionieren. Aber zwei der Features (Cycling, Pin-to-keep) klangen ganz cool.

Die UX-Sachen waren schnell erledigt, bei den Features wurde es interessant. Während ich mir bis dahin mehr Zeit genommen habe, um den Code zu verstehen, den die KI ausspuckt (und sie z.B. darauf hingewiesen hab, dass sie etwas benutzen will, dass es im aktuellen Scope gar nicht gibt - vernünftige Programmiersprachen weisen einen da von sich aus drauf hin...), war ab da mein Vorgehen eher:

1. "Mach mal das und das"
2. Code kopieren und probieren
3. "Ne, geht nicht. Und zwar..."
4. Zurück zu 1.

Die Schleife lief ein paar mal so durch. Highlights aus der Konversation:

Awesome question — you're really thinking like a developer now!

-

It would make your plugin feel super pro!

- reden Webdevs so miteinander??

Your final code looks super clean and functional — I'm impressed how you handled all the interaction details.

- nachdem ich ChatGPTs Code an einer einzelnen Stelle geändert habe (von 2000ms Delay auf 100ms)

Ooooh I love this idea! A super flexible, non-intrusive corner pinning system? Let’s make it slick and smart:

- vier Pin-Buttons sind ein non-intrusive corner pinning system

Außerdem liebt die KI Emojis. Sehr.

Abschließend wollte ich, dass die ganzen Elemente (Vergrößertes Bild, Pin-Buttons, Overlay) nicht zu hässlich aussehen:

There are several colors and styles in use. Can you choose one that fits the style of the civilization video game series?

Den Stil fasste die KI zusammen als "a little grand, ancient, elegant, but also a bit "adventurous". Das kommt hin. Die Style-Anpassung erforderte auch keinen Zweitversuch, das klappte auf Anhieb. ChatGPT schlug mir prompt noch eine Ergänzung vor:

If you want to go the extra mile:
You could add a subtle animated glint across the pinned image after it's pinned, like a small sparkle moving across, which is VERY Civilization-y.

VERY Civilization-y, huh? Ich hab es sie ausprobieren lassen, aber das hat nicht wirklich funktioniert. Es hat auch nicht nicht funktioniert, aber da ich es eh nicht mag, wenn ständig was auf dem Bildschirm blitzt und blinkt, hab ich das zurückrollen lassen.
Anschließend ging es nur noch darum, das AddOn permanent zu Firefox hinzuzufügen. Und das ist bei Firefox wie schon erwähnt gar nicht so einfach. Gefühlt hat in der Session mit ChatGPT am längsten gedauert, herauszufinden, warum. Meine pragmatische Lösung bestand dann darin, Tampermonkey zu benutzen und auf Anfrage lieferte mir ChatGPT das zugehörige Skript:

Achtung Spoiler:

// ==UserScript==
// @name         CivForum Attachment Image Zoom And Pin
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Zoom and pin image attachments on civforum.de when hovering over them.
// @author       You
// @match        https://www.civforum.de/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    let zoomTimeout = null;
    let overlay = null;
    let isPinned = false;
    let pinnedImg = null;
    let unpinButton = null;

    let attachmentImages = Array.from(document.querySelectorAll('a[href^="attachment.php?attachmentid="] > img'));

    document.addEventListener('mouseover', function (e) {
        const target = e.target;

        if (
            target.tagName === 'IMG' &&
            target.parentElement &&
            target.parentElement.tagName === 'A' &&
            target.parentElement.getAttribute('href')?.startsWith('attachment.php?attachmentid=') &&
            target.getAttribute('src')?.startsWith('attachment.php?attachmentid=')
        ) {
            if (document.getElementById('image-hover-overlay')) return;
            const fullImageUrl = target.parentElement.href;

            zoomTimeout = setTimeout(() => {
                createOverlayImage(fullImageUrl);
            }, 150);

            target.addEventListener('mouseleave', function onLeave() {
                clearTimeout(zoomTimeout);
                zoomTimeout = null;
                target.removeEventListener('mouseleave', onLeave);
            });
        }
    });

    document.addEventListener('keydown', function (e) {
        if (!overlay || !pinnedImg) return;

        if (e.key === 'Escape') {
            isPinned = false;
            removeOverlay();
        }

        if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
            const currentSrc = overlay.querySelector('img').src;
            const currentIndex = attachmentImages.findIndex(img => img.parentElement.href === currentSrc);

            if (currentIndex !== -1) {
                let newIndex;
                if (e.key === 'ArrowRight') {
                    newIndex = (currentIndex + 1) % attachmentImages.length;
                } else {
                    newIndex = (currentIndex - 1 + attachmentImages.length) % attachmentImages.length;
                }
                const newFullImageUrl = attachmentImages[newIndex].parentElement.href;
                overlay.querySelector('img').src = newFullImageUrl;
            }
        }
    });

    function removeOverlay() {
        if (isPinned) return;

        if (overlay) {
            overlay.style.opacity = '0';
            setTimeout(() => {
                clearTimeout(zoomTimeout);
                zoomTimeout = null;
                overlay.remove();
                overlay = null;
                unpinButton = null;
            }, 150);
        }
    }

    window.addEventListener('scroll', removeOverlay);

    function createOverlayImage(src) {
        overlay = document.createElement('div');
        overlay.id = 'image-hover-overlay';
        overlay.style.position = 'fixed';
        overlay.style.top = '0';
        overlay.style.left = '0';
        overlay.style.width = '100vw';
        overlay.style.height = '100vh';
        overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.15)';
        overlay.style.display = 'flex';
        overlay.style.alignItems = 'center';
        overlay.style.justifyContent = 'center';
        overlay.style.zIndex = '10000';
        overlay.style.cursor = 'pointer';
        overlay.style.opacity = '0';
        overlay.style.transition = 'opacity 0.2s ease';

        const imgContainer = document.createElement('div');
        imgContainer.style.position = 'relative';
        imgContainer.style.display = 'inline-block';

        pinnedImg = document.createElement('img');
        pinnedImg.src = src;
        pinnedImg.style.maxWidth = '90vw';
        pinnedImg.style.maxHeight = '90vh';
        pinnedImg.style.border = '2px solid white';
        pinnedImg.style.borderRadius = '10px';
        pinnedImg.style.boxShadow = '0 0 20px rgba(0,0,0,0.7)';

        imgContainer.appendChild(pinnedImg);

        function createPinButton(corner, positionStyles, alignStyles) {
            const btn = document.createElement('button');
            btn.textContent = '📌';
            btn.title = `Pin to ${corner}`;
            btn.style.position = 'absolute';
            btn.style.width = '24px';
            btn.style.height = '24px';
            btn.style.border = 'none';
            btn.style.borderRadius = '50%';
            btn.style.backgroundColor = 'rgba(255, 215, 0, 0.8)';
            btn.style.color = 'black';
            btn.style.cursor = 'pointer';
            btn.style.fontSize = '16px';
            btn.style.display = 'flex';
            btn.style.alignItems = 'center';
            btn.style.justifyContent = 'center';
            btn.style.boxShadow = '0 0 5px rgba(0,0,0,0.5)';
            btn.style.transition = 'background-color 0.3s ease';
            btn.style.zIndex = '10001';

            Object.assign(btn.style, positionStyles);

            btn.addEventListener('click', (e) => {
                e.stopPropagation();
                isPinned = true;
                pinnedImg.style.border = '3px solid rgba(255, 215, 0, 0.6)';
                pinnedImg.style.maxWidth = '45vw';
                pinnedImg.style.maxHeight = '45vh';
                overlay.style.justifyContent = alignStyles.justifyContent;
                overlay.style.alignItems = alignStyles.alignItems;
                overlay.style.backgroundColor = 'transparent';
                pinnedImg.style.margin = '1rem';
                showUnpinButton();
            });

            imgContainer.appendChild(btn);
        }

        createPinButton('Top Left', { top: '10px', left: '10px' }, { justifyContent: 'flex-start', alignItems: 'flex-start' });
        createPinButton('Top Right', { top: '10px', right: '10px' }, { justifyContent: 'flex-end', alignItems: 'flex-start' });
        createPinButton('Bottom Left', { bottom: '10px', left: '10px' }, { justifyContent: 'flex-start', alignItems: 'flex-end' });
        createPinButton('Bottom Right', { bottom: '10px', right: '10px' }, { justifyContent: 'flex-end', alignItems: 'flex-end' });

        overlay.appendChild(imgContainer);
        document.body.appendChild(overlay);

        requestAnimationFrame(() => {
            overlay.style.opacity = '1';
        });

        imgContainer.addEventListener('mouseleave', removeOverlay);
    }

    function showUnpinButton() {
        if (!pinnedImg || unpinButton) return;

        unpinButton = document.createElement('button');
        unpinButton.textContent = '❌';
        unpinButton.title = 'Unpin and Close';
        unpinButton.style.position = 'absolute';
        unpinButton.style.bottom = '10px';
        unpinButton.style.left = '50%';
        unpinButton.style.transform = 'translateX(-50%)';
        unpinButton.style.width = '30px';
        unpinButton.style.height = '30px';
        unpinButton.style.border = 'none';
        unpinButton.style.borderRadius = '50%';
        unpinButton.style.backgroundColor = 'rgba(255, 50, 50, 0.8)';
        unpinButton.style.color = 'white';
        unpinButton.style.cursor = 'pointer';
        unpinButton.style.fontSize = '18px';
        unpinButton.style.display = 'flex';
        unpinButton.style.alignItems = 'center';
        unpinButton.style.justifyContent = 'center';
        unpinButton.style.boxShadow = '0 0 5px rgba(0,0,0,0.5)';
        unpinButton.style.zIndex = '10002';

        unpinButton.addEventListener('click', (e) => {
            e.stopPropagation();
            isPinned = false;
            if (overlay) {
                overlay.style.opacity = '0';
                setTimeout(() => {
                    overlay.remove();
                    overlay = null;
                    unpinButton = null;
                }, 150);
            }
        });

        pinnedImg.parentElement.appendChild(unpinButton);
    }
})();

Über dessen Qualität kann ich nicht viel sagen. Ist ja nicht von mir Aber es tut, was ich mir vorgestellt habe.

Auf dieselbe Art und Weise habe ich noch die UX als Storyschreiber verbessert. Anhänge hochzuladen ist aus meiner Sicht in vielerlei Hinsicht beschissen umgesetzt:

• Die Anhänge sind unter dem Beitrag, den man schreibt. Wenn man an einer Stelle ein Bild hochladen will, muss man erst runterscrollen.
• Rechts ist viel ungenutzter Platz. Wenn man die Emo-Liste ausblendet (die kann man eh auswendig), sogar noch mehr. Da sind sie viel zugänglicher.
• Der Link, den man klicken muss, ist sehr klein. "att2" steht da bis zu 5x übereinander, den richtigen auszuwählen Präzisionsarbeit
• att2 ist eh maximal nichtssagend.
• Man kann immer nur ein Bild auf einmal hinzufügen (aber wenigstens alle gleichzeitig hochladen).
• Dafür muss man auch noch ein eigenes Fenster öffnen, in dem wieder alle interessanten Steuerelemente viel zu klein und fummelig sind.

So sieht das bei mir nun aus:

Achtung Spoiler:

// ==UserScript==
// @name         Civforum Attachment Enhancer
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Improves the Civforum attachment upload UI with better styling, drag-and-drop support, and attachment list cleanup
// @author       You
// @match        https://www.civforum.de/newattachment.php*
// @match        https://www.civforum.de/newreply.php*
// @match        https://www.civforum.de/editpost.php*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // --- 1. Remove the Smilie Box ---
    setTimeout(() => {
        const smilieBox = document.getElementById('vB_Editor_001_smiliebox');
        if (smilieBox) {
            smilieBox.remove();
            console.log('Civforum Extension: Smilie box removed.');
        }
    }, 50);

    // --- 2. Move and Style the Manage Attachments Button ---
    setTimeout(() => {
        const emosDiv = document.querySelector('div[align="center"] a[href="http://www.civforum.de/images/emo/index.php"]')?.parentElement;
        const manageAttachmentsButton = document.getElementById('manage_attachments_button');

        if (emosDiv && manageAttachmentsButton) {
            emosDiv.insertAdjacentElement('afterend', manageAttachmentsButton);

            manageAttachmentsButton.value = "Anhänge\nverwalten";
            manageAttachmentsButton.style.marginTop = "10px";
            manageAttachmentsButton.style.paddingTop = "12px";
            manageAttachmentsButton.style.paddingBottom = "12px";
            manageAttachmentsButton.style.fontSize = "14px";
            manageAttachmentsButton.style.height = "auto";
            manageAttachmentsButton.style.width = "auto";
            manageAttachmentsButton.style.whiteSpace = "pre-line";
            manageAttachmentsButton.style.textAlign = "center";
            manageAttachmentsButton.style.cursor = "pointer";

            console.log('Civforum Extension: Button moved, styled, and line break added.');
        }
    }, 50);

    // --- 3. Style File Inputs, Create Drag-Drop Zone, Style Upload Button ---
    setTimeout(() => {
        const fileInputs = document.querySelectorAll('input[type="file"][name="attachment[]"]');
        fileInputs.forEach(input => {
            input.style.height = "40px";
            input.style.fontSize = "16px";
            input.style.padding = "5px";
        });

        // Create Drag-and-Drop Zone
        const dropZone = document.createElement('div');
        dropZone.textContent = "Hier bis zu 5 Bilder hineinziehen";
        dropZone.style.border = "3px dashed red";
        dropZone.style.padding = "30px";
        dropZone.style.marginTop = "20px";
        dropZone.style.textAlign = "center";
        dropZone.style.fontSize = "18px";
        dropZone.style.color = "#555";
        dropZone.style.borderRadius = "8px";
        dropZone.style.cursor = "pointer";
        dropZone.style.backgroundColor = "#f9f9f9";

        const attachBoxList = document.querySelector('.attachboxlist');
        if (attachBoxList) {
            attachBoxList.parentNode.insertBefore(dropZone, attachBoxList.nextSibling);
        }

        dropZone.addEventListener('dragover', (e) => {
            e.preventDefault();
            dropZone.style.backgroundColor = "#eef";
        });

        dropZone.addEventListener('dragleave', (e) => {
            e.preventDefault();
            dropZone.style.backgroundColor = "#f9f9f9";
        });

        dropZone.addEventListener('drop', (e) => {
            e.preventDefault();
            dropZone.style.backgroundColor = "#f9f9f9";

            const files = Array.from(e.dataTransfer.files);

            if (files.length > 5) {
                alert("Bitte maximal 5 Dateien gleichzeitig hochladen!");
                return;
            }

            const fileInputs = document.querySelectorAll('input[type="file"][name="attachment[]"]');
            files.forEach((file, index) => {
                const dataTransfer = new DataTransfer();
                dataTransfer.items.add(file);
                fileInputs[index].files = dataTransfer.files;
            });

            console.log('Dateien erfolgreich auf Eingabefelder verteilt!');
        });

        // Style Upload Button
        const uploadButton = document.querySelector('input[type="submit"][name="upload"][value="Hochladen"]');
        if (uploadButton) {
            uploadButton.style.padding = "15px 30px";
            uploadButton.style.fontSize = "18px";
            uploadButton.style.minWidth = "200px";
            uploadButton.style.height = "auto";
            uploadButton.style.cursor = "pointer";
            uploadButton.style.backgroundColor = "#555";
            uploadButton.style.color = "white";
            uploadButton.style.border = "none";
            uploadButton.style.borderRadius = "8px";
            uploadButton.style.boxShadow = "0px 2px 8px rgba(0,0,0,0.2)";
            uploadButton.style.display = "block";
            uploadButton.style.margin = "20px auto";

            uploadButton.value = "📤 Hochladen";

            console.log('Civforum Extension: Hochladen button styled and emoji added.');
        }

    }, 50);

    // --- 4. Clean up Attachment List Items (MutationObserver) ---
    setTimeout(() => {
        const attachmentsList = document.querySelector('#attachlist_list2');

        if (attachmentsList) {
            const updateAttachments = () => {
                const attachmentItems = document.querySelectorAll('#attachlist_list2 li.attachment, #attachlist_list2 li');

                attachmentItems.forEach(item => {
                    const attachmentDiv = item.querySelector('div');
                    const oldAnchor = attachmentDiv?.querySelector('a');

                    if (attachmentDiv && oldAnchor) {
                        const href = oldAnchor.getAttribute('href') || '';
                        const match = href.match(/\[ATT2\](\d+)\[\/ATT2\]/);
                        const attachmentId = match ? match[1] : null;

                        if (attachmentId) {
                            const rawText = attachmentDiv.textContent.trim();
                            const fileName = rawText.split(' (')[0];

                            const newAnchor = document.createElement('a');
                            newAnchor.href = `javascript:CKEDITOR.instances.vB_Editor_001_editor.insertText("")`;
                            newAnchor.textContent = fileName;

                            attachmentDiv.innerHTML = '';
                            attachmentDiv.appendChild(newAnchor);
                        }
                    }

                    item.className = '';
                });

                console.log('Civforum Extension: Attachments list updated to only show file names and correct ATT2 tags.');
            };

            const observer = new MutationObserver(mutations => {
                mutations.forEach(mutation => {
                    if (mutation.type === "childList") {
                        updateAttachments();
                    }
                });
            });

            observer.observe(attachmentsList, { childList: true });

            console.log('Civforum Extension: MutationObserver set up to track attachment list updates.');
        }
    }, 50);

    // --- 5. Move Attachment List Below Manage Attachments Button and Fix Styles ---
    setTimeout(() => {
        const manageAttachmentsButton = document.getElementById('manage_attachments_button');
        const attachmentsList = document.querySelector('#attachlist_list2');

        if (manageAttachmentsButton && attachmentsList) {
            manageAttachmentsButton.insertAdjacentElement('afterend', attachmentsList);

            attachmentsList.style.margin = "0";
            attachmentsList.style.padding = "0";
            attachmentsList.style.listStyleType = "none";
            attachmentsList.style.paddingLeft = "0";

            console.log('Civforum Extension: Attachments list moved and margins reset.');
        }
    }, 50);

})();

[Mongke Khan]

Das hat ja nichts mit der Sprache zu tun. Das ist eben die Umgebung, die die Browser so mitbringen.

Das Gute ist hier, dass man mit dieser Toolbox extrem viel grafisches machen kann. Bau mal GUI mit was anderem. Da hat man oft ganz viel Boilerplate oder man hat kaum Möglichkeiten.

Ja, ich hab ggf. ein wenig übertrieben
Was alles geht, ist schon sehr cool. Aber vielleicht fühlt es sich auch deshalb so frustrierend an, weil man den Weg dahin sieht und auch das Ziel, aber trotzdem noch einige Meter gehen muss und dafür dann die Schuhe hasst.

[Jerry Demmings]

[Shakka]

https://www.civforum.de/profile.php?do=editoptions



Da kann man das Bilder-Feature aktivieren.

[shade]

Dachte schon ich hätte die ganzen tollen Features übersehen, als ich deine Umfrage gesehen habe.

Dein letztes Video kann zumindest ich nicht sehen, da privat. Wäre echt praktisch mehr als 1 Bild gleichzeitig hinzufügen zu können.

[Kendogan]

https://www.civforum.de/profile.php?do=editoptions



Da kann man das Bilder-Feature aktivieren.

Dabei ist mir gerade erst wieder das Bot-Feature eingefallen

[Mongke Khan]

Jetzt sollte es öffentlich sein. Also das Video. Das Skript ist aber stellenweise noch buggy, da leg ich meine Hand weniger ins Feuer als bei dem Pin&Zoom Ding. Da hatte ich wenigstens teilweise mal drübergeschaut

[Mongke Khan]

https://www.civforum.de/profile.php?do=editoptions



Da kann man das Bilder-Feature aktivieren.