Forums / National / Russian / Тех. поддержка / Не могу понять как поймать уникальное ID в цикле комментариев.

Kopusha
#1 2017-12-12 11:42

Мне надо на лету добавлять в выводимом html с помощью скрипта у картинок с определенным стилем определенный атрибут. 

Но в TPL комментариев  эта конструкция

<script>
document.addEventListener("DOMContentLoaded",function(){
$('._add-fancy-lone').attr('data-fancybox', 'gallery-lone-{COMMENTS_ROW_ID}');
});
</script>
 
дает ВСЕ комментарии с разными ID как одно последнее, теряется весь смысл.
 
Нужно для каждой картинки с стилем _add-fancy-lone в комментариях добавить аттрибут data-fancybox с уникальным значением для этого комментария. То есть Вася добавил 4 картинки и они собрали свою галерею из 4 картинок в фансибоксе, Петя потом еще 3 и его 3 крутятся в ротации отдельно от Васиных. У меня как ни пробую - всюду атрибут один. Пробовал вне цикла js ставить и через глобальную переменную туда пихать 0 толку ноль. {COMMENTS_ROW_ID} всегда один. Что то я не догоняю)
 
Все получают data-fancybox="gallery-lone-141" хотя у двух комментариев ID 140 141 как ни пихаю.
Два разным коммента с разными ID естественно. 
И не могу добится что бы они не вместе в 1 карусели были. А по отдельности. Вот тут видно что это 2ая картинка из трех, а надо две отдельно и одна отдельно (разные комментарии - разные фансибоксы.)
 

Added 2 minutes later:

UPD!!!
Все... Туплю!

Я в цикле луплю идентичные яваскрипты и последний перезаписывает предыдущие. 

Есть у кого то мысли как можно выкрутится?

Added 34 seconds later:

Я же не могу ВНЕ цикла получить COMMENTS_ROW_ID уникальность?

Added 1 hour later:

