0

I collaborate on a large Google Spreadsheet and a zoom of 65% happens to be optimal for displaying all relevant content on my screen. Since manually setting the zoom every time is tedious, and since Google does not seem to offer a way of storing a given zoom for me, I am trying to use Greasemonkey and jQuery to zoom upon page load.

With the following code, I only get to the point of entering the value (waiting for the element to appear using the famous waitForKeyElements function and then changing its val), but I still need to manually hit Enter to confirm. I was so far unable to get the page to accept the entered value programmatically. 

// ==UserScript==
// @name     Google Table Auto Zoom
// @include  https://docs.google.com/spreadsheets/d/1SjL_dgsxzj9y7E3JRBYR9gRxiM0ieMkbrGdybAstyt8/*
// @require  https://code.jquery.com/jquery-3.4.1.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @version  2020
// ==/UserScript==

var done = false;

function zoomout(jNode) {
    if (done == false) {
      done = true;
      jNode.val("65%").focus();
    }
}

waitForKeyElements ('.goog-toolbar-combo-button-input[aria-label="Zoom"]', zoomout);

I have tried numerous approaches to get the page to accept the value, e.g.:

  1. jNode.submit(); or jNode[0].submit(); However, since there is no wrapping form element, I was not lucky with this approach. I guess the page listens for changes using AJAX?
  2. All variations of simulating Enter using the various stackoverflow results on how to simulate keypresses in jQuery (see below for examples). However, the page does not react to any of them even though InspectElement shows that the element listens to keypress and keydown events, which I just cannot get to trigger. 
var e = jQuery.Event("keypress");
e.which = 13;
e.keyCode = 13;
jNode.trigger(e);

or 

const ke = new KeyboardEvent("keydown", {
    bubbles: true, cancelable: true, keyCode: 13
});
document.body.dispatchEvent(ke); // doesnt work
jNode.dispatchEvent(ke) // doesnt work either

None of the above seems to work. Using the code provided and the public spreadsheet example therein, it should be easy to reproduce what I'm trying to do. I would be very grateful for any input!

Thank you very much, Chris

Chris
  • 1
  • Try emitting a `keypress` event per each character 6, 5, % first. – wOxxOm Jan 10 '20 at 15:30
  • Thank you for the idea @wOxxOm! Unfortunately I can't even get the first character to be typed. Maybe Google just won't accept any simulated keystrokes due to the "isTrusted" problem? My current code to test it: jNode.focus().trigger( jQuery.Event('keypress', { keycode: 54 }) ); // works until the focus(); part but does not elicit actual typing, whereas manual typing with the keyboard works. – Chris Jan 10 '20 at 16:15
  • I think you should use the native DOM dispatchEvent instead of jQuery. – wOxxOm Jan 10 '20 at 17:09
  • It seems that simulating typing on an input field is impossible :( see https://stackoverflow.com/questions/50219800/chrome-simulate-keypress-events-on-input-text-field-using-javascript - is there any other way to tell the Spreadsheet page to change the zoom? – Chris Jan 13 '20 at 10:22
  • document.execCommand should take care of that, try using it per each letter, [example](https://stackoverflow.com/a/57900849). – wOxxOm Jan 13 '20 at 10:26
  • Thank you @wOxxOm for your continued efforts! Unfortunately, even though I already focused the right input box, calling `document.execCommand('insertText', false, '6');` does not result in any text input, even when setting `$('body').attr('contenteditable', 'true');` to allow execCommand in the first place. – Chris Jan 13 '20 at 16:10

0 Answers0