add simple lightbox

twikoojs · Jan 20, 2024 · 703a6e4 · 703a6e4
1 parent 9950e40
commit 703a6e4
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 1 deletion.
diff --git a/src/client/utils/i18n/i18n.js b/src/client/utils/i18n/i18n.js
@@ -471,6 +471,14 @@ export default {
     'Тасвир токен белгиси. Қслоуд учун кераксиз',
     '画像ホスティングトークン。qcloud画像ホスティングには設定が必要ありません'
   ],
+  [S.ACI + '_LIGHTBOX']: [
+    '使用简易 Lightbox 效果。默认：false',
+    '使用簡易 Lightbox 效果。預設：false',
+    '使用簡易 Lightbox 效果。預設：false',
+    'Use simple Lightbox effect. Default: false',
+    'Используйте простые эффекты лайтбокса. По умолчанию: false',
+    'シンプルなLightbox効果を使用します。デフォルト：false'
+  ],
   [S.ACI + '_LIMIT_PER_MINUTE']: [
     '单个 IP 发言频率限制（条/10分钟），0 为无限制，默认：10',
     '單個 IP 發言頻率限制（條/10分鐘），0 為無限制，預設：10',

diff --git a/src/client/view/components/TkAdminConfig.vue b/src/client/view/components/TkAdminConfig.vue
@@ -72,6 +72,7 @@ export default {
             { key: 'SHOW_IMAGE', desc: t('ADMIN_CONFIG_ITEM_SHOW_IMAGE'), ph: `${t('ADMIN_CONFIG_EXAMPLE')}false`, value: '' },
             { key: 'IMAGE_CDN', desc: t('ADMIN_CONFIG_ITEM_IMAGE_CDN'), ph: `${t('ADMIN_CONFIG_EXAMPLE')}qcloud`, value: '' },
             { key: 'IMAGE_CDN_TOKEN', desc: t('ADMIN_CONFIG_ITEM_IMAGE_CDN_TOKEN'), ph: `${t('ADMIN_CONFIG_EXAMPLE')}example`, value: '' },
+            { key: 'LIGHTBOX', desc: t('ADMIN_CONFIG_ITEM_LIGHTBOX'), ph: `${t('ADMIN_CONFIG_EXAMPLE')}false`, value: '' },
             { key: 'SHOW_EMOTION', desc: t('ADMIN_CONFIG_ITEM_SHOW_EMOTION'), ph: `${t('ADMIN_CONFIG_EXAMPLE')}false`, value: '' },
             { key: 'EMOTION_CDN', desc: t('ADMIN_CONFIG_ITEM_EMOTION_CDN'), ph: '', value: '' },
             { key: 'HIGHLIGHT', desc: t('ADMIN_CONFIG_ITEM_HIGHLIGHT'), ph: `${t('ADMIN_CONFIG_EXAMPLE')}false`, value: '' },

diff --git a/src/client/view/components/TkComment.vue b/src/client/view/components/TkComment.vue
@@ -31,7 +31,7 @@
             @like="onLike"
             @reply="onReply" />
       </div>
-      <div class="tk-content">
+      <div class="tk-content" @click="popupLightbox">
         <span v-if="comment.pid">{{ t('COMMENT_REPLIED') }} <a class="tk-ruser" :href="`#${comment.pid}`">@{{ comment.ruser }}</a> :</span>
         <span v-html="comment.comment" ref="comment"></span>
       </div>
@@ -235,6 +235,22 @@ export default {
       $event.preventDefault()
       this.setComment({ top })
     },
+    popupLightbox (event) {
+      if (this.$twikoo.serverConfig.LIGHTBOX !== 'true') return;
+      var target = event.target;
+      if (target.tagName === 'IMG' && !target.classList.contains('tk-owo-emotion')) {
+        var lightbox = document.createElement('div');
+        lightbox.className = 'tk-lightbox';
+        var lightboxImg = document.createElement('img');
+        lightboxImg.className = 'tk-lightbox-image';
+        lightboxImg.src = target.src;
+        lightbox.appendChild(lightboxImg);
+        document.body.appendChild(lightbox);
+        lightbox.addEventListener('click', function () {
+          document.body.removeChild(lightbox);
+        });
+      };
+    },
     async setComment (set) {
       this.loading = true
       await call(this.$tcb, 'COMMENT_SET_FOR_ADMIN', {
@@ -386,4 +402,28 @@ export default {
 .tk-expand {
   font-size: 0.75em;
 }
+.tk-lightbox {
+    display: block;
+    position: fixed;
+    background-color: rgba(0, 0, 0, 0.3);
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 999;
+}
+.tk-lightbox-image {
+    min-width: 100px;
+    min-height: 30px;
+    width: auto;
+    height: auto;
+    max-width: 95%;
+    max-height: 95%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: linear-gradient(90deg, #eeeeee 50%, #e3e3e3 0);
+    background-size: 40px 100%;
+}
 </style>
diff --git a/src/server/function/twikoo/utils/index.js b/src/server/function/twikoo/utils/index.js
@@ -267,6 +267,7 @@ const fn = {
         DEFAULT_GRAVATAR: config.DEFAULT_GRAVATAR,
         SHOW_IMAGE: config.SHOW_IMAGE || 'true',
         IMAGE_CDN: config.IMAGE_CDN,
+        LIGHTBOX: config.LIGHTBOX || 'false',
         SHOW_EMOTION: config.SHOW_EMOTION || 'true',
         EMOTION_CDN: config.EMOTION_CDN,
         COMMENT_PLACEHOLDER: config.COMMENT_PLACEHOLDER,