Вот так тоже что логично не получается((((

<!-- BEGIN: COMMENTS_ROW -->
<script>
var commentID = '{COMMENTS_ROW_ID}';
</script>

<!-- END: COMMENTS_ROW -->

<script>
document.addEventListener("DOMContentLoaded",function(){
$(".comment").click(function() {
   alert(commentID);
});
});
</script>

Added 1 hour later:

Решил кардинально через 

// Hack for fancybox
document.addEventListener("DOMContentLoaded",function(){
var fancyiii=0;
$("._add-fancy-lone").each(function(){
fancyiii++;
$(this).attr("data-fancybox","gallery-lone-"+fancyiii);
});
});
 
Мне РАЗНЫЕ надо было циферки...Теперь с коммента на другой коммент не перескакивает карусель фансибокса. Но с вопросом выше так и не понял как делать. Если у кого будет терпение расписать буду благодарен)
This post was edited by Kopusha (2017-12-12 14:54, 6 years ago)
Macik
#2 2017-12-12 15:53

`COMMENTS_ROW_ID` меняется только внутри шаблона комемнтария при проходе цикла вывода комментов.

Поэтому один из вариантов примерно такой: 

- в шаблоне комментариев сделать контейнер с data-id соотв. ID коммента, 
 

<div class="commentbox" data-id="{COMMENTS_ROW_ID}"> 
...
</div>

В скрипте (после загрузки всей ленты комментов, или при ее обновлении) пробегаем по всем элементам `.commentbox` и назначаем соотв. ID внутренним элментам типа `img`.

https://github.com/macik
правильный хостинг — https://goo.gl/fjCa1F
Kopusha
#3 2017-12-12 20:04
<div class="comment-body _sortimages" data-id="{COMMENTS_ROW_ID}"> 
{COMMENTS_ROW_TEXT}
</div>

<script>	                        
	var getid = document.getElementsByClassName('comment-body');
	for(var i=0, l=getid.length; i<l; i++){
		 var fancyid = getid[i].getAttribute("data-id");
		 alert(fancyid);
		 $('.comment-body').each(function(){
			 $(".comment-body a").attr("data-fancybox", fancyid);
		 });	
	}
</script>

 alert(fancyid); перечисляет красиво от 165 до 161 все 4 id комментариев.

а вот в коде html уже data-fancybox="161" у ВСЕХ ссылок внутри дива comment-body

Пробовал как внутри цикла комментариев так и снаружи - data-fancybox="161" у ВСЕХ

 

Roffun
#4 2017-12-12 22:24
#43185 Kopusha:
Нужно для каждой картинки с стилем _add-fancy-lone в комментариях добавить аттрибут data-fancybox

Что за стиль такой ? Возможно имели ввиду class ?

#43187 Kopusha:
  alert(fancyid); перечисляет красиво от 165 до 161 все 4 id комментариев.

а вот в коде html уже data-fancybox="161" у ВСЕХ ссылок внутри дива comment-body

Пробовал как внутри цикла комментариев так и снаружи - data-fancybox="161" у ВСЕХ

 

Возможно не успевает загрузиться параметр, я недавно для своих нужд делал галерею на js, тоже некоторые параметры не видело, оказалось нужно было вешать событие onload.

Улетел на другую планету, а там почты нету.. https://www.cotonti.com/forums/45298?m=posts
Kopusha
#5 2017-12-12 22:26

В принципе сделал счетчиком простым - у 1 коммента id1, у второго id2 и тд - а не их родные id, тоже работает. А события пробовал разные-разные. 

Roffun
#6 2017-12-12 22:28

В comments.tpl код по умолчанию ?

Картинки каким образом загружаются в комментарии или это просто ссылки ?

Картинки являются ссылками, и у них нужно добавить параметр data- со своим классом + id комментария, я правильно понял ?

Немного позже попытаюсь воспроизвести у себя ситуацию, когда код под рукой, удобнее решение видеть.

Улетел на другую планету, а там почты нету.. https://www.cotonti.com/forums/45298?m=posts
Kopusha
#7 2017-12-12 22:53
#43190 Roffun:

В comments.tpl код по умолчанию ?

Картинки каким образом загружаются в комментарии или это просто ссылки ?

Картинки являются ссылками, и у них нужно добавить параметр data- со своим классом + id комментария, я правильно понял ?

Немного позже попытаюсь воспроизвести у себя ситуацию, когда код под рукой, удобнее решение видеть.

Тут кусок кода и пару мыслей)

https://fex.net/#!080315840819

 

Roffun
#8 2017-12-13 01:44

В общем придумал решение, правда тестировал на comments.tpl  по умолчанию, а ссылку на файлик увидел уже после, если не разберетесь с примером, завтра на прикрепленном файле применю, а пока покажу пример реализации по умолчанию, в нем достаточно изменить:

<div class="comments2">

на 

<div class="comments2" data-com-id="{COMMENTS_ROW_ID}"> 

и скрипт:

<script>
function fancyDataSet(){   
var fancy = document.querySelectorAll('[data-com-id]');
for (var i = 0; i < fancy.length; i++) {
var galleryLone = fancy[i].getAttribute('data-com-id');      
Array.prototype.filter.call(document.querySelectorAll('[data-com-id="'+galleryLone+'"] a'), function(el){if(/.(jpg|jpeg|png|gif)$/i.test(el.href) === true){el.setAttribute('data-fancybox','gallery-lone-'+galleryLone);};});
  }
}
window.addEventListener('load', fancyDataSet); </script>   
</script>

Это по умолчанию в comments.tpl:

<!-- BEGIN: COMMENTS_ROW -->
				<div class="comments1">
					<p>{COMMENTS_ROW_AUTHOR_AVATAR}</p>
					<p><a href="{COMMENTS_ROW_URL}" id="c{COMMENTS_ROW_ID}">{COMMENTS_ROW_ORDER}.</a> {COMMENTS_ROW_AUTHOR}</p>
					<p>{COMMENTS_ROW_DATE}</p>
				</div>
				<div class="comments2" data-com-id="{COMMENTS_ROW_ID}">
					<p>{COMMENTS_ROW_TEXT}</p>
					{COMMENTS_ROW_ADMIN}{COMMENTS_ROW_EDIT}
				</div>
				<hr class="clear marginbottom10" />
<!-- END: COMMENTS_ROW -->

 

Улетел на другую планету, а там почты нету.. https://www.cotonti.com/forums/45298?m=posts
Kopusha
#9 2017-12-13 08:52
#43192 Roffun:

В общем придумал решение

Working like a charm straight out of the box!

Сам я так сложно смог бы js написать, спасибо большое.

Added 2 minutes later:

Кстати спрошу сразу что бы не забыть - вот к примеру мне этот кусочек js нужен исключительно в комментах. А бывают еще более редкие случаи - к примеру js только на 1 стенделоне плагина. По уму пихать его в код прямо в tpl или все таки выносить в js.js через rc подключаемый? 

Roffun
#10 2017-12-13 15:13
#43193 Kopusha:

Кстати спрошу сразу что бы не забыть - вот к примеру мне этот кусочек js нужен исключительно в комментах. А бывают еще более редкие случаи - к примеру js только на 1 стенделоне плагина. По уму пихать его в код прямо в tpl или все таки выносить в js.js через rc подключаемый? 

Если скрипт нужен точечно, и это выражение, а не библиотека какая-нибудь, то лучше в конкретном файле tpl выводить, тем более в приведенном выше примере скрипт сработает по событию onload.

В случае с cooments.tpl - файл выводится только в комментариях, поэтому удобно в него добавить. Если standalone плагин, то можно добавить конкретно в его tpl файл, например для плагина "кто онлайн" это файл whosonline.tpl.  А если добавлять через rc файл шаблона или в глобальных файлах (header.tpl footer.tpl) , то нужно будeт условный оператор проверочный добавить, чтобы выводить в конкретном месте.

Улетел на другую планету, а там почты нету.. https://www.cotonti.com/forums/45298?m=posts