Fossil

Check-in [148b0135]
Login

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:Auto-init HTML-defined buttons during the "DOMContentLoaded" event, so no more Javascript code required, apart from loading the copybtn.js module.
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | tooltip-copyhash
Files: files | file ages | folders
SHA3-256: 148b01359c844449478443800a64dd734820f838bccc23f17cdccdc93f694b58
User & Date: florian 2019-05-31 15:34:00
Wiki:tooltip-copyhash
Context
2019-06-02
12:32
Trim leading and trailing white space from the text to be copied to clipboard (do this in Javascript, so no need to care about the extra white space when generating HTML elements). check-in: 6a54cf29 user: florian tags: tooltip-copyhash
2019-05-31
16:36
Demonstration of the copybtn.js module beyond tooltips: add a copy button near the full-length hash of check-ins on the /info page, to copy only the hash prefix when clicked. check-in: 46f91da1 user: florian tags: copybtn.js-demonstration
15:34
Auto-init HTML-defined buttons during the "DOMContentLoaded" event, so no more Javascript code required, apart from loading the copybtn.js module. check-in: 148b0135 user: florian tags: tooltip-copyhash
15:01
Revamp the comments, and refactor the code in preparation for an auto-init functionality for HTML-defined buttons. check-in: 7fddf96c user: florian tags: tooltip-copyhash
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to src/copybtn.js.

5
6
7
8
9
10
11
12

13
14
15
16
17
18
19
..
37
38
39
40
41
42
43






44
45
46
47
48
49
50
..
87
88
89
90
91
92
93
94


































** defined by the "copy-button" class in the default CSS style sheet.
**
** To simplify customization, the only properties modified for HTML-defined
** buttons are the "onclick" handler, and the "transition" and "opacity" styles
** (used for animation).
**
** For HTML-defined buttons, either initCopyButtonById(), or initCopyButton(),
** needs to be called to attach the "onclick" handler.

**
** The initialization functions do not overwrite the "data-copytarget" and
** "data-copylength" attributes with empty or null values for <idTarget> and
** <cchLength>, respectively. Set <cchLength> to "-1" to explicitly remove the
** previous copy length limit.
**
** HTML snippet for statically created buttons:
................................................................................
  elButton.style.transition = "";
  elButton.style.opacity = 1;
  if( idTarget ) elButton.setAttribute("data-copytarget",idTarget);
  if( cchLength ) elButton.setAttribute("data-copylength",cchLength);
  elButton.onclick = clickCopyButton;
  return elButton;
}






/* The onclick handler for the "Copy Button". */
var lockCopyText = false;
function clickCopyButton(e){
  e.preventDefault();   /* Mandatory for <a> and <button>. */
  e.stopPropagation();
  if( lockCopyText ) return;
  lockCopyText = true;
................................................................................
  textArea.focus();
  textArea.select();
  try{
    document.execCommand('copy');
  }catch(err){
  }
  document.body.removeChild(textArea);
}









































|
>







 







>
>
>
>
>
>







 








>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
..
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
..
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
** defined by the "copy-button" class in the default CSS style sheet.
**
** To simplify customization, the only properties modified for HTML-defined
** buttons are the "onclick" handler, and the "transition" and "opacity" styles
** (used for animation).
**
** For HTML-defined buttons, either initCopyButtonById(), or initCopyButton(),
** needs to be called to attach the "onclick" handler (done automatically from
** a handler attached to the "DOMContentLoaded" event).
**
** The initialization functions do not overwrite the "data-copytarget" and
** "data-copylength" attributes with empty or null values for <idTarget> and
** <cchLength>, respectively. Set <cchLength> to "-1" to explicitly remove the
** previous copy length limit.
**
** HTML snippet for statically created buttons:
................................................................................
  elButton.style.transition = "";
  elButton.style.opacity = 1;
  if( idTarget ) elButton.setAttribute("data-copytarget",idTarget);
  if( cchLength ) elButton.setAttribute("data-copylength",cchLength);
  elButton.onclick = clickCopyButton;
  return elButton;
}
onContentLoaded(function(){
  var aButtons = document.getElementsByClassName("copy-button");
  for ( var i=0; i<aButtons.length; i++ ){
    initCopyButton(aButtons[i],0,0);
  }
});
/* The onclick handler for the "Copy Button". */
var lockCopyText = false;
function clickCopyButton(e){
  e.preventDefault();   /* Mandatory for <a> and <button>. */
  e.stopPropagation();
  if( lockCopyText ) return;
  lockCopyText = true;
................................................................................
  textArea.focus();
  textArea.select();
  try{
    document.execCommand('copy');
  }catch(err){
  }
  document.body.removeChild(textArea);
}
/* Execute a function as soon as the HTML document has been completely loaded.
** The idea for this code is based on the contentLoaded() function presented
** here:
**
**    Cross-browser wrapper for DOMContentLoaded
**    http://javascript.nwbox.com/ContentLoaded/
*/
function onContentLoaded(fnready) {
  var fninit = function() {
    if (document.addEventListener ||
        event.type === 'load' ||
        document.readyState === 'complete') {
      if (document.addEventListener) {
        document.removeEventListener('DOMContentLoaded',fninit,false);
        window.removeEventListener('load',fninit,false);
      }
      else {
        document.detachEvent('onreadystatechange',fninit);
        window.detachEvent('onload',fninit);
      }
    }
    fnready.call(window);
  };
  if (document.readyState === 'complete')
    fnready.call(window);
  else if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded',fninit,false);
    window.addEventListener('load',fninit,false);
  }
  else {
    document.attachEvent('onreadystatechange',fninit);
    window.attachEvent('onload',fninit);
  }
}