gmail-highlight/main.js at develop · ktryber/gmail-highlight · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
function convert() {
 	var selObj = window.getSelection();
  var selRange = selObj.getRangeAt(0);

  // only manipulate the dom if we are on the message contents
  if (hasSomeParentTheClass(selRange.startContainer, 'editable')) {
    if (selObj.rangeCount == 0) {
      alert('Please select the text to syntax highlight first');
      return;
    }

    var newElement = document.createElement("div");
    var documentFragment = selRange.extractContents();
    lang = '';
    node = documentFragment.firstChild;
    while (node.hasChildNodes()) {
      node = node.firstChild;
    }
    if (node.nodeType == 3) {
      lang = node.textContent;
      if (hljs.listLanguages().indexOf(lang) != -1) node.remove();
    }
    var block = $('<div class="' + lang + '"></div>').append(documentFragment);
    hljs.highlightBlock(block[0]);
    applyStylesheet(block);
    newElement.appendChild(block[0]);
    selRange.insertNode(document.createElement("br"));
    selRange.insertNode(newElement);
    selRange.insertNode(document.createElement("br"));

    selObj.removeAllRanges();
  }
}
function applyStylesheet(elem) {
  elem
		.css('display', 'block')
		.css('overflow-x', 'auto')
		.css('padding', '0.5em')
		.css('color', '#333')
		.css('background', '#f8f8f8')
		.css('-webkit-text-size-adjust', 'none')
		.css('font-family', 'monospace');
  elem.find('.hljs')
  .css('display', 'block')
  .css('overflow-x', 'auto')
  .css('padding', '0.5em')
  .css('background', '#F0F0F0');
  elem.find('.hljs,.hljs-subst')
  .css('color', '#444');
  elem.find('.hljs-comment')
  .css('color', '#888888');
  elem.find('.hljs-keyword,.hljs-attribute,.hljs-selector-tag,.hljs-meta-keyword,.hljs-doctag,.hljs-name')
  .css('font-weight', 'bold');
  elem.find('.hljs-type,.hljs-string,.hljs-number,.hljs-selector-id,.hljs-selector-class,.hljs-quote,.hljs-template-tag,.hljs-deletion')
  .css('color', '#880000');
  elem.find('.hljs-title,.hljs-section')
  .css('color', '#880000')
  .css('font-weight', 'bold');
  elem.find('.hljs-regexp,.hljs-symbol,.hljs-variable,.hljs-template-variable,.hljs-link,.hljs-selector-attr,.hljs-selector-pseudo')
  .css('color', '#BC6060');
  elem.find('.hljs-literal')
  .css('color', '#78A960');
  elem.find('.hljs-built_in,.hljs-bullet,.hljs-code,.hljs-addition')
  .css('color', '#397300');
  elem.find('.hljs-meta')
  .css('color', '#1f7199');
  elem.find('.hljs-meta-string')
  .css('color', '#4d99bf');
  elem.find('.hljs-emphasis')
  .css('font-style', 'italic');
  elem.find('.hljs-strong')
  .css('font-weight', 'bold');
}

function hasSomeParentTheClass(element, classname) {
    if (element.className && element.className.split(' ').indexOf(classname)>=0) return true;
    return element.parentNode && hasSomeParentTheClass(element.parentNode, classname);
}

function addButton() {
  $( "div[role='toolbar'].J-Z" ).each(function() {
    if ($(this).find('.codebtn').length == 0) {

      var btn = $('<div id="syntaxButton" class="codebtn J-Z-I J-J5-Ji" data-tooltip="Syntax Highlight" role="button">{...}</div>');
      $(this).append(btn);

      $(this).find('.codebtn').hover(function() { $(this).toggleClass('J-Z-I-JW')});
      // MT: Add Event Listener programmatically instead of using HTML onclick to avoid Chrome Content Security Policy directive error
      document.getElementById("syntaxButton").addEventListener("click", highlightSyntax);
    }
	});
}
// Check every 3 seconds if there's a new toolbar without our button
var addButtonInterval = setInterval(addButton, 3000);

// MT: Add onlick script into function
function highlightSyntax(){
    window.postMessage({ type: 'CONVERT'}, '*');
}

window.addEventListener("message", function(event) {
  // We only accept messages from ourselves
  if (event.source != window)
    return;

  if (event.data.type && (event.data.type == "CONVERT")) {
  	convert();
  }
}, false);