From a4fdd220ba259a3444c5fc3569454b50b4d7ddfa Mon Sep 17 00:00:00 2001 From: shibafu Date: Thu, 6 Aug 2020 01:09:25 +0900 Subject: [PATCH 1/4] =?UTF-8?q?pageSelector=E3=82=92Vanilla=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- resources/assets/js/@types/jquery-tissue.d.ts | 1 - resources/assets/js/app.ts | 3 ++- resources/assets/js/tissue.ts | 13 +++++++------ 3 files changed, 9 insertions(+), 8 deletions(-) diff --git a/resources/assets/js/@types/jquery-tissue.d.ts b/resources/assets/js/@types/jquery-tissue.d.ts index 3938ccb..5d49f3c 100644 --- a/resources/assets/js/@types/jquery-tissue.d.ts +++ b/resources/assets/js/@types/jquery-tissue.d.ts @@ -7,6 +7,5 @@ declare namespace JQueryTissue { interface JQuery { linkCard: (options?: JQueryTissue.LinkCardOptions) => this; - pageSelector: () => this; deleteCheckinModal: () => this; } diff --git a/resources/assets/js/app.ts b/resources/assets/js/app.ts index 1196678..6975556 100644 --- a/resources/assets/js/app.ts +++ b/resources/assets/js/app.ts @@ -1,5 +1,6 @@ import * as Cookies from 'js-cookie'; import { fetchPostJson, fetchDeleteJson, ResponseError } from './fetch'; +import { pageSelector } from './tissue'; require('./bootstrap'); @@ -20,7 +21,7 @@ $(() => { } $('[data-toggle="tooltip"]').tooltip(); $('.alert').alert(); - $('.tis-page-selector').pageSelector(); + document.querySelectorAll('.tis-page-selector').forEach(pageSelector); $('.link-card').linkCard(); const $deleteCheckinModal = $('#deleteCheckinModal').deleteCheckinModal(); diff --git a/resources/assets/js/tissue.ts b/resources/assets/js/tissue.ts index e059c75..6e12259 100644 --- a/resources/assets/js/tissue.ts +++ b/resources/assets/js/tissue.ts @@ -1,5 +1,12 @@ import { fetchGet } from './fetch'; +export function pageSelector(el: Element) { + if (!(el instanceof HTMLSelectElement)) return; + el.addEventListener('change', function () { + location.href = this.options[this.selectedIndex].dataset.href as string; + }); +} + (function ($) { $.fn.linkCard = function (options) { const settings = $.extend( @@ -52,12 +59,6 @@ import { fetchGet } from './fetch'; }); }; - $.fn.pageSelector = function () { - return this.on('change', function () { - location.href = $(this).find(':selected').data('href'); - }); - }; - $.fn.deleteCheckinModal = function () { return this.each(function () { $(this) From 8a0a29feefc6114008a3b951215d720210746054 Mon Sep 17 00:00:00 2001 From: shibafu Date: Fri, 7 Aug 2020 00:25:43 +0900 Subject: [PATCH 2/4] =?UTF-8?q?linkCard=E3=82=92Vanilla=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- resources/assets/js/@types/jquery-tissue.d.ts | 6 -- resources/assets/js/app.ts | 4 +- resources/assets/js/tissue.ts | 98 +++++++++---------- 3 files changed, 49 insertions(+), 59 deletions(-) diff --git a/resources/assets/js/@types/jquery-tissue.d.ts b/resources/assets/js/@types/jquery-tissue.d.ts index 5d49f3c..0494a7b 100644 --- a/resources/assets/js/@types/jquery-tissue.d.ts +++ b/resources/assets/js/@types/jquery-tissue.d.ts @@ -1,11 +1,5 @@ // tissue.ts で定義されているjQuery Pluginの型定義 -declare namespace JQueryTissue { - interface LinkCardOptions { - endpoint: string; - } -} interface JQuery { - linkCard: (options?: JQueryTissue.LinkCardOptions) => this; deleteCheckinModal: () => this; } diff --git a/resources/assets/js/app.ts b/resources/assets/js/app.ts index 6975556..fda7cbf 100644 --- a/resources/assets/js/app.ts +++ b/resources/assets/js/app.ts @@ -1,6 +1,6 @@ import * as Cookies from 'js-cookie'; import { fetchPostJson, fetchDeleteJson, ResponseError } from './fetch'; -import { pageSelector } from './tissue'; +import { linkCard, pageSelector } from './tissue'; require('./bootstrap'); @@ -23,7 +23,7 @@ $(() => { $('.alert').alert(); document.querySelectorAll('.tis-page-selector').forEach(pageSelector); - $('.link-card').linkCard(); + document.querySelectorAll('.link-card').forEach(linkCard); const $deleteCheckinModal = $('#deleteCheckinModal').deleteCheckinModal(); $(document).on('click', '[data-target="#deleteCheckinModal"]', function (event) { event.preventDefault(); diff --git a/resources/assets/js/tissue.ts b/resources/assets/js/tissue.ts index 6e12259..0e0b945 100644 --- a/resources/assets/js/tissue.ts +++ b/resources/assets/js/tissue.ts @@ -1,5 +1,52 @@ import { fetchGet } from './fetch'; +function suicide(e: T) { + return function (): never { + throw e; + }; +} + +export function linkCard(el: Element) { + const url = el.querySelector('a')?.href; + if (!url) { + return; + } + + fetchGet('/api/checkin/card', { url }) + .then((response) => response.json()) + .then((data) => { + const die = suicide('Element not found!'); + const metaColumn = el.querySelector('.col-12:last-of-type') || die(); + const imageColumn = el.querySelector('.col-12:first-of-type') || die(); + const title = el.querySelector('.card-title') || die(); + const desc = el.querySelector('.card-text') || die(); + const image = imageColumn.querySelector('img') || die(); + + if (data.title === '') { + title.style.display = 'none'; + } else { + title.textContent = data.title; + } + + if (data.description === '') { + desc.style.display = 'none'; + } else { + desc.textContent = data.description; + } + + if (data.image === '') { + imageColumn.style.display = 'none'; + metaColumn.classList.remove('col-md-6'); + } else { + image.src = data.image; + } + + if (data.title !== '' || data.description !== '' || data.image !== '') { + el.classList.remove('d-none'); + } + }); +} + export function pageSelector(el: Element) { if (!(el instanceof HTMLSelectElement)) return; el.addEventListener('change', function () { @@ -8,57 +55,6 @@ export function pageSelector(el: Element) { } (function ($) { - $.fn.linkCard = function (options) { - const settings = $.extend( - { - endpoint: '/api/checkin/card', - }, - options - ); - - return this.each(function () { - const $this = $(this); - - const url = $this.find('a').attr('href'); - if (!url) { - return; - } - - fetchGet(settings.endpoint, { url }) - .then((response) => response.json()) - .then((data) => { - const $metaColumn = $this.find('.col-12:last-of-type'); - const $imageColumn = $this.find('.col-12:first-of-type'); - const $title = $this.find('.card-title'); - const $desc = $this.find('.card-text'); - const $image = $imageColumn.find('img'); - - if (data.title === '') { - $title.hide(); - } else { - $title.text(data.title); - } - - if (data.description === '') { - $desc.hide(); - } else { - $desc.text(data.description); - } - - if (data.image === '') { - $imageColumn.hide(); - $metaColumn.removeClass('col-md-6'); - } else { - $image.attr('src', data.image); - } - - if (data.title !== '' || data.description !== '' || data.image !== '') { - $this.removeClass('d-none'); - } - }); - }); - }; - $.fn.deleteCheckinModal = function () { return this.each(function () { $(this) From 23189b76e40158f18371be30f071e8922a8015e4 Mon Sep 17 00:00:00 2001 From: shibafu Date: Fri, 7 Aug 2020 00:53:36 +0900 Subject: [PATCH 3/4] =?UTF-8?q?deleteCheckinModal=E3=82=92Vanilla=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- resources/assets/js/@types/jquery-tissue.d.ts | 5 -- resources/assets/js/app.ts | 16 +++--- resources/assets/js/bootstrap.ts | 3 -- resources/assets/js/tissue.ts | 53 ++++++++++--------- 4 files changed, 37 insertions(+), 40 deletions(-) delete mode 100644 resources/assets/js/@types/jquery-tissue.d.ts diff --git a/resources/assets/js/@types/jquery-tissue.d.ts b/resources/assets/js/@types/jquery-tissue.d.ts deleted file mode 100644 index 0494a7b..0000000 --- a/resources/assets/js/@types/jquery-tissue.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -// tissue.ts で定義されているjQuery Pluginの型定義 - -interface JQuery { - deleteCheckinModal: () => this; -} diff --git a/resources/assets/js/app.ts b/resources/assets/js/app.ts index fda7cbf..10fdc70 100644 --- a/resources/assets/js/app.ts +++ b/resources/assets/js/app.ts @@ -1,6 +1,6 @@ import * as Cookies from 'js-cookie'; import { fetchPostJson, fetchDeleteJson, ResponseError } from './fetch'; -import { linkCard, pageSelector } from './tissue'; +import { linkCard, pageSelector, deleteCheckinModal } from './tissue'; require('./bootstrap'); @@ -24,11 +24,15 @@ $(() => { document.querySelectorAll('.tis-page-selector').forEach(pageSelector); document.querySelectorAll('.link-card').forEach(linkCard); - const $deleteCheckinModal = $('#deleteCheckinModal').deleteCheckinModal(); - $(document).on('click', '[data-target="#deleteCheckinModal"]', function (event) { - event.preventDefault(); - $deleteCheckinModal.modal('show', this); - }); + + 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'); diff --git a/resources/assets/js/bootstrap.ts b/resources/assets/js/bootstrap.ts index fbfc914..02b71c6 100644 --- a/resources/assets/js/bootstrap.ts +++ b/resources/assets/js/bootstrap.ts @@ -1,5 +1,2 @@ -// jQuery -import './tissue'; - // Bootstrap import 'bootstrap'; diff --git a/resources/assets/js/tissue.ts b/resources/assets/js/tissue.ts index 0e0b945..ae2ddcb 100644 --- a/resources/assets/js/tissue.ts +++ b/resources/assets/js/tissue.ts @@ -1,6 +1,6 @@ import { fetchGet } from './fetch'; -function suicide(e: T) { +export function suicide(e: T) { return function (): never { throw e; }; @@ -45,33 +45,34 @@ export function linkCard(el: Element) { el.classList.remove('d-none'); } }); + + return el; } export function pageSelector(el: Element) { - if (!(el instanceof HTMLSelectElement)) return; - el.addEventListener('change', function () { - location.href = this.options[this.selectedIndex].dataset.href as string; - }); + if (el instanceof HTMLSelectElement) { + el.addEventListener('change', function () { + location.href = this.options[this.selectedIndex].dataset.href as string; + }); + } + return el; } -(function ($) { - $.fn.deleteCheckinModal = function () { - return this.each(function () { - $(this) - .on('show.bs.modal', function (event) { - // 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(); - }); - }); - }; -})(jQuery); +export function deleteCheckinModal(el: Element) { + return $(el) + .on('show.bs.modal', function (event) { + // 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(); + }) + .end(); +} From 723587b0acc49c4638df4a049903f789de205805 Mon Sep 17 00:00:00 2001 From: shibafu Date: Fri, 7 Aug 2020 09:50:01 +0900 Subject: [PATCH 4/4] =?UTF-8?q?deleteCheckinModal=E3=81=AE=E4=B8=AD?= =?UTF-8?q?=E8=BA=AB=E3=81=A7=E3=81=AA=E3=82=8B=E3=81=B9=E3=81=8FjQuery?= =?UTF-8?q?=E3=82=92=E4=BD=BF=E3=82=8F=E3=81=AA=E3=81=84=E3=82=88=E3=81=86?= =?UTF-8?q?=E3=81=AB=E3=81=97=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- resources/assets/js/tissue.ts | 31 +++++++++------------- resources/views/ejaculation/show.blade.php | 12 ++++----- resources/views/user/profile.blade.php | 12 ++++----- 3 files changed, 25 insertions(+), 30 deletions(-) diff --git a/resources/assets/js/tissue.ts b/resources/assets/js/tissue.ts index ae2ddcb..804ef4d 100644 --- a/resources/assets/js/tissue.ts +++ b/resources/assets/js/tissue.ts @@ -6,6 +6,8 @@ export function suicide(e: T) { }; } +const die = suicide('Element not found!'); + export function linkCard(el: Element) { const url = el.querySelector('a')?.href; if (!url) { @@ -15,7 +17,6 @@ export function linkCard(el: Element) { fetchGet('/api/checkin/card', { url }) .then((response) => response.json()) .then((data) => { - const die = suicide('Element not found!'); const metaColumn = el.querySelector('.col-12:last-of-type') || die(); const imageColumn = el.querySelector('.col-12:first-of-type') || die(); const title = el.querySelector('.card-title') || die(); @@ -58,21 +59,15 @@ export function pageSelector(el: Element) { return el; } -export function deleteCheckinModal(el: Element) { - return $(el) - .on('show.bs.modal', function (event) { - // 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(); - }) - .end(); +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) { + const target = event.relatedTarget || die(); + const dateLabel = this.querySelector('.modal-body .date-label') || die(); + dateLabel.textContent = target.dataset.date || null; + id = target.dataset.id; + }); } diff --git a/resources/views/ejaculation/show.blade.php b/resources/views/ejaculation/show.blade.php index 5dea347..4f9db40 100644 --- a/resources/views/ejaculation/show.blade.php +++ b/resources/views/ejaculation/show.blade.php @@ -97,13 +97,13 @@ 削除確認 @endslot のチェックインを削除してもよろしいですか？ -
- {{ csrf_field() }} - {{ method_field('DELETE') }} -
@slot('footer') - - +
+ {{ csrf_field() }} + {{ method_field('DELETE') }} + + +
@endslot @endcomponent @endsection diff --git a/resources/views/user/profile.blade.php b/resources/views/user/profile.blade.php index d850e6a..d7c39d7 100644 --- a/resources/views/user/profile.blade.php +++ b/resources/views/user/profile.blade.php @@ -117,13 +117,13 @@ 削除確認 @endslot のチェックインを削除してもよろしいですか？ -
- {{ csrf_field() }} - {{ method_field('DELETE') }} -
@slot('footer') - - +
+ {{ csrf_field() }} + {{ method_field('DELETE') }} + + +
@endslot @endcomponent @endsection