Fossil SCM
Optimize diff.js's width updater to only perform DOM selection when it's first run. Also delay its execution until the onload event.
Commit
077f3db10955eb2880c099caf8c152310218c8ff075578a1cf1712b0bf95659f
Parent
65aa2c9643a4b3d…
2 files changed
+35
-27
+36
-27
+35
-27
| --- src/diff.js | ||
| +++ src/diff.js | ||
| @@ -5,11 +5,11 @@ | ||
| 5 | 5 | ** |
| 6 | 6 | ** For a side-by-side diff, if either column is two wide to fit on the |
| 7 | 7 | ** display, scrollbars are added. The scrollbars are linked, so that |
| 8 | 8 | ** both sides scroll together. Left and right arrows also scroll. |
| 9 | 9 | */ |
| 10 | -(function(){ | |
| 10 | +window.addEventListener('load',function(){ | |
| 11 | 11 | var SCROLL_LEN = 25; |
| 12 | 12 | function initDiff(diff){ |
| 13 | 13 | var txtCols = diff.querySelectorAll('td.difftxt'); |
| 14 | 14 | var txtPres = diff.querySelectorAll('td.difftxt pre'); |
| 15 | 15 | var width = 0; |
| @@ -34,31 +34,39 @@ | ||
| 34 | 34 | } |
| 35 | 35 | var i, diffs = document.querySelectorAll('table.splitdiff') |
| 36 | 36 | for(i=0; i<diffs.length; i++){ |
| 37 | 37 | initDiff(diffs[i]); |
| 38 | 38 | } |
| 39 | - var lastWidth = 0; | |
| 40 | - function checkWidth(){ | |
| 41 | - if( document.body.clientWidth!=lastWidth ){ | |
| 42 | - lastWidth = document.body.clientWidth; | |
| 43 | - var w = lastWidth*0.5 - 100; | |
| 44 | - var allCols = document.querySelectorAll('td.difftxtl pre'); | |
| 45 | - for(let i=0; i<allCols.length; i++){ | |
| 46 | - allCols[i].style.width = w + "px"; | |
| 47 | - allCols[i].style.maxWidth = w + "px"; | |
| 48 | - } | |
| 49 | - allCols = document.querySelectorAll('td.difftxtr pre'); | |
| 50 | - for(let i=0; i<allCols.length; i++){ | |
| 51 | - allCols[i].style.width = w + "px"; | |
| 52 | - allCols[i].style.maxWidth = w + "px"; | |
| 53 | - } | |
| 54 | - var allDiffs = document.querySelectorAll('table.diff'); | |
| 55 | - w = lastWidth; | |
| 56 | - for(let i=0; i<allDiffs.length; i++){ | |
| 57 | - allDiffs[i].style.width = '100%'; // setting to w causes unsightly horiz. scrollbar | |
| 58 | - allDiffs[i].style.maxWidth = w + "px"; | |
| 59 | - } | |
| 60 | - } | |
| 61 | - } | |
| 62 | - checkWidth(); | |
| 63 | - window.addEventListener('resize', checkWidth); | |
| 64 | -})(); | |
| 39 | + const checkWidth = function f(){ | |
| 40 | + if(undefined === f.lastWidth){ | |
| 41 | + f.lastWidth = 0; | |
| 42 | + } | |
| 43 | + if( document.body.clientWidth!=f.lastWidth ){ | |
| 44 | + f.lastWidth = document.body.clientWidth; | |
| 45 | + var w = f.lastWidth*0.5 - 100; | |
| 46 | + if(!f.colsL){ | |
| 47 | + f.colsL = document.querySelectorAll('td.difftxtl pre'); | |
| 48 | + } | |
| 49 | + for(let i=0; i<f.colsL.length; i++){ | |
| 50 | + f.colsL[i].style.width = w + "px"; | |
| 51 | + f.colsL[i].style.maxWidth = w + "px"; | |
| 52 | + } | |
| 53 | + if(!f.colsR){ | |
| 54 | + f.colsR = document.querySelectorAll('td.difftxtr pre'); | |
| 55 | + } | |
| 56 | + for(let i=0; i<f.colsR.length; i++){ | |
| 57 | + f.colsR[i].style.width = w + "px"; | |
| 58 | + f.colsR[i].style.maxWidth = w + "px"; | |
| 59 | + } | |
| 60 | + if(!f.allDiffs){ | |
| 61 | + f.allDiffs = document.querySelectorAll('table.diff'); | |
| 62 | + } | |
| 63 | + w = f.lastWidth; | |
| 64 | + for(let i=0; i<f.allDiffs.length; i++){ | |
| 65 | + f.allDiffs[i].style.width = '100%'; // setting to w causes unsightly horiz. scrollbar | |
| 66 | + f.allDiffs[i].style.maxWidth = w + "px"; | |
| 67 | + } | |
| 68 | + } | |
| 69 | + }; | |
| 70 | + checkWidth(); | |
| 71 | + window.addEventListener('resize', checkWidth); | |
| 72 | +}, false); | |
| 65 | 73 |
| --- src/diff.js | |
| +++ src/diff.js | |
| @@ -5,11 +5,11 @@ | |
| 5 | ** |
| 6 | ** For a side-by-side diff, if either column is two wide to fit on the |
| 7 | ** display, scrollbars are added. The scrollbars are linked, so that |
| 8 | ** both sides scroll together. Left and right arrows also scroll. |
| 9 | */ |
| 10 | (function(){ |
| 11 | var SCROLL_LEN = 25; |
| 12 | function initDiff(diff){ |
| 13 | var txtCols = diff.querySelectorAll('td.difftxt'); |
| 14 | var txtPres = diff.querySelectorAll('td.difftxt pre'); |
| 15 | var width = 0; |
| @@ -34,31 +34,39 @@ | |
| 34 | } |
| 35 | var i, diffs = document.querySelectorAll('table.splitdiff') |
| 36 | for(i=0; i<diffs.length; i++){ |
| 37 | initDiff(diffs[i]); |
| 38 | } |
| 39 | var lastWidth = 0; |
| 40 | function checkWidth(){ |
| 41 | if( document.body.clientWidth!=lastWidth ){ |
| 42 | lastWidth = document.body.clientWidth; |
| 43 | var w = lastWidth*0.5 - 100; |
| 44 | var allCols = document.querySelectorAll('td.difftxtl pre'); |
| 45 | for(let i=0; i<allCols.length; i++){ |
| 46 | allCols[i].style.width = w + "px"; |
| 47 | allCols[i].style.maxWidth = w + "px"; |
| 48 | } |
| 49 | allCols = document.querySelectorAll('td.difftxtr pre'); |
| 50 | for(let i=0; i<allCols.length; i++){ |
| 51 | allCols[i].style.width = w + "px"; |
| 52 | allCols[i].style.maxWidth = w + "px"; |
| 53 | } |
| 54 | var allDiffs = document.querySelectorAll('table.diff'); |
| 55 | w = lastWidth; |
| 56 | for(let i=0; i<allDiffs.length; i++){ |
| 57 | allDiffs[i].style.width = '100%'; // setting to w causes unsightly horiz. scrollbar |
| 58 | allDiffs[i].style.maxWidth = w + "px"; |
| 59 | } |
| 60 | } |
| 61 | } |
| 62 | checkWidth(); |
| 63 | window.addEventListener('resize', checkWidth); |
| 64 | })(); |
| 65 |
| --- src/diff.js | |
| +++ src/diff.js | |
| @@ -5,11 +5,11 @@ | |
| 5 | ** |
| 6 | ** For a side-by-side diff, if either column is two wide to fit on the |
| 7 | ** display, scrollbars are added. The scrollbars are linked, so that |
| 8 | ** both sides scroll together. Left and right arrows also scroll. |
| 9 | */ |
| 10 | window.addEventListener('load',function(){ |
| 11 | var SCROLL_LEN = 25; |
| 12 | function initDiff(diff){ |
| 13 | var txtCols = diff.querySelectorAll('td.difftxt'); |
| 14 | var txtPres = diff.querySelectorAll('td.difftxt pre'); |
| 15 | var width = 0; |
| @@ -34,31 +34,39 @@ | |
| 34 | } |
| 35 | var i, diffs = document.querySelectorAll('table.splitdiff') |
| 36 | for(i=0; i<diffs.length; i++){ |
| 37 | initDiff(diffs[i]); |
| 38 | } |
| 39 | const checkWidth = function f(){ |
| 40 | if(undefined === f.lastWidth){ |
| 41 | f.lastWidth = 0; |
| 42 | } |
| 43 | if( document.body.clientWidth!=f.lastWidth ){ |
| 44 | f.lastWidth = document.body.clientWidth; |
| 45 | var w = f.lastWidth*0.5 - 100; |
| 46 | if(!f.colsL){ |
| 47 | f.colsL = document.querySelectorAll('td.difftxtl pre'); |
| 48 | } |
| 49 | for(let i=0; i<f.colsL.length; i++){ |
| 50 | f.colsL[i].style.width = w + "px"; |
| 51 | f.colsL[i].style.maxWidth = w + "px"; |
| 52 | } |
| 53 | if(!f.colsR){ |
| 54 | f.colsR = document.querySelectorAll('td.difftxtr pre'); |
| 55 | } |
| 56 | for(let i=0; i<f.colsR.length; i++){ |
| 57 | f.colsR[i].style.width = w + "px"; |
| 58 | f.colsR[i].style.maxWidth = w + "px"; |
| 59 | } |
| 60 | if(!f.allDiffs){ |
| 61 | f.allDiffs = document.querySelectorAll('table.diff'); |
| 62 | } |
| 63 | w = f.lastWidth; |
| 64 | for(let i=0; i<f.allDiffs.length; i++){ |
| 65 | f.allDiffs[i].style.width = '100%'; // setting to w causes unsightly horiz. scrollbar |
| 66 | f.allDiffs[i].style.maxWidth = w + "px"; |
| 67 | } |
| 68 | } |
| 69 | }; |
| 70 | checkWidth(); |
| 71 | window.addEventListener('resize', checkWidth); |
| 72 | }, false); |
| 73 |
+36
-27
| --- src/fossil.diff.js | ||
| +++ src/fossil.diff.js | ||
| @@ -36,11 +36,11 @@ | ||
| 36 | 36 | ** |
| 37 | 37 | ** For a side-by-side diff, if either column is two wide to fit on the |
| 38 | 38 | ** display, scrollbars are added. The scrollbars are linked, so that |
| 39 | 39 | ** both sides scroll together. Left and right arrows also scroll. |
| 40 | 40 | */ |
| 41 | -(function(){ | |
| 41 | +window.fossil.onPageLoad(function(){ | |
| 42 | 42 | var SCROLL_LEN = 25; |
| 43 | 43 | function initDiff(diff){ |
| 44 | 44 | var txtCols = diff.querySelectorAll('td.difftxt'); |
| 45 | 45 | var txtPres = diff.querySelectorAll('td.difftxt pre'); |
| 46 | 46 | var width = 0; |
| @@ -68,31 +68,40 @@ | ||
| 68 | 68 | }; |
| 69 | 69 | var i, diffs = document.querySelectorAll('table.splitdiff') |
| 70 | 70 | for(i=0; i<diffs.length; i++){ |
| 71 | 71 | initDiff(diffs[i]); |
| 72 | 72 | } |
| 73 | - var lastWidth = 0; | |
| 74 | - function checkWidth(){ | |
| 75 | - if( document.body.clientWidth!=lastWidth ){ | |
| 76 | - lastWidth = document.body.clientWidth; | |
| 77 | - var w = lastWidth*0.5 - 100; | |
| 78 | - var allCols = document.querySelectorAll('td.difftxtl pre'); | |
| 79 | - for(let i=0; i<allCols.length; i++){ | |
| 80 | - allCols[i].style.width = w + "px"; | |
| 81 | - allCols[i].style.maxWidth = w + "px"; | |
| 82 | - } | |
| 83 | - allCols = document.querySelectorAll('td.difftxtr pre'); | |
| 84 | - for(let i=0; i<allCols.length; i++){ | |
| 85 | - allCols[i].style.width = w + "px"; | |
| 86 | - allCols[i].style.maxWidth = w + "px"; | |
| 87 | - } | |
| 88 | - var allDiffs = document.querySelectorAll('table.diff'); | |
| 89 | - w = lastWidth; | |
| 90 | - for(let i=0; i<allDiffs.length; i++){ | |
| 91 | - allDiffs[i].style.width = '100%'; // setting to w causes unsightly horiz. scrollbar | |
| 92 | - allDiffs[i].style.maxWidth = w + "px"; | |
| 93 | - } | |
| 94 | - } | |
| 95 | - } | |
| 96 | - checkWidth(); | |
| 97 | - window.addEventListener('resize', checkWidth); | |
| 98 | -})(); | |
| 73 | + const checkWidth = function f(){ | |
| 74 | + if(undefined === f.lastWidth){ | |
| 75 | + f.lastWidth = 0; | |
| 76 | + } | |
| 77 | + if( document.body.clientWidth!=f.lastWidth ){ | |
| 78 | + f.lastWidth = document.body.clientWidth; | |
| 79 | + var w = f.lastWidth*0.5 - 100; | |
| 80 | + if(!f.colsL){ | |
| 81 | + f.colsL = document.querySelectorAll('td.difftxtl pre'); | |
| 82 | + } | |
| 83 | + for(let i=0; i<f.colsL.length; i++){ | |
| 84 | + f.colsL[i].style.width = w + "px"; | |
| 85 | + f.colsL[i].style.maxWidth = w + "px"; | |
| 86 | + } | |
| 87 | + if(!f.colsR){ | |
| 88 | + f.colsR = document.querySelectorAll('td.difftxtr pre'); | |
| 89 | + } | |
| 90 | + for(let i=0; i<f.colsR.length; i++){ | |
| 91 | + f.colsR[i].style.width = w + "px"; | |
| 92 | + f.colsR[i].style.maxWidth = w + "px"; | |
| 93 | + } | |
| 94 | + if(!f.allDiffs){ | |
| 95 | + f.allDiffs = document.querySelectorAll('table.diff'); | |
| 96 | + } | |
| 97 | + w = f.lastWidth; | |
| 98 | + for(let i=0; i<f.allDiffs.length; i++){ | |
| 99 | + f.allDiffs[i].style.width = '100%'; // setting to w causes unsightly horiz. scrollbar | |
| 100 | + f.allDiffs[i].style.maxWidth = w + "px"; | |
| 101 | + } | |
| 102 | + } | |
| 103 | + }; | |
| 104 | + checkWidth(); | |
| 105 | + window.addEventListener('resize', checkWidth); | |
| 106 | +}, false); | |
| 107 | + | |
| 99 | 108 |
| --- src/fossil.diff.js | |
| +++ src/fossil.diff.js | |
| @@ -36,11 +36,11 @@ | |
| 36 | ** |
| 37 | ** For a side-by-side diff, if either column is two wide to fit on the |
| 38 | ** display, scrollbars are added. The scrollbars are linked, so that |
| 39 | ** both sides scroll together. Left and right arrows also scroll. |
| 40 | */ |
| 41 | (function(){ |
| 42 | var SCROLL_LEN = 25; |
| 43 | function initDiff(diff){ |
| 44 | var txtCols = diff.querySelectorAll('td.difftxt'); |
| 45 | var txtPres = diff.querySelectorAll('td.difftxt pre'); |
| 46 | var width = 0; |
| @@ -68,31 +68,40 @@ | |
| 68 | }; |
| 69 | var i, diffs = document.querySelectorAll('table.splitdiff') |
| 70 | for(i=0; i<diffs.length; i++){ |
| 71 | initDiff(diffs[i]); |
| 72 | } |
| 73 | var lastWidth = 0; |
| 74 | function checkWidth(){ |
| 75 | if( document.body.clientWidth!=lastWidth ){ |
| 76 | lastWidth = document.body.clientWidth; |
| 77 | var w = lastWidth*0.5 - 100; |
| 78 | var allCols = document.querySelectorAll('td.difftxtl pre'); |
| 79 | for(let i=0; i<allCols.length; i++){ |
| 80 | allCols[i].style.width = w + "px"; |
| 81 | allCols[i].style.maxWidth = w + "px"; |
| 82 | } |
| 83 | allCols = document.querySelectorAll('td.difftxtr pre'); |
| 84 | for(let i=0; i<allCols.length; i++){ |
| 85 | allCols[i].style.width = w + "px"; |
| 86 | allCols[i].style.maxWidth = w + "px"; |
| 87 | } |
| 88 | var allDiffs = document.querySelectorAll('table.diff'); |
| 89 | w = lastWidth; |
| 90 | for(let i=0; i<allDiffs.length; i++){ |
| 91 | allDiffs[i].style.width = '100%'; // setting to w causes unsightly horiz. scrollbar |
| 92 | allDiffs[i].style.maxWidth = w + "px"; |
| 93 | } |
| 94 | } |
| 95 | } |
| 96 | checkWidth(); |
| 97 | window.addEventListener('resize', checkWidth); |
| 98 | })(); |
| 99 |
| --- src/fossil.diff.js | |
| +++ src/fossil.diff.js | |
| @@ -36,11 +36,11 @@ | |
| 36 | ** |
| 37 | ** For a side-by-side diff, if either column is two wide to fit on the |
| 38 | ** display, scrollbars are added. The scrollbars are linked, so that |
| 39 | ** both sides scroll together. Left and right arrows also scroll. |
| 40 | */ |
| 41 | window.fossil.onPageLoad(function(){ |
| 42 | var SCROLL_LEN = 25; |
| 43 | function initDiff(diff){ |
| 44 | var txtCols = diff.querySelectorAll('td.difftxt'); |
| 45 | var txtPres = diff.querySelectorAll('td.difftxt pre'); |
| 46 | var width = 0; |
| @@ -68,31 +68,40 @@ | |
| 68 | }; |
| 69 | var i, diffs = document.querySelectorAll('table.splitdiff') |
| 70 | for(i=0; i<diffs.length; i++){ |
| 71 | initDiff(diffs[i]); |
| 72 | } |
| 73 | const checkWidth = function f(){ |
| 74 | if(undefined === f.lastWidth){ |
| 75 | f.lastWidth = 0; |
| 76 | } |
| 77 | if( document.body.clientWidth!=f.lastWidth ){ |
| 78 | f.lastWidth = document.body.clientWidth; |
| 79 | var w = f.lastWidth*0.5 - 100; |
| 80 | if(!f.colsL){ |
| 81 | f.colsL = document.querySelectorAll('td.difftxtl pre'); |
| 82 | } |
| 83 | for(let i=0; i<f.colsL.length; i++){ |
| 84 | f.colsL[i].style.width = w + "px"; |
| 85 | f.colsL[i].style.maxWidth = w + "px"; |
| 86 | } |
| 87 | if(!f.colsR){ |
| 88 | f.colsR = document.querySelectorAll('td.difftxtr pre'); |
| 89 | } |
| 90 | for(let i=0; i<f.colsR.length; i++){ |
| 91 | f.colsR[i].style.width = w + "px"; |
| 92 | f.colsR[i].style.maxWidth = w + "px"; |
| 93 | } |
| 94 | if(!f.allDiffs){ |
| 95 | f.allDiffs = document.querySelectorAll('table.diff'); |
| 96 | } |
| 97 | w = f.lastWidth; |
| 98 | for(let i=0; i<f.allDiffs.length; i++){ |
| 99 | f.allDiffs[i].style.width = '100%'; // setting to w causes unsightly horiz. scrollbar |
| 100 | f.allDiffs[i].style.maxWidth = w + "px"; |
| 101 | } |
| 102 | } |
| 103 | }; |
| 104 | checkWidth(); |
| 105 | window.addEventListener('resize', checkWidth); |
| 106 | }, false); |
| 107 | |
| 108 |