Elep

<?php
/**
 * @copyright	Copyright (C) 2011 Simplify Your Web, Inc. All rights reserved.
 * @license		GNU General Public License version 3 or later; see LICENSE.txt
 */

defined('_JEXEC') or die ;

use Joomla\CMS\Factory;
use Joomla\CMS\Form\FormField;
use Joomla\CMS\HTML\HTMLHelper;

/*
 * Preview for setting up icons
 */
class JFormFieldPreviewIcon extends FormField 
{
	public $type = 'PreviewIcon';
	
	protected function getInput()
	{
	    HTMLHelper::_('stylesheet', 'syw/fonts-min.css', ['version' => 'auto', 'relative' => true]);
		
		// a little over-complicated because having a radius, a bg transparent and no shadow leaves some traces
		$script = 'jQuery(document).ready(function () {';
		
			$script .= 'function resize_font() {';
				$script .= 'var head_width = parseInt(jQuery(\'#jform_params_head_w\').val()); if (isNaN(head_width)) { head_width = 80; } ';
				$script .= 'var head_height = parseInt(jQuery(\'#jform_params_head_h\').val()); if (isNaN(head_height)) { head_height = 80; } ';
				$script .= 'if (head_width >= head_height) { ';
					$script .= 'jQuery(\'.preview_icon i\').css(\'font-size\', (head_height - jQuery(\'#jform_params_border_w_icon\').val() * 2 - jQuery(\'#jform_params_padding_icon\').val() * 2) + \'px\'); ';
				$script .= '} else {';
					$script .= 'jQuery(\'.preview_icon i\').css(\'font-size\', (head_width - jQuery(\'#jform_params_border_w_icon\').val() * 2 - jQuery(\'#jform_params_padding_icon\').val() * 2) + \'px\'); ';
				$script .= '} ';
			$script .= '} ';
		
			$script .= 'var preview_width = parseInt(jQuery(\'#jform_params_head_w\').val()); if (isNaN(preview_width)) { preview_width = 80; } ';
			$script .= 'if (preview_width != 0) { ';
				$script .= 'jQuery(\'.preview_icontype\').css(\'width\', preview_width + \'px\'); ';
				$script .= 'jQuery(\'.preview\').css(\'width\', preview_width + \'px\'); ';				
				$script .= 'resize_font();';			
			$script .= '} ';
			$script .= 'jQuery(\'#jform_params_head_w\').change(function() { ';
				$script .= 'jQuery(\'.preview_icontype\').css(\'width\', jQuery(\'#jform_params_head_w\').val() + \'px\'); ';
				$script .= 'jQuery(\'.preview\').css(\'width\', jQuery(\'#jform_params_head_w\').val() + \'px\'); ';			
				$script .= 'resize_font();';			
			$script .= '}); ';
			
			$script .= 'var preview_height = parseInt(jQuery(\'#jform_params_head_h\').val()); if (isNaN(preview_height)) { preview_height = 80; } ';
			$script .= 'if (preview_height != 0) { ';
				$script .= 'jQuery(\'.preview_icontype\').css(\'height\', preview_height + \'px\'); ';
				$script .= 'jQuery(\'.preview\').css(\'height\', preview_height + \'px\'); ';
			$script .= '} ';
			$script .= 'jQuery(\'#jform_params_head_h\').change(function() { ';
				$script .= 'jQuery(\'.preview_icontype\').css(\'height\', jQuery(\'#jform_params_head_h\').val() + \'px\'); ';
				$script .= 'jQuery(\'.preview\').css(\'height\', jQuery(\'#jform_params_head_h\').val() + \'px\'); ';				
				$script .= 'resize_font();';			
			$script .= '}); ';
			
			$script .= 'var preview_color = jQuery(\'#jform_params_icon_color\').val(); ';
			$script .= 'if (preview_color != \'\') { ';
				$script .= 'jQuery(\'.preview_icon i\').css(\'color\', preview_color); ';
			$script .= '} ';
				$script .= 'jQuery(\'#jform_params_icon_color\').change(function() { ';
				$script .= 'jQuery(\'.preview_icon i\').css(\'color\', jQuery(\'#jform_params_icon_color\').val()); ';
			$script .= '}); ';		
		
			$script .= 'var preview_border_width = jQuery(\'#jform_params_border_w_icon\').val(); ';
			$script .= 'if (preview_border_width > 0) { ';
				$script .= 'jQuery(\'.preview_icon\').css(\'border\', preview_border_width + \'px\' + \' solid \' + jQuery(\'#jform_params_border_c_icon\').val()); ';
				$script .= 'jQuery(\'.preview_icon\').css(\'border-radius\', jQuery(\'#jform_params_border_r_icon\').val() + \'px\'); ';
			$script .= '} ';
			$script .= 'jQuery(\'#jform_params_border_w_icon\').change(function() { ';
				$script .= 'jQuery(\'.preview_icon\').css(\'border\', jQuery(\'#jform_params_border_w_icon\').val() + \'px\'+ \' solid \' + jQuery(\'#jform_params_border_c_icon\').val()); ';
				$script .= 'jQuery(\'.preview_icon\').css(\'border-radius\', jQuery(\'#jform_params_border_r_icon\').val() + \'px\'); ';			
				$script .= 'resize_font();';			
			$script .= '}); ';
			
			$script .= 'var preview_border_color = jQuery(\'#jform_params_border_c_icon\').val(); ';
			$script .= 'if (preview_border_color != \'\') { ';
				$script .= 'jQuery(\'.preview_icon\').css(\'border\', jQuery(\'#jform_params_border_w_icon\').val() + \'px\' + \' solid \' + preview_border_color); ';
			$script .= '} ';
			$script .= 'jQuery(\'#jform_params_border_c_icon\').change(function() { ';
				$script .= 'jQuery(\'.preview_icon\').css(\'border\', jQuery(\'#jform_params_border_w_icon\').val() + \'px\' + \' solid \' + jQuery(\'#jform_params_border_c_icon\').val()); ';
			$script .= '}); ';
			
			$script .= 'var preview_border_radius = jQuery(\'#jform_params_border_r_icon\').val(); ';
			$script .= 'if (preview_border_radius != \'\') { ';
				$script .= 'jQuery(\'.preview_icon\').css(\'border-radius\', preview_border_radius + \'px\'); ';
			$script .= '} ';
			$script .= 'jQuery(\'#jform_params_border_r_icon\').change(function() { ';
				$script .= 'jQuery(\'.preview_icon\').css(\'border-radius\', jQuery(\'#jform_params_border_r_icon\').val() + \'px\'); ';
			$script .= '}); ';
		
			$script .= 'var preview_bgcolor = jQuery(\'#jform_params_icon_bgcolor\').val(); ';
			$script .= 'if (preview_bgcolor != \'\') {';
				$script .= 'jQuery(\'.preview_icon\').css(\'background-color\', preview_bgcolor); ';
			$script .= '} ';
			$script .= 'jQuery(\'#a_jform_params_icon_bgcolor\').click(function() { ';
				$script .= 'jQuery(\'.preview_icon\').css(\'background-color\', \'transparent\'); ';
				//$script .= 'if (jQuery(\'#jform_params_arrow_shadow\').val() == 0) { ';
				//$script .= 'jQuery(\'.preview_arrow\').css(\'border-radius\', \'0px\'); ';
				//$script .= '}; ';
			$script .= '}); ';
			$script .= 'jQuery(\'#visible_jform_params_icon_bgcolor\').change(function() { ';
				//$script .= 'jQuery(\'.preview_arrow\').css(\'border-radius\', jQuery(\'#jform_params_arrow_bgr\').val() + \'px\'); ';
				$script .= 'jQuery(\'.preview_icon\').css(\'background-color\', jQuery(\'#jform_params_icon_bgcolor\').val()); ';
			$script .= '}); ';
			
			// 			$script .= 'if (preview_bgcolor == \'\' && jQuery(\'#jform_params_arrow_shadow\').val() == 0) {';
			// 				$script .= 'jQuery(\'.preview_arrow\').css(\'border-radius\', \'0px\'); ';
			// 			$script .= '} else { ';
			// 				$script .= 'jQuery(\'.preview_arrow\').css(\'border-radius\', jQuery(\'#jform_params_arrow_bgr\').val() + \'px\'); ';
			// 			$script .= '} ';
			// 			$script .= 'jQuery(\'#jform_params_arrow_bgr\').change(function() { ';
			// 				$script .= 'if ((jQuery(\'#jform_params_arrow_bgc\').val() == \'\' || jQuery(\'#jform_params_arrow_bgc\').val() == \'transparent\') && jQuery(\'#jform_params_arrow_shadow\').val() == 0) {';
			// 					$script .= 'jQuery(\'.preview_arrow\').css(\'border-radius\', \'0px\'); ';
			// 				$script .= '} else { ';
			// 					$script .= 'jQuery(\'.preview_arrow\').css(\'border-radius\', jQuery(\'#jform_params_arrow_bgr\').val() + \'px\'); ';
			// 				$script .= '} ';
			// 			$script .= '}); ';
			
			$script .= 'jQuery(\'.preview_icon\').css(\'box-shadow\', \'0 0 \' + jQuery(\'#jform_params_sh_w_icon\').val() + \'px rgba(0, 0, 0, 0.8)\'); ';
			$script .= 'jQuery(\'#jform_params_sh_w_icon\').change(function() { ';
			// 						$script .= 'if ((jQuery(\'#jform_params_icon_bgcolor\').val() == \'\' || jQuery(\'#jform_params_icon_bgcolor\').val() == \'transparent\') && jQuery(\'#jform_params_sh_w_icon\').val() == 0) {';
			// 							$script .= 'jQuery(\'.preview_icon\').css(\'border-radius\', \'0px\'); ';
			// 						$script .= '} else { ';
			// 							$script .= 'jQuery(\'.preview_icon\').css(\'border-radius\', jQuery(\'#jform_params_border_r_icon\').val() + \'px\'); ';
			// 						$script .= '} ';
				$script .= 'jQuery(\'.preview_icon\').css(\'box-shadow\', \'0 0 \' + jQuery(\'#jform_params_sh_w_icon\').val() + \'px rgba(0, 0, 0, 0.8)\'); ';
			$script .= '}); ';
			
			$script .= 'jQuery(\'.preview_icon i\').css(\'text-shadow\', \'0 0 \' + jQuery(\'#jform_params_sh_w_text_icon\').val() + \'px rgba(0, 0, 0, 0.8)\'); ';
			$script .= 'jQuery(\'#jform_params_sh_w_text_icon\').change(function() { ';
			// 						$script .= 'if ((jQuery(\'#jform_params_icon_bgcolor\').val() == \'\' || jQuery(\'#jform_params_icon_bgcolor\').val() == \'transparent\') && jQuery(\'#jform_params_sh_w_icon\').val() == 0) {';
			// 							$script .= 'jQuery(\'.preview_icon\').css(\'border-radius\', \'0px\'); ';
			// 						$script .= '} else { ';
			// 							$script .= 'jQuery(\'.preview_icon\').css(\'border-radius\', jQuery(\'#jform_params_border_r_icon\').val() + \'px\'); ';
			// 						$script .= '} ';
				$script .= 'jQuery(\'.preview_icon i\').css(\'text-shadow\', \'0 0 \' + jQuery(\'#jform_params_sh_w_text_icon\').val() + \'px rgba(0, 0, 0, 0.8)\'); ';
			$script .= '}); ';
			
			$script .= 'var preview_padding = jQuery(\'#jform_params_padding_icon\').val(); ';
			$script .= 'if (preview_padding > 0) { ';
				$script .= 'jQuery(\'.preview_icon\').css(\'padding\', preview_padding + \'px\'); ';
			$script .= '} ';
			$script .= 'jQuery(\'#jform_params_padding_icon\').change(function() { ';
				$script .= 'jQuery(\'.preview_icon\').css(\'padding\', jQuery(\'#jform_params_padding_icon\').val() + \'px\'); ';			
				$script .= 'resize_font();';			
			$script .= '}); ';
			
			$script .= 'var preview_font_icon = jQuery(\'#jform_params_default_icon\').val(); ';
			$script .= 'if (preview_font_icon != \'\') {';
				$script .= 'jQuery(\'.preview_icon i\').addClass(\'SYWicon-\' + preview_font_icon); ';
			$script .= '} else {';
				$script .= 'jQuery(\'.preview_icon i\').addClass(\'SYWicon-leaf\'); ';
			$script .= '}';
			$script .= 'jQuery(\'#jform_params_default_icon_default\').click(function() { ';
				$script .= 'jQuery(\'.preview_icon i\').removeClass(); ';
				$script .= 'jQuery(\'.preview_icon i\').addClass(\'SYWicon-leaf\'); ';
			$script .= '}); ';
			$script .= 'jQuery(\'#jform_params_default_icon\').change(function() { ';
				$script .= 'jQuery(\'.preview_icon i\').removeClass(); ';
				$script .= 'jQuery(\'.preview_icon i\').addClass(\'SYWicon-\' + jQuery(\'#jform_params_default_icon\').val()); ';
			$script .= '}); ';	
			$script .= 'jQuery(\'#jform_params_default_icon_select li\').click(function() { ';
				$script .= 'jQuery(\'.preview_icon i\').removeClass(); ';
				$script .= 'jQuery(\'.preview_icon i\').addClass(\'SYWicon-\' + jQuery(\'#jform_params_default_icon\').val()); ';
			$script .= '}); ';
		
		$script .= '});';
		
		Factory::getDocument()->addScriptDeclaration($script);
		
		$html = '';
		
		$style = 'display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;';
		$style .= ' -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;';
		$style .= ' -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;';
		$style .= ' width: 100%; height: 100%;';
		$style .= ' -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;';
		
		$html .= '<div class="preview" style="padding: 20px; background-color: #fbfbfb; border: 2px dashed #ccc; -webkit-border-radius: 10px; border-radius: 10px">';
			$html .= '<div class="preview_icontype" style="margin: 0 auto;">';
				$html .= '<div class="preview_icon" style="'.$style.'">';
					$html .= '<i></i>';
				$html .= '</div>';
			$html .= '</div>';
		$html .= '</div>';
		
		return $html;
	}
	
}
?>