Clean up and fix clone button script (#20415)

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.

I had to split out the script into a separate template as on the empty repo page, the script needs access to the clone URL span in the example text, which is rendered below the clone buttons, so buttons and script could not be combined.
This commit is contained in:
silverwind 2022-07-31 20:29:55 +02:00 committed by GitHub
parent 589677fafb
commit 335e918b11
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 33 additions and 53 deletions

View file

@ -9,16 +9,7 @@
SSH SSH
</button> </button>
{{end}} {{end}}
<!-- the value will be updated by initRepoCloneLink, the code below is used to avoid UI flicking --> <input id="repo-clone-url" class="js-clone-url" value="" size="1" readonly>
<input id="repo-clone-url" value="" size="1" readonly>
<script>
(() => {
const proto = localStorage.getItem('repo-clone-protocol') || 'https';
const btn = document.getElementById(`repo-clone-${proto}`);
// it's ok if we don't find the btn here, initRepoCloneLink will take care of it
document.getElementById('repo-clone-url').value = btn ? btn.getAttribute('data-link') : '';
})();
</script>
<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"}}"> <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"}}">
{{svg "octicon-paste"}} {{svg "octicon-paste"}}
</button> </button>

View file

@ -0,0 +1,23 @@
<script>
// synchronously set clone button states and urls here to avoid flickering
// on page load. initRepoCloneLink calls this when proto changes.
// TODO: This localStorage setting should be moved to backend user config
// so it's available during rendering, then this inline script can be removed.
(window.updateCloneStates = function() {
const httpsBtn = document.getElementById('repo-clone-https');
const sshBtn = document.getElementById('repo-clone-ssh');
const value = localStorage.getItem('repo-clone-protocol') || 'https';
const isSSH = value === 'ssh' && sshBtn || value !== 'ssh' && !httpsBtn;
if (httpsBtn) httpsBtn.classList[!isSSH ? 'add' : 'remove']('primary');
if (sshBtn) sshBtn.classList[isSSH ? 'add' : 'remove']('primary');
const btn = isSSH ? sshBtn : httpsBtn;
if (!btn) return;
const link = btn.getAttribute('data-link');
for (const el of document.getElementsByClassName('js-clone-url')) {
el[el.nodeName === 'INPUT' ? 'value' : 'textContent'] = link;
}
})();
</script>

View file

@ -37,7 +37,7 @@ git init
{{if ne .Repository.DefaultBranch "master"}}git checkout -b {{.Repository.DefaultBranch}}{{end}} {{if ne .Repository.DefaultBranch "master"}}git checkout -b {{.Repository.DefaultBranch}}{{end}}
git add README.md git add README.md
git commit -m "first commit" git commit -m "first commit"
git remote add origin <span class="clone-url"></span> git remote add origin <span class="js-clone-url"></span>
git push -u origin {{.Repository.DefaultBranch}}</code></pre> git push -u origin {{.Repository.DefaultBranch}}</code></pre>
</div> </div>
</div> </div>
@ -46,24 +46,11 @@ git push -u origin {{.Repository.DefaultBranch}}</code></pre>
<div class="item"> <div class="item">
<h3>{{.locale.Tr "repo.push_exist_repo"}}</h3> <h3>{{.locale.Tr "repo.push_exist_repo"}}</h3>
<div class="markup"> <div class="markup">
<pre><code>git remote add origin <span class="clone-url"></span> <pre><code>git remote add origin <span class="js-clone-url"></span>
git push -u origin {{.Repository.DefaultBranch}}</code></pre> git push -u origin {{.Repository.DefaultBranch}}</code></pre>
</div> </div>
</div> </div>
<!-- the clone-url content will be updated by initRepoCloneLink, the code below is used to avoid UI flicking --> {{template "repo/clone_script" .}}
<script>
(() => {
const proto = localStorage.getItem('repo-clone-protocol') || 'https';
const btn = document.getElementById(`repo-clone-${proto}`);
const cloneUrls = document.getElementsByClassName('clone-url');
// it's ok if we didn't find the btn here, initRepoCloneLink will take all the work
if (btn) {
for (let i = 0; i < cloneUrls.length; i++) {
cloneUrls[i].textContent = btn.getAttribute('data-link');
}
}
})();
</script>
{{end}} {{end}}
{{else}} {{else}}
<div class="ui segment center"> <div class="ui segment center">

View file

@ -124,6 +124,7 @@
{{if eq $n 0}} {{if eq $n 0}}
<div class="ui action tiny input" id="clone-panel"> <div class="ui action tiny input" id="clone-panel">
{{template "repo/clone_buttons" .}} {{template "repo/clone_buttons" .}}
{{template "repo/clone_script" .}}
{{if not .DisableDownloadSourceArchives}} {{if not .DisableDownloadSourceArchives}}
<button id="download-btn" class="ui basic jump dropdown icon button tooltip" data-content="{{.locale.Tr "repo.download_archive"}}" data-position="top right"> <button id="download-btn" class="ui basic jump dropdown icon button tooltip" data-content="{{.locale.Tr "repo.download_archive"}}" data-position="top right">
{{svg "octicon-download"}} {{svg "octicon-download"}}

View file

@ -7,6 +7,7 @@
<div class="ui eight wide column text right df ac je"> <div class="ui eight wide column text right df ac je">
<div class="ui action small input" id="clone-panel"> <div class="ui action small input" id="clone-panel">
{{template "repo/clone_buttons" .}} {{template "repo/clone_buttons" .}}
{{template "repo/clone_script" .}}
</div> </div>
</div> </div>
<div class="ui header eight wide column"> <div class="ui header eight wide column">

View file

@ -31,6 +31,7 @@
<div class="right fitted item"> <div class="right fitted item">
<div class="ui action small input" id="clone-panel"> <div class="ui action small input" id="clone-panel">
{{template "repo/clone_buttons" .}} {{template "repo/clone_buttons" .}}
{{template "repo/clone_script" .}}
</div> </div>
</div> </div>
</div> </div>

View file

@ -44,8 +44,6 @@ export function initRepoArchiveLinks() {
} }
export function initRepoCloneLink() { export function initRepoCloneLink() {
const defaultGitProtocol = 'https'; // ssh or https
const $repoCloneSsh = $('#repo-clone-ssh'); const $repoCloneSsh = $('#repo-clone-ssh');
const $repoCloneHttps = $('#repo-clone-https'); const $repoCloneHttps = $('#repo-clone-https');
const $inputLink = $('#repo-clone-url'); const $inputLink = $('#repo-clone-url');
@ -54,41 +52,19 @@ export function initRepoCloneLink() {
return; return;
} }
const updateUi = () => {
let isSSH = (localStorage.getItem('repo-clone-protocol') || defaultGitProtocol) === 'ssh';
// there must be at least one clone button (by context/repo.go). if no ssh, then there must be https.
if (isSSH && $repoCloneSsh.length === 0) {
isSSH = false;
} else if (!isSSH && $repoCloneHttps.length === 0) {
isSSH = true;
}
const cloneLink = (isSSH ? $repoCloneSsh : $repoCloneHttps).attr('data-link');
$inputLink.val(cloneLink);
if (isSSH) {
$repoCloneSsh.addClass('primary');
$repoCloneHttps.removeClass('primary');
} else {
$repoCloneSsh.removeClass('primary');
$repoCloneHttps.addClass('primary');
}
// the empty repo guide
$('.quickstart .empty-repo-guide .clone-url').text(cloneLink);
};
updateUi();
setTimeout(() => {
// restore animation after first init // restore animation after first init
setTimeout(() => {
$repoCloneSsh.removeClass('no-transition'); $repoCloneSsh.removeClass('no-transition');
$repoCloneHttps.removeClass('no-transition'); $repoCloneHttps.removeClass('no-transition');
}, 100); }, 100);
$repoCloneSsh.on('click', () => { $repoCloneSsh.on('click', () => {
localStorage.setItem('repo-clone-protocol', 'ssh'); localStorage.setItem('repo-clone-protocol', 'ssh');
updateUi(); window.updateCloneStates();
}); });
$repoCloneHttps.on('click', () => { $repoCloneHttps.on('click', () => {
localStorage.setItem('repo-clone-protocol', 'https'); localStorage.setItem('repo-clone-protocol', 'https');
updateUi(); window.updateCloneStates();
}); });
$inputLink.on('click', () => { $inputLink.on('click', () => {