Skip to content

Commit ad38993

Browse files
abhishek305abhishek305
committed
MKT-1947: window type updates
1 parent c62f228 commit ad38993

File tree

5 files changed

+128
-111
lines changed

5 files changed

+128
-111
lines changed

‎__test__/frame.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ describe("Window", () => {
3838

3939
it("enableResizing", (done) => {
4040
windowObj.type = "DASHBOARD";
41-
windowObj.enableResizing().then(() => {
41+
windowObj?.enableResizing().then(() => {
4242
expect(connection.sendToParent).toHaveBeenCalledWith("window", {
4343
action: "enableResizing",
4444
}); // since previous height was same

‎dist/index.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/src/window.d.ts‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,25 @@
11
import EventEmitter from "wolfy87-eventemitter";
2+
import postRobot from "post-robot";
23
/**
34
* Class representing an iframe window from Contentstack UI. Not available for Custom Widgets.
45
*/
56
declare class Window {
67
/**
78
* @hideconstructor
89
*/
9-
_connection: any;
10+
_connection: typeof postRobot;
1011
_autoResizingEnabled: boolean;
1112
_resizingEnabled: boolean;
12-
type: 'DASHBOARD' | 'FIELD';
13+
type: "DASHBOARD" | "FIELD";
1314
_emitter: EventEmitter;
14-
state: 'half_width' | 'full_width';
15+
state: "half_width" | "full_width";
1516
_height?: number;
16-
constructor(connection: any, type: 'DASHBOARD' | 'FIELD', emitter: EventEmitter, state?: 'half_width' | 'full_width');
17+
constructor(connection: any, type: "DASHBOARD" | "FIELD", emitter: EventEmitter, state?: "half_width" | "full_width");
1718
/**
1819
* This method activates the resize button that gives you the provision to resize the window size of your Dashboard Widget.
1920
* @return {external:Promise} A promise object which will resolve when a resize button is visible on the Dashboard Widget.
2021
*/
21-
enableResizing(): any;
22+
enableResizing(): Promise<any>;
2223
/**
2324
* This function executes the callback function whenever a Dashboard Widget extension is maximized or minimized. Only applicable on Dashboard Widget extensions.
2425
* @param {function} callback Function to be called when a Dashboard Widget extension is maximized or minimized
@@ -31,7 +32,7 @@ declare class Window {
3132
* @param {string|number} height Desired height of the iframe window
3233
* @return {external:Promise} A promise object which will be resolved when Contentstack UI sends an acknowledgement stating that the height has been updated.
3334
*/
34-
updateHeight(height?: number): any;
35+
updateHeight(height?: number): Promise<any>;
3536
/**
3637
* This method enables auto resizing of the extension height.
3738
* @return {Window}.
@@ -42,7 +43,7 @@ declare class Window {
4243
* @return {Window}.
4344
*/
4445
disableAutoResizing(): this;
45-
enablePaddingTop(): Promise<any>;
46+
enablePaddingTop(): Promise<ResponseMessageEvent<object>>;
4647
disablePaddingTop(): Promise<any>;
4748
}
4849
export default Window;

‎dist/src/window.d.ts.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/window.ts‎

Lines changed: 117 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -8,121 +8,137 @@ let observer: MutationObserver;
88
*/
99

1010
class Window {
11-
/**
12-
* @hideconstructor
13-
*/
11+
/**
12+
* @hideconstructor
13+
*/
1414

15-
_connection: any
16-
_autoResizingEnabled: boolean
17-
_resizingEnabled: boolean
18-
type: 'DASHBOARD' | 'FIELD'
19-
_emitter: EventEmitter
20-
state: 'half_width' | 'full_width'
21-
_height?: number
15+
_connection: typeof postRobot;
16+
_autoResizingEnabled: boolean;
17+
_resizingEnabled: boolean;
18+
type: "DASHBOARD" | "FIELD";
19+
_emitter: EventEmitter;
20+
state: "half_width" | "full_width";
21+
_height?: number;
2222

23-
constructor(connection: any, type: 'DASHBOARD' | 'FIELD', emitter: EventEmitter, state: 'half_width' | 'full_width' = 'half_width') {
24-
this._connection = connection || postRobot;
25-
this._autoResizingEnabled = false;
26-
this._resizingEnabled = false;
27-
this.type = type;
28-
this.state = state;
29-
this._emitter = emitter;
30-
}
31-
32-
/**
33-
* This method activates the resize button that gives you the provision to resize the window size of your Dashboard Widget.
34-
* @return {external:Promise} A promise object which will resolve when a resize button is visible on the Dashboard Widget.
35-
*/
36-
enableResizing() {
37-
if (this.type !== 'DASHBOARD') { return Promise.resolve(); }
38-
this._resizingEnabled = true;
39-
return this._connection.sendToParent('window', { action: 'enableResizing' });
40-
}
23+
constructor(
24+
connection: any,
25+
type: "DASHBOARD" | "FIELD",
26+
emitter: EventEmitter,
27+
state: "half_width" | "full_width" = "half_width"
28+
) {
29+
this._connection = connection || postRobot;
30+
this._autoResizingEnabled = false;
31+
this._resizingEnabled = false;
32+
this.type = type;
33+
this.state = state;
34+
this._emitter = emitter;
35+
}
4136

37+
/**
38+
* This method activates the resize button that gives you the provision to resize the window size of your Dashboard Widget.
39+
* @return {external:Promise} A promise object which will resolve when a resize button is visible on the Dashboard Widget.
40+
*/
41+
enableResizing(): Promise<any> {
42+
if (this.type !== "DASHBOARD") {
43+
return Promise.resolve();
44+
}
45+
this._resizingEnabled = true;
46+
return this._connection.sendToParent("window", {
47+
action: "enableResizing",
48+
});
49+
}
4250

43-
/**
44-
* This function executes the callback function whenever a Dashboard Widget extension is maximized or minimized. Only applicable on Dashboard Widget extensions.
45-
* @param {function} callback Function to be called when a Dashboard Widget extension is maximized or minimized
46-
* @return {boolean} Will return true
47-
*/
51+
/**
52+
* This function executes the callback function whenever a Dashboard Widget extension is maximized or minimized. Only applicable on Dashboard Widget extensions.
53+
* @param {function} callback Function to be called when a Dashboard Widget extension is maximized or minimized
54+
* @return {boolean} Will return true
55+
*/
4856

49-
onDashboardResize(callback: (event: any) => void) {
50-
const windowObj = this;
51-
if (this.type !== 'DASHBOARD') {
52-
return false;
53-
}
54-
if (callback && typeof (callback) === 'function') {
55-
windowObj._emitter.on('dashboardResize', (event: { state: 'half_width' | 'full_width'; }) => {
56-
windowObj.state = event.state;
57-
callback(event.state);
58-
});
59-
} else {
60-
throw Error('Callback must be a function');
57+
onDashboardResize(callback: (event: any) => void) {
58+
const windowObj = this;
59+
if (this.type !== "DASHBOARD") {
60+
return false;
61+
}
62+
if (callback && typeof callback === "function") {
63+
windowObj._emitter.on(
64+
"dashboardResize",
65+
(event: { state: "half_width" | "full_width" }) => {
66+
windowObj.state = event.state;
67+
callback(event.state);
68+
}
69+
);
70+
} else {
71+
throw Error("Callback must be a function");
72+
}
73+
return true;
6174
}
62-
return true;
63-
}
6475

65-
66-
/**
67-
* This method updates the extension height on Contentstack UI.
68-
* If the ‘height’ argument is not passed, it will calculate the scroll height and set the height of extension window accordingly.
69-
* @param {string|number} height Desired height of the iframe window
70-
* @return {external:Promise} A promise object which will be resolved when Contentstack UI sends an acknowledgement stating that the height has been updated.
71-
*/
72-
updateHeight(height?: number) {
73-
if (this.type === 'DASHBOARD' && this.state === 'half_width') { return Promise.resolve(); }
74-
if (!height || isNaN(height)) {
75-
this._height = Math.ceil(document.documentElement.getBoundingClientRect().height);
76-
} else if (this._height === height) {
77-
return Promise.resolve();
78-
} else {
79-
this._height = height;
76+
/**
77+
* This method updates the extension height on Contentstack UI.
78+
* If the ‘height’ argument is not passed, it will calculate the scroll height and set the height of extension window accordingly.
79+
* @param {string|number} height Desired height of the iframe window
80+
* @return {external:Promise} A promise object which will be resolved when Contentstack UI sends an acknowledgement stating that the height has been updated.
81+
*/
82+
updateHeight(height?: number): Promise<any> {
83+
if (this.type === "DASHBOARD" && this.state === "half_width") {
84+
return Promise.resolve();
85+
}
86+
if (!height || isNaN(height)) {
87+
this._height = Math.ceil(
88+
document.documentElement.getBoundingClientRect().height
89+
);
90+
} else if (this._height === height) {
91+
return Promise.resolve();
92+
} else {
93+
this._height = height;
94+
}
95+
return this._connection.sendToParent("resize", this._height as any);
8096
}
81-
return this._connection.sendToParent('resize', this._height);
82-
}
8397

84-
/**
85-
* This method enables auto resizing of the extension height.
86-
* @return {Window}.
87-
*/
88-
enableAutoResizing() {
89-
if (this._autoResizingEnabled || (this.state === 'half_width' && this.type === 'DASHBOARD')) {
90-
return this;
98+
/**
99+
* This method enables auto resizing of the extension height.
100+
* @return {Window}.
101+
*/
102+
enableAutoResizing() {
103+
if (
104+
this._autoResizingEnabled ||
105+
(this.state === "half_width" && this.type === "DASHBOARD")
106+
) {
107+
return this;
108+
}
109+
this._autoResizingEnabled = true;
110+
//@ts-ignore
111+
observer = new MutationObserver(this.updateHeight.bind(this));
112+
observer.observe(window.document.body, config);
113+
return this;
91114
}
92-
this._autoResizingEnabled = true;
93-
//@ts-ignore
94-
observer = new MutationObserver(this.updateHeight.bind(this));
95-
observer.observe(window.document.body, config);
96-
return this;
97-
}
98115

99-
/**
100-
* This method disables auto resizing of the extension height.
101-
* @return {Window}.
102-
*/
103-
disableAutoResizing() {
104-
if (!this._autoResizingEnabled) {
105-
return this;
116+
/**
117+
* This method disables auto resizing of the extension height.
118+
* @return {Window}.
119+
*/
120+
disableAutoResizing() {
121+
if (!this._autoResizingEnabled) {
122+
return this;
123+
}
124+
this._autoResizingEnabled = false;
125+
observer.disconnect();
126+
return this;
106127
}
107-
this._autoResizingEnabled = false;
108-
observer.disconnect();
109-
return this;
110-
}
111128

112-
enablePaddingTop(): Promise<any> {
113-
// @ts-ignore
114-
return postRobot.sendToParent("window", {
115-
action: "dashboardEnableTopPadding",
116-
});
117-
}
129+
enablePaddingTop(): Promise<ResponseMessageEvent<object>> {
130+
// @ts-ignore
131+
return postRobot.sendToParent("window", {
132+
action: "dashboardEnableTopPadding",
133+
});
134+
}
118135

119-
disablePaddingTop(): Promise<any> {
120-
// @ts-ignore
121-
return postRobot.sendToParent('window', {
122-
action: 'dashboardDisableTopPadding'
123-
});
124-
}
125-
136+
disablePaddingTop(): Promise<any> {
137+
// @ts-ignore
138+
return postRobot.sendToParent("window", {
139+
action: "dashboardDisableTopPadding",
140+
});
141+
}
126142
}
127143

128144
export default Window;

0 commit comments

Comments
 (0)