Hamár a CMS-t emlegettem, nézzük meg, hogyan lehetne egyszerűen beállítani például a főoldalon megjelenő elemek (bejegyzések, cikkek, stb., nem layout) sorrendjét. Legyen ez egy híroldal, ahol nem mindig az írások létrejöttének időrendi sorrendjében kell megjelenni a tartalomnak. Ráadásul több hasábunk van, több tartalom csoportból kell választanunk.

Legyen tehát:

1. cikkek: szerkesztett szöveg
2. galéria: mezei galéria, képekkel
3. eseménynaptár: eseménynaptár

Az elrendezésünk az egyszerűség kedvéért legyen 3 hasábos, középen egy hely fenntartva a vezércikknek, a jobb oldal további két részre van osztva. Feladat tehát: ezekben a blokkokban a nekünk megfelelő sorrend beállítása. Így működik most:

Mivel az elrendezés egyedi, ezért siteonként kell ilyen modult készíteni (itt jön be az egyedi modul kezelés). A pozíció tárolása és a kezelés elve minden esetben ugyanaz. Készíthetnénk olyant is, ami “mindent” lekezel, de vélhetően igen bonyolult lenne, de mivel egyszerű a felépítés, jobban járunk ha 10 percet rászánunk az új layoutra, és akkor bármit le tudunk kezelni.

A pozíciót egy mezőben (place) tároljuk minden szükséges táblában: hely-sorrend formában. Lényeg, hogy valamilyen formában el legyen választva a két adat (- jel pl.), de rakhatjuk külön mezőbe is, nem látom indokoltnak. A helyet megadó elemet betűvel célszerű (kell) jelölni, mivel a kliens oldalon a helyet reprezentáló div id-je is ez lesz. Például: t-1 jelenti, hogy a “t” osztlopban az első helyen. Táblánként lehet “t”-től elétérő hely is, mert máshova pakoltuk.

Amit el kell készíteni:

1. a layout egyszerűsített kinézete+css
2. a dragdrop elkészítése, js függvények. Dragdrop scriptaculous-szal. Ezzel gyakorlatilag készen állunk leküldeni Ajax.Request-tel a pozíciót és a sorrendet a mentésre való kattintáskor.
3. Szerveroldali feldolgozás, rögzítés
4. Szerveroldali kiolvasás, megfelelő helyre pakolás mind admin, mind publikus felületen.

A js:

f: vezércikk
l: left
m: középsőrész
r: jobb
e: események
tc: cikk konténer
gc: galéria konténer
ec: esemény konténer

<script type="text/javascript">
//ugyanezzel az id-vel léteznek divek is:
   Sortable.create("l",
     {tag:'div',dropOnEmpty:true,containment:["f","l","m","r","e","tc","gc","ec"], constraint:false});
   Sortable.create("f",
     {tag:'div',dropOnEmpty:true,containment:["f","l","m","r","tc"],constraint:false, onUpdate: function(){
     var pars = Sortable.sequence('f');
     if(pars.length>1){
      alert('Ide csak egyet lehet tenni');
      //a rollbacket kéne még ide kideríteni
     }
     } });
   Sortable.create("m",
     {tag:'div',dropOnEmpty:true,containment:["f","l","m","r","e","tc","gc","ec"],constraint:false});
   Sortable.create("r",
     {tag:'div',dropOnEmpty:true,containment:["f","l","m","r","e","tc","gc","ec"],constraint:false});
   Sortable.create("e",
     {tag:'div',dropOnEmpty:true,containment:["l","m","r","e","tc","gc","ec"],constraint:false});
   Sortable.create("tc",
     {tag:'div',dropOnEmpty:true,containment:["f","l","m","r","e","tc","gc","ec"],constraint:false});
   Sortable.create("ec",
     {tag:'div',dropOnEmpty:true,containment:["l","m","r","e","tc","gc","ec"],constraint:false});
   Sortable.create("gc",
     {tag:'div',dropOnEmpty:true,containment:["l","m","r","e","tc","gc","ec"],constraint:false});
     //mentés
     $('finish').onclick=function(){
            var pars =  new Array;
            pars[0] = Sortable.serialize('l');
            pars[1] = Sortable.serialize('m');
            pars[2] = Sortable.serialize('r');
            pars[3] = Sortable.serialize('e');
            pars[4] = Sortable.serialize('f');
            pars = pars.join('&');
            var myAjax = new Ajax.Request(
			           '/layout/save/',
			           {
				          method: 'post',
				          parameters: pars
			           });
			       return false;
     }
 </script>
