Войти / Регистрация
Войти в свою учетную запись
Запомнить меня
Создать учетную запись
Поля, отмеченные звездочкой (*), обязательны для заполнения.
Reload Captcha

Пользовательское поле выбора Google шрифтов для шаблонов Joomla

Оцените материал
(2 голосов)

SelectFonts form field from arenam

При создании шаблонов одной из важных задач стоит выбор подходящего шрифта. Иногда приходится несколько раз менять шрифт пока он нас не устроит. Поэтому в админ панели сайта необходимы поля с выбором шрифтов, а хорошей практикой является видеть как будет выглядеть шрифт на вашем сайте перед его сохранением.

Мы создали простое поле для решения данной задачи и готовы им поделиться.

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

Вот что у нас должно получиться.

SelectFonts
SelectFonts custom field

Мы не собираемся растягивать эту статью и предоставим сразу весь код.

Создайте файл selectfonts.php и поместите туда все это:

<?php
/**
* @author        Maxim Resh (arenam.ru)
* @website		 https://arenam.ru/
* @copyright	 Copyright © 2021 - All rights reserved.
* @license       GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html
**/

defined( '_JEXEC' ) or die; // No direct access

use Joomla\CMS\Factory;

JFormHelper::loadFieldClass('list');

class JFormFieldSelectFonts extends JFormFieldList
{
    public $type = 'selectfonts';

