@internal initialize margin top/bottom/left/right and units
()
| 2116 | |
| 2117 | /** @internal initialize margin top/bottom/left/right and units */ |
| 2118 | protected _initMargin(): GridStack { |
| 2119 | let data: HeightData; |
| 2120 | let margin = 0; |
| 2121 | |
| 2122 | // support passing multiple values like CSS (ex: '5px 10px 0 20px') |
| 2123 | let margins: string[] = []; |
| 2124 | if (typeof this.opts.margin === 'string') { |
| 2125 | margins = this.opts.margin.split(' ') |
| 2126 | } |
| 2127 | if (margins.length === 2) { // top/bot, left/right like CSS |
| 2128 | this.opts.marginTop = this.opts.marginBottom = margins[0]; |
| 2129 | this.opts.marginLeft = this.opts.marginRight = margins[1]; |
| 2130 | } else if (margins.length === 4) { // Clockwise like CSS |
| 2131 | this.opts.marginTop = margins[0]; |
| 2132 | this.opts.marginRight = margins[1]; |
| 2133 | this.opts.marginBottom = margins[2]; |
| 2134 | this.opts.marginLeft = margins[3]; |
| 2135 | } else { |
| 2136 | data = Utils.parseHeight(this.opts.margin); |
| 2137 | this.opts.marginUnit = data.unit; |
| 2138 | margin = this.opts.margin = data.h; |
| 2139 | } |
| 2140 | |
| 2141 | // see if top/bottom/left/right need to be set as well |
| 2142 | const keys = ['marginTop', 'marginRight', 'marginBottom', 'marginLeft']; |
| 2143 | keys.forEach(k => { |
| 2144 | if (this.opts[k] === undefined) { |
| 2145 | this.opts[k] = margin; |
| 2146 | } else { |
| 2147 | data = Utils.parseHeight(this.opts[k]); |
| 2148 | this.opts[k] = data.h; |
| 2149 | delete this.opts.margin; |
| 2150 | } |
| 2151 | }); |
| 2152 | this.opts.marginUnit = data.unit; // in case side were spelled out, use those units instead... |
| 2153 | if (this.opts.marginTop === this.opts.marginBottom && this.opts.marginLeft === this.opts.marginRight && this.opts.marginTop === this.opts.marginRight) { |
| 2154 | this.opts.margin = this.opts.marginTop; // makes it easier to check for no-ops in setMargin() |
| 2155 | } |
| 2156 | |
| 2157 | // finally Update the CSS margin variables (inside the cell height) */ |
| 2158 | const style = this.el.style; |
| 2159 | style.setProperty('--gs-item-margin-top', `${this.opts.marginTop}${this.opts.marginUnit}`); |
| 2160 | style.setProperty('--gs-item-margin-bottom', `${this.opts.marginBottom}${this.opts.marginUnit}`); |
| 2161 | style.setProperty('--gs-item-margin-right', `${this.opts.marginRight}${this.opts.marginUnit}`); |
| 2162 | style.setProperty('--gs-item-margin-left', `${this.opts.marginLeft}${this.opts.marginUnit}`); |
| 2163 | |
| 2164 | return this; |
| 2165 | } |
| 2166 | |
| 2167 | /** @internal current version compiled in code */ |
| 2168 | static GDRev = '12.6.0'; |
no test coverage detected