@waline/client 2.4.1 → 2.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.4.1",
+  "version": "2.5.1",
   "description": "client for waline comment system",
   "keywords": [
     "valine",
@@ -71,31 +71,30 @@
     ]
   },
   "dependencies": {
-    "@vueuse/core": "^8.4.2",
+    "@vueuse/core": "^8.5.0",
     "autosize": "^5.0.1",
-    "marked": "^4.0.15",
-    "vue": "^3.2.33"
+    "marked": "^4.0.16",
+    "vue": "^3.2.35"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.10",
-    "@babel/preset-env": "^7.17.10",
+    "@babel/core": "^7.18.0",
+    "@babel/preset-env": "^7.18.0",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@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",
-    "@vue/compiler-sfc": "^3.2.33",
+    "@types/node": "^17.0.35",
+    "@vitejs/plugin-vue": "^2.3.3",
+    "@vue/compiler-sfc": "^3.2.35",
     "rimraf": "^3.0.2",
-    "rollup": "^2.72.1",
+    "rollup": "^2.74.1",
     "rollup-plugin-dts": "^4.2.1",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-ts": "^2.0.7",
-    "rollup-plugin-vue": "^6.0.0",
     "typescript": "^4.6.4",
-    "vite": "^2.9.8"
+    "vite": "^2.9.9"
   },
   "engines": {
     "node": ">=14"

package/src/components/CommentBox.vue

@@ -35,7 +35,7 @@
           <input
             :ref="
               (element) => {
-                if (element) inputRefs[kind] = element;
+                if (element) inputRefs[kind] = element as HTMLInputElement;
               }
             "
             :id="`wl-${kind}`"
@@ -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,31 @@
           </button>
         </div>
 
+        <div
+          ref="gifPopupRef"
+          class="wl-gif-popup"
+          :class="{ display: showGif }"
+        >
+          <input
+            type="text"
+            :placeholder="locale.gifSearchPlaceholder"
+            ref="gifSearchInputRef"
+            @input="onGifSearch"
+          />
+
+          <ImageWall
+            :items="gifData.list"
+            :column-width="200"
+            :gap="6"
+            @insert="insert($event)"
+            @scroll="onImageWallScroll"
+          >
+          </ImageWall>
+
+          <div v-if="gifData.loading" class="wl-loading">
+            <LoadingIcon :size="30" />
+          </div>
+        </div>
         <div
           ref="emojiPopupRef"
           class="wl-emoji-popup"
@@ -221,6 +256,7 @@ import {
   watch,
 } from 'vue';
 
+import ImageWall from './ImageWall.vue';
 import {
   CloseIcon,
   EmojiIcon,
@@ -228,20 +264,27 @@ import {
   MarkdownIcon,
   PreviewIcon,
   LoadingIcon,
+  GifIcon,
 } from './Icons';
 import { useEditor, useUserMeta, useUserInfo } from '../composables';
 import {
+  fetchGif,
+  getEmojis,
   getImagefromDataTransfer,
-  parseMarkdown,
   getWordNumber,
   parseEmoji,
+  parseMarkdown,
   postComment,
-  getEmojis,
+  throttle,
 } from '../utils';
 
 import type { ComputedRef, DeepReadonly } from 'vue';
 import type { WalineCommentData, WalineImageUploader } from '../typings';
-import type { WalineConfig, WalineEmojiConfig } from '../utils';
+import type {
+  FetchGifResponse,
+  WalineConfig,
+  WalineEmojiConfig,
+} from '../utils';
 
 export default defineComponent({
   name: 'CommentBox',
@@ -250,9 +293,11 @@ export default defineComponent({
     CloseIcon,
     EmojiIcon,
     ImageIcon,
+    ImageWall,
     MarkdownIcon,
     PreviewIcon,
     LoadingIcon,
+    GifIcon,
   },
 
   props: {
@@ -286,13 +331,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,8 +602,44 @@ 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 onImageWallScroll = 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);
     };
 
+    const onGifSearch = throttle(async (event: Event) => {
+      gifData.value.cursor = '';
+      gifData.value.list = [];
+      onImageWallScroll(event);
+    });
+
     // update wordNumber
     watch(
       [config, wordNumber],
@@ -575,6 +665,18 @@ 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 +734,8 @@ export default defineComponent({
       onLogout,
       onProfile,
       submitComment,
+      onImageWallScroll,
+      onGifSearch,
 
       isLogin,
       userInfo,
@@ -651,6 +755,10 @@ export default defineComponent({
       emojiTabIndex,
       showEmoji,
 
+      // gif
+      gifData,
+      showGif,
+
       // image
       canUploadImage,
 
@@ -663,7 +771,10 @@ export default defineComponent({
       editorRef,
       emojiButtonRef,
       emojiPopupRef,
+      gifButtonRef,
+      gifPopupRef,
       imageUploadRef,
+      gifSearchInputRef,
     };
   },
 });

package/src/components/CommentCard.vue

@@ -25,7 +25,7 @@
         <span v-if="comment.label" class="wl-badge" v-text="comment.label" />
         <span v-if="comment.sticky" class="wl-badge" v-text="locale.sticky" />
         <span
-          v-if="comment.level && comment.level >= 0"
+          v-if="comment.level !== undefined && comment.level >= 0"
           :class="`wl-badge level${comment.level}`"
           v-text="locale[`level${comment.level}`] || `Level ${comment.level}`"
         />

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/components/ImageWall.vue

@@ -0,0 +1,152 @@
+<!-- forked from https://github.com/DerYeger/vue-masonry-wall/blob/master/src/masonry-wall.vue -->
+
+<!-- MIT License
+
+Copyright (c) 2021 Fuxing Loh, Jan Müller
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE. -->
+
+<template>
+  <div ref="wall" class="wl-gallery" :style="{ gap: `${gap}px` }">
+    <div
+      v-for="(column, columnIndex) in columns"
+      :key="columnIndex"
+      class="wl-gallery-column"
+      :data-index="columnIndex"
+      :style="{ gap: `${gap}px` }"
+    >
+      <img
+        v-for="itemIndex in column"
+        :key="itemIndex"
+        class="wl-gallery-item"
+        :src="items[itemIndex].media[0].tinygif.url"
+        :title="items[itemIndex].title"
+        loading="lazy"
+        @click="
+          $emit('insert', `![](${items[itemIndex].media[0].tinygif.url})`)
+        "
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+} from 'vue';
+
+import type { PropType } from 'vue';
+
+type Column = number[];
+
+export default defineComponent({
+  props: {
+    columnWidth: { type: Number, default: 300 },
+    items: { type: Array as PropType<unknown[]>, default: () => [] },
+    gap: { type: Number, default: 0 },
+    rtl: { type: Boolean, default: false },
+  },
+
+  emit: ['insert'],
+
+  setup(props) {
+    let resizeObserver: ResizeObserver | null = null;
+    const wall = ref<HTMLDivElement | null>(null);
+
+    const columns = ref<Column[]>([]);
+
+    const getColumnCount = (): number => {
+      const count = Math.floor(
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        (wall.value!.getBoundingClientRect().width + props.gap) /
+          (props.columnWidth + props.gap)
+      );
+
+      return count > 0 ? count : 1;
+    };
+
+    const createColumns = (count: number): Column[] =>
+      new Array(count).fill(null).map(() => []);
+
+    const fillColumns = async (itemIndex: number): Promise<void> => {
+      if (itemIndex >= props.items.length) return;
+
+      await nextTick();
+
+      const columnDivs = Array.from(
+        wall.value?.children || []
+      ) as HTMLDivElement[];
+
+      if (props.rtl) columnDivs.reverse();
+
+      const target = columnDivs.reduce((prev, curr) =>
+        curr.getBoundingClientRect().height <
+        prev.getBoundingClientRect().height
+          ? curr
+          : prev
+      );
+
+      columns.value[Number(target.dataset.index)].push(itemIndex);
+
+      await fillColumns(itemIndex + 1);
+    };
+
+    const redraw = async (force = false): Promise<void> => {
+      if (columns.value.length === getColumnCount() && !force) return;
+
+      columns.value = createColumns(getColumnCount());
+
+      const scrollY = window.scrollY;
+
+      await fillColumns(0);
+
+      window.scrollTo({ top: scrollY });
+    };
+
+    watch(
+      () => [props.items, props.rtl],
+      () => redraw(true)
+    );
+    watch(
+      () => [props.columnWidth, props.gap],
+      () => redraw()
+    );
+
+    onMounted(() => {
+      redraw(true);
+      resizeObserver = new ResizeObserver(() => redraw());
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      resizeObserver.observe(wall.value!);
+    });
+
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    onBeforeUnmount(() => resizeObserver!.unobserve(wall.value!));
+
+    return {
+      columns,
+      wall,
+    };
+  },
+});
+</script>

package/src/composables/like.ts

@@ -2,7 +2,7 @@ import { useStorage } from '@vueuse/core';
 
 import type { Ref } from 'vue';
 
-const LIKE_KEY = 'WALIKE_LIKE';
+const LIKE_KEY = 'WALINE_LIKE';
 
 export type LikeID = number | string;
 

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/styles/card.scss

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