Google font+variant joomla field
<?php
/**
* @copyright Copyright (C) 2012 Roberto Segura. All rights reserved.
* @license GNU General Public License version 3; see LICENSE.txt
*/
defined('JPATH_BASE') or die;
jimport('joomla.form.formfield');
class JFormFieldGooglefonts extends JFormField {
protected $type = 'googlefonts';
const GOOGLE_API_KEY = 'AIzaSyAgKobHKihymUghuE3Z_ZHMzKI1MOKOLE8';
function getInput(){
// Initialize variables.
$options = array();
$fontsJson = null;
$jsonResponse = 'https://www.googleapis.com/webfonts/v1/webfonts?key=' . self::GOOGLE_API_KEY;
$ch = curl_init();
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($ch, CURLOPT_HEADER, false);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_URL, $jsonResponse);
curl_setopt($ch, CURLOPT_REFERER, $jsonResponse);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
$jsonResponse = curl_exec($ch);
curl_close($ch);
if ($jsonResponse) {
$document = JFactory::getDocument();
$decodedResponse = json_decode($jsonResponse);
if (isset($decodedResponse->items)) {
$fontsJson = "{";
$options[] = JHtml::_('select.option', '', '- Select font -');
$j = 0;
foreach ($decodedResponse->items as $font) {
// replace spaces with + in option value
$value = str_replace(' ', '+', $font->family);
if ($j != 0) {
$fontsJson .= ",";
}
$fontsJson .= '"'.$value.'":';
if ( $font->variants) {
$i = 0;
$fontsJson .= '"';
foreach ($font->variants as $variant) {
if ($i != 0) {
$fontsJson .= ',';
}
$fontsJson .= $variant;
$i++;
}
$fontsJson .= '"';
}
$j++;
$options[] = JHtml::_('select.option', $value, $font->family);
}
$fontsJson .= "}";
$fieldCssId = str_replace(' ', '_', trim(str_replace(array('][','[',']','-'), array(' ',' ',' ','_'), $this->name)));
$css = "
#multifont-selected {
font-weight: bold;
display: inline;
margin-right: 10px;
}
.multifont-btn, .multifont-btn:visited {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #0088cc;
color: #FFFFFF;
padding: 3px 8px;
}";
$document->addStyleDeclaration($css);
$js = "
var j = jQuery.noConflict();
var fontsJson = {$fontsJson};
var multifont1 = '#multifont1';
var multifont2 = '#multifont2';
var hiddenField = '#{$fieldCssId}';
function updateMultifont2() {
var key = j(multifont1).val();
if (key) {
var vals = fontsJson[key].split(',');
console.log(vals);
var secondChoice = j(multifont2);
secondChoice.empty();
j.each(vals, function(index, value) {
secondChoice.append('<option value=\"' + value + '\" >' + value + '</option>');
});
secondChoice.trigger('liszt:updated');
}
}
function updateHidden() {
var value = j(multifont1).val() + ':' + j(multifont2).val();
j(hiddenField).val(value);
j('#multifont-selected').text(value);
j('#multiremove').parent().css('display','block');
j('#multiadd').parent().css('display','none');
return false;
}
function clearHidden() {
j(hiddenField).val('');
j('#multiadd').parent().css('display','block');
j('#multiremove').parent().css('display','none');
return false;
}
j(function() {
updateMultifont2();
j(multifont1).change(function() {
updateMultifont2();
});
if (j(hiddenField).val() != '') {
// updateHidden();
j('#multifont-selected').text(j(hiddenField).val());
var hiddenvals = j(hiddenField).val().split(':');
j(multifont1).val(hiddenvals[0]);
j(multifont2).append('<option selected value=\"' + hiddenvals[1] + '\" >' + hiddenvals[1] + '</option>');
j('#multiremove').parent().css('display','block');
j('#multiadd').parent().css('display','none');
j(multifont1).trigger('liszt:updated');
j(multifont2).trigger('liszt:updated');
} else {
clearHidden();
}
j('#multiadd').click(function(){
updateHidden();
});
j('#multiremove').click(function(){
clearHidden();
});
});
";
JHtml::_('jquery.framework');
$document->addScriptDeclaration($js);
} else{
$options[] = JHtml::_('select.option', '', 'ERROR: None or bad JSON received');
}
} else {
$options[] = JHtml::_('select.option', '', 'ERROR: Wrong URL or google API KEY?');
}
$output = '<div id="multifont-add">';
$output .= JHTML::_('select.genericlist', $options, 'multifont1', 'class="inputbox"', 'value', 'text', $this->value);
$output .= JHTML::_('select.genericlist', array(), 'multifont2', 'class="inputbox"', 'value', 'text', null);
$output .= '<a href="#" id="multiadd" class="multifont-btn">Add</a>';
$output .= '</div>';
$output .= '<div id="multifont-remove">';
$output .= '<p id="multifont-selected"></p>';
$output .= '<a href="#" id="multiremove" class="multifont-btn">Remove</a>';
$output .= '</div>';
$output .= '<input type="hidden" id="'.$fieldCssId.'" name="'.$this->name.'" value="'.$this->value.'" />';
return $output;
}
}