dom, form, hogyan, javascript, scriptaculous

A helyben szerkesztők (inline editors) olyan eszközök amelyek az alapból nem szerkeszthető elemeket, mint a <p> vagy <h1>, szerkeszthetővé tesznek egy szimpla katt hatására.

A katt az egyébként statikus elemet egy szerkeszthető bizgentyűvé változtatja és kitesz mellé egy mentés gombot. Ha a user megváltoztatja a tartalmat és elmenti akkor az elküldésre kerül a szervernek ahol ott tárolásra kerül, a szerkesztő felület pedig újra statikussá alakul.

Használatához a minimális JavaScript belinkelés a következő.

<script type="text/javascript" src="eleresi/ut/prototype.js">
</script>
<script type="text/javascript" src="eleresi/ut/scriptaculous.js?load=effects,controls">
</script>

Áttekintés

Ha végigfutunk egy helyben szerkeszthető elem életciklusán akkor a következőket fogjuk látni.

• Az elemet először is regisztráljuk, hogy márpedig ő egy helyben szerkeszthető bizgentyű.
• Ennek hatására ha a user az egeret az elem fölé viszi, akkor az elem színben kiemelődik, aztán kis tooltipként megjelenik az elem title attributuma, ami ha csak nem definiáljuk felül, akkor “click to edit” lesz
• Ha rákattan az elemre akkor szerkeszthetővé válik, egy form rendelődik hozzá.
• A mezőben egy enter vagy egy katt a submit gombra elküldi a a formot, az ESC vagy a cancel pedig visszaállítja az eredeti állapotot.
• Ha submitolunk akkor megjelenik egy infó szöveg arról, hhogy a háttérben mentés történik, majd amikor megérkezik a szerver válasza akkor ez alapján frissül a tartalom.
• Végül az elem újra színkiemelődik jelezve, hogy megtette amit várunk tőle.

Mindez életre keltéséhez az alábbiak kellenek.
XHTML

<p id='ipe'>
   Góranga!
</p>

JavaScript

document.observe('dom:loaded', function(){
  new Ajax.InPlaceEditor('ipe', './inplaceeditor.php');
  });

A szerver oldal esetünkben PHP

<?php
sleep(2);   //ezt éles alkalmazásban nem javaslom, itt csak azért van, hogy lehessen látni, hogy mi történik 
//előszőr elmentjük mysqlben vagy azt tesszük vele amit kell
//aztán visszaküldjük megszűrve amit beírt
print htmlspecialchars($_POST['value']);
?>

Góranga!

Paraméterek

paramName

alapértelmezés szerint a szerver felé kiküldött változó neve value lesz, ezzel az opcióval bírálhatjuk ezt felül.

htmlResponse

Alapértelmezett értéke true, ha false-ra állítjuk, akkor nem várunk választ a szervertől.

ajaxOptions

itt bármit megadhatunk amit egyébként a prototype ajax opcióinál megadhatunk. Alapértelmezés szerint {evalScripts : true}

callback

ezt módosítva hozzáadhatunk újabb paramétereket, szűrhetünk vagy amit csak szeretnénk.
Alapértelmezés szerint:

function(form, szerkeszthetoMezoErteke){
  return(Form.seralize(form));
  }

Általámos finomhangolás

okControl és cancelControl

Alapértelmezés szerint link, lehet még button (gomb) és false (semmi). Azt szabályozzuk vele, hogy az Ok és Cancel link, gomb legyen vagy ne jelenjen meg.

okText és cancelText

Alapértelmezés szerint Ok és Cancel. Az itt beállított érték lesz a gombre írva vagy ez lesz a link szövege.

submitOnBlur

Ha nem teszünk ki sem linket sem gombot, akkor a user az enter és az ESc gomb segítségével tud a helyben szerkesztővel kommunikálni. Számomra nagy meglepetés volt, de rá kellett jönnöm, hoyg sok usernek egy ilyen bizgentyű működése nem egyértelmű. Többnyire azt fogják elvárni, hogy ha beírnak valamit és a mező mellé kattintanak valahová akkor a módosításuk mentésre kerül. erre szolgál ez az opció. Alapértelmezett értéke false, de ha nincsenek linkjeink / gombjaink akkor érdemes true-ra állítani.

textBeforeControls, textBetweenControls és textAfterControls

Ezek segítségével az ok és submit gombok elé, közé vagy mögé tehetünk valami szöveget. Üres string a default.

clickToEditText

Ez a szöveg jelenik meg ha a user a helyben szerkeszthető elem fölé mozgatja az egeret. Alapértelmezett értéke “Click to edit”

savingText

Ez a szöveg jelenik meg amikor a mező a szerver válaszára vár. Alapértelmezés szerint ‘Saving…’

Így egy finomhangolt helybenszerkesztő így jelenhet meg.

