User status : cтатусы для пользователей в профиль [BETA]

19/08/2020 14:33

Модуль позволит пользователям сайта делиться различными мыслями, состоянием, эмоциями или же другой информацией. Имеет возможность использовать html теги, которые допускаются в настройках групп пользователей. С этим становится доступным прикрутить использование смайлов.

Он не до конца проработан и имеет скорей всего недостатки в виде возможности установить абсолютно пустое пространство. Или использовать картинки и теги для их размещения, так и для смайлов нужно использовать тег:

<img>

JS функция

var gStatus = {
    
    timer: null,
    
    timeout: 500,
    
    open: function() {
        
        $('#set_status_bg').fadeIn(100);
        
        if( $('#currinfo_input').text() ) {
            
            $('.yes_status_text').removeClass('no_display').show();
            $('.no_status_text').hide();
            
        } else {
            
            $('.yes_status_text').hide();
            $('.no_status_text').removeClass('no_display').show();
            
        }
        
        $('.status_tell_friends').hide();
        
    },
    insertSmile: function(obj) {
        
        var img = '<img alt="laughing" class="emoji" src="'+dle_root+'engine/data/emoticons/'+obj+'.png">';
                        
        $('#currinfo_input').html( $('#currinfo_input').html() + ' ' + img );
        
    },
    showSmile: function(obj) {
        
        $('.emoji-select').css({'top': '28px', 'left': ($(obj)[0].offsetLeft - ( $('.emoji-select').width()/2 ) + 11) +'px'}).toggleClass('fr-active');
        
        $('.emoji-select')
        .mouseleave(function() {
            
            gStatus.timer = setTimeout(function() {

                $('.emoji-select').unbind('mouseleave').unbind('mouseenter');
                $(obj).unbind('mouseleave').unbind('mouseenter');
                $('.emoji-select').removeClass('fr-active');
        
            }, gStatus.timeout);
            
        })
        .mouseenter(function() {
            window.clearTimeout(gStatus.timer);
        });
        $(obj)
        .mouseleave(function() {
            
            gStatus.timer = setTimeout(function() {

                $('.emoji-select').unbind('mouseleave').unbind('mouseenter');
                $(obj).unbind('mouseleave').unbind('mouseenter');
                $('.emoji-select').removeClass('fr-active');
        
            }, gStatus.timeout);
            
        })
        .mouseenter(function() {
            window.clearTimeout(gStatus.timer);
        });        
        
    },    
    close: function() {
        
        $('#set_status_bg').fadeOut(100);
        
    },
    set: function(clear, a) {
        
        text = $('#currinfo_input').html();
        status_l = $('#status_link').html();
        
        if( status_l == 'Установить статус' ) status_l = '';

        if( clear ) {
            text = '';
            $('#currinfo_input').html('');
        }

        if( text != status_l ) {
            
            $.post(dle_root + 'engine/ajax/controller.php?mod=status', {text: text, clear: clear}, function(data){
                
                if( data.text ) {
                    $('#status_link, #currinfo_input').html(data.text);
                } else $('#status_link').html('Установить статус');

                gStatus.close();
                
            }, 'json');
            
        } else gStatus.close();

    },
}

Используемые теги в шаблонах:

{status-text} - основной тег, выводящий статус либо уведомление
[owned] ... [/owned] - тег показывающий содержимое, если просматриваемый профиль принадлежит просматриваемому пользователю.
[status] ... [/status] - тег показывающий содержимое при установленном статусе
[no-status] ... [/no-status] - тег с противоположным действием тегу [status]

Важно: в шаблоне profile_popup.tpl доступны все теги кроме owned.

Базовая HTML разметка

