Use stimulus controller for the create badge modal

src/api/app/components/copy_to_clipboard_input_component.html.haml

@@ -1,4 +1,4 @@
 %span.input-group{ 'data-controller': 'copy-to-clipboard' }
-  = text_field_tag(nil, @input_text, readonly: true, 'data-copy-to-clipboard-target': 'readonly', class: 'form-control')
+  = text_field_tag(nil, @input_text, readonly: true, 'data-copy-to-clipboard-target': 'readonly', class: 'form-control', **@html)
   %button.input-group-text{ type: 'button', data: { action: 'copy-to-clipboard#copy', 'copy-to-clipboard-target': 'button' } }
     %i.fas.fa-clipboard

src/api/app/components/copy_to_clipboard_input_component.rb

@@ -1,6 +1,7 @@
 class CopyToClipboardInputComponent < ApplicationComponent
-  def initialize(input_text:)
+  def initialize(input_text:, html: {})
     super
     @input_text = input_text
+    @html = html
   end
 end

src/api/app/javascript/controllers/badge_controller.js

@@ -0,0 +1,13 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "input", "preview" ]
+  static values = { url: String, packageUrl: String }
+
+  url(event) {
+    var badgeImageUrl = new URL(this.urlValue);
+    badgeImageUrl.searchParams.set('type', event.target.value);
+    this.previewTarget.setAttribute('src', badgeImageUrl);
+    this.inputTarget.value = `[![build result](${badgeImageUrl})](${this.packageUrlValue})`;
+  }
+}

src/api/app/views/webui/package/side_links/_create_badge.html.haml

@@ -5,7 +5,10 @@
     Create Badge
 
 
-  .modal.fade#badge-modal{ tabindex: -1, role: 'dialog', 'aria-labelledby': 'badge-modal-label', 'aria-hidden': 'true' }
+  .modal.fade#badge-modal{ tabindex: -1, role: 'dialog', 'aria-labelledby': 'badge-modal-label', 'aria-hidden': 'true',
+                           data: { controller: 'badge',
+                                   'badge-package-url-value': package_show_url(project, package),
+                                   'badge-url-value': project_package_badge_url(project, package, format: 'svg') } }
     .modal-dialog{ role: 'document' }
       .modal-content
         .modal-header
@@ -19,22 +22,11 @@
             your website, and enjoy it refresh automatically whenever the
             build result changes.
           .label{ for: 'badge-style-selector' } Select Style
-          %select.form-select#badge-style-selector
+          %select.form-select{ 'data-action': 'badge#url' }
             %option{ value: 'default', selected: 'selected' } Default
             %option{ value: 'percent' } Percent
           .d-flex
-            = image_tag(project_package_badge_url(project, package, format: 'svg'), id: 'badge-preview', class: 'mt-3 mx-auto')
+            = image_tag(project_package_badge_url(project, package, format: 'svg'), class: 'mt-3 mx-auto', 'data-badge-target': 'preview')
         .modal-footer
           .input-group.w-100
-            = render CopyToClipboardInputComponent.new(input_text: project_package_badge_url(project, package, format: 'svg'))
-:javascript
-  const BASE_BADGE_URL = "#{project_package_badge_url(project, package, format: 'svg')}";
-  const BASE_PACKAGE_URL = "#{package_show_url(project, package)}";
-
-  $('#badge-style-selector').change(function() {
-    badgeTextCopy();
-  });
-
-  // Despite setting defaults, the browser may preselect different option
-  // on page load
-  badgeTextCopy();
+            = render CopyToClipboardInputComponent.new(input_text: project_package_badge_url(project, package, format: 'svg'), html: { 'data-badge-target': 'input' })