1: <?php
  2:     /** @noinspection PhpIncludeInspection */
  3:     require_once('../qcubed.inc.php');
  4: 
  5:     // adding the javascript return parameter to the event is one 
  6:     // possibility to retrieve values/objects/arrays via an Ajax or Server Action
  7:     class MyQSlider_ChangeEvent extends QEvent {
  8:         const EventName = 'slidechange';
  9:         const JsReturnParam = 'arguments[1].value';
 10:     }
 11: 
 12:     class ExampleForm extends QForm {
 13:         /** @var QResizable */
 14:         protected $Resizable;
 15:         /** @var QSelectable */
 16:         protected $Selectable;
 17:         /** @var QSortable */
 18:         protected $Sortable;
 19:         /** @var QSlider */
 20:         protected $Slider;
 21:         /** @var QButton */
 22:         protected $btnSubmit;
 23:         /** @var QSortable */
 24:         protected $Sortable2;
 25: 
 26:         /** @var QPanel */
 27:         protected $SortableResult;
 28:         /** @var QPanel */
 29:         protected $Sortable2Result;
 30:         /** @var QPanel */
 31:         protected $ResizableResult;
 32:         /** @var QPanel */
 33:         protected $SelectableResult;
 34:         /** @var QPanel */
 35:         protected $SubmitResult;
 36:         /** @var QPanel */
 37:         protected $SliderResult;
 38: 
 39:         protected function Form_Create() {
 40:             $strServerActionJsParam = "";
 41: 
 42:             $this->btnSubmit = new QButton($this);
 43:             $this->btnSubmit->Text = "ServerAction Submit";
 44:             $this->SubmitResult = new QPanel($this);
 45: 
 46:             // Slider
 47:             $this->Slider = new QSlider($this);
 48:             $this->Slider->Max = 1250;
 49:             $this->Slider->AddAction(new MyQSlider_ChangeEvent(), new QAjaxAction('onSlide'));
 50:             $this->SliderResult = new QPanel($this);
 51: 
 52:             // Resizable
 53:             $this->Resizable = new QPanel($this);
 54:             $this->Resizable->CssClass = 'resizable';
 55:             $this->Resizable->Resizable = true;
 56:             $this->ResizableResult = new QPanel($this);
 57:             $strJsParam = '{ 
 58:                 "width": $j("#' . $this->Resizable->ControlId . '").width(), 
 59:                 "height": $j("#' . $this->Resizable->ControlId . '").height() 
 60:             }';
 61:             $this->Resizable->AddAction(new QResizable_StopEvent(), new QAjaxAction("onResize", "default", null, $strJsParam));
 62:             $this->ResizableResult = new QPanel($this);
 63: 
 64:             $strServerActionJsParam = '{"resizable": ' . $strJsParam . ', ';
 65: 
 66:             // Selectable
 67:             $this->Selectable = new QSelectable($this);
 68:             $this->Selectable->AutoRenderChildren = true;
 69:             $this->Selectable->CssClass = 'selectable';
 70:             for ($i = 1; $i <= 5; ++$i) {
 71:                 $pnl = new QPanel($this->Selectable);
 72:                 $pnl->Text = 'Item ' . $i;
 73:                 $pnl->CssClass = 'selitem';
 74:             }
 75:             $this->Selectable->Filter = 'div.selitem';
 76: 
 77:             /*
 78:             * if your objects to return get more complex you can define a javascript function that returns your
 79:             * object. the essential thing is the ".call()", this executes the function that you have just defined
 80:             * and returns your object.
 81:             * In this example a function is uesd to temporary store jquery's search result for selected items,
 82:             * because it is needed twice. then the ids are stored to objRet.ids as a comma-separated string and
 83:             * the contents of the selected items are stored to objRet.content as an array.
 84:             *
 85:             */
 86:             $this->SelectableResult = new QPanel($this);
 87:             $strJsParam = 'function() { 
 88:                 objRet = new Object(); 
 89:                 selection = $j("#' . $this->Selectable->ControlId . '")
 90:                     .find(".ui-selected");
 91:                 objRet.ids = selection.map(function(){
 92:                         return this.id;
 93:                     }).get()
 94:                     .join(",");
 95:                 objRet.content = selection.map(function() { 
 96:                     return $j(this).html();
 97:                 }).get(); 
 98:                 return objRet;
 99:             }.call()';
