tourfp 0.3.2 → 0.3.4

package/README.md

@@ -29,13 +29,13 @@ Với Angular, nên khai báo trong `angular.json` để thư viện được n
 Hoặc không cần cài, nạp bằng một thẻ script qua CDN:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/tourfp@0.3.2/tourfp.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/tourfp@0.3.4/tourfp.js"></script>
 ```
 
 Để dùng thử nhanh trên một trang đang mở (trang phải cho phép script từ `cdn.jsdelivr.net`), dán dòng này vào console:
 
 ```js
-document.head.appendChild(Object.assign(document.createElement('script'), { src: 'https://cdn.jsdelivr.net/npm/tourfp@0.3.2/tourfp.js' }));
+document.head.appendChild(Object.assign(document.createElement('script'), { src: 'https://cdn.jsdelivr.net/npm/tourfp@0.3.4/tourfp.js' }));
 ```
 
 Tuỳ chọn, đặt trước khi nạp thư viện:
@@ -85,8 +85,11 @@ uvicorn main:app --app-dir server --host 127.0.0.1 --port 8000
 
 Mở <http://localhost:8000>:
 
-- **Thêm tour** — đặt tên rồi dán JSON lấy bằng `copy(TourFP.export())`, hoặc chọn file `.json`.
-- **Chạy thử** — chép một đoạn mã gồm cả thư viện lẫn tour; mở màn bắt đầu của tour, dán vào console là tour phát ngay.
+- **Thêm tour** — bấm **Ghi tour bằng Chrome**: máy chủ mở Chrome (hồ sơ kiểm thử, đã đăng nhập) có sẵn thanh ghi ở mọi
+  trang. Ghi xong bấm **Gửi** trên thanh ghi, tour tự hiện trong hộp Thêm tour; đặt tên rồi lưu. Kéo hẹp cửa sổ Chrome
+  để ghi tour cho bố cục mobile. Cũng có thể dán JSON chép từ thanh ghi trên trang khác.
+- **Chạy thử** — bấm **Chạy trong Chrome**: máy chủ mở Chrome (hồ sơ kiểm thử, đã đăng nhập) tại màn bắt đầu của tour,
+  nạp thư viện và phát tour ngay theo chế độ và bước dừng đã chọn. Đoạn mã chạy thử vẫn lấy được ở `/api/tours/{id}/snippet.js`.
   Khi chạy thử, thanh ghi tour không hiện (chế độ chỉ phát); gọi `TourFP.showPanel()` nếu cần hiện lại.
 - **Xoá**, **Tải JSON**, và xem danh sách bước của từng tour.
 - **Sửa tên**: bấm vào tên một bước để đặt tên hiển thị cho bước đó (để trống thì dùng lại tên tự lấy từ giao diện); nút **Sửa tên tour** đổi tên và mô tả của tour. Tên đã đặt được dùng trong lời hướng dẫn khi phát và trong việc tìm tour của trợ lý.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tourfp",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "Ghi và phát tour hướng dẫn trên giao diện web bằng dấu vân tay phần tử, không cần sửa mã nguồn của app.",
   "main": "tourfp.js",
   "browser": "tourfp.js",

package/tourfp.js

@@ -1,4 +1,4 @@
-/* TourFP 0.3.2 — bản thử: ghi tour theo thao tác và khớp phần tử bằng "dấu vân tay".
+/* TourFP 0.3.4 — bản thử: ghi tour theo thao tác và khớp phần tử bằng "dấu vân tay".
  * - Không dùng class/id. Không phụ thuộc thư viện.
  * - Chữ lấy từ API (tên, tên kế hoạch…) và chữ số bị loại khỏi dấu vân tay.
  *   Để lọc được, file này phải được nạp TRƯỚC khi app gọi API (đặt trong <head>).
@@ -819,7 +819,13 @@
   }
 
   // hộp thoại đang che màn hình mà không bước nào của tour diễn ra trong nó (quảng cáo, thông báo bất chợt)
-  const foreignDialog = () => { const d = topDialog(); if (!d) return false; const k = dialogKey(d); return !steps.some(s => s.fp.ctx.dialog === k); };
+  // Hộp thoại "của tour": có bước diễn ra trong nó, hoặc nó là màn hình sau cú bấm của một bước (ví dụ bước cuối mở hộp thoại
+  // Nộp tiền: đó chính là màn đích của tour, không phải hộp thoại lạ).
+  const foreignDialog = () => {
+    const d = topDialog(); if (!d) return false;
+    const k = dialogKey(d);
+    return !steps.some(s => s.fp.ctx.dialog === k || (s.after && s.after.dialog === k));
+  };
   // Tạm ngừng dẫn cho tới khi người dùng đóng hộp thoại lạ, rồi phát tiếp từ đúng chỗ. Không chặn cú bấm nào, không tải lại trang.
   function holdForDialog() {
     const my = ++token;
@@ -1062,8 +1068,11 @@
   }
   // Máy chủ có gọi được không: null = chưa biết. Trang chặn kết nối ra ngoài thì kết quả không đổi, nên chỉ cần dò một lần.
   let serverOk = null;
-  const setSaveMode = () => { bSave.textContent = serverOk === false ? 'Chép JSON' : 'Lưu'; };
+  // Chrome do trang quản trị mở để ghi tour: có sẵn hàm __tourfpHost, gửi tour thẳng về trang quản trị qua đó
+  const host = () => typeof window.__tourfpHost === 'function';
+  const setSaveMode = () => { bSave.textContent = host() ? 'Gửi' : serverOk === false ? 'Chép JSON' : 'Lưu'; };
   async function probe() {
+    if (host()) return setSaveMode();
     if (serverOk !== null) return;
     try { serverOk = (await fetch(SERVER + '/api/config')).ok; } catch (_) { serverOk = false; }
     setSaveMode();
@@ -1074,6 +1083,10 @@
     scrub();
     if (recording) stop();
     if (!steps.length) return setInfo('Chưa có bước nào để lưu');
+    if (host()) {
+      try { await window.__tourfpHost(JSON.stringify(steps)); return setInfo(`Đã gửi ${steps.length} bước về trang quản trị · đặt tên và lưu ở đó`); }
+      catch (_) { return setInfo('Không gửi được về trang quản trị'); }
+    }
     if (serverOk === false) {
       return setInfo(copyNow(JSON.stringify(steps)) ? 'Đã chép JSON · dán vào Thêm tour ở trang quản trị' : 'Không chép được · dùng copy(TourFP.export()) trong console');
     }