Fossil SCM

Auto-init HTML-defined buttons during the "DOMContentLoaded" event, so no more Javascript code required, apart from loading the copybtn.js module.

florian 2019-05-31 15:33 tooltip-copyhash
Commit 148b01359c844449478443800a64dd734820f838bccc23f17cdccdc93f694b58
Parent 7fddf96cd6ece0f…
1 file changed +42 -1
~ src/copybtn.js
M src/copybtn.js
+42 -1
--- src/copybtn.js
+++ src/copybtn.js
@@ -7,11 +7,12 @@
77
 ** To simplify customization, the only properties modified for HTML-defined
88
 ** buttons are the "onclick" handler, and the "transition" and "opacity" styles
99
 ** (used for animation).
1010
 **
1111
 ** For HTML-defined buttons, either initCopyButtonById(), or initCopyButton(),
12
-** needs to be called to attach the "onclick" handler.
12
+** needs to be called to attach the "onclick" handler (done automatically from
13
+** a handler attached to the "DOMContentLoaded" event).
1314
 **
1415
 ** The initialization functions do not overwrite the "data-copytarget" and
1516
 ** "data-copylength" attributes with empty or null values for <idTarget> and
1617
 ** <cchLength>, respectively. Set <cchLength> to "-1" to explicitly remove the
1718
 ** previous copy length limit.
@@ -39,10 +40,16 @@
3940
 if( idTarget ) elButton.setAttribute("data-copytarget",idTarget);
4041
 if( cchLength ) elButton.setAttribute("data-copylength",cchLength);
4142
 elButton.onclick = clickCopyButton;
4243
 return elButton;
4344
 }
45
+onContentLoaded(function(){
46
+ var aButtons = document.getElementsByClassName("copy-button");
47
+ for ( var i=0; i<aButtons.length; i++ ){
48
+ initCopyButton(aButtons[i],0,0);
49
+ }
50
+});
4451
 /* The onclick handler for the "Copy Button". */
4552
 var lockCopyText = false;
4653
 function clickCopyButton(e){
4754
 e.preventDefault(); /* Mandatory for <a> and <button>. */
4855
 e.stopPropagation();
@@ -89,6 +96,40 @@
8996
 try{
9097
 document.execCommand('copy');
9198
 }catch(err){
9299
 }
93100
 document.body.removeChild(textArea);
101
+}
102
+/* Execute a function as soon as the HTML document has been completely loaded.
103
+** The idea for this code is based on the contentLoaded() function presented
104
+** here:
105
+**
106
+** Cross-browser wrapper for DOMContentLoaded
107
+** http://javascript.nwbox.com/ContentLoaded/
108
+*/
109
+function onContentLoaded(fnready) {
110
+ var fninit = function() {
111
+ if (document.addEventListener ||
112
+ event.type === 'load' ||
113
+ document.readyState === 'complete') {
114
+ if (document.addEventListener) {
115
+ document.removeEventListener('DOMContentLoaded',fninit,false);
116
+ window.removeEventListener('load',fninit,false);
117
+ }
118
+ else {
119
+ document.detachEvent('onreadystatechange',fninit);
120
+ window.detachEvent('onload',fninit);
121
+ }
122
+ }
123
+ fnready.call(window);
124
+ };
125
+ if (document.readyState === 'complete')
126
+ fnready.call(window);
127
+ else if (document.addEventListener) {
128
+ document.addEventListener('DOMContentLoaded',fninit,false);
129
+ window.addEventListener('load',fninit,false);
130
+ }
131
+ else {
132
+ document.attachEvent('onreadystatechange',fninit);
133
+ window.attachEvent('onload',fninit);
134
+ }
94135
 }
95136
--- src/copybtn.js
+++ src/copybtn.js
@@ -7,11 +7,12 @@
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.
@@ -39,10 +40,16 @@
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();
@@ -89,6 +96,40 @@
89 try{
90 document.execCommand('copy');
91 }catch(err){
92 }
93 document.body.removeChild(textArea);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
94 }
95
--- src/copybtn.js
+++ src/copybtn.js
@@ -7,11 +7,12 @@
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 (done automatically from
13 ** a handler attached to the "DOMContentLoaded" event).
14 **
15 ** The initialization functions do not overwrite the "data-copytarget" and
16 ** "data-copylength" attributes with empty or null values for <idTarget> and
17 ** <cchLength>, respectively. Set <cchLength> to "-1" to explicitly remove the
18 ** previous copy length limit.
@@ -39,10 +40,16 @@
40 if( idTarget ) elButton.setAttribute("data-copytarget",idTarget);
41 if( cchLength ) elButton.setAttribute("data-copylength",cchLength);
42 elButton.onclick = clickCopyButton;
43 return elButton;
44 }
45 onContentLoaded(function(){
46 var aButtons = document.getElementsByClassName("copy-button");
47 for ( var i=0; i<aButtons.length; i++ ){
48 initCopyButton(aButtons[i],0,0);
49 }
50 });
51 /* The onclick handler for the "Copy Button". */
52 var lockCopyText = false;
53 function clickCopyButton(e){
54 e.preventDefault(); /* Mandatory for <a> and <button>. */
55 e.stopPropagation();
@@ -89,6 +96,40 @@
96 try{
97 document.execCommand('copy');
98 }catch(err){
99 }
100 document.body.removeChild(textArea);
101 }
102 /* Execute a function as soon as the HTML document has been completely loaded.
103 ** The idea for this code is based on the contentLoaded() function presented
104 ** here:
105 **
106 ** Cross-browser wrapper for DOMContentLoaded
107 ** http://javascript.nwbox.com/ContentLoaded/
108 */
109 function onContentLoaded(fnready) {
110 var fninit = function() {
111 if (document.addEventListener ||
112 event.type === 'load' ||
113 document.readyState === 'complete') {
114 if (document.addEventListener) {
115 document.removeEventListener('DOMContentLoaded',fninit,false);
116 window.removeEventListener('load',fninit,false);
117 }
118 else {
119 document.detachEvent('onreadystatechange',fninit);
120 window.detachEvent('onload',fninit);
121 }
122 }
123 fnready.call(window);
124 };
125 if (document.readyState === 'complete')
126 fnready.call(window);
127 else if (document.addEventListener) {
128 document.addEventListener('DOMContentLoaded',fninit,false);
129 window.addEventListener('load',fninit,false);
130 }
131 else {
132 document.attachEvent('onreadystatechange',fninit);
133 window.attachEvent('onload',fninit);
134 }
135 }
136

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button