New feature: In place editor

js/Plugin/jstree/hm.jstree.js

@@ -16,15 +16,17 @@
           const searchTextID = (parentID) ? '#hm-jstree-search-' + parentID : '#hm-jstree-search';
           const optionsJson = treeContainer.attr("options");
           const dataURL = treeContainer.attr('data-source') + '&parent=0';
-          const updateURL = treeContainer.attr('url-update')
+          const updateURL = treeContainer.attr('url-update');
+          const newWindow = false;
+          let $popDialog = [];
           let reload = true;
           let rollback = false;
-          let after = 1;
           let themes = {
               dots: false,
               name: 'default'
           };
           let options;
+          var offset = 0;
           
           if (optionsJson) {
             options = JSON.parse(optionsJson);
@@ -104,8 +106,36 @@
          // Node selected event.
             treeContainer.on("select_node.jstree", function(event, data) {
               var href = data.node.a_attr.href;
-              // Todo: make the target of the new window configurable.
-              window.open(href, "_self");
+              if (newWindow) {
+                window.open(href, "_self");
+              }
+              else {
+                Drupal.ajax({
+                  url: href,
+                  success: function(response) {
+                    response.forEach(function(element) {
+                      if (element.command && element.data) {
+                        if (element.command === 'insert' && element.selector === null) {
+                          $popDialog[offset] = $('<div>' + element.data + '</div>').appendTo('body');
+                        }
+                      }
+                    });
+                    
+                    if ($popDialog[offset]) {
+                      let margin = parseInt(offset * 10 % 40);
+                      let options = {
+                          title: 'Edit ' + data.node.text,
+                          minWidth: 600,
+                          draggable: true,
+                          resizable: true,
+                          autoResize: false,
+                          position: {'my': 'right bottom', 'at':'right-' + margin + ' bottom-' + margin},
+                      };
+                      Drupal.dialog($popDialog[offset++], options).show(); 
+                    }
+                  }
+                }).execute(); 
+              }   
             });
 
             // Search filter box.

src/Plugin/HmDisplayPlugin/HmDisplayJstree.php

@@ -75,6 +75,7 @@ class HmDisplayJstree extends HmDisplayPluginBase implements HmDisplayPluginInte
       
       $form['#attached']['library'][] = 'hierarchy_manager/libraries.jquery.jstree.' . $theme;
       $form['#attached']['library'][] = 'hierarchy_manager/feature.hm.jstree';
+      $form['#attached']['library'][] = 'core/drupal.dialog.ajax';
     }
     
     return $form;
@@ -96,7 +97,9 @@ class HmDisplayJstree extends HmDisplayPluginBase implements HmDisplayPluginInte
         $jstree_node['parent'] = '#';
       }
       // Custom data
-      $jstree_node['a_attr'] = ['href' => $jstree_node['edit_url']];
+      $jstree_node['a_attr'] = [
+        'href' => $jstree_node['edit_url'],
+      ];
       unset($jstree_node['edit_url']);
       // Add this node into the data array.
       $jstree_data[] = $jstree_node;