@@ -4,27 +4,104 @@ window.onload = function() {
44};
55*/
66
7- function logTabs ( tabs ) {
8- const popupList = document . getElementById ( 'tablist-container' ) ;
9- let urlList = [ ] ;
7+ // get array of tabs call event listeners (aka main function)
8+ const logTabs = ( tabs ) => {
9+ const popupList = document . querySelector ( '.tablist-items' ) ;
1010
11- // get all tab URLs and push to array
11+ // get all tab URLs and render list
1212 for ( let tab of tabs ) {
13- // tab.url requires the `tabs` permission
14- urlList . push ( tab . url ) ;
13+ createTabList ( tab , popupList ) ;
1514 }
1615
17- // append URLs as li items to popup
18- urlList . forEach ( function ( url ) {
19- const listItem = document . createElement ( 'li' ) ;
20- listItem . appendChild ( document . createTextNode ( url ) ) ;
21- popupList . appendChild ( listItem ) ;
22- } ) ;
23- }
16+ // creat eventListeners
17+ tabListEvents ( ) ;
18+ } ;
19+
20+ // create list item and append it to popup
21+ const createTabList = ( tab , popupList ) => {
22+ const listItemInput = document . createElement ( 'input' ) ;
23+ listItemInput . setAttribute ( 'type' , 'checkbox' ) ;
24+ listItemInput . setAttribute ( 'id' , tab . id ) ;
25+ listItemInput . setAttribute ( 'name' , 'tab' ) ;
26+ listItemInput . setAttribute ( 'value' , tab . url ) ;
27+
28+ const listItemLabel = document . createElement ( 'label' ) ;
29+ listItemLabel . setAttribute ( 'for' , tab . id ) ;
30+ listItemLabel . appendChild ( document . createTextNode ( tab . title ) ) ;
31+
32+ const listItem = document . createElement ( 'li' ) ;
33+ listItem . setAttribute ( 'class' , 'tablist-checkbox-wrapper' ) ;
34+ listItem . appendChild ( listItemInput ) ;
35+ listItem . appendChild ( listItemLabel ) ;
36+
37+ popupList . appendChild ( listItem ) ;
38+ } ;
39+
40+ // create all needed event listeners
41+ const tabListEvents = ( ) => {
42+ // add event listener on wrapper and check for class?
43+ const toggleSelect = document . getElementById ( 'selectAll' ) ,
44+ deleteBtn = document . querySelector ( '.tablist-delete-btn' ) ,
45+ exportBtn = document . querySelector ( '.tablist-export-btn' ) ,
46+ listBtn = document . querySelector ( '.tablist-list-btn' ) ;
2447
25- function onError ( error ) {
48+ // check or uncheck all items in tablist
49+ toggleSelect . addEventListener ( 'click' , ( event ) => {
50+ // TODO: save all previosly checked?
51+ const checkAllItems = event . target . checked ;
52+ const checkboxes = Array . from ( document . getElementsByName ( 'tab' ) ) ;
53+ checkboxes . map ( checkbox => {
54+ if ( checkAllItems ) {
55+ checkbox . checked = true ;
56+ } else {
57+ checkbox . checked = false ;
58+ }
59+ } ) ;
60+ } ) ;
61+
62+ // collect and delete all checked items
63+ deleteBtn . addEventListener ( 'click' , ( ) => {
64+ console . log ( 'click delete' ) ;
65+ const checkboxes = Array . from ( document . getElementsByName ( 'tab' ) ) ;
66+ let selectedTabIds = [ ] ;
67+ checkboxes . map ( checkbox => {
68+ if ( checkbox . checked ) {
69+ console . log ( checkbox ) ;
70+ selectedTabIds . push ( parseInt ( checkbox . id ) ) ;
71+ }
72+ } ) ;
73+ const removing = browser . tabs . remove ( selectedTabIds ) ;
74+ removing . then ( closePopup , onError ) ;
75+ } ) ;
76+
77+ exportBtn . addEventListener ( 'click' , ( ) => {
78+ console . log ( 'click export' ) ;
79+ const checkboxes = Array . from ( document . getElementsByName ( 'tab' ) ) ;
80+ let selectedTabUrls = [ ] ;
81+ checkboxes . map ( checkbox => {
82+ if ( checkbox . checked ) {
83+ selectedTabUrls . push ( checkbox . value ) ;
84+ }
85+ } ) ;
86+ const creating = browser . tabs . create ( {
87+ // data urls not possible: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/create
88+ // add array to storage and retrieve it on new site:
89+ // https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage
90+ // https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages
91+ //url:'data:text/plain;charset=utf-8;base64,' + btoa(selectedTabUrls.join(''))
92+ } ) ;
93+ //creating.then(closePopup, onError);
94+ } ) ;
95+ } ;
96+
97+ const closePopup = ( ) => {
98+ console . log ( 'done, closing' ) ;
99+ window . close ( ) ;
100+ } ;
101+
102+ const onError = ( error ) => {
26103 console . log ( `Error: ${ error } ) ;
27- }
104+ } ;
28105
29106const querying = browser . tabs . query ( { } ) ;
30107querying . then ( logTabs , onError ) ;
0 commit comments