DVZ Shoutbox | Panel z emotikonami (clickable smileys)

Clickable smileys czyli jak zrobić panel z klikalnymi uśmieszkami do DVZ Shoutbox. W przypadku posiadania niestandardowych emotek należy ręcznie zmienić kod odpowiedzialny za nie (czwarty kod licząc od góry).

1 Edycja szablonu głównego

Wejdź w: ACP -> Templates & Styles -> Templates -> Global Templates -> dvz_shoutbox i na samym dole dodaj kod, który będzie odpowiedzialny za dodanie emotki do pola tekstowego; to jest: 

Czyli po kliknięciu w klasę smilie_dvz dodaj do zmiennej smilie wartość atrybutu alt klikniętej emotikony, a do drugiej zmiennej nazwanej inputValue dodaj tekst, który obecnie znajduje się w polu tekstowym. Następnie złap id dvz_input w celu nadania mu wartości z inputValue, a następnie klikniętej przez nas emotki. 

2 Edycja szablonu panel

Wejdź w: ACP -> Templates & Styles -> Templates -> Global Templates -> dvz_shoutbox_panel i do tagu input, który służy do wprowadzania tekstu dodaj identyfikator dvz_input, aby wcześniej dodany przez nas kod jQuery mógł się do niego odnieść; czyli domyślny kod:


zamień na:

3 Dodanie box'a z emotikonami

Dobra, połowa sukcesu za nami. Teraz wystarczy dodać box w którym będą umieszczone nasze emotki.
W tym celu przechodzimy ponownie do szablonu dvz_shoutbox (oczywiście to tylko przykład, możemy to zrobić całkiem inaczej) i dodajemy nad naszym kodem .js ten kod:
 

4 Zamiana kursora

Wszystko już działa, ale kursor wciąż pozostał domyślny po najechaniu na klikalną emotkę. Jak to zmienić? 
Przechodzimy do global.css i dodajemy w nim:

Ok, a jak teraz je wyśrodkować? 
Przechodzimy do global.css i dodajemy w nim:

Przykładowy wygląd: 

Nie spotkałem się jeszcze nigdzie z gotowym kodem do tego lub chociaż jakimś poradnikiem, więc proszę bardzo. :p

5 Dodatkowo: Inny wygląd

Pomiń punkt trzeci, przejdź do global.css, a w nim dodaj poniższy kod:


#smilies_modal {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  overflow: auto;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100vh;
  padding-top: 25%;
}

#smilies_container {
  background-color: #333;
  padding: 10px 15px;
  border: 1px solid #666;
  border-radius: 3px;
  margin: 0 auto;
  width: 30%;
}

Przejdź do twojego stylu, a następnie do szablonu index. Na samym dole od razu nad </body> wstaw:

<div id="smilies_modal">
    <div id="smilies_container">
        <img src="{$theme['imgdir']}/smilies/smile.png" alt=":)" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/wink.png" alt=";)" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/cool.png" alt=":cool:" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/biggrin.png" alt=":D" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/tongue.png" alt=":P" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/rolleyes.png" alt=":rolleyes:" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/shy.png" alt=":shy:" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/sad.png" alt=":sad:" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/at.png" alt=":at:" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/angel.png" alt=":angel:" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/angry.png" alt=":angry:" class="smilie_dvz clickaable">
        <img src="{$theme['imgdir']}/smilies/blush.png" alt=":blush:" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/confused.png" alt=":s" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/dodgy.png" alt=":dodgy:" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/exclamation.png" alt=":exclamation:" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/heart.png" alt=":heart:" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/huh.png" alt=":huh:" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/lightbulb.png" alt=":idea:" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/sleepy.png" alt=":sleepy:" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/undecided.png" alt=":-/" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/cry.png" alt=":cry:" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/sick.png" alt=":sick:" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/arrow.png" alt=":arrow:" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/my.png" alt=":my:" class="smilie_dvz clickable">
    </div>
</div>

<script>
    $('.smilie_dvz').click(function() {
        var smilie = $(this).attr("alt"),
            inputValue = $('#dvz_input').val();
        $('#dvz_input').val(inputValue + smilie);
        $('#smilies_modal').css("display", "none");
    });
    $('#smilies_modal_open').click(function(event) {
        event.preventDefault();
        $('#smilies_modal').css("display", "block");
    });
</script> 


Ok, pozostało jedynie dodać link, dzięki któremu będziemy wywoływać nasz box. W tym celu udaj się do szablonów globalnych,  dvz_shoutbox, wyszukaj:

<p class="right"><a href="{$mybb->settings['bburl']}/index.php?action=shoutbox_archive">&laquo; {$lang->dvz_sb_archivelink}</a></p> 


a następnie zamień to na:

<p class="right">
    <a href="{$mybb->settings['bburl']}/index.php?action=shoutbox_archive">&laquo; {$lang->dvz_sb_archivelink}</a>&nbsp;
    <a href="#" id="smilies_modal_open">&laquo; Emotki</a>
</p> 


Gotowe!
Podgląd:
     

http://prntscr.com/atsllv