    public function getOptions()
    {
        $items = array(
			"initial"                                                            => "-- Default --",
			// Cirillic
			"Bad+Script|'Bad Script', cursive"                                   => "Bad Script",
			"Roboto|'Roboto', sans-serif"                                        => "Roboto",
			"Open+Sans|'Open Sans', sans-serif"                                  => "Open Sans",
			"JetBrains+Mono|'JetBrains Mono', monospace"                         => "JetBrains Mono",
			"Montserrat|'Montserrat', sans-serif"                                => "Montserrat",
			"Source+Sans+Pro|'Source Sans Pro', sans-serif"                      => "Source Sans Pro",
			"Roboto+Condensed|'Roboto Condensed', sans-serif"                    => "Roboto Condensed",
			"Oswald|'Oswald', sans-serif"                                        => "Oswald",
			"Roboto+Mono|'Roboto Mono', monospace"                               => "Roboto Mono",
			"Raleway|'Raleway', sans-serif"                                      => "Raleway",
			"Noto+Sans|'Noto Sans', sans-serif"                                  => "Noto Sans",
			"PT+Sans|'PT Sans', sans-serif"                                      => "PT Sans",
			"Roboto+Slab|'Roboto Slab', serif"                                   => "Roboto Slab",
			"Ubuntu|'Ubuntu', sans-serif"                                        => "Ubuntu",
			"Merriweather|'Merriweather', serif"                                 => "Merriweather",
			"Playfair+Display|'Playfair Display', serif"                         => "Playfair Display",
			"Nunito|'Nunito', sans-serif"                                        => "Nunito",
			"Piazzolla|'Piazzolla', serif"                                       => "Piazzolla",
			"Open+Sans+Condensed|'Open Sans Condensed', sans-serif"              => "Open Sans Condensed",
			"Lora|'Lora', serif"                                                 => "Lora",
			"Rubik|'Rubik', sans-serif"                                          => "Rubik",
			"PT+Serif|'PT Serif', serif"                                         => "PT Serif",
			"Noto+Serif|'Noto Serif', serif"                                     => "Noto Serif",
			"Fira+Sans|'Fira Sans', sans-serif"                                  => "Fira Sans",
			"Jura|'Jura', sans-serif"                                            => "Jura",
			"Source+Code+Pro|'Source Code Pro', monospace"                       => "Source Code Pro",
			"PT+Sans+Narrow|'PT Sans Narrow', sans-serif"                        => "PT Sans Narrow",
			"Arimo|'Arimo', sans-serif"                                          => "Arimo",
			"Inter|'Inter', sans-serif"                                          => "Inter",
			"Bitter|'Bitter', serif"                                             => "Bitter",
			"Yanone+Kaffeesatz|'Yanone Kaffeesatz', sans-serif"                  => "Yanone Kaffeesatz",
			"IBM+Plex+Sans|'IBM Plex Sans', sans-serif"                          => "IBM Plex Sans",
			"Source+Serif+Pro|'Source Serif Pro', serif"                         => "Source Serif Pro",
			"Comfortaa|'Comfortaa', cursive"                                     => "Comfortaa",
			"Exo+2|'Exo 2', sans-serif"                                          => "Exo 2",
			"Pacifico|'Pacifico', cursive"                                       => "Pacifico",
			"EB+Garamond|'EB Garamond', serif"                                   => "EB Garamond",
			"Balsamiq+Sans|'Balsamiq Sans', cursive"                             => "Balsamiq Sans",
			"Play|'Play', sans-serif"                                            => "Play",
			"Russo+One|'Russo One', sans-serif"                                  => "Russo One",
			"Cormorant+Garamond|'Cormorant Garamond', serif"                     => "Cormorant Garamond",
			"Caveat|'Caveat', cursive"                                           => "Caveat",
			"Amatic+SC|'Amatic SC', cursive"                                     => "Amatic SC",
			"IBM+Plex+Serif|'IBM Plex Serif', serif"                             => "IBM Plex Serif",
			"Vollkorn|'Vollkorn', serif"                                         => "Vollkorn",
			"Fira+Sans+Condensed|'Fira Sans Condensed', sans-serif"              => "Fira Sans Condensed",
			"PT+Sans+Caption|'PT Sans Caption', sans-serif"                      => "PT Sans Caption",
			"Alegreya+Sans|'Alegreya Sans', sans-serif"                          => "Alegreya Sans",
			"Ubuntu+Condensed|'Ubuntu Condensed', sans-serif"                    => "Ubuntu Condensed",
			"Alegreya|'Alegreya', serif"                                         => "Alegreya",
			"Tinos|'Tinos', serif"                                               => "Tinos",
			"Cuprum|'Cuprum', sans-serif"                                        => "Cuprum",
			"Didact+Gothic|'Didact Gothic', sans-serif"                          => "Didact Gothic",
			"Prata|'Prata', serif"                                               => "Prata",
			"IBM+Plex+Mono|'IBM Plex Mono', monospace"                           => "IBM Plex Mono",
			"Old+Standard+TT|'Old Standard TT', serif"                           => "Old Standard TT",
			"Playfair+Display+SC|'Playfair Display SC', serif"                   => "Playfair Display SC",
			"Manrope|'Manrope', sans-serif"                                      => "Manrope",
			"Philosopher|'Philosopher', sans-serif"                              => "Philosopher",
			"Poiret+One|'Poiret One', cursive"                                   => "Poiret One",
			"Spectral|'Spectral', serif"                                         => "Spectral",
			"Istok+Web|'Istok Web', sans-serif"                                  => "Istok Web",
			"Montserrat+Alternates|'Montserrat Alternates', sans-serif"          => "Montserrat Alternates",
			"Fira+Sans+Extra+Condensed|'Fira Sans Extra Condensed', sans-serif"  => "Fira Sans Extra Condensed",
			"Press+Start+2P|'Press Start 2P', cursive"                           => "Press Start 2P",
			"Neucha|'Neucha', cursive"                                           => "Neucha",
			"Ruda|'Ruda', sans-serif"                                            => "Ruda",
			"Cormorant|'Cormorant', serif"                                       => "Cormorant",
			"El+Messiri|'El Messiri', sans-serif"                                => "El Messiri",
			"Alice|'Alice', serif"                                               => "Alice",
			"Jost|'Jost', sans-serif"                                            => "Jost",
			"PT+Mono|'PT Mono', monospace"                                       => "PT Mono",
			"Marck+Script|'Marck Script', cursive"                               => "Marck Script",
			"Yeseva+One|'Yeseva One', cursive"                                   => "Yeseva One",
			"Sawarabi+Gothic|'Sawarabi Gothic', sans-serif"                      => "Sawarabi Gothic",
			"Tenor+Sans|'Tenor Sans', sans-serif"                                => "Tenor Sans",
			"Ubuntu+Mono|'Ubuntu Mono', monospace"                               => "Ubuntu Mono",
			"PT+Serif+Caption|'PT Serif Caption', serif"                         => "PT Serif Caption",
			"Marmelad|'Marmelad', sans-serif"                                    => "Marmelad",
			"Arsenal|'Arsenal', sans-serif"                                      => "Arsenal",
			"Fira+Mono|'Fira Mono', monospace"                                   => "Fira Mono",
			"Forum|'Forum', cursive"                                             => "Forum",
			"Alegreya+Sans+SC|'Alegreya Sans SC', sans-serif"                    => "Alegreya Sans SC",
			"Cousine|'Cousine', monospace"                                       => "Cousine",
			"Anonymous+Pro|'Anonymous Pro', monospace"                           => "Anonymous Pro",
			"Kosugi+Maru|'Kosugi Maru', sans-serif"                              => "Kosugi Maru",
			"Viaoda+Libre|'Viaoda Libre', cursive"                               => "Viaoda Libre",
			"Rubik+Mono+One|'Rubik Mono One', sans-serif"                        => "Rubik Mono One",
			"Pattaya|'Pattaya', sans-serif"                                      => "Pattaya",
			"Commissioner|'Commissioner', sans-serif"                            => "Commissioner",
			"Scada|'Scada', sans-serif"                                          => "Scada",
			"Oranienbaum|'Oranienbaum', serif"                                   => "Oranienbaum",
			"Alegreya+SC|'Alegreya SC', serif"                                   => "Alegreya SC",
			"Kurale|'Kurale', serif"                                             => "Kurale",
			"Literata|'Literata', serif"                                         => "Literata",
			"Pangolin|'Pangolin', cursive"                                       => "Pangolin",
			"Gabriela|'Gabriela', serif"                                         => "Gabriela",
			"Cormorant+Infant|'Cormorant Infant', serif"                         => "Cormorant Infant",
			"Kelly+Slab|'Kelly Slab', cursive"                                   => "Kelly Slab",
			"Podkova|'Podkova', serif"                                           => "Podkova",
			"Vollkorn+SC|'Vollkorn SC', serif"                                   => "Vollkorn SC",
			"Kosugi|'Kosugi', sans-serif"                                        => "Kosugi",
			"Spectral+SC|'Spectral SC', serif"                                   => "Spectral SC",
			"Cormorant+SC|'Cormorant SC', serif"                                 => "Cormorant SC",
			"Andika|'Andika', sans-serif"                                        => "Andika",
			"Fira+Code|'Fira Code', monospace"                                   => "Fira Code",
			"Ledger|'Ledger', serif"                                             => "Ledger",
			"Prosto+One|'Prosto One', cursive"                                   => "Prosto One",
			"Ruslan+Display|'Ruslan Display', cursive"                           => "Ruslan Display",
			"Bellota+Text|'Bellota Text', cursive"                               => "Bellota Text",
			"Bellota|'Bellota', cursive"                                         => "Bellota",
			"Underdog|'Underdog', cursive"                                       => "Underdog",
			"Cormorant+Unicase|'Cormorant Unicase', serif"                       => "Cormorant Unicase",
			"Seymour+One|'Seymour One', sans-serif"                              => "Seymour One",
			"Stalinist+One|'Stalinist One', cursive"                             => "Stalinist One",
			// Not Cirillic
			"Lemonada|'Lemonada', cursive"                                       => "Lemonada (?)",  
			"Sansita+Swashed|'Sansita Swashed', cursive"                         => "Sansita Swashed (?)",
			"Orbitron|'Orbitron', sans-serif"                                    => "Orbitron (?)",
			"Cinzel|'Cinzel', serif"                                             => "Cinzel (?)",
			"Texturina|'Texturina', serif"                                       => "Texturina (?)",
			"Dancing+Script|'Dancing Script', cursive"                           => "Dancing Script (?)",
			"Josefin+Sans|'Josefin Sans', sans-serif"                            => "Josefin Sans (?)"
		);
		
		asort($items);
		$option = array();
		foreach ($items as $key => $val)
		{
			$option[] = JHtml::_('select.option',  $key, $val);
		}
		
		// Merge any additional options in the XML definition.
		$options = array_merge(parent::getOptions(), $option);
		
		return $options;
    }
	
