@waline/client 2.4.0 → 2.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "client for waline comment system",
   "keywords": [
     "valine",
@@ -86,12 +86,27 @@
     "vue": "^3.2.33"
   },
   "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",
-    "@vitejs/plugin-vue": "^2.3.2",
-    "vite": "^2.9.8"
+    "@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.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.9"
   },
   "engines": {
-    "node": ">=12.20.0"
+    "node": ">=14"
   }
 }

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/CommentCard.vue

@@ -31,31 +31,33 @@
         />
         <span class="wl-time" v-text="time" />
 
-        <button
-          class="wl-reply"
-          :class="{ active: isReplyingCurrent }"
-          :title="isReplyingCurrent ? locale.cancelReply : locale.reply"
-          @click="$emit('reply', isReplyingCurrent ? null : comment)"
-        >
-          <ReplyIcon />
-        </button>
+        <div class="wl-comment-actions">
+          <button
+            class="wl-delete"
+            v-if="isAdmin || isOwner"
+            @click="$emit('delete', comment)"
+          >
+            <DeleteIcon />
+          </button>
 
-        <button
-          class="wl-like"
-          @click="$emit('like', comment)"
-          :title="like ? locale.cancelLike : locale.like"
-        >
-          <LikeIcon :active="like" />
-          <span v-if="'like' in comment" v-text="comment.like" />
-        </button>
+          <button
+            class="wl-like"
+            @click="$emit('like', comment)"
+            :title="like ? locale.cancelLike : locale.like"
+          >
+            <LikeIcon :active="like" />
+            <span v-if="'like' in comment" v-text="comment.like" />
+          </button>
 
-        <button
-          class="wl-delete"
-          v-if="isAdmin || isOwner"
-          @click="$emit('delete', comment)"
-        >
-          <DeleteIcon />
-        </button>
+          <button
+            class="wl-reply"
+            :class="{ active: isReplyingCurrent }"
+            :title="isReplyingCurrent ? locale.cancelReply : locale.reply"
+            @click="$emit('reply', isReplyingCurrent ? null : comment)"
+          >
+            <ReplyIcon />
+          </button>
+        </div>
       </div>
       <div class="wl-meta" aria-hidden="true">
         <span v-if="comment.addr" v-text="comment.addr" />
@@ -104,6 +106,7 @@
           @reply="$emit('reply', $event)"
           @submit="$emit('submit', $event)"
           @like="$emit('like', $event)"
+          @delete="$emit('delete', $event)"
           @status="$emit('status', $event)"
           @sticky="$emit('sticky', $event)"
         />

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/Waline.vue

@@ -312,7 +312,8 @@ export default defineComponent({
         objectId: comment.objectId,
         status,
       });
-      // todo: render comment list
+
+      comment.status = status;
     };
 
     const onSticky = async (comment: WalineComment): Promise<void> => {
@@ -327,10 +328,11 @@ export default defineComponent({
         objectId: comment.objectId,
         sticky: comment.sticky ? 0 : 1,
       });
-      // todo: render comment list
+
+      comment.sticky = !comment.sticky;
     };
 
