настраивайте временную шкалу Twitter с помощью JQuery и CSS при загрузке дополнительных твитов и реализации MutationObserver - PullRequest
Новая
       18

настраивайте временную шкалу Twitter с помощью JQuery и CSS при загрузке дополнительных твитов и реализации MutationObserver

0 голосов
/ 15 января 2019

У меня есть этот jquery, который настраивает мою временную шкалу Twitter на моем сайте: 

jQuery('.twitter-block').delegate( '#twitter-widget-0','DOMSubtreeModified propertychange', function(){customizeTweetMedia();} );
var customizeTweetMedia = function()
{ 
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('p.timeline-tweet-text').css('margin', '0');
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('img.Avatar').css('display', 'none');
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('span.TweetAuthor-screenName').css('display', 'none');
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('span.TweetAuthor-Name').css('display', 'none'); 
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('div.Icon--heart').css('margin', '5px 0 0 -35px');
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('div.Icon--heart').css('font-size', '11px');
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('div.Icon--share').css('font-size', '11px');
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('div.Icon--share').css('margin-left', '-35px');
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('div.Icon--twitter').wrap('<a href="//twitter.com/name" />');
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('div.Icon--twitter').attr('title','@name on Twitter');
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('div.Icon--twitter').attr('aria-label','@name on Twitter');
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('div.timeline-Tweet-inReplyTo').parent('div.timeline-Tweet').css('display', 'none');
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('div.timeline-Tweet-retweetCredit').css('display', 'none');
}

Когда пользователь прокручивает вниз до временной шкалы и нажимает «Загрузить больше твитов», он не пропускает новые твиты через jquery. Как я могу это сделать?

Я думаю, мне нужно что-то с эффектом 

<script>
$(document).ready(function(){
  $("button").on("click", function(customizeTweetMediaai));
  });
});
</script>

Но, похоже, это не работает ...

==

Попытка MutationObserver с: 

jQuery('.twitter-block').delegate( '#twitter-widget-0','MutationObserver observe', function(){customizeTweetMedia();} );
var target = jQuery('.twitter-block');
var customizeTweetMedia = function()
{ 
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('p.timeline-tweet-text').css('margin', '0');
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('img.Avatar').css('display', 'none');
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('span.TweetAuthor-screenName').css('display', 'none');
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('span.TweetAuthor-Name').css('display', 'none'); 
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('div.Icon--heart').css('margin', '5px 0 0 -35px');
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('div.Icon--heart').css('font-size', '11px');
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('div.Icon--share').css('font-size', '11px');
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('div.Icon--share').css('margin-left', '-35px');
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('div.Icon--twitter').wrap('<a href="//twitter.com/name" />');
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('div.Icon--twitter').attr('title','@name on Twitter');
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('div.Icon--twitter').attr('aria-label','@name on Twitter');
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('div.timeline-Tweet-inReplyTo').parent('div.timeline-Tweet').css('display', 'none');
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('div.timeline-Tweet-retweetCredit').css('display', 'none');
}
var observer = new MutationObserver(customizeTweetMedia);
observer.observe(target);

но это просто ломает его ...

1 Ответ

0 голосов
/ 15 января 2019

Вероятно, это потому, что твиты не загружались, когда вы звоните customizeTweetMediaai при нажатии кнопки. Кроме того, выглядит DOMSubtreeModified устарела . Вместо этого вы можете использовать MutationObserver api: 

var target = jQuery('.twitter-block');
var observer = new MutationObserver(customizeTweetMedia);
observer.observe(target);
...