JS Frage

  • Tag,

    Ich möchte die FA Icons, die mir das WCF bietet, in einem Message Container (modal) als select ausgeben.
    Ich möchte jetzt nicht für jedes Icon eine Option schreiben, sondern eine Option haben, welche mir jede zuvor definierte Variable als Liste anzeigt.

    Z.B. ich sag

    JavaScript
    var icons = ['icon1', 'icon2', 'icon3', 'icon4', 'icon5', 'icon6'];

    und rufe diese mit einer einzigen option, als select aufgereiht, auf und lasse diese ausgeben. Ist das irgendwie Möglich?
    Und falls nicht, wie löse ich das am geschicktesten?

  • Eine Anmerkung dazu: Wenn du sehr viele Icons auf diese Weise hinzufügst, leidet die Peformance sehr stark darunter, da bei jedem Aufruf von appendTo() eine Veränderung des DOM erfolgt. Sinnvoller ist es in solchen Fällen die Optionen in einen String zu schreiben und dann mit html() in einer einzigen Operation einzufügen. Nebenbei bemerkt ist length eine dynamische Eigenschaft, das heißt bei jedem Durchlauf wird das Array neu gezählt - auch das ist ineffizient. Im übrigen ist es die allgemeine Konvention in allen Programmiersprachen die Variablen i, j, k, etc als Zähler für Schleifen zu verwenden.


    JavaScript
    var options = '';
    for (var i = 0, length = icons.length; i < length; i++) {
    	options += '<option value"' + icons[i] + '">' + icons[i] + '</option>';
    }
    $('#icon-box).html(options);

    PS: Wer auf jQuery verzichten möchte, braucht Zeile 5 nur so zu verändern: document.getElementById('icon-box').innerHTML = options;.

  • Probier ich gleich mal aus. Was mit jedoch aufgefallen ist, dass einige Icons nicht angezeigt werden.

    Um ein beispiel zu nennen: 'fa-500px'

    Oder mal anders gefragt - welche Version von den FA Icons hat das wcf aktuell?

    Fehler von mir. <span class="icon icon16 fa-{$icon}"></span> funktioniert besser als <span class="icon icon16 icon-{$icon}"></span> :D


    Edit: Öhm... Das sollte so glaub ich nicht sein

  • Code
    + '<dl>'
                            + '<dt><label for="icon-box" />' + WCF.Language.get('wcf.message.icon') + '</label></dt>'
                            + '<dd>'
                                + '<select name="icon" id="icon-box">'
                                + '<option value="">' + WCF.Language.get('wcf.message.icon.chose') + '</option>'
                                +'</select>'
                            + '</dd>'
                        + '</dl>'

    Der rest ist Redactor blabla

  • Ist dein Problem gerade, dass in dem Dropdown des Select nicht die FontAwesome Icons angezeigt werden? So etwa:

    Das habe ich mit folgendem HTML/Template Code gemacht:

    Code
    <select style="font-family: 'FontAwesome', 'Trebuchet MS', Arial, sans-serif"   id="smileyTabIcon" name="additionalData[smileyTabIcon]">
    	<option value=""{if $selectedIcon|empty} selected="selected"{/if}>{lang}wcf.acp.smiley.tab.icon.none{/lang}</option>
    	<option value="fa-500px"{if $selectedIcon == 'fa-500px'} selected="selected"{/if}>& #xf26e;</option>
    	<option value="fa-adjust"{if $selectedIcon == 'fa-adjust'} selected="selected"{/if}>& #xf042;</option>
    	<option value="fa-adn"{if $selectedIcon == 'fa-adn'} selected="selected"{/if}>& #xf170;</option>
    	[...]
    </select>

    Bachte, dass ich in den Option Tags das & und die # mit einem Leerzeichen getrennt habe, weil der Editor hier sonst den Text entfernt. Das Leerzeichen musst du bei dir dann natürlich entfernen. Zudem müsstest du dir überlegen, wie du die Generierung der Options automatisierst, was ja letztendlich dein Ziel ist.

  • Ist dein Problem gerade, dass in dem Dropdown des Select nicht die FontAwesome Icons angezeigt werden?

    Nicht wirklich.

    Die Buchstaben der Icon-namen werden mit dem Code von @Alexander Ebert gesplittet und dementsprechend Buchstabe für Buchstabe angezeigt. Siehe Bild #4


    Das ganze ist ein Redactor Plugin für das WCF und braucht das Template nicht.

  • Du überschreibst dein array icons in der schleife womit du am ende natürlich nur noch mist raus bekommst...
    Musst für die options also ne andere variable verwenden.

  • Du findest die Definition in wcf/style/icon.less.
    In Version 2.1.10 vom WCF ist in Zeile 1610 die letzte Doppeldefinition mit .icon- und .fa-. Ab Zeile 1611 sind nur noch .fa- Definitionen.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!