-    const onDelete = async (comment: WalineComment): Promise<void> => {
+    const onDelete = async ({ objectId }: WalineComment): Promise<void> => {
       if (!confirm('Are you sure you want to delete this comment?')) return;
 
       const { serverURL, lang } = config.value;
@@ -339,30 +341,50 @@ export default defineComponent({
         serverURL,
         lang,
         token: userInfo.value?.token,
-        objectId: comment.objectId,
+        objectId: objectId,
+      });
+
+      // delete comment from data
+      data.value.some((item, index) => {
+        if (item.objectId === objectId) {
+          data.value = data.value.filter((_item, i) => i !== index);
+
+          return true;
+        }
+
+        return item.children.some((child, childIndex) => {
+          if (child.objectId === objectId) {
+            data.value[index].children = item.children.filter(
+              (_item, i) => i !== childIndex
+            );
+
+            return true;
+          }
+
+          return false;
+        });
       });
-      // todo render comment list
     };
 
     const onLike = async (comment: WalineComment): Promise<void> => {
       const { serverURL, lang } = config.value;
-      const hasLiked = likeStorage.value.includes(comment.objectId);
+      const { objectId } = comment;
+      const hasLiked = likeStorage.value.includes(objectId);
 
       await likeComment({
         serverURL,
         lang,
-        objectId: comment.objectId,
+        objectId,
         like: !hasLiked,
       });
 
       if (hasLiked)
-        likeStorage.value = likeStorage.value.filter(
-          (id) => id !== comment.objectId
-        );
+        likeStorage.value = likeStorage.value.filter((id) => id !== objectId);
       else {
-        likeStorage.value.push(comment.objectId);
+        likeStorage.value = [...likeStorage.value, objectId];
 
-        if (likeStorage.value.length > 50) likeStorage.value.slice(-50);
+        if (likeStorage.value.length > 50)
+          likeStorage.value = likeStorage.value.slice(-50);
       }
 
       comment.like = (comment.like || 0) + (hasLiked ? -1 : 1);

package/src/composables/index.ts

@@ -1,4 +1,4 @@
 export * from './inputs';
 export * from './timeAgo';
 export * from './userInfo';
-export * from './likeStorage';
+export * from './like';

package/src/composables/{likeStorage.ts → like.ts}

@@ -8,4 +8,7 @@ export type LikeID = number | string;
 
 export type LikeRef = Ref<LikeID[]>;
 
-export const useLikeStorage = (): LikeRef => useStorage<LikeID[]>(LIKE_KEY, []);
+let likeStorage: LikeRef | null = null;
+
+export const useLikeStorage = (): LikeRef =>
+  likeStorage || (likeStorage = useStorage<LikeID[]>(LIKE_KEY, []));

package/src/composables/userInfo.ts

@@ -18,5 +18,11 @@ export const USER_KEY = 'WALINE_USER';
 
 export type UserInfoRef = Ref<UserInfo | Record<string, never>>;
 
+let userInfoStorage: UserInfoRef | null = null;
+
 export const useUserInfo = (): UserInfoRef =>
-  useStorage<UserInfo | Record<string, never>>('USER_KEY', {});
+  userInfoStorage ||
+  (userInfoStorage = useStorage<UserInfo | Record<string, never>>(
+    'USER_KEY',
+    {}
+  ));

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

@@ -18,13 +18,13 @@
   .wl-user {
     --avatar-size: var(--waline-avatar-size);
 
+    position: relative;
+    margin-right: 0.75em;
+
     @media (max-width: 720px) {
       --avatar-size: var(--waline-m-avatar-size);
     }
 
-    position: relative;
-    margin-right: 0.75em;
-
     img {
       width: var(--avatar-size);
       height: var(--avatar-size);
@@ -101,32 +101,6 @@
     font-size: 0.75em;
   }
 
-  .wl-delete,
-  .wl-like,
-  .wl-reply {
-    float: right;
-
-    padding: 4px;
-    border: none;
-
-    background: transparent;
-    color: var(--waline-color);
-
-    line-height: 1;
-
-    cursor: pointer;
-
-    transition: color 0.2s ease;
-
-    &:hover {
-      color: var(--waline-theme-color);
-    }
-
-    &.active {
-      color: var(--waline-active-color);
-    }
-  }
-
   .wl-meta {
     position: relative;
     line-height: 1;
@@ -154,6 +128,37 @@
     }
   }
 
+  .wl-comment-actions {
+    float: right;
+  }
+
+  .wl-delete,
+  .wl-like,
+  .wl-reply {
+    display: inline-flex;
+    align-items: center;
+
+    padding: 4px;
+    border: none;
+
+    background: transparent;
+    color: var(--waline-color);
+
+    line-height: 1;
+
+    cursor: pointer;
+
+    transition: color 0.2s ease;
+
+    &:hover {
+      color: var(--waline-theme-color);
+    }
+
+    &.active {
+      color: var(--waline-active-color);
+    }
+  }
+
   .wl-content {
     position: relative;
 
@@ -217,8 +222,8 @@
 
   .wl-admin-actions {
     margin: 8px 0;
-    text-align: right;
     font-size: 12px;
+    text-align: right;
   }
 
   .wl-comment-status {