working with shame

app/assets/javascripts/admin/communication/menu_items.js

@@ -2,20 +2,46 @@
 window.osuny.communication.menuItems = {
     init: function () {
         'use strict';
-        this.kindInput = document.querySelector('form .js-kind-input');
-        if (this.kindInput === null) {
-            return;
-        }
-
+        var i,
+            kind;
+        this.kindInput = document.getElementById('communication_website_menu_item_kind');
+        this.kinds = document.querySelectorAll('[data-kind]');
+        this.url = document.querySelector('.communication_website_menu_item_url');
         this.switchUrl = this.kindInput.dataset.url;
+        for (i = 0; i < this.kinds.length; i += 1) {
+            kind = this.kinds[i];
+            kind.addEventListener('click', this.onKindChange.bind(this));
+        }
+        this.chooseKind(this.kindInput.value);
+    },
 
-        this.kindInput.addEventListener('change', this.onKindChange.bind(this));
+    onKindChange: function (event) {
+        'use strict';
+        var target = event.target,
+            // TODO get value from parent class="kind"
+            kind = target.dataset.tmp;
+        this.chooseKind(kind);
+        this.loadData(kind);
     },
 
-    onKindChange: function () {
+    chooseKind: function (kind) {
         'use strict';
-        var kind = this.kindInput.value;
+        var active = document.querySelector('[data-kind="' + kind + '"]'),
+            i;
+        this.kindInput.value = kind;
+        for (i = 0; i < this.kinds.length; i += 1) {
+            this.kinds[i].classList.remove('kind--selected');
+        }
+        active.classList.add('kind--selected');
+        if (kind === 'url') {
+            this.url.classList.remove('d-none');
+        } else {
+            this.url.classList.add('d-none');
+        }
+    },
 
+    loadData: function (kind) {
+        'use strict';
         $.ajax(this.switchUrl, {
             method: 'GET',
             data: 'kind=' + kind,

app/assets/stylesheets/admin/websites.sass

 .controller-items
-    .item
+    .kind
         transition: background color 0.4s ease
-    .item--selected
-        background: black
-        color: white
+        &--selected
+            background: black
+            color: white

app/views/admin/communication/website/menu/items/_form.html.erb

@@ -9,16 +9,16 @@
         <div class="card-body">
           <%= f.input :title %>
           <%= f.input :kind,
-                      collection: @website.menu_item_kinds,
-                      include_blank: false,
+                      as: :hidden,
                       input_html: {
-                        class: 'js-kind-input',
-                        data: { url: kind_switch_admin_communication_website_menu_items_path }
-                       } %>
+                        data: {
+                          url: kind_switch_admin_communication_website_menu_items_path
+                        }
+                      } %>
           <div class="row">
             <% @website.menu_item_kinds.keys.each do |kind| %>
               <div class="col-6 col-lg-4 col-xl-3">
-                <div class="card item<%= " item--selected" if kind == item.kind %>" data-kind="<%= kind %>">
+                <div class="card kind" data-kind="<%= kind %>">
                   <div class="card-body">
                     <p class="text-end mb-0">
                       <i class="<%= icon_for "communication.website.menu.item.kind.#{kind}" %> fa-2x"></i><br>
@@ -26,12 +26,13 @@
                     <p class="mb-0">
                       <%= t "enums.communication.website.menu.item.kind.#{kind}" %>
                     </p>
+                    <a class="stretched-link" data-tmp="<%= kind %>"></a>
                   </div>
                 </div>
               </div>
             <% end %>
           </div>
-          <div class="<%= 'd-none' unless item.url? %> js-url-field">
+          <div data-kind-if="url">
             <%= f.input :url, as: :string %>
           </div>
           <div class="<%= 'd-none' unless item.has_about? %> js-about-fields">