Panel z emotikonami (Clickable smileys) do DVZ Shoutbox | MyBB

Cześć. W dzisiejszym poradniku opiszę jak dodać panel z emotikonkami, uśmieszkami (Clickable smileys) do wtyczki DVZ Shoutbox pod MyBB. 

Dodam że w przypadku posiadania niestandardowych emotikonek należy ręcznie zmienić kod który za nie odpowiada. 

Edycja szablonu dvz_shoutbox

Na początek musimy dodać kod JS który będzie odpowiedzialny za dodanie emotikonki do pola tekstowego oraz cały kod panelu z emotikonkami. 

Przejdź do: ACP > Templates & Styles > Templates > Global Templates > dvz_shoutbox i na samym dole dodaj:

<div id="smilies_box">
                <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 clickable">
                <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>
<script>
        $('.smilie_dvz').click(function() {
            var smilie = $(this).attr("alt"),
                inputValue = $('#dvz_input').val();
            $('#dvz_input').val(inputValue + smilie);
        });
    </script>

Zapisz i zamknij szablon.

Edycja szablonu dvz_shoutbox_panel

Teraz musimy edytować tag input (pole tekstowe) służący do wprowadzania tekstu i dodać do niego nowy atrybut ID.

Przejdź do: ACP -> Templates & Styles -> Templates -> Global Templates -> dvz_shoutbox_panel.

Do tagu input, dodaj identyfikator dvz_input, czyli znajdź:

<input type="text" class="text" placeholder="{$lang->dvz_sb_default}" maxlength="{$maxlength}" autocomplete="off" /> 

zamień na:

<input type="text" id="dvz_input" class="text" placeholder="{$lang->dvz_sb_default}" maxlength="{$maxlength}" autocomplete="off" /> 

Zapisz szablon. Po tych czynnościach wszystko powinno już działać.

Zmiana kształtu wskaźnika myszki

Możesz zauważyć że po najechaniu na emotikonkę kształt wskaźnika myszki czyli kursor jest domyślny i nie reaguje innym kształtem na emotikonkę.

Wypadało by to zmienić. Przejdź do arkusza global.css i dodaj do niego:

#smilies_box {text-align:center;}
#smilies_box .clickable {cursor:pointer;}

To wszystko. 

Efekt końcowy prezentuje się tak:

Super poradnik, wszystko działa jak należy. Jeden z użytkowników podesłał mi kod w którym można wykorzystać funkcję MyBB odnośnie wyświetlanych emotek wraz z akcją onclick.

Niestety wymaga to edycji pliku JS więc przy wgrywaniu nowej wersji wtyczki, plik może zostać nadpisany i trzeba go edytować jeszcze raz.

Kod HTML

Dodajemy kod HTML, który wywoła funkcję modala emotek wbudowaną w MyBB.

Przejdź do: ACP > Templates & Styles > Templates > Global Templates > dvz_shoutbox i dodaj w jakimś wygodnym miejscu link do emotek:

<a href="javascript:MyBB.popupWindow('/misc.php?action=smilies&amp;popup=true&amp;editor=dvz_shoutbox&amp;modal=1')">Okno z emotami</a>

Zapisz szablon.

Kod Javascript

Teraz musimy edytować plik jscripts/dvz_shoutbox.js i do obiektu (bloku) zmiennej var dvz_shotbox dodajemy nową funkcję:

insertText: function (emotion) {
jQuery('#shoutbox input.text').val(jQuery('#shoutbox input.text').val() + emotion).focus();
    }

Zapisz plik. 

Został nam do edycji ostatni plik misc.php. Po co? Ponieważ funkcja wstawiania emotikonek pomija zmienną edytora i niezbędna jest lekka korekta kodu aby wstawianie emotikonek na czat działało. 

Otwórz plik misc.php

Znajdź:

$onclick = " onclick=\"MyBBEditor.insertText(' $smilie_insert ');\"";

zamień na:

$onclick = " onclick=\"".$editor.".insertText(' $smilie_insert ');\"";

