├── .gitignore
├── example01.png
├── chrome_extension_notes.md
├── extension
    ├── manifest.json
    └── verticalSheetTabs.js
├── LICENSE
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | 
2 | *.bak
3 | 


--------------------------------------------------------------------------------
/example01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JimHokanson/vertical_gsheets_selector/HEAD/example01.png


--------------------------------------------------------------------------------
/chrome_extension_notes.md:
--------------------------------------------------------------------------------
 1 | Chrome extension notes:
 2 | 
 3 | 
 4 | Content scripts allows you to add scripts:
 5 | https://developer.chrome.com/extensions/content_scripts
 6 | 
 7 | 
 8 | Steps:
 9 | 1. Detect working on a sheets page
10 | 2. Call the script code
11 | 3. Inject javascript
12 | 4. Run code ...


--------------------------------------------------------------------------------
/extension/manifest.json:
--------------------------------------------------------------------------------
 1 |  {
 2 |     "name": "Vertical Sheet Tabs",
 3 |     "version": "1.0",
 4 |     "description": "Allows sheet navigation with vertical sheet tabs!",
 5 |     "manifest_version": 3,
 6 |     "content_scripts": [
 7 |     {
 8 |       "matches": ["https://docs.google.com/spreadsheets/*"],
 9 |       "run_at": "document_idle",
10 |       "js": ["verticalSheetTabs.js"]
11 |     }
12 |     ]
13 |     
14 |   }
15 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Jim Hokanson
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vertical GSheets Selector #
 2 | 
 3 | This code is currently a work in progres. You can use it to display a sidebar that displays sheet names. When you click on a sheet it should navigate to that sheet.
 4 | 
 5 | **The software available on this website are provided "as is" without warranty of any kind, either express or implied. Use at your own risk.**
 6 | 
 7 | 
 8 | ![Example screenshot](example01.png)
 9 | 
10 | # Setup #
11 | 
12 | 1. Navigate to chrome://extensions/
13 | 2. Make sure developer mode is enabled (upper right)
14 | 3. Select "load unpacked" (upper left) and choose the code directory labeled "extension" in this repo.
15 | 
16 | # Usage #
17 | 
18 | 1. Load a Google Spreadsheet
19 | 2. After loading has finished, go to the **"Add-ons"** menu and select **"Launch Vert Tabs"**. A sidebar should pop-up on the right.
20 | 3. Clicking on a sheet name on the right should navigate to the correct sheet.
21 | 
22 | # Warning Notes #
23 | 
24 | This is my first js project and currently the code needs to be cleaned up and documented. I still have a few features I want to add like listening for sheet deletions, renames, and selections from the main horizontal selector. I don't attempt to manipulate the data in the sheet in anyway, but still, use at your own risk.
25 | 
26 | # Feature Status #
27 | 
28 | **Mirroring Features** - i.e. tracking what happens from interacting with the horizontal interface
29 | 
30 | - update on add sheet - DONE
31 | - update on sheet selection via all sheet selector - NYI
32 | - update on sheet dragging - DONE
33 | - update on sheet left click - DONE
34 | - Update on sheet right click - DONE
35 | - Move Left & Right - DONE
36 | - Hide Sheet - NYI - just needs to respect hidden status as observer captures DOM change but element still exists (presumably class list change)
37 | - Color Support - NYI
38 | - Rename - NYI
39 | - Duplicate - DONE
40 | - Delete - DONE
41 | 
42 | **Other Completed Features**
43 | 
44 | - resize via dragging side of panel
45 | - resize on hiding menus - sometimes flaky ...
46 | - force rerender - click on the word "sheets" on top to force rerendering
47 | 
48 | TODO
49 | 
50 | # Improvements #
51 | 
52 | - fix resize to be more responsive, base on target width/height, not on being different - use observers ...
53 | - clean up code!!!!
54 | - make force rerender more obvious (add refresh button?)
55 | - drag and drop divs
56 | - on close download window, change height - NYI


