Fossil

Check-in [7fddf96c]
Login

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

Overview
Comment:Revamp the comments, and refactor the code in preparation for an auto-init functionality for HTML-defined buttons.
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | tooltip-copyhash
Files: files | file ages | folders
SHA3-256: 7fddf96cd6ece0fe4e139871be10d8de562f22dfe8312dc9e7aab70d65f41f7c
User & Date: florian 2019-05-31 15:01:00
Wiki:tooltip-copyhash
Context
2019-05-31
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
14:44
Check that the value of the "data-copylength" attribute is a positive number prior to chopping the text. check-in: b9823751 user: florian tags: tooltip-copyhash
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to src/copybtn.js.

1
2















3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18


19






20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/* Create (if necessary) and initialize a "Copy Text" button <idButton> linked
** to the target element <idTarget>.















**
** HTML snippet for statically created buttons:
**
**    <span class="copy-button" id="idButton"
**      data-copytarget="idTarget" data-copylength="cchLength"></span>
**
** Note: Both <idTarget> and <cchLength> can be set statically or dynamically,
** i.e. the makeCopyButton() function does not overwrite the "data-copytarget"
** and "data-copylength" attributes with empty/zero values.
*/
function makeCopyButton(idButton,idTarget,cchLength){
  var elButton = document.getElementById(idButton);
  if( !elButton ){
    elButton = document.createElement("span");
    elButton.className = "copy-button";
    elButton.id = idButton;


  }






  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 Text" button. */
var lockCopyText = false;
function clickCopyButton(e){
  e.preventDefault();   /* Mandatory for <a> and <button>. */
  e.stopPropagation();
  if( lockCopyText ) return;
  lockCopyText = true;
  this.style.transition = "opacity 400ms ease-in-out";
|
|
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>





<
<
<
<


<
<
|
|
|
>
>
|
>
>
>
>
>
>







|







1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22




23
24


25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
/* Manage "Copy Buttons" linked to target elements, to copy the text (or, parts
** thereof) of the target elements to the clipboard.
**
** Newly created buttons are <span> elements with an SVG background icon,
** 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:
**
**    <span class="copy-button" id="idButton"
**      data-copytarget="idTarget" data-copylength="cchLength"></span>




*/
function makeCopyButton(idButton,idTarget,cchLength){


  var elButton = document.createElement("span");
  elButton.className = "copy-button";
  elButton.id = idButton;
  initCopyButton(elButton,idTarget,cchLength);
  return elButton;
}
function initCopyButtonById(idButton,idTarget,cchLength){
  var elButton = document.getElementById(idButton);
  if( elButton ) initCopyButton(elButton,idTarget,cchLength);
  return elButton;
}
function initCopyButton(elButton,idTarget,cchLength){
  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;
  this.style.transition = "opacity 400ms ease-in-out";