	public function getInput()
    {
		$doc = Factory::getDocument();
		$doc->addScriptDeclaration("
		
			function fontSelected(e){
				var select = e.target || e;
				if (select.selectedIndex > 0) { // web font
					var val = select.options[select.selectedIndex].value;
					var fontID = val.split('|');
					if (!document.getElementById(fontID[0])) {
						var head = document.getElementsByTagName('head')[0];
						var link = document.createElement('link');
						link.id = fontID[0];
						link.rel = 'stylesheet';
						link.type = 'text/css';
						link.href = 'https://fonts.googleapis.com/css?family='+fontID[0];
						link.media = 'all';
						head.appendChild(link);
					}
					select.closest('div').querySelector('textarea').style.fontFamily = select.options[select.selectedIndex].innerHTML;
				}else{ // default browser font
					select.closest('div').querySelector('textarea').style.fontFamily = null;
				}
			}
			
			function fontChange(e){
				var target = e.target;
				var select = target.closest('div').querySelector('select');
				switch(target.dataset.action){
					case 'down':
						var newOpt = select.options[select.selectedIndex+1];
						break;
					case 'up':
						var newOpt = select.options[select.selectedIndex-1];
						break;
				}
				if (newOpt !== undefined)
				{
					select.value = newOpt.value;
					fontSelected(select);
					jQuery(select).trigger('liszt:updated');
				}
			}
			function fontSizeChange(e){
				var target   = e.target;
				var textarea = target.closest('div').querySelector('textarea');
				var fontSize = textarea.style.fontSize;
				
				switch(target.dataset.action){
					case 'increase':
						textarea.style.fontSize = (parseFloat(fontSize)+1)+'px';
						break;
					case 'decrease':
						textarea.style.fontSize = (parseFloat(fontSize)-1)+'px';
						break;
				}
			}
		");
		
		$doc->addStyleDeclaration ('
			.fontsContainer {
				display: inline-block;
				padding: 4px;
				border: 1px solid #ccc;
			}
			.fontsContainer span{
				webkit-touch-callout: none;
				-webkit-user-select: none;
				-khtml-user-select: none; 
				-moz-user-select: none; 
				-ms-user-select: none;
				user-select: none;  
			}
			.prewFonts {
				display: block !important;
				padding: 10px;
				margin-bottom: 6px !important;
				font-size: 22px;
				line-height: 1.4;
				width: 358px;
				min-width: 198px;
				min-height: 20px;
			}
			.padding{
				padding-right: 6px;
			}
			.fontBtn{
				border: 1px solid #ccc;
				background: #f3f3f3;
				padding: 4px 8px 6px 8px;
				cursor: pointer;
			}
			.fontBtn:hover{
				background: #ccc;
			}
		');
		
		$htmlA = '<div class="fontsContainer"><textarea class="prewFonts" style="font-size:22px;">A peep at some distant orb has power to raise and purify our thoughts like a strain of sacred music, or a noble picture, or a passage from the grander poets. It always does one good.</textarea>';
		
		$htmlB = '
			<span class="padding"></span>
			<span class="fontBtn" onclick="fontChange(event)" data-action="up">Up</span>
			<span class="fontBtn" onclick="fontChange(event)" data-action="down">Down</span>
			<span class="padding"></span>
			<span class="fontBtn" onclick="fontSizeChange(event)" data-action="increase">+</span>
			<span class="fontBtn" onclick="fontSizeChange(event)" data-action="decrease">-</span>
			<span class="padding"></span>
		';
		
		$htmlB .= "
			</div>
			<script>fontSelected(document.getElementById('jform_params_". $this->element['name'] ."'));</script>
		";
		
		return $htmlA . parent::getInput() . $htmlB;
	}
	
}

Большая часть шрифтов из списка поддерживают кириллицу.

Пример XML кода:

<field
	name="body_font"
	type="selectfonts"
	label="Body font"
	description="" 
	onchange="fontSelected(event)" />

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

<fieldset name="font" label="Font" description="" addfieldpath="/templates/mytmpl/fields">
</fieldset>

Оставить комментарий