Skip to content

Commit 8da52e4

Browse files
silverwindsilverwind
committed
Clean up and fix clone button script
The button 'primary' class needs to be set in a synchronous script to prevent flicker of the button which was regressed recently, fixed that. Additionally, reduced the two script tags to just one, the previous scripts were actually initializing the buttons thrice on the empty repo page, now it only initializes once. Finally, removed duplicate code and re-used the inline function in the update code as well.
1 parent eaf653f commit 8da52e4

File tree

7 files changed

+33
-53
lines changed

7 files changed

+33
-53
lines changed

‎templates/repo/clone_buttons.tmpl‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,7 @@
99
SSH
1010
</button>
1111
{{end}}
12-
<!-- the value will be updated by initRepoCloneLink, the code below is used to avoid UI flicking -->
13-
<input id="repo-clone-url" value="" size="1" readonly>
14-
<script>
15-
(() => {
16-
const proto = localStorage.getItem('repo-clone-protocol') || 'https';
17-
const btn = document.getElementById(`repo-clone-${proto}`);
18-
// it's ok if we don't find the btn here, initRepoCloneLink will take care of it
19-
document.getElementById('repo-clone-url').value = btn ? btn.getAttribute('data-link') : '';
20-
})();
21-
</script>
12+
<input id="repo-clone-url" class="js-clone-url" value="" size="1" readonly>
2213
<button class="ui basic icon button tooltip" id="clipboard-btn" data-content="{{.locale.Tr "copy_url"}}" data-clipboard-target="#repo-clone-url" aria-label="{{.locale.Tr "copy_url"}}">
2314
{{svg "octicon-paste"}}
2415
</button>

‎templates/repo/clone_script.tmpl‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script>
2+
// synchronously set clone button states and urls here to avoid flickering
3+
// on page load. initRepoCloneLink calls this when proto changes.
4+
// TODO: This localStorage setting should be moved to backend user config
5+
// so it's available during rendering, then this inline script can be removed.
6+
(window.updateCloneStates = function() {
7+
const httpsBtn = document.getElementById('repo-clone-https');
8+
const sshBtn = document.getElementById('repo-clone-ssh');
9+
const value = localStorage.getItem('repo-clone-protocol') || 'https';
10+
const isSSH = value === 'ssh' && sshBtn || value !== 'ssh' && !httpsBtn;
11+
12+
if (httpsBtn) httpsBtn.classList[!isSSH ? 'add' : 'remove']('primary');
13+
if (sshBtn) sshBtn.classList[isSSH ? 'add' : 'remove']('primary');
14+
15+
const btn = isSSH ? sshBtn : httpsBtn;
16+
if (!btn) return;
17+
18+
const link = btn.getAttribute('data-link');
19+
for (const el of document.getElementsByClassName('js-clone-url')) {
20+
el[el.nodeName === 'INPUT' ? 'value' : 'textContent'] = link;
21+
}
22+
})();
23+
</script>

‎templates/repo/empty.tmpl‎

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ git init
3737
{{if ne .Repository.DefaultBranch "master"}}git checkout -b {{.Repository.DefaultBranch}}{{end}}
3838
git add README.md
3939
git commit -m "first commit"
40-
git remote add origin <span class="clone-url"></span>
40+
git remote add origin <span class="js-clone-url"></span>
4141
git push -u origin {{.Repository.DefaultBranch}}</code></pre>
4242
</div>
4343
</div>
@@ -46,24 +46,11 @@ git push -u origin {{.Repository.DefaultBranch}}</code></pre>
4646
<div class="item">
4747
<h3>{{.locale.Tr "repo.push_exist_repo"}}</h3>
4848
<div class="markup">
49-
<pre><code>git remote add origin <span class="clone-url"></span>
49+
<pre><code>git remote add origin <span class="js-clone-url"></span>
5050
git push -u origin {{.Repository.DefaultBranch}}</code></pre>
5151
</div>
5252
</div>
53-
<!-- the clone-url content will be updated by initRepoCloneLink, the code below is used to avoid UI flicking -->
54-
<script>
55-
(() => {
56-
const proto = localStorage.getItem('repo-clone-protocol') || 'https';
57-
const btn = document.getElementById(`repo-clone-${proto}`);
58-
const cloneUrls = document.getElementsByClassName('clone-url');
59-
// it's ok if we didn't find the btn here, initRepoCloneLink will take all the work
60-
if (btn) {
61-
for (let i = 0; i < cloneUrls.length; i++) {
62-
cloneUrls[i].textContent = btn.getAttribute('data-link');
63-
}
64-
}
65-
})();
66-
</script>
53+
{{template "repo/clone_script" .}}
6754
{{end}}
6855
{{else}}
6956
<div class="ui segment center">

