Merge pull request #460 from shikorism/replace-jquery-tissue-plugin

Replace jquery tissue plugin

resources/assets/js/@types/jquery-tissue.d.ts

@@ -1,12 +0,0 @@
-// tissue.ts で定義されているjQuery Pluginの型定義
-declare namespace JQueryTissue {
-    interface LinkCardOptions {
-        endpoint: string;
-    }
-}
-
-interface JQuery<TElement = HTMLElement> {
-    linkCard: (options?: JQueryTissue.LinkCardOptions) => this;
-    pageSelector: () => this;
-    deleteCheckinModal: () => this;
-}

resources/assets/js/app.ts

@@ -1,5 +1,6 @@
 import * as Cookies from 'js-cookie';
 import { fetchPostJson, fetchDeleteJson, ResponseError } from './fetch';
+import { linkCard, pageSelector, deleteCheckinModal } from './tissue';
 
 require('./bootstrap');
 
@@ -20,14 +21,18 @@ $(() => {
     }
     $('[data-toggle="tooltip"]').tooltip();
     $('.alert').alert();
-    $('.tis-page-selector').pageSelector();
+    document.querySelectorAll('.tis-page-selector').forEach(pageSelector);
 
-    $('.link-card').linkCard();
+    document.querySelectorAll('.link-card').forEach(linkCard);
-    const $deleteCheckinModal = $('#deleteCheckinModal').deleteCheckinModal();
+
+    const elDeleteCheckinModal = document.getElementById('deleteCheckinModal');
+    if (elDeleteCheckinModal) {
+        const $deleteCheckinModal = deleteCheckinModal(elDeleteCheckinModal);
         $(document).on('click', '[data-target="#deleteCheckinModal"]', function (event) {
             event.preventDefault();
             $deleteCheckinModal.modal('show', this);
         });
+    }
 
     $(document).on('click', '[data-href]', function (_event) {
         location.href = $(this).data('href');

resources/assets/js/bootstrap.ts

@@ -1,5 +1,2 @@
-// jQuery
-import './tissue';
-
 // Bootstrap
 import 'bootstrap';

resources/assets/js/tissue.ts

@@ -1,80 +1,73 @@
 import { fetchGet } from './fetch';
 
-(function ($) {
+export function suicide<T>(e: T) {
-    $.fn.linkCard = function (options) {
+    return function (): never {
-        const settings = $.extend(
+        throw e;
-            {
+    };
-                endpoint: '/api/checkin/card',
+}
-            },
-            options
-        );
 
-        return this.each(function () {
+const die = suicide('Element not found!');
-            const $this = $(this);
 
-            const url = $this.find('a').attr('href');
+export function linkCard(el: Element) {
+    const url = el.querySelector('a')?.href;
     if (!url) {
         return;
     }
 
-            fetchGet(settings.endpoint, { url })
+    fetchGet('/api/checkin/card', { url })
         .then((response) => response.json())
         .then((data) => {
-                    const $metaColumn = $this.find('.col-12:last-of-type');
+            const metaColumn = el.querySelector('.col-12:last-of-type') || die();
-                    const $imageColumn = $this.find('.col-12:first-of-type');
+            const imageColumn = el.querySelector<HTMLElement>('.col-12:first-of-type') || die();
-                    const $title = $this.find('.card-title');
+            const title = el.querySelector<HTMLElement>('.card-title') || die();
-                    const $desc = $this.find('.card-text');
+            const desc = el.querySelector<HTMLElement>('.card-text') || die();
-                    const $image = $imageColumn.find('img');
+            const image = imageColumn.querySelector('img') || die();
 
             if (data.title === '') {
-                        $title.hide();
+                title.style.display = 'none';
             } else {
-                        $title.text(data.title);
+                title.textContent = data.title;
             }
 
             if (data.description === '') {
-                        $desc.hide();
+                desc.style.display = 'none';
             } else {
-                        $desc.text(data.description);
+                desc.textContent = data.description;
             }
 
             if (data.image === '') {
-                        $imageColumn.hide();
+                imageColumn.style.display = 'none';
-                        $metaColumn.removeClass('col-md-6');
+                metaColumn.classList.remove('col-md-6');
             } else {
-                        $image.attr('src', data.image);
+                image.src = data.image;
             }
 
             if (data.title !== '' || data.description !== '' || data.image !== '') {
-                        $this.removeClass('d-none');
+                el.classList.remove('d-none');
             }
         });
-        });
-    };
 
-    $.fn.pageSelector = function () {
+    return el;
-        return this.on('change', function () {
+}
-            location.href = $(this).find(':selected').data('href');
-        });
-    };
 
-    $.fn.deleteCheckinModal = function () {
+export function pageSelector(el: Element) {
-        return this.each(function () {
+    if (el instanceof HTMLSelectElement) {
-            $(this)
+        el.addEventListener('change', function () {
-                .on('show.bs.modal', function (event) {
+            location.href = this.options[this.selectedIndex].dataset.href as string;
-                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                    const target = $(event.relatedTarget!);
-                    const modal = $(this);
-                    modal.find('.modal-body .date-label').text(target.data('date'));
-                    modal.data('id', target.data('id'));
-                })
-                .find('.btn-danger')
-                .on('click', function (_event) {
-                    const modal = $('#deleteCheckinModal');
-                    const form = modal.find('form');
-                    form.attr('action', form.attr('action')?.replace('@', modal.data('id')) || null);
-                    form.submit();
         });
+    }
+    return el;
+}
+
+export function deleteCheckinModal(modal: Element) {
+    let id: any = null;
+    modal.querySelector('form')?.addEventListener('submit', function () {
+        this.action = this.action.replace('@', id);
     });
-    };
+    return $(modal).on('show.bs.modal', function (event) {
-})(jQuery);
+        const target = event.relatedTarget || die();
+        const dateLabel = this.querySelector('.modal-body .date-label') || die();
+        dateLabel.textContent = target.dataset.date || null;
+        id = target.dataset.id;
+    });
+}

resources/views/ejaculation/show.blade.php

@@ -97,13 +97,13 @@
         削除確認
     @endslot
     <span class="date-label"></span> のチェックインを削除してもよろしいですか？
+    @slot('footer')
         <form action="{{ route('checkin.destroy', ['id' => '@']) }}" method="post">
             {{ csrf_field() }}
             {{ method_field('DELETE') }}
-    </form>
-    @slot('footer')
             <button type="button" class="btn btn-secondary" data-dismiss="modal">キャンセル</button>
-        <button type="button" class="btn btn-danger">削除</button>
+            <button type="submit" class="btn btn-danger">削除</button>
+        </form>
     @endslot
 @endcomponent
 @endsection

resources/views/user/profile.blade.php

@@ -117,13 +117,13 @@
         削除確認
     @endslot
     <span class="date-label"></span> のチェックインを削除してもよろしいですか？
+    @slot('footer')
         <form action="{{ route('checkin.destroy', ['id' => '@']) }}" method="post">
             {{ csrf_field() }}
             {{ method_field('DELETE') }}
-    </form>
-    @slot('footer')
             <button type="button" class="btn btn-secondary" data-dismiss="modal">キャンセル</button>
-        <button type="button" class="btn btn-danger">削除</button>
+            <button type="submit" class="btn btn-danger">削除</button>
+        </form>
     @endslot
 @endcomponent
 @endsection