В ней только 1 блок смайлов, для примера.

    <span class="status">{status-text}[owned]<a href="#" class="status-btn" onClick="gStatus.open(); return false;" title="Изменить"><svg class="icon icon-pencil"><use xlink:href="#icon-pencil"></use></svg></a>[/owned]</span>
    [owned]
    <div class="set_status_bg" id="set_status_bg">
        <div class="status_wrap">
            <div class="emoji_status_btn" onclick="gStatus.showSmile(this);"></div>
            <div class="emoji-select">
            <span class="em-arrow" style="margin-left: -5px;"></span>
            <div class="emoji-wrap">
                <table style="width:100%;border: 0px;padding: 0px;">
                    <tbody>
                        <tr>
                            <td style="padding:5px;text-align: center;" align="center"><button onclick="gStatus.insertSmile('smile'); return false;" ontouchstart="gStatus.insertSmile('smile'); return false;"><img alt="smile" class="emoji" src="/engine/data/emoticons/smile.png" srcset="/engine/data/emoticons/smile@2x.png 2x"></button></td>
                            <td style="padding:5px;text-align: center;" align="center"><button onclick="gStatus.insertSmile('laughing'); return false;" ontouchstart="gStatus.insertSmile('laughing'); return false;"><img alt="laughing" class="emoji" src="/engine/data/emoticons/laughing.png" srcset="/engine/data/emoticons/laughing@2x.png 2x"></button></td>
                            <td style="padding:5px;text-align: center;" align="center"><button onclick="gStatus.insertSmile('smiley'); return false;" ontouchstart="gStatus.insertSmile('smiley'); return false;"><img alt="smiley" class="emoji" src="/engine/data/emoticons/smiley.png" srcset="/engine/data/emoticons/smiley@2x.png 2x"></button></td>
                            <td style="padding:5px;text-align: center;" align="center"><button onclick="gStatus.insertSmile('smirk'); return false;" ontouchstart="gStatus.insertSmile('smirk'); return false;"><img alt="smirk" class="emoji" src="/engine/data/emoticons/smirk.png" srcset="/engine/data/emoticons/smirk@2x.png 2x"></button></td>
                            <td style="padding:5px;text-align: center;" align="center"><button onclick="gStatus.insertSmile('wink'); return false;" ontouchstart="gStatus.insertSmile('wink'); return false;"><img alt="wink" class="emoji" src="/engine/data/emoticons/wink.png" srcset="/engine/data/emoticons/wink@2x.png 2x"></button></td>
                            <td style="padding:5px;text-align: center;" align="center"><button onclick="gStatus.insertSmile('stuck_out_tongue_winking_eye'); return false;" ontouchstart="gStatus.insertSmile('stuck_out_tongue_winking_eye'); return false;"><img alt="stuck_out_tongue_winking_eye" class="emoji" src="/engine/data/emoticons/stuck_out_tongue_winking_eye.png" srcset="/engine/data/emoticons/stuck_out_tongue_winking_eye@2x.png 2x"></button></td>
                            <td style="padding:5px;text-align: center;" align="center"><button onclick="gStatus.insertSmile('stuck_out_tongue_closed_eyes'); return false;" ontouchstart="gStatus.insertSmile('stuck_out_tongue_closed_eyes'); return false;"><img alt="stuck_out_tongue_closed_eyes" class="emoji" src="/engine/data/emoticons/stuck_out_tongue_closed_eyes.png" srcset="/engine/data/emoticons/stuck_out_tongue_closed_eyes@2x.png 2x"></button></td>
                        </tr>
                    </tbody>
                </table>                
            </div>
            </div>            
            <div class="status_input" id="currinfo_input" contenteditable="true" role="textbox" onkeypress="if(event.keyCode == 13 && !event.shiftKey){gStatus.set(); return false;}">{val-status-text}</div>
        </div>
        <div class="status_text"><span class="no_status_text [status]no_display[/status]">Введите здесь текст Вашего статуса.</span><a href="/" class="yes_status_text [no-status]no_display[/no-status]" style="display: inline-block;" onClick="gStatus.set(1); return false">Удалить статус</a></div>
        <button class="ui-button" style="float: right;" onClick="gStatus.close(); return false;">Отмена</button>
        <button class="ui-button" style="float: left;" id="status_but" onClick="gStatus.set(); return false;">Сохранить</button>
    </div>
    [/owned]

