From 6df7ccf6c59c71694c3ff806cdfc0f834e34e9f0 Mon Sep 17 00:00:00 2001
From: WouterJ <waldio.webdesign@gmail.com>
Date: Tue, 13 Jan 2015 02:26:24 +0100
Subject: [PATCH 1/4] Added basic autocompletion support

---
 Resources/public/js/jquery.autocomplete.js | 64 ++++++++++++++++++++++
 Resources/views/Base/scripts.html.twig     |  1 +
 2 files changed, 65 insertions(+)
 create mode 100644 Resources/public/js/jquery.autocomplete.js

diff --git a/Resources/public/js/jquery.autocomplete.js b/Resources/public/js/jquery.autocomplete.js
new file mode 100644
index 0000000..391475a
--- /dev/null
+++ b/Resources/public/js/jquery.autocomplete.js
@@ -0,0 +1,64 @@
+/**
+* A small plugin to add autocompletion features for paths
+* in browsers.
+*
+* @author Wouter J <wouter@wouterj.nl>
+*/
+jQuery.fn.cmfAutoComplete = function (options) {
+    options = jQuery.extend({
+        // The element to put the data in, this has to be a <datalist> element
+        //     null:   use the list attribute to find the datalist
+        //     string: specify a custom selector
+        datalist_selector: null,
+        // A callback to retrieve the data, it should always return an array.
+        data: function (path) { return []; },
+    }, options);
+
+    var $input = $(this);
+    var $autocompleteList;
+    var cache = {};
+    var previousBase;
+
+    // find datalist
+    if (options.datalist_selector) {
+        $autocompleteList = $(options.datalist_selector);
+    } else if ($(this).attr('list')) {
+        $autocompleteList = $('#' + $(this).attr('list'));
+    } else {
+        throw 'No datalist selected';
+    }
+
+    if ('DATALIST' !== $autocompleteList.prop('tagName')) {
+        throw 'The configured datalist element should be a <datalist> element, <' + $autocompleteList.prop('tagName').toLowerCase() + '> given.';
+    }
+
+    // find autocompletion values
+    $input.on('keyup', function (e) {
+        // arrows are used to navigate through the data list, don't update it then
+        if (e.keyCode >= 37 && e.keyCode <= 40) {
+            return;
+        }
+
+        var path = $(this).val();
+        var base = path.substr(0, path.lastIndexOf('/') + 1); // get everything except the child
+
+        // skip if still in same node
+        if (base === previousBase) {
+            return;
+        }
+        previousBase = base;
+
+        // cache node
+        if (!cache[base]) {
+            cache[base] = options.data(path);
+        }
+
+        // clear datalist
+        $autocompleteList.empty();
+
+        // add new autocomplete values
+        cache[base].forEach(function (child) {
+            $autocompleteList.append('<option label="' + child + '" value="' + base + child + '">');
+        });
+    });
+};
diff --git a/Resources/views/Base/scripts.html.twig b/Resources/views/Base/scripts.html.twig
index e1c338c..77bb719 100644
--- a/Resources/views/Base/scripts.html.twig
+++ b/Resources/views/Base/scripts.html.twig
@@ -9,6 +9,7 @@
 <script src="{{ asset('bundles/cmftreebrowser/js/adapter/' ~ treeAdapter ~ '.js') }}"></script>
 <script src="{{ asset('bundles/cmftreebrowser/js/jquery.cmf_context_menu.js') }}"></script>
 <script src="{{ asset('bundles/cmftreebrowser/js/jquery.cmf_tree.js') }}"></script>
+<script src="{{ asset('bundles/cmftreebrowser/js/jquery.autocomplete.js') }}"></script>
 
 <link rel="stylesheet" href="{{ asset(assetsBasePath ~ '/fancytree/dist/skin-win8/ui.fancytree.min.css') }}" media="all"/>
 <link rel="stylesheet" href="{{ asset('bundles/cmftreebrowser/css/fontawesome-style.css') }}" media="all"/>

From 972b91086d6422988a41fef5c7dd326352f6e303 Mon Sep 17 00:00:00 2001
From: WouterJ <waldio.webdesign@gmail.com>
Date: Fri, 24 Apr 2015 16:25:13 +0200
Subject: [PATCH 2/4] Renamed file

