First, download Shadowbox. As of this version, the downloaded files are automatically minified, so in order to be able to properly add the needed code you will have to prettify the code, using a tool such as http://jsbeautifier.org/.

After you have prettified the code, scroll down right after the onWindowResize method, which should look something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13

k.onWindowResize = function () {
    if (!P) {
        return
    }
    I();
    var K = g.player,
        S = R(K.height, K.width);
    t(S.width, S.left);
    E(S.innerHeight, S.top);
    if (K.onWindowResize) {
        K.onWindowResize()
    }
};

The reason I am including the onWindowResize method is because, the code being packed, the variable names might change in subsequent versions of Shadowbox, so you will have to take a look at an existing function. Now, right below the onWindowResize method, add the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

k.dynamicResize = function (w, h) {
    if (!P) {
        return
    }
    I();
    g.player.width = w;
    g.player.height = h;
    var K = g.player,
        S = R(K.height, K.width);
    t(S.width, S.left);
    E(S.innerHeight, S.top);
    if (K.onWindowResize) {
        K.onWindowResize()
    }
};

Notice that there are only three lines that differ between the two methods. After adding this method (and perhaps minifying the code again), you can easily resize the modal like this:

1

Shadowbox.skin.dynamicResize(600, 400);

Or, if you want to do it from inside the iframe loaded within the modal:

1

window.parent.Shadowbox.skin.dynamicResize(600, 400);

Note that this method does not resize the window beyond the viewport dimensions. It will still be scaled down if it exceeds the viewport’s width or height.

Example page
Example script

Step 1: provide the JSON events in HTML:

1
2
3
4
5

var events = [
    {date: '2009-11-05', url: 'http://www.example.com'},
    {date: '2009-11-07', url: 'http://www.example.com'},
    {date: '2009-11-10', url: 'http://www.example.com'}
];

Step 2: extend goog.ui.DatePicker:

1
2
3
4
5
6
7
8
9
10

goog.provide('goog.ui.EventsDatePicker');
 
goog.require('goog.ui.DatePicker');
 
goog.ui.EventsDatePicker = function(opt_events, opt_date, opt_dateTimeSymbols) {
    goog.ui.DatePicker.call(this, opt_date, opt_dateTimeSymbols);
 
    this.events = opt_events;
};
goog.inherits(goog.ui.EventsDatePicker, goog.ui.DatePicker);

Notice how inheritance is handled with Closure. Even though we call goog.inherits(), we must also call the superclass constructor for it to work.

Step 3: highlight events:

goog.ui.DatePicker has a setDecorator() method, that accepts a function as it’s parameter. The function should take a Date object and return a CSS class name to decorate the corresponding cell with.

It’s basically called once for every cell in the picker, and we are going to use this by checking whether an event exists for the date and return “goog-date-picker-event” if so:

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

goog.ui.EventsDatePicker = function(opt_events, opt_date, opt_dateTimeSymbols) {
    goog.ui.DatePicker.call(this, opt_date, opt_dateTimeSymbols);
 
    this.events = opt_events;
 
    // new line:
    this.setDecorator(this.eventDecorator);
};
goog.inherits(goog.ui.EventsDatePicker, goog.ui.DatePicker);
 
/**
 * Searches the events array and returns the event corresponding to passed date
 */
goog.ui.EventsDatePicker.prototype.findEventByDate = function (date) {
    var dateString = date.toIsoString(true);
    var event      = goog.array.find(this.events, function (event) { return event.date == dateString; });
 
    return event;
};
 
/**
 * Returns a CSS class name to use for cells that have events
 */
goog.ui.EventsDatePicker.prototype.eventDecorator = function (date) {
    var event = this.findEventByDate(date);    
 
    if (event !== null) {
        return 'goog-date-picker-event';
    }
};

Notice the use of goog.array.find() to find the event that matches the date.

Step 4: click events:

We will use the findEventByDate function defined above and DatePicker’s SELECT event to jump to an event’s URL when clicking on it’s date:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

goog.ui.EventsDatePicker = function(opt_events, opt_date, opt_dateTimeSymbols) {
    goog.ui.DatePicker.call(this, opt_date, opt_dateTimeSymbols);
    this.events = opt_events;
    this.setDecorator(this.eventDecorator);
 
    // new line:
    goog.events.listen(this, goog.ui.DatePicker.Events.SELECT, this.dateClicked, false, this);
};
/**
 * Checks if an event cell was clicked, and jumps to the event's URL if true
 */
goog.ui.EventsDatePicker.prototype.dateClicked = function (event) {
    var date  = event.date;
    var event = this.findEventByDate(date);
    if (event !== null && event.url != '') {
        document.location.href = event.url;
    }
};

