##// END OF EJS Templates
hgweb: add missing semicolons to followlines.js...
av6 -
r35027:75013952 default
parent child Browse files
Show More
@@ -1,286 +1,286 b''
1 1 // followlines.js - JavaScript utilities for followlines UI
2 2 //
3 3 // Copyright 2017 Logilab SA <contact@logilab.fr>
4 4 //
5 5 // This software may be used and distributed according to the terms of the
6 6 // GNU General Public License version 2 or any later version.
7 7
8 8 //** Install event listeners for line block selection and followlines action */
9 9 document.addEventListener('DOMContentLoaded', function() {
10 10 var sourcelines = document.getElementsByClassName('sourcelines')[0];
11 11 if (typeof sourcelines === 'undefined') {
12 12 return;
13 13 }
14 14 // URL to complement with "linerange" query parameter
15 15 var targetUri = sourcelines.dataset.logurl;
16 16 if (typeof targetUri === 'undefined')Β {
17 17 return;
18 18 }
19 19
20 20 // Tag of children of "sourcelines" element on which to add "line
21 21 // selection" style.
22 22 var selectableTag = sourcelines.dataset.selectabletag;
23 23 if (typeof selectableTag === 'undefined') {
24 24 return;
25 25 }
26 26
27 27 var isHead = parseInt(sourcelines.dataset.ishead || "0");
28 28
29 29 //* position "element" on top-right of cursor */
30 30 function positionTopRight(element, event) {
31 31 var x = (event.clientX + 10) + 'px',
32 32 y = (event.clientY - 20) + 'px';
33 33 element.style.top = y;
34 34 element.style.left = x;
35 35 }
36 36
37 37 // retrieve all direct *selectable* children of class="sourcelines"
38 38 // element
39 39 var selectableElements = Array.prototype.filter.call(
40 40 sourcelines.children,
41 function(x) { return x.tagName === selectableTag });
41 function(x) { return x.tagName === selectableTag; });
42 42
43 43 var btnTitleStart = 'start following lines history from here';
44 44 var btnTitleEnd = 'terminate line block selection here';
45 45
46 46 //** return a <button> element with +/- spans */
47 47 function createButton() {
48 48 var btn = document.createElement('button');
49 49 btn.title = btnTitleStart;
50 50 btn.classList.add('btn-followlines');
51 51 var plusSpan = document.createElement('span');
52 52 plusSpan.classList.add('followlines-plus');
53 53 plusSpan.textContent = '+';
54 54 btn.appendChild(plusSpan);
55 55 var br = document.createElement('br');
56 56 btn.appendChild(br);
57 57 var minusSpan = document.createElement('span');
58 58 minusSpan.classList.add('followlines-minus');
59 59 minusSpan.textContent = 'βˆ’';
60 60 btn.appendChild(minusSpan);
61 61 return btn;
62 62 }
63 63
64 64 // extend DOM with CSS class for selection highlight and action buttons
65 var followlinesButtons = []
65 var followlinesButtons = [];
66 66 for (var i = 0; i < selectableElements.length; i++) {
67 67 selectableElements[i].classList.add('followlines-select');
68 68 var btn = createButton();
69 69 followlinesButtons.push(btn);
70 70 // insert the <button> as child of `selectableElements[i]` unless the
71 71 // latter has itself a child with a "followlines-btn-parent" class
72 72 // (annotate view)
73 73 var btnSupportElm = selectableElements[i];
74 74 var childSupportElms = btnSupportElm.getElementsByClassName(
75 75 'followlines-btn-parent');
76 76 if ( childSupportElms.length > 0 ) {
77 77 btnSupportElm = childSupportElms[0];
78 78 }
79 79 var refNode = btnSupportElm.children[0]; // node to insert <button> before
80 80 btnSupportElm.insertBefore(btn, refNode);
81 81 }
82 82
83 83 // ** re-initialize followlines buttons */
84 84 function resetButtons() {
85 85 for (var i = 0; i < followlinesButtons.length; i++) {
86 86 var btn = followlinesButtons[i];
87 87 btn.title = btnTitleStart;
88 88 btn.classList.remove('btn-followlines-end');
89 89 btn.classList.remove('btn-followlines-hidden');
90 90 }
91 91 }
92 92
93 93 var lineSelectedCSSClass = 'followlines-selected';
94 94
95 95 //** add CSS class on selectable elements in `from`-`to` line range */
96 96 function addSelectedCSSClass(from, to) {
97 97 for (var i = from; i <= to; i++) {
98 98 selectableElements[i].classList.add(lineSelectedCSSClass);
99 99 }
100 100 }
101 101
102 102 //** remove CSS class from previously selected lines */
103 103 function removeSelectedCSSClass() {
104 104 var elements = sourcelines.getElementsByClassName(
105 105 lineSelectedCSSClass);
106 106 while (elements.length) {
107 107 elements[0].classList.remove(lineSelectedCSSClass);
108 108 }
109 109 }
110 110
111 111 // ** return the element of type "selectableTag" parent of `element` */
112 112 function selectableParent(element) {
113 113 var parent = element.parentElement;
114 114 if (parent === null) {
115 115 return null;
116 116 }
117 117 if (element.tagName == selectableTag && parent.isSameNode(sourcelines)) {
118 118 return element;
119 119 }
120 120 return selectableParent(parent);
121 121 }
122 122
123 123 // ** update buttons title and style upon first click */
124 124 function updateButtons(selectable) {
125 125 for (var i = 0; i < followlinesButtons.length; i++) {
126 126 var btn = followlinesButtons[i];
127 127 btn.title = btnTitleEnd;
128 128 btn.classList.add('btn-followlines-end');
129 129 }
130 130 // on clicked button, change title to "cancel"
131 131 var clicked = selectable.getElementsByClassName('btn-followlines')[0];
132 132 clicked.title = 'cancel';
133 133 clicked.classList.remove('btn-followlines-end');
134 134 }
135 135
136 136 //** add `listener` on "click" event for all `followlinesButtons` */
137 137 function buttonsAddEventListener(listener) {
138 138 for (var i = 0; i < followlinesButtons.length; i++) {
139 139 followlinesButtons[i].addEventListener('click', listener);
140 140 }
141 141 }
142 142
143 143 //** remove `listener` on "click" event for all `followlinesButtons` */
144 144 function buttonsRemoveEventListener(listener) {
145 145 for (var i = 0; i < followlinesButtons.length; i++) {
146 146 followlinesButtons[i].removeEventListener('click', listener);
147 147 }
148 148 }
149 149
150 150 //** event handler for "click" on the first line of a block */
151 151 function lineSelectStart(e) {
152 152 var startElement = selectableParent(e.target.parentElement);
153 153 if (startElement === null) {
154 154 // not a "selectable" element (maybe <a>): abort, keeping event
155 155 // listener registered for other click with a "selectable" target
156 156 return;
157 157 }
158 158
159 159 // update button tooltip text and CSS
160 160 updateButtons(startElement);
161 161
162 162 var startId = parseInt(startElement.id.slice(1));
163 163 startElement.classList.add(lineSelectedCSSClass); // CSS
164 164
165 165 // remove this event listener
166 166 buttonsRemoveEventListener(lineSelectStart);
167 167
168 168 //** event handler for "click" on the last line of the block */
169 169 function lineSelectEnd(e) {
170 170 var endElement = selectableParent(e.target.parentElement);
171 171 if (endElement === null) {
172 172 // not a <span> (maybe <a>): abort, keeping event listener
173 173 // registered for other click with <span> target
174 174 return;
175 175 }
176 176
177 177 // remove this event listener
178 178 buttonsRemoveEventListener(lineSelectEnd);
179 179
180 180 // reset button tooltip text
181 181 resetButtons();
182 182
183 183 // compute line range (startId, endId)
184 184 var endId = parseInt(endElement.id.slice(1));
185 185 if (endId == startId) {
186 186 // clicked twice the same line, cancel and reset initial state
187 187 // (CSS, event listener for selection start)
188 188 removeSelectedCSSClass();
189 189 buttonsAddEventListener(lineSelectStart);
190 190 return;
191 191 }
192 192 var inviteElement = endElement;
193 193 if (endId < startId) {
194 194 var tmp = endId;
195 195 endId = startId;
196 196 startId = tmp;
197 197 inviteElement = startElement;
198 198 }
199 199
200 200 addSelectedCSSClass(startId - 1, endId -1); // CSS
201 201
202 202 // append the <div id="followlines"> element to last line of the
203 203 // selection block
204 204 var divAndButton = followlinesBox(targetUri, startId, endId, isHead);
205 205 var div = divAndButton[0],
206 206 button = divAndButton[1];
207 207 inviteElement.appendChild(div);
208 208 // set position close to cursor (top-right)
209 209 positionTopRight(div, e);
210 210 // hide all buttons
211 211 for (var i = 0; i < followlinesButtons.length; i++) {
212 212 followlinesButtons[i].classList.add('btn-followlines-hidden');
213 213 }
214 214
215 215 //** event handler for cancelling selection */
216 216 function cancel() {
217 217 // remove invite box
218 218 div.parentNode.removeChild(div);
219 219 // restore initial event listeners
220 220 buttonsAddEventListener(lineSelectStart);
221 221 buttonsRemoveEventListener(cancel);
222 222 for (var i = 0; i < followlinesButtons.length; i++) {
223 223 followlinesButtons[i].classList.remove('btn-followlines-hidden');
224 224 }
225 225 // remove styles on selected lines
226 226 removeSelectedCSSClass();
227 227 resetButtons();
228 228 }
229 229
230 230 // bind cancel event to click on <button>
231 231 button.addEventListener('click', cancel);
232 232 // as well as on an click on any source line
233 233 buttonsAddEventListener(cancel);
234 234 }
235 235
236 236 buttonsAddEventListener(lineSelectEnd);
237 237
238 238 }
239 239
240 240 buttonsAddEventListener(lineSelectStart);
241 241
242 242 //** return a <div id="followlines"> and inner cancel <button> elements */
243 243 function followlinesBox(targetUri, fromline, toline, isHead) {
244 244 // <div id="followlines">
245 245 var div = document.createElement('div');
246 246 div.id = 'followlines';
247 247
248 248 // <div class="followlines-cancel">
249 249 var buttonDiv = document.createElement('div');
250 250 buttonDiv.classList.add('followlines-cancel');
251 251
252 252 // <button>x</button>
253 253 var button = document.createElement('button');
254 254 button.textContent = 'x';
255 255 buttonDiv.appendChild(button);
256 256 div.appendChild(buttonDiv);
257 257
258 258 // <div class="followlines-link">
259 259 var aDiv = document.createElement('div');
260 260 aDiv.classList.add('followlines-link');
261 261 aDiv.textContent = 'follow history of lines ' + fromline + ':' + toline + ':';
262 262 var linesep = document.createElement('br');
263 263 aDiv.appendChild(linesep);
264 264 // link to "ascending" followlines
265 265 var aAsc = document.createElement('a');
266 266 var url = targetUri + '?patch=&linerange=' + fromline + ':' + toline;
267 267 aAsc.setAttribute('href', url);
268 268 aAsc.textContent = 'older';
269 269 aDiv.appendChild(aAsc);
270 270
271 271 if (!isHead) {
272 272 var sep = document.createTextNode(' / ');
273 273 aDiv.appendChild(sep);
274 274 // link to "descending" followlines
275 275 var aDesc = document.createElement('a');
276 276 aDesc.setAttribute('href', url + '&descend=');
277 277 aDesc.textContent = 'newer';
278 278 aDiv.appendChild(aDesc);
279 279 }
280 280
281 281 div.appendChild(aDiv);
282 282
283 283 return [div, button];
284 284 }
285 285
286 286 }, false);
General Comments 0
You need to be logged in to leave comments. Login now