Blog

Tabletbarát a honlapod adminisztrációs felülete?

Publikálva: 2013.11.12 22:30
Mobilbarát adminisztrációs felület

Pályafutásom során rengeteg weboldalt, webáruházat készítettem. Ezek mindegyike kivétel nélkül rendelkezik adminisztrációs felülettel. A honlapon így szinte bármilyen információ módosítható fejlesztői beavatkozás nélkül. Egyetlen egy dolgot nem tudnak, mobil eszközön garantálni a száz százalékos kezelhetőséget. A korszerű drag&drop technikák megbénítják a felületek használhatóságát az érintőképernyőn keresztül. Pár egyszerű lépés, és megoldható lehet, hogy honlapod adminisztrációs felülete mobilbarát legyen.

Az elmúlt években, hogy kezdett betörni a resopnsive webdesign, sokszor hallottam innen-onnan, hogy admin felületet felesleges mobilizálni. Az ügyfél ne akarjon mobil eszközön adminisztrálni, webáruházat üzemeltetni.

Az én véleményem erről éppen az ellenkezője. Az admin felületeknek ki kell szolgálni a mobil eszközöket. Első sorban a ma már oly népszerű tableteket. Első körben még ne beszéljünk mobil telefonra optimalizálásról, responsive megjelenítésről, ez a munka több időt venne igénybe. Gyakorlatilag újra kellene tervezni a teljes adminisztrációs felületet. Az én célom ezzel a poszttal az, hogy meglévő admin felületünket pár lépésben, néhány perc alatt tabletbaráttá tegyük. Lássunk pár egyszerű lépést, hogy honlapod adminisztrációs felülete mobilbarát legyen tableten.

A jquery drag&drop funkciók

Már többször hangot adtam magamban, hangosan gondolkodva, hogy miért nem adnak ki egy olyan új jquery ui-t, ami támogatja a drag&drop funkciókat érintőképernyőn keresztül is. Epekedésem évei, hónapjai alatt kijött pár új verzió, de a várva várt csoda sosem történt meg. Mivel eléggé javascript mániákus vagyok, átláttam az egészet ahhoz, hogy tudjam, nem lenne nagy kunszt megoldani. Már-már azon gondolkoztam, hogy jó lenne írni egy kiegészítést ami a megfelelő touch esemény indításakor a megfelelő egér eseményt imitálja. Jól tettem, hogy nem vágtam bele. Egyrészt megkíméltem magam a felesleges munkától, másrészt, ezt már valaki megoldotta.

A megoldás neve: Touch Punch. A GutHub repóban megtaláltok róla és a készítőjéről minden hasznos információt. Bár a használatához szinte semmit nem kell tenni. Egy sor az egész, amit a jquery és jquery ui után kell behúzni.

<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>

Ezután a művelet után minden jquery-s drag&drop működni fog. Dragble, dropable, sortable, resizable és még sorolhatnám.

Saját fejlesztésű drag&drop eszközt használok

Ha saját fejlesztésű drag&drop-ot használsz például sorba rendezéshez, akkor sem lehet nagy baj. Itt mérlegelned kell, hogy vagy áttérsz a fenti megoldásra, vagy használsz egy touchmouse szimulátort.

function mouseSimulator(event){
	var touches = event.changedTouches,
	first = touches[0],
	type = '';
	
	switch(event.type){
		case 'touchstart': type = 'mousedown'; break;
		case 'touchmove':  type='mousemove'; break;        
		case 'touchend':   type='mouseup'; break;
		default: return;
	}

	var simulatedMouse = document.createEvent('MouseEvent');
	simulatedMouse.initMouseEvent(type, true, true, window, 1, 
	first.screenX, first.screenY, 
	first.clientX, first.clientY, false, 
	false, false, false, 0, null);

	first.target.dispatchEvent(simulatedMouse);
	event.preventDefault();
}

document.addEventListener('touchstart', mouseSimulator, true);
document.addEventListener('touchmove', mouseSimulator, true);
document.addEventListener('touchend', mouseSimulator, true);

A fenti programot a saját készítésű drag&drop eszközeimmel kipróbáltam. A saját kódomon csak annyit változtattam, hogy az addEventListener-t nem a document-en futtattam, hanem a saját dragHandle-hez kötöttem. Különben az event.preventDefault(); miatt teljesen átveszi a teljes dokumentumon a touch eseményt, és a kijelzőn nem fogunk tudni touch-olni, csak a saját darg&drop-unkon. Tökéletesen működött minden drag&drop-os fejlesztésemmel. A fenti kódot természetesen az interneten találtam, szinte alig módosítottam rajta, hogy a saját fejlesztésemmel kompatibilis legyen.

Mi mást kell még módosítani?

A legkritikusabb részen már túl vagyunk, hogy végre működnek a drag funkciók. Már csak a kényelmi funkciók vannak hátra. Növeljük meg a tappolható elemek dimenzióját úgy, hogy azt kényelmesen tudjuk érinteni az ujjbegyünkkel. Ilyen elemek lehetnek a linkek, űrlap elemek. Itt gyakorlatilag egy minimális css módosítást hajtunk végre media queries használatával.

Másik fontos kényelmi szempont, hogy az input mezőkön használjuk a beviteli adathoz leginkább közel álló típust. Például szám esetén type="number", vagy email cím esetében type="email", és így tovább. Ezzel elérhetjük, hogy a mobil eszközünk billentyűzete a megfelelő karakterekkel legyen elérhető.

A teljesség igénye nélkül most befejezem ezt a kis segédletet. Egy teljesen responsive adminisztrációs felület kialakítása most nem volt célom. De ez már elég ahhoz, hogy tableten adminisztráljunk egy képgalériát, ahol sorba rendezhetjük képeinket. Módosítsunk honlapunk elrendezésén, webshopunk tartalmán. Ez volt a cél. És mire elolvastad, legjobb fejlesztőd már meg is oldotta e problémád.