https://www.mot.be/assets/blocks/core/scripts/elements/resizer.js?etag=LygHa0LJ4IP

1/*
2 * Copyright (c) 2024 Republic of Reinvention BV <[email protected]>. All Rights Reserved.
3 * This file is part of project "cinematek-filmout-site" and can not be copied and/or distributed without
4 * the express permission and written consent of the legal responsible of Republic of Reinvention BV.
5 */
6
7/*
8 * A resizer that sits between two columns and can be dragged left and right to resize those columns.
9 * It is created and lives inside row objects.
10 */
11base.pluginAsync("blocks.core.elements.Resizer",
12    [
13        "base.core.Class",
14        "constants.blocks.core",
15        "messages.blocks.core",
16        "blocks.core.UI",
17        "blocks.core.elements.Page",
18        "blocks.core.elements.Surface",
19        "blocks.core.elements.Row",
20    ],
21    function (Class, BlocksConstants, BlocksMessages, UI, Page, Surface, Row)
22    {
23        var Resizer = this;
24
25        //----CLASSES-----
26        var tempWidth = 6;
27        this.Class = Class.create(Surface.Class, {
28
29            //-----STATICS-----
30            STATIC: {
31                WIDTH: tempWidth,
32                HALF_WIDTH: Math.floor(tempWidth / 2.0),
33            },
34
35            //-----CONSTANTS-----
36
37            //-----VARIABLES-----
38            //the horizontal center of this resizer, for easy recalculations
39            center: undefined,
40            //a pointer to the left column-surface
41            leftColumn: undefined,
42            //a pointer to the right column-surface
43            rightColumn: undefined,
44
45            //-----CONSTRUCTORS-----
46            constructor: function (leftColumn, rightColumn)
47            {
48                Resizer.Class.Super.call(this);
49
50                this.leftColumn = leftColumn;
51                this.rightColumn = rightColumn;
52
53                this.overlay = this._createOverlay(UI.resizerWrapper);
54            },
55
56            //-----PUBLIC METHODS-----
57            /**
58             * Override the parent function to really move the columns during preview (when the mouse is still down)
59             * instead of during mouse release.
60             *
61             * @param hoveredSurface The surface we're currently hovering on
62             * @param vector The dragging vector
63             * @param stats The dragging vector statistics
64             */
65            previewMoveTo: function (hoveredSurface, vector, stats)
66            {
67                //the number of horizontal pixels we've dragged from the center of the resizer
68                var offsetPx = vector.x1 - this.center;
69                //right is +1, left is -1
70                var side = Math.sign(offsetPx);
71                //now we've stored the sign, cut it off
72                offsetPx = Math.abs(offsetPx);
73
74                //Logger.info(offsetPx+', '+vector.x1+', '+this.center);
75
76                var row = this.leftColumn._getParent(Row.Class);
77                //the width of one column in pixels in the parent row
78                var oneColPx = row.realWidth() / Row.Class.MAX_COLS;
79
80                //The 'distance' we've dragged away from the center of the resizer,
81                //expressed in columns. This will usually be in the [0-1] range,
82                //because we move the resizer when nearing 1
83                var colOffset = offsetPx / oneColPx;
84
85                //note that using 0.75 (instead of 1.0) make the snapping feel more
86                //natural when moving the mouse faster
87                if (colOffset > 0.75) {
88                    var newLeftCols = this.leftColumn.columnWidth + side;
89                    var newRightCols = this.rightColumn.columnWidth - side;
90
91                    //make sure we don't create zero-width columns
92                    if (Math.min(newLeftCols, newRightCols) > 0) {
93
94                        //note: these don't automatically refresh; see remark below
95                        this.leftColumn.setColumnWidth(newLeftCols);
96                        this.rightColumn.setColumnWidth(newRightCols);
97
98                        //Force a deep refresh on the entire page because the height of the entire page can change when
99                        //a columns gets resized.
100                        //Also note that this needs to happen _after_ both updates are done, because the one pushes
101                        //forward and the other needs to make room for the first to change width
102                        this.leftColumn._getParent(Page.Class)._refresh(true);
103                    }
104                }
105            },
106
107            //-----PRIVATE METHODS-----
108            _getType: function ()
109            {
110                return 'resizer';
111            },
112            _getName: function ()
113            {
114                return BlocksMessages.surfaceResizerName;
115            },
116            _refresh: function (deep)
117            {
118                if (this.leftColumn && this.rightColumn) {
119
120                    //this is a rare situation where a parent surface (this resizer is a child of the parent row,
121                    // so is this resizer, so it's actually a sibling of the columns, but hey...)
122                    // depends on the bounds of it's children and not the other way around, so make sure
123                    // they are refreshed before we re-build the bounds of this resizer
124                    this.leftColumn._refresh();
125                    this.rightColumn._refresh();
126
127                    this.top = Math.min(this.leftColumn.top, this.rightColumn.top);
128                    this.bottom = Math.max(this.leftColumn.bottom, this.rightColumn.bottom);
129
130                    //important: don't use the right of the columns, since they seem to subtract the
131                    //margin between two columns and don't return absolute bounds
132                    this.left = this.rightColumn.left - Resizer.Class.HALF_WIDTH;
133                    this.right = this.left + Resizer.Class.WIDTH;
134
135                    //extra variable for easy deciding sidies
136                    this.center = this.left + Resizer.Class.HALF_WIDTH;
137                }
138
139                this._redrawOverlay();
140            },
141        });
142    }
143);