SelectFonts form field from arenam
При создании шаблонов одной из важных задач стоит выбор подходящего шрифта. Иногда приходится несколько раз менять шрифт пока он нас не устроит. Поэтому в админ панели сайта необходимы поля с выбором шрифтов, а хорошей практикой является видеть как будет выглядеть шрифт на вашем сайте перед его сохранением.
Мы создали простое поле для решения данной задачи и готовы им поделиться.
Итак, поле состоит из поля визуального просмотра выбранного шрифта, кнопок следующего и предыдущего шрифта и кнопоу увеличения и уменьшения шрифта для лучшего просмотра разных шрифтов.
Вот что у нас должно получиться.
Мы не собираемся растягивать эту статью и предоставим сразу весь код.
Создайте файл 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>
