summaryrefslogtreecommitdiff
path: root/demos/quickstart
diff options
context:
space:
mode:
authorJens Klaer <kj.landwehr.software@gmail.com>2015-05-20 15:56:09 +0200
committerJens Klaer <kj.landwehr.software@gmail.com>2015-05-20 15:56:09 +0200
commit55338f1cf947b8593a3e23094d6feab625370e28 (patch)
treee8d714ed8afad949c9e3ee93cf1fcc0602d92b36 /demos/quickstart
parent0fb75d64f8dbcc98b4c06e7556125b94bf612819 (diff)
extended quichstart tutorial for TJuiControl option changes during callback
Diffstat (limited to 'demos/quickstart')
-rw-r--r--demos/quickstart/protected/pages/JuiControls/Samples/TJuiDialog/Home.page30
-rw-r--r--demos/quickstart/protected/pages/JuiControls/Samples/TJuiDialog/Home.php33
-rw-r--r--demos/quickstart/protected/pages/JuiControls/Samples/TJuiDraggable/Home.page28
-rw-r--r--demos/quickstart/protected/pages/JuiControls/Samples/TJuiDraggable/Home.php30
-rw-r--r--demos/quickstart/protected/pages/JuiControls/Samples/TJuiDroppable/Home.page30
-rw-r--r--demos/quickstart/protected/pages/JuiControls/Samples/TJuiDroppable/Home.php28
-rw-r--r--demos/quickstart/protected/pages/JuiControls/Samples/TJuiProgressbar/Home.page12
-rw-r--r--demos/quickstart/protected/pages/JuiControls/Samples/TJuiProgressbar/Home.php10
-rw-r--r--demos/quickstart/protected/pages/JuiControls/Samples/TJuiResizable/Home.page34
-rw-r--r--demos/quickstart/protected/pages/JuiControls/Samples/TJuiResizable/Home.php15
-rw-r--r--demos/quickstart/protected/pages/JuiControls/Samples/TJuiSelectable/Home.page6
-rw-r--r--demos/quickstart/protected/pages/JuiControls/Samples/TJuiSelectable/Home.php13
-rw-r--r--demos/quickstart/protected/pages/JuiControls/Samples/TJuiSortable/Home.page23
-rw-r--r--demos/quickstart/protected/pages/JuiControls/Samples/TJuiSortable/Home.php21
14 files changed, 280 insertions, 33 deletions
diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDialog/Home.page b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDialog/Home.page
index 6a9df446..acf49068 100644
--- a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDialog/Home.page
+++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDialog/Home.page
@@ -62,6 +62,36 @@ Dialog with buttons:
<com:TActiveLabel ID="lbl3" />
</td></tr>
+<tr><td class="samplenote">
+Dialog with callbacks:
+</td><td class="sampleaction">
+<com:TActiveButton
+ Text="Open Dialog"
+ OnClick="bt4Click"/>
+<com:TJuiDialog
+ ID="dlg4"
+ Options.Width="400"
+ Options.Title="Dialog with callbacks"
+ Options.AutoOpen="False"
+ Options.Position="center center"
+ >
+ Change dialog options during callback.
+ <com:TJuiDialogButton
+ Text="change title"
+ OnClick="dlg4title"
+ />
+ <com:TJuiDialogButton
+ Text="toggle width"
+ OnClick="dlg4width"
+ />
+ <com:TJuiDialogButton
+ Text="toggle position"
+ OnClick="dlg4pos"
+ />
+
+</com:TJuiDialog>
+</td></tr>
+
</table>
</com:TContent>
diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDialog/Home.php b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDialog/Home.php
index f9d1e3a9..3d89011c 100644
--- a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDialog/Home.php
+++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDialog/Home.php
@@ -18,6 +18,11 @@ class Home extends TPage
$this->dlg3->open();
}
+ public function bt4Click($sender, $param)
+ {
+ $this->dlg4->open();
+ }
+
public function dlg3Ok($sender, $param)
{
$this->lbl3->Text="Button Ok clicked";
@@ -30,4 +35,32 @@ class Home extends TPage
$this->dlg3->close();
}
+ public function dlg4title($sender, $param)
+ {
+ $this->dlg4->getOptions()->title = 'Title changed at ' . date('Y-m-d H:i:s');
+ }
+
+ public function dlg4width($sender, $param)
+ {
+ $this->dlg4->getOptions()->width += $this->dlg4->getOptions()->width > 400 ? -200 : 200;
+ }
+
+ public function dlg4pos($sender, $param)
+ {
+ list($x, $y) = explode(' ', $this->dlg4->getOptions()->position);
+ if ($x == 'left') {
+ if ($y == 'top') $x = 'right';
+ else $y = 'top';
+ }
+ elseif ($x == 'right') {
+ if ($y == 'top') $y = 'bottom';
+ else $x = 'left';
+ }
+ else {
+ $x = 'left';
+ $y = 'top';
+ }
+ $this->dlg4->getOptions()->position = "$x $y";
+ }
+
} \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDraggable/Home.page b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDraggable/Home.page
index 349922cb..3155afa1 100644
--- a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDraggable/Home.page
+++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDraggable/Home.page
@@ -12,10 +12,11 @@
</com:TStyleSheet>
<table class="sampletable">
-<tr><td class="samplenote">
-Default options with a little css applied:
+<tr><td class="samplenote" rowspan="2">
+Default options with a little css applied, change options during callback:
</td><td class="sampleaction" style="height:600px">
<com:TJuiDraggable
+ ID="drag1"
OnStart="drag1_start"
OnStop="drag1_stop"
>
@@ -24,6 +25,29 @@ Default options with a little css applied:
<com:TActiveLabel ID="label1" Text="Waiting.." />
</td></tr>
+<tr><td>
+ <div>
+ Move direction
+ <com:TActiveButton Text="only horizontally" OnClick="drag1h" />
+ <com:TActiveButton Text="only vertically" OnClick="drag1v" />
+ <com:TActiveButton Text="both directions" OnClick="drag1b" />
+ </div>
+ <div>
+ Cursor is
+ <com:TActiveDropDownList OnSelectedIndexChanged="drag2c">
+ <com:TListItem Text="auto" Value="auto" Selected="true" />
+ <com:TListItem Text="move" Value="move" />
+ <com:TListItem Text="pointer" Value="pointer" />
+ <com:TListItem Text="crosshair" Value="crosshair" />
+ <com:TListItem Text="help" Value="help" />
+ </com:TActiveDropDownList>
+ while dragging
+ </div>
+ <div>
+ <com:TActiveCheckBox OnCheckedChanged="drag3r" Text="Revert to original position after dragging stopped" />
+ </div>
+</td></tr>
+
</table>
</com:TContent>
diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDraggable/Home.php b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDraggable/Home.php
index 348eea55..92c30486 100644
--- a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDraggable/Home.php
+++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDraggable/Home.php
@@ -13,4 +13,34 @@ class Home extends TPage
$offset=$param->getCallbackParameter()->offset;
$this->label1->Text.="<br/>Stop drop at (".$offset->left.",".$offset->top.")";
}
+
+ protected function drag1h($sender, $param)
+ {
+ $this->drag1->getOptions()->axis = 'x';
+ $this->label1->Text.="<br/>Drag horizontally only";
+ }
+
+ protected function drag1v($sender, $param)
+ {
+ $this->drag1->getOptions()->axis = 'y';
+ $this->label1->Text.="<br/>Drag vertically only";
+ }
+
+ protected function drag1b($sender, $param)
+ {
+ $this->drag1->getOptions()->axis = false;
+ $this->label1->Text.="<br/>Drag all directions";
+ }
+
+ protected function drag2c($sender, $param)
+ {
+ $this->drag1->getOptions()->cursor = $sender->getSelectedValue();
+ $this->label1->Text.="<br/>Change dragging cursor to ".$sender->getSelectedValue();
+ }
+
+ protected function drag3r($sender, $param)
+ {
+ $this->drag1->getOptions()->revert = $sender->getChecked();
+ $this->label1->Text.="<br/>".($sender->getChecked()?'Turn on':'Turn off')." reverting to original position.";
+ }
} \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDroppable/Home.page b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDroppable/Home.page
index 6059fe60..6b527375 100644
--- a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDroppable/Home.page
+++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDroppable/Home.page
@@ -5,9 +5,10 @@
.ui-draggable {
width: 100px;
height:100px;
- background-color: lime;
border: 1px solid black;
+ background-color: lime;
padding: 1em;
+ cursor: move;
}
.ui-droppable {
width: 150px;
@@ -22,25 +23,34 @@
.drop-red {
background-color: red;
}
+ .drop-red.active {
+ background-color: orange;
+ }
</com:TStyleSheet>
<table class="sampletable">
<tr><td class="samplenote">
-Default options with a little css applied:
+Default options with a little css applied, change options during callback:
</td><td class="sampleaction" style="height:600px">
- <com:TJuiDraggable ID="drag1">
- Drag me around
+ <com:TJuiDraggable ID="drag1" CssClass="drag-lime">
+ Drag me around
+ <p><com:TActiveLabel ID="label3" /></p>
</com:TJuiDraggable>
- <com:TJuiDroppable OnDrop="drop1_ondrop" CssClass="drop-yellow">
- Drop it here!
- <br/><com:TActiveLabel ID="label1" />
+ <com:TJuiDroppable ID="drop1" OnDrop="drop1_ondrop" CssClass="drop-yellow" Options.accept=".drag-lime">
+ Drop it here!
+ <p><com:TActiveLabel ID="label1a" Text="is accepting lime draggable" /></p>
+ <p><com:TActiveLabel ID="label1b" /></p>
</com:TJuiDroppable>
- <com:TJuiDroppable OnDrop="drop2_ondrop" CssClass="drop-red">
- Drop it here!
- <br/><com:TActiveLabel ID="label2" />
+ <com:TJuiDroppable ID="drop2" OnDrop="drop2_ondrop" CssClass="drop-red">
+ Drop it here!
+ <p><com:TActiveLabel ID="label2a" Text="is NOT highlighted while dragging" /></p>
+ <p><com:TActiveLabel ID="label2b" /></p>
</com:TJuiDroppable>
+
+ <p><com:TActiveCheckBox Text="yellow droppable accepts lime draggable" OnCheckedChanged="drop1_changed" Checked="true" /></p>
+ <p><com:TActiveCheckBox Text="highlight red droppable while dragging" OnCheckedChanged="drop2_changed" /></p>
</td></tr>
</table>
diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDroppable/Home.php b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDroppable/Home.php
index c59d035c..69139e9d 100644
--- a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDroppable/Home.php
+++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDroppable/Home.php
@@ -12,7 +12,8 @@ class Home extends TPage
$target=$param->getCallbackParameter()->target->offset;
$top=$offset->top - $target->top;
$left=$offset->left - $target->left;
- $this->label1->Text="Dropped ".$draggable->ID." at: <br/>Top=".$top." Left=".$left;
+ $this->label1b->Text="Dropped ".$draggable->ID." at: <br/>Top=".$top." Left=".$left;
+ $this->label3->Text="Dropped into yellow droppable!";
}
public function drop2_ondrop($sender, $param)
@@ -25,6 +26,29 @@ class Home extends TPage
$target=$param->getCallbackParameter()->target->offset;
$top=$offset->top - $target->top;
$left=$offset->left - $target->left;
- $this->label2->Text="Dropped ".$draggable->ID." at: <br/>Top=".$top." Left=".$left;
+ $this->label2b->Text="Dropped ".$draggable->ID." at: <br/>Top=".$top." Left=".$left;
+ $this->label3->Text="Dropped into red droppable!";
+ }
+
+ public function drop1_changed($sender, $param) {
+ if ($sender->getChecked()) {
+ $this->drop1->getOptions()->accept = '.drag-lime';
+ $this->label1a->Text="is accepting lime draggable";
+ }
+ else {
+ $this->drop1->getOptions()->accept = '';
+ $this->label1a->Text="is NOT accepting lime draggable";
+ }
+ }
+
+ public function drop2_changed($sender, $param) {
+ if ($sender->getChecked()) {
+ $this->drop2->getOptions()->activeClass = 'active';
+ $this->label2a->Text="is highlighted while dragging";
+ }
+ else {
+ $this->drop2->getOptions()->activeClass = '';
+ $this->label2a->Text="is NOT highlighted while dragging";
+ }
}
}
diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiProgressbar/Home.page b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiProgressbar/Home.page
index 63436516..9a6b2ff2 100644
--- a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiProgressbar/Home.page
+++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiProgressbar/Home.page
@@ -50,6 +50,18 @@ Undefined progresbar, value changed from javascript:
</com:TClientScript/>
</td></tr>
+<tr><td class="samplenote">
+Default options, Max=100, Value=50, value changed during callback:
+</td><td class="sampleaction">
+ <com:TJuiProgressbar
+ ID="pbar2"
+ Options.Max="100"
+ Options.Value="50"
+ />
+ <com:TActiveButton ID="button2" Text="-10" OnClick="pbar2_minus" />
+ <com:TActiveButton ID="button3" Text="+10" OnClick="pbar2_plus" />
+</td></tr>
+
</table>
</com:TContent>
diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiProgressbar/Home.php b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiProgressbar/Home.php
index 8f6d9ec6..247b88c8 100644
--- a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiProgressbar/Home.php
+++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiProgressbar/Home.php
@@ -11,4 +11,14 @@ class Home extends TPage
{
$this->label1->Text="Progressbar changed.";
}
+
+ public function pbar2_minus($sender,$param)
+ {
+ $this->pbar2->getOptions()->value = max(0, $this->pbar2->getOptions()->value - 10);
+ }
+
+ public function pbar2_plus($sender,$param)
+ {
+ $this->pbar2->getOptions()->value = min($this->pbar2->getOptions()->max, $this->pbar2->getOptions()->value + 10);
+ }
} \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiResizable/Home.page b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiResizable/Home.page
index 6c61f7df..05cc4a94 100644
--- a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiResizable/Home.page
+++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiResizable/Home.page
@@ -2,26 +2,42 @@
<h1>TJuiResizable Samples</h1>
<com:TStyleSheet>
+ #box {
+ width: 800px;
+ height: 500px;
+ border: 1px solid #000;
+ }
.resizable {
width: 150px;
height: 150px;
padding: 0.5em;
background: #fff;
- border: 1px solid #000;
+ border: 1px solid #f00;
+ overflow: hidden;
}
</com:TStyleSheet>
<table class="sampletable">
-<tr><td class="samplenote">
+<tr><td class="samplenote" rowspan="2">
Default options with a little css applied:
</td><td class="sampleaction">
- <com:TJuiResizable
- CssClass="resizable"
- OnStart="resize1_start"
- OnStop="resize1_stop"
- >
- <com:TActiveLabel ID="label1" Text="Resize me!" />
- </com:TJuiResizable>
+ <div id="box">
+ <com:TJuiResizable
+ ID="resize1"
+ CssClass="resizable"
+ OnStart="resize1_start"
+ OnStop="resize1_stop"
+ Options.AnimateEasing="easeOutBounce"
+ >
+ <com:TActiveLabel ID="label1" Text="Resize me!" />
+ </com:TJuiResizable>
+ </div>
+</td></tr>
+
+<tr><td>
+ <div><com:TActiveCheckBox OnCheckedChanged="check1" Text="Resize outer box synchronously" /></div>
+ <div><com:TActiveCheckBox OnCheckedChanged="check2" Text="Animate final resizing" /></div>
+ <div><com:TActiveCheckBox OnCheckedChanged="check3" Text="Snap to [30,30] grid" /></div>
</td></tr>
</table>
diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiResizable/Home.php b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiResizable/Home.php
index 435b8a9b..e4f126e1 100644
--- a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiResizable/Home.php
+++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiResizable/Home.php
@@ -13,4 +13,19 @@ class Home extends TPage
$size=$param->getCallbackParameter()->size;
$this->label1->Text.="<br/>Stop: ".intval($size->width)." x ".intval($size->height);
}
+
+ protected function check1($sender, $param)
+ {
+ $this->resize1->getOptions()->alsoResize = $sender->getChecked() ? '#box' : '';
+ }
+
+ protected function check2($sender, $param)
+ {
+ $this->resize1->getOptions()->animate = TPropertyValue::ensureString($sender->getChecked());
+ }
+
+ protected function check3($sender, $param)
+ {
+ $this->resize1->getOptions()->grid = $sender->getChecked() ? '30' : false;
+ }
} \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSelectable/Home.page b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSelectable/Home.page
index cd778625..d7b1e8a8 100644
--- a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSelectable/Home.page
+++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSelectable/Home.page
@@ -27,13 +27,15 @@
<table class="sampletable">
<tr><td class="samplenote">
-Default options with a little css applied:
+Default options with a little css applied, change options during callback:
</td><td class="sampleaction">
<com:TJuiSelectable
ID="repeater1"
OnStop="repeater1_onStop"
/>
- <com:TActiveLabel ID="label1" />
+ Selected items: <com:TActiveLabel ID="label1" />
+ <div><com:TActiveCheckBox OnCheckedChanged="select1" Text="Disable selectable" /></div>
+ <div><com:TActiveCheckBox OnCheckedChanged="select2" Text="Selecting starts after dragging at least 100px" /></div>
</td></tr>
</table>
diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSelectable/Home.php b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSelectable/Home.php
index ada38408..81d5ea27 100644
--- a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSelectable/Home.php
+++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSelectable/Home.php
@@ -18,15 +18,22 @@ class Home extends TPage
{
$this->repeater1->DataSource=$this->data;
$this->repeater1->dataBind();
+ $this->label1->setText('<i>none</i>');
}
}
public function repeater1_onStop($sender, $param)
{
- $this->label1->Text="Selected items:";
$items = $param->getCallbackParameter()->index;
+ foreach ($items as $key => $index) $items[$key] = $this->data[$index];
+ $this->label1->Text = implode(' ', $items);
+ }
+
+ public function select1($sender, $param) {
+ $this->repeater1->getOptions()->disabled = $sender->getChecked();
+ }
- foreach($items as $index)
- $this->label1->Text.=' '.$this->data[$index];
+ public function select2($sender, $param) {
+ $this->repeater1->getOptions()->distance = $sender->getChecked() ? 100 : 0;
}
}
diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSortable/Home.page b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSortable/Home.page
index cbb1465b..e653308c 100644
--- a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSortable/Home.page
+++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSortable/Home.page
@@ -17,17 +17,36 @@
background: lime;
border: 1px solid black;
}
+
+ .ui-sortable li.ui-sortable-highlight {
+ background: red;
+ border: 1px solid black;
+ height: 17px;
+ }
</com:TStyleSheet>
<table class="sampletable">
<tr><td class="samplenote">
-Default options with a little css applied:
+Default options with a little css applied, change options during callback:
</td><td class="sampleaction">
<com:TJuiSortable
ID="repeater1"
onStop="repeater1_onStop"
/>
- <com:TActiveLabel ID="label1" />
+ Items order: <com:TActiveLabel ID="label1" />
+ <div><com:TActiveCheckBox OnCheckedChanged="sort1" Text="Apply CSS dragging placeholder" /></div>
+ <div><com:TActiveCheckBox OnCheckedChanged="sort2" Text="Revert to new position using a smooth animation" /></div>
+ <div>
+ Cursor is
+ <com:TActiveDropDownList OnSelectedIndexChanged="sort3">
+ <com:TListItem Text="auto" Value="auto" Selected="true" />
+ <com:TListItem Text="move" Value="move" />
+ <com:TListItem Text="pointer" Value="pointer" />
+ <com:TListItem Text="crosshair" Value="crosshair" />
+ <com:TListItem Text="help" Value="help" />
+ </com:TActiveDropDownList>
+ while dragging
+ </div>
</td></tr>
</table>
diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSortable/Home.php b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSortable/Home.php
index d96df302..cca55f67 100644
--- a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSortable/Home.php
+++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSortable/Home.php
@@ -18,14 +18,29 @@ class Home extends TPage
{
$this->repeater1->DataSource=$this->data;
$this->repeater1->dataBind();
+ $this->label1->Text = implode(' ', $this->data);
}
}
public function repeater1_onStop($sender, $param)
{
- $this->label1->Text="Items order:";
$order = $param->getCallbackParameter()->index;
- foreach($order as $index)
- $this->label1->Text.=' '.$this->data[$index];
+ foreach ($order as $key => $index) $order[$key] = $this->data[$index];
+ $this->label1->Text = implode(' ', $order);
+ }
+
+ public function sort1($sender, $param)
+ {
+ $this->repeater1->getOptions()->placeholder = $sender->getChecked() ? 'ui-sortable-highlight' : false;
+ }
+
+ public function sort2($sender, $param)
+ {
+ $this->repeater1->getOptions()->revert = $sender->getChecked();
+ }
+
+ protected function sort3($sender, $param)
+ {
+ $this->repeater1->getOptions()->cursor = $sender->getSelectedValue();
}
}