feature/dynamic-popup

[ibelar]

Popup View

Simple popup view compatible with semantic-ui.

Popup content can be add statically or dynamically via a callback url.

Statically

Example, setting a button to display a pop window on click.

$button = $app->add(['Button', 'Click Me', 'primary']);

$b_pop = $app->add('Popup', ['triggerBy' => $button, 'triggerOn' => 'click']);
$b_pop->add('Header', ['size'=> 5])->set('Using click events');
$b_pop->add('View')->set('Clicked popups will close if you click away, but not if you click inside it.');

Dynamically

Example, implementing a cart menu item that display a dynamic popup.

$m = $app->add('Menu');
$cart = $m->addItem('Cart');
$cart->add('Icon')->set('cart');

$dyn_pop = $app->add('Popup', ['triggerBy'=> $cart, 'position' => 'bottom left'])->setHoverable();
$dyn_pop->set(function($pop){
    //get number of items in cart with total price.
    $item = rand(2,8);
    $unit_price = rand(1,3);
    $total = $item * ($unit_price + rand(0,100)/100);
    $pop->add(['Label', 'Number of items:', 'detail' => $item]);
    $pop->add(['Label', '$'.$total]);
    $pop->add('Item')->setElement('hr');
    $btn = $pop->add(['Button', 'Checkout', 'primary small']);
    $btn->js('click', new atk4\ui\jsExpression('alert([])', ['Thank you for checking out']));
});

Demo

You can see a running demo in /demos/popup.php

Note

atkjs-ui.js need to be rebuild.

[codecov]

Codecov Report

Merging #427 into develop will decrease coverage by 1.51%.
The diff coverage is 3.89%.

@@              Coverage Diff              @@
##             develop     #427      +/-   ##
=============================================
- Coverage      69.43%   67.91%   -1.52%     
- Complexity      1384     1420      +36     
=============================================
  Files             75       76       +1     
  Lines           3278     3354      +76     
=============================================
+ Hits            2276     2278       +2     
- Misses          1002     1076      +74

Impacted Files	Coverage Δ	Complexity Δ
src/Popup.php	0% <0%> (ø)	34 <34> (?)
src/Lister.php	90.32% <50%> (-2.79%)	11 <0> (+1)
src/View.php	81.58% <50%> (-0.47%)	135 <3> (+1)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update eeda93f...f221459. Read the comment docs.

[romaninsh]

so far i like the implementation. Quite clean.

[romaninsh]

i like this. Still needs docs though.

[romaninsh]

do you think we could have option to either add like this or set a callback for ajax? similar to how we have it in Modal ?