100:             $this->Selectable->AddAction(new QSelectable_StopEvent(), new QAjaxAction("onSelect", "default", null, $strJsParam));
101: 
102:             $strServerActionJsParam .= '"selectable": ' . $strJsParam . ', ';
103: 
104: 
105:             // Sortable
106:             $this->Sortable = new QSortable($this);
107:             $this->Sortable->AutoRenderChildren = true;
108:             $this->Sortable->CssClass = 'sortable';
109:             for ($i = 1; $i <= 5; ++$i) {
110:                 $pnl = new QPanel($this->Sortable);
111:                 $pnl->Text = 'Item ' . $i;
112:                 $pnl->CssClass = 'sortitem';
113:             }
114:             $this->Sortable->Items = 'div.sortitem';
115: 
116:             $this->SortableResult = new QPanel($this);
117:             $strJsParam = '$j("#' . $this->Sortable->ControlId . '").
118:                 find("div.sortitem").
119:                 map(function() { 
120:                     return $j(this).html()
121:                 }).get()';
122:             $this->Sortable->AddAction(new QSortable_UpdateEvent(), new QAjaxAction("onSort", "default", null, $strJsParam));
123: 
124:             $strServerActionJsParam .= '"sortable": ' . $strJsParam . '}';
125: 
126: 
127:             //a second Sortable that can receive items from the first Sortable
128:             //when an item is dragged over from the first sortable an receive event is triggered
129:             $this->Sortable2 = new QSortable($this);
130:             $this->Sortable2->AutoRenderChildren = true;
131:             $this->Sortable2->CssClass = 'sortable';
132:             for ($i = 6; $i <= 10; ++$i) {
133:                 $pnl = new QPanel($this->Sortable2);
134:                 $pnl->Text = 'Item ' . $i;
135:                 $pnl->CssClass = 'sortitem';
136:             }
137:             $this->Sortable2->Items = 'div.sortitem';
138: 
139:             //allow dragging from Sortable to Sortable2
140:             $this->Sortable->ConnectWith = '#' . $this->Sortable2->ControlId;
141:             //enable the following line to allow dragging Sortable2 child items to the Sortable list
142:             // $this->Sortable2->ConnectWith = '#' . $this->Sortable->ControlId;
143: 
144:             //using a QJsClosure as the ActionParameter for Sortable2 to return a Js object
145:             //the ActionParameter is used for every ajax / server action defined on this control
146:             $this->Sortable2->ActionParameter = 
147:                 new QJsClosure('return $j("#' . $this->Sortable2->ControlId . '")
148:                     .find("div.sortitem")
149:                     .map(function() { 
150:                         return $j(this).html()
151:                     }).get();');
152: 
153:             //(the list of names from the containing items) is returned for the following two Ajax Actions
154:             $this->Sortable2->AddAction(new QSortable_UpdateEvent(), new QAjaxAction("onSort2"));
155:             //$this->Sortable2->AddAction(new QSortable_ReceiveEvent() ,new QAjaxAction("onSort2"));
156: 
157:             $this->Sortable2Result = new QPanel($this);
158: 
159:             $this->btnSubmit->AddAction(new QClickEvent(), new QServerAction("onSubmit", null, $strServerActionJsParam));
160:         }
161: 
162:         public function onSort($formId, $objId, $objParam) {
163:             $this->SortableResult->Text = print_r($objParam, true);
164:         }
165: 
166:         public function onSort2($formId, $objId, $objParam) {
167:             $this->Sortable2Result->Text = print_r($objParam, true);
168:         }
169: 
170:         public function onResize($formId, $objId, $objParam) {
171:             $this->ResizableResult->Text = print_r($objParam, true);
172:         }
173: 
174:         public function onSelect($formId, $objId, $objParam) {
175:             $this->SelectableResult->Text = print_r($objParam, true);
176:         }
177: 
178:         public function onSubmit($formId, $objId, $objParam) {
179:             $this->SubmitResult->Text = print_r($objParam, true);
180:         }
181: 
182:         public function onSlide($formId, $objId, $objParam) {
183:             $this->SliderResult->Text = print_r($objParam, true);
184:         }
185:     }
186: 
187:     ExampleForm::Run('ExampleForm');
188: ?>
189: