Tekst źródłowy strony Parametr i pole formularza typu kolor

{{SpisPoPrawej}}
''' Parametr i pole formularza typu kolor ''' - dla Joomla {{j_15}} {{j_16}} {{j_17}}

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ę [http://jscolor.com/ 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====
<source lang="php"><?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.'"/>';		
	}
}
?></source>

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====
<source lang="php">
<?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.'/>';
					
		
	}
}
</source>

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 <code><params></code> musimy dodać ścieżkę do naszego katalogu z plikiem nowego typu :
<source lang="xml">
<params addpath="/ścieżka/do/katalogu/z/plikiem">
</source>

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:
<source lang="xml">
<param name="nazwa" type="color" default="FFFFFF" label="KOLOR_PARAMRTRU" description="KOLOR_PARAMETRU_OPIS" />
</source>

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
{{Uwaga|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.:
<source lang="php">
.thumbnail:hover{
background-color: #<?php echo $kolorchmurki ;?>;
}
</source>

}}

====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 <code><fields></code> ścieżki do katalogu z naszym plikiem.
<source lang="xml">
<fields name="params" addfieldpath="/ścieżka/do/katalogu/z/plikiem">
</source>
Teraz możemy używać nowego typu pola formularza w następujący sposób:
<source lang="php">
<field name="nazwa" type="color" class="color" default="FFCC34" label="KOLOR" description="KOLOR_OPIS"/>
</source>
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
{{Uwaga|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.:
<source lang="php">
.thumbnail:hover{
background-color: #<?php echo $kolorchmurki ;?>;
}
</source>

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

[[Plik: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.

[[Plik:parametrb.png]]

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

<noinclude>

== Zobacz także ==
{{NTP}}
{{NTPF}}
{{NTPL}}
<noinclude>
[[Kategoria:Typy parametrów|!]]
[[Kategoria:Programiści]]
[[Kategoria:Programowanie]]</noinclude>