That’s it :). It’s a short example, but it covers some of the basic aspects of inheritance, event listeners, and some of the utility methods. Closure looks nice :)

Example page
Example script

Documentatia si codul sunt pe pagina de la Google Code, o sa redau si aici exemplul: Presupunem ca vrem sa rulam functia add cu doi parametri la apasarea tastelor ALT+A:

1
2
3
4

function add(a, b) {
    alert(parseInt(a) + parseInt(b));
}
Hotkeys.bind("alt+a", add, 3, 4);

Pentru mai multe feature-uri, precum si lista de alias-uri pentru taste, consultati pagina proiectului.

Urmand recomandarile echipei de la Yahoo!, o sa va arat la ce solutie am ajuns.

Dar mai intai … cifre. Am ales Okazii.ro drept studiu de caz (toate masuratorile sunt facute cu YSlow, folosind o versiune salvata a primei pagini):

Fara FTL (pagina salvata aici)

• Nota generala in YSlow: E
• Numar request-uri pe prima pagina: 62
• Dimensiune prima pagina: 406.4KB

Cu FTL (pagina salvata aici)

• Nota generala in YSlow: C
• Numar request-uri pe prima pagina: 51
• Dimensiune prima pagina: 226.0KB

Calculat la traficul lor (aprox. 82.000 vizitatori unici pe zi), netinand cont de cache in nici unul din cazuri, asta se traduce in o diferenta de 902.000 de request-uri si 14.1 GB trafic lunar.

Cum se foloseste

Presupunand urmatoarea structura de directoare:

/public
    /css
    /js
index.php

Descarcati arhiva si extrageti fisierele in root asa incat noua structura va fi:

/ftl
    /cache
    /lib
    CSS.php
    File.php
    JS.php
    config.php
    index_css.php
    index_js.php
/public
    /css
    /js
index.php

Mutati fisierele index_css.php si index_js.php din directorul /ftl in directorul /public/css, respectiv /public/js, si redenumiti-le in index.php:

/ftl
    /cache
    /lib
    CSS.php
    File.php
    JS.php
    config.php
/public
    /css
        index.php
    /js
        index.php
index.php

Adaugati liniile urmatoare in .htaccess:

1
2
3
4
5
6
7
8

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType application/x-javascript A315360000
    ExpiresByType text/css A315360000
</IfModule>
 
RewriteEngine On
RewriteRule ^public/(js|css)/([a-z0-9\.]+)\.(js|css)$    public/$1/index.php?hash=$2

Includeti fisierele necesare in index.php:

1
2
3
4

<?php
    include("ftl/JS.php");
    include("ftl/CSS.php");
?>

Totul e pregatit, tot ce mai trebuie sa facem e sa incarcam in pagina fisierele. Spre exemplu, ca sa incarc in <head> cateva fisiere CSS si JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?php
    $css = new FTL_CSS();
    $js  = new FTL_JS();
 
    $css->add('reset')
        ->add('typo')
        ->add('layout')
        ->add('error')
        ->add('ie', 'lte IE 7');
 
    $js->add('prototype')
       ->add('sizzle')
       ->add('effects')
       ->add('lightbox');
 
    echo $css->render();
    echo $js->render();
?>

Nu uitati sa setati drepturi de scriere pe subdirectoarele din directorul /ftl/cache.

Codul HTML generat va arata in felul urmator:

1
2
3

<link rel="stylesheet" type="text/css" media="screen" href="public/css/1e9dd525d1fbe94f7b8aede22cc141f5.1242750618.css" />
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" media="screen" href="public/css/25400724d7370b0b29c9369d9af3dd21.1242750626.css" /><![endif]-->
<script type="text/javascript" src="public/js/56c728a5a7689ab1663359a7edff160a.1242751025.js"></script>

Doua fisiere .css (unul pentru cele standard, unul incarcat doar pentru IE), si un fisier .js. 3 request-uri in loc de 9, si o dimensiune totala de aprox. 6.5 ori mai mica. Fisierele sunt atat minified cat si gzipped, folosind librariile CSSTidy, respectiv Packer

Suna bine, dar ce se intampla cand …

• Modific sau sterg un fisier .css sau .js ? Trebuie sa schimb ceva de fiecare data ?

  Nu. De fiecare data cand un fisier este modificat sau sters, fisierul rezultat este regenerat automat, fara nevoie de interventie.

• Un utilizator foloseste un browser ce nu suporta Gzip (stone-age style) ?

  Respectivului utilizator ii este servita automat o versiune doar minified. Putin mai mare, evident, dar functionala.

• Structura directoarelor mele nu corespunde cu cea din exemplul de mai sus ?
  In directorul /ftl este un fisier config.php unde puteti schimba caile catre fisiere / directoare. Aveti grija numai ca include-urile sa functioneze.

