Seitentyp Dashboard Teil 6 (CMS)

Heute setzen wir im Dashboard-Editor des CMS die Parameter der Spalten und Reihenfolgen. Das ganze geschieht über das jQuery Event sortupdate. Dieses wird aufgerufen, wenn sich die Sortierung einer Liste geändert hat.

Jeder Listenpunkt bekommt bei uns eine versteckte Textbox, in welcher sich der Name der aktuellen Liste sowie der Index des Elements gespeichert ist. In unserem Template /system/templates/controls/dashboardedit.html sieht das so aus:

{LOOP:DONTUSEDWIDGETS}
  <li style="cursor:move;">
    {VAR:WIDGETNAME}
    <input name="{VAR:WIDGETPATH}" value="{VAR:PLACE}" type="hidden" />
  </li>
{/LOOP:DONTUSEDWIDGETS}

Der Name des Widgets ist der in der Datenbank gespeicherte Path. Für diesen benötigen wir eine neue Eigenschaft in /system/classes/widgetbase.php:

    public $allowDisplayRandom = true;
    public $path               = "";

    public function display(){
      $template = new Template();

Selbstverständlich muss diese Eigenschaft auch gesetzt werden. Das geschieht in /system/classes/widgetcontroller.php:

    function getWidget($data){
      include_once(getSetting("global","global","root").'system/plugins/'.$data->path);
      $res = new $data->class();
      $res->path = $data->path;
      return $res;
    }

In der /system/classes/dashboard.php setzen wir nun die neuen Variablen WIDGETPATH und PLACE:

    public function getEditableCode(){
      $template = new Template();
      $template->load("control_dashboardedit");
      $template->assign_var("URL",$_SERVER['PHP_SELF']."?".$_SERVER['QUERY_STRING']);
      $widgets = WidgetController::getAllWidgets();
      foreach($widgets as $widget){
        $widget->load();
      }
      $i = 0;
      foreach($widgets as $widget){
        $index = $template->add_loop_item("DONTUSEDWIDGETS");
        $template->assign_loop_var("DONTUSEDWIDGETS",$index,"WIDGETNAME",htmlentities($widget->headline));
        $template->assign_loop_var("DONTUSEDWIDGETS",$index,"WIDGETPATH",htmlentities($widget->path));
        $template->assign_loop_var("DONTUSEDWIDGETS",$index,"PLACE","DONTUSEDWIDGETS|" + $i);
        $i++;
      }
      return $template->getCode();
    }

Jetzt kommen wir zum spannenden jQuery. Dort können wir mit der Funktion bind ein neues Event binden. In diesem Event wird der Listenname und der Indexname aller Einträge der veränderten Listen in die Textboxen geschrieben. this ist in diesem Zusammenhang die Liste selbst. Die children sind die einzelnen <li>-s und dessen childNodes sind die Textboxen /system/templates/controls/dashboardedit.html:

   $('.list').sortable({connectWith: '.list'});
   $('.list').bind("sortupdate", function(event, ui) {
     var index = -1;
     if(this.children.length > 0){
       for(var i=0;i<this.children.length;i++){
         this.children[i].childNodes[1].value = this.id + '|' + i;
       }
     }
   });

Im nächsten Schritt geht es um das richtige Laden und Speichern des Dashboards in die Datenbank.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project