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

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 bootstrap row element
9 */
10base.pluginAsync("blocks.core.elements.Row",
11    [
12        "base.core.Class",
13        "constants.blocks.core",
14        "messages.blocks.core",
15        "blocks.core.elements.Surface",
16        "blocks.core.elements.Column",
17        "blocks.core.elements.Resizer",
18    ],
19    function (Class, BlocksConstants, BlocksMessages, Surface, Column, Resizer)
20    {
21        var Row = this;
22
23        //----CLASSES-----
24        this.Class = Class.create(Surface.Class, {
25
26            //-----STATICS-----
27            STATIC: {
28
29                MIN_COLS: 1,
30                MAX_COLS: 12,
31
32                createElement: function (tagName)
33                {
34                    return $('<' + (tagName ? tagName : Surface.Class.DEFAULT_TAG) + ' class="' + BlocksConstants.ROW_CLASS + '" />');
35                },
36            },
37
38            //-----CONSTANTS-----
39
40            //-----VARIABLES-----
41            //an array with references to the resizers of the columns in this row
42            resizers: undefined,
43
44            //-----CONSTRUCTORS-----
45            constructor: function (parentSurface, element)
46            {
47                Row.Class.Super.call(this, parentSurface, element);
48
49                this.resizers = [];
50            },
51
52            //-----PUBLIC METHODS-----
53
54            //-----PRIVATE METHODS-----
55            _getType: function ()
56            {
57                return 'row';
58            },
59            _getName: function ()
60            {
61                return BlocksMessages.surfaceRowName;
62            },
63            _newChildInstance: function (element)
64            {
65                var retVal = new Column.Class(this, element);
66
67                // if the new child has a previous column, put a resize handle between them
68                // Note that we can only layout the width of a column when we're inside a boundary
69                if (retVal.index > 0 && this.getBoundary()) {
70                    this.resizers.push(new Resizer.Class(this.children[retVal.index - 1], retVal));
71                }
72
73                return retVal;
74            },
75            _isAcceptableChild: function (element)
76            {
77                return Surface.Class.isColumnEl(element);
78            },
79            _getChildOrientation: function ()
80            {
81                return Surface.Class.ORIENTATION.HORIZONTAL;
82            },
83            _refresh: function (deep)
84            {
85                Row.Class.Super.prototype._refresh.call(this, deep);
86
87                //Next to refreshing this row, we also need to refresh the resizers
88                //Note: this will be called while dragging around the resizer,
89                //so make sure we don't rebuild the resizers here, just refresh their bounds.
90                for (var i = 0; i < this.resizers.length; i++) {
91                    this.resizers[i]._refresh(deep);
92                }
93            },
94            /**
95             * Clears and re-initialize the resizers of all columns in this row
96             */
97            _updateResizers: function ()
98            {
99                this._clearResizers();
100
101                // we can only layout the width of a column when we're inside a boundary
102                if (this.getBoundary()) {
103                    //note: we start at index 1
104                    for (var i = 1; i < this.children.length; i++) {
105                        var newResizer = new Resizer.Class(this.children[i - 1], this.children[i]);
106                        newResizer._refresh();
107                        this.resizers.push(newResizer);
108                    }
109                }
110            },
111            /**
112             * Remove all resizer overlays and clear the backing array
113             */
114            _clearResizers: function ()
115            {
116                // we should only delete our own resizers
117                if (this.resizers) {
118                    for (var i = 0; i < this.resizers.length; i++) {
119                        this.resizers[i].overlay.remove();
120                    }
121                }
122
123                this.resizers = [];
124            },
125            /**
126             * Overloads the parent surface function to re-distribute the columns in this row when one is removed
127             */
128            _removeChild: function (surface)
129            {
130                Row.Class.Super.prototype._removeChild.call(this, surface);
131
132                // re-distribute the extra space over the existing columns
133                //note that the isColumn() is needed because when dropping new blocks, they sometimes
134                //end up in a row first before they are moved to their final destination.
135                if (this.children.length > 0 && surface.isColumn()) {
136
137                    // Instead of relying that the extra width is embedded in the surface,
138                    // we excplicitly recalculate the widths of the remaining cols, just to
139                    // make sure the extra widths are in sync with the remaining cols.
140                    //var extraWidth = surface.columnWidth;
141                    var extraWidth = Row.Class.MAX_COLS - this._calcTotalColWidth();
142
143                    var extraWidthPerCol = Math.floor(extraWidth / this.children.length);
144                    var extraWidthRounding = extraWidth - (extraWidthPerCol * this.children.length);
145
146                    for (var i = 0; i < this.children.length; i++) {
147                        this.children[i].setColumnWidth(this.children[i].columnWidth + extraWidthPerCol + (i === 0 ? extraWidthRounding : 0));
148                    }
149                }
150
151                this._updateResizers();
152            },
153            /**
154             * Overloads the parent surface function to simplify the row-in-col12-in-row situation.
155             *
156             * @param deep
157             * @private
158             */
159            _simplify: function (deep)
160            {
161                var retVal = false;

162
163                // if we're not inside a boundary, we're not permitted to change anything or we'd alter outside the layout blocks
164                if (this.hasBoundary()) {
165                    // this row has one child and it's a column of maximum width
166                    if (this.children.length === 1 && this.children[0].isColumn() && this.children[0].columnWidth === Row.Class.MAX_COLS) {
167
168                        var fullWidthCol = this.children[0];
169
170                        // and that column has only one child: a row
171                        if (fullWidthCol.children.length === 1 && fullWidthCol.children[0].isRow()) {
172
173                            // detach that column from this row
174                            this._removeChild(fullWidthCol);
175
176                            // move all cols in the single row to this row
177                            var rowToEliminate = fullWidthCol.children[0];
178
179                            // get rid of the resizers
180                            rowToEliminate._clearResizers();
181
182                            // Note that we need to keep all sizes of the column children intact
183                            for (var i = 0; i < rowToEliminate.children.length; i++) {
184                                // note: don't call _removeChild() on rowToEliminate because it
185                                // updates the col size. The row will be eliminated anyway
186                                this._addChild(rowToEliminate.children[i]);
187                            }
188
189                            // introduce resizers between the moved cols
190                            this._updateResizers();
191
192                            retVal = true;
193                        }
194                    }
195                }
196
197                //now call the superclass function to iterate the children
198                retVal = Row.Class.Super.prototype._simplify.call(this, deep) || retVal;
199
200                return retVal;
201            },
202            /**
203             * Iterate the existing columns and sum their col widths
204             */
205            _calcTotalColWidth: function ()
206            {
207                var retVal = 0;
208
209                for (var i = 0; i < this.children.length; i++) {
210                    retVal += this.children[i].getColumnWidth();
211                }
212
213                return retVal;
214            },
215        });
216
217    }
218);