Add ability to define different widget layouts for different screen sizes

.github/workflows/tests.yml

@@ -157,7 +157,7 @@ jobs:
             curl "http://localhost:8983/solr/admin/cores?action=RELOAD&core=tester"
           fi
           python manage.py collectstatic -v 0 -c --noinput
-          coverage run -a --branch --source wirecloud --omit="*/wirecloud/semanticwiring/*,*/wirecloud/guidebuilder/*,*/tests/*,*/tests.py,*/wirecloud/commons/utils/template/*" manage.py test --noinput --nologcapture -v 2 -a tags='wirecloud-search-api'
+          coverage run -a --branch --source wirecloud --omit="*/wirecloud/semanticwiring/*,*/wirecloud/guidebuilder/*,*/tests/*,*/tests.py,*/wirecloud/commons/utils/template/*,*/wirecloud/platform/workspace/*,*/wirecloud/platform/iwidget/*" manage.py test --noinput --nologcapture -v 2 -a tags='wirecloud-search-api'
       - name: Coveralls Parallel
         uses: AndreMiras/coveralls-python-action@develop
         with:

src/GruntFile.js

@@ -150,7 +150,7 @@ var WirecloudFiles = [
     'wirecloud/platform/static/js/wirecloud/ui/WorkspaceTabView.js',
     'wirecloud/platform/static/js/wirecloud/ui/WorkspaceTabViewDragboard.js',
     'wirecloud/platform/static/js/wirecloud/ui/SharingWindowMenu.js',
-
+    'wirecloud/platform/static/js/wirecloud/ui/ScreenSizesInputInterface.js',
     'wirecloud/platform/static/js/wirecloud/DragboardPosition.js',
     'wirecloud/platform/static/js/wirecloud/ui/DragboardCursor.js',
     'wirecloud/platform/static/js/wirecloud/ui/MultiValuedSize.js',

src/js_tests/styledelements/AlertSpec.js

@@ -43,6 +43,23 @@
                 expect(element.body).toEqual(jasmine.any(se.Container));
             });
 
+            it("should allow changing the message", () => {
+                const element = new se.Alert();
+                element.setMessage("New message");
+
+                expect(element.body.wrapperElement.textContent).toEqual("New message");
+            });
+
+            it("should allow to show and hide the alert", () => {
+                const element = new se.Alert();
+                element.hide();
+
+                expect(element.wrapperElement.style.display).toEqual("none");
+
+                element.show();
+                expect(element.wrapperElement.style.display).toEqual("");
+            });
+
         });
 
     });

src/js_tests/styledelements/NotebookSpec.js

@@ -468,32 +468,32 @@
 
         });
 
