Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Clean up and fix clone button script (#20415 & #20600) #20599

Merged
merged 2 commits into from
Aug 2, 2022
Merged

Clean up and fix clone button script (#20415 & #20600) #20599

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
03a32cd
Clean up and fix clone button script (#20415)
silverwind Jul 31, 2022
7b7dca2
Add default value for clone URLs
silverwind Aug 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 1 addition & 10 deletions templates/repo/clone_buttons.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,7 @@
SSH
</button>
{{end}}
<!-- the value will be updated by initRepoCloneLink, the code below is used to avoid UI flicking -->
<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>
<input id="repo-clone-url" class="js-clone-url" value="{{$.CloneButtonOriginLink.HTTPS}}" size="1" readonly>
<button class="ui basic icon button tooltip" id="clipboard-btn" data-content="{{.i18n.Tr "copy_url"}}" data-clipboard-target="#repo-clone-url" aria-label="{{.i18n.Tr "copy_url"}}">
{{svg "octicon-paste"}}
</button>
23 changes: 23 additions & 0 deletions templates/repo/clone_script.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
19 changes: 3 additions & 16 deletions templates/repo/empty.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ git init
{{if ne .Repository.DefaultBranch "master"}}git checkout -b {{.Repository.DefaultBranch}}{{end}}
git add README.md
git commit -m "first commit"
git remote add origin <span class="clone-url"></span>
git remote add origin <span class="js-clone-url">{{$.CloneButtonOriginLink.HTTPS}}</span>
git push -u origin {{.Repository.DefaultBranch}}</code></pre>
</div>
</div>
Expand All @@ -46,24 +46,11 @@ git push -u origin {{.Repository.DefaultBranch}}</code></pre>
<div class="item">
<h3>{{.i18n.Tr "repo.push_exist_repo"}}</h3>
<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">{{$.CloneButtonOriginLink.HTTPS}}</span>
git push -u origin {{.Repository.DefaultBranch}}</code></pre>
</div>
</div>
<!-- the clone-url content will be updated by initRepoCloneLink, the code below is used to avoid UI flicking -->
<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>
{{template "repo/clone_script" .}}
{{end}}
{{else}}
<div class="ui segment center">
Expand Down
1 change: 1 addition & 0 deletions templates/repo/home.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,7 @@
{{if eq $n 0}}
<div class="ui action tiny input" id="clone-panel">
{{template "repo/clone_buttons" .}}
{{template "repo/clone_script" .}}
<button id="download-btn" class="ui basic jump dropdown icon button tooltip" data-content="{{.i18n.Tr "repo.download_archive"}}" data-position="top right">
{{svg "octicon-download"}}
<div class="menu">
Expand Down
1 change: 1 addition & 0 deletions templates/repo/wiki/revision.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<div class="ui eight wide column text right df ac je">
<div class="ui action small input" id="clone-panel">
{{template "repo/clone_buttons" .}}
{{template "repo/clone_script" .}}
</div>
</div>
<div class="ui header eight wide column">
Expand Down
1 change: 1 addition & 0 deletions templates/repo/wiki/view.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
<div class="right fitted item">
<div class="ui action small input" id="clone-panel">
{{template "repo/clone_buttons" .}}
{{template "repo/clone_script" .}}
</div>
</div>
</div>
Expand Down
30 changes: 3 additions & 27 deletions web_src/js/features/repo-common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,6 @@ export function initRepoArchiveLinks() {
}

export function initRepoCloneLink() {
const defaultGitProtocol = 'https'; // ssh or https

const $repoCloneSsh = $('#repo-clone-ssh');
const $repoCloneHttps = $('#repo-clone-https');
const $inputLink = $('#repo-clone-url');
Expand All @@ -54,41 +52,19 @@ export function initRepoCloneLink() {
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();

// restore animation after first init
setTimeout(() => {
// restore animation after first init
$repoCloneSsh.removeClass('no-transition');
$repoCloneHttps.removeClass('no-transition');
}, 100);

$repoCloneSsh.on('click', () => {
localStorage.setItem('repo-clone-protocol', 'ssh');
updateUi();
window.updateCloneStates();
});
$repoCloneHttps.on('click', () => {
localStorage.setItem('repo-clone-protocol', 'https');
updateUi();
window.updateCloneStates();
});

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