@inboxsdk/core 1.1.0 → 1.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/inboxsdk.js +7 -34
- package/inboxsdk.js.map +1 -1
- package/package.json +1 -1
- package/pageWorld.js +1 -1
- package/pageWorld.js.map +1 -1
- package/src/common/version.d.ts.map +1 -1
- package/src/common/version.js +3 -1
- package/src/injected-js/main.js +0 -9
- package/src/platform-implementation-js/dom-driver/gmail/views/gmail-app-sidebar-view/index.test.js +6 -2
- package/src/platform-implementation-js/dom-driver/gmail/views/gmail-app-sidebar-view/primary/index.js +4 -2
- package/src/platform-implementation-js/dom-driver/gmail/views/gmail-thread-sidebar-view.js +4 -2
- package/src/platform-implementation-js/dom-driver/gmail/views/gmail-thread-sidebar-view.test.js +6 -2
- package/src/platform-implementation-js/driver-common/sidebar/ContentPanelViewDriver.js +2 -2
- package/src/platform-implementation-js/driver-common/sidebar/constants.d.ts +9 -0
- package/src/platform-implementation-js/driver-common/sidebar/constants.d.ts.map +1 -0
- package/src/platform-implementation-js/driver-common/sidebar/constants.js +26 -0
- package/src/platform-implementation-js/lib/idMap.d.ts +7 -0
- package/src/platform-implementation-js/lib/idMap.d.ts.map +1 -1
- package/src/platform-implementation-js/lib/idMap.js +35 -0
- package/src/platform-implementation-js/platform-implementation.d.ts +0 -3
- package/src/platform-implementation-js/platform-implementation.js +1 -9
- package/src/injected-js/inbox/setupAjaxInterceptor.js +0 -211
- package/src/injected-js/inbox/setupClickAndGetNewIframeSrc.js +0 -67
- package/src/injected-js/inbox/setupComposeViewDraftIDFinder.js +0 -35
- package/src/injected-js/inbox/setupInboxFakeWindowResizeListener.js +0 -29
- package/src/platform-implementation-js/dom-driver/inbox/__mocks__/getSidebarClassnames.js +0 -13
- package/src/platform-implementation-js/dom-driver/inbox/addNavItem.js +0 -38
- package/src/platform-implementation-js/dom-driver/inbox/addRecipientRow.js +0 -55
- package/src/platform-implementation-js/dom-driver/inbox/createLink.js +0 -19
- package/src/platform-implementation-js/dom-driver/inbox/createLink.test.js +0 -27
- package/src/platform-implementation-js/dom-driver/inbox/detection/appToolbarLocation/parser.js +0 -43
- package/src/platform-implementation-js/dom-driver/inbox/detection/attachmentCard/parser.js +0 -34
- package/src/platform-implementation-js/dom-driver/inbox/detection/attachmentOverlay/parser.js +0 -53
- package/src/platform-implementation-js/dom-driver/inbox/detection/chatSidebar/parser.js +0 -31
- package/src/platform-implementation-js/dom-driver/inbox/detection/compose/parser.js +0 -103
- package/src/platform-implementation-js/dom-driver/inbox/detection/message/parser.js +0 -69
- package/src/platform-implementation-js/dom-driver/inbox/detection/nativeDrawer/parser.js +0 -32
- package/src/platform-implementation-js/dom-driver/inbox/detection/searchBar/parser.js +0 -28
- package/src/platform-implementation-js/dom-driver/inbox/detection/thread/parser.js +0 -49
- package/src/platform-implementation-js/dom-driver/inbox/detection/thread-row/parser.js +0 -100
- package/src/platform-implementation-js/dom-driver/inbox/getComposeViewDriverLiveSet.js +0 -99
- package/src/platform-implementation-js/dom-driver/inbox/getInboxMessageIdForInboxThreadId.js +0 -36
- package/src/platform-implementation-js/dom-driver/inbox/getSidebarClassnames.js +0 -114
- package/src/platform-implementation-js/dom-driver/inbox/getSidebarClassnames.test.js +0 -73
- package/src/platform-implementation-js/dom-driver/inbox/gotoView.js +0 -39
- package/src/platform-implementation-js/dom-driver/inbox/gotoView.test.js +0 -28
- package/src/platform-implementation-js/dom-driver/inbox/inbox-butter-bar-driver.js +0 -148
- package/src/platform-implementation-js/dom-driver/inbox/inbox-driver.js +0 -863
- package/src/platform-implementation-js/dom-driver/inbox/inbox-page-communicator.js +0 -62
- package/src/platform-implementation-js/dom-driver/inbox/inboxResponseProcessor.js +0 -12
- package/src/platform-implementation-js/dom-driver/inbox/inboxResponseProcessor.test.js +0 -18
- package/src/platform-implementation-js/dom-driver/inbox/makePageParserTree.js +0 -33
- package/src/platform-implementation-js/dom-driver/inbox/pageParserOptions.js +0 -265
- package/src/platform-implementation-js/dom-driver/inbox/registerSearchSuggestionsProvider.js +0 -301
- package/src/platform-implementation-js/dom-driver/inbox/setupCustomAutocompleteSelectionHandling.js +0 -183
- package/src/platform-implementation-js/dom-driver/inbox/setupRouteViewDriverStream.js +0 -64
- package/src/platform-implementation-js/dom-driver/inbox/setupRouteViewDriverStream.test.js +0 -72
- package/src/platform-implementation-js/dom-driver/inbox/views/InboxLabelView.js +0 -78
- package/src/platform-implementation-js/dom-driver/inbox/views/InboxMoleViewDriver.js +0 -296
- package/src/platform-implementation-js/dom-driver/inbox/views/InboxToolbarButtonView.js +0 -91
- package/src/platform-implementation-js/dom-driver/inbox/views/InboxToolbarView.js +0 -53
- package/src/platform-implementation-js/dom-driver/inbox/views/inbox-app-sidebar-view.js +0 -271
- package/src/platform-implementation-js/dom-driver/inbox/views/inbox-app-toolbar-button-view.js +0 -160
- package/src/platform-implementation-js/dom-driver/inbox/views/inbox-app-toolbar-tooltip-view.js +0 -57
- package/src/platform-implementation-js/dom-driver/inbox/views/inbox-attachment-card-view.js +0 -197
- package/src/platform-implementation-js/dom-driver/inbox/views/inbox-attachment-overlay-view.js +0 -83
- package/src/platform-implementation-js/dom-driver/inbox/views/inbox-chat-sidebar-view.js +0 -45
- package/src/platform-implementation-js/dom-driver/inbox/views/inbox-compose-button-view.js +0 -116
- package/src/platform-implementation-js/dom-driver/inbox/views/inbox-compose-view.js +0 -842
- package/src/platform-implementation-js/dom-driver/inbox/views/inbox-custom-route-view.js +0 -75
- package/src/platform-implementation-js/dom-driver/inbox/views/inbox-dropdown-view.js +0 -25
- package/src/platform-implementation-js/dom-driver/inbox/views/inbox-dummy-route-view.js +0 -63
- package/src/platform-implementation-js/dom-driver/inbox/views/inbox-message-view.js +0 -274
- package/src/platform-implementation-js/dom-driver/inbox/views/inbox-modal-view.js +0 -112
- package/src/platform-implementation-js/dom-driver/inbox/views/inbox-route-view.js +0 -96
- package/src/platform-implementation-js/dom-driver/inbox/views/inbox-thread-row-view.js +0 -315
- package/src/platform-implementation-js/dom-driver/inbox/views/inbox-thread-view.js +0 -218
- package/src/platform-implementation-js/dom-driver/inbox/views/inbox-thread-view.test.js +0 -171
- package/src/platform-implementation-js/dom-driver/inbox/views/inbox-tooltip-view.js +0 -127
- package/src/platform-implementation-js/dom-driver/inbox/views/inboxNavItemView.js +0 -311
- package/src/platform-implementation-js/dom-driver/inbox/waitForAnimationClickBlockerGone.js +0 -26
|
@@ -1,171 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
var _lodash = _interopRequireDefault(require("lodash"));
|
|
5
|
-
var _kefir = _interopRequireDefault(require("kefir"));
|
|
6
|
-
var _kefirBus = _interopRequireDefault(require("kefir-bus"));
|
|
7
|
-
var _kefirStopper = _interopRequireDefault(require("kefir-stopper"));
|
|
8
|
-
var _pdelay = _interopRequireDefault(require("pdelay"));
|
|
9
|
-
var _idMap = _interopRequireDefault(require("../../../lib/idMap"));
|
|
10
|
-
var _inboxThreadView = _interopRequireDefault(require("./inbox-thread-view"));
|
|
11
|
-
var _ContentPanelViewDriver = _interopRequireDefault(require("../../../driver-common/sidebar/ContentPanelViewDriver"));
|
|
12
|
-
function makeDriver() {
|
|
13
|
-
const _openOrOpeningStreamBus = (0, _kefirBus.default)();
|
|
14
|
-
const _addedPanels = [];
|
|
15
|
-
const driver = {
|
|
16
|
-
getAppId: () => 'foo',
|
|
17
|
-
getOpts: _lodash.default.constant({
|
|
18
|
-
appName: 'driver appName',
|
|
19
|
-
appIconUrl: 'http://localhost/driver/appIconUrl.png'
|
|
20
|
-
}),
|
|
21
|
-
getThreadViewElementsMap: _lodash.default.constant(new Map()),
|
|
22
|
-
getAppSidebarView: _lodash.default.constant({
|
|
23
|
-
_openOrOpeningStreamBus,
|
|
24
|
-
_addedPanels,
|
|
25
|
-
addSidebarContentPanel(descriptor) {
|
|
26
|
-
if (!document.querySelector('.' + (0, _idMap.default)('app_sidebar_waiting_platform'))) {
|
|
27
|
-
const waitingPlatform = document.createElement('div');
|
|
28
|
-
waitingPlatform.className = (0, _idMap.default)('app_sidebar_waiting_platform');
|
|
29
|
-
document.body.appendChild(waitingPlatform);
|
|
30
|
-
}
|
|
31
|
-
const panel = new _ContentPanelViewDriver.default(driver, descriptor, 'foobar');
|
|
32
|
-
_addedPanels.push(panel);
|
|
33
|
-
return panel;
|
|
34
|
-
},
|
|
35
|
-
getOpenOrOpeningStream: _lodash.default.constant(_openOrOpeningStreamBus.toProperty(() => false).onValue(() => {})),
|
|
36
|
-
open: jest.fn()
|
|
37
|
-
})
|
|
38
|
-
};
|
|
39
|
-
return driver;
|
|
40
|
-
}
|
|
41
|
-
function makeElement() {
|
|
42
|
-
const el = document.createElement('div');
|
|
43
|
-
const parsed = {
|
|
44
|
-
elements: {
|
|
45
|
-
stickyHeading: document.createElement('div')
|
|
46
|
-
}
|
|
47
|
-
};
|
|
48
|
-
return {
|
|
49
|
-
el,
|
|
50
|
-
parsed
|
|
51
|
-
};
|
|
52
|
-
}
|
|
53
|
-
test('construction works', () => {
|
|
54
|
-
const {
|
|
55
|
-
el,
|
|
56
|
-
parsed
|
|
57
|
-
} = makeElement();
|
|
58
|
-
const threadView = new _inboxThreadView.default(el, makeDriver(), parsed);
|
|
59
|
-
});
|
|
60
|
-
describe('addSidebarContentPanel', () => {
|
|
61
|
-
test('button is added to thread', () => {
|
|
62
|
-
const driver = makeDriver();
|
|
63
|
-
const {
|
|
64
|
-
el,
|
|
65
|
-
parsed
|
|
66
|
-
} = makeElement();
|
|
67
|
-
const threadView = new _inboxThreadView.default(el, driver, parsed);
|
|
68
|
-
threadView.addSidebarContentPanel(_kefir.default.constant({
|
|
69
|
-
title: 'foo',
|
|
70
|
-
iconUrl: 'http://localhost/driver/bar.png',
|
|
71
|
-
el: document.createElement('div')
|
|
72
|
-
}));
|
|
73
|
-
const {
|
|
74
|
-
stickyHeading
|
|
75
|
-
} = parsed.elements;
|
|
76
|
-
expect(stickyHeading.querySelectorAll('button').length).toBe(1);
|
|
77
|
-
expect(stickyHeading.querySelector('button').title).toBe('driver appName');
|
|
78
|
-
expect(stickyHeading.querySelector('button img').src).toBe('http://localhost/driver/appIconUrl.png');
|
|
79
|
-
expect(stickyHeading.querySelector('button').parentElement.getAttribute('data-count')).toBe(null);
|
|
80
|
-
const appSidebarView = driver.getAppSidebarView();
|
|
81
|
-
expect(appSidebarView._addedPanels.length).toBe(1);
|
|
82
|
-
const panel = appSidebarView._addedPanels[0];
|
|
83
|
-
panel.remove();
|
|
84
|
-
expect(stickyHeading.querySelectorAll('button').length).toBe(0);
|
|
85
|
-
});
|
|
86
|
-
test('exiting thread removes panel', () => {
|
|
87
|
-
const driver = makeDriver();
|
|
88
|
-
const {
|
|
89
|
-
el,
|
|
90
|
-
parsed
|
|
91
|
-
} = makeElement();
|
|
92
|
-
const threadView = new _inboxThreadView.default(el, driver, parsed);
|
|
93
|
-
threadView.addSidebarContentPanel(_kefir.default.constant({
|
|
94
|
-
title: 'foo',
|
|
95
|
-
iconUrl: 'http://localhost/driver/bar.png',
|
|
96
|
-
el: document.createElement('div')
|
|
97
|
-
}));
|
|
98
|
-
const appSidebarView = driver.getAppSidebarView();
|
|
99
|
-
expect(appSidebarView._addedPanels.length).toBe(1);
|
|
100
|
-
const panel = appSidebarView._addedPanels[0];
|
|
101
|
-
const onPanelRemove = jest.fn();
|
|
102
|
-
panel.getStopper().onValue(onPanelRemove);
|
|
103
|
-
expect(onPanelRemove).toHaveBeenCalledTimes(0);
|
|
104
|
-
threadView.destroy();
|
|
105
|
-
expect(onPanelRemove).toHaveBeenCalledTimes(1);
|
|
106
|
-
});
|
|
107
|
-
test('multiple app sidebars can be added and removed in reverse order', () => {
|
|
108
|
-
const driver = makeDriver();
|
|
109
|
-
const {
|
|
110
|
-
el,
|
|
111
|
-
parsed
|
|
112
|
-
} = makeElement();
|
|
113
|
-
const threadView = new _inboxThreadView.default(el, driver, parsed);
|
|
114
|
-
threadView.addSidebarContentPanel(_kefir.default.constant({
|
|
115
|
-
title: 'foo',
|
|
116
|
-
iconUrl: 'http://localhost/driver/bar.png',
|
|
117
|
-
el: document.createElement('div')
|
|
118
|
-
}));
|
|
119
|
-
threadView.addSidebarContentPanel(_kefir.default.constant({
|
|
120
|
-
title: 'foo2',
|
|
121
|
-
iconUrl: '/bar2.png',
|
|
122
|
-
el: document.createElement('div')
|
|
123
|
-
}));
|
|
124
|
-
const {
|
|
125
|
-
stickyHeading
|
|
126
|
-
} = parsed.elements;
|
|
127
|
-
expect(stickyHeading.querySelectorAll('button').length).toBe(1);
|
|
128
|
-
expect(stickyHeading.querySelector('button').title).toBe('driver appName');
|
|
129
|
-
expect(stickyHeading.querySelector('button img').src).toBe('http://localhost/driver/appIconUrl.png');
|
|
130
|
-
expect(stickyHeading.querySelector('button').parentElement.getAttribute('data-count')).toBe('2');
|
|
131
|
-
const appSidebarView = driver.getAppSidebarView();
|
|
132
|
-
expect(appSidebarView._addedPanels.length).toBe(2);
|
|
133
|
-
const [panel1, panel2] = appSidebarView._addedPanels;
|
|
134
|
-
panel2.remove();
|
|
135
|
-
expect(stickyHeading.querySelectorAll('button').length).toBe(1);
|
|
136
|
-
expect(stickyHeading.querySelector('button').parentElement.getAttribute('data-count')).toBe(null);
|
|
137
|
-
panel1.remove();
|
|
138
|
-
expect(stickyHeading.querySelectorAll('button').length).toBe(0);
|
|
139
|
-
});
|
|
140
|
-
test('multiple app sidebars can be removed in order', () => {
|
|
141
|
-
const driver = makeDriver();
|
|
142
|
-
const {
|
|
143
|
-
el,
|
|
144
|
-
parsed
|
|
145
|
-
} = makeElement();
|
|
146
|
-
const threadView = new _inboxThreadView.default(el, driver, parsed);
|
|
147
|
-
threadView.addSidebarContentPanel(_kefir.default.constant({
|
|
148
|
-
title: 'foo',
|
|
149
|
-
iconUrl: 'http://localhost/driver/bar.png',
|
|
150
|
-
el: document.createElement('div')
|
|
151
|
-
}));
|
|
152
|
-
threadView.addSidebarContentPanel(_kefir.default.constant({
|
|
153
|
-
title: 'foo2',
|
|
154
|
-
iconUrl: '/bar2.png',
|
|
155
|
-
el: document.createElement('div')
|
|
156
|
-
}));
|
|
157
|
-
const {
|
|
158
|
-
stickyHeading
|
|
159
|
-
} = parsed.elements;
|
|
160
|
-
expect(stickyHeading.querySelectorAll('button').length).toBe(1);
|
|
161
|
-
expect(stickyHeading.querySelector('button').parentElement.getAttribute('data-count')).toBe('2');
|
|
162
|
-
const appSidebarView = driver.getAppSidebarView();
|
|
163
|
-
expect(appSidebarView._addedPanels.length).toBe(2);
|
|
164
|
-
const [panel1, panel2] = appSidebarView._addedPanels;
|
|
165
|
-
panel1.remove();
|
|
166
|
-
expect(stickyHeading.querySelectorAll('button').length).toBe(1);
|
|
167
|
-
expect(stickyHeading.querySelector('button').parentElement.getAttribute('data-count')).toBe(null);
|
|
168
|
-
panel2.remove();
|
|
169
|
-
expect(stickyHeading.querySelectorAll('button').length).toBe(0);
|
|
170
|
-
});
|
|
171
|
-
});
|
|
@@ -1,127 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.default = void 0;
|
|
8
|
-
var _ud = require("ud");
|
|
9
|
-
var _kefir = _interopRequireDefault(require("kefir"));
|
|
10
|
-
var _kefirStopper = _interopRequireDefault(require("kefir-stopper"));
|
|
11
|
-
var _containByScreen = _interopRequireDefault(require("contain-by-screen"));
|
|
12
|
-
class InboxTooltipView {
|
|
13
|
-
_stopper = (0, _kefirStopper.default)();
|
|
14
|
-
constructor(target, options) {
|
|
15
|
-
this._target = target;
|
|
16
|
-
this._arrowEl = document.createElement('div');
|
|
17
|
-
this._arrowEl.className = 'inboxsdk__tooltip_arrow';
|
|
18
|
-
this._contentEl = document.createElement('div');
|
|
19
|
-
this._contentEl.className = 'inboxsdk__tooltip_content';
|
|
20
|
-
this._el = document.createElement('div');
|
|
21
|
-
this._el.style.position = 'fixed';
|
|
22
|
-
this._el.className = 'inboxsdk__tooltip';
|
|
23
|
-
this._el.appendChild(this._contentEl);
|
|
24
|
-
if (options.el) {
|
|
25
|
-
this._contentEl.appendChild(options.el);
|
|
26
|
-
this._el.classList.add('inboxsdk__tooltip_chromeless');
|
|
27
|
-
} else {
|
|
28
|
-
{
|
|
29
|
-
const closeButton = document.createElement('button');
|
|
30
|
-
closeButton.type = 'button';
|
|
31
|
-
closeButton.title = 'Close';
|
|
32
|
-
closeButton.className = 'inboxsdk__close_button';
|
|
33
|
-
closeButton.addEventListener('click', e => {
|
|
34
|
-
this.destroy();
|
|
35
|
-
});
|
|
36
|
-
this._el.appendChild(closeButton);
|
|
37
|
-
}
|
|
38
|
-
if (options.imageUrl) {
|
|
39
|
-
const src = options.imageUrl;
|
|
40
|
-
const img = document.createElement('img');
|
|
41
|
-
img.className = 'inboxsdk__tooltip_img';
|
|
42
|
-
img.src = src;
|
|
43
|
-
this._contentEl.appendChild(img);
|
|
44
|
-
}
|
|
45
|
-
if (options.title) {
|
|
46
|
-
const title = options.title;
|
|
47
|
-
const titleEl = document.createElement('h1');
|
|
48
|
-
titleEl.textContent = title;
|
|
49
|
-
this._contentEl.appendChild(titleEl);
|
|
50
|
-
}
|
|
51
|
-
if (options.subtitle) {
|
|
52
|
-
const subtitle = options.subtitle;
|
|
53
|
-
const sEl = document.createElement('div');
|
|
54
|
-
sEl.className = 'inboxsdk__subtitle';
|
|
55
|
-
sEl.textContent = subtitle;
|
|
56
|
-
this._contentEl.appendChild(sEl);
|
|
57
|
-
}
|
|
58
|
-
if (options.button) {
|
|
59
|
-
const button = options.button;
|
|
60
|
-
const buttonEl = document.createElement('input');
|
|
61
|
-
buttonEl.type = 'button';
|
|
62
|
-
buttonEl.value = button.title;
|
|
63
|
-
buttonEl.addEventListener('click', event => {
|
|
64
|
-
event.preventDefault();
|
|
65
|
-
event.stopPropagation();
|
|
66
|
-
if (button.onClick) button.onClick.call(null);
|
|
67
|
-
});
|
|
68
|
-
this._contentEl.appendChild(buttonEl);
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
document.body.appendChild(this._el);
|
|
72
|
-
document.body.appendChild(this._arrowEl);
|
|
73
|
-
this._updatePosition(true);
|
|
74
|
-
this._el.addEventListener('load', event => {
|
|
75
|
-
this._updatePosition(true);
|
|
76
|
-
}, true);
|
|
77
|
-
_kefir.default.interval(200).takeUntilBy(this._stopper).map(() => target.getBoundingClientRect()).skipDuplicates((a, b) => a.top === b.top && a.left === b.left && a.right === b.right && a.bottom === b.bottom).onValue(() => {
|
|
78
|
-
this._updatePosition();
|
|
79
|
-
});
|
|
80
|
-
}
|
|
81
|
-
destroy() {
|
|
82
|
-
this._el.remove();
|
|
83
|
-
this._arrowEl.remove();
|
|
84
|
-
this._stopper.destroy();
|
|
85
|
-
}
|
|
86
|
-
getStopper() {
|
|
87
|
-
return this._stopper;
|
|
88
|
-
}
|
|
89
|
-
_updatePosition() {
|
|
90
|
-
let noTransition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
|
91
|
-
if (noTransition) {
|
|
92
|
-
this._el.classList.add('inboxsdk__notransition');
|
|
93
|
-
this._arrowEl.classList.add('inboxsdk__notransition');
|
|
94
|
-
}
|
|
95
|
-
const {
|
|
96
|
-
position
|
|
97
|
-
} = (0, _containByScreen.default)(this._el, this._target, {
|
|
98
|
-
position: 'top',
|
|
99
|
-
hAlign: 'center',
|
|
100
|
-
vAlign: 'center',
|
|
101
|
-
buffer: 10
|
|
102
|
-
});
|
|
103
|
-
(0, _containByScreen.default)(this._arrowEl, this._target, {
|
|
104
|
-
position: position,
|
|
105
|
-
forcePosition: true,
|
|
106
|
-
hAlign: 'center',
|
|
107
|
-
forceHAlign: true,
|
|
108
|
-
vAlign: 'center',
|
|
109
|
-
forceVAlign: true,
|
|
110
|
-
buffer: 11 // needs to overlap 1px of border
|
|
111
|
-
});
|
|
112
|
-
|
|
113
|
-
['top', 'bottom', 'left', 'right'].forEach(x => {
|
|
114
|
-
this._arrowEl.classList.remove('inboxsdk__' + x);
|
|
115
|
-
});
|
|
116
|
-
this._arrowEl.classList.add('inboxsdk__' + position);
|
|
117
|
-
if (noTransition) {
|
|
118
|
-
this._el.offsetHeight; // Trigger a reflow, flushing the CSS changes
|
|
119
|
-
this._arrowEl.offsetHeight;
|
|
120
|
-
// see http://stackoverflow.com/a/16575811/1289657
|
|
121
|
-
this._el.classList.remove('inboxsdk__notransition');
|
|
122
|
-
this._arrowEl.classList.remove('inboxsdk__notransition');
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
var _default = (0, _ud.defn)(module, InboxTooltipView);
|
|
127
|
-
exports.default = _default;
|
|
@@ -1,311 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.default = void 0;
|
|
8
|
-
var _kefir = _interopRequireDefault(require("kefir"));
|
|
9
|
-
var _kefirBus = _interopRequireDefault(require("kefir-bus"));
|
|
10
|
-
var _kefirStopper = _interopRequireDefault(require("kefir-stopper"));
|
|
11
|
-
var _insertElementInOrder = _interopRequireDefault(require("../../../lib/dom/insert-element-in-order"));
|
|
12
|
-
var _querySelectorOrFail = _interopRequireDefault(require("../../../lib/dom/querySelectorOrFail"));
|
|
13
|
-
var _dropdownView = _interopRequireDefault(require("../../../widgets/buttons/dropdown-view"));
|
|
14
|
-
var _inboxDropdownView = _interopRequireDefault(require("./inbox-dropdown-view"));
|
|
15
|
-
var _navItemTypes = _interopRequireDefault(require("../../../constants/nav-item-types"));
|
|
16
|
-
var _updateIcon = _interopRequireDefault(require("../../../driver-common/update-icon"));
|
|
17
|
-
class InboxNavItemView {
|
|
18
|
-
_eventStream = (0, _kefirBus.default)();
|
|
19
|
-
_transitionResetter = (0, _kefirBus.default)();
|
|
20
|
-
_children = 0;
|
|
21
|
-
_name = '';
|
|
22
|
-
_type = null;
|
|
23
|
-
_orderHint = Number.MAX_SAFE_INTEGER;
|
|
24
|
-
_disabled = false;
|
|
25
|
-
_isCollapsed = false;
|
|
26
|
-
_iconSettings = {};
|
|
27
|
-
_accessory = null;
|
|
28
|
-
_accessoryView = null;
|
|
29
|
-
constructor(navItemDescriptor, level) {
|
|
30
|
-
this._level = level || 0;
|
|
31
|
-
this._elements = {
|
|
32
|
-
wrapper: document.createElement('div'),
|
|
33
|
-
expander: document.createElement('div'),
|
|
34
|
-
navItem: document.createElement('div'),
|
|
35
|
-
name: document.createElement('span'),
|
|
36
|
-
subNav: document.createElement('div'),
|
|
37
|
-
subNavInner: document.createElement('div'),
|
|
38
|
-
accessory: document.createElement('div')
|
|
39
|
-
};
|
|
40
|
-
if (this._level > 2) {
|
|
41
|
-
console.warn('Adding NavItems more than 3 levels deep is not supported');
|
|
42
|
-
}
|
|
43
|
-
this._stopper = this._eventStream.ignoreValues().beforeEnd(() => null).toProperty();
|
|
44
|
-
this._setupElements();
|
|
45
|
-
navItemDescriptor.takeUntilBy(this._stopper).onValue(descriptor => {
|
|
46
|
-
this._update(descriptor);
|
|
47
|
-
this._navItemDescriptor = descriptor;
|
|
48
|
-
});
|
|
49
|
-
}
|
|
50
|
-
addNavItem(orderGroup, navItemDescriptor) {
|
|
51
|
-
const childNavItemView = new InboxNavItemView(navItemDescriptor, this._level + 1);
|
|
52
|
-
childNavItemView.getEventStream().filter(event => event.eventName === 'orderChanged').onValue(() => (0, _insertElementInOrder.default)(this._elements.subNavInner, childNavItemView.getElement()));
|
|
53
|
-
(0, _insertElementInOrder.default)(this._elements.subNavInner, childNavItemView.getElement());
|
|
54
|
-
this._children += 1;
|
|
55
|
-
childNavItemView.getStopper().onValue(() => {
|
|
56
|
-
this._children -= 1;
|
|
57
|
-
this._updateChildrenClass();
|
|
58
|
-
this._updateDisabledState(this._navItemDescriptor || {});
|
|
59
|
-
this._updateAccessory(this._accessory, true);
|
|
60
|
-
});
|
|
61
|
-
this._updateChildrenClass();
|
|
62
|
-
this._updateDisabledState(this._navItemDescriptor || {});
|
|
63
|
-
this._updateAccessory(this._accessory, true);
|
|
64
|
-
return childNavItemView;
|
|
65
|
-
}
|
|
66
|
-
setActive(value) {
|
|
67
|
-
this._elements.navItem.classList.toggle('inboxsdk__navItem_active', value);
|
|
68
|
-
}
|
|
69
|
-
toggleCollapse() {
|
|
70
|
-
this._isCollapsed = !this._isCollapsed;
|
|
71
|
-
this._isCollapsed ? this._collapse() : this._expand();
|
|
72
|
-
}
|
|
73
|
-
setCollapsed(value) {
|
|
74
|
-
if (this._isCollapsed === value) return;
|
|
75
|
-
this._isCollapsed = value;
|
|
76
|
-
this._isCollapsed ? this._collapse() : this._expand();
|
|
77
|
-
}
|
|
78
|
-
isCollapsed() {
|
|
79
|
-
return this._isCollapsed;
|
|
80
|
-
}
|
|
81
|
-
getElement() {
|
|
82
|
-
return this._elements.wrapper;
|
|
83
|
-
}
|
|
84
|
-
getEventStream() {
|
|
85
|
-
return this._eventStream;
|
|
86
|
-
}
|
|
87
|
-
getStopper() {
|
|
88
|
-
return this._stopper;
|
|
89
|
-
}
|
|
90
|
-
destroy() {
|
|
91
|
-
this._eventStream.end();
|
|
92
|
-
this._elements.wrapper.remove();
|
|
93
|
-
}
|
|
94
|
-
_setupElements() {
|
|
95
|
-
const {
|
|
96
|
-
wrapper,
|
|
97
|
-
expander,
|
|
98
|
-
navItem,
|
|
99
|
-
name,
|
|
100
|
-
subNav,
|
|
101
|
-
subNavInner,
|
|
102
|
-
accessory
|
|
103
|
-
} = this._elements;
|
|
104
|
-
wrapper.className = `inboxsdk__navItem_wrapper inboxsdk__navItem_level${this._level}`;
|
|
105
|
-
wrapper.setAttribute('tabindex', '-1');
|
|
106
|
-
wrapper.setAttribute('data-order-hint', String(this._orderHint));
|
|
107
|
-
navItem.setAttribute('role', 'menuitem');
|
|
108
|
-
expander.classList.add('inboxsdk__navItem_expander');
|
|
109
|
-
navItem.classList.add('inboxsdk__navItem');
|
|
110
|
-
name.classList.add('inboxsdk__navItem_name');
|
|
111
|
-
accessory.classList.add('inboxsdk__navItem_accessory');
|
|
112
|
-
subNav.classList.add('inboxsdk__navItem_subNav');
|
|
113
|
-
subNavInner.classList.add('inboxsdk__navItem_subNavInner');
|
|
114
|
-
|
|
115
|
-
// Arrow SVG
|
|
116
|
-
expander.innerHTML = '<svg><polygon points="16.59 8.59 12 13.17 7.41 8.59 6 10 12 16 18 10"></polygon></svg>';
|
|
117
|
-
navItem.appendChild(expander);
|
|
118
|
-
navItem.appendChild(name);
|
|
119
|
-
navItem.appendChild(accessory);
|
|
120
|
-
wrapper.appendChild(navItem);
|
|
121
|
-
subNav.appendChild(subNavInner);
|
|
122
|
-
wrapper.appendChild(subNav);
|
|
123
|
-
this._eventStream.plug(_kefir.default.fromEvents(navItem, 'click').filter(() => !this._disabled).map(domEvent => {
|
|
124
|
-
domEvent.stopPropagation();
|
|
125
|
-
domEvent.preventDefault();
|
|
126
|
-
return {
|
|
127
|
-
eventName: 'click',
|
|
128
|
-
domEvent
|
|
129
|
-
};
|
|
130
|
-
}));
|
|
131
|
-
_kefir.default.fromEvents(expander, 'click').takeUntilBy(this._stopper).filter(() => this._children > 0).onValue(domEvent => {
|
|
132
|
-
this.toggleCollapse();
|
|
133
|
-
domEvent.stopPropagation();
|
|
134
|
-
});
|
|
135
|
-
}
|
|
136
|
-
_collapse() {
|
|
137
|
-
const {
|
|
138
|
-
subNav,
|
|
139
|
-
subNavInner
|
|
140
|
-
} = this._elements;
|
|
141
|
-
this._transitionResetter.emit(null);
|
|
142
|
-
this._elements.wrapper.classList.add('inboxsdk__navItem_collapsed');
|
|
143
|
-
subNav.style.height = `${subNavInner.clientHeight}px`;
|
|
144
|
-
subNav.clientHeight; // Force layout
|
|
145
|
-
subNav.style.height = '0';
|
|
146
|
-
_kefir.default.merge([_kefir.default.fromEvents(subNav, 'transitionend'), _kefir.default.later(750)]).takeUntilBy(this._transitionResetter).take(1).onValue(() => {
|
|
147
|
-
subNav.style.display = 'none';
|
|
148
|
-
});
|
|
149
|
-
this._eventStream.emit({
|
|
150
|
-
eventName: 'collapsed'
|
|
151
|
-
});
|
|
152
|
-
}
|
|
153
|
-
_expand() {
|
|
154
|
-
const {
|
|
155
|
-
subNav,
|
|
156
|
-
subNavInner
|
|
157
|
-
} = this._elements;
|
|
158
|
-
this._transitionResetter.emit(null);
|
|
159
|
-
this._elements.wrapper.classList.remove('inboxsdk__navItem_collapsed');
|
|
160
|
-
subNav.style.display = '';
|
|
161
|
-
subNav.style.height = `${subNavInner.clientHeight}px`;
|
|
162
|
-
_kefir.default.merge([_kefir.default.fromEvents(subNav, 'transitionend'), _kefir.default.later(750)]).takeUntilBy(this._transitionResetter).take(1).onValue(() => {
|
|
163
|
-
subNav.style.height = '';
|
|
164
|
-
});
|
|
165
|
-
this._eventStream.emit({
|
|
166
|
-
eventName: 'expanded'
|
|
167
|
-
});
|
|
168
|
-
}
|
|
169
|
-
_update(descriptor) {
|
|
170
|
-
this._updateName(descriptor.name);
|
|
171
|
-
this._updateType(descriptor.type);
|
|
172
|
-
this._updateExpander(descriptor);
|
|
173
|
-
this._updateDisabledState(descriptor);
|
|
174
|
-
this._updateIcon(descriptor);
|
|
175
|
-
this._updateAccessory(descriptor.accessory);
|
|
176
|
-
this._updateOrder(descriptor.orderHint || descriptor.orderHint === 0 ? descriptor.orderHint : Number.MAX_SAFE_INTEGER);
|
|
177
|
-
}
|
|
178
|
-
_updateName(name) {
|
|
179
|
-
if (this._name === name) return;
|
|
180
|
-
this._elements.name.textContent = name;
|
|
181
|
-
this._elements.name.setAttribute('title', name);
|
|
182
|
-
this._name = name;
|
|
183
|
-
}
|
|
184
|
-
_updateType() {
|
|
185
|
-
let type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _navItemTypes.default.NAVIGATION;
|
|
186
|
-
if (this._type === type) return;
|
|
187
|
-
this._elements.navItem.classList.toggle('inboxsdk__navItem_link', type === _navItemTypes.default.LINK);
|
|
188
|
-
this._type = type;
|
|
189
|
-
}
|
|
190
|
-
_updateExpander(_ref) {
|
|
191
|
-
let {
|
|
192
|
-
backgroundColor,
|
|
193
|
-
expanderForegroundColor
|
|
194
|
-
} = _ref;
|
|
195
|
-
this._elements.expander.style.backgroundColor = backgroundColor || '';
|
|
196
|
-
const arrow = (0, _querySelectorOrFail.default)(this._elements.expander, 'polygon');
|
|
197
|
-
arrow.style.fill = expanderForegroundColor || '';
|
|
198
|
-
this._elements.wrapper.classList.toggle('inboxsdk__navItem_hasColor', typeof backgroundColor === 'string');
|
|
199
|
-
}
|
|
200
|
-
_updateIcon(descriptor) {
|
|
201
|
-
this._elements.navItem.classList.toggle('inboxsdk__navItem_hasIcon', (!this._disabled || this._level > 0) && Boolean(descriptor.iconUrl || descriptor.iconClass));
|
|
202
|
-
(0, _updateIcon.default)(this._iconSettings, this._elements.navItem, false, descriptor.iconClass, descriptor.iconUrl, this._elements.name);
|
|
203
|
-
}
|
|
204
|
-
_updateAccessory(accessory) {
|
|
205
|
-
let forceUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
206
|
-
if (!forceUpdate && this._accessory === accessory) return;
|
|
207
|
-
if (this._accessoryView) {
|
|
208
|
-
this._accessoryView.destroy();
|
|
209
|
-
this._accessoryView = null;
|
|
210
|
-
}
|
|
211
|
-
if (accessory && !this._disabled) {
|
|
212
|
-
this._accessoryView = this._createAccessory(accessory);
|
|
213
|
-
}
|
|
214
|
-
this._accessory = accessory;
|
|
215
|
-
}
|
|
216
|
-
_updateDisabledState(descriptor) {
|
|
217
|
-
this._disabled = !(descriptor.routeID || descriptor.onClick) || this._level === 0 && this._children > 0;
|
|
218
|
-
this._elements.wrapper.classList.toggle('inboxsdk__navItem_disabled', this._disabled);
|
|
219
|
-
}
|
|
220
|
-
_updateOrder(orderHint) {
|
|
221
|
-
if (this._orderHint === orderHint) return;
|
|
222
|
-
this._elements.wrapper.setAttribute('data-order-hint', String(orderHint));
|
|
223
|
-
this._orderHint = orderHint;
|
|
224
|
-
this._eventStream.emit({
|
|
225
|
-
eventName: 'orderChanged'
|
|
226
|
-
});
|
|
227
|
-
}
|
|
228
|
-
_updateChildrenClass() {
|
|
229
|
-
this._elements.wrapper.classList.toggle('inboxsdk__navItem_hasChildren', this._children > 0);
|
|
230
|
-
}
|
|
231
|
-
_createAccessory(accessory) {
|
|
232
|
-
switch (accessory.type) {
|
|
233
|
-
case 'CREATE':
|
|
234
|
-
return this._createCreateAccessory(accessory);
|
|
235
|
-
case 'ICON_BUTTON':
|
|
236
|
-
return this._createIconButtonAccessory(accessory);
|
|
237
|
-
case 'DROPDOWN_BUTTON':
|
|
238
|
-
return this._createDropdownButtonAccessory(accessory);
|
|
239
|
-
default:
|
|
240
|
-
throw new Error('A type must be specified for NavItem accessories');
|
|
241
|
-
}
|
|
242
|
-
}
|
|
243
|
-
_createCreateAccessory(accessory) {
|
|
244
|
-
const {
|
|
245
|
-
onClick
|
|
246
|
-
} = accessory;
|
|
247
|
-
return this._createIconButtonAccessory({
|
|
248
|
-
onClick,
|
|
249
|
-
iconUrl: '//ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/2x/ic_add-cluster_24px_g60_r3_2x.png'
|
|
250
|
-
});
|
|
251
|
-
}
|
|
252
|
-
_createDropdownButtonAccessory(accessory) {
|
|
253
|
-
const {
|
|
254
|
-
onClick
|
|
255
|
-
} = accessory;
|
|
256
|
-
return this._createIconButtonAccessory({
|
|
257
|
-
onClick,
|
|
258
|
-
iconUrl: '//www.gstatic.com/images/icons/material/system/2x/settings_black_18dp.png'
|
|
259
|
-
}, true);
|
|
260
|
-
}
|
|
261
|
-
_createIconButtonAccessory(accessory) {
|
|
262
|
-
let hasDropdown = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
263
|
-
if (!accessory.onClick) throw new Error('An onClick handler is required');
|
|
264
|
-
this._elements.wrapper.classList.add('inboxsdk__navItem_hasAccessory');
|
|
265
|
-
(0, _updateIcon.default)({}, this._elements.accessory, false, accessory.iconClass, accessory.iconUrl);
|
|
266
|
-
const iconEl = (0, _querySelectorOrFail.default)(this._elements.accessory, '.inboxsdk__button_icon');
|
|
267
|
-
iconEl.setAttribute('tabindex', '-1');
|
|
268
|
-
const destroyStopper = (0, _kefirStopper.default)();
|
|
269
|
-
let dropdown = null;
|
|
270
|
-
_kefir.default.fromEvents(this._elements.accessory, 'click').takeUntilBy(this._stopper).takeUntilBy(destroyStopper).onValue(event => {
|
|
271
|
-
event.preventDefault();
|
|
272
|
-
event.stopPropagation();
|
|
273
|
-
if (hasDropdown) {
|
|
274
|
-
if (dropdown) {
|
|
275
|
-
dropdown.close();
|
|
276
|
-
return;
|
|
277
|
-
} else {
|
|
278
|
-
iconEl.classList.add('inboxsdk__active');
|
|
279
|
-
dropdown = new _dropdownView.default(new _inboxDropdownView.default(), this._elements.accessory);
|
|
280
|
-
dropdown.setPlacementOptions({
|
|
281
|
-
position: 'right',
|
|
282
|
-
hAlign: 'left',
|
|
283
|
-
vAlign: 'top',
|
|
284
|
-
buffer: 10
|
|
285
|
-
});
|
|
286
|
-
dropdown.on('destroy', () => {
|
|
287
|
-
iconEl.classList.remove('inboxsdk__active');
|
|
288
|
-
dropdown = null;
|
|
289
|
-
});
|
|
290
|
-
}
|
|
291
|
-
}
|
|
292
|
-
accessory.onClick({
|
|
293
|
-
dropdown
|
|
294
|
-
});
|
|
295
|
-
});
|
|
296
|
-
_kefir.default.merge([this._stopper, destroyStopper]).take(1).onValue(() => {
|
|
297
|
-
if (dropdown) {
|
|
298
|
-
dropdown.close();
|
|
299
|
-
}
|
|
300
|
-
});
|
|
301
|
-
const destroy = () => {
|
|
302
|
-
this._elements.wrapper.classList.remove('inboxsdk__navItem_hasAccessory');
|
|
303
|
-
this._elements.accessory.innerHTML = '';
|
|
304
|
-
destroyStopper.destroy();
|
|
305
|
-
};
|
|
306
|
-
return {
|
|
307
|
-
destroy
|
|
308
|
-
};
|
|
309
|
-
}
|
|
310
|
-
}
|
|
311
|
-
exports.default = InboxNavItemView;
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.default = waitForAnimationClickBlockerGone;
|
|
8
|
-
var _once = _interopRequireDefault(require("lodash/once"));
|
|
9
|
-
var _find = _interopRequireDefault(require("lodash/find"));
|
|
10
|
-
var _kefir = _interopRequireDefault(require("kefir"));
|
|
11
|
-
var _makeMutationObserverChunkedStream = _interopRequireDefault(require("../../lib/dom/make-mutation-observer-chunked-stream"));
|
|
12
|
-
const getAnimationClickBlocker = (0, _once.default)(() => (0, _find.default)(document.body.children, el => {
|
|
13
|
-
const c = window.getComputedStyle(el);
|
|
14
|
-
return c.position === 'fixed' && parseFloat(c.top) === 0 && parseFloat(c.bottom) === 0 && parseFloat(c.left) === 0 && parseFloat(c.right) === 0;
|
|
15
|
-
}));
|
|
16
|
-
function waitForAnimationClickBlockerGone() {
|
|
17
|
-
const el = getAnimationClickBlocker();
|
|
18
|
-
|
|
19
|
-
// Wait for (the animationClickBlocker to appear OR 150 ms to pass), then
|
|
20
|
-
// wait for the animationClickBlocker to disappear.
|
|
21
|
-
return (0, _makeMutationObserverChunkedStream.default)(el, {
|
|
22
|
-
attributes: true
|
|
23
|
-
}).toProperty(() => undefined).filter(() => window.getComputedStyle(el).display !== 'none').merge(_kefir.default.later(150)).take(1).flatMap(() => (0, _makeMutationObserverChunkedStream.default)(el, {
|
|
24
|
-
attributes: true
|
|
25
|
-
}).toProperty(() => undefined)).filter(() => window.getComputedStyle(el).display === 'none').map(() => undefined).take(1);
|
|
26
|
-
}
|