@daoyi/nmtl-ui 2.0.1-beta.138 → 2.0.1-beta.139

package/lib/components/globalConfig.js

@@ -78,7 +78,7 @@ var zhtw = {
 	"chronology.zoomIn": "放大時間刻度",
 	"chronology.zoomOut": "縮小時間刻度",
 	"chronology.backToStart": "回到第一張",
-	"chronology.driveImage": "{title}相關圖片",
+	"chronology.drivePreview": "「{title}」的 Google 雲端硬碟預覽",
 	"chronology.openDriveFile": "在 Google 雲端硬碟檢視原始檔案",
 	"aria.newWindow": "（另開新視窗）",
 	"aria.vcode.image": "驗證碼圖片，如無法辨識可刷新驗證碼",
@@ -217,7 +217,7 @@ var zhcn = {
 	"chronology.zoomIn": "放大时间刻度",
 	"chronology.zoomOut": "缩小时间刻度",
 	"chronology.backToStart": "回到第一张",
-	"chronology.driveImage": "{title}相关图片",
+	"chronology.drivePreview": "「{title}」的 Google 云端硬盘预览",
 	"chronology.openDriveFile": "在 Google 云端硬盘查看原始文件",
 	"aria.newWindow": "（另开新视窗）",
 	"aria.vcode.image": "验证码图片，如无法辨识可刷新验证码",
@@ -358,7 +358,7 @@ var enus = {
 	"chronology.zoomIn": "Zoom in the timeline",
 	"chronology.zoomOut": "Zoom out the timeline",
 	"chronology.backToStart": "Back to the first slide",
-	"chronology.driveImage": "Image related to {title}",
+	"chronology.drivePreview": "Google Drive preview of “{title}”",
 	"chronology.openDriveFile": "View the original file on Google Drive",
 	"aria.newWindow": " (opens in new window)",
 	"aria.vcode.image": "CAPTCHA image, refresh if unreadable",

package/lib/utils/prepareTimelineData.js

@@ -6,24 +6,24 @@ var TIMELINE_HINT_CLASS = 'tl-newwindow-hint';
 
 /* https://drive.google.com/file/d/{id}/preview（或 /view） */
 var DRIVE_FILE = /^https?:\/\/drive\.google\.com\/file\/d\/([\w-]+)/i;
-/* 套件以網址結尾判斷是不是圖片（MediaType.js 的 /(jpg|...)(\?.*)?$/）；縮圖網址沒有副檔名，
-   補 #.jpg 讓它走圖片類型（# 之後不會送到伺服器） */
+/* 套件只認得分享網址（…/view?usp=sharing）為 Google Doc 類型、嵌入 /preview 的 iframe；資料裡也有 /preview 等寫法，統一 */
+var driveShare = function driveShare(id) {
+  return "https://drive.google.com/file/d/".concat(id, "/view?usp=sharing");
+};
+/* 時間刻度標記的小縮圖；# 之後不送伺服器，.jpg 讓套件當圖片處理 */
 var driveThumbnail = function driveThumbnail(id) {
-  return "https://drive.google.com/thumbnail?id=".concat(id, "&sz=w1000#.jpg");
+  return "https://drive.google.com/thumbnail?id=".concat(id, "&sz=w400#.jpg");
 };
 var driveView = function driveView(id) {
   return "https://drive.google.com/file/d/".concat(id, "/view");
 };
-var stripTags = function stripTags(html) {
-  return String(html || '').replace(/<[^>]*>/g, '').trim();
-};
 var hint = function hint(html) {
   return addNewWindowHint(html, {
     treatMissingTargetAsBlank: true,
     className: TIMELINE_HINT_CLASS
   });
 };
-var prepareMedia = function prepareMedia(media, headline) {
+var prepareMedia = function prepareMedia(media) {
   if (!media || typeof media.url !== 'string') return media;
   var match = DRIVE_FILE.exec(media.url);
   if (!match) return _objectSpread2(_objectSpread2({}, media), {}, {
@@ -33,23 +33,13 @@ var prepareMedia = function prepareMedia(media, headline) {
     id = _match[1];
   var _getIntl = getIntl(),
     formatMessage = _getIntl.formatMessage;
-  /* 雲端硬碟的檔案多半是圖片、少數是影片，無法從網址判斷 → 用詞不限定影片（2026-10-08 人工測試回饋）。
-     縮圖就是檔案內容本身：alt 優先用圖說（通常是圖片的說明與來源），沒有圖說才用「{標題}相關圖片」 */
-  var alt = stripTags(media.caption) || formatMessage({
-    id: 'chronology.driveImage'
-  }, {
-    title: stripTags(headline)
-  });
   var open = "<a href=\"".concat(driveView(id), "\" target=\"_blank\" rel=\"noopener noreferrer\">").concat(formatMessage({
     id: 'chronology.openDriveFile'
   }), "<span class=\"").concat(TIMELINE_HINT_CLASS, "\">").concat(newWindowHintText(), "</span></a>");
   return _objectSpread2(_objectSpread2({}, media), {}, {
-    url: driveThumbnail(id),
+    url: driveShare(id),
     thumbnail: driveThumbnail(id),
-    alt: alt,
-    /* 套件沒有 title 時拿圖說當圖片 title，會帶進連結文字，但圖片本身不是連結 */
-    title: alt,
-    /* 連結放在圖說，不包在圖片上：同一個目的地只留一個連結，文字也看得到 */
+    /* 預覽器對鍵盤與報讀軟體隱藏，圖說的連結是它們的替代入口 */
     caption: [open, hint(media.caption)].filter(Boolean).join('<br />'),
     link: undefined
   });
@@ -62,7 +52,7 @@ var prepareSlide = function prepareSlide(slide) {
   }) : slide.text;
   return _objectSpread2(_objectSpread2({}, slide), {}, {
     text: text,
-    media: prepareMedia(slide.media, slide.text && slide.text.headline)
+    media: prepareMedia(slide.media)
   });
 };
 

package/lib/utils/syncTimelineA11y.js

@@ -14,6 +14,7 @@ var MENU_BUTTON_LABELS = [['.tl-icon-zoom-in', 'chronology.zoomIn'], ['.tl-icon-
  *  5. 下方時間刻度的事件標記：原本只能滑鼠點選。改為 tablist／tab（只有目前事件可 Tab 到），
  *     方向鍵／Home／End／PageUp／PageDown 換到對應事件
  *  6. 放大、縮小、回到第一張：原本是沒有名稱的 span，補 role="button"、tabindex、名稱，Enter／空白鍵可操作
+ *  8. Google 雲端硬碟預覽器 iframe：tabindex="-1"＋aria-hidden（見 prepareTimelineData 檔頭 GN1210200E）
  *  7. 套件在 document 上監聽左右鍵換頁（每建一次就多綁一個、從不移除），焦點在頁籤、搜尋框等時間軸外的元件時
  *     按左右鍵也會換投影片 → 只有焦點在這個時間軸的箭頭上才讓它生效
  * @param {object} timeline new Timeline(...) 的實例
@@ -60,6 +61,21 @@ var syncTimelineA11y = function syncTimelineA11y(timeline, root) {
       });
     });
   };
+  /* 8. Google 雲端硬碟預覽器（iframe）：會把 Tab 攔在內部循環（鍵盤陷阱）→ 不讓鍵盤進入、對報讀軟體隱藏，
+     改由圖說的「在 Google 雲端硬碟檢視原始檔案」連結提供；滑鼠仍可在頁內縮放、翻頁 */
+  var syncIframes = function syncIframes() {
+    root.querySelectorAll('.tl-slide iframe[src*="drive.google.com"]').forEach(function (frame) {
+      frame.setAttribute('tabindex', '-1');
+      frame.setAttribute('aria-hidden', 'true');
+      /* 套件會拿圖說（含「在 Google 雲端硬碟檢視原始檔案」連結文字）當 title，改成描述這個預覽器 */
+      var slide = frame.closest('.tl-slide');
+      var title = t('chronology.drivePreview', {
+        title: text(slide && slide.querySelector('.tl-headline:not(.tl-headline-date)'))
+      });
+      if (frame.getAttribute('title') !== title) frame.setAttribute('title', title);
+    });
+  };
+
   /* 3. 「上一張」移到投影片內容之前；兩個箭頭都是絕對定位，畫面不變 */
   var orderNav = function orderNav() {
     var prev = root.querySelector('.tl-slidenav-previous');
@@ -214,6 +230,7 @@ var syncTimelineA11y = function syncTimelineA11y(timeline, root) {
   /* changed：只有真正換頁（change 事件）才播報，初次載入與重建不播 */
   var apply = function apply(changed) {
     orderNav();
+    syncIframes();
     syncMenuButtons();
     var currentId = currentIdOf();
     /* 剛載入時 current_id 可能還是空的：先不動 inert，避免把畫面上的這張也設成 inert */

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@daoyi/nmtl-ui",
 	"packageManager": "pnpm@10.34.5",
-	"version": "2.0.1-beta.138",
+	"version": "2.0.1-beta.139",
 	"description": "This project is to be used as a starter kit for building React component using Storybook and Rollup",
 	"author": "daoyi",
 	"main": "lib/index.js",