To wszystko.

Teraz po kliknięciu w link "Okno z emotami" pojawi nam się poniższe okienko. Po kliknięciu w emotikonkę ta powinna dodać się do pola tekstowego czatu.

Niestety po kliknięciu w emotikonkę, okienko samoistnie nie znika więc trzeba je zamknąć "krzyżykiem".

Siema @szogun,

Nie wiem czy jeszcze Cię to interesuje, ale zależało mi na tym aby zrobić to w zaproponowany przez Ciebie sposób, jako że korzystając z wbudowanej w mybb funkcji nie trzeba updateować panelu ze smilesami za każdym razem gdy coś dodajemy - poza tym jest ona zwyczajnie fajna 🙂

A więc to co opisałeś krok po kroku u mnie działa 🙂 Domyślam się za to gdzie popełniłeś błąd.

istotne jest to gdzie wklejasz ten tekst - ważne jest to żeby znajdował się on wewnątrz zmiennej dvz_shoutbox.

U mnie przykładowo wygląda to w ten sposób:

var dvz_shoutbox = {

//...

insertText: function(text) {
jQuery('#shoutbox input.text').val(jQuery('#shoutbox input.text').val() + text).focus();
},

};

Mam nadzieje że to info okaże się dla Ciebie lub innych pomocne 🙂

Czym edytować dvz_shoutbox.js ?

Bo dodaje zapisuje ale nie działa klikanie i znika edycja i kasowanie wpisów shoutbox ;/

@sattvpl Notepad+

Oki mam u samej góry var dvz_shoutbox

Gdzie dokładnie dodać kod aby działało klikanie w ikony?

@sattvpl theSaint podał wyżej przykład jak należy dodać kod.

Możesz dodać albo na górze albo na dole obojętnie. Pamiętaj tylko żebyś dobrze klamrę zamknął.

Wstawiłem tak jak podałeś. Dodanie ikonek nie działa. Do tego jak tylko edytuje ten plik to ginie opcja edycji i kasowania wpisów.

Kod działa bo osobiście go niedawno testowałem więc widocznie coś źle robisz.

Zrobiłem całą reszte z ikonami, pokazuje okno z nimi, wszystkie z forum itp....

Tylko to klikanie nie działa ;/ no nic pobawie sie może sie uda.

@sattvpl otwórz dodatkowo plik misc.php.

Znajdź:

$onclick = " onclick=\"MyBBEditor.insertText(' $smilie_insert ');\"";

zamień na:

$onclick = " onclick=\"".$editor.".insertText(' $smilie_insert ');\"";

Daj znać czy pomogło.

Jeżeli nie będzie działać to sprawdź czy twój plik dvz_shoutbox.js zawiera kod który dodałeś bo może przeglądarka go jeszcze nie odświeżyła.

Żeby nie czekać to otwórz szablon dvz_shoutbox i do końcówki skryptu dvz_shoutbox.js dopisz np. ?v=1 czyli

<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/dvz_shoutbox.js?v=1"></script>

to juz miałem zmienione jak dodawałem emotki.

tak to wstawiłem.

[....]

@sattvpl nie, wciąż źle to wstawiasz. Dobra to inaczej... usuń ten kod co dodałeś albo przywróć oryginalny plik.

Otwórz dvz_shoutbox.js.

Znajdź (na samym dole):

    updateLastRead: function() {
        if (dvz_shoutbox.markUnread && dvz_shoutbox.content) {
            if (
                Cookie.get('dvz_sb_last_read') === undefined ||
                (
                    (
                        dvz_shoutbox.firstId <= Cookie.get('dvz_sb_last_read') ||
                        dvz_shoutbox.fullHistory
                    ) &&
                    Cookie.get('dvz_sb_last_read') != dvz_shoutbox.lastId
                )
            ) {
                Cookie.set('dvz_sb_last_read', dvz_shoutbox.lastId);
            }
        }
    },

};

