Picky Widget now supports some ajax methods

src/View/Widget/MediaWidget.php

@@ -19,7 +19,7 @@
  * echo $this->Form->control('media2', ['type' => 'media', 'multiple' => true]);
  *
  * @author Flavius
- * @version 1.1
+ * @version 1.2
  */
 class MediaWidget extends BasicWidget
 {
@@ -37,6 +37,9 @@ class MediaWidget extends BasicWidget
         ]
     ];
 
+    // the empty value
+    private $emptyValue = '_to_empty_array_';
+
     /**
      * Load prerequisites
      * @param View $view - The view object
@@ -86,7 +89,11 @@ protected function item(View $view, $value, $new = false) {
      * @param string $value
      * @return string
      */
-    protected function input($name, $value = '_to_empty_array_') {
+    protected function input($name, $value = false) {
+        // default empty value
+        if(!$value)
+            $value = $this->emptyValue;
+
         // return input
         return $this->_templates->format('input', [
             'name' => $name,

src/View/Widget/PickyWidget.php

@@ -17,7 +17,7 @@
  * echo $this->Form->control('pick', ['type' => 'picky', 'list' => ['item1', 'item2', 'item3', 'item4']])
  *
  * @author Flavius
- * @version 1.0
+ * @version 1.1
  */
 class PickyWidget extends BasicWidget
 {
@@ -34,6 +34,9 @@ class PickyWidget extends BasicWidget
         ]
     ];
 
+    // the empty value
+    private $emptyValue = '_to_empty_array_';
+
     /**
      * Load prerequisites
      * @param View $view - The view object
@@ -93,14 +96,18 @@ public function render(array $data, ContextInterface $context) {
             $elements = $this->_templates->format('input', [
                 'name' => $data['name'] . '[]',
                 'type' => 'hidden',
-                'attrs' => ' value="_to_empty_array_"'
+                'attrs' => " value=\"{$this->emptyValue}\""
             ]);
         }
 
         // calculate existing ids
         $picky = "<div class='list'>";
-        foreach($data['list'] as $value)
-            $picky.= "<pick". (in_array($value, $data['val']) ? ' class="active"' : false) ."><div><span title='{$value}'>{$value}</span></div></pick>";
+        foreach($data['list'] as $value) {
+            $class = false;
+            if(in_array($value, $data['val'])) $class = 'active';
+            if($value == $this->emptyValue) $class = 'empty';
+            $picky.= "<pick". ($class ? " class=\"{$class}\"" : false) ."><div><span title='{$value}'>{$value}</span></div></pick>";
+        }
         $picky .= "</div>";
 
         // return the actual template for this input type

webroot/css/widgets/picky.css

@@ -24,6 +24,10 @@ div.picky-widget {
             transition: background .25s ease-in-out;
         }
 
+        div.picky-widget > div.list > pick.empty {
+            display: none;
+        }
+
         div.picky-widget > div.list > pick.active {
             background: #9631e3;
         }

webroot/js/backend.js

@@ -2,7 +2,7 @@
  * Backend
  *
  * @author Flavius
- * @version 1.0
+ * @version 1.1
  */
 var dump = function(what) { 'use strict';
     if(typeof console != 'undefined')
@@ -33,6 +33,24 @@ var Backend = function() { 'use strict';
                 window.setTimeout(function() { collapse.call(self); }, 3000);
         });
 
+    // instant flash message
+    }, flash = function(message, type) {
+        // get allowed css class
+        var cls = '';
+        if(type !== undefined && ['error', 'success'].indexOf(type) !== -1)
+            cls = type;
+
+        // on error delete the previous errors
+        if(cls == 'error') {
+            let c = $('body > div.error.flash.message');
+            if(c.length > 0)
+                c.remove();
+        }
+
+        // append message
+        $('body').append($('<div class="' + cls + ' flash message">'+ message +'</div>'));
+        _flash();
+
     // mobile side nav expansion
     }, _sidenav = function() {
         var b = $('div.arrow-expand > i');
@@ -78,7 +96,8 @@ var Backend = function() { 'use strict';
 
     // public, yay
     return {
-        init: __construct
+        init: __construct,
+        flash: flash
     };
 }();
 

webroot/js/widgets/picky.js

@@ -2,12 +2,13 @@
  * Picky widget
  *
  * @author Flavius
- * @version 1.0
+ * @version 1.1
  */
 if(typeof Widgets === 'undefined') var Widgets = {};
 Widgets.picky = function() { 'use strict';
     var store = {
         empty: '_to_empty_array_',
+        pickm: '<pick><div><span title="%value%">%value%</span></div></pick>',
 
     // handle binds
     }, _bind = function() {
@@ -18,7 +19,7 @@ Widgets.picky = function() { 'use strict';
                 name = list.siblings('input[type="hidden"]:first').attr('name');
 
             // on click event
-            list.find('pick').on('click', function() {
+            list.on('click', 'pick', function() {
                 // visual only
                 $(this).toggleClass('active');
 
@@ -34,17 +35,36 @@ Widgets.picky = function() { 'use strict';
                     for(let i = 0; i < values.length; i++)
                         container.append($('<input/>', {type: 'hidden', name: name, value: values[i]}));
                 else container.append($('<input/>', {type: 'hidden', name: name, value: store.empty}));
-            })
+            });
         });
 
+    // public reset method
+    }, reset = function(container) {
+        var list = container.find('div.list'),
+            name = list.siblings('input[type="hidden"]:first').attr('name'),
+            empty = $(store.pickm.replace(/\%value%/g, store.empty)).addClass('empty');
+
+        list.html(empty);
+        list.siblings('input[type="hidden"]').remove();
+        container.append($('<input/>', {type: 'hidden', name: name, value: store.empty}));
+
+    // public add to list method
+    }, add = function(container, value) {
+        var list = container.find('div.list'),
+            markup = $(store.pickm.replace(/\%value%/g, value));
+
+        list.append(markup);
+
     // init
     }, __construct = function() {
         _bind();
     };
 
     // public, yay
     return {
-        init: __construct
+        init: __construct,
+        reset: reset,
+        add: add
     };
 }();