Avatar ndern & Benutzernamen für einen bestimmten Beitrag

Entwickler
2

Hallo, unfairest,

Ich bin auf diesen Beitrag gestoßen und dachte, ich könnte ihn ausprobieren!

Hier ist die erste Version; ich hoffe, der Code ist nicht allzu schrecklich. :slightly_smiling_face:
Ich habe nicht alle Randfälle ausgiebig getestet. Es ist ein Ausgangspunkt.

  • Erwartetes Wrap-Format: [wrap=character avatar=\"<URL>\"]<Name>[/wrap]
  • Stellen Sie sicher, dass sich unter [wrap] eine Leerzeile befindet
  • Sie können den Charakternamen mit CSS anpassen (siehe Klassen character und character-extra)

Lassen Sie mich wissen, wenn Sie Probleme haben :slight_smile:

Head 
<script type="text/discourse-plugin" version="0.8.13">

let characters = new Map();

function searchTag(obj, tag) {
  if (!obj || !obj.firstObject) return;
  
  const firstObj = obj.firstObject;
  return firstObj.tagName === tag ? firstObj : searchTag(firstObj.children, tag);
}
            
api.addPostTransformCallback(post => 
{
    if (post.post_number <= 1 || post.post_type !== 1) {
        return;
    }

    const matches = post.cooked.match(/data-wrap="character"\s+data-avatar="(?<avatar>[^"]+)"\s+data-name="(?<name>[^"]+)"/i);
    
    if (!matches) {
        characters.delete(post.id);
        return;
    }
    
    // TODO: sanity check for avatar/name
    
    const {name, avatar} = matches.groups;
    
    characters.set(post.id, {name, avatar});
    
});

api.reopenWidget("post-avatar", {
    html(attrs) {
        const html = this._super(attrs);
        
        if (attrs.id && characters.has(attrs.id)) {
            const imageHtml = searchTag(html, 'IMG');
    
            if (imageHtml) {
                imageHtml.properties.attributes.src = characters.get(attrs.id).avatar;
            }
        }
        
        return html;
    }
});

api.reopenWidget("poster-name", {
    html(attrs) {
        let html = this._super(attrs);
        
        if (attrs.id && characters.has(attrs.id)) {
            const h = require("virtual-dom").h;
            
            html = [
                h('span.character', this.userLink(attrs, characters.get(attrs.id).name)),
                h('span.character-extra', 'gespielt von'), // optional
                ...html
            ];
        }
        
        return html;
    }
});

</script>
CSS 
.names {
    .character a {
        font-weight: bold;
        color: var(--tertiary-high);
    }
    
    .character-extra {
        
    }
}

.cooked, .d-editor-preview {
    p:has(> [data-wrap="character"]) {
        display: none;
    }
    
    p:has(> [data-wrap="character"]) + * {
        margin-top: 0;
    }
}

Hier ist eine kleine Demo, wie es aussah: