1 files changed, 42 insertions, 0 deletions
diff --git a/app/assets/javascripts/clone_panel.js b/app/assets/javascripts/clone_panel.js
new file mode 100644
index 00000000000..362e6c5c5ce
--- /dev/null
+++ b/app/assets/javascripts/clone_panel.js
@@ -0,0 +1,42 @@
+import $ from 'jquery';
+
+export default function initClonePanel() {
+  const $cloneOptions = $('ul.clone-options-dropdown');
+  if ($cloneOptions.length) {
+    const $cloneUrlField = $('#clone_url');
+    const $cloneBtnLabel = $('.js-git-clone-holder .js-clone-dropdown-label');
+    const mobileCloneField = document.querySelector(
+      '.js-mobile-git-clone .js-clone-dropdown-label',
+    );
+
+    const selectedCloneOption = $cloneBtnLabel.text().trim();
+    if (selectedCloneOption.length > 0) {
+      $(`a:contains('${selectedCloneOption}')`, $cloneOptions).addClass('is-active');
+    }
+
+    $('a', $cloneOptions).on('click', e => {
+      e.preventDefault();
+      const $this = $(e.currentTarget);
+      const url = $this.attr('href');
+      const cloneType = $this.data('cloneType');
+
+      $('.is-active', $cloneOptions).removeClass('is-active');
+      $(`a[data-clone-type="${cloneType}"]`).each(function switchProtocol() {
+        const $el = $(this);
+        const activeText = $el.find('.dropdown-menu-inner-title').text();
+        const $container = $el.closest('.js-git-clone-holder, .js-mobile-git-clone');
+        const $label = $container.find('.js-clone-dropdown-label');
+
+        $el.toggleClass('is-active');
+        $label.text(activeText);
+      });
+
+      if (mobileCloneField) {
+        mobileCloneField.dataset.clipboardText = url;
+      } else {
+        $cloneUrlField.val(url);
+      }
+      $('.js-git-empty .js-clone').text(url);
+    });
+  }
+}