wip
This commit is contained in:
shibafu
parent
969ddb94a9
commit
064cfff211
|
|
@ -15,6 +15,17 @@ export enum MetadataLoadState {
|
|||
Failed,
|
||||
}
|
||||
|
||||
export type Metadata = {
|
||||
url: string;
|
||||
title: string;
|
||||
description: string;
|
||||
image: string;
|
||||
expires_at: string | null;
|
||||
tags: {
|
||||
name: string;
|
||||
}[];
|
||||
};
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
|
|
@ -71,6 +82,6 @@ new Vue({
|
|||
});
|
||||
|
||||
ReactDOM.render(
|
||||
React.createElement(TagInput2, { id: 'tagInput2', name: 'tags2', value: '', isInvalid: false }),
|
||||
<TagInput2 id={'tagInput2'} name={'tags2'} value={''} isInvalid={false} />,
|
||||
document.querySelector('#tagInput2')
|
||||
);
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
import * as React from 'react';
|
||||
import { Metadata, MetadataLoadState } from '../checkin';
|
||||
import * as classNames from 'classnames';
|
||||
|
||||
type Suggestion = {
|
||||
name: string;
|
||||
used: boolean;
|
||||
};
|
||||
|
||||
type MetadataPreviewProps = {
|
||||
state: MetadataLoadState;
|
||||
metadata: Metadata | null;
|
||||
tags: string[];
|
||||
handleAddTag: (tag: string) => void;
|
||||
};
|
||||
|
||||
const MetadataLoading = () => (
|
||||
<div className="row no-gutters">
|
||||
<div className="col-12">
|
||||
<div className="card-body">
|
||||
<h6 className="card-title text-center font-weight-bold text-info">
|
||||
<span className="oi oi-loop-circular" /> オカズの情報を読み込んでいます…
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const MetadataLoadFailed = () => (
|
||||
<div className="row no-gutters">
|
||||
<div className="col-12">
|
||||
<div className="card-body">
|
||||
<h6 className="card-title text-center font-weight-bold text-danger">
|
||||
<span className="oi oi-circle-x" /> オカズの情報を読み込めませんでした
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const MetadataPreview: React.FC<MetadataPreviewProps> = ({ state, metadata, tags, handleAddTag }) => {
|
||||
if (state === MetadataLoadState.Inactive) {
|
||||
return null;
|
||||
}
|
||||
const hasImage = metadata !== null && metadata.image !== '';
|
||||
const descClasses = classNames({
|
||||
'col-8': hasImage,
|
||||
'col-12': !hasImage,
|
||||
});
|
||||
const tagClasses = (s: Suggestion) =>
|
||||
classNames({
|
||||
'list-inline-item': true,
|
||||
badge: true,
|
||||
'badge-primary': !s.used,
|
||||
'badge-secondary': s.used,
|
||||
'metadata-tag-item': true,
|
||||
});
|
||||
const suggestions =
|
||||
metadata?.tags.map((t) => ({
|
||||
name: t.name,
|
||||
used: tags.indexOf(t.name) !== -1,
|
||||
})) ?? [];
|
||||
|
||||
return (
|
||||
<div className="form-row">
|
||||
<div className="form-group col-sm-12">
|
||||
<div className="card tis-metadata-preview-link-card mb-2 px-0">
|
||||
{state === MetadataLoadState.Loading ? (
|
||||
<MetadataLoading />
|
||||
) : state === MetadataLoadState.Success ? (
|
||||
<div className="row no-gutters">
|
||||
<div v-if="hasImage" className="col-4 justify-content-center align-items-center">
|
||||
<img src={metadata?.image} alt="Thumbnail" className="w-100 bg-secondary" />
|
||||
</div>
|
||||
<div className={descClasses}>
|
||||
<div className="card-body">
|
||||
<h6 className="card-title font-weight-bold">{metadata?.title}</h6>
|
||||
{suggestions.length > 0 && (
|
||||
<>
|
||||
<p className="card-text mb-2">
|
||||
タグ候補
|
||||
<br />
|
||||
<span className="text-secondary">
|
||||
(クリックするとタグ入力欄にコピーできます)
|
||||
</span>
|
||||
</p>
|
||||
<ul className="list-inline d-inline">
|
||||
{suggestions.map((tag) => (
|
||||
<li
|
||||
key={tag.name}
|
||||
className={tagClasses(tag)}
|
||||
onClick={() => handleAddTag(tag.name)}
|
||||
>
|
||||
<span className="oi oi-tag" /> {tag.name}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<MetadataLoadFailed />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
.tis-metadata-preview {
|
||||
&-link-card {
|
||||
$height: 150px;
|
||||
overflow: hidden;
|
||||
font-size: small;
|
||||
|
||||
.row > div:first-child {
|
||||
display: flex;
|
||||
|
||||
&:not([display='none']) {
|
||||
min-height: $height;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-text {
|
||||
white-space: pre-line;
|
||||
}
|
||||
}
|
||||
|
||||
&-tag-item {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -65,6 +65,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<metadata-preview :metadata="metadata" :state="metadataLoadState"></metadata-preview>
|
||||
<div id="metadataPreview2"></div>
|
||||
<div class="form-row">
|
||||
<div class="form-group col-sm-12">
|
||||
<label for="note"><span class="oi oi-comment-square"></span> ノート</label>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ mix.ts('resources/assets/js/app.ts', 'public/js')
|
|||
.ts('resources/assets/js/setting/privacy.ts', 'public/js/setting')
|
||||
.ts('resources/assets/js/setting/import.ts', 'public/js/setting')
|
||||
.ts('resources/assets/js/setting/deactivate.ts', 'public/js/setting')
|
||||
.ts('resources/assets/js/checkin.ts', 'public/js')
|
||||
.ts('resources/assets/js/checkin.tsx', 'public/js')
|
||||
.sass('resources/assets/sass/app.scss', 'public/css')
|
||||
.autoload({
|
||||
jquery: ['$', 'jQuery', 'window.jQuery'],
|
||||
|
|
|
|||
Loading…
Reference in New Issue