---
 ...complete.js => jquery.cmf_autocomplete.js} | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)
 rename Resources/public/js/{jquery.autocomplete.js => jquery.cmf_autocomplete.js} (81%)

diff --git a/Resources/public/js/jquery.autocomplete.js b/Resources/public/js/jquery.cmf_autocomplete.js
similarity index 81%
rename from Resources/public/js/jquery.autocomplete.js
rename to Resources/public/js/jquery.cmf_autocomplete.js
index 391475a..672aba4 100644
--- a/Resources/public/js/jquery.autocomplete.js
+++ b/Resources/public/js/jquery.cmf_autocomplete.js
@@ -6,17 +6,26 @@
 */
 jQuery.fn.cmfAutoComplete = function (options) {
     options = jQuery.extend({
-        // The element to put the data in, this has to be a <datalist> element
-        //     null:   use the list attribute to find the datalist
-        //     string: specify a custom selector
+        /**
+         * The element used to show the suggestions.
+         *
+         * This has to be a <datalist> element.
+         *
+         * @var string|null A selector or use the selector in
+         *                  the `list` attribute (when null is used)
+         */
         datalist_selector: null,
-        // A callback to retrieve the data, it should always return an array.
+
+        /**
+         * A callback to retrieve the data.
+         *
+         * @return array
+         */
         data: function (path) { return []; },
     }, options);
 
     var $input = $(this);
     var $autocompleteList;
-    var cache = {};
     var previousBase;
 
     // find datalist

From 0942858865ae068e1d6a8b8fdd94e3a7c54f40cf Mon Sep 17 00:00:00 2001
From: WouterJ <waldio.webdesign@gmail.com>
Date: Sun, 10 May 2015 22:11:29 +0200
Subject: [PATCH 3/4] Added some fixes

---
 Resources/public/js/adapter/fancytree.js      |   4 +
 .../public/js/jquery.cmf_autocomplete.js      | 135 ++++++++++--------
 Resources/views/Base/scripts.html.twig        |   2 +-
 3 files changed, 78 insertions(+), 63 deletions(-)

diff --git a/Resources/public/js/adapter/fancytree.js b/Resources/public/js/adapter/fancytree.js
index d793a86..693aa1e 100644
--- a/Resources/public/js/adapter/fancytree.js
+++ b/Resources/public/js/adapter/fancytree.js
@@ -195,6 +195,10 @@
 
         addAction: function (name, url, icon) {
             this.actions[name] = { url: url, icon: icon };
+        },
+
+        getFromCache: function (name) {
+            return cache.hasOwnProperty(name) ? cache[name] : undefined;
         }
     };
 
