Google Docs Comment Toggler

Toggles comments (useful for word counts)

Você precisará instalar uma extensão como Tampermonkey, Greasemonkey ou Violentmonkey para instalar este script.

You will need to install an extension such as Tampermonkey to install this script.

Você precisará instalar uma extensão como Tampermonkey ou Violentmonkey para instalar este script.

Você precisará instalar uma extensão como Tampermonkey ou Userscripts para instalar este script.

Você precisará instalar uma extensão como o Tampermonkey para instalar este script.

Você precisará instalar um gerenciador de scripts de usuário para instalar este script.

(Eu já tenho um gerenciador de scripts de usuário, me deixe instalá-lo!)

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

(Eu já possuo um gerenciador de estilos de usuário, me deixar fazer a instalação!)

// ==UserScript==
// @name           Google Docs Comment Toggler
// @namespace      www.arthaey.com
// @description    Toggles comments (useful for word counts)
// @include        https://docs.google.com/Doc?id=*
// @include        https://docs.google.com/Doc?docid=*
//
// Backed up from http://userscripts.org/scripts/review/36719
// Last updated on 2009-08-17
// @version 0.0.1.20140612212413
// ==/UserScript==

window.addEventListener("load", function() {

    // variables that are determined by Google (and thus may need to be updated)
    var EDITOR_FRAME_ID = "wys_frame";
        var toolbar = document.getElementById("editor-toolbar");
        var wordCountMenuItem = document.getElementById("m-wcount");

    var BUTTON_CSS = "goog-toolbar-toggle-button goog-toolbar-button goog-inline-block";
    var BUTTON_OUTER_CSS = "goog-toolbar-button-outer-box goog-inline-block";
    var BUTTON_INNER_CSS = "goog-toolbar-button-inner-box goog-inline-block";

    var BUTTON_SEPARATOR_HTML = "<div id=':t' class='goog-toolbar-separator goog-inline-block' style='-moz-user-select: none;' role='separator'> </div>";

    var MENU_ITEM_CSS = "writely-menubar-item goog-menuitem";
    var MENU_CONTENT_CSS = "goog-menuitem-content";

    var COMMENTS_ONLY_XPATH = "//span[@class='writely-comment']";
    var COMMENTS_H3_XPATH   = "//span[@class='writely-comment'] | //h3 | //h4 | //h5";
    var COMMENTS_H2_XPATH   = "//span[@class='writely-comment'] | //h2 | //h3 | //h4 | //h5";

    // save references to toolbar buttons and menu items that will be created
    var BUTTONS = [];
    var MENU_ITEMS = [];

    function toggleComments(xpath, triggerElement) {
        var editorFrame = document.getElementById(EDITOR_FRAME_ID);
        if (!editorFrame)
            return;

        var editorDocument = editorFrame.contentDocument;
        if (!editorDocument)
            return;

        var comments = editorDocument.evaluate(
            xpath,
            editorDocument,
            null,
            XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
            null
        );

        var hidden = false;
        for (var i = 0; i < comments.snapshotLength; i++) {
            var comment = comments.snapshotItem(i);

            if (comment.innerHTML) {
                if (!comment.title) // never clobber a non-empty title!
                    comment.title = comment.innerHTML;
                comment.innerHTML = '';
                comment.style.display = "none";
                hidden = true;
            }
            else {
                comment.innerHTML = comment.title;
                comment.title = '';
                comment.style.display = "";
            }
        }

        // rename toolbar buttons
        var button;
        for (var i = 0; i < BUTTONS.length; i++ ) {
            button = BUTTONS[i];
            if (hidden) {
                button.textContent = button.textContent.replace(/Hide/, "Show");
            }
            else {
                button.textContent = button.textContent.replace(/Show/, "Hide");
            }
            button.title = button.textContent;
        }

        // rename menu items
        var menuItem;
        for (var i = 0; i < MENU_ITEMS.length; i++ ) {
            menuItem = MENU_ITEMS[i];
            if (hidden) {
                menuItem.textContent = menuItem.textContent.replace(/Hide/, "Show");
            }
            else {
                menuItem.textContent = menuItem.textContent.replace(/Show/, "Hide");
            }
        }

        // toggle font weight of element
        var fontWeight = triggerElement.style.fontWeight;
        triggerElement.style.fontWeight = (fontWeight == "bold" ? "normal" : "bold");
    }

    function insertAfter(anchorNode, newNode) {
        if (!anchorNode || !newNode) return;
        anchorNode.parentNode.insertBefore(newNode, anchorNode.nextSibling);
    }

    function addGoogleDocsToolbarButtons() {
        var toolbar = document.getElementById("editor-toolbar");
        if (!toolbar) return;

        var button   = createGoogleDocsToolbarButton("Hide Comments", "toggleComments", COMMENTS_ONLY_XPATH);
        var buttonH3 = createGoogleDocsToolbarButton("+H3", "toggleCommentsH3", COMMENTS_H3_XPATH);
        var buttonH2 = createGoogleDocsToolbarButton("+H2", "toggleCommentsH2", COMMENTS_H2_XPATH);

        insertAfter(toolbar.lastChild, button);
        insertAfter(toolbar.lastChild, buttonH3);
        insertAfter(toolbar.lastChild, buttonH2);
    }

    function addGoogleDocsMenuItems() {
        var wordCountMenuItem = document.getElementById("m-wcount");
        if (!wordCountMenuItem) return;

        var menuItem =   createGoogleDocsMenuItem("Hide Comments", "m-togglecomments", COMMENTS_ONLY_XPATH);
        var menuItemH3 = createGoogleDocsMenuItem("Hide Comments + H3", "m-togglecomments-h3", COMMENTS_H3_XPATH);
        var menuItemH2 = createGoogleDocsMenuItem("Hide Comments + H2", "m-togglecomments-h2", COMMENTS_H2_XPATH);

        MENU_ITEMS = [ menuItem, menuItemH3, menuItemH2 ];

        insertAfter(wordCountMenuItem, menuItemH2);
        insertAfter(wordCountMenuItem, menuItemH3);
        insertAfter(wordCountMenuItem, menuItem);
    }

    function createGoogleDocsToolbarButton(text, id, xpath) {
        // create all these elements DOM-wise because...
        var buttonDiv = document.createElement("div");

        buttonDiv.id = id;
        buttonDiv.title = text;
        buttonDiv.className = BUTTON_CSS;

        // attributes specific to Google Docs
        buttonDiv["aria-disabled"] = false;
        buttonDiv.role = "button";

        var outerBox = document.createElement("div");
        outerBox.className = BUTTON_OUTER_CSS;

        var innerBox = document.createElement("div");
        innerBox.className = BUTTON_INNER_CSS;

        // ...we need to call addEventListener on the innermost div element
        var toggleButton = document.createElement("div");
        toggleButton.textContent = text;
        toggleButton.addEventListener("click", function() { toggleComments(xpath, toggleButton) }, true);

        // add a separator to the end of the toolbar
        toolbar.innerHTML += BUTTON_SEPARATOR_HTML;

        // compose and add the "Toggle Comments" button
        innerBox.appendChild(toggleButton);
        outerBox.appendChild(innerBox);
        buttonDiv.appendChild(outerBox);

        BUTTONS.push(toggleButton);
        return buttonDiv;
    }

    function createGoogleDocsMenuItem(text, id, xpath) {
        var toggleMenuItem = document.createElement("div");

        toggleMenuItem.id = id;
        toggleMenuItem.className = MENU_ITEM_CSS;

        var toggleContent = document.createElement("div");
        toggleContent.className = MENU_CONTENT_CSS;

        toggleContent.appendChild(document.createTextNode(text));
        toggleMenuItem.appendChild(toggleContent);

        // attributes specific to Google Docs
        toggleMenuItem.role = "menuitem";
        toggleMenuItem["aria-pressed"] = "false";

        toggleMenuItem.addEventListener("click", function() { toggleComments(xpath, toggleContent) }, true);

        MENU_ITEMS.push(toggleContent);
        return toggleMenuItem;
    }

    function init() {
        addGoogleDocsToolbarButtons();
        addGoogleDocsMenuItems();
    }

    init();

}, true);