-
Notifications
You must be signed in to change notification settings - Fork 195
/
issue.js
169 lines (143 loc) · 4.55 KB
/
issue.js
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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
// issue.js provides a widget that will appear in HTML documents when
// text is selected that allows extraction of prose to form quotations of
// new GitHub issues.
//
// The widget will appear when the user selects text in the document.
// When clicking the button that appears, the selected text is quoted,
// along with references to the chapter and section from whence the quote
// came, in the new GitHub issue that is created.
//
// Configure by setting the GitHub project URL and any optional parameter
// fields in the new issue form you want populated:
//
// <html
// data-issue-url="https://github.com/w3c/webdriver"
// data-issue-param-milestone="Level 1">
//
// Inspired by the “Simple Bug File Assistant” for the W3C Bugzilla
// bug tracker.
//
// © 2016 Andreas Tolfsen <[email protected]>
// Licensed under the MIT license.
document.addEventListener("DOMContentLoaded", function() {
"use strict";
const ISSUE_PARAM_PREFIX = "data-issue-param-";
const BASE_BUTTON_STYLE = `
color: #fff;
cursor: pointer;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
background-color: #60b044;
background-image: linear-gradient(#8add6d, #60b044);
border: 1px solid #d5d5d5;
whitespace: nowrap;
border-radius: 3px;
line-height: 20px;
font-weight: 600;
font-size: 12px;
padding: 6px 12px;
border-color: #5ca941;
`;
let baseUrl = document.documentElement.attributes["data-issue-url"].value;
let newIssueUrl = baseUrl + (baseUrl.endsWith("/") ? "issues/new" : "/issues/new");
let inputs = {body: ""};
[].forEach.call(document.documentElement.attributes, attr => {
if (attr.name.startsWith(ISSUE_PARAM_PREFIX))
inputs[attr.name.substr(ISSUE_PARAM_PREFIX.length)] = attr.value;
});
function formatSelection(sel) {
let quoteText = text => text.split("\n").map(el => "> " + el).join("\n");
// TODO(ato): Make this just construct a tree of h2/h3
let findSection = (el, localName) => {
let sectionEl = el.closest("section");
if (!sectionEl)
return null;
let heading = sectionEl.querySelector(":scope > " + localName);
if (!heading)
return findSection(sectionEl.parentNode, localName);
let relUrl = location.href + "#" + encodeURIComponent(heading.id);
return {
url: relUrl,
text: heading.textContent,
};
};
let parent = sel.anchorNode.parentElement;
let chapter = findSection(parent, "h2");
let subchapter = findSection(parent, "h3");
let desc = quoteText(sel.toString());
let rv = "";
if (chapter)
rv = `In chapter [${chapter.text}](${chapter.url})`;
if (subchapter)
rv += `, section [${subchapter.text}](${subchapter.url})`;
if (chapter || subchapter)
rv += ":\n";
return rv + desc;
}
function getAbsolutePosition(node) {
let bodyRect = document.body.getBoundingClientRect();
let nodeRect = node.getBoundingClientRect();
return {
top: nodeRect.top - bodyRect.top,
left: nodeRect.left - bodyRect.left,
};
}
let widget = new class {
constructor(rootEl) {
this.parent = rootEl;
this.el = null;
this.shown = false;
}
show() {
if (!this.el) {
let form = this.parent.appendChild(document.createElement("form"));
form.action = newIssueUrl;
form.target = "_blank";
let submit = form.appendChild(document.createElement("input"));
submit.type = "submit";
submit.accessKey = "f";
submit.value = "File an issue";
submit.style.cssText = BASE_BUTTON_STYLE;
Object.keys(inputs).forEach(name => {
let input = form.appendChild(document.createElement("input"));
input.type = "hidden";
input.name = name;
input.value = inputs[name];
inputs[name] = input;
});
form.addEventListener("submit", this.click);
this.submitEl = submit;
this.el = form;
this.el.style.visibility = "visible";
}
this.el.style.visibility = "visible";
this.shown = true;
this.paint();
}
paint() {
if (!this.shown)
return;
let pos = getAbsolutePosition(window.getSelection().getRangeAt(0));
this.el.style.position = "absolute";
this.el.style.top = (pos.top - 40) + "px";
this.el.style.left = (pos.left + 45) + "px";
}
hide() {
if (!this.shown)
return;
this.el.style.visibility = "hidden";
this.shown = false;
}
click() {
let sel = window.getSelection();
if (sel.toString().length > 0)
inputs.body.value = formatSelection(sel);
}
}(document.documentElement);
document.addEventListener("selectionchange", () => {
if (window.getSelection().toString().length == 0)
widget.hide();
else
widget.show();
}, false);
document.addEventListener("scroll", widget.paint, false);
}, false);