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

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

Browse Source 
Replace jquery tissue plugin
This commit is contained in:
shibafu
2020-08-08 16:41:48 +09:00
committed by GitHub
parent 65077571e7 723587b0ac
commit e6950a5dfb
6 changed files with 85 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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;
}

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

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

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

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

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

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

12
resources/views/ejaculation/show.blade.php
View File

@@ -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

12
resources/views/user/profile.blade.php
View File

@@ -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