@waline/client 2.4.2 → 2.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.4.2",
+  "version": "2.5.0",
   "description": "client for waline comment system",
   "keywords": [
     "valine",
@@ -56,6 +56,15 @@
     "dist",
     "src"
   ],
+  "scripts": {
+    "build": "pnpm rollup && pnpm style",
+    "clean": "rimraf ./dist",
+    "dev": "vite -c config/vite.config.js",
+    "lint": "eslint --ext .ts,.vue .",
+    "prepublish": "pnpm clean && pnpm build",
+    "rollup": "rollup -c ./config/rollup.config.js",
+    "style": "sass ./src/styles/index.scss ./dist/waline.css --style=compressed"
+  },
   "browserslist": {
     "production": [
       ">0.5%",
@@ -85,27 +94,19 @@
     "@rollup/plugin-replace": "^4.0.0",
     "@types/autosize": "^4.0.1",
     "@types/marked": "^4.0.3",
-    "@types/node": "^17.0.31",
-    "@vitejs/plugin-vue": "^2.3.2",
+    "@types/node": "^17.0.33",
+    "@vitejs/plugin-vue": "^2.3.3",
     "@vue/compiler-sfc": "^3.2.33",
+    "@yeger/vue-masonry-wall": "^3.0.31",
     "rimraf": "^3.0.2",
-    "rollup": "^2.72.1",
+    "rollup": "^2.73.0",
     "rollup-plugin-dts": "^4.2.1",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-ts": "^2.0.7",
     "typescript": "^4.6.4",
-    "vite": "^2.9.8"
+    "vite": "^2.9.9"
   },
   "engines": {
     "node": ">=14"
-  },
-  "scripts": {
-    "build": "pnpm rollup && pnpm style",
-    "clean": "rimraf ./dist",
-    "dev": "vite -c config/vite.config.js",
-    "lint": "eslint --ext .ts,.vue .",
-    "prepublish": "pnpm clean && pnpm build",
-    "rollup": "rollup -c ./config/rollup.config.js",
-    "style": "sass ./src/styles/index.scss ./dist/waline.css --style=compressed"
   }
-}
+}

package/src/components/CommentBox.vue

@@ -88,6 +88,16 @@
             <EmojiIcon />
           </button>
 
+          <button
+            ref="gifButtonRef"
+            class="wl-action"
+            :class="{ actived: showGif }"
+            :title="locale.gif"
+            @click="showGif = !showGif"
+          >
+            <GifIcon />
+          </button>
+
           <input
             ref="imageUploadRef"
             class="upload"
@@ -152,6 +162,47 @@
           </button>
         </div>
 
+        <div
+          ref="gifPopupRef"
+          class="wl-gif-popup"
+          :class="{ display: showGif }"
+        >
+          <input
+            type="text"
+            :placeholder="locale.gifSearchPlaceholder"
+            ref="gifSearchInputRef"
+            @input="onGifSearch"
+          />
+
+          <masonry-wall
+            class="wl-gif-waterfall"
+            :items="gifData.list"
+            :ssr-columns="2"
+            :column-width="200"
+            :gap="6"
+            @scroll="onGifMasonryScroll"
+          >
+            <template #default="{ item }">
+              <img
+                @click="insert(`![](${item.media[0].tinygif.url})`)"
+                :src="item.media[0].tinygif.url"
+                :title="item.title"
+                loading="lazy"
+                :style="{
+                  width: '200px',
+                  height:
+                    (200 * item.media[0].tinygif.dims[1]) /
+                      item.media[0].tinygif.dims[0] +
+                    'px',
+                }"
+              />
+            </template>
+          </masonry-wall>
+
+          <div v-if="gifData.loading" class="wl-loading">
+            <LoadingIcon :size="30" />
+          </div>
+        </div>
         <div
           ref="emojiPopupRef"
           class="wl-emoji-popup"