new Ajax.InPlaceEditor('ipe', 'ipe.php',
  {
    okControl : 'button',
    cancelControl : 'link',
    clickToEditText : 'Katt ide a változtatáshoz',
    savingText : 'Szerverre mentek. Csigavér!',
    textBeforeControls : '[',
    textBetweenControls : ' / ',
    textAfterControls : ']'
  });

Góranga!

CSS finomhangolás

Mivel itt egy különálló új bizgentyűt jelenítünk meg fontos, hogy belesimuljon az oldal kinézetébe. Erre a célra szolgál a következő rakat opció.

inplaceeditor-form

a css fileunkban ezt a css osztályt kell definiálnunk a megjelenő formhoz

editor_ok_button, editor_ok_link

css osztály az ok gombhoz/loknhez

editor_cancel_button, editor_cancel_link

css osztály a cancel gombhoz/linkhez

editor_field

css osztály magához a helyben szerkesztő elemhez, azaz az inputhoz vagy textarea-hoz

inplaceeditor_saving

css osztály a mentés szöveghez

inplaceedtor_loading

css osztály a loading szöveghez

Ha több helyben szerkeszthető elemünk is van és szeretnénk más-más kinézetet adni nekik, akkor a létrejövő formunk id-je alapján tehetjük meg. Ha a helyben szerkeszthető elemünknek nincs id-je, akkor meg kell adnunk a formId opciót. Ha van, akkor a formunk id-je a helyben szerkeszthető elem id-je plusz -inplaceeditor lesz. Vagyis ha az elemünk id-je pitty, akkor a létrejövő form id-je pitty-inplaceeditor lesz, hacsak nem definiáljuk felül a formId opcióval. Így a cssünkben a #pitty-inplaceeditor editor_ok_button{} definíció már nem lesz hatással a többi helyben szerkeszthető elemre.

Callback függvények

onEnterHover(elem)

hover esemény a helyben szerkeszthető elemre. Alapértelmezés szeirnt Effect.Highlight hajtdik végre.

onLeaveHover(elem)

amikor az egér kilép az elem fölül. Alapértelmezés szerint a háttérszín visszatér az eredetibe.

onEnterEditMode(elem)

mielőtt a szerkesztő felület létrejön

onFailure(XMLHttpRequest, [elem])

ha valami hiba keletkezik az ajax hívás során. Alapból hibaüzenetet jelenít meg.

onComplete(XMLHttpRequest, [elem])

az ajax hívás befejeződött hibával vagy hiba nélkül

onLeaveEditMode

a szerkesztő felület eltűnt, újra maga az elem látható

Általánosságban a usernek nem lesz magától érthetődő, hogy az elem helyben szerkeszthető. Alapesetben csak magára az elemre kattintva kerül elő a szerkeszthetőség, de lehetőségünk van az extraControl opcióval megadni egy másik elemet is amire való kattintáskor az elem szerkeszthetővé válik. Az extraControlOnly true-ra állításával pedig azt állíthatjuk be, hogy csak az extraControl elemmel tehessük szerkeszthetővé az elemet, magára az elemre való kattintással ne.

Az, hogy a helyben szerkeszthető elemünkből akttintásra egy input vagy egy textarea lesz az két dologtól függ. Az első a row opció, a másik pedig, hoyg az elemben van-e \r vagy \n karakter.

Kiválasztó

Előre meghatározott elemek közül az Ajax.InPlaceCollectionEditor objektummal választhatunk. Ebben az esetben a user nem tud szabadon bármit begépelni a helyben szerkeszthető elembe, hanem csak a kijelöltek közül választhat egyet.

collection

A select option elemeihez szükséges JavaScript tömb [[ertek1, szoveg1], [ertek2, szoveg2]] formában.

loadCollectionURL

Egy url ahonnan megkaphatjuk az optios tömböt a fenti formában

loadCollectionText

Alapértelmezés szerint “Loading choices…”

JavaScript

new Ajax.InPlaceCollectionEditor(
  'ipce',
  'update.php',
  {loadCollectionURL : 'szinek.php'}
  );

XHTML

<p id='ipce'>
  piros
</p>

Szerver oldal

<?php
//valahonnan kiszedjük a szükséges adatokat, aztán tömbbé rendezzük, megcsámcsogjuk és kidobjuk
print "[[1, 'piros'], [2, 'sárga'], [3, 'zöld']]";
?>

piros

Ennyit hát a helyben szerkeszthetővé alakítható elemekről melynek körültekintő alkalmazásával tovább finomíthatjuk formjainkat. A következő részben a csúszkákkal mint az adatbevitel új eszközeivel fogunk megismerkedni.

Ez a bejegyzés rrd billentyűzetéből potyogott ki 2008 április 12. napján 11:41:07-kor. Eddig 1,754 olvasást ért meg. A visszajelzéseket nyomonkövetheted ezzel az RSS feed-el. Véleményt nyilváníthatsz, vagy trackbackolhatsz a saját oldaladon.