Fossil

Check-in [63ebcafb]
Login

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

Overview
Comment: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.
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | copybtn.js-tweaks
Files: files | file ages | folders
SHA3-256: 63ebcafb19dd004ba246149fe1ae7018345db2ba7af70209fdee1bc293702845
User & Date: florian 2019-06-05 07:47:00
Context
2019-06-05
07:58
Also add a copy button for the artifact hash on the /artifact page in hex-dump mode. check-in: 1d23109d user: florian tags: copybtn.js-tweaks
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
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to src/copybtn.js.

19
20
21
22
23
24
25
26
27
28

29
30
31
32
33
34
35
** 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);







|


>







19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
** 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,bFlipped,cchLength){
  var elButton = document.createElement("span");
  elButton.className = "copy-button";
  if( bFlipped ) elButton.className += " copy-button-flipped";
  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);

Changes to src/default_css.txt.

769
770
771
772
773
774
775

776
777
778
779
780
781
782
783
784
785





label {
  white-space: nowrap;
}
.copy-button {
  display: inline-block;
  width: 14px;
  height: 14px;

  margin: -2px 0 0 0;
  padding: 0;
  border: 0;
  vertical-align: middle;
//Note: the mkcss utility does not support line breaks in data URIs.
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath style='fill: black; opacity:0' d='M 14 14 H 0 V 0 h 14 v 14 z'/%3E%3Cpath style='fill:rgb(240,240,240)' d='M 1 0 h 6.6 l 2 2 h 1 l 3.4 3.4 v 8.6 h -10 v -2 h -3 z'/%3E%3Cpath style='fill:rgb(64,64,64)' d='M 2 1 h 5 l 3 3 v 7 h -8 z'/%3E%3Cpath style='fill:rgb(248,248,248)' d='M 3 2 h 3.6 l 2.4 2.4 v 5.6 h -6 z'/%3E%3Cpath style='fill:rgb(80,128,208)' d='M 4 5 h 4 v 1 h -4 z m 0 2 h 4 v 1 h -4 z'/%3E%3Cpath style='fill:rgb(64,64,64)' d='M 5 3 h 5 l 3 3 v 7 h -8 z'/%3E%3Cpath style='fill:rgb(248,248,248)' d='M 10 4.4 v 1.6 h 1.6 z m -4 -0.6 h 3 v 3 h -3 z m 0 3 h 6 v 5.4 h -6 z'/%3E%3Cpath style='fill:rgb(80,128,208)' d='M 7 8 h 4 v 1 h -4 z m 0 2 h 4 v 1 h -4 z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}












>
|









>
>
>
>
>
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
label {
  white-space: nowrap;
}
.copy-button {
  display: inline-block;
  width: 14px;
  height: 14px;
//Note: .24em is slightly smaller than the average width of a normal space.
  margin: -2px .24em 0 0;
  padding: 0;
  border: 0;
  vertical-align: middle;
//Note: the mkcss utility does not support line breaks in data URIs.
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath style='fill: black; opacity:0' d='M 14 14 H 0 V 0 h 14 v 14 z'/%3E%3Cpath style='fill:rgb(240,240,240)' d='M 1 0 h 6.6 l 2 2 h 1 l 3.4 3.4 v 8.6 h -10 v -2 h -3 z'/%3E%3Cpath style='fill:rgb(64,64,64)' d='M 2 1 h 5 l 3 3 v 7 h -8 z'/%3E%3Cpath style='fill:rgb(248,248,248)' d='M 3 2 h 3.6 l 2.4 2.4 v 5.6 h -6 z'/%3E%3Cpath style='fill:rgb(80,128,208)' d='M 4 5 h 4 v 1 h -4 z m 0 2 h 4 v 1 h -4 z'/%3E%3Cpath style='fill:rgb(64,64,64)' d='M 5 3 h 5 l 3 3 v 7 h -8 z'/%3E%3Cpath style='fill:rgb(248,248,248)' d='M 10 4.4 v 1.6 h 1.6 z m -4 -0.6 h 3 v 3 h -3 z m 0 3 h 6 v 5.4 h -6 z'/%3E%3Cpath style='fill:rgb(80,128,208)' d='M 7 8 h 4 v 1 h -4 z m 0 2 h 4 v 1 h -4 z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
.copy-button-flipped {
//Note: .16em is suitable for element grouping.
  margin-left: .16em;
  margin-right: 0;
}

Changes to src/graph.js.

626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
      }else{
        tooltipObj.style.backgroundColor = s.getPropertyValue('background-color')
      }
      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







<
<
|







626
627
628
629
630
631
632


633
634
635
636
637
638
639
640
      }else{
        tooltipObj.style.backgroundColor = s.getPropertyValue('background-color')
      }
      tooltipObj.style.borderColor =
         tooltipObj.style.color = s.getPropertyValue('color')
      tooltipObj.style.visibility = "hidden"
      tooltipObj.innerHTML = html


      tooltipObj.appendChild(makeCopyButton("tooltip-link",true,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

Changes to src/info.c.

763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
...
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
....
2193
2194
2195
2196
2197
2198
2199
2200
2201
2202
2203
2204
2205
2206
2207
2208
2209
                   "   AND tag.tagid=tagxref.tagid "
                   "   AND +tag.tagname GLOB 'sym-*'", rid);
    while( db_step(&q2)==SQLITE_ROW ){
      const char *zTagName = db_column_text(&q2, 0);
      if( fossil_strcmp(zTagName,zBrName)==0 ){
        @  | <span class="copy-button" id="copy-name-br"
        @      data-copytarget="name-br" data-copylength="0">
        @  </span>&nbsp;<span id="name-br"><!--
        @  -->%z(href("%R/timeline?r=%T&unhide",zTagName))%h(zTagName)</a>
        @  </span>
        if( wiki_tagid2("branch",zTagName)!=0 ){
          blob_appendf(&wiki_read_links, " | %z%h</a>",
              href("%R/wiki?name=branch/%h",zTagName), zTagName);
        }else if( g.perm.Write && g.perm.WrWiki ){
          blob_appendf(&wiki_add_links, " | %z%h</a>",
................................................................................
    @   | %z(href("%R/tree?nofiles&type=tree&ci=%!S",zUuid))folders</a>
    @   </td>
    @ </tr>

    @ <tr><th>%s(hname_alg(nUuid)):</th><td>
    @ <span class="copy-button" id="copy-hash-ci"
    @   data-copytarget="hash-ci" data-copylength="%d(hash_digits(1))">
    @ </span>&nbsp;<span id="hash-ci">%.32s(zUuid)<wbr>%s(zUuid+32)</span>
    if( g.perm.Setup ){
      @ (Record ID: %d(rid))
    }
    @ </td></tr>
    @ <tr><th>User&nbsp;&amp;&nbsp;Date:</th><td>
    hyperlink_to_user(zUser,zDate," on ");
    hyperlink_to_date(zDate, "</td></tr>");
................................................................................
    style_submenu_element("Artifact", "%R/artifact/%S", zUuid);
  }else{
    style_copy_button();
    @ <h2>Artifact
    @ <span class="copy-button" id="copy-hash-ar"
    @   data-copytarget="hash-ar" data-copylength="%d(hash_digits(1))">
    if( g.perm.Setup ){
      @ </span>&nbsp;<span id="hash-ar">%s(zUuid)</span> (%d(rid)):</h2>
    }else{
      @ </span>&nbsp;<span id="hash-ar">%s(zUuid)</span>:</h2>
    }
  }
  blob_zero(&downloadName);
  asText = P("txt")!=0;
  if( asText ) objdescFlags &= ~OBJDESC_BASE;
  objType = object_description(rid, objdescFlags, &downloadName);
  if( !descOnly && P("download")!=0 ){







|







 







|







 







|

|







763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
...
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
....
2193
2194
2195
2196
2197
2198
2199
2200
2201
2202
2203
2204
2205
2206
2207
2208
2209
                   "   AND tag.tagid=tagxref.tagid "
                   "   AND +tag.tagname GLOB 'sym-*'", rid);
    while( db_step(&q2)==SQLITE_ROW ){
      const char *zTagName = db_column_text(&q2, 0);
      if( fossil_strcmp(zTagName,zBrName)==0 ){
        @  | <span class="copy-button" id="copy-name-br"
        @      data-copytarget="name-br" data-copylength="0">
        @  </span><span id="name-br"><!--
        @  -->%z(href("%R/timeline?r=%T&unhide",zTagName))%h(zTagName)</a>
        @  </span>
        if( wiki_tagid2("branch",zTagName)!=0 ){
          blob_appendf(&wiki_read_links, " | %z%h</a>",
              href("%R/wiki?name=branch/%h",zTagName), zTagName);
        }else if( g.perm.Write && g.perm.WrWiki ){
          blob_appendf(&wiki_add_links, " | %z%h</a>",
................................................................................
    @   | %z(href("%R/tree?nofiles&type=tree&ci=%!S",zUuid))folders</a>
    @   </td>
    @ </tr>

    @ <tr><th>%s(hname_alg(nUuid)):</th><td>
    @ <span class="copy-button" id="copy-hash-ci"
    @   data-copytarget="hash-ci" data-copylength="%d(hash_digits(1))">
    @ </span><span id="hash-ci">%.32s(zUuid)<wbr>%s(zUuid+32)</span>
    if( g.perm.Setup ){
      @ (Record ID: %d(rid))
    }
    @ </td></tr>
    @ <tr><th>User&nbsp;&amp;&nbsp;Date:</th><td>
    hyperlink_to_user(zUser,zDate," on ");
    hyperlink_to_date(zDate, "</td></tr>");
................................................................................
    style_submenu_element("Artifact", "%R/artifact/%S", zUuid);
  }else{
    style_copy_button();
    @ <h2>Artifact
    @ <span class="copy-button" id="copy-hash-ar"
    @   data-copytarget="hash-ar" data-copylength="%d(hash_digits(1))">
    if( g.perm.Setup ){
      @ </span><span id="hash-ar">%s(zUuid)</span> (%d(rid)):</h2>
    }else{
      @ </span><span id="hash-ar">%s(zUuid)</span>:</h2>
    }
  }
  blob_zero(&downloadName);
  asText = P("txt")!=0;
  if( asText ) objdescFlags &= ~OBJDESC_BASE;
  objType = object_description(rid, objdescFlags, &downloadName);
  if( !descOnly && P("download")!=0 ){

Changes to src/th_main.c.

990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003


1004
1005
1006
1007
1008
1009
1010
....
1014
1015
1016
1017
1018
1019
1020
1021
1022

1023
1024

1025
1026
1027
1028


1029
1030
1031
1032
1033

1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045













1046
1047
1048
1049
1050
1051
1052
    sendText("</select>", -1, 0);
    Th_Free(interp, azElem);
  }
  return TH_OK;
}

/*
** TH1 command: copybtn TARGETID TEXT ?COPYLENGTH?
**
** Output TEXT with a click-to-copy button next to it. Loads the copybtn.js
** Javascript module, and generates HTML elements with the following IDs:
**
**    TARGETID:       The <span> wrapper around TEXT.
**    copy-TARGETID:  The <span> for the copy button.


**
** The optional COPYLENGTH argument defines the length of the substring of TEXT
** copied to clipboard:
**
**    <= 0:   No limit (default if the argument is omitted).
**    >= 3:   Truncate TEXT after COPYLENGTH (single-byte) characters.
**       1:   Use the "hash-digits" setting as the limit.
................................................................................
static int copybtnCmd(
  Th_Interp *interp,
  void *p,
  int argc,
  const char **argv,
  int *argl
){
  if( argc!=3 && argc!=4 ){
    return Th_WrongNumArgs(interp, "copybtn TARGETID TEXT COPYLENGTH");

  }
  if( enableOutput ){

    int copylength = 0;
    char *zTargetId, *zText, *zResult;
    if( argc==4 && Th_ToInt(interp, argv[3], argl[3], &copylength) ){
      return TH_ERROR;


    }
    if( copylength==1 ) copylength = hash_digits(0);
    else if( copylength==2 ) copylength = hash_digits(1);
    zTargetId = htmlize((char*)argv[1], argl[1]);
    zText = htmlize((char*)argv[2], argl[2]);

    zResult = mprintf(
                "<span "
                "class=\"copy-button\" "
                "id=\"copy-%s\" "
                "data-copytarget=\"%s\" "
                "data-copylength=\"%d\">"
                "</span>"
                "&nbsp;"
                "<span id=\"%s\">"
                "%s"
                "</span>",
                zTargetId, zTargetId, copylength, zTargetId, zText);













    free(zTargetId);
    free(zText);
    style_copy_button();
    sendText(zResult, -1, 0);
    free(zResult);
  }
  return TH_OK;







|






>
>







 







|
|
>


>


<
|
>
>




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







990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
....
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030

1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046

1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
    sendText("</select>", -1, 0);
    Th_Free(interp, azElem);
  }
  return TH_OK;
}

/*
** TH1 command: copybtn TARGETID FLIPPED TEXT ?COPYLENGTH?
**
** Output TEXT with a click-to-copy button next to it. Loads the copybtn.js
** Javascript module, and generates HTML elements with the following IDs:
**
**    TARGETID:       The <span> wrapper around TEXT.
**    copy-TARGETID:  The <span> for the copy button.
**
** If the FLIPPED argument is non-zero, the copy button is displayed after TEXT.
**
** The optional COPYLENGTH argument defines the length of the substring of TEXT
** copied to clipboard:
**
**    <= 0:   No limit (default if the argument is omitted).
**    >= 3:   Truncate TEXT after COPYLENGTH (single-byte) characters.
**       1:   Use the "hash-digits" setting as the limit.
................................................................................
static int copybtnCmd(
  Th_Interp *interp,
  void *p,
  int argc,
  const char **argv,
  int *argl
){
  if( argc!=4 && argc!=5 ){
    return Th_WrongNumArgs(interp,
                           "copybtn TARGETID FLIPPED TEXT ?COPYLENGTH?");
  }
  if( enableOutput ){
    int flipped = 0;
    int copylength = 0;
    char *zTargetId, *zText, *zResult;

    if( Th_ToInt(interp, argv[2], argl[2], &flipped) ) return TH_ERROR;
    if( argc==5 ){
      if( Th_ToInt(interp, argv[4], argl[4], &copylength) ) return TH_ERROR;
    }
    if( copylength==1 ) copylength = hash_digits(0);
    else if( copylength==2 ) copylength = hash_digits(1);
    zTargetId = htmlize((char*)argv[1], argl[1]);
    zText = htmlize((char*)argv[3], argl[3]);
    if( !flipped ){
      zResult = mprintf(
                  "<span "
                  "class=\"copy-button\" "
                  "id=\"copy-%s\" "
                  "data-copytarget=\"%s\" "
                  "data-copylength=\"%d\">"
                  "</span>"

                  "<span id=\"%s\">"
                  "%s"
                  "</span>",
                  zTargetId, zTargetId, copylength, zTargetId, zText);
    }else{
      zResult = mprintf(
                  "<span id=\"%s\">"
                  "%s"
                  "</span>"
                  "<span "
                  "class=\"copy-button copy-button-flipped\" "
                  "id=\"copy-%s\" "
                  "data-copytarget=\"%s\" "
                  "data-copylength=\"%d\">"
                  "</span>",
                  zTargetId, zText, zTargetId, zTargetId, copylength);
    }
    free(zTargetId);
    free(zText);
    style_copy_button();
    sendText(zResult, -1, 0);
    free(zResult);
  }
  return TH_OK;

Changes to src/tktsetup.c.

445
446
447
448
449
450
451
452
453
454
455
456
457
458
459

static const char zDefaultView[] =
@ <table cellpadding="5">
@ <tr><td class="tktDspLabel">Ticket&nbsp;UUID:</td>
@ <th1>
@ if {[info exists tkt_uuid]} {
@   html "<td class='tktDspValue' colspan='3'>"
@   copybtn hash-tk $tkt_uuid 1
@   if {[hascap s]} {
@     html " ($tkt_id)"
@   }
@   html "</td></tr>\n"
@ } else {
@   if {[hascap s]} {
@     html "<td class='tktDspValue' colspan='3'>Deleted "







|







445
446
447
448
449
450
451
452
453
454
455
456
457
458
459

static const char zDefaultView[] =
@ <table cellpadding="5">
@ <tr><td class="tktDspLabel">Ticket&nbsp;UUID:</td>
@ <th1>
@ if {[info exists tkt_uuid]} {
@   html "<td class='tktDspValue' colspan='3'>"
@   copybtn hash-tk 0 $tkt_uuid 1
@   if {[hascap s]} {
@     html " ($tkt_id)"
@   }
@   html "</td></tr>\n"
@ } else {
@   if {[hascap s]} {
@     html "<td class='tktDspValue' colspan='3'>Deleted "

Changes to www/th1.md.

279
280
281
282
283
284
285
286
287
288
289
290
291
292


293
294
295
296
297
298
299
selected value.  TEXT-LIST is a list of possible values for the
combobox.  NUMLINES is 1 for a true combobox.  If NUMLINES is greater
than one then the display is a listbox with the number of lines given.

<a name="copybtn"></a>TH1 copybtn Command
-----------------------------------------

  *  copybtn TARGETID TEXT ?COPYLENGTH?

Output TEXT with a click-to-copy button next to it. Loads the copybtn.js
Javascript module, and generates HTML elements with the following IDs:

  *  TARGETID:       The `<span>` wrapper around TEXT.
  *  copy-TARGETID:  The `<span>` for the copy button.



The optional COPYLENGTH argument defines the length of the substring of TEXT
copied to clipboard:

  *  <= 0:   No limit (default if the argument is omitted).
  *  >= 3:   Truncate TEXT after COPYLENGTH (single-byte) characters.
  *     1:   Use the "hash-digits" setting as the limit.







|






>
>







279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
selected value.  TEXT-LIST is a list of possible values for the
combobox.  NUMLINES is 1 for a true combobox.  If NUMLINES is greater
than one then the display is a listbox with the number of lines given.

<a name="copybtn"></a>TH1 copybtn Command
-----------------------------------------

  *  copybtn TARGETID FLIPPED TEXT ?COPYLENGTH?

Output TEXT with a click-to-copy button next to it. Loads the copybtn.js
Javascript module, and generates HTML elements with the following IDs:

  *  TARGETID:       The `<span>` wrapper around TEXT.
  *  copy-TARGETID:  The `<span>` for the copy button.

If the FLIPPED argument is non-zero, the copy button is displayed after TEXT.

The optional COPYLENGTH argument defines the length of the substring of TEXT
copied to clipboard:

  *  <= 0:   No limit (default if the argument is omitted).
  *  >= 3:   Truncate TEXT after COPYLENGTH (single-byte) characters.
  *     1:   Use the "hash-digits" setting as the limit.