Подгрузка следующей полной новости при скроллинге в полной новости

[alex32 942]

 

Вот,  граждане просили 

 

 

Вставить в js файл 

$(window).scroll(function() {
    if ($(".load-link").length) {
        var loadLink = $('.load-link').filter(':last');
        var loadOffset = loadLink.offset().top;
        if (loadOffset <= $(window).scrollTop()) {
            var href = loadLink.attr('href');
            if (href !== undefined) {
                loadLink.remove();
                getContent(href, true);
            };
        }
    }
});
window.addEventListener("popstate", function(e) {
    getContent(location.pathname, false);
});
function getContent(url, addEntry) {
    $.get(url).done(function(data) {
        $('#dle-content').append($(data).find(".news-container").get(0).outerHTML);//если через html() то новость будет без обертки
        if (addEntry == true) {
            history.pushState(null, null, url);
        }
    });
}

В строке 

 $('#dle-content').append($(data).find(".news-container")

класс .news-container заменить на класс блока, в который обернута полная новость (в шаблоне fullstory.tpl).

В сам шаблон fullstory.tpl  вниз перед закрывающим тегом вставляем 

[prev-url]<a href="{prev-url}" class="load-link"></a>[/prev-url]

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

 

 

[alexpsp 30]

Кайф! Подгон крутой, вот только у меня не работает что-то

[alex32 942]

1 час назад, alexpsp сказал:

Кайф! Подгон крутой, вот только у меня не работает что-то

вот именно что "что-то". я же не телепат.

[Gameer 310]

@alex32 я бы добавил что не будет работать ajax добавление комментариев и редакторы при добавлении комментариев из подгруженных новостей, а так же что если новость не является самой первой, что бы сразу отсечь не нужные вопросы у людей.

[alex32 942]

4 часа назад, Gameer сказал:

@alex32 я бы добавил что не будет работать ajax добавление комментариев и редакторы при добавлении комментариев из подгруженных новостей, а так же что если новость не является самой первой, что бы сразу отсечь не нужные вопросы у людей.

ели первой будет, там же prev-url, а аякс комменты да, не будут. Но, чисто по логике, с таким выводом новостей, комменты оттуда убирать надо. Надо плагин писать и если запрос новости аяксом то вырезать их.

[DLE рулит 1]

В целом работает, но...

1) в подгружаемой статье не подгружается заголовок

2) подгружаемая статья только одна, а нужны все из категории, в которой находится эта новость. Суть моего запроса была именно в бесконечной прокрутке до последней новости (как в лентах фейсбука или вконтакте, например)

А комменатрии и остальные примочки (типа рейтинга подгружаемых новостей)  - это уже дело вторичное.

Такое, полагаю, уже за доп плату надо заказывать.

 

Про обратные урлы я уже не повторялся, про них указано в старт-посте.

Изменено 29 сентября 2019 пользователем DLE рулит

[alex32 942]

47 минут назад, DLE рулит сказал:

1) в подгружаемой статье не подгружается заголовок

 

подгружается. Значит неправильно указаны классы

47 минут назад, DLE рулит сказал:

2) подгружаемая статья только одна, а нужны все из категории, в которой находится эта новость.

Подгружаются все, значит не так что-то подключено или не те классы указаны. Так же важно направление сортировки в категории. Если в новости есть ссылка на предыдущую новость, которая выводится стандартным тегом {prev-url} значит она подгрузится. 

47 минут назад, DLE рулит сказал:

Про обратные урлы я уже не повторялся, про них указано в старт-посте.

мне  лень

 

PS. Перед тем, как экспериментировать, убедитесь сначала, что в шаблоне изначально нет ошибок js.

Изменено 29 сентября 2019 пользователем alex32

[DLE рулит 1]

29 минут назад, DLE рулит сказал:

1) в подгружаемой статье не подгружается заголовок

2) подгружаемая статья только одна, а нужны все из категории, в которой находится эта новость. Суть моего запроса была именно в бесконечной прокрутке до последней новости (как в лентах фейсбука или вконтакте, например)

Не учел один нюанс на своей стороне, все работает.

Если допилите еще возвратные урлы, то 10$ с меня 🙂

 

Еще такой вопрос: 

15 часов назад, alex32 сказал:

