partial rewrite

README.md

@@ -38,7 +38,7 @@ A richer code sample that shows the full syntax of this widget:
 ```
 <?php
 echo \silecs\fancytree\Fancytree::widget([
-	'url' => Url::to(['tree/children'], // default is "" (read from options["source"])
+    'url' => Url::to(['tree/children'], // default is "" (read from options["source"])
     'cache' => false,                   // default is true
     'skin' => 'awesome',                // default is "vista"
     'options' => [],                    // genuine FancyTree configuration

composer.json

@@ -2,6 +2,7 @@
   "name": "silecs/yii2-fancytree",
   "description": "Yii2 FancyTree widget",
   "type": "yii2-extension",
+  "version": "2.0.0',
   "keywords": [
     "yii2",
     "tree",
@@ -20,7 +21,7 @@
   "require": {
     "yiisoft/yii2": "~2",
     "yiisoft/yii2-jui": "~2",
-    "bower-asset/fancytree": "~2",
+    "bower-asset/fancytree": "~2.37.0",
     "bower-asset/js-cookie": "~2"
   },
   "autoload": {

src/Fancytree.php

@@ -1,9 +1,5 @@
 <?php
 
-/*
- * @license http://www.gnu.org/licenses/gpl-3.0.html  GNU GPL v3
- */
-
 namespace silecs\fancytree;
 
 use yii\base\Widget;
@@ -26,61 +22,68 @@
 class Fancytree extends Widget
 {
     /**
-     * @var string
+     * @var string Key of the active node (only if the node isn't lazily loaded).
      */
-    public $skin;
+    public $activeNode;
 
     /**
-     * @var string
+     * @var boolean Cache the HTTP GET requests, on the client side.
      */
-    public $url;
+    public $cache = true;
 
     /**
-     * @var boolean Cache the HTTP GET requests.
+     * @var string[] List of HTML class names for the tree container.
      */
-    public $cache = true;
+    public $classes = [];
 
     /**
-     * @var string Key of the active node (only if the node isn't lazily loaded).
+     * @var array The various options of FancyTree.
+     *   See https://wwwendt.de/tech/fancytree/doc/jsdoc/global.html#FancytreeOptions
+     *   and https://wwwendt.de/tech/fancytree/demo/sample-configurator.html
      */
-    public $activeNode;
+    public $options = [];
 
     /**
-     * @var array
+     * @var string This will overwrite the options['source'] config.
      */
-    public $options = [];
+    public $url;
 
     /**
-     * Helps to setup a fully AJAX tree to $url?id={key}.
+     * Setup the AJAX lazy loading of the tree with calls to "$url?mode=children&id={{node.key}}".
      *
      * @param string $url
      */
-    public function applyAjaxUrl($url)
+    public function applyAjaxUrl(string $url): void
     {
         $this->options['source'] = [
             'url' => $url,
             'cache' => $this->cache
         ];
-        $this->options['lazyLoad'] = new \yii\web\JsExpression('
-function(event, data){
-    var node = data.node;
-    // Load child nodes via ajax GET url?mode=children&parent=1234
-    data.result = {
-      url: "' . addslashes($url) . '",
-      data: { id: node.key },
-      cache: ' . ($this->cache ? "true" : "false") . '
-    };
-}'
+        $encodedUrl = json_encode($url);
+        $encodedCache = json_encode($this->cache);
+        $this->options['lazyLoad'] = new \yii\web\JsExpression(
+            <<<EOJS
+            function(event, data){
+                var node = data.node;
+                // Load child nodes via ajax GET url?mode=children&id=1234
+                data.result = {
+                    url: {$encodedUrl},
+                    data: { id: node.key },
+                    cache: {$encodedCache}
+                };
+            }
+            EOJS
         );
     }
 
     /**
      * @inheritdoc
      */
-    public function init()
+    public function init(): void
     {
-        if ($this->skin) {
-            FancytreeAssets::$skin = $this->skin;
+        parent::init();
+        if (!empty($this->options['skin'])) {
+            FancytreeAssets::$skin = $this->options['skin'];
         }
         if (
             isset($this->options['extensions'])
@@ -92,6 +95,7 @@ public function init()
             FancytreeAssets::$cookies = true;
         }
         FancytreeAssets::register($this->getView());
+
         if ($this->url) {
             $this->applyAjaxUrl($this->url);
         }
@@ -100,23 +104,27 @@ public function init()
     /**
      * @inheritdoc
      */
-    public function run()
+    public function run(): string
     {
-        $id = (empty($this->options['id']) ? 'fancytree-' . $this->getId() : $this->options['id']);
+        $id = empty($this->options['id']) ? 'fancytree-' . $this->getId() : $this->options['id'];
+        $selector = json_encode("#{$id}");
         if ($this->activeNode) {
-            $this->options['init'] = new \yii\web\JsExpression("
-function(event, data) {
-console.log(data);
-\$('#{$id}').fancytree('getTree').activateKey('{$this->activeNode}');
-}"
+            $activeNode = json_encode($this->activeNode);
+            $this->options['init'] = new \yii\web\JsExpression(
+                <<<EOJS
+                function(event, data) {
+                    $({$selector}).fancytree('getTree').activateKey('{$activeNode}');
+                }
+                EOJS
             );
         }
-        echo Html::tag('div', '', ['id' => $id, 'class' => 'fancytree']);
+
         // Loads jQuery and the initialisation JS code
         $this->getView()->registerJs(
-            "$('#{$id}').fancytree("
-            . Json::encode($this->options)
-            . ");"
+            "$({$selector}).fancytree(" . Json::encode($this->options) . ");"
         );
+
+        $this->classes[] = 'fancytree';
+        return Html::tag('div', '', ['id' => $id, 'class' => join(" ", $this->classes)]);
     }
 }

src/FancytreeAssets.php

@@ -1,9 +1,5 @@
 <?php
 
-/**
- * @license http://www.gnu.org/licenses/gpl-3.0.html  GNU GPL v3
- */
-
 namespace silecs\fancytree;
 
 use yii\web\AssetBundle;
@@ -13,41 +9,41 @@
  */
 class FancytreeAssets extends AssetBundle
 {
-    /**
-     * @var string The FancyTree skin.
-     */
-    static public $skin = 'vista';
-
     /**
      * @var boolean
      */
-    static public $cookies = false;
+    public static $cookies = false;
 
     /**
-     * @var string the directory that contains the source asset files for this asset bundle.
+     * @var string The FancyTree skin.
      */
-    public $sourcePath = '@bower';
+    public static $skin = 'vista';
 
     /**
      * @var array list of bundle class names that this bundle depends on.
      */
     public $depends = [
         'yii\web\JqueryAsset',
-        'yii\jui\JuiAsset',
     ];
 
+    /**
+     * @var string the directory that contains the source asset files for this asset bundle.
+     */
+    public $sourcePath = '@bower';
+
     /**
      * @inheritdoc
      */
-    public function registerAssetFiles($view)
+    public function registerAssetFiles($view): void
     {
         if (self::$cookies) {
             $this->js[] = 'js-cookie/src/js.cookie.js';
         }
-        $this->js[] = 'fancytree/dist/jquery.fancytree-all'
-            . (defined('YII_DEBUG') && YII_DEBUG ? '.js' : '.min.js');
+        $this->js[] = 'fancytree/dist/jquery.fancytree-all-deps.min.js';
+
         $this->css[] = "fancytree/dist/skin-" . self::$skin . '/ui.fancytree'
             . (defined('YII_DEBUG') && YII_DEBUG ? '.css' : '.min.css');
+
         parent::registerAssetFiles($view);
     }
 }