Fossil SCM

Revamp the comments, and refactor the code in preparation for an auto-init functionality for HTML-defined buttons.

florian 2019-05-31 15:01 tooltip-copyhash

Commit 7fddf96cd6ece0fe4e139871be10d8de562f22dfe8312dc9e7aab70d65f41f7c

Parent b9823751c95cc96…

1 file changed +29 -12

M src/copybtn.js

+29 -12

		--- src/copybtn.js
		+++ src/copybtn.js
		@@ -1,32 +1,49 @@
1		-/* Create (if necessary) and initialize a "Copy Text" button <idButton> linked
2		-** to the target element <idTarget>.
	1	+/* Manage "Copy Buttons" linked to target elements, to copy the text (or, parts
	2	+** thereof) of the target elements to the clipboard.
	3	+**
	4	+** Newly created buttons are <span> elements with an SVG background icon,
	5	+** defined by the "copy-button" class in the default CSS style sheet.
	6	+**
	7	+** To simplify customization, the only properties modified for HTML-defined
	8	+** buttons are the "onclick" handler, and the "transition" and "opacity" styles
	9	+** (used for animation).
	10	+**
	11	+** For HTML-defined buttons, either initCopyButtonById(), or initCopyButton(),
	12	+** needs to be called to attach the "onclick" handler.
	13	+**
	14	+** The initialization functions do not overwrite the "data-copytarget" and
	15	+** "data-copylength" attributes with empty or null values for <idTarget> and
	16	+** <cchLength>, respectively. Set <cchLength> to "-1" to explicitly remove the
	17	+** previous copy length limit.
3	18	**
4	19	** HTML snippet for statically created buttons:
5	20	**
6	21	** <span class="copy-button" id="idButton"
7	22	** data-copytarget="idTarget" data-copylength="cchLength"></span>
8		-**
9		-** Note: Both <idTarget> and <cchLength> can be set statically or dynamically,
10		-** i.e. the makeCopyButton() function does not overwrite the "data-copytarget"
11		-** and "data-copylength" attributes with empty/zero values.
12	23	*/
13	24	function makeCopyButton(idButton,idTarget,cchLength){
	25	+ var elButton = document.createElement("span");
	26	+ elButton.className = "copy-button";
	27	+ elButton.id = idButton;
	28	+ initCopyButton(elButton,idTarget,cchLength);
	29	+ return elButton;
	30	+}
	31	+function initCopyButtonById(idButton,idTarget,cchLength){
14	32	var elButton = document.getElementById(idButton);
15		- if( !elButton ){
16		- elButton = document.createElement("span");
17		- elButton.className = "copy-button";
18		- elButton.id = idButton;
19		- }
	33	+ if( elButton ) initCopyButton(elButton,idTarget,cchLength);
	34	+ return elButton;
	35	+}
	36	+function initCopyButton(elButton,idTarget,cchLength){
20	37	elButton.style.transition = "";
21	38	elButton.style.opacity = 1;
22	39	if( idTarget ) elButton.setAttribute("data-copytarget",idTarget);
23	40	if( cchLength ) elButton.setAttribute("data-copylength",cchLength);
24	41	elButton.onclick = clickCopyButton;
25	42	return elButton;
26	43	}
27		-/* The onclick handler for the "Copy Text" button. */
	44	+/* The onclick handler for the "Copy Button". */
28	45	var lockCopyText = false;
29	46	function clickCopyButton(e){
30	47	e.preventDefault(); /* Mandatory for <a> and <button>. */
31	48	e.stopPropagation();
32	49	if( lockCopyText ) return;
33	50

	--- src/copybtn.js
	+++ src/copybtn.js
	@@ -1,32 +1,49 @@
1	/* Create (if necessary) and initialize a "Copy Text" button <idButton> linked
2	** to the target element <idTarget>.















3	**
4	** HTML snippet for statically created buttons:
5	**
6	** <span class="copy-button" id="idButton"
7	** data-copytarget="idTarget" data-copylength="cchLength"></span>
8	**
9	** Note: Both <idTarget> and <cchLength> can be set statically or dynamically,
10	** i.e. the makeCopyButton() function does not overwrite the "data-copytarget"
11	** and "data-copylength" attributes with empty/zero values.
12	*/
13	function makeCopyButton(idButton,idTarget,cchLength){







14	var elButton = document.getElementById(idButton);
15	if( !elButton ){
16	elButton = document.createElement("span");
17	elButton.className = "copy-button";
18	elButton.id = idButton;
19	}
20	elButton.style.transition = "";
21	elButton.style.opacity = 1;
22	if( idTarget ) elButton.setAttribute("data-copytarget",idTarget);
23	if( cchLength ) elButton.setAttribute("data-copylength",cchLength);
24	elButton.onclick = clickCopyButton;
25	return elButton;
26	}
27	/* The onclick handler for the "Copy Text" button. */
28	var lockCopyText = false;
29	function clickCopyButton(e){
30	e.preventDefault(); /* Mandatory for <a> and <button>. */
31	e.stopPropagation();
32	if( lockCopyText ) return;
33

	--- src/copybtn.js
	+++ src/copybtn.js
	@@ -1,32 +1,49 @@
1	/* Manage "Copy Buttons" linked to target elements, to copy the text (or, parts
2	** thereof) of the target elements to the clipboard.
3	**
4	** Newly created buttons are <span> elements with an SVG background icon,
5	** defined by the "copy-button" class in the default CSS style sheet.
6	**
7	** To simplify customization, the only properties modified for HTML-defined
8	** buttons are the "onclick" handler, and the "transition" and "opacity" styles
9	** (used for animation).
10	**
11	** For HTML-defined buttons, either initCopyButtonById(), or initCopyButton(),
12	** needs to be called to attach the "onclick" handler.
13	**
14	** The initialization functions do not overwrite the "data-copytarget" and
15	** "data-copylength" attributes with empty or null values for <idTarget> and
16	** <cchLength>, respectively. Set <cchLength> to "-1" to explicitly remove the
17	** previous copy length limit.
18	**
19	** HTML snippet for statically created buttons:
20	**
21	** <span class="copy-button" id="idButton"
22	** data-copytarget="idTarget" data-copylength="cchLength"></span>




23	*/
24	function makeCopyButton(idButton,idTarget,cchLength){
25	var elButton = document.createElement("span");
26	elButton.className = "copy-button";
27	elButton.id = idButton;
28	initCopyButton(elButton,idTarget,cchLength);
29	return elButton;
30	}
31	function initCopyButtonById(idButton,idTarget,cchLength){
32	var elButton = document.getElementById(idButton);
33	if( elButton ) initCopyButton(elButton,idTarget,cchLength);
34	return elButton;
35	}
36	function initCopyButton(elButton,idTarget,cchLength){

37	elButton.style.transition = "";
38	elButton.style.opacity = 1;
39	if( idTarget ) elButton.setAttribute("data-copytarget",idTarget);
40	if( cchLength ) elButton.setAttribute("data-copylength",cchLength);
41	elButton.onclick = clickCopyButton;
42	return elButton;
43	}
44	/* The onclick handler for the "Copy Button". */
45	var lockCopyText = false;
46	function clickCopyButton(e){
47	e.preventDefault(); /* Mandatory for <a> and <button>. */
48	e.stopPropagation();
49	if( lockCopyText ) return;
50

Fossil SCM

Keyboard Shortcuts