Git Product home page Git Product logo

shortstory-template-switch's Introduction

Shortstory template switch

Ajax переключатель шаблонов кратких новостей.

DLE: 14>

Image alt


  • Использует Cookie для хранения префикса шаблона.
  • Использует отдельные tpl шаблоны.
  • Ajax метод переключения.

Важно

Для полноценного использования требуются некоторые знания и понимание. Так как переключение шаблонов происходит посредством технологии Ajax то все бинды и события навешанные в момент открытия страницы будут сброшены и их потребуется инициализировать повторно. Всё это делается в JS коде описанном в блоке Дополнительной информации ниже.

Еще могут возникнуть проблемы с различными модулями и плагинами которые применяли какие-то операции и функции вне файла show.short.php. Если таковые будут то разработкик этого плагина должен будет внести соответствующие правки в файл change_template.php.

Установка

  1. Установите xml плагин.
  2. Создайте копии шаблона shortstory.tpl затем присвойте каждой копии имя в качестве суффикса shortstory_suffix.tpl.
  3. Перечисление суффиксов шаблонов делается в переменной $template в виде ($suffix_template => text\icon). Переменная находится в первой правке файла functions.php в классе templateSwitcher. По умолчанию установлено два варианта один по умолчанию второй компактный стиль.

В качестве ключа указывается суффикс шаблона, а значением является название или html код с иконкой. Разделяются запятыми (Подробней о PHP:Array)

Если в шаблоне оставить одно значение то переключатель не отображается. Так же функции становятся неактивными.

  1. В main.tpl или других шаблонах тегом {switcherButton} выводится переключатель. {templates-class} выводит суффикс шаблона для дополнительной вариативности стилей.

Дополнительная информация

  1. Если нужно изменить HTML разметку, это делается в изменениях над файлов engine/modules/functions.php. В функции show_button класса templateSwitcher.
  2. В файле engine/ajax/change_template.php есть переменная $custom_navigation в состоянии true пагинация добавляется в отдельном ключе ответа json от сервера если она размещалась при помощи тега {newsnavigation}. В JS ниже нужно указать место для пагинации.
  3. В переменной $change_tpl_mod перечислены разделы в которых будет разрешено менять шаблон. Поумолчанию установлено 3 раздела где задействован файл short.story.php. Если у Вас есть модули с другими разделами которые так же используют данный файл для формирования кратких новостей то добавьте название раздела в переменную, и в том модуле будет так же менятся шаблоны при условии, что условный модуль не переназначает имя подключаемого shortstory.tpl. Однако многие как раз это делают.
  4. engine/ajax/change_template.php Файл обработчик ответов. В этом файле формируются ответы шаблона, если есть какие-то модули которые добавляли кастомные теги и функции вне файла short.story.php то аналогичные правки нужно делать и в обработчике.
  5. Для изменения JavaScript кода переключателя делается в правках файла engine/modules/main.php. В коде представленом ниже. В этом коде так же производится повторная инициализация js скриптов.
JavaScript code
$onload_scripts[] 	= <<<HTML
$(".template-switcher a[data-template]").click(function(){

	if( $(this).hasClass('current') ) return false;
	$(this).addClass('current').siblings().removeClass('current');

	let new_templ 		= $(this).data('template');
	let content_block 	= $('#content').find('.left-content > div').eq(0);
				
	setcookie('short_template', new_templ);

	ShowLoading();
            
	$.post(dle_root + "engine/ajax/controller.php?mod=change_template", {user_hash: dle_login_hash}, function(response) {
				
		if( response.success ) {

			content_block.html(response.returnbox);
			content_block.append(response.navigation);
			
			//This place re-initialization javascript plugins
			
		} else {

			DLEAlert('Ошибка', 'Так-вот');

		}

		HideLoading();

	}, 'json');        
      
	return false;
});
HTML;

let content_block = $('#content').find('.left-content > div').eq(0); Если объяснить коротко, то код ищет объект с конкретным атрибутом id="content" если есть то в нём же пытается найти дочерние объекты с атрибутом class="left-content" в котором находится div. В него то и будет помещена разметка из шаблонов кратких новостей которая содержится в переменной data.

Строкой ниже определяется куда добавлять разметку пагинации. Если переменная $custom_navigation установлена в true. Если в false то строку стоит закомментировать.

Функция append добавляет в самый конец.

Подробней о выборке элементов

Поддержать...

ЮMoney: 4100115063692304

Qiwi nickname: TERAMOUNE

shortstory-template-switch's People

Contributors

teramoune avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.