diff --git a/Resources/public/js/jquery.cmf_autocomplete.js b/Resources/public/js/jquery.cmf_autocomplete.js
index 672aba4..5bbafbf 100644
--- a/Resources/public/js/jquery.cmf_autocomplete.js
+++ b/Resources/public/js/jquery.cmf_autocomplete.js
@@ -1,73 +1,84 @@
-/**
-* A small plugin to add autocompletion features for paths
-* in browsers.
-*
-* @author Wouter J <wouter@wouterj.nl>
-*/
-jQuery.fn.cmfAutoComplete = function (options) {
-    options = jQuery.extend({
-        /**
-         * The element used to show the suggestions.
-         *
-         * This has to be a <datalist> element.
-         *
-         * @var string|null A selector or use the selector in
-         *                  the `list` attribute (when null is used)
-         */
-        datalist_selector: null,
+!function () {
+    var cache = [];
 
-        /**
-         * A callback to retrieve the data.
-         *
-         * @return array
-         */
-        data: function (path) { return []; },
-    }, options);
+    /**
+     * A small plugin to add autocompletion features for paths
+     * in browsers.
+     *
+     * @author Wouter J <wouter@wouterj.nl>
+     */
+    window.jQuery.fn.cmfAutoComplete = function (options) {
+        options = jQuery.extend({
+            /**
+             * The element used to show the suggestions.
+             *
+             * This has to be a <datalist> element.
+             *
+             * @var string|null A selector or use the selector in
+             *                  the `list` attribute (when null is used)
+             */
+            datalist_selector: null,
 
-    var $input = $(this);
-    var $autocompleteList;
-    var previousBase;
+            /**
+             * A callback to retrieve the data.
+             *
+             * @return array
+             */
+            data: function (path) { return []; },
+        }, options);
 
-    // find datalist
-    if (options.datalist_selector) {
-        $autocompleteList = $(options.datalist_selector);
-    } else if ($(this).attr('list')) {
-        $autocompleteList = $('#' + $(this).attr('list'));
-    } else {
-        throw 'No datalist selected';
-    }
+        var $input = $(this);
+        var $autocompleteList;
+        var previousBase;
 
-    if ('DATALIST' !== $autocompleteList.prop('tagName')) {
-        throw 'The configured datalist element should be a <datalist> element, <' + $autocompleteList.prop('tagName').toLowerCase() + '> given.';
-    }
-
-    // find autocompletion values
-    $input.on('keyup', function (e) {
-        // arrows are used to navigate through the data list, don't update it then
-        if (e.keyCode >= 37 && e.keyCode <= 40) {
-            return;
+        // find datalist
+        if (options.datalist_selector) {
+            $autocompleteList = $(options.datalist_selector);
+        } else if ($(this).attr('list')) {
+            $autocompleteList = $('#' + $(this).attr('list'));
+        } else {
+            throw 'No datalist selected';
         }
 
-        var path = $(this).val();
-        var base = path.substr(0, path.lastIndexOf('/') + 1); // get everything except the child
-
-        // skip if still in same node
-        if (base === previousBase) {
-            return;
+        if ('DATALIST' !== $autocompleteList.prop('tagName')) {
+            throw 'The configured datalist element should be a <datalist> element, <' + $autocompleteList.prop('tagName').toLowerCase() + '> given.';
         }
-        previousBase = base;
 
-        // cache node
-        if (!cache[base]) {
-            cache[base] = options.data(path);
-        }
+        // find autocompletion values
+        $input.on('keyup', function (e) {
+            // arrows are used to navigate through the data list, don't update it then
+            if (e.keyCode >= 37 && e.keyCode <= 40) {
+                return;
+            }
+
+            var path = $(this).val();
+            var base = path.substr(0, path.lastIndexOf('/') + 1); // get everything except the child
 
-        // clear datalist
-        $autocompleteList.empty();
+            // skip if still in same node
+            if (base === previousBase) {
+                return;
+            }
+            previousBase = base;
 
-        // add new autocomplete values
-        cache[base].forEach(function (child) {
-            $autocompleteList.append('<option label="' + child + '" value="' + base + child + '">');
+            // cache node
+            if (!cache[base]) {
+                options.data(base, function (nodes) {
+                    cache[base] = nodes;
+                    updateAutocompleteList(base);
+                });
+            } else {
+                updateAutocompleteList(base);
+            }
         });
-    });
-};
+
+        function updateAutocompleteList(base) {
+            // clear datalist
+            $autocompleteList.empty();
+
+            // add new autocomplete values
+            cache[base].forEach(function (child) {
+                $autocompleteList.append('<option label="' + child + '" value="' + base + child + '">');
+            });
+        }
+    };
+}();
diff --git a/Resources/views/Base/scripts.html.twig b/Resources/views/Base/scripts.html.twig
index 77bb719..c4e5680 100644
--- a/Resources/views/Base/scripts.html.twig
+++ b/Resources/views/Base/scripts.html.twig
@@ -9,7 +9,7 @@
 <script src="{{ asset('bundles/cmftreebrowser/js/adapter/' ~ treeAdapter ~ '.js') }}"></script>
 <script src="{{ asset('bundles/cmftreebrowser/js/jquery.cmf_context_menu.js') }}"></script>
 <script src="{{ asset('bundles/cmftreebrowser/js/jquery.cmf_tree.js') }}"></script>
-<script src="{{ asset('bundles/cmftreebrowser/js/jquery.autocomplete.js') }}"></script>
+<script src="{{ asset('bundles/cmftreebrowser/js/jquery.cmf_autocomplete.js') }}"></script>
 
 <link rel="stylesheet" href="{{ asset(assetsBasePath ~ '/fancytree/dist/skin-win8/ui.fancytree.min.css') }}" media="all"/>
 <link rel="stylesheet" href="{{ asset('bundles/cmftreebrowser/css/fontawesome-style.css') }}" media="all"/>

From 6adc016565240018c28ce195c7daa9954affdde7 Mon Sep 17 00:00:00 2001
From: WouterJ <waldio.webdesign@gmail.com>
Date: Mon, 11 May 2015 12:32:06 +0200
Subject: [PATCH 4/4] Added tests

---
 .../public/js/jquery.cmf_autocomplete.js      |  5 +-
 Tests/js/cmfAutoCompleteSpec.js               | 58 +++++++++++++++++++
 2 files changed, 61 insertions(+), 2 deletions(-)
 create mode 100644 Tests/js/cmfAutoCompleteSpec.js

diff --git a/Resources/public/js/jquery.cmf_autocomplete.js b/Resources/public/js/jquery.cmf_autocomplete.js
index 5bbafbf..93e5a49 100644
--- a/Resources/public/js/jquery.cmf_autocomplete.js
+++ b/Resources/public/js/jquery.cmf_autocomplete.js
@@ -24,7 +24,7 @@
              *
              * @return array
              */
-            data: function (path) { return []; },
+            data: function (path, next) { next([]); },
         }, options);
 
         var $input = $(this);
@@ -34,6 +34,7 @@
         // find datalist
         if (options.datalist_selector) {
             $autocompleteList = $(options.datalist_selector);
+            $(this).attr('list', options.datalist_selector);
         } else if ($(this).attr('list')) {
             $autocompleteList = $('#' + $(this).attr('list'));
         } else {
@@ -52,7 +53,7 @@
             }
 
             var path = $(this).val();
-            var base = path.substr(0, path.lastIndexOf('/') + 1); // get everything except the child
+            var base = path.substr(0, path.lastIndexOf('/')); // get everything except the child
 
             // skip if still in same node
             if (base === previousBase) {
diff --git a/Tests/js/cmfAutoCompleteSpec.js b/Tests/js/cmfAutoCompleteSpec.js
new file mode 100644
index 0000000..4f3ffeb
--- /dev/null
+++ b/Tests/js/cmfAutoCompleteSpec.js
@@ -0,0 +1,58 @@
+describe('The cmfAutoComplete plugin', function () {
+
+    beforeEach(function () {
+        setFixtures('<input type=text id=field list=suggestion-list><datalist id="suggestion-list"></datalist>');
+        this.$field = $('#field');
+        this.$list = $('#suggestion-list');
+    });
+
+    function type($field, value) {
+        $field.val(value);
+        $field.trigger('keyup');
+    }
+
+    it('has a constructor named cmfAutoComplete', function () {
+        expect(jQuery.fn.cmfAutoComplete).toBeDefined();
+    });
+
+    it('updates the datalist with possible elements', function () {
+        this.$field.cmfAutoComplete({
+            data: function (path, next) {
+                next(['some suggestion', 'another suggestion']);
+            }
+        });
+
+        type(this.$field, 'value');
+
+        expect(this.$list.find('option')).toHaveLength(2);
+    });
+
+    it('calls the data function with the base node', function () {
+        var spy = jasmine.createSpy('data');
+
+        this.$field.cmfAutoComplete({
+            data: spy
+        });
+
+        type(this.$field, '/cms/cont');
+        type(this.$field, '/cms/content/h');
+
+        expect(spy.calls.count()).toBe(2);
+        expect(spy.calls.argsFor(0)[0]).toBe('/cms');
+        expect(spy.calls.argsFor(1)[0]).toBe('/cms/content');
+    });
+
+    it('caches previous data', function () {
+        var spy = jasmine.createSpy('data');
+
+        this.$field.cmfAutoComplete({
+            data: spy
+        });
+
+        type(this.$field, '/cms/cont');
+        type(this.$field, '/cms/me');
+
+        expect(spy.calls.count()).toBe(1);
+    });
+
+});