forgejo/templates/repo/clone_script.tmpl
silverwind 56b99551ae
Clean up and fix clone button script (#20415 & #20600) (#20599)
* 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.

* Add default value for clone URLs

Default clone URLs to HTTP(S) in DOM rendering. JS will immediately
replace this if the user preference is SSH.

Fixes: https://github.com/go-gitea/gitea/issues/20558
2022-08-02 12:31:38 +08:00

24 lines
1 KiB
Handlebars

<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>