--=REKLAMA=--

Parametr i pole formularza typu kolor

Z Joomla!WikiPL

Wersja Zwiastun (dyskusja | edycje) z dnia 15:42, 10 gru 2013

(różn.) ← poprzednia wersja | przejdź do aktualnej wersji (różn.) | następna wersja → (różn.)

Parametr i pole formularza typu kolor - dla Joomla Joomla w wersji 1.5.x J 16.png J 17.png

Jeśli komuś brakuje w standardowych typach parametrów lub polach formularza typu kolor i nie wie jak takowe zrobić, powinien przeczytać ten poradnik.

Na chwilę obecną, każdy wybór koloru w ustawieniach jakiegokolwiek dodatku do Joomla!, opartego na standardowych polach formularza odbywa się poprzez wpisanie w dane pole, sześciu znakowego oznaczenia koloru. Nie jest to szczególnie prosta obsługa koloru, bo skąd niby zwykły użytkownik ma wiedzieć że np. ładny jasny zielony kolor to #B6FFA3

Prościej (dla użytkownika) byłoby zastosować wybór koloru wskaźnikiem myszki z palety barw. Niestety Joomla! nie ma takiej opcji standardowo. Dlatego w tym poradniku, przedstawię jak takową funkcjonalność wprowadzić do nowo powstających dodatków dla Joomla!.


Potrzebne pliki

Aby nasz nowo powstający typ kolor prawidłowo działał, potrzebujemy paczki najnowszej biblioteki JavaScript Color Picker. W tym celu udajemy się tutaj i pobieramy paczkę .zip z najnowszą wersją.

W paczce tej znajdziemy katalog jscolor, a w nim sześć potrzebnych nam plików.

Potrzebujemy jeszcze pliku o nazwie kolor.php , który to będzie zawierał klasę naszego typu pola.

Plik kolor.php

Plik kolor.php wygląda nieco inaczej dla Joomla! 1.5 i 1.7 dlatego opiszę go podwójnie.

Joomla! 1.5

<?php
// Sprawdzenie czy plik jest wywoływany z Joomla!
defined('_JEXEC') or die( 'Restricted access' );
 
/**
* Dodadkowy parametr typu 'color' 
* @version x.x.x
* @autor danielg28.pl - Daniel Golub
* http://www.danielg28.pl
* @license http://creativecommons.org/licenses/by-sa/2.5/pl/
**/
 
class JElementColor extends JElement
{
	/**
	 * 
	 *
	 * @access	protected
	 * @var		string
	 */
	var	$_name = 'Color';
 
function fetchElement($name, $value, &$node, $control_name)
	{
$document = &JFactory::getDocument();
$document->addScript(JURI::base(). '../ścieżka/do/pliku/jscolor.js' );
return '<input class="color" value="'.$value.'" name="'.$control_name.'['.$name.']" id="'.$control_name.$name.'"/>';		
	}
}
?>

Jak widać kodu niezbyt dużo. Najważniejsze jest podanie odpowiedniej ścieżki do pliku jscolor.js z paczki którą pobraliśmy w poprzednim punkcie.

Joomla! 1.7

<?php
 
/**
* Dodatkowy typ pola formularza - kolor.
* @version x.x.x
* @autor danielg28.pl - Daniel Golub
* http://www.danielg28.pl
* @license http://creativecommons.org/licenses/by-sa/2.5/pl/
**/
 
// Sprawdzamy czy plik wywołany został z Joomla!
defined('JPATH_BASE') or die;
 
jimport('joomla.form.formfield');
 
 
 
class JFormFieldColor extends JFormField
{
 
	protected $type = 'Color';
 
	protected function getInput()
	{
		$document = &JFactory::getDocument();
 
		$document->addScript(JURI::root().'/ścieżka/do/pliku/jscolor.js' );
 
 
 
		// 
		$size		= $this->element['size'] ? ' size="'.(int) $this->element['size'].'"' : '';
		$maxLength	= $this->element['maxlength'] ? ' maxlength="'.(int) $this->element['maxlength'].'"' : '';
		$class		= $this->element['class'] ? ' class="'.(string) $this->element['class'].'"' : '';
		$auto		= ((string) $this->element['autocomplete'] == 'off') ? ' autocomplete="off"' : '';
		$readonly	= ((string) $this->element['readonly'] == 'true') ? ' readonly="readonly"' : '';
		$disabled	= ((string) $this->element['disabled'] == 'true') ? ' disabled="disabled"' : '';
 
 
		// Inicjacja JavaScript.
		$onchange	= $this->element['onchange'] ? ' onchange="'.(string) $this->element['onchange'].'"' : '';
 
		return '<input type="color" name="'.$this->name.'" id="'.$this->id.'"' .
				' value="'.htmlspecialchars($this->value, ENT_COMPAT, 'UTF-8').'"' .
				$auto.$class.$readonly.$disabled.$size.$maxLength.'/>';
 
 
	}
}

