Điểm:0

How would one make a variable in a module's JS editable via admin menu?

lá cờ cn

Say I have a library that is attached to a page that brings along with it some JavaScript. For this example, let's say the JavaScript has a variable which is the path to an image that the JS displays. This would look something like:

variable.setAttribute('src', drupalSettings.path.baseUrl + pathToPicture)

Now let's say I want to have pathToPicture configurable via Admin Menu so that one may add their own path to their own picture, instead of using the one that is defaulted to.

How might one go about accomplishing this task? I know the basics of setting up a form and adding it to the admin menu, but I don't know enough to complete something like this on my own. If there is existing documentation on this sort of procedure, I'd appreciate being directed towards it. Otherwise any ideas are welcome. Thanks!

leymannx avatar
lá cờ ne
Ví dụ, bạn có thể chuyển các biến từ PHP sang JS (drupalSettings) từ hook tiền xử lý. Vì vậy, hãy lưu trữ hình ảnh của bạn ở đâu đó, có thể là hồ sơ người dùng, sau đó xử lý trước vào mảng kết xuất nơi bạn cần JS, lấy người dùng hiện tại, lấy hình ảnh của họ, lấy URL hình ảnh và chuyển nó tới drupalSettings.
No Sssweat avatar
lá cờ ua
Đây là một ý tưởng: Vui lòng cung cấp mã biểu mẫu của bạn và mã hook quy trình nếu bạn đã có.
apaderno avatar
lá cờ us
Vì câu hỏi có nội dung *để người ta có thể thêm đường dẫn của riêng họ vào phần ảnh của riêng họ*, bạn sẽ làm như thế nào để đạt được điều đó và cách sử dụng mã JavaScript sẽ biến điều đó thành hiện thực? Với mã được hiển thị trong câu trả lời, bạn nhận được một giá trị được chuyển từ PHP sang JavaScript, nhưng người dùng sẽ thay đổi giá trị đó như thế nào nếu không có quyền truy cập vào biểu mẫu cài đặt? Nếu họ có quyền truy cập vào biểu mẫu, họ chỉ cần gửi biểu mẫu.
apaderno avatar
lá cờ us
Nếu tôi muốn cho phép người dùng cuối đặt một giá trị mà sau đó được sử dụng từ mô-đun của tôi, tôi sẽ tạo một biểu mẫu mà họ có thể truy cập để đặt giá trị đó. Mã của tôi sau đó sẽ sử dụng giá trị đó khi cần thiết. Tôi sẽ không cần phải viết mã JavaScript để đạt được điều đó.
Điểm:2
lá cờ de

Hãy tưởng tượng một mô-đun có tên là Hình ảnh có thể định cấu hình. Bạn muốn đường dẫn đến hình ảnh có thể được định cấu hình thông qua giao diện người dùng quản trị. Đường dẫn là một chuỗi, vì vậy điều đầu tiên cần làm là xác định cấu hình cho đường dẫn. Trong trường hợp này, đối tượng cấu hình sẽ là configable_picture.settings đường_đến_hình.

configurable_picture/config/schema/configurable_picture.schema.yml:

configable_picture.settings:
  gõ: config_object
  nhãn: 'Cài đặt hình ảnh có thể định cấu hình'
  lập bản đồ:
    đường_đến_hình:
      loại: chuỗi
      nhãn: 'Đường dẫn đến Ảnh'

Bước tiếp theo là tạo một biểu mẫu cấu hình cho phép bạn chỉnh sửa mục cấu hình được xác định trong lược đồ trên. Đây là tài liệu về cách tạo các biểu mẫu cấu hình: https://www.drupal.org/docs/drupal-apis/configuration-api/working-with-configuration-forms

Với các bước trên, bạn sẽ có thể lưu đường dẫn đến hình ảnh trên trang cấu hình mà bạn đã tạo.

Cần có hai bước để cung cấp cài đặt cấu hình đó cho tệp JavaScript. Đầu tiên là thêm một phụ thuộc vào lõi/drupalSettings vào thư viện JS của bạn.

configurable_picture/configurable_picture.libraries.yml:

hình_hình:
  js:
    đường dẫn/đến/file.js: {}
  phụ thuộc:
    - lõi/drupalSettings

Sau đó, bạn đính kèm thư viện và cài đặt vào biểu mẫu:

