Интересное разрабатывания стены из каталога сайтов.
Друзья. Спрашивал в чате ли делать стену для uCoz - ответил всего один пользователь. В общем благодарите его за то, что он сказал да. Иначе я бы не делал.
Стена пользователя сделана из модуля Каталог сайтов. Выводится она с помощью script и IFrame.
Хочу рассказать плюсы и минусы такой стены.
Плюсы:
1. Теперь очень модно иметь стену пользователя на сайте и делать записи или комментировать другие записи. В общем то ставлю плюс + , потому что в такой стене можно это делать.
2. Можно оформить запись в виде картинки. +
3. Мне кажется она не грузит очень сильно сайт. Вроде плюс.
4. Также плюс ставлю за то, что можно редактировать и удалять свои записи и комментарии.
5. Можно писать на стене у другого пользователя.
6. Свои эмоции можно выражать с помощью смайлов.
7. Есть функция создать стену. Если у кого-то стена не создана то нельзя добавлять записи.
Минусы:
1. Как ни крути но модуля все равно избавляемся. Стена его забирает.
2. Нельзя удалять записи других пользователей на своей стене.
3. Есть еще такой минус как лайки или оценки. Я не хотел добавлять их так как не нашел решение чтобы они исчезали при оценке записи. Может в v2 этого минуса не будет.
4. Нельзя добавлять аудиозаписи, видеозаписи как в других социальных сетях.
Вроде все плюсы и минусы сказал. Может где что пропустил.
Установка
Управление дизайном - Каталог сайтов - Страница материалов и комментариев к нему:
Код
<html>
<head>
<link type="text/css" rel="StyleSheet" href="/css/style.css" />
<style>#puzadpn {display:none}.puzadpn {display:none}
::-webkit-scrollbar {display: none;}
textarea, input {cursor:text}
textarea {resize:none}
textarea:focus, input:focus, select:focus {outline:none}
input[type=text], input[type=password], textarea{-webkit-appearance: none;resize: none;padding: 10px 10px 10px 10px;border-bottom: 2px solid #dce4ec; color: #34495e; font-family: "Lato", sans-serif; text-indent: 1px; -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out;border-top: none;border-left: none;border-right: none;border-top-left-radius: 5px;border-top-right-radius: 5px;}
input[type=text]:focus, input[type=text]:active, textarea:focus, textarea:active, input[type=password]:focus, input[type=password]:active{border-bottom: 2px solid #2196f3; border-top: none;border-left: none;border-right: none;}
button, input[type="button"], input[type="submit"], input[type="reset"]{border:none; color: #4285f4;padding: 10px 19px;font-size:14px;display: inline-block;overflow:hidden; background:#f2f6fa;text-align:center;font-weight: bold;border-radius:10px; -webkit-transition: 0.25s;-moz-transition: 0.25s;-o-transition: 0.25s;transition: 0.25s;cursor: pointer;}
button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover {overflow:hidden;background:#e6eef5;text-align:center;border-radius:10px;}
.pad20{padding: 20px;}
.button_comment {margin-top: -3px;padding: 8px;background:#F2F6FA;}
#cl_text {border: 2px solid #dce4ec;border-radius: 5px;}
.comment_over {margin-top:20px;padding-bottom:15px;border-bottom:1px solid #dedede}
.comment {display:table;width:100%;}
.comment_avatar {display:table-cell;vertical-align:top;width:64px;padding-right:15px}
.comment_avatar img {border-radius: 100px;width: 60px;height: 60px;object-fit: cover;}
.comment_message {display:table-cell;vertical-align:top;text-align:left}
.comment_message_in img {max-width: 100%;}
.del-com {display: inline-block;padding-left: 10px;}
textarea#message {width: 836px;height: 55px;}
.commform_code {display: inline-block;width: 20px;height: 18px;vertical-align: top;opacity: 0.8;background-image: url(https://web.telegram.org/img/icons/General.png);background-repeat: no-repeat;background-position: -10px -399px;}
.commform_code:hover {background-position:-10px -427px;opacity: 1;}
.drop {position: relative;}
.dropdownContain {position: absolute;z-index: 2;left: 50%;margin-left: -7em;top: -300px;}
.dropOut {background:#fff;width:190px!important;padding: 10px;box-shadow:0px 8px 35px rgba(0,0,0,0.1);position: relative;opacity: 0; @include border-radius(.4em, .4em);overflow:hidden;-webkit-transition: all 0.4s ease-out;-moz-transition: all 0.4s ease-out;-ms-transition: all 0.4s ease-out;-o-transition: all 0.4s ease-out;transition: all 0.4s ease-out;}
.dropOut a { padding: 10px;display: block;}
.dropOut a:hover {background:#f9f9f9;color:#000;text-decoration:none}
.nav, .ul:hover .triangle { opacity: 1 ;display: inline-block;}
.nav .ul:hover .dropdownContain {top:-100px; }
.nav .ul:hover .dropOut { opacity: 1; margin-bottom:20px;}
.user span{margin-left: 10px; display: inline-block; width: 22px; height: 22px; vertical-align: top; opacity: .8; background-image: url(https://web.telegram.org/img/icons/General.png); background-repeat: no-repeat; background-position: -9px -335px;}
.dropOut img{padding-left:3px;padding-top:3px;float:left;cursor:pointer}
.user span:hover{ background-position: -9px -367px;opacity: 1;}
.commform {display: inline-block;margin-left: 25px;}
.commform_smile {display: inline-block;}
i.read {height: 17px; width: 16px; background: url('http://kanavas.at.ua/img/site_page.png') -80px -46px no-repeat; vertical-align: middle; opacity: 0.5; transition: all .3s; display: inline-block;}
i.delete {height: 16px; width: 16px; background: url('http://kanavas.at.ua/img/site_page.png') -240px -199px no-repeat; vertical-align: middle; opacity: 0.5; transition: all .3s; display: inline-block; cursor: pointer;}
.comment_rate {display:table-cell;vertical-align:top;text-align:center;width:80px}
.comment_top {padding-top:2px;padding-bottom:7px;font-size:17px;line-height:20px}
.comment_top a {text-decoration:none;color:#6c6c6c}
.comment_top .comm_time {font-size:12px;color:#9c9c9c;display:inline-block;padding-left:10px}
.comment_message_in {font-size:15px}
.comment_over:hover .comment_answer_button a {display:inline-block}
.comment_over:hover .c_rate_plus a, .comment_over:hover .c_rate_minus a {display:block}
.comment_answer_button {margin-top:10px;height:24px}
.comment_answer_button a {display:none;color:#666;font-size:13px;text-decoration:none;background:#efefef;padding:3px 10px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px}
.comment_answer_button a:hover {color:#1d1d1d;text-decoration:none;background:#eaeaea;}
</style>
<style>.com-order-block {display:none;}</style>
</head>
<body>
<div class="wrapper pad20">
<?if($COM_IS_ACTIVE$)?>$COM_ADD_FORM$
<?if($COM_CAN_READ$)?>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td width="60%" height="25">
<h2 style="font-size: 15px;margin-left: 10px;padding: 10px 0px;color: #b2c8db;">
<b>$COM_NUM_ENTRIES$</b> запис<?if($COM_NUM_ENTRIES$%10=0||$COM_NUM_ENTRIES$%10>4||$COM_NUM_ENTRIES$%100>10&&$COM_NUM_ENTRIES$%100<15)?>ей<?else?><?if($COM_NUM_ENTRIES$%10=1)?>ь<?else?>и<?endif?><?endif?>
</h2></td><td align="right" height="25">$COM_PAGE_SELECTOR$</td></tr>
<tr><td colspan="2">$COM_BODY$</td></tr>
<tr><td colspan="2" align="center">$COM_PAGE_SELECTOR1$</td></tr>
<tr><td colspan="2" height="10"></td></tr>
</table>
<?endif?><?endif?>
</div>
</div>$POWERED_BY$
</body>
</html>
Управление дизайном - Каталог сайтов - Вид материалов
Код
<div class="eTitle">$ENTRY_URL$</div>
Настройки модуля - Форма добавления материала - убираем все галочки кроме "Название сайта". И создаем категорию, чтобы у неё был id 1.
В форму добавления комментариев:
Код
<?if($MODULE_ID$="dir")?> <?if($USER_LOGGED_IN$)?><div style="display:none;">$BBCODES$</div>
<div class="cl_editor" id="cl_text">
<textarea name="message" id="message" class="send_comment">$MESSAGE$</textarea>
<?if($SECURITY_CODE$)?><tr><td class="commTd1" nowrap>Код: </td><td class="commTd2">$SECURITY_CODE$</td></tr><?endif?>
<div class="button_comment"><input class="button" type="submit" name="submit"> <div class="commform"><div class="commform_code" onclick="smiles('[img][/img]')"></div>
<div class="nav">
<div class="ul">
<div class="drop">
<div class="user">
<span> </span>
</div>
<div class="dropdownContain">
<div class="dropOut">
<img src="http://kanavas.at.ua/smiles/smile.gif" onclick="smiles(':)')" alt="" />
<img src="http://kanavas.at.ua/smiles/wink.gif" onclick="smiles(';)')" alt="" />
<img src="http://kanavas.at.ua/smiles/laugh.gif" onclick="smiles(':D')" alt="" />
<img src="http://kanavas.at.ua/smiles/cool.gif" onclick="smiles('B)')" alt="" />
<img src="http://kanavas.at.ua/smiles/sad.gif" onclick="smiles(':(')" alt="" />
<img src="http://kanavas.at.ua/smiles/cry.gif" onclick="smiles(':cry:')" alt="" />
<img src="http://kanavas.at.ua/smiles/care.gif" onclick="smiles('^_^')" alt="" />
<img src="http://kanavas.at.ua/smiles/tease.gif" onclick="smiles(':p')" alt="" />
<img src="http://kanavas.at.ua/smiles/shock.gif" onclick="smiles('%)')" alt="" />
<img src="http://kanavas.at.ua/smiles/angel.gif" onclick="smiles('0:)')" alt="" />
<img src="http://kanavas.at.ua/smiles/eye.gif" onclick="smiles(':eye:')" alt="" />
<img src="http://kanavas.at.ua/smiles/fools.gif" onclick="smiles(':fools:')" alt="" />
<img src="http://kanavas.at.ua/smiles/please.gif" onclick="smiles(':please:')" alt="" />
<img src="http://kanavas.at.ua/smiles/desman.gif" onclick="smiles(':des:')" alt="" />
<img src="http://kanavas.at.ua/smiles/xd.gif" onclick="smiles(':xD:')" alt="" />
<img src="http://kanavas.at.ua/smiles/like.gif" onclick="smiles(':like:')" alt="" />
<img src="http://kanavas.at.ua/smiles/unlike.gif" onclick="smiles(':unlike:')" alt="" />
<img src="http://kanavas.at.ua/smiles/ok.gif" onclick="smiles(':ok:')" alt="" />
<img src="http://kanavas.at.ua/smiles/peace.gif" onclick="smiles(':peace:')" alt="" />
<img src="http://kanavas.at.ua/smiles/clups.gif" onclick="smiles(':clups:')" alt="" />
</div>
</div>
</div>
</div> </div></div>
</div><div class="cerr">$ERROR$</div><?endif?>
<script type="text/javascript">
function smiles(tx) {
$('#message').val($('#message').val()+' '+tx+' ')
$('#message').focus()
}
</script>
<?endif?>
В вид комментариев:
Код
<?if($MODULE_ID$="dir")?>
<script type="text/javascript">
function getrate(strid) {
$('#mok'+strid).toggle(0)
$('#mjk'+strid).toggle(0)
}
</script>
<div class="post all" onmouseover="wall.postOver('')" onmouseout="wall.postOut('')">
<div class="comment_over">
<div class="comment">
<div class="comment_avatar"><a href="$PROFILE_URL$" target="_blank"><img src="<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?else?>http://yraaa.ru/images/noavatar.gif<?endif?>" width="64" alt="" /></a></div>
<div class="comment_message">
<div class="comment_top"><?if($USERNAME$)?><a href="$PROFILE_URL$" target="_blank">$NAME$</a><?endif?> <span class="comm_time">$DATE$ в $TIME$<?if($ENTRY_URL$)?> / <a href="$ENTRY_URL$">Материал</a><?endif?></span><?if($MODER_PANEL$)?><div style="display:none">$MODER_PANEL$</div>
<div class="del-com ">
<a href="javascript://" rel="nofollow" onclick="new _uWnd('Ie',' ',-600,-200,{autosize:1,closeonesc:1,resize:0},{type:'POST', url:'/index/37-$ID$', data: { sdata: ssdata[scurrent], soc_type: scurrent}});return false;"><i class="read"></i></a>
<a onclick="$('#dt$ID$').fadeOut(150);del_item('$ID$');setTimeout(function(){$('#public_$ID$').fadeTo(200, 0.1);$('#public_$ID$').slideToggle(200)},2000)" onmouseover="setClass('bom0$ID$',)" onmouseout="setClass('bom0$ID$',)" id="bom0$ID$"><i class="delete"></i></a>
</div>
<?endif?></div>
<div class="comment_message_in">$MESSAGE$</div>
<?if($ANSWER_URL$)?><div class="comment_answer_button"><a href="$ANSWER_URL$">Комментировать</a></div><?endif?>
</div>
</div>
</div>
</div><?endif?>
8. Управление дизайном - Пользователи - Персональная страница пользователя. Ставим туда, куда хотим видеть стенку:
Код
<?if($_DIR_ENTRIES$="0" && $_IS_OWN_PROFILE$)?>
<div class="pad10"><center><input id="create" type="button" value="Создать стену" /></center></div>
<script type="text/javascript">
$(function(){
$('#create').click(function() {
$(this).attr('disabled','disabled');
$.get("/dir/0-0-0-0-1", function(data) {
$.post("/dir/", {
a: 12,
jkd428: 1,
jkd498: 1,
ocat: 1,
title: '$USERNAME$',
tags: '$USERNAME$',
coms_allowed: 1,
ssid: $('[name="ssid"]', data).val()
}, function(res) {
$('#create').remove();
location.reload()
})
})
})
})
</script><?endif?>
<?if($_DIR_ENTRIES$)?><script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
setInterval(function() {resizeIframe(document.getElementById('frame'))},200 )
</script>
<script type="text/javascript">
document.write('<div class="prog"></div>');
$.get("/dir/0-0-$_USER_ID$-0-17",
function(data) {
var ifnohist = $(".eTitle:first", data).html();
$('.prog').html('<iframe id="frame" src=" '+ifnohist+' " width="100%" frameborder="0"></iframe>');
});
</script>
<?endif?>
Ждем второй версии.