Agrāk es necietu JavaScript. Iespējams, ka necietu tāpēc, ka tā likās kaut kāda mistiska un nevienam nevajadzīga programmēšanas valoda. Laikam ejot, domas mainījās. Mēs jau esam pieraduši pie WYSIWYG tipa redaktoriem interneta pārlūkā, tas vairs neliekas nekas īpašs un katrs daudz maz saprātīgs, JavaScript pārzinošs indivīds ir spējīgs uzrakstīt pats savu WYSIWYG HTML redaktoru. Līdzīgi ir arī ar cita tipa redaktoriem. Izmantojot dažu labu programmētāju veikumu ir iespējams ļoti vienkārši un ļoti īsā laikā panākt objektu pārvietošanu pa lapu ar peles palīdzību. Jā, runa iet par “Drag & Drop” funkcionalitāti mājas lapās. Izmantojot šo funkcionalitāti, kāda projekta vajadzībām izveidoju bildes apgraizīšanas rīku, kas darbojas pārlūkprogrammā.

Diezgan bieži mājas lapās dizaineri iekļauj nestandarta izmēra attēlus, kurus ir paredzēts mainīt un kurus ir iespējams augšupielādēt administrācijas rīkā. Nelaime ir tāda, ka lielākajai daļai uzņēmumu vai mājas lapas apkalpojošā personāla nav kādi 500-600Ls, ko varētu izdot par Photoshop licenci, ar ko varētu veikt ērtu bilžu apgraizīšanu. Protams, var izmantot GIMP vai kādu citu bezmaksas alternatīvu, taču vienkāršāk šo procesu ir pārcelt uz interneta pārlūkprogrammu – augšupielādējam bildi, izvēlamies izmēru, iezīmējam izgriežamo reģionu, apstiprinām un administrācijas rīks izgriež vajadzīgo bildes daļu.

To, kāds izskatās manis izveidotais rīks un iemēģināt, kā tas darbojas, varat šeit: WYSIWYG (drag & drop) online image crop tool. Opera lietotājiem neliela piebilde – tā kā Opera neatbalsta ne IE saprotamo , ne Mozilla saprotamo puscaurspīdīguma CSS efektu, tad Jums iezīmētais bildes reģions izskatīsies balts.

Kā tas tika uztaisīts?

Vispirms, mums ir nepieciešama Drag & Drop funkcionalitāte. To varam iegūt pavisam vienkārši – ejam uz Google un meklējam “drag and drop javascript”, parokamies pa rezultātiem un atrodam DOM-Drag JavaScript kodu, kas lai arī rakstīts 2001. gadā, lieliski darbojas gan uz IE, gan Mozilla, gan arī Opera saimes pārlūkiem (mēģināju uz attiecīgo pārlūku jaunākajām versijām). Tālāk nedaudz parokamies pa dokumentāciju, piemēriem, mazliet palabojam kodu un esam gatavi izveidot paši savu redaktora kodu.

Kā objektus, kurus var pārvietot ar peli, inicializējam 4 līnijas pa malām un taisnstūri pa vidu, kas apzīmēs vajadzīgo bildes laukumu. Pie objektu pārbīdēm <input> tipa laukos saglabājam objektu atrašanās vietas koordinātas. Pārējais, kas attiecas uz JavaScript jau vairs ir tikai objektu pozicionēšana un novietošana atkarībā no pārvietojuma, neļaušana tiem pārvietoties tur, kur tie vēlētos. PHP daļa šim rīkam patiesībā ir pavisam triviāla, to katrs pats var veidot pēc saviem ieskatiem un vajadzībām.

Secinājums galu galā ir tāds, ka JavaScript ir tīri ciešama un spēcīga programmēšanas valoda. Patiesībā šāda redaktora izveide ir pat vienkāršāka, nekā tas varētu likties…

Šobrīd praktiski šāda bilžu apstrādes rīka funkcionalitāte tiek jau izmantota pāris mājas lapu administrēšanas rīkos, kur tiek atļauta bilžu augšupielāde.