--=REKLAMA=--
Parametr i pole formularza typu kolor - dla Joomla
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!.
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 wygląda nieco inaczej dla Joomla! 1.5 i 1.7 dlatego opiszę go podwójnie.
<?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.
<?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, w którym definiujemy pola formularza, oczywiście także nieco się różnią w zależności od wersji Joomla!
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 :
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 ;?>; }
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 :
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 ;?>; }
Od teraz pola wyboru koloru, opisane naszym nowym typem parametru będą wyglądać następująco:
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.
Oczywiście nadal możemy tam wpisać ręcznie kod koloru (pomijając #).