В строке 

 $('#dle-content').append($(data).find(".news-container")

класс .news-container заменить на класс блока, в который обернута полная новость (в шаблоне fullstory.tpl).

Можно ли там несколько классов указать? Например, у меня класс, который оборачивает полную новость (.full-news), захватывает так же дату создания новости и ее рейтинг. Я хочу сделать, чтобы в подгружаемых новостях был только заголовок (.full-news h1) и сам текст новости (.full-news-content), без рейтинга и даты.

[alex32 942]

11 минут назад, DLE рулит сказал:

Можно ли там несколько классов указать? Например, у меня класс, который оборачивает полную новость (.full-news), захватывает так же дату создания новости и ее рейтинг. Я хочу сделать, чтобы в подгружаемых новостях был только заголовок (.full-news h1) и сам текст новости (.full-news-content), без рейтинга и даты.

нет, несколько нельзя. Это обертка.

Сделай так 

function getContent(url, addEntry) {
    $.get(url).done(function(data) {
    	var getData = $(data).find(".entry-item").get(0).outerHTML;    	
        $('#dle-content').append(getData).find(".delete-selector").not(":first").remove();  
        if (addEntry == true) {
            history.pushState(null, null, url);
        }
    });
}

delete-selector это класс, в который обернуты у тебя  рейтинг и дата. Только они оба должны быть в одном блоке 

 

то есть типа такого 

<div class="full-news">
	<h1>{title}</h1>
	<div>{full-story}</div>
	<div class="delete-selector">
		<span>{date}</span>
		<div class="rating">{rating}</div>
	</div>
</div>

 

[DLE рулит 1]

3 часа назад, alex32 сказал:

Сделай так

Этим заменить надо или добавить?

Изменено 29 сентября 2019 пользователем DLE рулит

[alex32 942]

15 минут назад, DLE рулит сказал:

Этим заменить надо или добавить?

заменить функцию getContent

[DLE рулит 1]

1 минуту назад, alex32 сказал:

заменить функцию getContent

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

[alex32 942]

3 минуты назад, DLE рулит сказал:

В этом куске кода нет класса, который подгружает непосредственно саму новость.

а догадаться поменять селектор .entry-item из примера на свой .full-news сложно?

[Spyhog 65]

@alex32, а для подгруженных новостей будет прибавляться количество просмотров?

[DLE рулит 1]

8 минут назад, alex32 сказал:

а догадаться поменять селектор

 

18 часов назад, alex32 сказал:

я же не телепат

 

А так, спасибо. Работает. ☺️

p.s. Кто готов сделать замену ссылок в строке браузера при скролле новостей ввер-вниз, напишите в личку.

[alex32 942]

29 минут назад, Spyhog сказал:

@alex32, а для подгруженных новостей будет прибавляться количество просмотров?

понятия не имею.

[alex32 942]

@DLE рулит на держи, спешиал фор ю

 

$.fn.isInViewport = function() {
	var elementTop = $(this).offset().top;
	var elementBottom = elementTop + $(this).outerHeight();
	var viewportTop = $(window).scrollTop();
	var viewportBottom = (viewportTop + $(window).height()) - 400;
	return(elementBottom > viewportTop && elementTop < viewportBottom);
};
var contentBlock = '#dle-content'; //блок, куда будут подгружаться новости
var link = '.load-link'; //селектор ссылки на предыдущую/следущую новость, зависит от направления сортировки
var fullStory = '.entry-item'; //селектор блока-обертки полной новости
var delBlock = false; //селектор блока для удаления, например '.comments'

var lastActiveLink = window.location.href;
var activeLink = "";

$(window).on('resize scroll', function() {
	$(fullStory).each(function() {
		activeLink = $(this).data("url");
		if($(this).isInViewport() && lastActiveLink != activeLink) {
			lastActiveLink = activeLink;
			history.pushState(null, null, activeLink);
		}
	});
	if($(link).length) {
		var loadLink = $(link).filter(':last');
		var loadOffset = loadLink.offset().top;
		if((($(window).scrollTop() + $(window).height()) + 650) >= $(document).height()) {
			var href = loadLink.attr('href');
			if(href !== undefined) {
				loadLink.remove();
				getContent(href, true);
			};
		}
	}
});
window.addEventListener("popstate", function(e) {
	getContent(location.pathname, false);
});
window.addEventListener('statechange', function(e) {
	loadPage(location);
});

function getContent(url, addEntry) {
	$.get(url).done(function(data) {
		var getData = $(data).find(fullStory).get(0).outerHTML;
		$(contentBlock).append(getData).find(delBlock).not(":first").remove();
		if(addEntry == true) {
			history.pushState(null, null, url);
		}
	});
}

 

О, самое главное то забыл. Открываем шаблон полно новости и блоку-обертке добавляем атрибут url, например

<div class="entry-item" data-url="{full-link}">
  ...  код шаблона полной новости {full-story} и тд   ...
  
  
<!-- И не забываем ссылочку на предыдущую  -->
[prev-url]<a href="{prev-url}" class="load-link"></a>[/prev-url]
 <!--  либо следующую новость, но ссылка для загрузки должна быть только одна-->
[next-url]<a href="{next-url}" class="load-link"></a>[/next-url]  
  
</div>
  
  

 

Изменено 29 сентября 2019 пользователем alex32

[DLE рулит 1]

1 час назад, alex32 сказал:

на держи, спешиал фор ю

Это не спешл фор ю, это спешл фор

22 часа назад, alex32 сказал:

телепат

🙂

 

Сиди и догадывайся какой селектор где менять.

[alex32 942]

9 минут назад, DLE рулит сказал:

Сиди и догадывайся какой селектор где менять.

там все написано

 

var contentBlock = '#dle-content'; //блок, куда будут подгружаться новости
var link = '.load-link'; //селектор ссылки на предыдущую/следущую новость, зависит от направления сортировки
var fullStory = '.entry-item'; //селектор блока-обертки полной новости
var delBlock = false; //селектор блока для удаления, например '.comments'

 

Что тут непонятно? Прописать 4 класса всего надо. 

Изменено 29 сентября 2019 пользователем alex32

[fanera 22]

По рукам бы надавать владельцам таких сайтов, которые действительно так подгружают комментарии и новости. Мало того, что загружаются лишние данные, так ведь и при большом кол-во хостов — огромная нагрузка на сам сервер.

Изменено 1 октября 2019 пользователем captaindib

[alex32 942]

4 минуты назад, captaindib сказал:

огромная нагрузка на сам сервер.

Что просто полную новость открыть, что здесь новость подгружается - нагрузка одинаковая

[fanera 22]

12 минут назад, alex32 сказал:

Что просто полную новость открыть, что здесь новость подгружается - нагрузка одинаковая

Неодинаковая. Такие запросы загружают весь html страницы и уже с помощью методов find или $('.class', data).html() берется блок и тупо впихивается в страничку, что конечно так и должно быть, но сам факт того, что подобные запросы еще раз загружают полную страницу, которая может весить сотнями кб - беда.

 

Если трафика мало, то можно просто забить, как большинство, но в идеале запрос должен отдавать только JSON, который уже будет парситься или html код с самими комментариями/новостями, а не тупо всю страницу, которая потом просто обрезается и дело с концами.

Изменено 1 октября 2019 пользователем captaindib

[alex32 942]

8 минут назад, captaindib сказал:

Неодинаковая. Такие запросы загружают весь html страницы и уже с помощью методов find или $('.class', data).html() берется блок и тупо впихивается в страничку, что конечно так и должно быть, но сам факт того, что подобные запросы еще раз загружают полную страницу, которая может весить сотнями кб - беда.

 

Если трафика мало, то можно просто забить, как большинство, но в идеале запрос должен отдавать только JSON, который уже будет парситься или html код с самими комментариями/новостями, а не тупо всю страницу, которая потом просто обрезается и дело с концами.

Круто. А нагрузка на сервер где? Открой полную новость будет та же самая нагрузка.

Подгрузка новости site.ru/category/1-news.html  в полную новость полностью равносильно по нагрузке открытию новости site.ru/category/1-news.html  по ссылке в новом окне. Нет смысла огород городить.

Изменено 1 октября 2019 пользователем alex32

[mr. Freeman 11]

2 часа назад, alex32 сказал:

Круто. А нагрузка на сервер где? Открой полную новость будет та же самая нагрузка.

Подгрузка новости site.ru/category/1-news.html  в полную новость полностью равносильно по нагрузке открытию новости site.ru/category/1-news.html  по ссылке в новом окне. Нет смысла огород городить.

Не равносильна, там могут быть кастомы, какие то модули подключатся через инклюды и т.д., при наличии AJAX запроса отдаётся только нужные данные, например в JSON.

[alex32 942]

4 часа назад, mr. Freeman сказал:

Не равносильна, там могут быть кастомы, какие то модули подключатся через инклюды и т.д., при наличии AJAX запроса отдаётся только нужные данные, например в JSON.

Еще раз: в данной реализации подгрузка новости site.ru/category/1-news.html  в полную новость полностью равносильна по нагрузке открытию новости site.ru/category/1-news.html  по ссылке в новом окне. 

Когда открываешь полную новость по ссылке, точно так же грузятся и инклюды и кастомы и все остальное. Грузится то же самый контент. Разницы никакой.