» »

Информер команды сайта для uCoz

Информер команды сайта для uCoz

На одном сайте увидел подобный блок, он выводил список админов, модераторов и так далее, где в данный момент находятся на интернет сайте. Где решил сделать такое же для uCoz, но появилась проблема с тем, что такого информера нет, пришлось писать. С итоге получился вполне себе информер, понятный и удобный, а главное компактный.

Что же он делает:

Выводит, указанных вами, пользователей.
Показывает кто из них онлайн\оффлайн.
Этого вполне достаточно.

Установка:

В нужное для вас место, вставьте этот код:

Код
<div class="IOT">  
<div class="title">Команда сайта онлайн</div> <!--Шапка-->  
<div class="users"></div> <!--Сюда выводятся пользователи-->  
<div class="draft" style="display:none"></div> <!--Не удалять-->  
</div>  

<script>  
var teamArr = [1,2,3];  
for (var i=0; i<teamArr.length; i++) {  
var userBlock = $('.IOT .draft').load('/index/8-'+teamArr[i]+' .IOT-cart',function(){  
userBlockHtml = $(this).html();  
if(userBlockHtml) {  
$('.IOT .users').append(userBlockHtml);  
}  
$('.IOT .draft').html('');  
});  
}  
</script>

Это сам код информер:

Обратите внимание: teamArr = [1,2,3] - в квадратные скобки, через запятую, указываем ID тех, кто является часть команды сайта, чтобы он выводился в блок.

Далее заходим в ПУ > Управление дизайном > Персональная страница пользователя и вставьте после данный код:

Код
<?if($_GROUP_ID$=4 || $_GROUP_ID$=3)?>  
<div style="display:none">  
<div class="IOT-cart <?if($_LOGGED_IN$)?>IOT-online<?endif?>" title="Пользователь <?ifnot($_LOGGED_IN$)?>не<?endif?> в сети">  
<a href="/index/8-$_USER_ID$" target="_blank">  
<div class="IOT-ava">  
<?if($_AVATAR$)?>$_AVATAR$<?else?><img src="<?if($_AVATAR_URL$)?>$_AVATAR_URL$<?else?>/img/noava.png<?endif?>"><?endif?>  
</div>  
<div class="IOT-info">  
<div class="IOT-name"><?if($_USERNAME$)?>$_USERNAME$<?else?>$_NAME$<?endif?></div>  
<div class="IOT-group IOT-group-color_$_GROUP_ID$">$_GROUP_NAME$</div>  
</div>  
</a>  
</div>  
</div>  
<?endif?>

Этот будет выводить блок пользователя.
Обратите внимание: - внутри условия указывается ID группы, к которой относится пользователь.

Ну и Таблица стилей (CSS):

