Dzisiaj chciałbym opisać (pewnie dość znany już problem) występowania białych znaków w strukturze HTML pomiędzy elementami HTML. W czym jest problem? Istotą problemu jest chęć pobrania następnego elementu DOM który się znajduję po elemencie na którym mamy jakąś akcję i teraz jeżeli mamy odstęp pomiędzy tymi dwoma elementami, jakieś znaki ( \s, \t, \r, \n ) lub inne nie zdefiniowane białe znaki, to po pobraniu tego elementu przez funkcję nextSibling nie będziemy oczekiwanego efektu, tylko coś ala undefined lub text. A na pewno każdy z nas się z tym spotka ponieważ mamy zdefiniowane gdzieś w głowie że podgląd źródła strony powinien być ładnie sformatowany. Na stronach developer.mozilla.org odnośnie dokumentacji gecko dom można przeczytać właśnie o tej funkcji i przytoczę fragment z ich strony:

<table>
  <tr>
    <td id="cell1">cell1</td>
    <td id="cell2">cell2</td>
  </tr>
  <tr>
    <td id="cell3">cell3</td><td id="cell4">cell4</td></tr>
</table>

Mamy prostą tabele, pierwszy jej wiersz jest ładnie sformatowany by cieszyło nasze oko, drugi jest prosty, w jednym ciągu zapisany. Teraz po pobraniu następnego elementu poprzez nextSibling dla cell1 będziemy mieli text zamiast oczekiwanego przez nas cell2,a po pobraniu następnego elementu (j/w) dla cell3 będziemy mieli cell4.

Teraz za pewne można sobie zadać pytanie i co z tym zrobić? Otóż każdy element w javascript ma coś takiego jak nodeType, nodeType jest niczym innym jak indeksem elementu DOM przypisanym na stałe ustalonym w dokumentacji ECMA-262, zainteresowanych odsyłam do wiki. Nie ma sensu bym tutaj przytaczał wszystkiego odsyłam do w3shools w3schools – nodeTypes. Wracając do sedna sprawy bo troszkę odbiegłem od tematu, aby pobrać następny element trzeba sprawdzić jakiego jest typu. Także funkcja którą poniżej przedstawię nie jest mojego autorstwa, została już trylion razy przedstawiona w internecie,

   /**
    * Metoda zwraca następny obiekt w DOM
    *
    * @param    obj    obiekt elementu
    * @return    obj    następny obiekt w DOM
    */
   nextObject = function( MyObject ) 
   {
      do NextObject = MyObject.nextSibling;
      while (NextObject && NextObject.nodeType != 1);
        return NextObject;
   }

Tadam, proste, szybkie i skuteczne, użycie?

var div = document.getElementById( "jakiesId" );
var nextElement = nextObject( div );

Mam nadzieję że się komuś przyda i uśmierzy ból który spływa na nasze serca podczas pisania kodu js i wyrywania sobie włosów z głowy przy nieoczekiwanych wynikach wykonanego kodu który względnie teoretycznie jest dobry.

Na Grafish Design’s Blog natknąłem się na The Small Callendar. Czyli mały kalendarz, który umożliwia sprawdzenie wybranej daty pod kątem dnia tygodnia. Przedstawiony tam kalendarz jest wersją do druku (dostępny do pobrania w ponad 30 językach). Kalendarz ten różni się od standardowych tym, że ma tylko jeden blok z dniami miesiąca. Postanowiłem stworzyć taki kalendarzyk on-line przy wykorzystaniu PHP oraz odrobiny jQuery, plus oczywiście CSS.

Cel

Kalendarz w wersji oryginalnej wygląda następująco:

The Small Callendar - Grafish Design's Blog

Planowana przeze mnie wersja będzie miała:

1. Wygląd przypominający oryginał
2. Wybór roku innego niż aktualny
3. Wielojęzyczność
4. Możliwość podświetlania kolumny dat
5. Możliwość podświetlania wierszy miesięcy
6. Możliwość podświetlania dni tygodnia dla wybranych dat
7. Możliwość przenoszenia bloku dat po kliknięciu na wiersz miesiąca

Generowanie kalendarza: PHP

Do wygenerowania kalendarza posłużymy się prostą klasą, która wygeneruje nam kilka rzeczy. Po pierwsze stworzymy listę miesięcy, dla każdego z nich sprawdzimy liczbę dni, sprawdzimy dzień tygodnia dla pierwszego dnia miesiąca. Następnie stworzymy na tej podstawie tablicę, która będzie zawierała skróty nazw miesięcy (w wybranym języku), dla wybranego roku, do każdego z miesięcy przypiszemy ilość dni oraz odpowiednio posortowane skróty nazw dni tygodnia.

