Other 2x Dark/Light Mode Automatic Toggle Switch/jsdmat - Tự động chuyển đổi chế độ tối/sáng/jsdmat XenForo 2 0.4.0

[PVS]

Dark/Light Mode Automatic Toggle Switch/jsdmat - Tự động chuyển đổi chế độ tối/sáng/jsdmat XenForo 2 0.4.0

Về jsdmat​

Sửa đổi này cho phép cài đặt XenForo tự động chuyển đổi style sáng và tối dựa trên cài đặt giao diện người dùng của trình duyệt người dùng "ưu tiên phối màu".
Việc thêm tính năng media CSS này trực tiếp vào các định nghĩa CSS của XenForo là khó khả thi đối với kiến trúc hiện tại. Việc chuyển đổi giữa giao diện người dùng sáng và tối mà không cần sửa đổi lớn sẽ dễ dàng hơn bằng cách chuyển đổi giữa các style khác nhau.

Chức năng​

Thu thập dữ liệu XenForo ban đầu, code JS sau đó kiểm tra trạng thái hiện tại khi tải hoặc được kích hoạt và bắt đầu thay đổi style thông qua chuyển hướng nếu thích hợp. Logic chuyển đổi được xác định bởi hai danh sách tương ứng gồm các style sáng và tối sẽ được tự động bật tắt. Tất cả style_id không có trong danh sách sẽ không được chuyển đổi và vẫn được chọn theo cách thủ công. Theo tùy chọn, người dùng có thể cung cấp công tắc chuyển đổi "từ sáng sang tối" để ghi đè và khóa cài đặt giao diện người dùng theo cách thủ công.

Ví dụ​

mô tả	code	hình dung
7 style, style_ids 1 .. 7 tất cả style có thể lựa chọn default_style = 1 (sáng) default dark = 2 (tối) secondary dark = 3 (xanh lam) style quan tâm đặc biệt: sáng = 7 và tối = 6 luôn xanh = 4 luôn xám = 5	Định nghĩa tự động chuyển đổi: jsdmat.addLD (1, 2); jsdmat.addLD (1, 3); jsdmat.addLD (7, 6);

• Trình duyệt ưa thích tối, vào nền tảng ở style 1, nút bật tắt tự động chuyển hướng sang style 2,
  • lật trình duyệt sang sáng -> tự động chuyển về 2 (ngược lại).
• Trình duyệt ưa thích sáng, vào nền tảng ở style 3, nút bật tắt tự động chuyển hướng sang style 1,
  • lật trình duyệt sang tối -> tự động chuyển về 3 (ngược lại).
• Vào nền tảng hoặc thay đổi style theo cách thủ công thành 4 hoặc 5 sẽ dừng tự động chuyển đổi,
  • thay đổi style thành style không phải 4 hoặc 5
    • nếu style đã chọn không phù hợp với tùy chọn của trình duyệt, style đó sẽ bị khóa vĩnh viễn,
    • nếu style và sở thích của trình duyệt phù hợp, tính năng tự động chuyển đổi sẽ được bật.

Tính năng​

• Tự động chuyển đổi giữa số lượng style không giới hạn
• Các style không được liệt kê sẽ không bị ảnh hưởng bởi tính năng tự động chuyển đổi nhưng có thể được chọn theo cách thủ công
• Công tắc chuyển đổi "sáng sang tối" do người dùng điều khiển có sẵn để ghi đè và khóa cài đặt giao diện người dùng theo cách thủ công
• Không cần cùng một số style sáng và tối -> sử dụng quan hệ đa đường:
  • nếu không có "last style_id", thì kết quả phù hợp đầu tiên trong danh sách bắt đầu sẽ thắng (xem ví dụ ở trên: nhập ở style mặc định -> 1, chuyển đổi -> 2)
  • nếu "last style_id" khả dụng (và phù hợp với tùy chọn trình duyệt), "last style_id" sẽ thắng (xem ví dụ ở trên: nhập ở style đặt trước -> 3, chuyển đổi -> 1, chuyển đổi -> 3)
• Ghi đè thủ công nâng cao cài đặt trước tự động bật tắt bằng cách sử dụng "last style_id" (xem ví dụ ở trên: nhập ở style mặc định -> style 1 đang hoạt động, chuyển đổi -> 2, chọn style 6 theo cách thủ công, -> chuyển về 1, -> chuyển về 6 , -> vòng lặp ổn định)
• Trình xử lý sự kiện để phối màu và hiển thị ưu tiên, chủ động chuyển đổi sáng/tối mà không cần người dùng thao tác

Hạn chế đã biết

• XenForo lưu trữ style_id hoạt động cuối cùng cho người dùng đã đăng nhập phía máy chủ.
  • Tác dụng: Việc sử dụng song song nhiều thiết bị/trình duyệt đã đăng nhập trên cùng một tài khoản người dùng sẽ đẩy style_id hoạt động cuối cùng vĩnh viễn ngược lại tất cả các thiết bị/trình duyệt (vô tình) có các tùy chọn sáng/tối khác nhau.
  • Giải pháp: xin lỗi, chưa có (KIS).
• Tải lại trang để chuyển đổi phong cách chi phí lưu lượng truy cập và thời gian (xin lỗi).
• Bạn không thể chọn các style được liệt kê để chuyển đổi tự động theo cách thủ công nếu chúng không phù hợp với tùy chọn của trình duyệt.
  • Tác dụng: Cơ chế bật tắt tự động lật ngược style ngay lập tức.
  • Giải pháp: Thêm các style con không nằm trong định nghĩa bật tắt tự động, nên đặt tên thích hợp cho các style. (được giải quyết với 0.4.0 -> cơ chế khóa style mới)
• Mở một nhóm tab được đánh dấu trang gồm một số trang XenForo cùng một lúc có thể gây ra tình trạng chạy đua dẫn đến nội dung tab được tạo style khác nhau. (được giải quyết với 0.4.0 -> trigger/kiểm tra khả năng hiển thị của trang)

Cài đặt

• Phải có ít nhất 2 style được bật.
• Tải xuống và giải nén package.
• Tải nội dung của thư mục /upload lên thư mục XenForo:
  • /js/jsdmat
  • /js/jsdmat/jsdmat.js
  • /js/jsdmat/jsdmat.min.js
• Chuẩn bị code gọi template đã cho (tệp txt)
  • Chèn các kết hợp style_id sáng và tối nền tảng của bạn vào lệnh gọi jsdmat.addLD.
  • Kiểm tra kỹ xem có cùng số phần tử trong cả hai danh sách hay không.
• Sửa đổi template PAGE_CONTAINER cho tất cả các style (gốc) bị ảnh hưởng:
  • Thêm code gọi đã chuẩn bị vào cuối PAGE_CONTAINER.
• Bản sửa đổi được đề xuất của template style_chooser cho tất cả các style (gốc) bị ảnh hưởng:
  • Thêm các đoạn code đã chuẩn bị sẵn vào cả hai thẻ <a>, lưu ý rằng chúng hơi khác nhau.
  • Việc sửa đổi này chỉ cần thiết nếu người dùng có thể lựa chọn style. Nếu không sửa đổi style_chooser, jsdmat sẽ tự động chuyển đổi hoàn toàn các kết hợp style_id đã cho theo cài đặt giao diện người dùng (như <0.4.0).
• Mục nhập điều hướng công khai tùy chọn để cung cấp công tắc chuyển đổi sáng - tối do người dùng điều khiển. Lệnh gọi JS cũng có thể được sử dụng ở các vị trí khác. Hãy tự do sửa đổi!

​

Chúc các bạn thành công.

Nguồn: xenforo.com​