Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit de01559

Browse files
adumesnyadumesny
authored
Merge pull request gridstack#2615 from adumesny/master
construction vars code cleanup
2 parents dd344ad + 03557d4 commit de01559

File tree

6 files changed

+33
-68
lines changed

6 files changed

+33
-68
lines changed

‎src/dd-draggable.ts

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,6 @@ const skipMouseDown = 'input,textarea,button,select,option,[contenteditable="tru
4141
// let count = 0; // TEST
4242

4343
export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt<DDDraggableOpt> {
44-
public el: HTMLElement;
45-
public option: DDDraggableOpt;
4644
public helper: HTMLElement; // used by GridStackDDNative
4745

4846
/** @internal */
@@ -71,10 +69,8 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
7169
yOffset: 0
7270
};
7371

74-
constructor(el: HTMLElement, option: DDDraggableOpt = {}) {
72+
constructor(public el: HTMLElement, public option: DDDraggableOpt = {}) {
7573
super();
76-
this.el = el;
77-
this.option = option;
7874

7975
// get the element that is actually supposed to be dragged by
8076
let handleName = option.handle.substring(1);

‎src/dd-droppable.ts

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,9 @@ export interface DDDroppableOpt {
2323
export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt<DDDroppableOpt> {
2424

2525
public accept: (el: HTMLElement) => boolean;
26-
public el: HTMLElement;
27-
public option: DDDroppableOpt;
2826

29-
constructor(el: HTMLElement, opts: DDDroppableOpt = {}) {
27+
constructor(public el: HTMLElement, public option: DDDroppableOpt = {}) {
3028
super();
31-
this.el = el;
32-
this.option = opts;
3329
// create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)
3430
this._mouseEnter = this._mouseEnter.bind(this);
3531
this._mouseLeave = this._mouseLeave.bind(this);

‎src/dd-element.ts

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,11 @@ export class DDElement {
1919
return el.ddElement;
2020
}
2121

22-
public el: DDElementHost;
2322
public ddDraggable?: DDDraggable;
2423
public ddDroppable?: DDDroppable;
2524
public ddResizable?: DDResizable;
2625

27-
constructor(el: DDElementHost) {
28-
this.el = el;
29-
}
26+
constructor(public el: DDElementHost) {}
3027

3128
public on(eventName: string, callback: (event: MouseEvent) => void): DDElement {
3229
if (this.ddDraggable && ['drag', 'dragstart', 'dragstop'].indexOf(eventName) > -1) {

‎src/dd-resizable-handle.ts

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,23 +14,14 @@ export interface DDResizableHandleOpt {
1414
export class DDResizableHandle {
1515
/** @internal */
1616
protected el: HTMLElement;
17-
/** @internal */
18-
protected host: HTMLElement;
19-
/** @internal */
20-
protected option: DDResizableHandleOpt;
21-
/** @internal */
22-
protected dir: string;
2317
/** @internal true after we've moved enough pixels to start a resize */
2418
protected moving = false;
2519
/** @internal */
2620
protected mouseDownEvent: MouseEvent;
2721
/** @internal */
2822
protected static prefix = 'ui-resizable-';
2923

30-
constructor(host: HTMLElement, direction: string, option: DDResizableHandleOpt) {
31-
this.host = host;
32-
this.dir = direction;
33-
this.option = option;
24+
constructor(protected host: HTMLElement, protected dir: string, protected option: DDResizableHandleOpt) {
3425
// create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)
3526
this._mouseDown = this._mouseDown.bind(this);
3627
this._mouseMove = this._mouseMove.bind(this);
@@ -41,12 +32,11 @@ export class DDResizableHandle {
4132

4233
/** @internal */
4334
protected _init(): DDResizableHandle {
44-
const el = document.createElement('div');
35+
const el = this.el = document.createElement('div');
4536
el.classList.add('ui-resizable-handle');
4637
el.classList.add(`${DDResizableHandle.prefix}${this.dir}`);
4738
el.style.zIndex = '100';
4839
el.style.userSelect = 'none';
49-
this.el = el;
5040
this.host.appendChild(this.el);
5141
this.el.addEventListener('mousedown', this._mouseDown);
5242
if (isTouch) {

‎src/dd-resizable.ts

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,6 @@ interface RectScaleReciprocal {
3030
}
3131

3232
export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt<DDResizableOpt> {
33-
34-
// have to be public else complains for HTMLElementExtendOpt ?
35-
public el: GridItemHTMLElement;
36-
public option: DDResizableOpt;
37-
3833
/** @internal */
3934
protected handlers: DDResizableHandle[];
4035
/** @internal */
@@ -60,10 +55,9 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
6055
/** @internal */
6156
protected sizeToContent: boolean;
6257

63-
constructor(el: HTMLElement, opts: DDResizableOpt = {}) {
58+
// have to be public else complains for HTMLElementExtendOpt ?
59+
constructor(public el: GridItemHTMLElement, public option: DDResizableOpt = {}) {
6460
super();
65-
this.el = el;
66-
this.option = opts;
6761
// create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)
6862
this._mouseOver = this._mouseOver.bind(this);
6963
this._mouseOut = this._mouseOut.bind(this);

‎src/gridstack.ts

Lines changed: 26 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -207,15 +207,9 @@ export class GridStack {
207207
/** scoping so users can call new GridStack.Engine(12) for example */
208208
public static Engine = GridStackEngine;
209209

210-
/** the HTML element tied to this grid after it's been initialized */
211-
public el: GridHTMLElement;
212-
213210
/** engine used to implement non DOM grid functionality */
214211
public engine: GridStackEngine;
215212

216-
/** grid options - public for classes to access, but use methods to modify! */
217-
public opts: GridStackOptions;
218-
219213
/** point to a parent grid item if we're nested (inside a grid-item in between 2 Grids) */
220214
public parentGridItem?: GridStackNode;
221215

@@ -267,12 +261,11 @@ export class GridStack {
267261

268262
/**
269263
* Construct a grid item from the given element and options
270-
* @param el
271-
* @param opts
264+
* @param el the HTML element tied to this grid after it's been initialized
265+
* @param opts grid options - public for classes to access, but use methods to modify!
272266
*/
273-
public constructor(el: GridHTMLElement, opts: GridStackOptions = {}) {
267+
public constructor(public el: GridHTMLElement, public opts: GridStackOptions = {}) {
274268
el.gridstack = this;
275-
this.el = el; // exposed HTML element to the user
276269
opts = opts || {}; // handles null/undefined/0
277270

278271
if (!el.classList.contains('grid-stack')) {
@@ -344,18 +337,17 @@ export class GridStack {
344337
defaults.animate = Utils.toBool(el.getAttribute('gs-animate'))
345338
}
346339

347-
this.opts = Utils.defaults(opts, defaults);
348-
opts = null; // make sure we use this.opts instead
340+
opts = Utils.defaults(opts, defaults);
349341
this._initMargin(); // part of settings defaults...
350342

351343
// Now check if we're loading into 1 column mode FIRST so we don't do un-necessary work (like cellHeight = width / 12 then go 1 column)
352344
this.checkDynamicColumn();
353-
this.el.classList.add('gs-' + this.opts.column);
345+
this.el.classList.add('gs-' + opts.column);
354346

355-
if (this.opts.rtl === 'auto') {
356-
this.opts.rtl = (el.style.direction === 'rtl');
347+
if (opts.rtl === 'auto') {
348+
opts.rtl = (el.style.direction === 'rtl');
357349
}
358-
if (this.opts.rtl) {
350+
if (opts.rtl) {
359351
this.el.classList.add('grid-stack-rtl');
360352
}
361353

@@ -369,34 +361,34 @@ export class GridStack {
369361
parentGridItem.el.classList.add('grid-stack-sub-grid');
370362
}
371363

372-
this._isAutoCellHeight = (this.opts.cellHeight === 'auto');
373-
if (this._isAutoCellHeight || this.opts.cellHeight === 'initial') {
364+
this._isAutoCellHeight = (opts.cellHeight === 'auto');
365+
if (this._isAutoCellHeight || opts.cellHeight === 'initial') {
374366
// make the cell content square initially (will use resize/column event to keep it square)
375367
this.cellHeight(undefined, false);
376368
} else {
377369
// append unit if any are set
378-
if (typeof this.opts.cellHeight == 'number' && this.opts.cellHeightUnit && this.opts.cellHeightUnit !== gridDefaults.cellHeightUnit) {
379-
this.opts.cellHeight = this.opts.cellHeight + this.opts.cellHeightUnit;
380-
delete this.opts.cellHeightUnit;
370+
if (typeof opts.cellHeight == 'number' && opts.cellHeightUnit && opts.cellHeightUnit !== gridDefaults.cellHeightUnit) {
371+
opts.cellHeight = opts.cellHeight + opts.cellHeightUnit;
372+
delete opts.cellHeightUnit;
381373
}
382-
this.cellHeight(this.opts.cellHeight, false);
374+
this.cellHeight(opts.cellHeight, false);
383375
}
384376

385377
// see if we need to adjust auto-hide
386-
if (this.opts.alwaysShowResizeHandle === 'mobile') {
387-
this.opts.alwaysShowResizeHandle = isTouch;
378+
if (opts.alwaysShowResizeHandle === 'mobile') {
379+
opts.alwaysShowResizeHandle = isTouch;
388380
}
389381

390382
this._styleSheetClass = 'gs-id-' + GridStackEngine._idSeq++;
391383
this.el.classList.add(this._styleSheetClass);
392384

393385
this._setStaticClass();
394386

395-
let engineClass = this.opts.engineClass || GridStack.engineClass || GridStackEngine;
387+
let engineClass = opts.engineClass || GridStack.engineClass || GridStackEngine;
396388
this.engine = new engineClass({
397389
column: this.getColumn(),
398-
float: this.opts.float,
399-
maxRow: this.opts.maxRow,
390+
float: opts.float,
391+
maxRow: opts.maxRow,
400392
onChange: (cbNodes) => {
401393
let maxH = 0;
402394
this.engine.nodes.forEach(n => { maxH = Math.max(maxH, n.y + n.h) });
@@ -417,25 +409,25 @@ export class GridStack {
417409
// create initial global styles BEFORE loading children so resizeToContent margin can be calculated correctly
418410
this._updateStyles(false, 0);
419411

420-
if (this.opts.auto) {
412+
if (opts.auto) {
421413
this.batchUpdate(); // prevent in between re-layout #1535 TODO: this only set float=true, need to prevent collision check...
422414
this.getGridItems().forEach(el => this._prepareElement(el));
423415
this.batchUpdate(false);
424416
}
425417

426418
// load any passed in children as well, which overrides any DOM layout done above
427-
if (this.opts.children) {
428-
let children = this.opts.children;
429-
delete this.opts.children;
419+
if (opts.children) {
420+
let children = opts.children;
421+
delete opts.children;
430422
if (children.length) this.load(children); // don't load empty
431423
}
432424

433425
// if (this.engine.nodes.length) this._updateStyles(); // update based on # of children. done in engine onChange CB
434-
this.setAnimation(this.opts.animate);
426+
this.setAnimation(opts.animate);
435427

436428
// dynamic grids require pausing during drag to detect over to nest vs push
437-
if (this.opts.subGridDynamic && !DDManager.pauseDrag) DDManager.pauseDrag = true;
438-
if (this.opts.draggable?.pause !== undefined) DDManager.pauseDrag = this.opts.draggable.pause;
429+
if (opts.subGridDynamic && !DDManager.pauseDrag) DDManager.pauseDrag = true;
430+
if (opts.draggable?.pause !== undefined) DDManager.pauseDrag = opts.draggable.pause;
439431

440432
this._setupRemoveDrop();
441433
this._setupAcceptWidget();

0 commit comments

Comments
 (0)