☰

GitHub RTL Comment Blocks

A userscript that adds a button to insert RTL text blocks in comments

当前为 2016-06-25 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name          GitHub RTL Comment Blocks
  3. // @version       1.2.0
  4. // @description   A userscript that adds a button to insert RTL text blocks in comments
  5. // @license       https://creativecommons.org/licenses/by-sa/4.0/
  6. // @namespace     http://github.com/Mottie
  7. // @include       https://github.com/*
  8. // @include       https://gist.github.com/*
  9. // @run-at        document-idle
  10. // @grant         GM_addStyle
  11. // @connect       github.com
  12. // @author        Rob Garrison
  13. // ==/UserScript==
  14. /*jshint unused:true, esnext:true */
  15. /* global GM_addStyle */
  16. (function() {
  17.   "use strict";
  18.  
  19.   let targets, timer, busyTimer,
  20.     busy = false;
  21.  
  22.   const icon = `
  23.     <svg class="octicon" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
  24.       <path d="M14 3v8l-4-4m-7 7V6C1 6 0 5 0 3s1-3 3-3h7v2H9v12H7V2H5v12H3z"/>
  25.     </svg>`,
  26.  
  27.     // maybe using &#x2067; RTL text &#x2066; (isolates) is a better combo?
  28.     openRTL = "&rlm;",  // https://en.wikipedia.org/wiki/Right-to-left_mark
  29.     closeRTL = "&lrm;", // https://en.wikipedia.org/wiki/Left-to-right_mark
  30.  
  31.     regexOpen = /\u200f/ig,
  32.     regexClose = /\u200e/ig,
  33.     regexSplit = /(\u200f|\u200e)/ig;
  34.  
  35.   GM_addStyle(`
  36.     .ghu-rtl-css { direction:rtl; text-align:right; }
  37.     /* delegated binding; ignore clicks on svg & path */
  38.     .ghu-rtl > * { pointer-events:none; }
  39.     /* override RTL on code blocks */
  40.     .js-preview-body pre, .markdown-body pre, .js-preview-body code, .markdown-body code {
  41.       direction:ltr;
  42.       text-align:left;
  43.       unicode-bidi:normal;
  44.     }
  45.   `);
  46.  
  47.   // Add monospace font toggle
  48.   function addRtlButton() {
  49.     busy = true;
  50.     let el, button,
  51.       toolbars = $$(".toolbar-commenting"),
  52.       indx = toolbars.length;
  53.     if (indx) {
  54.       button = document.createElement("button");
  55.       button.type = "button";
  56.       button.className = "ghu-rtl toolbar-item tooltipped tooltipped-n";
  57.       button.setAttribute("aria-label", "RTL");
  58.       button.setAttribute("tabindex", "-1");
  59.       button.innerHTML = icon;
  60.       while (indx--) {
  61.         el = toolbars[indx];
  62.         if (!$(".ghu-rtl", el)) {
  63.           el.insertBefore(button.cloneNode(true), el.childNodes[0]);
  64.         }
  65.       }
  66.     }
  67.     checkRTL();
  68.     clearBusy();
  69.   }
  70.  
  71.   function checkContent(el) {
  72.     // check the contents, and wrap in either a span or div
  73.     let indx, // useDiv,
  74.       html = el.innerHTML,
  75.       parts = html.split(regexSplit),
  76.       len = parts.length;
  77.     for (indx = 0; indx < len; indx++) {
  78.       if (regexOpen.test(parts[indx])) {
  79.         // check if the content contains HTML
  80.         // useDiv = regexTestHTML.test(parts[indx + 1]);
  81.         // parts[indx] = (useDiv ? "<div" : "<span") + " class='ghu-rtl-css'>";
  82.         parts[indx] = "<div class='ghu-rtl-css'>";
  83.       } else if (regexClose.test(parts[indx])) {
  84.         // parts[indx] = useDiv ? "</div>" : "</span>";
  85.         parts[indx] = "</div>";
  86.       }
  87.     }
  88.     el.innerHTML = parts.join("");
  89.     // remove empty paragraph wrappers (may have previously contained the mark)
  90.     return el.innerHTML.replace(/<p><\/p>/g, "");
  91.   }
  92.  
  93.   function checkRTL() {
  94.     let clone,
  95.       indx = 0,
  96.       div = document.createElement("div"),
  97.       containers = $$(".js-preview-body, .markdown-body"),
  98.       len = containers.length,
  99.       // main loop
  100.       loop = function() {
  101.         let el, tmp,
  102.           max = 0;
  103.         while (max < 10 && indx < len) {
  104.           if (indx > len) {
  105.             return;
  106.           }
  107.           el = containers[indx];
  108.           tmp = el.innerHTML;
  109.           if (regexOpen.test(tmp) || regexClose.test(tmp)) {
  110.             clone = div.cloneNode();
  111.             clone.innerHTML = tmp;
  112.             // now we can replace all instances
  113.             el.innerHTML = checkContent(clone);
  114.             max++;
  115.           }
  116.           indx++;
  117.         }
  118.         if (indx < len) {
  119.           setTimeout(function() {
  120.             busy = true;
  121.             loop();
  122.             clearBusy();
  123.           }, 200);
  124.         }
  125.       };
  126.     busy = true;
  127.     loop();
  128.     clearBusy();
  129.   }
  130.  
  131.   // This method cuts out 3 extra calls to addRtlButton()
  132.   // when a preview tab is used.
  133.   function clearBusy() {
  134.     clearTimeout(busyTimer);
  135.     busyTimer = setTimeout(function() {
  136.       busy = false;
  137.     }, 200);
  138.   }
  139.  
  140.   function $(selector, el) {
  141.     return (el || document).querySelector(selector);
  142.   }
  143.   function $$(selector, el) {
  144.     return Array.from((el || document).querySelectorAll(selector));
  145.   }
  146.   function closest(el, selector) {
  147.     while (el && el.nodeName !== "BODY" && !el.matches(selector)) {
  148.       el = el.parentNode;
  149.     }
  150.     return el && el.matches(selector) ? el : [];
  151.   }
  152.  
  153.   function addBindings() {
  154.     $("body").addEventListener("click", function(event) {
  155.       let textarea,
  156.         target = event.target;
  157.       if (target && target.classList.contains("ghu-rtl")) {
  158.         textarea = closest(target, ".previewable-comment-form");
  159.         textarea = $(".comment-form-textarea", textarea);
  160.         textarea.focus();
  161.         // add extra white space around the tags
  162.         surroundSelectedText(textarea, " " + openRTL + " ", " " + closeRTL + " ");
  163.         return false;
  164.       }
  165.     });
  166.   }
  167.  
  168.   targets = $$("#js-repo-pjax-container, #js-pjax-container, .js-preview-body");
  169.  
  170.   Array.prototype.forEach.call(targets, function(target) {
  171.     new MutationObserver(function(mutations) {
  172.       mutations.forEach(function(mutation) {
  173.         let mtarget = mutation.target;
  174.         // preform checks before adding code wrap to minimize function calls
  175.         // update after comments are edited
  176.         if (mtarget === target || mtarget.matches(".js-comment-body, .js-preview-body")) {
  177.           clearTimeout(timer);
  178.           setTimeout(function() {
  179.             if (!busy) {
  180.               addRtlButton();
  181.             }
  182.           }, 100);
  183.         }
  184.       });
  185.     }).observe(target, {
  186.       childList: true,
  187.       subtree: true
  188.     });
  189.   });
  190.  
  191.   addBindings();
  192.   addRtlButton();
  193.  
  194.   /* HEAVILY MODIFIED from https://github.com/timdown/rangyinputs
  195.    code was unwrapped & unneeded code was removed
  196.   */
  197.   /**
  198.   * @license Rangy Inputs, a jQuery plug-in for selection and caret manipulation within textareas and text inputs.
  199.   *
  200.   * https://github.com/timdown/rangyinputs
  201.   *
  202.   * For range and selection features for contenteditable, see Rangy.
  203.   * http://code.google.com/p/rangy/
  204.   *
  205.   * Depends on jQuery 1.0 or later.
  206.   *
  207.   * Copyright 2014, Tim Down
  208.   * Licensed under the MIT license.
  209.   * Version: 1.2.0
  210.   * Build date: 30 November 2014
  211.   */
  212.   var UNDEF = "undefined";
  213.   var getSelection, setSelection, surroundSelectedText;
  214.  
  215.   // Trio of isHost* functions taken from Peter Michaux's article:
  216.   // http://peter.michaux.ca/articles/feature-detection-state-of-the-art-browser-scripting
  217.   function isHostMethod(object, property) {
  218.     var t = typeof object[property];
  219.     return t === "function" || (!!(t == "object" && object[property])) || t == "unknown";
  220.   }
  221.   function isHostProperty(object, property) {
  222.     return typeof(object[property]) != UNDEF;
  223.   }
  224.   function isHostObject(object, property) {
  225.     return !!(typeof(object[property]) == "object" && object[property]);
  226.   }
  227.   function fail(reason) {
  228.     if (window.console && window.console.log) {
  229.       window.console.log("RangyInputs not supported in your browser. Reason: " + reason);
  230.     }
  231.   }
  232.  
  233.   function adjustOffsets(el, start, end) {
  234.     if (start < 0) {
  235.       start += el.value.length;
  236.     }
  237.     if (typeof end == UNDEF) {
  238.       end = start;
  239.     }
  240.     if (end < 0) {
  241.       end += el.value.length;
  242.     }
  243.     return { start: start, end: end };
  244.   }
  245.  
  246.   function makeSelection(el, start, end) {
  247.     return {
  248.       start: start,
  249.       end: end,
  250.       length: end - start,
  251.       text: el.value.slice(start, end)
  252.     };
  253.   }
  254.  
  255.   function getBody() {
  256.     return isHostObject(document, "body") ? document.body : document.getElementsByTagName("body")[0];
  257.   }
  258.  
  259.   var testTextArea = document.createElement("textarea");
  260.   getBody().appendChild(testTextArea);
  261.  
  262.   if (isHostProperty(testTextArea, "selectionStart") && isHostProperty(testTextArea, "selectionEnd")) {
  263.     getSelection = function(el) {
  264.       var start = el.selectionStart, end = el.selectionEnd;
  265.       return makeSelection(el, start, end);
  266.     };
  267.  
  268.     setSelection = function(el, startOffset, endOffset) {
  269.       var offsets = adjustOffsets(el, startOffset, endOffset);
  270.       el.selectionStart = offsets.start;
  271.       el.selectionEnd = offsets.end;
  272.     };
  273.   } else if (isHostMethod(testTextArea, "createTextRange") && isHostObject(document, "selection") &&
  274.     isHostMethod(document.selection, "createRange")) {
  275.  
  276.     getSelection = function(el) {
  277.       var start = 0, end = 0, normalizedValue, textInputRange, len, endRange;
  278.       var range = document.selection.createRange();
  279.  
  280.       if (range && range.parentElement() == el) {
  281.         len = el.value.length;
  282.  
  283.         normalizedValue = el.value.replace(/\r\n/g, "\n");
  284.         textInputRange = el.createTextRange();
  285.         textInputRange.moveToBookmark(range.getBookmark());
  286.         endRange = el.createTextRange();
  287.         endRange.collapse(false);
  288.         if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
  289.           start = end = len;
  290.         } else {
  291.           start = -textInputRange.moveStart("character", -len);
  292.           start += normalizedValue.slice(0, start).split("\n").length - 1;
  293.           if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
  294.             end = len;
  295.           } else {
  296.             end = -textInputRange.moveEnd("character", -len);
  297.             end += normalizedValue.slice(0, end).split("\n").length - 1;
  298.           }
  299.         }
  300.       }
  301.  
  302.       return makeSelection(el, start, end);
  303.     };
  304.  
  305.     // Moving across a line break only counts as moving one character in a TextRange, whereas a line break in
  306.     // the textarea value is two characters. This function corrects for that by converting a text offset into a
  307.     // range character offset by subtracting one character for every line break in the textarea prior to the
  308.     // offset
  309.     var offsetToRangeCharacterMove = function(el, offset) {
  310.       return offset - (el.value.slice(0, offset).split("\r\n").length - 1);
  311.     };
  312.  
  313.     setSelection = function(el, startOffset, endOffset) {
  314.       var offsets = adjustOffsets(el, startOffset, endOffset);
  315.       var range = el.createTextRange();
  316.       var startCharMove = offsetToRangeCharacterMove(el, offsets.start);
  317.       range.collapse(true);
  318.       if (offsets.start == offsets.end) {
  319.         range.move("character", startCharMove);
  320.       } else {
  321.         range.moveEnd("character", offsetToRangeCharacterMove(el, offsets.end));
  322.         range.moveStart("character", startCharMove);
  323.       }
  324.       range.select();
  325.     };
  326.   } else {
  327.     getBody().removeChild(testTextArea);
  328.     fail("No means of finding text input caret position");
  329.     return;
  330.   }
  331.   // Clean up
  332.   getBody().removeChild(testTextArea);
  333.  
  334.   function getValueAfterPaste(el, text) {
  335.     var val = el.value, sel = getSelection(el), selStart = sel.start;
  336.     return {
  337.       value: val.slice(0, selStart) + text + val.slice(sel.end),
  338.       index: selStart,
  339.       replaced: sel.text
  340.     };
  341.   }
  342.  
  343.   function pasteTextWithCommand(el, text) {
  344.     el.focus();
  345.     var sel = getSelection(el);
  346.  
  347.     // Hack to work around incorrect delete command when deleting the last word on a line
  348.     setSelection(el, sel.start, sel.end);
  349.     if (text === "") {
  350.       document.execCommand("delete", false, null);
  351.     } else {
  352.       document.execCommand("insertText", false, text);
  353.     }
  354.  
  355.     return {
  356.       replaced: sel.text,
  357.       index: sel.start
  358.     };
  359.   }
  360.  
  361.   function pasteTextWithValueChange(el, text) {
  362.     el.focus();
  363.     var valueAfterPaste = getValueAfterPaste(el, text);
  364.     el.value = valueAfterPaste.value;
  365.     return valueAfterPaste;
  366.   }
  367.  
  368.   var pasteText = function(el, text) {
  369.     var valueAfterPaste = getValueAfterPaste(el, text);
  370.     try {
  371.       var pasteInfo = pasteTextWithCommand(el, text);
  372.       if (el.value == valueAfterPaste.value) {
  373.         pasteText = pasteTextWithCommand;
  374.         return pasteInfo;
  375.       }
  376.     } catch (ex) {
  377.       // Do nothing and fall back to changing the value manually
  378.     }
  379.     pasteText = pasteTextWithValueChange;
  380.     el.value = valueAfterPaste.value;
  381.     return valueAfterPaste;
  382.   };
  383.  
  384.   var updateSelectionAfterInsert = function(el, startIndex, text, selectionBehaviour) {
  385.     var endIndex = startIndex + text.length;
  386.  
  387.     selectionBehaviour = (typeof selectionBehaviour == "string") ?
  388.     selectionBehaviour.toLowerCase() : "";
  389.  
  390.     if ((selectionBehaviour == "collapsetoend" || selectionBehaviour == "select") && /[\r\n]/.test(text)) {
  391.       // Find the length of the actual text inserted, which could vary
  392.       // depending on how the browser deals with line breaks
  393.       var normalizedText = text.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
  394.       endIndex = startIndex + normalizedText.length;
  395.       var firstLineBreakIndex = startIndex + normalizedText.indexOf("\n");
  396.  
  397.       if (el.value.slice(firstLineBreakIndex, firstLineBreakIndex + 2) == "\r\n") {
  398.         // Browser uses \r\n, so we need to account for extra \r characters
  399.         endIndex += normalizedText.match(/\n/g).length;
  400.       }
  401.     }
  402.  
  403.     switch (selectionBehaviour) {
  404.       case "collapsetostart":
  405.         setSelection(el, startIndex, startIndex);
  406.         break;
  407.       case "collapsetoend":
  408.         setSelection(el, endIndex, endIndex);
  409.         break;
  410.       case "select":
  411.         setSelection(el, startIndex, endIndex);
  412.         break;
  413.     }
  414.   };
  415.  
  416.   surroundSelectedText = function(el, before, after, selectionBehaviour) {
  417.     if (typeof after == UNDEF) {
  418.       after = before;
  419.     }
  420.     var sel = getSelection(el);
  421.     var pasteInfo = pasteText(el, before + sel.text + after);
  422.     updateSelectionAfterInsert(el, pasteInfo.index + before.length, sel.text, selectionBehaviour || "select");
  423.   };
  424.  
  425. })();