Klasa ta jest bardzo prosta, zatem możemy ją nazwać imitacją klasy, zbiorem funkcji opakowanych w klasę.
Lista metod:

1. public __construct – 2 parametry opcjonalne: rok, tablica z danymi języka | konstruktor
2. public setLanguage – 1 parametr: tablica z tłumaczeniami | ustawienie języka
3. public getdatesTable – 0 parametrów | tworzy tablicę dni
4. public getCalendar – 0 parametrów | pobiera tablicę z kalendarzem
5. private generateMonths – 0 parametrów | generuje miesiące
6. private generateDayNames – 0 parametrów | tworzy dni tygodnia w odpowiedniej kolejności

Kod klasy

Część po stronie serwera jest na tyle prosta, że nie wymaga większego opisu. Konstruktor może przyjmować 2 parametry: rok oraz tablicę z tłumaczeniem na inny język. Oba parametry są opcjonalne, domyślnym rokiem jest aktualny, język – polski.

Metoda setLanguage ustawia język. Kolejna, getDatesTable generuje tablicę z dniami miesięcy (1-31), oznaczając odpowiednio ilości dni wg miesięcy. getCalendar wywołuje dwie inne: generateMonths – generuję tablicę miesięcy, wraz z ważnymi danymi, oraz generateDayNames – generującą skrótowe nazwy dni tygodnia.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110

<?php
/**
 * VokielSmallCallendar class
 * @author Vokiel | http://blog.vokiel.com
 */
class VokielSmallCallendar {
	/**
	 * Selected year
	 * @var int	$year
	 */
	private $year;
	/**
	 * Shortcuts names for months
	 * @var	array $monthsShort
	 */
	private $monthsShort = array();
	/**
	 * Shortcuts names for week days
	 * @var	array	$daysShort 
	 */
	private $daysShort = array(); 
	/**
	 * Generated months table for the callendar
	 * @var array $months
	 */
	private $months = array();
 
	/**
	 * Construct, 
	 * @param	int	$year
	 * @param	array	$lang
	 */
	public function __construct($year=0,$lang=null){
		$this->year = ($year)? (int)$year : date('Y');
 
		if (!is_array($lang) || !is_array($lang['months']) || !is_array($lang['days'])){
			$lang = null;
		}
		$this->setLanguage($lang);
	}//end of __construct
 
	/**
	 * Setting the monts shortcuts names and days shorcuts names.
	 * Polish is default language.
	 * @param	array	$lang	Monts and days array starting from 1 = January and 1 = Monday
	 */
	public function setLanguage($lang=null){
		$this->monthsShort = (is_array($$lang['months']))? $$lang['months'] : array(1=>'Sty',2=>'Lut',3=>'Mar',4=>'Kwi',5=>'Maj',6=>'Cze',7=>'Lip',8=>'Sie',9=>'Wrz',10=>'Paź',11=>'Lis',12=>'Gru');	
		$this->daysShort = (is_array($$lang['days']))? $$lang['days'] : array(1=>'Pon',2=>'Wt',3=>'Śr',4=>'Czw',5=>'Pt',6=>'Sob',7=>'Nie');
	}//end of setLanguage method
 
	/**
	 * Generating the dates table (numbers from 1 to 31)
	 * @return	string	$datesTable	Generated HTML table
	 */
	public function getDatesTable(){
		$datesTable = '<table><tbody><tr>';
		for ($i=1;$i<32;$i++){
			$class = '';
			if ($i>=28){
				if ($i == $this->months[2]['daysCount'] || $i>29){
					$class = 'class="days_'.$i.'"';
				}
			}
			$datesTable .= '<td '.$class.'>'.$i.'</td>';
			if ($i%7==0){
				$datesTable .= '</tr><tr>';
			}
		}
		$datesTable .= '</tr></tbody></table>';
		return $datesTable;
	}//end of getdatesTable method
 
	/**
	 * Getting the calendar
	 * @return	array	$this->months Array with months shortcuts names and sorted week days shortcuts names	 
	 */
	public function getCalendar(){
		$this->generateMonths();
		$this->generateDayNames();
		return $this->months;
	}//end of getCalendar method
 
	/**
	 * Generating months table
	 */
	private function generateMonths(){
		for ($i=1;$i<13;$i++){
			$time = mktime(0,0,0,$i,1,$this->year);
			$this->months[$i]['weekDay'] = date('N',$time);
			$this->months[$i]['montShort'] = $this->monthsShort[$i];
			$this->months[$i]['daysCount'] = date('t',$time);
		}
	}//end of generateMonths method
 
