@waline/client 2.4.2 → 2.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.4.2",
+  "version": "2.6.0",
   "description": "client for waline comment system",
   "keywords": [
     "valine",
@@ -71,30 +71,29 @@
     ]
   },
   "dependencies": {
-    "@vueuse/core": "^8.4.2",
+    "@vueuse/core": "^8.6.0",
     "autosize": "^5.0.1",
-    "marked": "^4.0.15",
-    "vue": "^3.2.33"
+    "marked": "^4.0.16",
+    "vue": "^3.2.37"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.10",
-    "@babel/preset-env": "^7.17.10",
-    "@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",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.72.1",
-    "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"
+    "@babel/core": "7.18.2",
+    "@babel/preset-env": "7.18.2",
+    "@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.41",
+    "@vitejs/plugin-vue": "2.3.3",
+    "rimraf": "3.0.2",
+    "rollup": "2.75.6",
+    "rollup-plugin-dts": "4.2.2",
+    "rollup-plugin-terser": "7.0.2",
+    "rollup-plugin-ts": "3.0.2",
+    "typescript": "4.7.3",
+    "vite": "2.9.10"
   },
   "engines": {
     "node": ">=14"

package/src/comment.ts

@@ -1,5 +1,10 @@
 import { useUserInfo } from './composables';
-import { decodePath, errorHandler, fetchCommentCount } from './utils';
+import {
+  decodePath,
+  errorHandler,
+  fetchCommentCount,
+  getServerURL,
+} from './utils';
 import type { WalineAbort } from './typings';
 
 export interface WalineCommentCountOptions {
@@ -54,7 +59,7 @@ WalineCommentCountOptions): WalineAbort => {
 
   if (elements.length)
     void fetchCommentCount({
-      serverURL,
+      serverURL: getServerURL(serverURL),
       paths: Array.from(elements).map((element) =>
         decodePath(element.dataset.path || element.getAttribute('id') || path)
       ),

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,17 @@
             <EmojiIcon />
           </button>
 
+          <button
+            v-if="config.search"
+            ref="gifButtonRef"
+            class="wl-action"
+            :class="{ actived: showGif }"
+            :title="locale.gif"
+            @click="showGif = !showGif"
+          >
+            <GifIcon />
+          </button>
+
           <input
             ref="imageUploadRef"
             class="upload"
@@ -152,6 +163,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"
@@ -210,6 +246,7 @@
 </template>
 
 <script lang="ts">
+import { useDebounceFn } from '@vueuse/core';
 import autosize from 'autosize';
 import {
   computed,
@@ -217,6 +254,7 @@ import {
   inject,
   onMounted,
   onUnmounted,
+  reactive,
   ref,
   watch,
 } from 'vue';
@@ -228,19 +266,26 @@ import {
   MarkdownIcon,
   PreviewIcon,
   LoadingIcon,
+  GifIcon,
 } from './Icons';
+import ImageWall from './ImageWall.vue';
 import { useEditor, useUserMeta, useUserInfo } from '../composables';
 import {
+  getEmojis,
   getImagefromDataTransfer,
-  parseMarkdown,
   getWordNumber,
   parseEmoji,
+  parseMarkdown,
   postComment,
-  getEmojis,
 } from '../utils';
 
 import type { ComputedRef, DeepReadonly } from 'vue';
-import type { WalineCommentData, WalineImageUploader } from '../typings';
+import type {
+  WalineCommentData,
+  WalineImageUploader,
+  WalineSearchOptions,
+  WalineSearchResult,
+} from '../typings';
 import type { WalineConfig, WalineEmojiConfig } from '../utils';
 
 export default defineComponent({
@@ -250,9 +295,11 @@ export default defineComponent({
     CloseIcon,
     EmojiIcon,
     ImageIcon,
+    ImageWall,
     MarkdownIcon,
     PreviewIcon,
     LoadingIcon,
+    GifIcon,
   },
 
   props: {
@@ -286,14 +333,23 @@ 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 searchResults = reactive({
+      loading: true,
+      list: [] as WalineSearchResult[],
+    });
+
     const wordLimit = ref(0);
     const isWordNumberLegal = ref(false);
 
@@ -548,8 +604,43 @@ 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;
+      const searchOptions = config.value.search as WalineSearchOptions;
+      const keyword = gifSearchInputRef.value?.value || '';
+
+      if (percent < 0.9 || searchResults.loading) return;
+
+      searchResults.loading = true;
+
+      searchResults.list.push(
+        ...(searchOptions.more
+          ? await searchOptions.more(keyword, searchResults.list.length)
+          : await searchOptions.search(keyword))
+      );
+
+      searchResults.loading = false;
+
+      setTimeout(() => {
+        (event.target as HTMLDivElement).scrollTop = scrollTop;
+      }, 50);
     };
 
+    const onGifSearch = useDebounceFn((event: Event) => {
+      searchResults.list = [];
+      onImageWallScroll(event);
+    }, 300);
+
     // update wordNumber
     watch(
       [config, wordNumber],
@@ -575,6 +666,23 @@ export default defineComponent({
       { immediate: true }
     );
 
+    watch(showGif, async (showGif) => {
+      if (!showGif) return;
+
+      const searchOptions = config.value.search as WalineSearchOptions;
+
+      // clear input
+      if (gifSearchInputRef.value) gifSearchInputRef.value.value = '';
+
+      searchResults.loading = true;
+
+      searchResults.list = searchOptions.default
+        ? await searchOptions.default()
+        : await searchOptions.search('');
+
+      searchResults.loading = false;
+    });
+
     onMounted(() => {
       document.body.addEventListener('click', popupHandler);
 
@@ -632,6 +740,8 @@ export default defineComponent({
       onLogout,
       onProfile,
       submitComment,
+      onImageWallScroll,
+      onGifSearch,
 
       isLogin,
       userInfo,
@@ -651,6 +761,10 @@ export default defineComponent({
       emojiTabIndex,
       showEmoji,
 
+      // gif
+      gifData: searchResults,
+      showGif,
+
       // image
       canUploadImage,
 
@@ -663,7 +777,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,166 @@
+<!-- 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` }"
+    >
+      <template v-for="itemIndex in column" :key="itemIndex">
+        <LoadingIcon
+          v-if="!state[items[itemIndex].src]"
+          :size="36"
+          style="margin: 20px auto"
+        />
+        <img
+          class="wl-gallery-item"
+          :src="items[itemIndex].src"
+          :title="items[itemIndex].title"
+          loading="lazy"
+          @load="state[items[itemIndex].src] = true"
+          @click="$emit('insert', `![](${items[itemIndex].src})`)"
+        />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+} from 'vue';
+
+import { LoadingIcon } from './Icons';
+
+import type { PropType } from 'vue';
+import type { WalineSearchResult } from '../typings';
+
+type Column = number[];
+
+export default defineComponent({
+  name: 'ImageWall',
+
+  components: {
+    LoadingIcon,
+  },
+
+  props: {
+    items: { type: Array as PropType<WalineSearchResult[]>, default: () => [] },
+    columnWidth: { type: Number, default: 300 },
+    gap: { type: Number, default: 0 },
+  },
+
+  emit: ['insert'],
+
+  setup(props) {
+    let resizeObserver: ResizeObserver | null = null;
+    const wall = ref<HTMLDivElement | null>(null);
+    const state = ref<Record<string, boolean>>({});
+    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[];
+
+      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],
+      () => {
+        state.value = {};
+        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,
+      state,
+      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/default.ts

@@ -1,4 +1,4 @@
-import type { WalineMeta } from '../typings';
+import type { WalineMeta, WalineSearchOptions } from '../typings';
 
 const availableMeta: WalineMeta[] = ['nick', 'mail', 'link'];
 
@@ -19,3 +19,93 @@ export const defaultTexRenderer = (blockMode: boolean): string =>
   blockMode === true
     ? '<p class="wl-tex">Tex is not available in preview</p>'
     : '<span class="wl-tex">Tex is not available in preview</span>';
+
+export const getDefaultSearchOptions = (): WalineSearchOptions => {
+  interface FetchGifRequest {
+    keyword: string;
+    pos?: string;
+  }
+
+  type GifFormat =
+    | 'gif'
+    | 'mediumgif'
+    | 'tinygif'
+    | 'nanogif'
+    | 'mp4'
+    | 'loopedmp4'
+    | 'tinymp4'
+    | 'nanomp4'
+    | 'webm'
+    | 'tinywebm'
+    | 'nanowebm';
+
+  interface MediaObject {
+    preview: string;
+    url: string;
+    dims: number[];
+    size: number;
+  }
+
+  interface GifObject {
+    created: number;
+    hasaudio: boolean;
+    id: string;
+    media: Record<GifFormat, MediaObject>[];
+    tags: string[];
+    title: string;
+    itemurl: string;
+    hascaption: boolean;
+    url: string;
+  }
+
+  interface FetchGifResponse {
+    next: string;
+    results: GifObject[];
+  }
+
+  const state = {
+    next: '',
+  };
+
+  const fetchGif = ({
+    keyword,
+    pos,
+  }: FetchGifRequest): Promise<FetchGifResponse> => {
+    const baseUrl = `https://g.tenor.com/v1/search`;
+    const query = new URLSearchParams('media_filter=minimal');
+    query.set('key', 'PAY5JLFIH6V6');
+    query.set('limit', '20');
+    query.set('pos', pos || '');
+    query.set('q', keyword);
+
+    return fetch(`${baseUrl}?${query.toString()}`, {
+      headers: {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        'Content-Type': 'application/json',
+      },
+    })
+      .then((resp) => resp.json() as Promise<FetchGifResponse>)
+      .catch(() => ({ next: pos || '', results: [] }));
+  };
+
+  return {
+    search: (word = '') =>
+      fetchGif({ keyword: word }).then((resp) => {
+        state.next = resp.next;
+
+        return resp.results.map((item) => ({
+          title: item.title,
+          src: item.media[0].tinygif.url,
+        }));
+      }),
+    more: (word) =>
+      fetchGif({ keyword: word, pos: state.next }).then((resp) => {
+        state.next = resp.next;
+
+        return resp.results.map((item) => ({
+          title: item.title,
+          src: item.media[0].tinygif.url,
+        }));
+      }),
+  };
+};

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',
 ]);