CSS правила

.status {
    padding: 3px;
    margin-bottom: 5px;
    border-bottom: 2px solid #949494;
    width: calc(100% - 8px);
    display: inline-block;
}
.status .emoji { margin: 0; }

#dleprofilepopup .status {
    margin-left: 0;
    margin-bottom: 10px;
    display: block;
    background: #aaaaaa6b;
    padding: 3px;
    border-radius: 5px;
    border: 1px solid #AAA;
}

.status_wrap { position: relative; }

.set_status_bg{
    z-index: 10;
    display: none;
    background: #f5f5f5;
    box-shadow: 0px 1px 1px 1px #e9e9e9;
    -moz-box-shadow: 0px 1px 1px 1px #e9e9e9;
    -webkit-box-shadow: 0px 1px 1px 1px #e9e9e9;
    border: 1px solid #ced6df;
    padding: 5px;
    position: absolute;
    width: 350px;
}

.set_status_bg .fr-popup .dle-emoticon {
    min-width: 310px;
    height: 200px;
    overflow-y: scroll;
}

.status_but{ margin-top: 5px; }

.status_but button{
    padding: 3px 10px 3px 10px;
}

.status_text{
    margin-top: 8px;
    margin-left: 3px;
    margin-bottom: 8px;
    color: #888;
}

.status_inp{
    border: 1px solid #c6d4dc;
    padding: 4px 4px;
    width: calc(100% - 10px);
}

.status_tell_friends{
    background: #f7f7f7;
    box-shadow: 0px 1px 1px 1px #e9e9e9;
    -moz-box-shadow: 0px 1px 1px 1px #e9e9e9;
    -webkit-box-shadow: 0px 1px 1px 1px #e9e9e9;
    border: 1px solid #aebdcc;
    height: 14px;
    color: #21578b;
    padding: 5px;
    width: 127px;
    position: absolute;
    margin-top: 12px;
}

.status-btn {
    padding: 3px;
    margin-left: 5px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity .25s ease-in-out, visibility .25s ease-in-out;
}

.status:hover .status-btn {
    opacity: 1;
    visibility: visible;
}

.status_wrap .status_input {
    width: 100%;
    margin: 0 0 10px;
    box-sizing: border-box;
    padding: 5px 24px 6px 9px;
    min-height: 28px;
    line-height: 14px;
    outline: none;
    word-wrap: break-word;
    border-radius: 3px;
    border: 1px solid #d3d9de;
    background: #FFF;
}
.status .emoji {
    width: 17px;
    height: 17px;
}

.emoji_status_btn {
    position: absolute;
    right: 5px;
    line-height: 28px;
    color: #565656;
    transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    opacity: .7;
    background:url("dаta:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20opacity%3D%22.4%22%20d%3D%22M0%200h24v24H0z%22%2F%3E%3Cpath%20fill%3D%22%23828A99%22%20fill-rule%3D%22nonzero%22%20d%3D%22M2%2012C2%206.477%206.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010S2%2017.523%202%2012zm18.3%200a8.3%208.3%200%201%200-16.6%200%208.3%208.3%200%200%200%2016.6%200zm-11.05-.5a1.25%201.25%200%201%201%200-2.5%201.25%201.25%200%200%201%200%202.5zm5.5%200a1.25%201.25%200%201%201%200-2.5%201.25%201.25%200%200%201%200%202.5z%22%2F%3E%3Cpath%20stroke%3D%22%23828A99%22%20stroke-width%3D%221.7%22%20d%3D%22M9%2014.85c.833.767%201.833%201.15%203%201.15s2.167-.383%203-1.15%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 50% no-repeat;
    width: 24px;
    height: 24px;
}

.emoji_status_btn:hover {
    opacity: 1;
    cursor: pointer;
}

.emoji-select {
    position: absolute;
    display: none;
    background: #fff;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 1px 1px rgba(0,0,0,.16);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 1px 1px rgba(0,0,0,.16);
    box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 1px 1px rgba(0,0,0,.16);
    border-top: 1px solid #222;
    border-radius: 2px;
    margin-top: 5px;
    z-index: 9999999 !important;
    padding-top: 1px;
}

.emoji-select button {
    background: none;
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 3px;
    transition: background .25s ease-in-out;
    -webkit-transition: background .25s ease-in-out;
}

.emoji-select button:hover {
    background: #412e8b36;
    cursor: pointer;
}

.emoji-select.fr-active { display: block; }

.emoji-select .em-arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #222;
    position: absolute;
    top: -6px;
    left: 50%;
    margin-left: -5px;
    display: inline-block;
}