Asadar, update-urile si bug-tracking-ul vor fi de acum aici.

PS: Cateva din noilea feature-uri sunt in exemple.

Cu ocazia asta am creat si primul proiect pe Google Code, loc in care le voi muta si pe cele anterioare.

Un demo este aici, iar pagina proiectului pe Google Code este asta.

Cum jQuery intotdeauna a stat mai bine la capitolul viteza a selectorilor, inlocuirea selector engine-ului Prototype cu Sizzle ar trebui sa aduca un binevenit boost de performanta.

Urmarind instructiunile din acest articol, este suficient sa incarcam Sizzle (4KB minified si gzipped) si sa adaugam urmatorul cod dupa Prototype:

1
2
3
4
5
6
7
8
9
10
11

//Overwrite findChildElements to use Sizzle http://sizzlejs.com
Selector.findChildElements = function(element, expression){
    expression = expression.join(", ");
    var results = Sizzle(expression, element);
    if(results.length > 0){
        for(var i=0; i < results.length; i++){
            results[i] = Element.extend(results[i]);
        }
    }
    return results;
};

Acum atat $$ cat si Element#select vor folosit Sizzle. Unul din avantajele majore (pe langa viteza mult imbunatatita) este acela ca in afara de schimbarea de mai sus, nu implica nici o alta modificare in codul nostru, fiind deci posibila trecerea la Sizzle in mijlocul procesului de dezvoltare a proiectului.

Teste

SlickSpeed Selectors Test

Puteti rula un test comparativ intre Prototype, Prototype cu Sizzle, si jQuery accesand link-ul de mai sus.

Scorurile din imagine reprezinta medii ale rularilor multiple (scorul mai mic e mai bun). Toate au fost rulate sub Windows. Din ele reies cateva concluzii:

• In majoritatea browserelor recente, combinatia Prototype+Sizzle a obtinut scoruri aproape identice de jQuery (rezultat de asteptat de altfel).
• Selector-engine-ul default in Prototype a iesit castigator in cazul versiunilor “pe cale de disparitie” ale browserelor (Firefox 2, Safari 3) precum si in Opera.
• jQuery se detaseaza clar cand vine vorba de ambele versiuni de Internet Explorer
• Cea mai importanta concluzie: Sizzle aduce un bonus de viteza in browserele ce reprezinta viitorul, precum si in Internet Explorer (chiar daca tot nu se apropie de jQuery), prin urmare eu unul voi apela la aceasta solutie de acum incolo.

PS: voi sterge orice comentariu care se rezuma la “[insert framework name] sucks! Mine is bigger and better.” :)

Am dezvoltat acest plugin ca pe o jucarie personala, asa ca il prezint aici in speranta ca ii va fi de folos cuiva.

Ca de obicei, inainte de detaliile tehnice, vizitati paginile cu exemple:

• Orizontal
• Vertical
• Diagonal

1. Cerinte

Pentru functionarea acestui plugin veti avea nevoie de:

• Prototype 1.6
• Libraria Effects din cadrul Script.aculo.us 1.8

Acestea vor trebui incarcate in pagina inaintea Showcase.js:

1
2
3

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="effects.js"></script>
<script type="text/javascript" src="showcase.js"></script>

2. Markup

Minimul de markup si stilizare necesare pentru functionare este urmatorul:

1
2
3
4
5
6
7
8
9

<a href="#next" class="controls" rel="next">Next</a>
<a href="#previous" class="controls" rel="previous">Previous</a>	
<ul id="showcase">
	<li><img src="images/1.jpg" alt="1" /></li>
	<li><img src="images/2.jpg" alt="2" /></li>
	<li><img src="images/3.jpg" alt="3" /></li>		
	...
	<li><img src="images/n.jpg" alt="n" /></li>
</ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#showcase {
	position: relative;
	width: 700px;
	height: 170px;
}
#showcase li {
	width: 170px;
	height: 170px;
	float: left;	
	list-style-type: none;	
}
#showcase li img {
	width: 100%;
	height: 100%;
}

Codul de mai sus corespunde unui Showcase orizontal de 700x170px. Orientarea (orizontala / verticala / diagonala) este selectata la initializare:

3. Initializare

Initializarea plugin-ului se face printr-o singura linie de cod:

1

new Showcase.Horizontal($$('#showcase li'), $$('a.controls'), {optiune: valoare, optiune: valoare, etc});

Orientarea este aleasa prin initializarea clasei respective din cele 3 disponibile:

1

new Showcase.Horizontal(slides, controls[, options]);

1

new Showcase.Vertical(slides, controls[, options]);

1

new Showcase.Diagonal(slides, controls[, options]);

