Mercurial > addons > firefox-addons > set-aside

comparison sidebar/js/tab-collection-manager.js @ 2:49ec0da1e698

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Replace tab list scroll bar with scroll buttons
author Guido Berhoerster <guido+set-aside@berhoerster.name>
date Wed, 21 Nov 2018 11:39:07 +0100
parents b0827360b8e4
children
comparison
equal deleted inserted replaced
1:b0827360b8e4 2:49ec0da1e698
36 document.querySelector('#message').textContent = 36 document.querySelector('#message').textContent =
37 browser.i18n.getMessage('emptySidebarMessage'); 37 browser.i18n.getMessage('emptySidebarMessage');
38 38
39 document.body.addEventListener('click', this); 39 document.body.addEventListener('click', this);
40 40
41 window.addEventListener('optimizedResize', this);
42
41 this.isInitialized = true; 43 this.isInitialized = true;
42 } 44 }
43 45
44 createTabCollectionNode(tabCollection) { 46 createTabCollectionNode(tabCollection) {
45 let tabCollectionNode = 47 let tabCollectionNode =
102 prependTabCollection(tabCollection) { 104 prependTabCollection(tabCollection) {
103 console.log('prepending tab collection', tabCollection, 105 console.log('prepending tab collection', tabCollection,
104 'to tab collections'); 106 'to tab collections');
105 this.tabCollectionsElement 107 this.tabCollectionsElement
106 .prepend(this.createTabCollectionNode(tabCollection)); 108 .prepend(this.createTabCollectionNode(tabCollection));
109 this.handleResize();
107 } 110 }
108 111
109 replaceTabCollection(tabCollection) { 112 replaceTabCollection(tabCollection) {
110 console.log('replacing tab collection', tabCollection); 113 console.log('replacing tab collection', tabCollection);
111 this.tabCollectionsElement.querySelector(`[data-tab-collection-uuid=` + 114 this.tabCollectionsElement.querySelector(`[data-tab-collection-uuid=` +
112 `"${tabCollection.uuid}"]`) 115 `"${tabCollection.uuid}"]`)
113 .replaceWith(this.createTabCollectionNode(tabCollection)); 116 .replaceWith(this.createTabCollectionNode(tabCollection));
117 this.handleResize();
114 } 118 }
115 119
116 removeTabCollection(tabCollectionUuid) { 120 removeTabCollection(tabCollectionUuid) {
117 console.log('removing tab collection %s', tabCollectionUuid); 121 console.log('removing tab collection %s', tabCollectionUuid);
118 this.tabCollectionsElement 122 this.tabCollectionsElement
154 case 'tabCollectionChanged': 158 case 'tabCollectionChanged':
155 this.replaceTabCollection(message.tabCollection); 159 this.replaceTabCollection(message.tabCollection);
156 break; 160 break;
157 } 161 }
158 this.sortTabCollections(); 162 this.sortTabCollections();
163 }
164
165 handleTabCollectionChanged(tabCollectionContainerElement) {
166 let tabsElement = tabCollectionContainerElement
167 .querySelector('.tab-collection-tabs');
168 let scrollLeftElement = tabCollectionContainerElement
169 .querySelector('.scroll-left');
170 let scrollRightElement = tabCollectionContainerElement
171 .querySelector('.scroll-right');
172 if (tabsElement.scrollWidth > tabsElement.clientWidth) {
173 scrollLeftElement.classList.add('scroll-visible');
174 scrollRightElement.classList.add('scroll-visible');
175 } else {
176 scrollLeftElement.classList.remove('scroll-visible');
177 scrollRightElement.classList.remove('scroll-visible');
178 }
179 }
180
181 handleResize() {
182 let tabCollectionContainerElements =
183 document.querySelectorAll('.tab-collection-tabs-container');
184 for (let tabCollectionContainerElement of
185 tabCollectionContainerElements) {
186 this.handleTabCollectionChanged(tabCollectionContainerElement);
187 }
159 } 188 }
160 189
161 handleEvent(ev) { 190 handleEvent(ev) {
162 console.log('DOM event', ev); 191 console.log('DOM event', ev);
163 if (ev.type === 'click') { 192 if (ev.type === 'click') {
189 this.port.postMessage({ 218 this.port.postMessage({
190 type: 'removeTab', 219 type: 'removeTab',
191 tabCollectionUuid, 220 tabCollectionUuid,
192 tabUuid 221 tabUuid
193 }); 222 });
223 } else if (ev.target.classList.contains('tabs-scroll-button')) {
224 // scroll tab list
225 let tabsElement = ev.target
226 .closest('.tab-collection-tabs-container')
227 .querySelector('.tab-collection-tabs');
228 if (ev.target.classList.contains('scroll-left')) {
229 tabsElement.scrollLeft = Math.max(tabsElement.scrollLeft -
230 tabsElement.clientWidth * .75, 0);
231 } else {
232 tabsElement.scrollLeft = Math.min(tabsElement.scrollLeft +
233 tabsElement.clientWidth * .75,
234 tabsElement.scrollLeftMax);
235 }
194 } else { 236 } else {
195 let tabItemElement = ev.target.closest('.tab-item'); 237 let tabItemElement = ev.target.closest('.tab-item');
196 if (tabItemElement !== null) { 238 if (tabItemElement !== null) {
197 // restore tab from collection 239 // restore tab from collection
198 let tabCollectionUuid = 240 let tabCollectionUuid =
205 tabUuid, 247 tabUuid,
206 windowId: browser.windows.WINDOW_ID_CURRENT 248 windowId: browser.windows.WINDOW_ID_CURRENT
207 }); 249 });
208 } 250 }
209 } 251 }
252 } else if (ev.type === 'optimizedResize') {
253 // window has been resized
254 this.handleResize();
210 } 255 }
211 } 256 }
212 } 257 }
213 258
214 browser.windows.getCurrent().then(currentWindow => { 259 browser.windows.getCurrent().then(currentWindow => {
217 document.querySelector('#message').textContent = 262 document.querySelector('#message').textContent =
218 browser.i18n.getMessage('incognitoModeMessage'); 263 browser.i18n.getMessage('incognitoModeMessage');
219 return; 264 return;
220 } 265 }
221 266
267 function throttleResize(type, name, obj) {
268 obj = obj || window;
269 var isRunning = false;
270 var func = function() {
271 if (isRunning) {
272 return;
273 }
274
275 isRunning = true;
276 requestAnimationFrame(function() {
277 obj.dispatchEvent(new CustomEvent(name));
278 isRunning = false;
279 });
280 };
281 obj.addEventListener(type, func);
282 };
283 throttleResize('resize', 'optimizedResize');
284
222 tabManager = new TabManager(); 285 tabManager = new TabManager();
223 }); 286 });