pepepper
/
tissue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

deleteCheckinModalをVanilla化

This commit is contained in:
shibafu 2020-08-07 00:53:36 +09:00
parent 8a0a29feef
commit 23189b76e4
4 changed files with 37 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
resources/assets/js/@types/jquery-tissue.d.ts vendored
View File

@ -1,5 +0,0 @@
// tissue.ts で定義されているjQuery Pluginの型定義
interface JQuery<TElement = HTMLElement> {
deleteCheckinModal: () => this;
}

16
resources/assets/js/app.ts
View File

@ -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');

3
resources/assets/js/bootstrap.ts
View File

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

53
resources/assets/js/tissue.ts
View File

@ -1,6 +1,6 @@
import { fetchGet } from './fetch';
function suicide<T>(e: T) {
export function suicide<T>(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();
}