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

Kopusha
#1 2017-12-12 11:42

Members
Thanked: 87 times

Мне надо на лету добавлять в выводимом 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, 7 years ago)
Macik
#2 2017-12-12 15:53

Team
Thanked: 181 times

`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

Members
Thanked: 87 times

<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&lt;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

Contributors
Thanked: 175 times

#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

Members
Thanked: 87 times

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

Contributors
Thanked: 175 times

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

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

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

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

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

Members
Thanked: 87 times

#43190 Roffun:

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

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

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

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

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

https://fex.net/#!080315840819

 
Roffun
#8 2017-12-13 01:44

Contributors
Thanked: 175 times

В общем придумал решение, правда тестировал на 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

Members
Thanked: 87 times

#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

Contributors
Thanked: 175 times

#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