-        describe("addButton(button, position)", function () {
+        describe("addToEastSection(elem, position)", function () {
             let element;
 
             beforeEach(function () {
                 element = new StyledElements.Notebook();
             });
 
             it("throws an exception if button is not a button", function () {
-                expect(function () {element.addButton(null);}).toThrow(jasmine.any(TypeError));
+                expect(function () {element.addToEastSection(null);}).toThrow(jasmine.any(TypeError));
             });
 
             it("place buttons on the right by default", function () {
                 const button = new StyledElements.Button();
-                element.addButton(button);
+                element.addToEastSection(button);
                 expect(element.tabWrapper.east.children).toEqual([element.moveRightButton, button]);
             });
 
             it("place buttons on the right by default", function () {
                 const button = new StyledElements.Button();
-                element.addButton(button, 'right');
+                element.addToEastSection(button, 'right');
                 expect(element.tabWrapper.east.children).toEqual([element.moveRightButton, button]);
             });
 
             it("should allow to add buttons on the left side", function () {
                 const button = new StyledElements.Button();
-                element.addButton(button, 'left');
+                element.addToEastSection(button, 'left');
                 expect(element.tabWrapper.west.children).toEqual([button, element.moveLeftButton]);
             });
         });

src/js_tests/wirecloud/WidgetSpec.js

@@ -238,6 +238,61 @@
     };
     Object.freeze(WIDGET_META_PREFS);
 
+    const WIDGET_LAYOUT_CONFIGS = [{
+        id: 0,
+        moreOrEqual: 0,
+        lessOrEqual: 800,
+        anchor: 'top-left',
+        relx: true,
+        rely: true,
+        left: 0,
+        top: 0,
+        zIndex: 0,
+        relheight: true,
+        relwidth: true,
+        height: 1,
+        width: 1,
+        minimized: false,
+        fulldragboard: false,
+        titlevisible: true
+    }, {
+        id: 1,
+        moreOrEqual: 801,
+        lessOrEqual: 999,
+        anchor: 'top-right',
+        relx: true,
+        rely: true,
+        left: 1,
+        top: 0,
+        zIndex: 1,
+        relheight: true,
+        relwidth: true,
+        height: 2,
+        width: 1,
+        minimized: false,
+        fulldragboard: true,
+        titlevisible: true
+    },
+    {
+        id: 2,
+        moreOrEqual: 1000,
+        lessOrEqual: -1,
+        anchor: 'top-left',
+        relx: true,
+        rely: true,
+        left: 0,
+        top: 0,
+        zIndex: 0,
+        relheight: true,
+        relwidth: true,
+        height: 1,
+        width: 1,
+        minimized: false,
+        fulldragboard: false,
+        titlevisible: true
+    }];
+    Object.freeze(WIDGET_LAYOUT_CONFIGS);
+
     describe("Wirecloud.Widget", function () {
 
         beforeAll(() => {
@@ -1764,13 +1819,19 @@
             it("updates titlevisible property", (done) => {
                 const widget = new Wirecloud.Widget(LOCKED_WORKSPACE_TAB, EMPTY_WIDGET_META, {
                     id: "1",
-                    titlevisible: false
+                    layoutConfigurations: [{
+                        titlevisible: false,
+                        id: 0,
+                        moreOrEqual: 0,
+                        lessOrEqual: -1
+                    }]
                 });
                 spyOn(Wirecloud.io, "makeRequest");
                 expect(widget.titlevisible).toBe(false);
 
                 const p = widget.setTitleVisibility(true, false);
                 expect(widget.titlevisible).toBe(true);
+                expect(widget.currentLayoutConfig.titlevisible).toBe(true);
                 expect(Wirecloud.io.makeRequest).not.toHaveBeenCalled();
                 p.then(
                     (value) => {
@@ -1785,7 +1846,12 @@
             it("updates titlevisible property on the server", (done) => {
                 const widget = new Wirecloud.Widget(LOCKED_WORKSPACE_TAB, EMPTY_WIDGET_META, {
                     id: "1",
-                    titlevisible: false
+                    layoutConfigurations: [{
+                        titlevisible: false,
+                        id: 0,
+                        moreOrEqual: 0,
+                        lessOrEqual: -1
+                    }]
                 });
                 spyOn(Wirecloud.io, "makeRequest").and.callFake(function (url, options) {
                     expect(options.method).toEqual("POST");
@@ -1796,6 +1862,7 @@
                     });
                 });
                 expect(widget.titlevisible).toBe(false);
+                expect(widget.currentLayoutConfig.titlevisible).toBe(false);
 
                 const p = widget.setTitleVisibility(true, true);
                 p.then(
@@ -2239,6 +2306,166 @@
 
         });
 
+        describe("updateWindowSize(windowSize)", () => {
+
+            it("should update the widget information accordingly", () => {
+
+                // Force window size to 800
+                Object.defineProperty(window, 'innerWidth', {
+                    writable: true,
+                    configurable: true,
+                    value: 750
+                });
+
+                const widget = new Wirecloud.Widget(WORKSPACE_TAB, EMPTY_WIDGET_META, {
+                    id: "1",
+                    layoutConfigurations: WIDGET_LAYOUT_CONFIGS
+                });
+
+                expect(widget.layoutConfigurations).toBe(WIDGET_LAYOUT_CONFIGS);
+
+                expect(widget.updateWindowSize(800)).toBe(false);
+                expect(widget.updateWindowSize(900)).toBe(true);
+
+                expect(widget.currentLayoutConfig).toBe(widget.layoutConfigurations[1]);
+
+                expect(widget.fulldragboard).toBe(true);
+                expect(widget.position.z).toBe(1);
+                expect(widget.shape.height).toBe(2);
+
+                expect(widget.updateWindowSize(800)).toBe(true);
+
+                expect(widget.currentLayoutConfig).toBe(widget.layoutConfigurations[0]);
+
+                expect(widget.fulldragboard).toBe(false);
+                expect(widget.position.z).toBe(0);
+                expect(widget.shape.height).toBe(1);
+
+            });
+
+        });
+
+        describe("setLayoutPosition(layoutPosition)", () => {
+
+            it("should update the current layout position accordingly", () => {
+
+                const widget = new Wirecloud.Widget(WORKSPACE_TAB, EMPTY_WIDGET_META, {
+                    id: "1",
+                    layoutConfigurations: WIDGET_LAYOUT_CONFIGS
+                });
+
+                expect(widget.setLayoutPosition({
+                    anchor: 'top-left',
+                    relx: false,
+                    rely: true,
+                    x: 1,
+                    y: 0,
+                    z: 0
+                })).toBe(widget);
+
+                expect(widget.currentLayoutConfig.left).toBe(1);
+                expect(widget.currentLayoutConfig.relx).toBe(false);
+
+                expect(widget.position.x).toBe(0);
+                expect(widget.position.relx).toBe(true);
+
+            });
+
+        });
+
+        describe("setLayoutShape(layoutShape)", () => {
+
+            it("should update the current layout shape accordingly", () => {
+
+                const widget = new Wirecloud.Widget(WORKSPACE_TAB, EMPTY_WIDGET_META, {
+                    id: "1",
+                    layoutConfigurations: WIDGET_LAYOUT_CONFIGS
+                });
+
+                expect(widget.setLayoutShape({
+                    relwidth: false,
+                    relheight: true,
+                    width: 1,
+                    height: 2
+                })).toBe(widget);
+
+                expect(widget.currentLayoutConfig.height).toBe(2);
+                expect(widget.currentLayoutConfig.relwidth).toBe(false);
+
+                expect(widget.shape.height).toBe(1);
+                expect(widget.shape.relwidth).toBe(true);
+
+            });
+
+        });
+
+        describe("setLayoutIndex(index)", () => {
+
+            it("should update the layout accordingly", () => {
+
+                const widget = new Wirecloud.Widget(WORKSPACE_TAB, EMPTY_WIDGET_META, {
+                    id: "1",
+                    layoutConfigurations: WIDGET_LAYOUT_CONFIGS
+                });
+
+                expect(widget.setLayoutIndex(3)).toBe(widget);
+                expect(widget.layout).toBe(3);
+
+                widget.setLayoutIndex(1);
+                expect(widget.layout).toBe(1);
+            });
+
+        });
+
+        describe("setLayoutFulldragboard(fulldragboard)", () => {
+
+            it("should update the fulldragboard property of the layout accordingly", () => {
+
+                const widget = new Wirecloud.Widget(WORKSPACE_TAB, EMPTY_WIDGET_META, {
+                    id: "1",
+                    layoutConfigurations: WIDGET_LAYOUT_CONFIGS
+                });
+
+                expect(widget.setLayoutFulldragboard(true)).toBe(widget);
+                expect(widget.currentLayoutConfig.fulldragboard).toBe(true);
+                expect(widget.fulldragboard).toBe(false);
+            });
+
+        });
+
+        describe("setLayoutMinimizedStatus(minimized)", () => {
+
+            it("should update the minimized property of the layout accordingly", () => {
+
+                const widget = new Wirecloud.Widget(WORKSPACE_TAB, EMPTY_WIDGET_META, {
+                    id: "1",
+                    layoutConfigurations: WIDGET_LAYOUT_CONFIGS
+                });
+
+                expect(widget.setLayoutMinimizedStatus(true)).toBe(widget);
+                expect(widget.minimized).toBe(widget.currentLayoutConfig.minimized);
+                expect(widget.currentLayoutConfig.minimized).toBe(true);
+            });
+
+        });
+
+        describe("getLayoutConfigBySize(size)", () => {
+
+            it("should return the layout configuration that fits the given size", () => {
+
+                const widget = new Wirecloud.Widget(WORKSPACE_TAB, EMPTY_WIDGET_META, {
+                    id: "1",
+                    layoutConfigurations: WIDGET_LAYOUT_CONFIGS
+                });
+
+                expect(widget.getLayoutConfigBySize(800)).toBe(widget.layoutConfigurations[0]);
+                expect(widget.getLayoutConfigBySize(900)).toBe(widget.layoutConfigurations[1]);
+                expect(widget.getLayoutConfigBySize(1000)).toBe(widget.layoutConfigurations[2]);
+
+            });
+
+        });
+
     });
 
 })();

src/js_tests/wirecloud/ui/ColumnLayoutSpec.js

@@ -290,7 +290,7 @@
 
         });
 
-        describe("adaptColumnOffset(size)", () => {
+        describe("adaptColumnOffset(size[, width])", () => {
 
             it("should return 0 LU as minimum", () => {
                 const layout = new ns.ColumnLayout({leftMargin: 4}, 4, 13, 4, 4, 10);
@@ -310,7 +310,7 @@
 
                 const value = layout.adaptColumnOffset("2px");
 
-                expect(layout.fromPixelsToHCells).toHaveBeenCalledWith(0);
+                expect(layout.fromPixelsToHCells).toHaveBeenCalledWith(0, undefined);
                 expect(value.inPixels).toBe(0);
                 expect(value.inLU).toBe(0);
             });
@@ -323,7 +323,7 @@
 
                 const value = layout.adaptColumnOffset("204px");
 
-                expect(layout.fromPixelsToHCells).toHaveBeenCalledWith(200);
+                expect(layout.fromPixelsToHCells).toHaveBeenCalledWith(200, undefined);
                 expect(value.inPixels).toBe(200);
                 expect(value.inLU).toBe(1);
             });
@@ -563,7 +563,7 @@
 
         });
 
-        describe("getColumnOffset(cells[, css])", () => {
+        describe("getColumnOffset(cells[, width, css])", () => {
 
             it("should work", () => {
                 const dragboard = {
@@ -579,7 +579,7 @@
                     10
                 );
                 expect(layout.getColumnOffset({x: 2})).toBe(400 + 4 + 2);
-                expect(layout.getColumnOffset({x: 2}, true)).toBe("406px");
+                expect(layout.getColumnOffset({x: 2}, undefined, true)).toBe("406px");
             });
 
         });