‎templates/repo/home.tmpl‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,7 @@
124124
{{if eq $n 0}}
125125
<div class="ui action tiny input" id="clone-panel">
126126
{{template "repo/clone_buttons" .}}
127+
{{template "repo/clone_script" .}}
127128
<button id="download-btn" class="ui basic jump dropdown icon button tooltip" data-content="{{.locale.Tr "repo.download_archive"}}" data-position="top right">
128129
{{svg "octicon-download"}}
129130
<div class="menu">

‎templates/repo/wiki/revision.tmpl‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<div class="ui eight wide column text right df ac je">
88
<div class="ui action small input" id="clone-panel">
99
{{template "repo/clone_buttons" .}}
10+
{{template "repo/clone_script" .}}
1011
</div>
1112
</div>
1213
<div class="ui header eight wide column">

‎templates/repo/wiki/view.tmpl‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
<div class="right fitted item">
3232
<div class="ui action small input" id="clone-panel">
3333
{{template "repo/clone_buttons" .}}
34+
{{template "repo/clone_script" .}}
3435
</div>
3536
</div>
3637
</div>

‎web_src/js/features/repo-common.js‎

Lines changed: 3 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,6 @@ export function initRepoArchiveLinks() {
4444
}
4545

4646
export function initRepoCloneLink() {
47-
const defaultGitProtocol = 'https'; // ssh or https
48-
4947
const $repoCloneSsh = $('#repo-clone-ssh');
5048
const $repoCloneHttps = $('#repo-clone-https');
5149
const $inputLink = $('#repo-clone-url');
@@ -54,41 +52,19 @@ export function initRepoCloneLink() {
5452
return;
5553
}
5654

57-
const updateUi = () => {
58-
let isSSH = (localStorage.getItem('repo-clone-protocol') || defaultGitProtocol) === 'ssh';
59-
// there must be at least one clone button (by context/repo.go). if no ssh, then there must be https.
60-
if (isSSH && $repoCloneSsh.length === 0) {
61-
isSSH = false;
62-
} else if (!isSSH && $repoCloneHttps.length === 0) {
63-
isSSH = true;
64-
}
65-
const cloneLink = (isSSH ? $repoCloneSsh : $repoCloneHttps).attr('data-link');
66-
$inputLink.val(cloneLink);
67-
if (isSSH) {
68-
$repoCloneSsh.addClass('primary');
69-
$repoCloneHttps.removeClass('primary');
70-
} else {
71-
$repoCloneSsh.removeClass('primary');
72-
$repoCloneHttps.addClass('primary');
73-
}
74-
// the empty repo guide
75-
$('.quickstart .empty-repo-guide .clone-url').text(cloneLink);
76-
};
77-
updateUi();
78-
55+
// restore animation after first init
7956
setTimeout(() => {
80-
// restore animation after first init
8157
$repoCloneSsh.removeClass('no-transition');
8258
$repoCloneHttps.removeClass('no-transition');
8359
}, 100);
8460

8561
$repoCloneSsh.on('click', () => {
8662
localStorage.setItem('repo-clone-protocol', 'ssh');
87-
updateUi();
63+
window.updateCloneStates();
8864
});
8965
$repoCloneHttps.on('click', () => {
9066
localStorage.setItem('repo-clone-protocol', 'https');
91-
updateUi();
67+
window.updateCloneStates();
9268
});
9369

9470
$inputLink.on('click', () => {

0 commit comments

Comments
 (0)