@waline/client 2.4.1 → 2.5.1

package/src/styles/emoji.scss

@@ -1,118 +1,116 @@
-@mixin emoji() {
-  .wl-emoji-popup {
-    position: absolute;
-    top: 100%;
-    left: 1.25em;
-    z-index: 10;
-
-    max-width: 526px;
-    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;
-    }
+.wl-emoji-popup {
+  position: absolute;
+  top: 100%;
+  left: 1.25em;
+  z-index: 10;
+
+  max-width: 526px;
+  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;
+  }
+
+  button {
+    display: inline-block;
+    vertical-align: middle;
+
+    width: 2em;
+    margin: 0.125em;
+    padding: 0;
+    border-width: 0;
+
+    background: transparent;
 
-    button {
-      display: inline-block;
-      vertical-align: middle;
+    font-size: inherit;
+    line-height: 2;
+    text-align: center;
 
-      width: 2em;
-      margin: 0.125em;
-      padding: 0;
-      border-width: 0;
+    cursor: pointer;
 
-      background: transparent;
+    &:hover {
+      background: var(--waline-bgcolor-hover);
+    }
+  }
 
-      font-size: inherit;
-      line-height: 2;
-      text-align: center;
+  .wl-emoji {
+    display: inline-block;
+    vertical-align: middle;
+    max-width: 1.5em;
+    max-height: 1.5em;
+  }
 
-      cursor: pointer;
+  .wl-tab-wrapper {
+    overflow-y: auto;
+    max-height: 145px;
+    padding: 0.5em;
 
-      &:hover {
-        background: var(--waline-bgcolor-hover);
-      }
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
     }
 
-    .wl-emoji {
-      display: inline-block;
-      vertical-align: middle;
-      max-width: 1.5em;
-      max-height: 1.5em;
+    &::-webkit-scrollbar-track-piece:vertical {
+      -webkit-border-radius: 6px;
+      border-radius: 6px;
+      background: rgb(0 0 0 / 10%);
     }
 
-    .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);
-      }
+    &::-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;
+  .wl-tabs {
+    position: relative;
+    height: 2em;
+    padding: 0 6px 1px;
 
-      &::before {
-        content: ' ';
+    &::before {
+      content: ' ';
 
-        position: absolute;
-        top: 0;
-        right: 0;
-        left: 0;
-        z-index: 2;
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      z-index: 2;
 
-        height: 1px;
+      height: 1px;
 
-        background: var(--waline-border-color);
-      }
+      background: var(--waline-border-color);
     }
+  }
 
-    .wl-tab {
-      position: relative;
-      margin: 0;
-      padding: 0 0.5em;
+  .wl-tab {
+    position: relative;
+    margin: 0;
+    padding: 0 0.5em;
 
-      &.active {
-        z-index: 3;
+    &.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;
+      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);
-      }
+      background: var(--waline-bgcolor);
     }
   }
 }

package/src/styles/gif.scss

@@ -0,0 +1,70 @@
+.wl-gif-popup {
+  position: absolute;
+  top: 100%;
+  left: 1.25em;
+  z-index: 10;
+
+  width: calc(100% - 3em);
+  padding: 0.75em 0.75em 0.25em;
+  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-gallery {
+  max-height: 80vh;
+  display: flex;
+  overflow-y: auto;
+}
+
+.wl-gallery-column {
+  height: -webkit-max-content;
+  height: -moz-max-content;
+  height: max-content;
+
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}

package/src/styles/index.scss

@@ -4,6 +4,9 @@
 @use 'base';
 
 @use 'panel';
+@use 'emoji';
+@use 'gif';
+
 @use 'card';
 @use 'layout';
 

package/src/styles/panel.scss

@@ -1,5 +1,3 @@
-@use 'emoji';
-
 .wl-comment {
   position: relative;
   display: flex;
@@ -286,5 +284,3 @@
     }
   }
 }
-
-@include emoji.emoji;

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,63 @@
+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: {
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      '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,15 @@
+export const 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);
+  };
+};