Fossil

Check-in [5380333f]
Login

Check-in [5380333f]

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

Overview
Comment:Enhance the sbsdiff.js script to do the diff-column width expansion and constraction as the browser width chagnes. Add the complete sbsdiff.js script text to the end of --webpage diff output, but only when the -y option is also used.
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA3-256: 5380333f6382df4e4abb3242121ab427cebcd0153af79476f39accc1171a3f74
User & Date: drh 2021-08-25 18:26:31
Context
2021-08-25
20:56
Improved internal interfaces for diff. For --webpage, omit the CSS used only for side-by-side diffs when doing a unified diff. ... (check-in: eb6611c4 user: drh tags: trunk)
18:26
Enhance the sbsdiff.js script to do the diff-column width expansion and constraction as the browser width chagnes. Add the complete sbsdiff.js script text to the end of --webpage diff output, but only when the -y option is also used. ... (check-in: 5380333f user: drh tags: trunk)
18:00
For the --webpage output, use javascript to resize all side-by-side diff columns so that they completely fill the available screen width. ... (check-in: 571dd613 user: drh tags: trunk)
Changes
Hide Diffs Side-by-Side Diffs Ignore Whitespace Patch

Changes to src/diffcmd.c.

219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
219
220
221
222
223
224
225
























226
227
228
229
230
231
232







-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-







@   color: #a0a0a0;
@ }
@ </style>
@ </head>
@ <body>
;
const char zWebpageEnd[] = 
@ <script>
@ (function(){
@   var lastWidth = 0;
@   function checkWidth(){
@     if( document.body.clientWidth!=lastWidth ){
@       lastWidth = document.body.clientWidth;
@       var w = lastWidth*0.5 - 100;
@       var allCols = document.getElementsByClassName('difftxtcol');
@       for(let i=0; i<allCols.length; i++){
@         allCols[i].style.width = w + "px";
@         allCols[i].style.maxWidth = w + "px";
@       }
@       var allDiffs = document.getElementsByClassName('sbsdiffcols');
@       w = lastWidth;
@       for(let i=0; i<allDiffs.length; i++){
@         allDiffs[i].style.width = w + "px";
@         allDiffs[i].style.maxWidth = w + "px";
@       }
@     }
@     setTimeout(checkWidth, 100)
@   }
@   checkWidth();
@ }());
@ </script>
@ </body>
@ </html>
;

/*
** Print a header or footer on the overall diff output.
**
265
266
267
268
269
270
271








272
273
274
275
276
277
278
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262







+
+
+
+
+
+
+
+







    }else{
      fossil_print("%s", zWebpageHdr);
    }
  }
}
void diff_footer(u64 diffFlags, Blob *pOut){
  if( (diffFlags & DIFF_WEBPAGE)!=0 ){
    if( diffFlags & DIFF_SIDEBYSIDE ){
      const unsigned char *zJs = builtin_file("sbsdiff.js", 0);
      if( pOut ){
        blob_appendf(pOut, "<script>\n%s</script>\n", zJs);
      }else{
        fossil_print("<script>\n%s</script>\n", zJs);
      }
    }
    if( pOut ){
      blob_append(pOut, zWebpageEnd, -1);
    }else{
      fossil_print("%s", zWebpageEnd);
    }
  }
}

Changes to src/sbsdiff.js.

1
2
3


4
5
6
7
8
9
10
1


2
3
4
5
6
7
8
9
10

-
-
+
+







/* The javascript in this file was added by Joel Bruick on 2013-07-06,
** originally as in-line javascript.  It does some kind of setup for
** side-by-side diff display, but I'm not really sure what.
** originally as in-line javascript.  It keeps the horizontal scrollbars
** in sync on side-by-side diffs.
*/
(function(){
  var SCROLL_LEN = 25;
  function initSbsDiff(diff){
    var txtCols = diff.querySelectorAll('.difftxtcol');
    var txtPres = diff.querySelectorAll('.difftxtcol pre');
    var width = Math.max(txtPres[0].scrollWidth, txtPres[1].scrollWidth);
34
35
36
37
38
39
40






















41
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63







+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

  if(window.fossil && fossil.page){
    /* Here we can use forEach() because the pages which use
       fossil.pages only work in HTML5-compliant browsers. */
    fossil.page.tweakSbsDiffs = function(){
      document.querySelectorAll('.sbsdiffcols').forEach(initSbsDiff);
    };
  }
  /* This part added by DRH on 2021-08-25 to adjust the width of the
  ** diff columns so that they fill the screen. */
  var lastWidth = 0;
  function checkWidth(){
    if( document.body.clientWidth!=lastWidth ){
      lastWidth = document.body.clientWidth;
      var w = lastWidth*0.5 - 100;
      var allCols = document.getElementsByClassName('difftxtcol');
      for(let i=0; i<allCols.length; i++){
        allCols[i].style.width = w + "px";
        allCols[i].style.maxWidth = w + "px";
      }
      var allDiffs = document.getElementsByClassName('sbsdiffcols');
      w = lastWidth;
      for(let i=0; i<allDiffs.length; i++){
        allDiffs[i].style.width = w + "px";
        allDiffs[i].style.maxWidth = w + "px";
      }
    }
    setTimeout(checkWidth, 100)
  }
  checkWidth();
})();