Merge branch '2.0' of github.com:conestack/cone.app into 2.0

Author: lenadax

js/src/referencebrowser.js

@@ -13,6 +13,11 @@ export class ReferenceHandle {
         }
         let ol = ol_elem.data('overlay'),
             target = ol.ref_target;
+        // Skip binding if no ref_target is set. This allows other components
+        // to reuse the referencebrowser overlay with custom selection handling.
+        if (!target) {
+            return;
+        }
         $('a.addreference', context).each(function() {
             new AddReferenceHandle($(this), target, ol);
         });

js/src/scrollbar.js

@@ -46,10 +46,49 @@ export class Scrollbar extends ts.Motion {
         this.scroll_step = 50; // Scroll step in pixels
         new ts.Property(this, 'disabled', false);
 
-        ts.clock.schedule_frame(() => this.render());
-
         const is_mobile = $(window).width() <= 768; // bs5 small/medium breakpoint
         new ts.Property(this, 'is_mobile', is_mobile);
+
+        // Persist scroll position
+        this.persist_scroll = elem.data('persist-scroll') === true;
+        this._persist_key = elem.data('persist-scroll-key') || elem.attr('id') || null;
+        if (this.persist_scroll && this.storage_key) {
+            this._save_position = this._save_position.bind(this);
+            this.on('on_position', this._save_position);
+        }
+
+        ts.clock.schedule_frame(() => {
+            // Read saved position BEFORE render() triggers save handler
+            const saved = this.persist_scroll && this.storage_key
+                ? sessionStorage.getItem(this.storage_key)
+                : null;
+            this.render();
+            if (saved !== null) {
+                this.position = parseFloat(saved);
+            }
+        });
+    }
+
+    /**
+     * Returns the sessionStorage key for persisting scroll position.
+     * @returns {string|null}
+     */
+    get storage_key() {
+        if (!this._persist_key) {
+            return null;
+        }
+        return `cone.app.scroll.${this._persist_key}`;
+    }
+
+    /**
+     * Saves the current scroll position to sessionStorage.
+     * @param {Scrollbar} inst - The scrollbar instance (from event)
+     * @param {number} pos - The scroll position
+     */
+    _save_position(inst, pos) {
+        if (this.storage_key) {
+            sessionStorage.setItem(this.storage_key, pos);
+        }
     }
 
     /**
@@ -153,6 +192,9 @@ export class Scrollbar extends ts.Motion {
         if (this.fade_out_timeout) {
             clearTimeout(this.fade_out_timeout);
         }
+        if (this.persist_scroll && this._save_position) {
+            this.off('on_position', this._save_position);
+        }
         this.unbind();
         this.elem.removeData('scrollbar');
     }

js/tests/test_referencebrowser.js

@@ -35,6 +35,24 @@ QUnit.module('cone.app.referencebrowser.ReferenceHandle', hooks => {
         assert.ok(true, 'no error without modal parent');
     });
 
+    QUnit.test('ReferenceHandle.initialize returns early without ref_target',
+        assert => {
+        // This allows other components (e.g. catalog item picker) to reuse
+        // the referencebrowser overlay with custom selection handling.
+        let modal = $('<div class="modal" />').appendTo(container);
+        let context = $('<div class="modal-body" />').appendTo(modal);
+        let link = $('<a class="addreference" id="ref-123" />').appendTo(context);
+
+        let overlay = {elem: modal};  // no ref_target
+        modal.data('overlay', overlay);
+
+        ReferenceHandle.initialize(context);
+
+        let events = $._data(link.get(0), 'events');
+        assert.notOk(events && events.click,
+            'no click handler bound when ref_target missing');
+    });
+
     QUnit.test('ReferenceHandle constructor stores properties', assert => {
         let elem = $('<a />');
         let target = $('<input />');

js/tests/test_scrollbar.js

@@ -386,3 +386,213 @@ QUnit.module('cone.app.scrollbar.ScrollbarX', hooks => {
         scrollbar.destroy();
     });
 });
+
+QUnit.module('cone.app.scrollbar.persist', hooks => {
+
+    let container;
+
+    hooks.beforeEach(() => {
+        container = $('<div />').appendTo('body');
+        sessionStorage.clear();
+    });
+
+    hooks.afterEach(() => {
+        container.remove();
+        sessionStorage.clear();
+    });
+
+    QUnit.test('persist_scroll defaults to false', assert => {
+        let elem = $(`
+            <div class="scrollable-y">
+                <div class="scrollable-content" style="height: 500px;"></div>
+            </div>
+        `).css({height: '200px', position: 'relative'}).appendTo(container);
+
+        let scrollbar = new ScrollbarY(elem);
+
+        assert.strictEqual(scrollbar.persist_scroll, false, 'persist_scroll is false by default');
+
+        scrollbar.destroy();
+    });
+
+    QUnit.test('persist_scroll reads from data attribute', assert => {
+        let elem = $(`
+            <div class="scrollable-y" data-persist-scroll="true">
+                <div class="scrollable-content" style="height: 500px;"></div>
+            </div>
+        `).css({height: '200px', position: 'relative'}).appendTo(container);
+
+        let scrollbar = new ScrollbarY(elem);
+
+        assert.strictEqual(scrollbar.persist_scroll, true, 'persist_scroll reads data attribute');
+
+        scrollbar.destroy();
+    });
+
+    QUnit.test('storage_key uses element id', assert => {
+        let elem = $(`
+            <div id="test_scrollbar" class="scrollable-y" data-persist-scroll="true">
+                <div class="scrollable-content" style="height: 500px;"></div>
+            </div>
+        `).css({height: '200px', position: 'relative'}).appendTo(container);
+
+        let scrollbar = new ScrollbarY(elem);
+
+        assert.strictEqual(scrollbar.storage_key, 'cone.app.scroll.test_scrollbar', 'storage_key uses id');
+
+        scrollbar.destroy();
+    });
+
+    QUnit.test('storage_key uses custom key from data attribute', assert => {
+        let elem = $(`
+            <div id="test_scrollbar" class="scrollable-y"
+                 data-persist-scroll="true"
+                 data-persist-scroll-key="custom_key">
+                <div class="scrollable-content" style="height: 500px;"></div>
+            </div>
+        `).css({height: '200px', position: 'relative'}).appendTo(container);
+
+        let scrollbar = new ScrollbarY(elem);
+
+        assert.strictEqual(scrollbar.storage_key, 'cone.app.scroll.custom_key', 'storage_key uses custom key');
+
+        scrollbar.destroy();
+    });
+
+    QUnit.test('storage_key is null without id or custom key', assert => {
+        let elem = $(`
+            <div class="scrollable-y" data-persist-scroll="true">
+                <div class="scrollable-content" style="height: 500px;"></div>
+            </div>
+        `).css({height: '200px', position: 'relative'}).appendTo(container);
+
+        let scrollbar = new ScrollbarY(elem);
+
+        assert.strictEqual(scrollbar.storage_key, null, 'storage_key is null without id');
+
+        scrollbar.destroy();
+    });
+
+    QUnit.test('position is saved to sessionStorage on scroll', assert => {
+        let done = assert.async();
+        let elem = $(`
+            <div id="persist_test" class="scrollable-y" data-persist-scroll="true">
+                <div class="scrollable-content" style="height: 500px;"></div>
+            </div>
+        `).css({height: '200px', position: 'relative'}).appendTo(container);
+
+        let scrollbar = new ScrollbarY(elem);
+        scrollbar.position = 100;
+
+        // Allow event to fire
+        setTimeout(() => {
+            let saved = sessionStorage.getItem('cone.app.scroll.persist_test');
+            assert.strictEqual(saved, '100', 'position saved to sessionStorage');
+            scrollbar.destroy();
+            done();
+        }, 50);
+    });
+
+    QUnit.test('position is restored from sessionStorage', assert => {
+        let done = assert.async();
+        sessionStorage.setItem('cone.app.scroll.restore_test', '150');
+
+        let elem = $(`
+            <div id="restore_test" class="scrollable-y" data-persist-scroll="true">
+                <div class="scrollable-content" style="height: 500px;"></div>
+            </div>
+        `).css({height: '200px', position: 'relative'}).appendTo(container);
+
+        let scrollbar = new ScrollbarY(elem);
+
+        setTimeout(() => {
+            assert.strictEqual(scrollbar.position, 150, 'position restored from sessionStorage');
+            scrollbar.destroy();
+            done();
+        }, 100);
+    });
+
+    QUnit.test('restored position is clamped when content shrinks', assert => {
+        let done = assert.async();
+        // Save a position that will be too large
+        sessionStorage.setItem('cone.app.scroll.clamp_test', '500');
+
+        let elem = $(`
+            <div id="clamp_test" class="scrollable-y" data-persist-scroll="true">
+                <div class="scrollable-content" style="height: 300px;"></div>
+            </div>
+        `).css({height: '200px', position: 'relative'}).appendTo(container);
+
+        let scrollbar = new ScrollbarY(elem);
+
+        // max_pos = 300 - 200 = 100
+        setTimeout(() => {
+            assert.strictEqual(scrollbar.position, 100, 'position clamped to max');
+            scrollbar.destroy();
+            done();
+        }, 100);
+    });
+
+    QUnit.test('position not saved when persist_scroll is false', assert => {
+        let elem = $(`
+            <div id="no_persist" class="scrollable-y">
+                <div class="scrollable-content" style="height: 500px;"></div>
+            </div>
+        `).css({height: '200px', position: 'relative'}).appendTo(container);
+
+        let scrollbar = new ScrollbarY(elem);
+        scrollbar.position = 100;
+
+        let saved = sessionStorage.getItem('cone.app.scroll.no_persist');
+        assert.strictEqual(saved, null, 'position not saved when persist disabled');
+
+        scrollbar.destroy();
+    });
+
+    QUnit.test('position not saved without storage_key', assert => {
+        let elem = $(`
+            <div class="scrollable-y" data-persist-scroll="true">
+                <div class="scrollable-content" style="height: 500px;"></div>
+            </div>
+        `).css({height: '200px', position: 'relative'}).appendTo(container);
+
+        let scrollbar = new ScrollbarY(elem);
+        scrollbar.position = 100;
+
+        // No key to check, but should not throw
+        assert.ok(true, 'no error when no storage_key');
+
+        scrollbar.destroy();
+    });
+
+    QUnit.test('destroy removes position listener', assert => {
+        let done = assert.async();
+        let elem = $(`
+            <div id="destroy_test" class="scrollable-y" data-persist-scroll="true">
+                <div class="scrollable-content" style="height: 500px;"></div>
+            </div>
+        `).css({height: '200px', position: 'relative'}).appendTo(container);
+
+        let scrollbar = new ScrollbarY(elem);
+        scrollbar.destroy();
+
+        sessionStorage.removeItem('cone.app.scroll.destroy_test');
+
+        // Create new scrollbar on same elem to test position change
+        let elem2 = $(`
+            <div id="destroy_test2" class="scrollable-y">
+                <div class="scrollable-content" style="height: 500px;"></div>
+            </div>
+        `).css({height: '200px', position: 'relative'}).appendTo(container);
+
+        let scrollbar2 = new ScrollbarY(elem2);
+        scrollbar2.position = 200;
+
+        setTimeout(() => {
+            let saved = sessionStorage.getItem('cone.app.scroll.destroy_test');
+            assert.strictEqual(saved, null, 'destroyed scrollbar does not save');
+            scrollbar2.destroy();
+            done();
+        }, 50);
+    });
+});

src/cone/app/browser/static/cone/cone.app.js

@@ -438,6 +438,9 @@ var cone = (function (exports, $, ts) {
             }
             let ol = ol_elem.data('overlay'),
                 target = ol.ref_target;
+            if (!target) {
+                return;
+            }
             $('a.addreference', context).each(function() {
                 new AddReferenceHandle($(this), target, ol);
             });
@@ -768,9 +771,42 @@ var cone = (function (exports, $, ts) {
             this.position = 0;
             this.scroll_step = 50;
             new ts.Property(this, 'disabled', false);
-            ts.clock.schedule_frame(() => this.render());
             const is_mobile = $(window).width() <= 768;
             new ts.Property(this, 'is_mobile', is_mobile);
+            this.persist_scroll = elem.data('persist-scroll') === true;
+            this._persist_key = elem.data('persist-scroll-key') || elem.attr('id') || null;
+            if (this.persist_scroll && this.storage_key) {
+                this._save_position = this._save_position.bind(this);
+                this.on('on_position', this._save_position);
+            }
+            ts.clock.schedule_frame(() => {
+                const saved_position = this._get_saved_position();
+                this.render();
+                this._restore_position(saved_position);
+            });
+        }
+        get storage_key() {
+            if (!this._persist_key) {
+                return null;
+            }
+            return `cone.app.scroll.${this._persist_key}`;
+        }
+        _save_position(inst, pos) {
+            if (this.storage_key) {
+                sessionStorage.setItem(this.storage_key, pos);
+            }
+        }
+        _get_saved_position() {
+            if (!this.persist_scroll || !this.storage_key) {
+                return null;
+            }
+            const saved = sessionStorage.getItem(this.storage_key);
+            return saved !== null ? parseFloat(saved) : null;
+        }
+        _restore_position(saved_position) {
+            if (saved_position !== null) {
+                this.position = saved_position;
+            }
         }
         on_window_resize(evt) {
             this.is_mobile = $(window).innerWidth() <= 768;
@@ -827,6 +863,9 @@ var cone = (function (exports, $, ts) {
             if (this.fade_out_timeout) {
                 clearTimeout(this.fade_out_timeout);
             }
+            if (this.persist_scroll && this._save_position) {
+                this.off('on_position', this._save_position);
+            }
             this.unbind();
             this.elem.removeData('scrollbar');
         }

src/cone/app/browser/static/cone/cone.app.min.js

@@ -107,7 +107,9 @@
                 </tal:controls>
               </div>
 
-              <div class="sidebar-content scrollable-y scrollbar-left">
+              <div class="sidebar-content scrollable-y scrollbar-left"
+                   data-persist-scroll="true"
+                   data-persist-scroll-key="sidebar-left">
                 <div class="scrollable-content px-2">
                   <ul class="sidebar-tiles nav nav-pills flex-nowrap flex-column mb-auto">
 
@@ -178,7 +180,9 @@
                 </tal:controls>
               </div>
 
-              <div class="sidebar-content scrollable-y scrollbar-right h-100">
+              <div class="sidebar-content scrollable-y scrollbar-right h-100"
+                   data-persist-scroll="true"
+                   data-persist-scroll-key="sidebar-right">
                 <div class="sidebar-tiles scrollable-content px-2">
                   <tal:tiles repeat="tilename config.sidebar_right">
                     <div class="tile"