$form['#attached']['library'][] = 'configurable_picture/picture_form';
// Khóa configurableSettings sẽ trở thành không gian tên trong 
// đối tượng drupalSettings trong tệp JS.
$form['#attached']['drupalSettings']['configurablePicture'] = [
  // Đặt đường dẫn dựa trên giá trị được lưu trong cấu hình:
  'pathToPicture' => \Drupal::config('configurable_picture')->get('path_to_picture'),
];

Sau đó, path/to/file.js có thể truy cập đối tượng cài đặt như thế này:

(hàm ($, Drupal, drupalSettings) {

  hàm getPathToPicture() {
    trả về drupalSettings.configurablePicture.pathToPicture;
  }

  // Hoặc, từ đối tượng cài đặt trong Drupal.behaviors:
  Drupal.behaviors.configurablePicture = {
    đính kèm: chức năng (bối cảnh, cài đặt) {
      console.log(settings.configurablePicture.pathToPicture);
    }
  };
}(jQuery, Drupal, drupalSettings));
Joseph avatar
lá cờ cn
Cám ơn vì cái này. Trước đây tôi đã sử dụng drupalSettings để thực hiện loại giao tiếp này nên tôi nghĩ rằng phần đó sẽ dễ dàng. Tôi đã cập nhật bài đăng gốc của mình để cho biết cấu trúc tệp hiện tại của tôi trông như thế nào (trừ tệp JS), bởi vì mặc dù tôi tin rằng mình đã làm theo đúng hướng dẫn nhưng không có biểu mẫu nào xuất hiện trong trang cấu hình. Bạn có thấy điều gì rõ ràng là sai với mã của tôi không?
Jaypan avatar
lá cờ de
Tôi đã trả lời câu hỏi ban đầu của bạn, về cách đưa một biến cấu hình ra JS. Vấn đề của bạn với biểu mẫu cấu hình không hoạt động là một chủ đề mới và bạn nên mở một chủ đề mới cho chủ đề đó. Câu trả lời của Drupal là diễn đàn một câu hỏi một câu trả lời, câu hỏi mới có chủ đề mới.
Jaypan avatar
lá cờ de
Ngoài ra, bạn nên đăng mã thực của mình, thay vì thay thế mọi thứ bằng mymodule. Quá dễ mắc lỗi chính tả khi bạn không hiển thị mã thực tế.
Joseph avatar
lá cờ cn
Được rồi, xin lỗi, tôi còn rất mới với vấn đề này và lo lắng về việc làm hỏng diễn đàn với nhiều câu hỏi, đặc biệt nếu chúng có các giải pháp đơn giản.
Jaypan avatar
lá cờ de
Tất cả đều tốt - tất cả chúng ta đều trải qua điều giống hệt như bạn đã làm khi chúng ta đến đây! Chào mừng bạn đến với Drupal Answers và chúng tôi ở đây để trả lời các câu hỏi về Drupal, vì vậy hãy thoải mái mở các chủ đề để đặt câu hỏi.
Joseph avatar
lá cờ cn
Xin chào @Jaypan, tôi có một câu hỏi về câu trả lời của bạn. .pathToFile là gì? Tôi không thể tìm thấy tài liệu về nó hoặc làm cho nó hoạt động. Tôi nhận được lỗi này trong bảng điều khiển: Không thể đọc các thuộc tính không xác định (đọc 'pathToFile'). Tôi có hiểu lầm những gì bạn đang làm?
Jaypan avatar
lá cờ de
Bạn phải thay thế nó bằng đường dẫn thực đến tệp JS của bạn. Vì vậy, nếu bạn có `file.js` trong thư mục `js` của mô-đun, bạn sẽ đặt `js/file.js: {}`.
Joseph avatar
lá cờ cn
Vâng, xin lỗi, tôi hiểu rồi, ý tôi là khi bạn sử dụng nó ở đây, ví dụ: `console.log(settings.configurablePicture.pathToFile);` .pathToFile có được thay thế bằng đường dẫn đến tệp JS không? Điều đó có vẻ kỳ lạ?
Jaypan avatar
lá cờ de
Chính xác. `settings` chứa cài đặt cho `context` hiện tại. Đây là hai biến được truyền cho phương thức `.attach` của Drupal. Khi tải tài liệu ban đầu, `context` là toàn bộ tài liệu và `settings` là toàn bộ đối tượng `drupalSettings`. Nhưng các hành vi Drupal cũng được gọi khi các phần tử mới được chèn vào DOM bằng Ajax và `settings` chứa cài đặt cho `context` mới. Bạn vẫn có thể tham khảo `drupalSettings`, tuy nhiên, nó chứa cả cài đặt từ lần tải trang ban đầu, cũng như tải ajax, khiến nó ít được sắp xếp hợp lý hơn.
Jaypan avatar
lá cờ de
Tôi nên thêm, `settings.configurablePath.pathToFile` là những gì được thay thế bằng đường dẫn tệp. Giả sử đó là một đường dẫn như bạn đã mô tả, bạn sẽ cần thêm gốc Drupal: `settings.path.baseUrl + settings.configurablePath.pathToFile`.
Joseph avatar
lá cờ cn
Vì vậy, đây là những gì nó được cho là trông như thế nào? `console.log(drupalSettings.path.baseUrl + settings.pathToSound.js/configurablePicture.js);`? Điều đó vẫn không có ý nghĩa gì đối với tôi, tại sao tôi lại liên kết tệp JS khi tôi đã ở trong tệp JS?
Jaypan avatar
lá cờ de
Không, đường dẫn đó sẽ được thay thế bằng đường dẫn đến ảnh chứ không phải tệp JS. Bạn đúng là mã này nằm trong tệp JS. Bất kỳ giá trị nào bạn đã nhập vào biểu mẫu trên trang cấu hình sẽ nằm trong `ssettings.configurablePath.pathToPicture`
Jaypan avatar
lá cờ de
Ngoài ra, lệnh gọi tới console.log chỉ đơn giản là để bạn có thể thấy giá trị trong bảng điều khiển JS của mình, bạn không cần nó để thực thi mã của mình. Đó là một công cụ sửa lỗi. Phần duy nhất có liên quan là `settings.configurablePath.pathToFile`
Joseph avatar
lá cờ cn
Được rồi tôi có thể thấy sự nhầm lẫn ở đâu. Tôi nghĩ rằng tôi phải thay thế phần `.pathToFile` của `settings.configurablePath.pathToFile` thành một phần khác. Tôi thấy những gì bạn đang nói bây giờ. Tuy nhiên, việc sử dụng `settings.configurablePath.pathToFile` gây ra lỗi này cho tôi: `drupal.js?v=9.3.9:16 Uncaught TypeError: Cannot read properties of undefined (reading 'pathToFile')` vì tôi không nghĩ rằng bạn ví dụ pathToFile có bao giờ được chuyển đến tệp JS qua tệp đính kèm không? Đó có phải là lý do tại sao nó không hoạt động?
Jaypan avatar
lá cờ de
Xin lỗi, `pathToFile` là lỗi đánh máy. Nó được cho là `pathToPicture`. Tôi sẽ cập nhật bài viết.
Joseph avatar
lá cờ cn
Tôi tìm ra, cảm ơn bạn đã giúp đỡ của bạn. Tôi nghĩ rằng tôi cũng có thể nhầm lẫn giữa configurable_picture và configurablePicture trong tệp đính kèm biểu mẫu, nhưng tôi không chắc lắm. Câu hỏi cuối cùng về mã của bạn; thư viện và cài đặt bạn đang đính kèm vào biểu mẫu sẽ đi vào buildForm, nhưng submitForm sẽ trông như thế nào? PathToPicture của tôi không được giao tiếp chính xác giữa biểu mẫu và tệp JS
Jaypan avatar
lá cờ de
Tôi không hiểu câu hỏi. Thư viện được đính kèm - điều này có liên quan gì đến trình xử lý gửi?

Đăng câu trả lời

Hầu hết mọi người không hiểu rằng việc đặt nhiều câu hỏi sẽ mở ra cơ hội học hỏi và cải thiện mối quan hệ giữa các cá nhân. Ví dụ, trong các nghiên cứu của Alison, mặc dù mọi người có thể nhớ chính xác có bao nhiêu câu hỏi đã được đặt ra trong các cuộc trò chuyện của họ, nhưng họ không trực giác nhận ra mối liên hệ giữa câu hỏi và sự yêu thích. Qua bốn nghiên cứu, trong đó những người tham gia tự tham gia vào các cuộc trò chuyện hoặc đọc bản ghi lại các cuộc trò chuyện của người khác, mọi người có xu hướng không nhận ra rằng việc đặt câu hỏi sẽ ảnh hưởng—hoặc đã ảnh hưởng—mức độ thân thiện giữa những người đối thoại.