Merge pull request #112 from symfony-cmf/root_path

Fix input binding with a configured root node

Author: wouterj

.travis.yml

@@ -11,7 +11,8 @@ sudo: false
 cache:
     directories:
         - $HOME/.composer/cache/files
-        - node_modules
+# node_modules are not cached, because we don't shrinkwrap the deps.
+#        - node_modules
 
 env: LANG=php
 

Resources/assets/js/adapter/fancytree.js

@@ -147,13 +147,20 @@ export class FancytreeAdapter {
             // transform the JSON response into a data structure that's supported by FancyTree
             postProcess: function (event, data) {
                 if (null == data.error) {
-                    data.result = requestNodeToFancytreeNode(data.response).children;
-                    if (data.result.length == 1) {
-                        data.result[0].expanded = true;
+                    var result = requestNodeToFancytreeNode(data.response);
+                    if ("" === result.key) {
+                        result = result.children;
+                    } else {
+                        result = [result];
+                    }
+
+                    if (result.length == 1) {
+                        result[0].expanded = true;
                     }
 
+                    data.result = result;
                     if (useCache) {
-                        cache.set(data.node.getKeyPath(), data.result);
+                        cache.set(data.node.getKeyPath(), result);
                     }
                 } else {
                     data.result = {
@@ -182,29 +189,41 @@ export class FancytreeAdapter {
     }
 
     bindToInput($input) {
+        var root = this.rootNode;
+        if (root.substr(-1) == '/') {
+            var root = this.rootNode.substr(0, -1);
+        }
+        var rootParent = root.substr(0, root.lastIndexOf('/'));
+
         // output active node to input field
-        this.$tree.fancytree('option', 'activate', function(event, data) {
-            $input.val(data.node.getKeyPath());
+        this.$tree.fancytree('option', 'activate', (event, data) => {
+            $input.val(rootParent + data.node.getKeyPath());
         });
 
-        var tree = this.tree;
-        var showKey = function (key) {
-            tree.loadKeyPath(key, function (node, status) {
+        var showKey = (key) => {
+            this.tree.loadKeyPath(key, function (node, status) {
                 if ('ok' == status) {
                     node.setExpanded();
                     node.setActive();
                 }
             });
         };
+        var removeRoot = (path) => {
+            if (0 === path.indexOf(rootParent + '/')) {
+                return path.substr(rootParent.length + 1);
+            }
+
+            return path;
+        };
 
         // use initial input value as active node
         this.$tree.bind('fancytreeinit', function (event, data) {
-            showKey($input.val());
+            showKey(removeRoot($input.val()));
         });
 
         // change active node when the value of the input field changed
         $input.on('change', function (e) {
-            showKey($(this).val());
+            showKey(removeRoot($(this).val()));
         });
     }
 

Resources/public/js/cmf_tree_browser.fancytree.js

@@ -208,4 +208,52 @@ describe('The Fancytree adapter', function() {
         expect(tree.getNodeByKey('cms').isActive()).toBe(true);
     });
 
+    it('prefixes the root node to path output when configured', function () {
+        jasmine.Ajax.stubRequest(/^\/root_api/).andReturn({
+            responseText: JSON.stringify({
+                node_name: 'cms',
+                label: 'cms',
+                path: '\/cms',
+                children: {
+                    content: {
+                        node_name: 'content',
+                        label: 'Content',
+                        path: '/cms/content',
+                        children: {
+                            some_article: [],
+                            other_article: []
+                        }
+                    },
+                    routes: {
+                        node_name: 'routes',
+                        label: 'Routes',
+                        path: '/cms/routes',
+                        children: {}
+                    }
+                }
+            })
+        });
+
+        var adapter = new FancytreeAdapter({
+            request: {
+                load: function (path) {
+                    return {
+                        url: '/root_api'
+                    };
+                },
+            },
+            root_node: '/cms'
+        });
+
+        adapter.bindToElement(this.$tree);
+
+        var $input = $('<input type=text value="/cms/routes"/>');
+        adapter.bindToInput($input);
+
+        var tree = this.$tree.fancytree('getTree');
+
+        tree.getNodeByKey('content').setActive();
+        expect($input).toHaveValue('/cms/content');
+    });
+
 });