wip

resources/assets/js/checkin.tsx

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

resources/assets/js/components/MetadataPreview2.tsx

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

resources/assets/sass/components/_metadata-preview.scss

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

resources/views/ejaculation/checkin.blade.php

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

webpack.mix.js

@@ -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'],