Merge pull request #460 from shikorism/replace-jquery-tissue-plugin
Replace jquery tissue plugin
This commit is contained in:
shibafu
GitHub
commit
e6950a5dfb
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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();
|
||||
const $deleteCheckinModal = $('#deleteCheckinModal').deleteCheckinModal();
|
||||
$(document).on('click', '[data-target="#deleteCheckinModal"]', function (event) {
|
||||
event.preventDefault();
|
||||
$deleteCheckinModal.modal('show', this);
|
||||
});
|
||||
document.querySelectorAll('.link-card').forEach(linkCard);
|
||||
|
||||
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');
|
||||
|
|
|
|||
|
|
@ -1,5 +1,2 @@
|
|||
// jQuery
|
||||
import './tissue';
|
||||
|
||||
// Bootstrap
|
||||
import 'bootstrap';
|
||||
|
|
|
|||
|
|
@ -1,80 +1,73 @@
|
|||
import { fetchGet } from './fetch';
|
||||
|
||||
(function ($) {
|
||||
$.fn.linkCard = function (options) {
|
||||
const settings = $.extend(
|
||||
{
|
||||
endpoint: '/api/checkin/card',
|
||||
},
|
||||
options
|
||||
);
|
||||
export function suicide<T>(e: T) {
|
||||
return function (): never {
|
||||
throw e;
|
||||
};
|
||||
}
|
||||
|
||||
return this.each(function () {
|
||||
const $this = $(this);
|
||||
const die = suicide('Element not found!');
|
||||
|
||||
const url = $this.find('a').attr('href');
|
||||
if (!url) {
|
||||
return;
|
||||
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 metaColumn = el.querySelector('.col-12:last-of-type') || die();
|
||||
const imageColumn = el.querySelector<HTMLElement>('.col-12:first-of-type') || die();
|
||||
const title = el.querySelector<HTMLElement>('.card-title') || die();
|
||||
const desc = el.querySelector<HTMLElement>('.card-text') || die();
|
||||
const image = imageColumn.querySelector('img') || die();
|
||||
|
||||
if (data.title === '') {
|
||||
title.style.display = 'none';
|
||||
} else {
|
||||
title.textContent = data.title;
|
||||
}
|
||||
|
||||
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.description === '') {
|
||||
desc.style.display = 'none';
|
||||
} else {
|
||||
desc.textContent = data.description;
|
||||
}
|
||||
|
||||
if (data.title === '') {
|
||||
$title.hide();
|
||||
} else {
|
||||
$title.text(data.title);
|
||||
}
|
||||
if (data.image === '') {
|
||||
imageColumn.style.display = 'none';
|
||||
metaColumn.classList.remove('col-md-6');
|
||||
} else {
|
||||
image.src = data.image;
|
||||
}
|
||||
|
||||
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');
|
||||
}
|
||||
});
|
||||
if (data.title !== '' || data.description !== '' || data.image !== '') {
|
||||
el.classList.remove('d-none');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
$.fn.pageSelector = function () {
|
||||
return this.on('change', function () {
|
||||
location.href = $(this).find(':selected').data('href');
|
||||
});
|
||||
};
|
||||
return el;
|
||||
}
|
||||
|
||||
$.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();
|
||||
});
|
||||
export function pageSelector(el: Element) {
|
||||
if (el instanceof HTMLSelectElement) {
|
||||
el.addEventListener('change', function () {
|
||||
location.href = this.options[this.selectedIndex].dataset.href as string;
|
||||
});
|
||||
};
|
||||
})(jQuery);
|
||||
}
|
||||
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) {
|
||||
const target = event.relatedTarget || die();
|
||||
const dateLabel = this.querySelector('.modal-body .date-label') || die();
|
||||
dateLabel.textContent = target.dataset.date || null;
|
||||
id = target.dataset.id;
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -97,13 +97,13 @@
|
|||
削除確認
|
||||
@endslot
|
||||
<span class="date-label"></span> のチェックインを削除してもよろしいですか？
|
||||
<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>
|
||||
<form action="{{ route('checkin.destroy', ['id' => '@']) }}" method="post">
|
||||
{{ csrf_field() }}
|
||||
{{ method_field('DELETE') }}
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">キャンセル</button>
|
||||
<button type="submit" class="btn btn-danger">削除</button>
|
||||
</form>
|
||||
@endslot
|
||||
@endcomponent
|
||||
@endsection
|
||||
|
|
|
|||
|
|
@ -117,13 +117,13 @@
|
|||
削除確認
|
||||
@endslot
|
||||
<span class="date-label"></span> のチェックインを削除してもよろしいですか？
|
||||
<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>
|
||||
<form action="{{ route('checkin.destroy', ['id' => '@']) }}" method="post">
|
||||
{{ csrf_field() }}
|
||||
{{ method_field('DELETE') }}
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">キャンセル</button>
|
||||
<button type="submit" class="btn btn-danger">削除</button>
|
||||
</form>
|
||||
@endslot
|
||||
@endcomponent
|
||||
@endsection
|
||||
|
|
|
|||
Loading…
Reference in New Issue