	/**
	 * Generating week day names shortcuts
	 */
	private function generateDayNames(){
		foreach ($this->months as $month => $dayStart){
			$dayStart = $dayStart['weekDay'];
			for ($i=0;$i<7;$i++){
				$day = ($dayStart+$i>7)? (-(7-$dayStart-$i)) : ($dayStart+$i);
				$this->months[$month]['weekdays'][] = $this->daysShort[$day];
				unset($this->months[$month]['weekDay']);
			}
		}
	}//end of generateDayNames method
 
}// end of VokielSmallCallendar class

Obsługa kalendarza: JavaScript

W tej części zajmiemy się oskrytpowaniem kalendarza w JavaScript (korzystając z jQuery) w celu nadania mu funkcjonalności, dynamiki i użytecznosci. Z naszych założeń wynika, że musimy utworzyć kilka funkcji, które będą reagować na przesuwanie kursora myszki ponad polami kalendarza.

Czytaj dalej tutaj (rozwija treść wpisu)
Czytaj dalej na blogu autora...

Zwiń
Czytaj na blogu autora...

Recently i created nice and simple Symfony widget: sfWidgetFormJQueryMultiSelect. It’s really simple in use and implementation. I have used code written recently by Eric Hynds: jQuery MultiSelect Plugin w/ ThemeRoller Support and standard sfWidgetFormChoice.

As a result, i received sfWidgetFormJQueryMultiSelect.

<?php

/**
 * sfWidgetFormJQueryMultiSelect represents a multi choice select widget.
 *
 * @package    symfony
 * @subpackage widget
 * @author     Kamil Adryjanek <kamil.adryjanek@gmail.com>

 */
class sfWidgetFormJQueryMultiSelect extends sfWidgetFormChoice
{
  /**
   * Constructor.
   *
   * Available options:
   *
   *  * choices:          An array of possible choices (required)
   *  * renderer_class:   The class to use instead of the default ones
   *  * renderer_options: The options to pass to the renderer constructor
   *  * renderer:         A renderer widget (overrides the expanded and renderer_options options)
   *                      The choices option must be: new sfCallable($thisWidgetInstance, 'getChoices')
   * @param array $options     An array of options
   * @param array $attributes  An array of default HTML attributes
   *
   * @see sfWidgetFormChoiceBase
   */

  protected function configure($options = array(), $attributes = array())
  {
    $this->addOption('config', '{}');

    parent::configure($options, $attributes);

    $this->setOption('multiple', true);
    $this->setOption('expanded', true);
  }

  /**
   * @param  string $name        The element name
   * @param  string $value       The value selected in this widget
   * @param  array  $attributes  An array of HTML attributes to be merged with the default HTML attributes
   * @param  array  $errors      An array of errors for the field
   *
   * @return string An HTML tag string
   *
   * @see sfWidgetForm
   */
  public function render($name, $value = null, $attributes = array(), $errors = array())
  {
    return parent::render($name, $value = null, $attributes = array(), $errors = array()).
    	   sprintf(<<<EOF
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery("#%s").multiSelect(
      %s
   );
 });

</script>
EOF
      ,
      $this->generateId($name),
      $this->getOption('config')
      );
  }
}

How to use it
Include into your application neccessary JavaScripts (jQuery 1.4+ and jQuery UI required) and stylesheets: (for example view.yml):

  stylesheets:    [main.css, ui-lightness/jquery-ui-1.7.2.custom.css, jquery.multiselect.css]

  javascripts:    [jquery.js, jquery-ui.js, jquery.multiselect.js]

Then we need to create simple form and set our widgets:

<?php

class SimpleForm extends sfForm {

	public function configure() {

		$userChoices = array('John', 'Michael', 'Tom', 'Peter');

		$this->setWidgets(array(
			'users'	=> new sfWidgetFormJQueryMultiSelect(array(
				'choices'	=> $userChoices
			))
		));

		$this->setValidators(array(
			'users'	=> new sfValidatorChoice(array(
				'choices'	=> array_keys($userChoices)
			))
		));
	}
} 

How does it work (look)
Form should now look similar to that:

Widget should work with Symfony 1.2.X - 1.4.X.

More information about jquery.multiselect plugin can be found on this page.

In the near future I would like to create Symfony widget and put there some of my custom widgets (for example sfWidgetFormJQueryDateTime).

Enjoy

Czytaj dalej tutaj (rozwija treść wpisu)
Czytaj dalej na blogu autora...

Zwiń
Czytaj na blogu autora...