Fossil

Check-in [42972005]
Login

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

Overview
Comment:Automatically set the element ID for dynamically created copy buttons to "copy-IDTARGET" (analogous to the TH1 copybtn function).
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | copybtn.js-tweaks
Files: files | file ages | folders
SHA3-256: 42972005c42a31a4dd8ab4e052876a88d13e99a6134d66f37485b87bbb91b36d
User & Date: florian 2019-06-05 07:23:00
Context
2019-06-05
07:47
Define the spacing between copy buttons and adjacent elements by CSS rules, so that (0) no additional white space (nbsp) needs to be inserted into the HTML document, (1) the spacing can be modified by CSS rules, and (2) the copy buttons can be hidden by CSS rules. check-in: 63ebcafb user: florian tags: copybtn.js-tweaks
07:23
Automatically set the element ID for dynamically created copy buttons to "copy-IDTARGET" (analogous to the TH1 copybtn function). check-in: 42972005 user: florian tags: copybtn.js-tweaks
07:17
More consistent naming scheme for IDs of copy buttons and their target elements. check-in: b19a9826 user: florian tags: copybtn.js-tweaks
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
..
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/* 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 (done automatically from
................................................................................
** 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;




|
>







 







|
|

|


|







1
2
3
4
5
6
7
8
9
10
11
12
13
..
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/* 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, and are
** assigned the element ID "copy-<idTarget>".
**
** 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
................................................................................
** 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="copy-<idTarget>"
**      data-copytarget="<idTarget>" data-copylength="<cchLength>"></span>
*/
function makeCopyButton(idTarget,cchLength){
  var elButton = document.createElement("span");
  elButton.className = "copy-button";
  elButton.id = "copy-" + idTarget;
  initCopyButton(elButton,idTarget,cchLength);
  return elButton;
}
function initCopyButtonById(idButton,idTarget,cchLength){
  var elButton = document.getElementById(idButton);
  if( elButton ) initCopyButton(elButton,idTarget,cchLength);
  return elButton;

Changes to src/graph.js.

628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
      }
      tooltipObj.style.borderColor =
         tooltipObj.style.color = s.getPropertyValue('color')
      tooltipObj.style.visibility = "hidden"
      tooltipObj.innerHTML = html
      tooltipObj.appendChild(document.createTextNode(' '));
      tooltipObj.appendChild(
        makeCopyButton("copy-tooltip-link","tooltip-link",0));
      tooltipObj.style.display = "inline"
      tooltipObj.style.position = "absolute"
      var x = tooltipInfo.posX + 4 + window.pageXOffset
                   - absoluteX(tooltipObj.offsetParent)
      tooltipObj.style.left = x+"px"
      var y = tooltipInfo.posY + window.pageYOffset
                   - tooltipObj.clientHeight - 4







|







628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
      }
      tooltipObj.style.borderColor =
         tooltipObj.style.color = s.getPropertyValue('color')
      tooltipObj.style.visibility = "hidden"
      tooltipObj.innerHTML = html
      tooltipObj.appendChild(document.createTextNode(' '));
      tooltipObj.appendChild(
        makeCopyButton("tooltip-link",0));
      tooltipObj.style.display = "inline"
      tooltipObj.style.position = "absolute"
      var x = tooltipInfo.posX + 4 + window.pageXOffset
                   - absoluteX(tooltipObj.offsetParent)
      tooltipObj.style.left = x+"px"
      var y = tooltipInfo.posY + window.pageYOffset
                   - tooltipObj.clientHeight - 4