@@ -228,6 +279,7 @@ import {
   MarkdownIcon,
   PreviewIcon,
   LoadingIcon,
+  GifIcon,
 } from './Icons';
 import { useEditor, useUserMeta, useUserInfo } from '../composables';
 import {
@@ -237,6 +289,9 @@ import {
   parseEmoji,
   postComment,
   getEmojis,
+  fetchGif,
+  FetchGifResponse,
+  throttle,
 } from '../utils';
 
 import type { ComputedRef, DeepReadonly } from 'vue';
@@ -253,6 +308,7 @@ export default defineComponent({
     MarkdownIcon,
     PreviewIcon,
     LoadingIcon,
+    GifIcon,
   },
 
   props: {
@@ -286,13 +342,22 @@ export default defineComponent({
     const imageUploadRef = ref<HTMLInputElement | null>(null);
     const emojiButtonRef = ref<HTMLDivElement | null>(null);
     const emojiPopupRef = ref<HTMLDivElement | null>(null);
+    const gifButtonRef = ref<HTMLDivElement | null>(null);
+    const gifPopupRef = ref<HTMLDivElement | null>(null);
+    const gifSearchInputRef = ref<HTMLInputElement | null>(null);
 
     const emoji = ref<DeepReadonly<WalineEmojiConfig>>({ tabs: [], map: {} });
     const emojiTabIndex = ref(0);
     const showEmoji = ref(false);
+    const showGif = ref(false);
     const showPreview = ref(false);
     const previewText = ref('');
     const wordNumber = ref(0);
+    const gifData = ref<{
+      cursor: string;
+      loading: boolean;
+      list: FetchGifResponse['results'];
+    }>({ cursor: '', loading: true, list: [] });
 
     const wordLimit = ref(0);
     const isWordNumberLegal = ref(false);
@@ -548,6 +613,41 @@ export default defineComponent({
         !(emojiPopupRef.value as HTMLElement).contains(event.target as Node)
       )
         showEmoji.value = false;
+
+      if (
+        !(gifButtonRef.value as HTMLElement).contains(event.target as Node) &&
+        !(gifPopupRef.value as HTMLElement).contains(event.target as Node)
+      )
+        showGif.value = false;
+    };
+
+    const onGifSearch = throttle(async (event: Event) => {
+      gifData.value.cursor = '';
+      gifData.value.list = [];
+      onGifMasonryScroll(event);
+    });
+
+    const onGifMasonryScroll = async (event: Event): Promise<void> => {
+      const { scrollTop, clientHeight, scrollHeight } =
+        event.target as HTMLDivElement;
+      const percent = (clientHeight + scrollTop) / scrollHeight;
+      if (percent < 0.9 || gifData.value.loading) {
+        return;
+      }
+
+      gifData.value.loading = true;
+      const data = await fetchGif({
+        keyword: gifSearchInputRef.value?.value || '',
+        pos: gifData.value.cursor,
+      }).finally(() => {
+        gifData.value.loading = false;
+      });
+
+      gifData.value.cursor = data.next;
+      gifData.value.list = gifData.value.list.concat(data.results);
+      setTimeout(() => {
+        (event.target as HTMLDivElement).scrollTop = scrollTop;
+      }, 50);
     };
 
     // update wordNumber
@@ -575,6 +675,20 @@ export default defineComponent({
       { immediate: true }
     );
 
+    watch([showGif], async ([showGif]) => {
+      if (!showGif) {
+        return;
+      }
+
+      gifData.value.loading = true;
+      const data = await fetchGif({ keyword: '' }).finally(() => {
+        gifData.value.loading = false;
+      });
+
+      gifData.value.cursor = data.next;
+      gifData.value.list = gifData.value.list.concat(data.results);
+    });
+
     onMounted(() => {
       document.body.addEventListener('click', popupHandler);
 
@@ -632,6 +746,8 @@ export default defineComponent({
       onLogout,
       onProfile,
       submitComment,
+      onGifMasonryScroll,
+      onGifSearch,
 
       isLogin,
       userInfo,
@@ -651,6 +767,9 @@ export default defineComponent({
       emojiTabIndex,
       showEmoji,
 
+      // gif
+      showGif,
+
       // image
       canUploadImage,
 
@@ -663,7 +782,11 @@ export default defineComponent({
       editorRef,
       emojiButtonRef,
       emojiPopupRef,
+      gifButtonRef,
+      gifPopupRef,
       imageUploadRef,
+      gifSearchInputRef,
+      gifData,
     };
   },
 });

package/src/components/Icons.ts

@@ -148,3 +148,23 @@ export const LoadingIcon: FunctionalComponent<{ size: number }> = ({ size }) =>
       })
     )
   );
+
+export const GifIcon: FunctionalComponent = () =>
+  h(
+    'svg',
+    {
+      width: 24,
+      height: 24,
+      fill: 'currentcolor',
+      viewBox: '0 0 24 24',
+    },
+    [
+      h('path', {
+        style: 'transform: translateY(0.5px)',
+        d: 'M18.968 10.5H15.968V11.484H17.984V12.984H15.968V15H14.468V9H18.968V10.5V10.5ZM8.984 9C9.26533 9 9.49967 9.09367 9.687 9.281C9.87433 9.46833 9.968 9.70267 9.968 9.984V10.5H6.499V13.5H8.468V12H9.968V14.016C9.968 14.2973 9.87433 14.5317 9.687 14.719C9.49967 14.9063 9.26533 15 8.984 15H5.984C5.70267 15 5.46833 14.9063 5.281 14.719C5.09367 14.5317 5 14.2973 5 14.016V9.985C5 9.70367 5.09367 9.46933 5.281 9.282C5.46833 9.09467 5.70267 9.001 5.984 9.001H8.984V9ZM11.468 9H12.968V15H11.468V9V9Z',
+      }),
+      h('path', {
+        d: 'M18.5 3H5.75C3.6875 3 2 4.6875 2 6.75V18C2 20.0625 3.6875 21.75 5.75 21.75H18.5C20.5625 21.75 22.25 20.0625 22.25 18V6.75C22.25 4.6875 20.5625 3 18.5 3ZM20.75 18C20.75 19.2375 19.7375 20.25 18.5 20.25H5.75C4.5125 20.25 3.5 19.2375 3.5 18V6.75C3.5 5.5125 4.5125 4.5 5.75 4.5H18.5C19.7375 4.5 20.75 5.5125 20.75 6.75V18Z',
+      }),
+    ]
+  );

package/src/config/i18n/en.ts

@@ -39,4 +39,6 @@ export default generateLocale([
   'Wizards',
   'Elves',
   'Maiar',
+  'GIF',
+  'Search GIF',
 ]);

package/src/config/i18n/generate.ts

@@ -39,6 +39,8 @@ const localeKeys = [
   'level3',
   'level4',
   'level5',
+  'gif',
+  'gifSearchPlaceholder',
 ];
 
 export const generateLocale = (locale: string[]): WalineLocale =>

package/src/config/i18n/jp.ts

@@ -33,4 +33,12 @@ export default generateLocale([
   'ワード',
   'コメントは $0 から $1 ワードの間でなければなりません!\n 現在の単語番号: $2',
   '匿名',
+  'うえにん',
+  'なかにん',
+  'しもおし',
+  '特にしもおし',
+  'かげ',
+  'なぬし',
+  'GIF',
+  '探す GIF',
 ]);

package/src/config/i18n/pt-BR.ts

@@ -33,4 +33,12 @@ export default generateLocale([
   'Palavras',
   'Favor enviar comentário com $0 a $1 palavras!\n Número de palavras atuais: $2',
   'Anônimo',
+  'Dwarves',
+  'Hobbits',
+  'Ents',
+  'Wizards',
+  'Elves',
+  'Maiar',
+  'GIF',
+  'Pesquisar GIF',
 ]);

package/src/config/i18n/ru.ts

@@ -33,4 +33,12 @@ export default generateLocale([
   'Слова',
   'Пожалуйста, введите комментарии от $0 до $1 слов!\nНомер текущего слова: $2',
   'Анонимный',
+  'Dwarves',
+  'Hobbits',
+  'Ents',
+  'Wizards',
+  'Elves',
+  'Maiar',
+  'GIF',
+  'Поиск GIF',
 ]);

package/src/config/i18n/vi-VN.ts

@@ -33,4 +33,12 @@ export default generateLocale([
   'từ',
   'Please input comments between $0 and $1 words!\n Current word number: $2',
   'Vô danh',
+  'Dwarves',
+  'Hobbits',
+  'Ents',
+  'Wizards',
+  'Elves',
+  'Maiar',
+  'GIF',
+  'Tìm kiếm GIF',
 ]);

package/src/config/i18n/zh-CN.ts

@@ -39,4 +39,6 @@ export default generateLocale([
   '活跃',
   '话痨',
   '传说',
+  '表情包',
+  '搜索表情包',
 ]);

package/src/config/i18n/zh-TW.ts

@@ -39,4 +39,6 @@ export default generateLocale([
   '活躍',
   '話癆',
   '傳說',
+  '表情包',
+  '搜索表情包',
 ]);

package/src/init.ts

@@ -1,4 +1,5 @@
 import { createApp, h, reactive, watchEffect } from 'vue';
+import MasonryWall from '@yeger/vue-masonry-wall';
 
 import Waline from './components/Waline.vue';
 import { commentCount } from './comment';
@@ -80,8 +81,12 @@ export const init = ({
     ? createApp(() => h(Waline, { path: state.path, ...props }))
     : null;
 
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  if (app) app.mount(root!);
+  if (app) {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    app.use(MasonryWall);
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    app.mount(root!);
+  }
 
   updateCommentCount();
   updatePageviewCount();

package/src/styles/card.scss

@@ -137,6 +137,7 @@
   .wl-reply {
     display: inline-flex;
     align-items: center;
+
     padding: 4px;
     border: none;
 

package/src/styles/gif.scss

@@ -0,0 +1,151 @@
+@mixin gif() {
+  .wl-gif-popup {
+    position: absolute;
+    top: 100%;
+    left: 1.25em;
+    z-index: 10;
+
+    width: 436px;
+    padding: 12px 12px 4px;
+    border: var(--waline-border);
+    border-radius: 6px;
+
+    background: var(--waline-bgcolor);
+    box-shadow: var(--waline-box-shadow);
+
+    opacity: 0;
+    visibility: hidden;
+
+    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
+    transform: scale(0.9, 0.9);
+    transform-origin: 0 0;
+
+    &.display {
+      opacity: 1;
+      visibility: visible;
+      transform: none;
+    }
+
+    input {
+      box-sizing: border-box;
+
+      width: 100%;
+      margin-bottom: 10px;
+      padding: 3px 5px;
+      border: var(--waline-border);
+    }
+
+    img {
+      display: block;
+
+      box-sizing: border-box;
+
+      width: 100%;
+      border-width: 2px;
+      border-style: solid;
+      border-color: #fff;
+
+      cursor: pointer;
+
+      &:hover {
+        border-color: var(--waline-theme-color);
+        border-radius: 2px;
+      }
+    }
+
+    .wl-gif-waterfall {
+      overflow-y: auto;
+      max-height: 800px;
+    }
+
+    button {
+      display: inline-block;
+      vertical-align: middle;
+
+      width: 2em;
+      margin: 0.125em;
+      padding: 0;
+      border-width: 0;
+
+      background: transparent;
+
+      font-size: inherit;
+      line-height: 2;
+      text-align: center;
+
+      cursor: pointer;
+
+      &:hover {
+        background: var(--waline-bgcolor-hover);
+      }
+    }
+
+    .wl-gif {
+      display: inline-block;
+      vertical-align: middle;
+      max-width: 1.5em;
+      max-height: 1.5em;
+    }
+
+    .wl-tab-wrapper {
+      overflow-y: auto;
+      max-height: 145px;
+      padding: 0.5em;
+
+      &::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+      }
+
+      &::-webkit-scrollbar-track-piece:vertical {
+        -webkit-border-radius: 6px;
+        border-radius: 6px;
+        background: rgb(0 0 0 / 10%);
+      }
+
+      &::-webkit-scrollbar-thumb:vertical {
+        width: 6px;
+        -webkit-border-radius: 6px;
+        border-radius: 6px;
+        background: var(--waline-theme-color);
+      }
+    }
+
+    .wl-tabs {
+      position: relative;
+      height: 2em;
+      padding: 0 6px 1px;
+
+      &::before {
+        content: ' ';
+
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 0;
+        z-index: 2;
+
+        height: 1px;
+
+        background: var(--waline-border-color);
+      }
+    }
+
+    .wl-tab {
+      position: relative;
+      margin: 0;
+      padding: 0 0.5em;
+
+      &.active {
+        z-index: 3;
+
+        border: 1px solid var(--waline-border-color);
+        border-top-width: 0;
+        border-bottom-right-radius: 6px;
+        border-bottom-left-radius: 6px;
+
+        background: var(--waline-bgcolor);
+      }
+    }
+  }
+}

package/src/styles/panel.scss

@@ -1,4 +1,5 @@
 @use 'emoji';
+@use 'gif';
 
 .wl-comment {
   position: relative;
@@ -288,3 +289,4 @@
 }
 
 @include emoji.emoji;
+@include gif.gif;

package/src/typings/locale.ts

@@ -36,4 +36,6 @@ export interface WalineLocale extends WalineDateLocale, WalineLevelLocale {
   word: string;
   wordHint: string;
   anonymous: string;
+  gif: string;
+  gifSearchPlaceholder: string;
 }

package/src/utils/fetchGif.ts

@@ -0,0 +1,62 @@
+export type GifFormat =
+  | 'gif'
+  | 'mediumgif'
+  | 'tinygif'
+  | 'nanogif'
+  | 'mp4'
+  | 'loopedmp4'
+  | 'tinymp4'
+  | 'nanomp4'
+  | 'webm'
+  | 'tinywebm'
+  | 'nanowebm';
+export interface MediaObject {
+  preview: string;
+  url: string;
+  dims: number[];
+  size: number;
+}
+
+export interface FetchGifRequest {
+  key?: string;
+  keyword: string;
+  pos?: string;
+  limit?: number;
+}
+
+export interface GifObject {
+  created: number;
+  hasaudio: boolean;
+  id: string;
+  media: Record<GifFormat, MediaObject>[];
+  tags: string[];
+  title: string;
+  itemurl: string;
+  hascaption: boolean;
+  url: string;
+}
+
+export interface FetchGifResponse {
+  next: string;
+  results: GifObject[];
+}
+
+export const fetchGif = ({
+  key,
+  keyword,
+  pos,
+  limit,
+}: FetchGifRequest): Promise<FetchGifResponse> => {
+  const baseUrl = `https://g.tenor.com/v1/search`;
+  const query = new URLSearchParams('media_filter=minimal');
+  query.set('key', key || 'PAY5JLFIH6V6');
+  query.set('limit', (limit || 20).toString());
+  query.set('pos', pos || '');
+  query.set('q', keyword);
+
+  return fetch(`${baseUrl}?${query.toString()}`, {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  }).then((resp) => resp.json() as Promise<FetchGifResponse>);
+};

package/src/utils/index.ts

@@ -10,3 +10,5 @@ export * from './markdown';
 export * from './path';
 export * from './query';
 export * from './wordCount';
+export * from './fetchGif';
+export * from './throttle';

package/src/utils/throttle.ts

@@ -0,0 +1,16 @@
+export function throttle(
+  func: (...args: any[]) => void,
+  timeout = 300
+): (...args: []) => void {
+  let timer: number | null;
+  return (...args: []): void => {
+    if (timer) {
+      clearTimeout(timer);
+    }
+
+    timer = window.setTimeout(() => {
+      func(...args);
+      timer = null;
+    }, timeout);
+  };
+}