4. Parametri optionali

Parametrii sunt selectati la initializare, in format JSON: {parametru: valoare, parametru: valoare}:

• ratio: Reprezinta raportul dintre slide-ul din centru si cele din lateral, si controleaza pasul incrementarii graduale a dimensiunii slide-urilor. Spre exemplu, un ratio de 0.3 inseamna ca slide-urile din lateral vor avea dimensiunea unei treimi a aceluia din centru (care nu este redimensionat), iar slide-urile cuprinse intre centru si lateral vor scadea treptat si proportional cu acest raport. Default: 0.5 (50%).
• size: Numarul total de slide-uri vizibile la un moment dat. Sa presupunem ca avem 20 de slide-uri, dar vrem sa afisam doar 7 simultan. Setam valoarea acestui parametru egala cu 7, iar plugin-ul va “rula” pe ecran doar cate 7 slide-uri simultan. Default: numarul total de slide-uri. Atentie: trebuie sa fie un numar impar.
• duration: Durata unei miscari (viteza). Default: 0.5 secunde.
• initialDelay: Timpul care trece din momentul initializarii pana la expansiunea initiala a Showcase-ului, creand acel efect la pornire. Default: 1 secunda.

5. Download

Puteti descarca atat Showcase.js, cat si exemplele de mai sus:

Download Showcase.js (9.4 KB)
Download Showcase.js – Packed (3.5 KB)
Download Exemple

Lansez Showcase.js sub licenta MIT, care in principiu spune ca oricine poate face ce vrea cu codul :)

Download Carousel

Cu siguranta fiecare dintre voi a folosit sau cel putin testat la un moment dat Autocompleter-ul Script.aculo.us. Ei bine, aceasta modalitate de autocomplete este buna, mai putin faptul ca trebuie generat server-side intreg UL-ul corespunzator rezultatelor. Aceasta metoda are doua dezavantaje:

• Cantitatea mai mare de date. Fac o mica paranteza aici. Sunt perfect constient de faptul ca exemplul autocompleter-ului nu este tocmai relevant din acest punct de vedere. Orice solutie de autocomplete va trebui oricum sa intoarca un numar relativ mic de rezultate, altfel avantajul utilizatorului devine nul, el trebuind sa scaneze atent sugestiile ce ar trebui sa ii scurteze munca. Ma folosesc totusi de acest exemplu pentru ca vreau sa pregatesc terenul pentru un articol viitor care va ilustra perfect avantajul unei solutii mai “light”.
• Amestecul markup-ului pe partea server. Si aici simt nevoia de justificari suplimentare. Atunci cand e vorba de o singura persoana implicata intr-un proiect / parte a unui proiect, legatura intre back-end si front-end este mult mai stransa. Dar, cand este vorba de echipe in cadrul carora fiecare persoana este responsabila doar de una din aceste parti, atunci separarea cat mai clara intre acesta este indicata.

Revenind la exemplul Autocompleter-ului Script.aculo.us, acesta poate fi rapid ajustat pentru lucrul cu date in format JSON, prin simpla “suprascriere” a functiei ce se ocupa de inserarea in pagina a rezultatelor transferului in felul urmator:

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

Ajax.Autocompleter.prototype.updateChoices =  function (choices) {
	if (!this.changed && this.hasFocus) {
 
		this.update.update('<ul></ul>');
 
		response = choices.evalJSON();
		if (response) {
			response.each((function (suggestion) {
				this.update.down('ul').insert((new Template("<li>#{text}</li>")).evaluate({text: suggestion}));
				}).bind(this));
			}
 
		Element.cleanWhitespace(this.update);
		Element.cleanWhitespace(this.update.down());
 
		if (this.update.firstChild && this.update.down().childNodes) {
			this.entryCount = this.update.down().childNodes.length;
			for (var i = 0; i < this.entryCount; i++) {
				var entry = this.getEntry(i);
				entry.autocompleteIndex = i;
				this.addObservers(entry);
				}
			} else { 
				this.entryCount = 0;
				}
 
		this.stopIndicator();
		this.index = 0;
 
		if (this.entryCount == 1 && this.options.autoSelect) {
			this.selectEntry();
			this.hide();
			} else {
				this.render();
				}
		}
	}

Doar liniile 4-11 sunt cele modificate, restul reprezinta functia initiala. Sfatul meu este sa nu editati direct libraria controls.js din Script.aculo.us, pentru ca orice modificare direct pe fisierele librariei va duce la ingreunarea unui viitor update, trebuind operate de fiecare data schimbarile pe noua versiune. Mult mai simplu este sa includeti pur si simplu codul de mai sus intr-un fisier ce va fi incarcat dupa Script.aculo.us.