.emoji-wrap {
    min-width: 310px;
    height: 200px;
    overflow-y: scroll;
}

user-status-ctatusy-dlja-polzovatelej-v-profil.zip

Создайте аккаунт или авторизуйтесь для скачивания

• Версия DLE: 14.x
• Кодировка: utf-8
• Автор: TeraMoune

Oxigen
2
946

Информация
Посетители, находящиеся в группе Гость, не могут оставлять комментарии к данной публикации.

Комментариев 2

TeraMoune 1 марта 2021 19:32

Цитата: vir2oz

TeraMoune, отличный модуль!

Если есть желание, то доработать его можно по следующим пунктам:
1) Добавить тегу [owned] противоположный, чтобы можно было в один тег засунуть не кликабельный статус для всех пользователей, а автору кликабельный для изменения статуса, чтобы не тулить рядом всякие иконки для редактирования. Грубо говоря, как это сделано в ВК.
2) Оставить безопасный режим, но сделать выбор нужной иконки статуса, как это реализовано сейчас в том же ВК (возле ФИО на странице профиля). И сделать соответствующие теги для вывода и отсутствия.
3) Добавить возможность выводить статусы пользователей на сайте в любом месте. По типу блока последних комментариев.

Это основное, чего сейчас не хватает!

1) Учитывая, что в статусе есть разрешение использование html, а это позволяет определённым группам публиковать ссылки. Кликабельность статуса была убрана ведь при ссылке её нельзя было нажать mouse1. Раньше изменение статуса было в самом теге {status-text}. У вк же нету возможности кликабельные ссылки публиковать. И самостоятельно добавить необходимые теги не проблема. В плагине есть условие для владельца и постороннего. У постороннего, тег затирается $tpl->set_block, у собственника удаляются лишь сами теги через $tpl->set. Подумайте как стоит сделать, и допишите в одно условие противоположные теги с приставкой not но с обратным действием друг-другу. Плагин бесплатный не зачем требовать добавлять теги когда можно самому это сделать.

2) Не совсем понял о чём речь. Но частично речь о тегах, а это опять же легко делается самостоятельно. Там всё предельно понятно, есть условие с if/else которое содержит код для владельца страницы и постороннего, при этом в каждой части есть так же условие определяющее тег {status-text} который либо заполнен либо пуст. Так же докинуть пару строк и создать свои теги.
(Так же можно присвоить соответствующий атрибут onclick определённому тегу чтобы владелец мог по клику на статус открыть окно изменений)

Так, что можно хотя бы методом тыка потыкать что-то и что-нибудь понять, хотя бы теги добавлять самому.

3) Насчёт этого сложно сказать, сделать то не проблема, но пока я не вижу чтобы плагин был таким уж интересным. Может будет \ может нет. Если плаги нужен лишь паре человек, а остальным безразлично то думаю никаких обнов не получиться.

P.S. И предложения лучше писать непосредственно на сайте источнике, думать, что я регулярно проверяю другие сайты не стоит. Я могу и вовсе не заходить, следовательно о предложениях я могу и не узнать. (Но эти предложения копировать уже туда не стоит)

vir2oz 28 февраля 2021 19:14