Tutaj także musimy zwrócić szczególną uwagę na ścieżkę dostępu do pliku jscolor.js.

Wpisy w pliku XML

Wpisy w pliku XML, w którym definiujemy pola formularza, oczywiście także nieco się różnią w zależności od wersji Joomla!

Joomla! 1.5

Aby korzystać z dodatkowego typu parametru, musimy Joomla! powiedzieć gdzie on się znajduje. W tym celu do znacznika <params> musimy dodać ścieżkę do naszego katalogu z plikiem nowego typu :

<params addpath="/ścieżka/do/katalogu/z/plikiem">

Mając już dodaną ścieżkę do pliku color.php (do katalogu zawierającego ten plik !), możemy używać naszego nowego typu parametru w następujący sposób:

<param name="nazwa" type="color" default="FFFFFF" label="KOLOR_PARAMRTRU" description="KOLOR_PARAMETRU_OPIS" />

gdzie :

  • name - niepowtarzalna nazwa naszego parametru,
  • type - musi być color,
  • default - tutaj podajemy kod koloru, który ma być standardowo dopasowany do danego parametru.
  • label - nazwa naszego parametru, widoczna w ustawieniach, w Panelu Administracyjnym
  • description - Dodatkowy opis naszego parametru, wyświetlany w chmurce po najechaniu kursorem myszki
Ikona informacja.png
 Informacja

 Należy zwrócić szczególną uwagę na brak # (krzyżyka) przed kodem koloru! Zastosowana biblioteka JavaScript Color Picker przekazuje wartość koloru bez # (krzyżyka), co wymusza na programiście, dodanie go w kodzie pisanego dodatku. Np.:

.thumbnail:hover{
background-color: #<?php echo $kolorchmurki ;?>;
}


Joomla! 1.7

Podobnie jak dla Joomla! 1.5, musimy wskazać gdzie znajduje się kod naszego nowego typu pola formularza. Robimy to poprzez dodanie do znacznika <fields> ścieżki do katalogu z naszym plikiem.

<fields name="params" addfieldpath="/ścieżka/do/katalogu/z/plikiem">

Teraz możemy używać nowego typu pola formularza w następujący sposób:

<field name="nazwa" type="color" class="color" default="FFCC34" label="KOLOR" description="KOLOR_OPIS"/>

gdzie :

  • name - niepowtarzalna nazwa naszego parametru,
  • type - musi być color,
  • class - musi być color,
  • default - tutaj podajemy kod koloru, który ma być standardowo dopasowany do danego parametru.
  • label - nazwa naszego parametru, widoczna w ustawieniach, w Panelu Administracyjnym
  • description - Dodatkowy opis naszego parametru, wyświetlany w chmurce po najechaniu kursorem myszki
Ikona informacja.png
 Informacja

 Należy zwrócić szczególną uwagę na brak # (krzyżyka) przed kodem koloru! Zastosowana biblioteka JavaScript Color Picker przekazuje wartość koloru bez # (krzyżyka), co wymusza na programiście, dodanie go w kodzie pisanego dodatku. Np.:

.thumbnail:hover{
background-color: #<?php echo $kolorchmurki ;?>;
}

Efekt

Od teraz pola wyboru koloru, opisane naszym nowym typem parametru będą wyglądać następująco:

Parametrkolor.png

Dzięki zastosowaniu nowego typu parametru, od razu widzimy jaki kolor posiada dany parametr naszego dodatku, a nie tylko suche liczby go określające. Jeśli kursorem myszki klikniemy w pole wyboru koloru, otworzy się nam okienko z możliwością wizualnego wyboru nowego koloru.

Parametrb.png

Oczywiście nadal możemy tam wpisać ręcznie kod koloru (pomijając #).


Zobacz także

Lista wszystkich typów parametrów dla Joomla! 1.5

calendar  : category : editors  : filelist  : folderlist  : helpsites  : hidden  : imagelist  : languages  : list  : menu  : menuitem  : password  : radio  : section  : spacer  : sql  : text  : textarea  : timezones  : usergroup

Lista wszystkich typów pól formularzy dla Joomla! 1.7

accesslevel  : cachehandler  : calendar  : category  : checkbox  : checkboxes  : combo  : componentlayout  : contentlanguage  : editor  : editors  : file  : filelist  : folderlist  : groupedlist  : helpsite  : hidden  : imagelist  : integer  : language  : list  : media  : menu  : menuitem  : modulelayout  : password  : radio  : rules  : sessionhandler  : spacer  : sql  : templatestyle  : text  : textarea  : timezone  : user  : usergroup



Dziękujemy za wkład

» Stefan Wajda [zwiastun],