@waline/client 2.4.0 → 2.5.0

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/nomalize.scss

@@ -19,7 +19,6 @@
     color: var(--waline-theme-color);
 
     text-decoration: none;
-
     word-break: break-word;
 
     cursor: pointer;

package/src/styles/panel.scss

@@ -1,4 +1,5 @@
 @use 'emoji';
+@use 'gif';
 
 .wl-comment {
   position: relative;
@@ -196,7 +197,6 @@
   .wl-content {
     min-height: 1.25em;
     padding: 0.25em;
-
     word-break: break-word;
     hyphens: auto;
 
@@ -289,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/typings/waline.ts

@@ -144,7 +144,7 @@ export interface WalineProps {
    *
    * Set Emojis
    *
-   * @default ['https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo']
+   * @default ['//unpkg.com/@waline/emojis@1.0.1/weibo']
    */
   emoji?: (string | WalineEmojiInfo)[] | false;
 

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