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