--------------------------------------------------------------------------------
/extension/verticalSheetTabs.js:
--------------------------------------------------------------------------------
   1 | /*
   2 | Resize events
   3 | --------------
   4 | 1. window resizes
   5 | 2. hide menus
   6 | 3. hide the side app thing
   7 | 
   8 | Next steps
   9 | ----------------------------------
  10 | 1. DONE Handle hiding of the side panel - might require refactoring input to resize
  11 | 2. DONE Add listener for bottom sheet select updating sidebar
  12 | 3. DONE resize by dragging
  13 | 	- cursor is in place for action - needs callbacks
  14 | 4. delete listener
  15 | 5. DONE "add sheet" listener
  16 |    - add sheet puts a sheets to the right of the current sheet
  17 | 6. DONE fix menu loading - run delayed check instead of fixed wait
  18 | 7. DONE move listeners to parents of vert-sheets
  19 | 8. DONE fix clicking - color the whole sheet
  20 | 9. DONE add indictor for resizing
  21 | 10. try resizing sheet text on dragging instead of showing a temporary line
  22 | 11. DONE allow resizing in empty space in sidebar ...
  23 | 12. DONE make border of sheets black to avoid strange color when selected
  24 | 13. support move sheet detection
  25 |    - on mouse down fire a listener that looks for mouse up
  26 | 14. support detecting sheet selection when clicking on all-sheets
  27 | 15. rename listener
  28 | 
  29 | //Scrollbar
  30 | //- need to adjust after it has been adjusted already by browser
  31 | //- need to consider all resize events AND sheet changes
  32 | //- z-index needs to go high otherwise not visible
  33 | //- left would need to change to shift over ...
  34 | <div class="native-scrollbar native-scrollbar-ltr native-scrollbar-y" style="height: 229px; left: 1354px; top: 23.8889px; z-index: 50;">
  35 |    <div style="width: 1px; height: 21151px;"></div>
  36 | </div>
  37 | 
  38 | //Delete, rename .docs-sheet-tab-menu
  39 | <div class="goog-menu goog-menu-vertical docs-sheet-tab-menu goog-menu-noicon docs-menu-hide-mnemonics" role="menu" aria-haspopup="true" style="user-select: none; visibility: visible; left: 205.313px; top: 79.9827px; display: none;">
  40 |    <div class="goog-menuitem" role="menuitem" id=":z" style="user-select: none;">
  41 |       <div class="goog-menuitem-content" style="user-select: none;">Delete</div>
  42 |    </div>
  43 |    <div class="goog-menuitem" role="menuitem" id=":10" style="user-select: none;">
  44 |       <div class="goog-menuitem-content" style="user-select: none;">Duplicate</div>
  45 |    </div>
  46 |    
  47 | 
  48 | 
  49 | //container for the sheets
  50 | <div class="docs-sheet-container-bar goog-toolbar goog-inline-block" role="toolbar" style="user-select: none; width: 916px;" aria-activedescendant=":1u">
  51 |    <div class="goog-inline-block docs-sheet-tab docs-material" role="button" aria-expanded="false" tabindex="0" aria-haspopup="true" id=":y">
  52 | 
  53 | //toggle side panel
  54 | //<div class="companion-collapser-button-container" aria-label="Toggle side panel" role="navigation">
  55 |    <div class="app-switcher-button companion-collapser-button" aria-pressed="false" role="button" aria-label="Hide side panel" tabindex="0" style="user-select: none;">
  56 |    
  57 |    
  58 | //sheet dropdown
  59 | //<div class="docs-icon goog-inline-block docs-sheet-tab-dropdown" aria-hidden="true">
  60 |    <div class="docs-icon-img-container docs-icon-img goog-inline-block docs-icon-arrow-dropdown">&nbsp;</div>
  61 | </div>
  62 | 
  63 | 
  64 | 
  65 | */
  66 | 
  67 | //#region globals
  68 | var menuIsHidden = false;
  69 | var sideIsHidden = false;
  70 | var gridHeight;
  71 | var xyz = 1;
  72 | 
  73 | //We don't hijack into any of the functions for resizing so we basically
  74 | //need to track this at a known state, then on an event, call our code after
  75 | //this changes value
  76 | var sidePanelWidth;
  77 | var n_tries = 0;
  78 | var activeTag;
  79 | var tagFromError;
  80 | var sheetMenuListenerInitialized = false;
  81 | //Not sure what to make these values ...
  82 | var sidebarMinWidth = 80;
  83 | var sidebarMaxWidth = 500;
  84 | 
  85 | //#endregion globals
  86 | 
  87 | 
  88 | const ACTIVE_SHEET_TAB_CLASS = 'docs-sheet-active-tab';
  89 | const HSHEET_NAME_CLASS = 'TODO'
  90 | 
  91 | 
  92 | 
  93 | 
  94 | 
  95 | 
  96 | 
  97 | 
  98 | //------------------------------------------------------------------------------
  99 | //------------------------------------------------------------------------------
 100 | //						Sidebar Actions
 101 | //------------------------------------------------------------------------------
 102 | //------------------------------------------------------------------------------
 103 | 
 104 | //#region Sidebar Actions
 105 | 
 106 | function getSidebarTag(){
 107 | 	return document.getElementById('vert-sidebar');
 108 | }
 109 | 
 110 | function implementChildListUpdate(){
 111 | 	console.log('Updating based on childList update')
 112 | 	populateNavLinks();
 113 | }
 114 | 
 115 | var childListTimer;
 116 | const childListObserverCallback = function(mutationsList, observer) {
 117 | 
 118 | 	//If we want to be lazy we can just clear the timeout and set a new
 119 | 	//one to occur after 1s
 120 | 	//clearTimeout(timer);
 121 | 	//timer = setTimeout(logout, 10000);
 122 | 
 123 | 	// Use traditional 'for loops' for IE 11
 124 | 	for(let mutation of mutationsList) {
 125 | 		if (mutation.type === 'childList') {
 126 | 			//Delete
 127 | 
 128 | 			clearTimeout(childListTimer);
 129 | 			childListTimer = setTimeout(implementChildListUpdate,500)
 130 | 			//TODO: on delete a lot of nodes get deleted, we only care about 1
 131 | 			//which is why I think timeout would be good
 132 | 
 133 | 			//console.log('child node added/removed')
 134 | 
 135 | 			//console.log('A child node has been added or removed.');
 136 | 			//console.log(mutation)
 137 | 		}else{
 138 | 			//I don't think anything else will go through
 139 | 			console.log('mutation type: ' + mutation.type)
 140 | 		}
 141 | 		// else if (mutation.type === 'attributes' &&  mutation.attributeName === 'class') {
 142 | 		// 	console.log(mutation)
 143 | 		// 	//console.log('The ' + mutation.attributeName + ' attribute was modified.');
 144 | 		// }
 145 | 	}
 146 | };
 147 | 
 148 | var observer;
 149 | function launchSideBar(){
 150 | 
 151 | 	showSidebar();
 152 | 
 153 | 	if (observer === undefined) {
 154 | 		// Create an observer instance linked to the callback function
 155 | 		observer = new MutationObserver(childListObserverCallback);
 156 | 
 157 | 		// Start observing the target node for configured mutations
 158 | 		var outerContainer = document.querySelector('.docs-sheet-outer-container')
 159 | 		//https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit
 160 | 		//const config = { attributes: true, childList: true, subtree: true };
 161 | 		const config = {childList: true, subtree: true};
 162 | 		observer.observe(outerContainer, config);
 163 | 	}
 164 | 
 165 | 	populateNavLinks();
 166 | 
 167 | 	resizeSidebar("init");
 168 | }
 169 | 
 170 | function createVSheetTag(sheetName){
 171 | 	//Creates tag but does not attach it
 172 | 	let tag = document.createElement('div');
 173 | 	//For manipulation later ...
 174 | 	tag.setAttribute('id','sidebar-' + sheetName);
 175 | 	tag.setAttribute('class','vsheet-main')
 176 | 	tag.style.flexShrink = '0';
 177 | 	tag.style.display = 'flex'; //For left right display of t2,t3
 178 | 	tag.style.overflow = 'hidden'; //If the sheet name is too long hide it until user resizes
 179 | 	tag.style.backgroundColor = '#f1f3f4';
 180 | 	tag.style['whiteSpace'] = 'nowrap';
 181 | 	tag.style.cursor = 'pointer';
 182 | 	var t2 = document.createElement('div');
 183 | 
 184 | 	t2.setAttribute('class','vsheet-left');
 185 | 	t2.style.cursor = 'ew-resize';
 186 | 	t2.style.width = '5px';
 187 | 	//left - only put border on bottom
 188 | 	t2.style.borderWidth = '0 0 1px 0';
 189 | 	t2.style.borderStyle = 'solid';
 190 | 	t2.style.borderColor = 'black';
 191 | 	t2.style.display = 'inline-block';
 192 | 	//Not sure why width is not being respected with only 1 space
 193 | 	t2.innerHTML = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
 194 | 
 195 | 	//https://stackoverflow.com/questions/4171286/how-to-make-a-div-with-no-content-have-a-width
 196 | 	//This helps but doesn't force the desired spacing ...
 197 | 	//t2.style.minHeight = '1px';
 198 | 
 199 | 	var t3 = document.createElement('div');
 200 | 	t3.setAttribute('class','vsheet-right');
 201 | 	t3.style.paddingLeft = '5px';
 202 | 	//border on right and bottom
 203 | 	t3.style.borderWidth = '0 1px 1px 0';
 204 | 	t3.style.borderStyle = 'solid';
 205 | 	t3.style.borderColor = 'black';
 206 | 	t3.textContent = sheetName;
 207 | 	t3.style.display = 'block';
 208 | 	t3.style.width = '100%'; //If not there, the border shows up at the end of the word
 209 | 	t3.style.overflow = 'hidden';
 210 | 	t3.style.fontWeight = 'bold';
 211 | 
 212 | 
 213 | 	tag.appendChild(t2);
 214 | 	tag.appendChild(t3);
 215 | 
 216 | 	return tag;
 217 | }
 218 | 
 219 | function populateNavLinks(){
 220 | 
 221 | 	var parent = getVSheetsHolder();
 222 | 	var sheetTags = document.getElementsByClassName('docs-sheet-tab');
 223 | 
 224 | 	parent.innerHTML = '';
 225 | 	activeTag = null;
 226 | 
 227 | 	for (var i = 0; i < sheetTags.length; i++) {
 228 | 
 229 | 		var sourceTag = sheetTags[i];
 230 | 		
 231 | 		//Added this to support not showing hidden tabs
 232 | 		//
 233 | 		//Eventually it would be good to have a mode which toggles this behavior
 234 | 		//i.e., show or hide hidden tabs
 235 | 		if (sourceTag.style.display === 'none'){
 236 | 			continue;
 237 | 		}
 238 | 		
 239 | 		var spanTag = sourceTag.querySelector('.docs-sheet-tab-name');
 240 | 		let sheetName = spanTag.textContent;
 241 | 
 242 | 		var newTag = createVSheetTag(sheetName)
 243 | 
 244 | 		if (sourceTag.classList.contains(ACTIVE_SHEET_TAB_CLASS)){
 245 | 			setActive(newTag);
 246 | 		}
 247 | 
 248 | 		parent.appendChild(newTag);
 249 | 	}
 250 | 
 251 | 	var tag = document.createElement('div');
 252 | 	tag.style.flexGrow = '1';
 253 | 	tag.style.flexShrink = '1';
 254 | 	tag.style.width = '100%';
 255 | 	tag.style.flexBasis = '15px';
 256 | 
 257 | 	var t2 = document.createElement('div');
 258 | 	t2.setAttribute('class','vsheet-left');
 259 | 	t2.style.cursor = 'ew-resize';
 260 | 	t2.style.width = '5px';
 261 | 	t2.style.height = '100%';
 262 | 	//Not sure why width is not being respected with only 1 space
 263 | 	//t2.innerHTML = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
 264 | 	tag.appendChild(t2);
 265 | 
 266 | 	var t3 = document.createElement('div');
 267 | 	tag.appendChild(t3);
 268 | 
 269 | 	parent.appendChild(tag);
 270 | 
 271 | }
 272 | 
 273 | function refreshNavLayout(){
 274 | 	populateNavLinks();
 275 | }
 276 | 
 277 | function createSidebar(){
 278 | 
 279 | 	//var sidebar
 280 | 	var vs = document.createElement('div');
 281 | 	vs.setAttribute('id','vert-sidebar');
 282 | 	vs.style.display = 'none'; //Hidden to start, will go to flex
 283 | 	vs.style.position = 'absolute'; //We set position when showing (or other things)
 284 | 	vs.style.width = '100px';
 285 | 
 286 | 	//var left - we might get rid of this and move it's functionality into
 287 | 	//divs
 288 | 	var vl = document.createElement('div');
 289 | 	vl.style.backgroundColor = 'black';
 290 | 	//Sometimes 1px was showing as 0.985 or something like that and thus
 291 | 	//wasn't being rendered ...
 292 | 	vl.style.width = '2px';
 293 | 	vl.style.cursor = 'ew-resize';
 294 | 	//hack to ensure this is shown, not sure why it is needed ...
 295 | 	vl.innerHTML = '&nsbp;&nbsp;&nsbp;&nbsp;';
 296 | 	vl.addEventListener('mousedown',vsheetInitiateResize);
 297 | 	vs.appendChild(vl);
 298 | 
 299 | 	//var right
 300 | 	var vr = document.createElement('div');
 301 | 	vr.style.backgroundColor = 'white';
 302 | 	vr.style.width = '100%'; //Starting width, might resize
 303 | 	vs.appendChild(vr);
 304 | 
 305 | 	//var header
 306 | 	var vh = document.createElement('div');
 307 | 	vh.setAttribute('id','vert-header');
 308 | 	vh.style.backgroundColor = '#616161';
 309 | 	vh.style.overflow = 'hidden';
 310 | 	vh.style.color = 'white';
 311 | 	vh.style.fontWeight = 'bold';
 312 | 	vh.style.display = 'flex';
 313 | 	vh.style.cursor = 'default';
 314 | 	vh.style.borderWidth = '1px 1px 1px 0';
 315 | 	vh.style.borderStyle = 'solid';
 316 | 	vh.style.borderColor = 'black';
 317 | 	vr.appendChild(vh);
 318 | 
 319 | 	//var header #1
 320 | 	var vh1 = document.createElement('div');
 321 | 	vh1.style.cursor = 'ew-resize';
 322 | 	vh1.style.width = '5px';
 323 | 	vh1.innerHTML = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
 324 | 	vh1.addEventListener('mousedown',vsheetInitiateResize);
 325 | 	//vh1.addEventListener(vsheetInitiateResize);
 326 | 	vh.appendChild(vh1);
 327 | 
 328 | 	var vh2 = document.createElement('div');
 329 | 	vh2.style.padding = '10px 10px 10px 5px';
 330 | 	vh2.textContent = 'Sheets';
 331 | 	//Since we haven't implemented all listeners, let's have this be
 332 | 	//a fallback so that it is easy to refresh if things have changed
 333 | 	vh2.style.cursor = 'pointer';
 334 | 	vh2.addEventListener('mousedown',refreshNavLayout)
 335 | 	vh.appendChild(vh2);
 336 | 
 337 | 	//TODO: Create div that occupies space between name and close ...
 338 | 	var vh4 = document.createElement('div');
 339 | 	vh4.style.flexGrow = 1;
 340 | 	vh4.style.width = '100%';
 341 | 	vh.appendChild(vh4);
 342 | 
 343 | 	var vh3 = document.createElement('div');
 344 | 	vh3.setAttribute('id','vert-close');
 345 | 	//vh3.style.width = "100%";
 346 | 	vh3.style.direction = 'rtl';
 347 | 	vh3.style.padding = '10px';
 348 | 	vh3.style.cursor = 'pointer';
 349 | 	vh3.innerHTML = 'x';
 350 | 	vh.appendChild(vh3);
 351 | 
 352 | 	//Note, I made a content area in case we add more than just the links ...
 353 | 	var vc = document.createElement('div');
 354 | 	vc.setAttribute('id','vert-content');
 355 | 	vc.style.width = '100%';
 356 | 	vr.appendChild(vc);
 357 | 
 358 | 	var jlc = document.createElement('div');
 359 | 	jlc.setAttribute('id','jim-links-container');
 360 | 	jlc.style.overflowY = 'auto'; //scroll on vertical overflow
 361 | 	jlc.style.overflowX = 'hidden';
 362 | 	jlc.style.height = '300px'; //this will change
 363 | 	//Top right bottom left
 364 | 	//TODO: Both borders look bad in overflow or non-overflow case
 365 | 	//double border on bottom on overflow
 366 | 	//double border on right when no overflow
 367 | 	jlc.style.borderWidth = '0 1px 1px 0';
 368 | 	jlc.style.borderStyle = 'solid';
 369 | 	jlc.style.boxSizing = 'border-box';
 370 | 	jlc.style.direction = 'ltr';
 371 | 	jlc.style.display = 'flex';
 372 | 	jlc.style.flexDirection = 'column';
 373 | 	jlc.addEventListener("mousedown",vsheetJimLinksClickCallback)
 374 | 
 375 | 	vc.appendChild(jlc);
 376 | 
 377 | 	//var sidebar = div_tag.firstChild;
 378 | 	var bodyTag = document.getElementsByTagName('body')[0];
 379 | 	bodyTag.appendChild(vs);
 380 | 
 381 | 	var moveBar = document.createElement('div');
 382 | 	moveBar.setAttribute('id','vsheet-move-bar')
 383 | 	moveBar.style.backgroundColor = '#44ddff';
 384 | 	moveBar.style.width = '3px';
 385 | 	moveBar.style.height = '100px';
 386 | 	moveBar.style.position = 'absolute';
 387 | 	moveBar.style.display = 'none';
 388 | 
 389 | 	bodyTag.appendChild(moveBar);
 390 | 
 391 | 
 392 | 	close = document.getElementById('vert-close');
 393 | 	close.addEventListener("click", hideSidebar);
 394 | }
 395 | 
 396 | function hideSidebar(){
 397 | 	div = document.getElementById('vert-sidebar');
 398 | 	div.style.display = 'none';
 399 | }
 400 | 
 401 | function showSidebar(){
 402 | 	div = document.getElementById('vert-sidebar');
 403 | 	//div.style.display = null;
 404 | 	div.style.display = 'flex';
 405 | }
 406 | 
 407 | function vsheetJimLinksClickCallback(event){
 408 | 	//This is the main callback for clicks on the vsheet tags
 409 | 	//
 410 | 	//Currently calls are either for resizing or clicking a sheet to navigate
 411 | 	//vsheet-left
 412 | 	//vsheet-right
 413 | 	var target = event.target;
 414 | 	if (target.classList.contains('vsheet-right')){
 415 | 		switchToActive(target.parentNode);
 416 | 		clickSheet(target.textContent);
 417 | 	}else if (target.classList.contains('vsheet-left')){
 418 | 		//Resize call
 419 | 		vsheetInitiateResize(event);
 420 | 		event.preventDefault();
 421 | 	}else{
 422 | 		console.log('CODE FAILURE: unexpected tag option for callback')
 423 | 	}
 424 | }
 425 | 
 426 | var startResizeX;
 427 | var xLeftMax, xRightMax;
 428 | 
 429 | var sidebarMinWidth = 80;
 430 | var sidebarMaxWidth = 500;
 431 | 
 432 | var moveFunction;
 433 | 
 434 | function vsheetInitiateResize(event){
 435 | 	startResizeX = event.clientX;
 436 | 
 437 | 	var moveBar = document.getElementById('vsheet-move-bar');
 438 | 	var sidebar = getSidebarTag();
 439 | 	//top = ?
 440 | 	//left = ?
 441 | 	moveBar.style.top = sidebar.style.top;
 442 | 	moveBar.style.left = window.getComputedStyle(sidebar).left;
 443 | 	moveBar.style.height = window.getComputedStyle(sidebar).height;
 444 | 
 445 | 	var sidebar = getSidebarTag();
 446 | 	var currentWidth = sidebar.offsetWidth;
 447 | 
 448 | 	var maxGrow = sidebarMaxWidth - currentWidth;
 449 | 	var maxShrink = sidebarMinWidth - currentWidth;
 450 | 	var startLeft = parseInt(moveBar.style.left,10);
 451 | 
 452 | 	//Assignment to global so we can remove later ...
 453 | 	moveFunction = function(event){vsheetMidResize(event,moveBar,maxGrow,maxShrink,startLeft)};
 454 | 
 455 | 	document.addEventListener('mousemove', moveFunction, false);
 456 | 	document.addEventListener('mouseup', vsheetFinalizeResize, false);
 457 | 
 458 | 	moveBar.style.display = null;
 459 | }
 460 | 
 461 | var sidebarMinWidth = 80;
 462 | var sidebarMaxWidth = 500;
 463 | 
 464 | function vsheetMidResize(event,moveBar,maxGrow,maxShrink,startLeft){
 465 | 
 466 | 	//TODO: Consider adjusting width because
 467 | 
 468 | 	//Draw moving line
 469 | 	var endResizeX = event.clientX;
 470 | 	//Start to right, end left, value will be positive
 471 | 	//Start left, go to right, value will be negative
 472 | 	var amountMove = startResizeX - endResizeX;
 473 | 	//Consider changing color if we hit the limits ...
 474 | 	if (amountMove > maxGrow){
 475 | 		amountMove = maxGrow;
 476 | 	}else if(amountMove < maxShrink){
 477 | 		amountMove = maxShrink;
 478 | 	}
 479 | 
 480 | 	//Consider adjusting width
 481 | 
 482 | 	moveBar.style.left = "" + (startLeft - amountMove) + "px";
 483 | 	event.preventDefault();
 484 | }
 485 | 
 486 | function vsheetFinalizeResize(event){
 487 | 	var endResizeX = event.clientX;
 488 | 	var amountMove = startResizeX - endResizeX;
 489 | 	var sidebar = getSidebarTag();
 490 | 	var newWidth = amountMove + sidebar.offsetWidth;
 491 | 
 492 | 	if (newWidth < sidebarMinWidth){
 493 | 		newWidth = sidebarMinWidth;
 494 | 	}else if (newWidth > sidebarMaxWidth){
 495 | 		newWidth = sidebarMaxWidth;
 496 | 	}
 497 | 
 498 | 	//Hide the move bar
 499 | 	var moveBar = document.getElementById('vsheet-move-bar')
 500 | 	moveBar.style.display = 'none';
 501 | 
 502 | 	//Update the width of the sidebar ...
 503 | 	sidebar.style.width = "" + newWidth + "px";
 504 | 
 505 | 	document.removeEventListener('mousemove', moveFunction, false);
 506 | 	document.removeEventListener('mouseup', vsheetFinalizeResize, false);
 507 | }
 508 | 
 509 | 
 510 | //#endregion
 511 | 
 512 | 
 513 | //------------------------------------------------------------------------------
 514 | //------------------------------------------------------------------------------
 515 | //						Sidebar Sheet Actions
 516 | //------------------------------------------------------------------------------
 517 | //------------------------------------------------------------------------------
 518 | 
 519 | //#region Sidebar sheet actions
 520 | 
 521 | /**
 522 |  * @param {HTMLElement} tag - a vsheet tag
 523 |  */
 524 | function moveVSheetUp(tag){
 525 | 	if (tag) {
 526 | 		var parent = getVSheetsHolder();
 527 | 		parent.insertBefore(tag, tag.previousElementSibling)
 528 | 	}
 529 | }
 530 | function moveVSheetDown(tag){
 531 | 	if (tag) {
 532 | 		var parent = getVSheetsHolder();
 533 | 		parent.insertBefore(tag.nextElementSibling, tag);
 534 | 	}
 535 | }
 536 | 
 537 | function deleteSheet(tag){
 538 | 	console.log('Delete sheet called')
 539 | 	console.log(tag)
 540 | 	if (tag) {
 541 | 		//Note, from where this is called, we may or may not delete the sheet
 542 | 		//
 543 | 		//At this point the user is prompted to as to whether or not they
 544 | 		//really want to delete the sheet.
 545 | 
 546 | 		var modal = document.querySelector('.modal-dialog-buttons');
 547 | 		console.log(modal)
 548 | 		if (modal) {
 549 | 			var okTag = modal.getElementsByTagName('ok');
 550 | 			console.log(okTag)
 551 | 			okTag.addEventListener("mousedown", function () {
 552 | 				reallyDeleteSheet(tag);
 553 | 			});
 554 | 			//TODO: Do we need to hold onto this listener and delete it ...
 555 | 		}
 556 | 
 557 | 		//<div class="modal-dialog-buttons">
 558 | 		//   <button name="cancel">Cancel</button>
 559 | 		//   <button name="ok" class="goog-buttonset-default goog-buttonset-action">OK</button>
 560 | 		//</div>
 561 | 	}
 562 | }
 563 | 
 564 | function reallyDeleteSheet(tag){
 565 | 	//Called by deleteSheet after user confirms they really want to delete the sheet
 566 | 	//
 567 | 	//In addition to deleting, we then need to determine who gets to be active
 568 | 	//next ...
 569 | 	console.log(tag)
 570 | 	if (tag){
 571 | 		//When deleting, the selection goes left, unless we are first then it goes to the right
 572 | 		//switchToActive
 573 | 		var left = tag.previousElementSibling;
 574 | 		if (left){
 575 | 			console.log('going left')
 576 | 			console.log(left)
 577 | 			switchToActive(left)
 578 | 		}else{
 579 | 			console.log('going left')
 580 | 			console.log(tag.nextElementSibling)
 581 | 			switchToActive(tag.nextElementSibling)
 582 | 		}
 583 | 		tag.parentNode.removeChild(tag)
 584 | 	}
 585 | 
 586 | }
 587 | 
 588 | /**
 589 |  * Returns the container which holds the vertical sheets. The children
 590 |  * of this element are the vsheet tags
 591 |  * @returns {HTMLElement}
 592 |  */
 593 | function getVSheetsHolder(){
 594 | 	//TODO: In some cases it looks like this may be being used when
 595 | 	// tag.parentNode would be a better call
 596 | 
 597 | 	return document.getElementById('jim-links-container');
 598 | }
 599 | 
 600 | function getVSheetByName(sheetName){
 601 | 	return document.getElementById('sidebar-' + sheetName);
 602 | }
 603 | 
 604 | function switchToActive(tag){
 605 | 	//Only changes things visually ...
 606 | 	removeActive();
 607 | 	setActive(tag);
 608 | }
 609 | 
 610 | function setActive(tag){
 611 | 	if (tag){
 612 | 		tag.style.backgroundColor = "#FFF";
 613 | 		tag.style.color = "#188038";
 614 | 		tag.style.cursor = "default";
 615 | 		activeTag = tag;
 616 | 	}
 617 | }
 618 | 
 619 | function removeActive(){
 620 | 	if (activeTag){
 621 | 		activeTag.style.backgroundColor = '#f1f3f4';
 622 | 		activeTag.style.color = 'black';
 623 | 		activeTag.style.cursor = "pointer";
 624 | 		activeTag = null;
 625 | 	}
 626 | }
 627 | 
 628 | 
 629 | //#endregion
 630 | 
 631 | //------------------------------------------------------------------------------
 632 | //------------------------------------------------------------------------------
 633 | //						Sidebar Moving
 634 | //------------------------------------------------------------------------------
 635 | //------------------------------------------------------------------------------
 636 | 
 637 | //#region Sidebar Moving/Resizing
 638 | 
 639 | function hideOrShowMenus(){
 640 | 	resizeSidebar("menu");
 641 | }
 642 | 
 643 | function resizeSidebar(type){
 644 | // Reasons for resizing include:
 645 | //
 646 | // - initialization 'init'
 647 | // - toggleMenuVisibility 'menu'
 648 | // - resizing
 649 | //
 650 | //
 651 | //	- 'menu'
 652 | //		- the small window on the right has been clicked (or unclicked?). This sidebar
 653 | //		  shows Google Maps, Keep, etc. Note this is a Google thing, not a Jim thing.
 654 | 
 655 | 	var gridScrollDiv = document.querySelector('.grid-scrollable-wrapper');
 656 | 	var companionDiv = document.querySelector('.docs-companion-app-switcher-container');
 657 | 	switch (type){
 658 | 		case 'init':
 659 | 			menuIsHidden = false;
 660 | 			sideIsHidden = companionDiv.offsetWidth == 0;
 661 | 			//TODO: populate sideIsHidden
 662 | 			gridHeight = gridScrollDiv.offsetHeight;
 663 | 			sidePanelWidth = companionDiv.offsetWidth;
 664 | 			resizeSidebarHelper();
 665 | 			break;
 666 | 		case 'menu':
 667 | 			menuIsHidden = !menuIsHidden;
 668 | 			//fall through
 669 | 		case 'resize':
 670 | 			resizeSideberHelperWaitForGrid(gridScrollDiv,gridHeight,0);
 671 | 			break;
 672 | 		case 'side':
 673 | 			sideIsHidden = !sideIsHidden;
 674 | 			resizeSideberHelperWaitForSideCompanion(companionDiv,sidePanelWidth,0);
 675 | 			break;
 676 | 	}
 677 | }
 678 | 
 679 | function resizeSideberHelperWaitForSideCompanion(compTag,target,i){
 680 | 	if (compTag.offsetWidth != target){
 681 | 		sidePanelWidth = compTag.offsetWidth;
 682 | 		resizeSidebarHelper();
 683 | 	}else{
 684 | 		if (i+1 > 10){
 685 | 			resizeSidebarHelper();
 686 | 		}else{
 687 | 			setTimeout(function() { resizeSideberHelperWaitForSideCompanion(compTag,target,i+1); }, 200);
 688 | 		}
 689 | 	}
 690 | }
 691 | 
 692 | function resizeSideberHelperWaitForGrid(gridTag,target,i){
 693 | 	if (gridTag.offsetHeight != target){
 694 | 		gridHeight = gridTag.offsetHeight;
 695 |     	resizeSidebarHelper();
 696 |   	}else{
 697 |   		if (i+1 > 10){
 698 |       		resizeSidebarHelper();
 699 |   		}else{
 700 |   	  		setTimeout(function() { resizeSideberHelperWaitForGrid(gridTag,target,i+1); }, 200);
 701 |   		}
 702 |   	}
 703 | }
 704 | 
 705 | function resizeSidebarHelper(){
 706 | 
 707 | 	//This should only be called once everything is ready (sized properly)
 708 | 
 709 | 	var docsBrandingContainer = document.getElementById('docs-branding-container');
 710 | 	var toolBar = document.getElementById('docs-toolbar-wrapper');
 711 | 	var formulaBar = document.getElementById('formula-bar');
 712 | 
 713 | 	var y1 = docsBrandingContainer.offsetHeight;
 714 | 	var y2 = toolBar.offsetHeight;
 715 | 	var y3 = formulaBar.offsetHeight;
 716 | 
 717 | 	//console.log('Y values')
 718 | 	//console.log(y1)
 719 | 	//console.log(y2)
 720 | 	//console.log(y3)
 721 | 
 722 | 	//Needed for x1
 723 | 	var companionBar = document.querySelector('.docs-companion-app-switcher-container');
 724 | 	var yScroll = document.querySelector('.native-scrollbar-y');
 725 | 
 726 | 	//console.log('X values')
 727 | 	var x1 = companionBar.offsetWidth;
 728 | 	var x2 = yScroll.offsetWidth;
 729 | 
 730 | 	//console.log(x1);
 731 | 	//console.log(x2);
 732 | 
 733 | 	//console.log('gridHeight')
 734 | 	//console.log(gridHeight);
 735 | 	//console.log('sidePanelWidth')
 736 | 	//console.log(sidePanelWidth);
 737 | 
 738 | 
 739 | 	var top = y1 + y2 + y3;
 740 | 	var right = x1 + x2;
 741 | 
 742 | 	var sidebarHeader = document.getElementById('vert-header')
 743 | 
 744 | 	//What is this? I think this is the height of the grid row labels A, B, C, etc.
 745 | 	var rowHeader = document.querySelector('.fixed-table-container')
 746 | 
 747 | 	var gridScrollDiv = document.querySelector('.grid-scrollable-wrapper')
 748 | 
 749 | 	var hleft1 = gridScrollDiv.offsetHeight;
 750 | 	var hleft2 = rowHeader.offsetHeight;
 751 | 
 752 | 	var hright1 = sidebarHeader.offsetHeight;
 753 | 	var hright2 = hleft1 + hleft2 - hright1;
 754 | 
 755 | 	var sideBar = document.getElementById('vert-sidebar');
 756 | 	sideBar.style.top = top + "px";
 757 | 	sideBar.style.right = right + "px";
 758 | 
 759 | 	var sideContent = document.getElementById('jim-links-container');
 760 | 	sideContent.style.height = (hright2) + "px";
 761 | 
 762 | }
 763 | 
 764 | function windowResized(){
 765 | 	resizeSidebar('resize');
 766 | }
 767 | 
 768 | //#endregion
 769 | 
 770 | 
 771 | //------------------------------------------------------------------------------
 772 | //------------------------------------------------------------------------------
 773 | //                    Bottom Horizontal Sheet Code
 774 | //------------------------------------------------------------------------------
 775 | //------------------------------------------------------------------------------
 776 | 
 777 | //#region Bottom HSheet Code
 778 | 
 779 | /*
 780 | <div class="docs-sheet-button-bar goog-toolbar goog-inline-block" role="toolbar" style="user-select: none;">
 781 |    <div class="docs-sheet-button goog-inline-block docs-sheet-add" tabindex="0" data-tooltip="Add Sheet" aria-label="Add Sheet" role="button" id=":f" style="user-select: none;">
 782 |       <div class="goog-inline-block docs-sheet-button-outer-box" style="user-select: none;">
 783 |          <div class="goog-inline-block docs-sheet-button-inner-box" style="user-select: none;">
 784 |             <div class="goog-inline-block docs-icon docs-sheet-button-icon" style="user-select: none;">&nbsp;</div>
 785 |          </div>
 786 |       </div>
 787 |    </div>
 788 |    <div class="docs-sheet-menu-button goog-inline-block docs-sheet-all docs-sheet-button" tabindex="0" data-tooltip="All Sheets" aria-label="All Sheets" role="button" aria-expanded="false" aria-haspopup="true" id=":g" style="user-select: none;">
 789 |       <div class="goog-inline-block docs-sheet-button-outer-box" style="user-select: none;">
 790 |          <div class="goog-inline-block docs-sheet-button-inner-box" style="user-select: none;">
 791 |             <div class="goog-inline-block docs-icon docs-sheet-button-icon" style="user-select: none;">&nbsp;</div>
 792 |          </div>
 793 |       </div>
 794 |    </div>
 795 | </div>
 796 | 
 797 | 
 798 |  */
 799 | function addSheetCalled(){
 800 | 	//We'll handle this in the observer ...
 801 | 
 802 | 	// var hSheet = getHSheetByVSheet(activeTag);
 803 | 	// if (hSheet) {
 804 | 	// 	waitUntilNotActiveSheet(0, hSheet, respondToAddSheet);
 805 | 	// }
 806 | }
 807 | 
 808 | /**
 809 |  * Calls a function once the input tag is no longer active
 810 |  * @param {number} i - A counter on how many times the function has been called
 811 |  * @param {HTMLElement} tag - hsheet tag which is initially active
 812 |  * @param {function} fcn - Function to call when 'tag' is no longer active
 813 |  */
 814 | function waitUntilNotActiveSheet(i,tag,fcn){
 815 | 
 816 | 	if (tag.classList.contains(ACTIVE_SHEET_TAB_CLASS)){
 817 | 		if (i < 20) {
 818 | 			setTimeout(function () {
 819 | 				waitUntilNotActiveSheet(i+1, tag, fcn)
 820 | 			},200)
 821 | 		}else{
 822 | 			console.log('Below is the tag which failed')
 823 | 			tagFromError = tag; //Promote to global for debugging
 824 | 			console.log(tag)
 825 | 			console.log('TIMEOUT FAILURE for ' + 'waitUntilNotActiveSheet');
 826 | 		}
 827 | 	}else{
 828 | 		//When no longer active, call the function
 829 | 		fcn(tag);
 830 | 	}
 831 | }
 832 | 
 833 | //This might belong in the vsheets section
 834 | function respondToAddSheet(hsheetLastActiveTag){
 835 | 	//oldVSheetTag = getVSheetByName()
 836 | 	var hsheetActiveTag = document.querySelector('.' + ACTIVE_SHEET_TAB_CLASS);
 837 | 
 838 | 	//We might make all of this a function
 839 | 	//get sheet name from hSheet - handles this nav if necessary ...
 840 | 	var nameTag = hsheetActiveTag.querySelector('.docs-sheet-tab-name');
 841 | 	var sheetName = nameTag.textContent;
 842 | 
 843 | 	var newTag = createVSheetTag(sheetName)
 844 | 	activeTag.parentNode.insertBefore(newTag, activeTag.nextSibling);
 845 | 	switchToActive(newTag);
 846 | }
 847 | 
 848 | function getHSheetByVSheet(vSheet){
 849 | 	//Right now this could be either for the right portion or the parent
 850 | 
 851 | 	if (vSheet.classList.contains('vsheet-main')){
 852 | 		vSheet = vSheet.querySelector('.vsheet-right');
 853 | 	}
 854 | 
 855 | 	//vsheet-right
 856 | 	var sheetName = vSheet.textContent;
 857 | 	return getHSheetByName(sheetName,2);
 858 | }
 859 | 
 860 | //Could have multiple functions
 861 | //HSheetSpanByName
 862 | //HSheetRootByName
 863 | function getHSheetByName(sheetName,type){
 864 | 	//Do we want:
 865 | 	//1) the span with the name
 866 | 	//2) the root tag ...
 867 | 	//docs-sheet-tab
 868 | 	var sheetElements = document.getElementsByClassName('docs-sheet-tab-name')
 869 | 	for (var i = 0; i < sheetElements.length; i++) {
 870 | 		if (sheetElements[i].textContent == sheetName){
 871 | 			if (type == 1) {
 872 | 				return sheetElements[i];
 873 | 			}else{
 874 | 				return closestClass(sheetElements[i],'docs-sheet-tab')
 875 | 			}
 876 | 		}
 877 | 	}
 878 | 	return null;
 879 | }
 880 | 
 881 | function clickSheet(sheetName){
 882 | 
 883 | //   In this approach we click on the <div> tags that are in a container
 884 | //   that pops up when you click on the all sheets list. An alternative
 885 | //	 approach is to just click on the sheets themselves. I didn't try
 886 | //   that approach because I was worried that clicking might fail if
 887 | //	 the sheet was not visible.
 888 | 
 889 | 	var hSheet = getHSheetByName(sheetName,1);
 890 | 	if (hSheet){
 891 | 		fakeClick(hSheet);
 892 | 	}
 893 | 
 894 | }
 895 | 
 896 | /**
 897 |  * Handles selection events from menu that pops up when right clicking on a 
 898 |  * sheet tab
 899 |  * @param {Event} event - Event object from listener
 900 |  * @returns {void}
 901 |  */
 902 | function sheetMenuPopupSelected(event){
 903 | 
 904 | 	var action = event.target.innerText.toLowerCase();
 905 | 	switch (action){
 906 | 		case 'move left':
 907 | 			moveVSheetUp(activeTag);
 908 | 			break;
 909 | 		case 'move right':
 910 | 			moveVSheetDown(activeTag);
 911 | 			break;
 912 | 		case 'delete':
 913 | 			//Handle with the observer
 914 | 			//deleteSheet(activeTag);
 915 | 			//NYI
 916 | 			break;
 917 | 	}
 918 | 	//event.target.innerText
 919 | 
 920 | 	//Delete
 921 | 	//Duplicate
 922 | 	//Rename - hard to handle ... - not sure how to register event
 923 | 	//X Move Left
 924 | 	//X Move Right
 925 | 
 926 | 	//This doesn't work because we are racing ...
 927 | 	//
 928 | 	//Need to handle actual instruction ...
 929 | 	//
 930 | 	//- move left
 931 | 	//- move right
 932 | 	//- delete
 933 | 	//- rename
 934 | 
 935 | 	//Hack for now ... - won't work for rename ...
 936 | 	//setTimeout(populateNavLinks,1000);
 937 | 
 938 | 	//populateNavLinks();
 939 | }
 940 | 
 941 | /*
 942 |  * Initalizes the listener/callback function for the menu popup that gets shown
 943 |  * when right clicking on one of the sheet names at the bottom
 944 |  */
 945 | function initializeSheetMenuListener(){
 946 |   //Note this value is somewhat arbitrary. How long does it take for the 
 947 |   //popup to exist after right click? Normally I would assume this happens
 948 |   //in less than 1 second.
 949 |   var maxWaitTime = 5; //seconds
 950 |   callAfterClassIsValid('docs-sheet-tab-menu',maxWaitTime,initializeSheetMenuListener2);
 951 | }
 952 | 
 953 | function initializeSheetMenuListener2(menu){
 954 |   menu.addEventListener("mousedown",sheetMenuPopupSelected);
 955 |   
 956 |   //It seems like the menu may not be persistent, so we need to initialize the listener each time
 957 |   //We'll keep the global and logic in for now in case this changes
 958 |   //sheetMenuListenerInitialized = true;
 959 | }
 960 | 
 961 | function sheetSelected(event){
 962 | 	//Note both left and right click make the sheet active
 963 |   //left click
 964 |   //   - make sheet active
 965 |   //   - bring out dropdown if on active sheet already
 966 |   //right click
 967 |   //   - make active and show menu
 968 |   
 969 |   
 970 |   //0 - left click
 971 |   //2 - right click
 972 |   //1 - middle? what happens then?
 973 |   
 974 |   //if (event.button == 0){
 975 |   	//0 - left click
 976 |   	 var tag = event.target;
 977 |   	 //console.log(tag)
 978 |   	   	 
 979 |   	 if (tag.classList.contains('docs-sheet-tab-dropdown')
 980 |   	 	|| tag.classList.contains('docs-icon-arrow-dropdown')){
 981 |   	 	//menu click on active sheet - name not valid
 982 |   	 	//Note - this could close if the menu is currently visible ...
 983 |   	 	if (!sheetMenuListenerInitialized){
 984 |   	 	   initializeSheetMenuListener();
 985 |   	 	}
 986 |   	 }else{
 987 |   	 	 //Unfortunately it is possible to click on things that are not the span with the name
 988 |   	 	 //Noteably : <div class="docs-sheet-tab-color" style="background: transparent;"></div>
 989 |   	 	 //We could hard code in this check, but I am going to just go to the parent and look down
 990 |   	     tag = closestClass(tag,"docs-sheet-tab");
 991 | 
 992 |   	     //Note, comments can show up here, so we need to now go down to the name
 993 | 		 //tag otherwise we'll get the # of comments as well in the name
 994 | 		 var nameTag = tag.querySelector('.docs-sheet-tab-name');
 995 |   	     var sheetName = nameTag.innerText;
 996 |   	     //console.log(sheetName)
 997 | 		 var vsheetTag = getVSheetByName(sheetName);
 998 |   	     //console.log(sidebarTag)
 999 | 
1000 | 		 switchToActive(vsheetTag);
1001 | 
1002 | 	     if (event.button == 2 && !sheetMenuListenerInitialized){
1003 | 	       initializeSheetMenuListener();
1004 | 	     }
1005 |   	 }
1006 |   	 
1007 | 
1008 |   //}
1009 |   
1010 |   //note a right click makes it active
1011 |   
1012 |   //TODO: Handle the right click menu
1013 |   //- rename
1014 |   //- delete
1015 |   //- reorder
1016 |   //
1017 |   //For now the simplest would be to register a listener on the menu
1018 |   //then redraw the sidebar
1019 |   
1020 |   
1021 |   //button = 2 - right click menu shown
1022 |   //button = 1 - left click - change sheet
1023 |   //srcElement
1024 |   //target
1025 |   //toElement
1026 | }
1027 | 
1028 | /*
1029 |  *  This callback gets called
1030 |  *
1031 |  */
1032 | 
1033 | //#endregion
1034 | 
1035 | 
1036 | 
1037 | //------------------------------------------------------------------------------
1038 | //------------------------------------------------------------------------------
1039 | //                             Add-On Menu Code
1040 | //------------------------------------------------------------------------------
1041 | //------------------------------------------------------------------------------
1042 | 
1043 | //#region Add-On Menu
1044 | 
1045 | //TODO: Create wait until exists for menu
1046 | 
1047 | /*
1048 | //The Add on button that launches the menus
1049 | //
1050 | <div id="docs-extensions-menu" role="menuitem" class="menu-button goog-control goog-inline-block"
1051 |  	aria-disabled="false" aria-expanded="false" aria-haspopup="true" style="user-select: none;">
1052 |  		Add-ons</div>
1053 | 
1054 | 
1055 | //The menu container
1056 | //-----------------------------------------------------------
1057 | <div class="goog-menu goog-menu-vertical docs-material goog-menu-noaccel docs-menu-hide-mnemonics"
1058 | 		role="menu" aria-haspopup="true" style="user-select: none; visibility: visible;
1059 | 		left: 388.108px; top: 61.9826px; display: none;">
1060 |    <div class="goog-menuitem apps-menuitem" role="menuitem" aria-disabled="false"
1061 |    		id="5xq0ya:123" style="user-select: none;">
1062 |       <div id="vert-tab-div-menu">
1063 |       	<span aria-label="Launch Vert Tabs" class="goog-menuitem-label">Launch Vert Tabs</span></div>
1064 |    </div>
1065 |    <div class="goog-menuseparator" aria-disabled="true" role="separator" id="9xhfa2:2qd" aria-hidden="true" style="user-select: none; display: none;"></div>
1066 | 
1067 | //Example menu item
1068 | //-----------------------------------------------------------
1069 | <div class="goog-menuitem goog-menuitem-disabled apps-menuitem" role="menuitem"
1070 | 		aria-disabled="true" id="9xhfa2:2qi" style="user-select: none;">
1071 | 	<div class="goog-menuitem-content"><span aria-label="Manage add-ons m"
1072 | 		class="goog-menuitem-label">
1073 | 			<span class="goog-menuitem-mnemonic-hint">M</span>anage add-ons</span>
1074 | 	</div>
1075 | </div>
1076 | */
1077 | 
1078 | //goog-menuitem 2012
1079 | //goog-menuitem-mnemonic-hint 194 - to specific, would only give M
1080 | //goog-menuitem-label 177
1081 | //goog-menuitem-content 693
1082 | //apps-menuitem 223
1083 | 
1084 | function delayUntilValidAddOnMenu(){
1085 | 
1086 | 	var TIMEOUT = 20; //20 second timeout
1087 | 	var pauseDuration = 200;
1088 | 	var nMax = Math.ceil(TIMEOUT*1000/pauseDuration);
1089 | 	delayUntilValidAddOnMenuHelper(0,nMax,pauseDuration)
1090 | }
1091 | 
1092 | function delayUntilValidAddOnMenuHelper(i,nMax,pauseDuration){
1093 | 	//
1094 | 	//	wait until "manage addd-ons" is valid then create our menu option
1095 | 
1096 | 	var menuItems = document.getElementsByClassName('goog-menuitem-label');
1097 | 	var result = Array.from(menuItems).find(tag => tag.textContent == 'Manage add-ons');
1098 | 	if (result){
1099 | 		createMenu(result)
1100 | 	}else{
1101 | 		if (i+1 > nMax) {
1102 | 			console.log('TIMEOUT FAILURE - Failed to create menu, timed out')
1103 | 		}else{
1104 | 			setTimeout(function(){delayUntilValidAddOnMenuHelper(i+1,nMax,pauseDuration)},pauseDuration)
1105 | 		}
1106 | 
1107 | 	}
1108 | 	//Array.from(menu_items).find
1109 | 	//    res = Array.from(elems).find(v => v.textContent == 'Special');
1110 | 
1111 | }
1112 | 
1113 | 
1114 | 
1115 | function createMenu(menuTag){
1116 | 
1117 | 	var menuHolder = closestClass(menuTag,'goog-menu');
1118 | 
1119 | 	var temp = document.createElement('div');
1120 | 	temp.innerHTML = '' +
1121 | 		'<div class="goog-menuitem apps-menuitem" role="menuitem" ' +
1122 | 		    'aria-disabled="false" style="user-select: none;">' +
1123 | 		    '<div id="vert-tab-div-menu">' +
1124 | 		        '<span aria-label="Launch Vert Tabs" class="goog-menuitem-label">' +
1125 | 			    'Launch Vert Tabs</span>' +
1126 | 			'</div>' +
1127 | 		'</div>';
1128 | 	var menuDiv = temp.firstChild;
1129 | 
1130 | 	//TODO: I'm not really sure if this is needed or what I should set it too
1131 | 	//Does this impact menu ordering?
1132 | 	menuDiv.setAttribute('id','5xq0ya:123');
1133 | 	menuHolder.appendChild(menuDiv);
1134 | 
1135 | 	//docs-menu-attached-button-above
1136 | 	//display none
1137 | 	menuDiv.addEventListener("mousedown",function(){
1138 | 		menuHolder.classList.remove("docs-menu-attached-button-above");
1139 | 		menuHolder.style.display = "none";
1140 | 		launchSideBar();
1141 | 	});
1142 | 	menuDiv.addEventListener("mouseover",function(){
1143 | 		menuDiv.classList.add("goog-menuitem-highlight");
1144 | 	});
1145 | 	menuDiv.addEventListener("mouseout",function(){
1146 | 		menuDiv.classList.remove("goog-menuitem-highlight");
1147 | 	});
1148 | 
1149 | }
1150 | 
1151 | 
1152 | //#endregion
1153 | 
1154 | 
1155 | //------------------------------------------------------------------------------
1156 | //------------------------------------------------------------------------------
1157 | //                                Main Function
1158 | //------------------------------------------------------------------------------
1159 | //------------------------------------------------------------------------------
1160 | 
1161 | 
1162 | //#region Main
1163 | 
1164 | 
1165 | 
1166 | var vertSheetsMain;
1167 | (vertSheetsMain = function vertSheetInitializer(){
1168 |     //TODO: Instead just check periodically and delay if necessary
1169 |     //setTimeout(function() { createMenu(); }, 8000);
1170 | 
1171 | 	var TIMEOUT = 20;
1172 | 
1173 |     delayUntilValidAddOnMenu()
1174 |   
1175 |     createSidebar();
1176 |   
1177 |     //The view mode button (bottom right of screen) toggles between hiding and showing 
1178 |     //the menus. When the menus are hidden sheets move up and to the right. The rightward 
1179 |     //movement is from hiding the Google Apps menu (calendar, tasks, & keep).
1180 |     var viewModeButton = document.querySelector('.app-switcher-button');
1181 |     viewModeButton.addEventListener("mousedown",hideOrShowMenus);
1182 | 
1183 |     //var sidePanelButton = document.querySelector('.companion-collapser-button-container');
1184 | 
1185 | 	callAfterClassIsValid('companion-collapser-button',TIMEOUT,registerSideListen)
1186 |     // var companionSideButton = document.querySelector('.companion-collapser-button');
1187 |     // console.log(companionSideButton);
1188 | 	// companionSideButton.addEventListener("mousedown",function(){resizeSidebar("side")});
1189 |   	//
1190 |     window.addEventListener("resize", windowResized);
1191 | 
1192 | 	var addSheetButton = document.querySelector('.docs-sheet-add-button');
1193 | 	addSheetButton.addEventListener('mousedown',addSheetCalled);
1194 | 
1195 | 	//TODO: Handle all sheet selection button
1196 | 
1197 | 
1198 | 
1199 |   
1200 |     var sheetContainer = document.querySelector('.docs-sheet-container-bar');
1201 |     sheetContainer.addEventListener("mousedown", sheetSelected);
1202 | })();
1203 | 
1204 | 
1205 | 
1206 | 
1207 | function registerSideListen(){
1208 | 
1209 | 	//Log width so when we toggle we know where we were so we can wait for a change
1210 | 	var companionSidePanel = document.querySelector('.companion-app-switcher-container');
1211 | 	sidePanelWidth = companionSidePanel.offsetWidth;
1212 | 
1213 | 	var companionSideButton = document.querySelector('.companion-collapser-button');
1214 | 	companionSideButton.addEventListener("mousedown",function(){resizeSidebar("side")});
1215 | 
1216 | }
1217 | 
1218 | //#endregion
1219 | 
1220 | //------------------------------------------------------------------------------
1221 | //------------------------------------------------------------------------------
1222 | //                                Utils
1223 | //------------------------------------------------------------------------------
1224 | //------------------------------------------------------------------------------
1225 | 
1226 | //#region Utils
1227 | 
1228 | function fakeClick(el) {
1229 | 	//https://stackoverflow.com/questions/61090920/click-all-sheets-in-google-sheets-using-chrome-extension/61091451#61091451
1230 | 	el.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
1231 | 	el.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }));
1232 | }
1233 | 
1234 | 
1235 | //https://stackoverflow.com/questions/23925520/javascript-traverse-dom-until-class-is-reached
1236 | function closestClass(el, cls) {
1237 |   while (el  && el !== document) {
1238 |       if (el.classList.contains(cls)) return el;
1239 |       el = el.parentNode;
1240 |   }
1241 |   return null;
1242 | }
1243 | 
1244 | function callAfterClassIsValid(className,timeout,fcn){
1245 | //timeout in s
1246 | //.docs-sheet-tab-menu
1247 | var pauseDuration = 200;
1248 | var nMax = Math.ceil(timeout*1000/pauseDuration);
1249 | 
1250 | var target = '.' + className;
1251 | 
1252 | callAfterClassIsValidHelper(target,nMax,0,fcn)
1253 | }
1254 | 
1255 | function callAfterClassIsValidHelper(target,nMax,i,fcn,pauseDuration){
1256 |  tag = document.querySelector(target);
1257 |  if (tag){
1258 |     return fcn(tag);
1259 |  }else{
1260 |    i = i + 1;
1261 |    if (i > nMax){
1262 |      //Then what ...
1263 |    }else{
1264 |      setTimeout(function(){callAfterClassIsValidHelper(target,nMax,i,fcn,pauseDuration)},pauseDuration);
1265 |    }
1266 |  }
1267 | }
1268 | 
1269 | //#endregion


--------------------------------------------------------------------------------