//$('finish').onclick-re a következőt kapjuk a szerveroldalon:

Array
(
    [l] => Array
        (
            [0] => t1384
            [1] => t1383
            [2] => e42
            [3] => t1382
        )
    [m] => Array
        (
            [0] => e39
            [1] => t1381
            [2] => t1380
        )
    [r] => Array
        (
            [0] => t1388
            [1] => t1387
            [2] => t1385
            [3] => g45
        )
    [e] => Array
        (
            [0] => t1376
            [1] => t1374
            [2] => g39
            [3] => e44
        )
    [f] => Array

        (
            [0] => t1389
        )
)
// tehát tudjuk hogy középen (m) van a 39es idjű esemény, majd 1382 és 1380-as id-jű cikk a kulcsnak megfelelő sorrendben.

Ezután ki kell nullázni az érintett táblákban a place mezőket, majd két egymásba ágyzott foreach update-eli a megfelelő mezőket.

Ha új layout jön a képbe, a következőt kell tenni:

1. layout módosítás+css
2. a js módosítás: plusz Sortable.create sorok vagy kevesebb
3. ha jól dolgoztunk szerveroldalon egy “helyeket kezelő tömbbe” csak bele kell írni az új hely kódját, és máris le van kezelve az új helyzet. (e tömbb alapján megy a foreach, nem pedig az alapján amit post-tal kap.)

//az idevágó html layout
<div class="order">
  <div class="colbox" id="l">
      <h1>{lng.leftbar}</h1>
        {l}
  </div>
  <div class="col">
      <div class="colbox" id="f" style="height:100px;">
          <h1>{lng.fcontent}</h1>
            {f}
      </div>
      <div class="colbox" id="m" style="height:900px;">
          <h1>{lng.content}</h1>
            {m}
      </div>
  </div>
  <div class="col">
    <div class="colbox" id="r" style="height:500px;">
        <h1>{lng.rightbar}</h1>
          {r}
    </div>
    <div class="colbox" id="e" style="height:500px;">
        <h1>{lng.rightbar}</h1>
          {e}
    </div>
  </div>
  <!-- konténerek -->
  <div class="col">
    <div class="colbox" id="tc" style="height:333px; background-color: #f5f5f5;">
      <h1>{lng.articles}</h1>
        {tc}
    </div>
    <div class="colbox" id="gc" style="height:333px; background-color: #f5f5f5;">
      <h1>{lng.gallery}</h1>
        {gc}
    </div>
    <div class="colbox" id="ec" style="height:333px; background-color: #f5f5f5;">
      <h1>{lng.events}</h1>
        {ec}
    </div>
  </div>
</div>

Megfigyelhető az {m} {e} stb. template jelölések. Ezekre a helyekre kerülnek a következő dobozok:

  <div id="box_{tid}" class="box {type}">
        <p><span class="bold">{title}</span> <a href="static/edit/{id}/" target="_blank" title="Edit this in new window">»»»</a>
          <br />
          <br /><span class="bold">{added}</span>
        </p>
   </div>

Amit visszakapunk Sortable.serialize(’m')-nél pl az a box_{tid}, tid id-t. Magát a dobozt úgy alakítjuk, ahogy tetszik.

Köszönöm a figyelmet!