Код
.IOT {display: block; width: 100%; background: #fff;}  
.IOT .title {display: block; width: calc(100% - 20px); padding: 10px; font-size: 1.25em; color: #333; border-bottom: 1px dotted #666; margin-bottom: 10px;}  
.IOT .users {display: block; width: calc(100% - 16px); padding: 0 8px 10px;}  
.IOT .draft {display: none !important;}  

.IOT .IOT-cart {display: block; width: 100%; height: 50px; margin-bottom: 10px; cursor: pointer; border-radius: 50px; border: 2px solid transparent;}  
.IOT .IOT-cart a {text-decoration: none !important;}  
.IOT .IOT-cart:hover {background-color: #cce5f6; border-color: #cce5f6;}  
.IOT .IOT-cart:last-child {margin-bottom: 0;}  
.IOT .IOT-ava, .IOT .IOT-info {display: inline-block; float: left;}  
.IOT .IOT-ava {width: 46px; height: 46px; margin-right: 5px; border: 2px solid #999; position: relative; border-radius: 100%;}  
.IOT .IOT-ava::before {content: ''; display: block; background-color: #999; width: 10px; height: 10px; border: 2px solid #fff; position: absolute; bottom: 0; right: 0; border-radius: 100%;}  
.IOT .IOT-cart:hover .IOT-ava::before {border-color: #cce5f6;}  
.IOT .IOT-ava img {width: 100%; height: 100%; object-fit: cover; border-radius: 100%;}  
.IOT .IOT-info {width: calc(100% - 60px); color: #333; padding: 5px 5px 5px 0;}  
.IOT .IOT-name, .IOT .IOT-group {display: block; height: 20px; line-height: 20px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}  
.IOT .IOT-name {}  
.IOT .IOT-group {}  
.IOT .IOT-group-color_4 {color: #e74c3c;} /* default ID admin */  
.IOT .IOT-group-color_3 {color: #5b48a2;} /* default ID moder */  

.IOT .IOT-cart.IOT-online .IOT-ava {border-color: #2ecc71;}  
.IOT .IOT-cart.IOT-online .IOT-ava::before {background-color: #2ecc71;}

Источник: pandora.clan.su
24.09.2018 Просмотров: 327 Комментарий: (9)

Поделиться в социальных сетях

Материал разместил

Комментарий: 9
Kosten
Kosten 24.09.2018 17:181
0
Так вероятно для форума можно сделать?
-SAM-
-SAM- 24.09.2018 17:594
+2
Блок можно этот поставить куда угодно, как написано - ставиться в нужное место. Если вы про подгрузку аватарки, то всё уже обсуждалось многократно, к примеру, здесь.

И да, согласен с waak - реализация оставляет желать лучшего. Можно и без api, просто там нужно тайминги на запросы к страницам прописать, чтобы сразу не "ломилось" ко всем, а через 2-3 сек (как-то так). У кого команда сайта небольшая - скрипт вообще нецелесообразно подключать по сути, а просто статическим блоком вывести (и авы часто не меняют есть, как и должности).
И есть еще маленькая "хитрость", так сказать, что во время get-запроса вся страница грузиться же, можно запрос делать к странице персональной с ключом (?), а на саму страницу шаблона персональной, когда подключать это содержимое, то подключать в связке с $REQUEST_URI$ и ключом (чтобы того кода не было на страницах без ключа, а когда запрос идёт - не было всего того, что идёт по умолчанию на персональной)... бывалые поймут, кто не понял - вам и не нужно.


UPD.:
CbIPoK2513
CbIPoK2513 24.09.2018 19:415
0
"Убираем лишние пробелы" - они ничего не испортят, так что можно оставить (и лишних там нет).

"Как понять вот это" - легко. Раньше, по крайней мере я, сталкивался с проблемой, что через $_AVATAR$ - получаем img с ссылкой, а $_AVATAR_URL$ - ссылку и часто первый вариант имел картинку, а второй был пустой.
Это работает так: Если есть аватарка (img) - выводим, если нет, проверяем есть ли ссылка, если есть - выводим в img, если нет, выводим в img noava.

"Вот ещё:" - у меня на сайте есть пользователи, у которых не выводится $_USERNAME$ или $_NAME$, в приоритете у меня $_USERNAME$.

По поводу реализации, сделал на скорую руки и не расчитывал на больше кол-во отображаемых пользователей.
К тому же указывать пользователей будет админ сам, а не автоматом проходиться по группам.
waak
waak 24.09.2018 17:182
0
А зачем этот скрипт?
Я про гет запросы?

Можно было и через апи выводить инфу а в этом скрипте если команда из 10 или 15 человек то сразу бан можно получить за гет запросы а через апи прокатит ещё
Kosten
Kosten 24.09.2018 17:213
0
Да, не очень, когда такой небольшой потолок.
CbIPoK2513
CbIPoK2513 24.09.2018 19:436
0
Скрипт.. Честно, не знаю, но как вариант его можно использовать как "Ей, смотри, у нас тут админы онлайн, можешь связаться с ними и уточнить инфу".
Думаю вполне удобно.

В целом я все скрипты пишу без какого-либо смысла, чисто для себя\"набивания руки"

Окей, познакомлюсь с апи, попробую переписать.
-SAM-
-SAM- 25.09.2018 06:427
0
По поводу того, что вывод АМС онлайн: есть скрипт в сети, что в блок данные идут из /index/62, а также можно брать из /index/62-2 и выводить АМС, которые были на сайте сегодня (это просто так говорю, кто читать будет, как и возможно, что им такой вариант пригодиться - вывод с привязкой к посещалке сайта АМС, а не его командой).

Пост адресован не вам, CbIPoK2513, если что. А вообще, можно взять и реализовать свой вариант такого скрипта, поскольку то, что видел - это больше сделано под статистику и идёт как информирование о входе\выходе пользователей с сайта, а не привязка к группам АМС (что можно там еще сделать ссылку на отправку ЛС - для авторизированных пользователей). В общем, поделился идеей просто.

UPD.: VIP36RUS, за скрин спасибо. Прилично смотрится. Такой блок можно тоже формировать через запросы (или статически).

CbIPoK2513
CbIPoK2513 25.09.2018 15:398
0
Да, через $_USER_ID$ удобнее, на персоналке. Но я по этому и указал там группу, т.к. проще в teamArr добавить\убрать.
VIP36RUS
VIP36RUS 25.09.2018 19:369
0
Сразу вспоминается как когда то делал связь для большой команды
avatar