Web Мастерская
Контакт

Web Мастерская»Блог

Сообщество Web Мастеров. Тут собрано всё, чтобы написать свой первый сайт, запустить его в Интернет и поддерживать его в течении всей его работы.
Поиск блогов...

Обработать файл перед его получением на PHP

PHP
При написании одного модуля для движка, потребовалось получать шаблоны для вставки кода в уже загруженную страницу. Делал это так:
Выделить
		// Получение шаблона приложения
		$html = file_get_contents(phpfox::getParam('core.dir_app') . $id . PHPFOX_DS . 'page' . PHPFOX_DS . $page . '.php', true);

По ходу развития модуля, пришлось добавлять PHP код, он должен был выполняться перед получением самого шаблона. Но он не обрабатывался функцией file_get_contents. Код проходил, либо как текст, либо, как закомментированный код...

Чтобы PHP код выполнялся перед вставкой шаблона в страницу, было принято решение заменить file_get_contents, на:
Выделить
		// Получение шаблона приложения
		ob_start();
		include (phpfox::getParam('core.dir_app') . $id . PHPFOX_DS . 'page' . PHPFOX_DS . $page . '.php');
		$html = ob_get_contents();
		ob_end_clean();
		// End: Получение шаблона приложения

Так работает, как хотелось. Код выполняется перед вставкой в страницу.

Так как мой движок изначально использует...

Копирование SVG

SVG
При правках иконок на SVG, может появиться необходимость скопировать полностью или какую то часть иконки. Чтобы не плодить один и тот же код несколько раз, его можно выводить в нужном месте, при помощи тега <use>.

Так как все иконки находятся у меня в отдельном файле, в этом же файле я написал макет, который используется во многих SVG картинках:
Выделить
	<defs>
		<g id="model">
			<!-- Код макета -->
		</g>
	</defs>

Теперь там, где мне нужен макет, получаю его в иконку так:
Выделить
<use xlink:href="#model"/>

Важно: Если Вы как и я храните иконки в отдельном файле, и в этом файле используете тег <use>, в открывающемся теге <svg> должна присутствовать строка: xmlns:xlink="http://www.w3.org/1999/xlink":
Выделить
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

Чтобы не повторять мои ошибки: Тема: Ошибки в коде SVG.

Возможно, будет интересно:
...

CSS переменные в SVG

CSS SVG
На данный момент работаю с SVG. Практически в каждом теге есть код цвета. В основном использую одни и те же цвета, пока их всего пять. Думаю, что в будущем цвет буду менять, придётся копаться в нескольких файлах, производить замену. Тут задумался - а ведь проще написать переменные и использовать их, в будущем не придётся рыться в нескольких файлах, а отредактировать всего один. Так я и сделал, я добавил переменные в SVG. Сейчас расскажу, как я это сделал.

Я создал файл: "svg.css", с таким содержимым:
Выделить
:root {
	--cool:   #0074FF; /* Оттенок синего */
	--murk:   #033C59; /* Оттенок синего + зелёного */
	--spring: #48CFAD; /* Оттенок зелёного */
	--smoke:  #CCD3EB; /* Оттенок серого */
	--fire:   #FC6459; /* Оттенок красного */
}

Подключил "svg.css" к документу. Теперь в SVG меняю:
Выделить
<g fill="#0074FF">

На:
Выделить
<g fill="var(--cool)">

Готово. Переменная отдаёт указанный ей код цвета.

CSS переменная должна начинаться с двойного дефиса (--).

...

Как выводить SVG иконки из отдельного файла (Подключение файла SVG)

SVG
Необходимо создать файл, где будут храниться у нас все спрайты SVG, назовём данный файл sprite.svg, с таким содержимым:
Выделить
<svg xmlns="http://www.w3.org/2000/svg">
	<symbol id="sprite1" viewBox="0 0 64 64">
		<!-- Код спрайта id="sprite1" -->
	</symbol>

	<symbol id="sprite2" viewBox="0 0 64 64">
		<!-- Код спрайта id="sprite2" -->
	</symbol>
</svg>

Тут внутри тега <svg> находятся два спрайта, "завёрнутые" в тег <symbol> с id="sprite1" и id="sprite2". По этим идентификаторам мы и будем выводить на экран наши спрайты, а поможет нам в этом тег <use>. Для вывода первого спрайта (sprite1), в нужном нам месте делаем так:
Выделить
<svg>
	<use xlink:href="sprite.svg#sprite1"></use>
</svg>

И, разумеется, для вывода второго спрайта (sprite2), делаем так:
Выделить
<svg>
	<use xlink:href="sprite.svg#sprite2"></use>
</svg>

Для изменения стилей спрайтов, например, размеров, можете добавлять атрибут class в тег <svg>:
Выделить
<svg class="nameClass">
	<use
...

jQuery: Как проверить блок на пустоту

Библиотека JS
Появилась необходимость проверить блок на пустоту, то есть есть ли в нём какие либо теги или нет. Ниже, как это можно сделать.

Допустим есть у нас такой блок (Без тегов внутри него):
Выделить
<div id="blockID"></div>

Его та нам и надо проверить. Для этого используем следующее условие:
Выделить
if ($('#blockID').html().trim() == '') {
	// Блок пустой | Действие при пустом блоке
}

ID или другой атрибут блока (blockID) пишите свой....
Реклама