zamień na:

    updateLastRead: function() {
        if (dvz_shoutbox.markUnread && dvz_shoutbox.content) {
            if (
                Cookie.get('dvz_sb_last_read') === undefined ||
                (
                    (
                        dvz_shoutbox.firstId <= Cookie.get('dvz_sb_last_read') ||
                        dvz_shoutbox.fullHistory
                    ) &&
                    Cookie.get('dvz_sb_last_read') != dvz_shoutbox.lastId
                )
            ) {
                Cookie.set('dvz_sb_last_read', dvz_shoutbox.lastId);
            }
        }
    },
	
insertText: function(emotion) {
jQuery('#shoutbox input.text').val(jQuery('#shoutbox input.text').val() + emotion).focus();
},

};

Po zapisaniu pliku, otwórz plik w nowym oknie (www.mojastrona.pl/jscripts/dvz_shoutbox.js) i wyszukaj "insertText".

Jeżeli jest to znaczy że plik się już odświeżył i zawiera dodany przez ciebie kod, jeżeli go nie ma to zrób tak jak napisałem wyżej. 

Dzięki ci mistrzu 🙂 pomogło.

Teraz tylko zmienie aby po kliku w ikonke okno sie zamykało 🙂

Witam, a jak powiększyć te okno z emotikonkami które się otwiera oraz nadać mu tło? (może być np czarne byle nie było przezroczyste).

Niestety u mnie wygląda to bardzo źle lecz chciałbym pozbyć się emotek z pod shoutboxa.

Ciemna Strona, skorzystaj z instrukcji którą podał P0Y3B w drugim temacie. Wtedy będziesz miał otwierane okienko a emotki nie będą pod czatem.

Witam mam problem po dodaniu jak napisał P0Y3B mam problem gdy kliknę na ikonkę i zamknę okno brak omotki nic się nie dzieje jak to naprawić, dodawałem również jak napisał SeNioR i tez nie pomogło.

Nie masz domyślnego stylu i być może klasa belki albo pola tekstu jest inna. 

W dniu 24.12.2021 o 13:28, SeNioR napisał:

Nie masz domyślnego stylu i być może klasa belki albo pola tekstu jest inna. 

Dziwne bo dodaje w default i na obecnym stylu i nigdzie nie działa.

Dobra znalazłem rozwiązanie i wszystko działa.

21 godzin temu, Raven81 napisał:

Dobra znalazłem rozwiązanie i wszystko działa.

No to podziel się rozwiązaniem dla innych :)

W dniu 20.01.2022 o 18:30, Poftorek napisał:

No to podziel się rozwiązaniem dla innych 🙂

https://webboard.pl/thread-66820.html

Dodatkowo: Inny wygląd 

Witam serdecznie mam problem dotyczący wyświetlania emotek w DVZ Shoutbox, otóż wykonałem powyższe kroki od szoguna i efekt wygląda tak.

Poniższe kroki, które wykonywałem.

Dodanie opisanego kodu na końcu w dvz_shoutbox

Następnie zmiana kodu w dvz_shoutbox_panel

Efekt wygląda jak na powyższym screenshot, czyli brak emotek, na których mi bardzo zależy, dodam, tylko że korzystam z niestandardowego wyglądu. Proszę o pomoc. Z góry dziękuję.

Dodam, tylko że skórkę kupiłem z ten strony, dokładnie ten, który znajduje się pod podanym linkiem, o ile to istotne.

https://www.codester.com/items/5969/generic-dark-responsive-mybb-theme

@Amon Z tego co widzę, to u Ciebie nie zaczytują się chyba grafiki bo wyświetlają się teksty alternatywne.

Sprawdź na FTP czy masz w folderze images folder smilies. Jeśli masz taki folder z plikami to coś jest ze ścieżką grafiki nie tak i tutaj przydałby się link do forum.

Jeśli nie masz folderu smilies to poniżej wrzucam paczkę z ostatniego wydania MyBB 1.8.32: smilies.zip

Tak posiadam folder smilies. To adres forum.

https://strefa44.com.pl/