// ==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);