Move document-chooser to client, and refactor to expose a js API

client/src/entrypoints/documents/document-chooser.js

@@ -0,0 +1,74 @@
+import $ from 'jquery';
+
+function createDocumentChooser(id) {
+  const chooserElement = $('#' + id + '-chooser');
+  const docTitle = chooserElement.find('.title');
+  const input = $('#' + id);
+  const editLink = chooserElement.find('.edit-link');
+  const chooserBaseUrl = chooserElement.data('chooserUrl');
+
+  /*
+  Construct initial state of the chooser from the rendered (static) HTML and arguments passed to
+  createDocumentChooser. State is either null (= no document chosen) or a dict of id, title and
+  edit_link.
+
+  The result returned from the document chooser modal (see get_document_result_data in
+  wagtail.documents.views.chooser) is a superset of this, and can therefore be passed directly to
+  chooser.setState.
+  */
+  let state = null;
+  if (input.val()) {
+    state = {
+      id: input.val(),
+      edit_link: editLink.attr('href'),
+      title: docTitle.text(),
+    };
+  }
+
+  /* define public API functions for the chooser */
+  const chooser = {
+    getState: () => state,
+    getValue: () => state && state.id,
+    setState: (newState) => {
+      if (newState) {
+        input.val(newState.id);
+        docTitle.text(newState.title);
+        chooserElement.removeClass('blank');
+        editLink.attr('href', newState.edit_link);
+      } else {
+        input.val('');
+        chooserElement.addClass('blank');
+      }
+
+      state = newState;
+    },
+    openChooserModal: () => {
+      // eslint-disable-next-line no-undef, new-cap
+      ModalWorkflow({
+        url: chooserBaseUrl,
+        // eslint-disable-next-line no-undef
+        onload: DOCUMENT_CHOOSER_MODAL_ONLOAD_HANDLERS,
+        responses: {
+          documentChosen: (result) => {
+            chooser.setState(result);
+          }
+        }
+      });
+    },
+
+    clear: () => {
+      chooser.setState(null);
+    },
+  };
+
+  $('.action-choose', chooserElement).on('click', () => {
+    chooser.openChooserModal();
+  });
+
+  $('.action-clear', chooserElement).on('click', () => {
+    chooser.clear();
+  });
+
+  return chooser;
+}
+window.createDocumentChooser = createDocumentChooser;

client/webpack.config.js

@@ -1,7 +1,10 @@
 const path = require('path');
 
 // Generates a path to the output bundle to be loaded in the browser.
-const getOutputPath = (app, filename) => path.join('wagtail', app, 'static', `wagtail${app}`, 'js', filename);
+const getOutputPath = (app, filename) => {
+  const appLabel = (app === 'documents' ? 'wagtaildocs' : `wagtail${app}`);
+  return path.join('wagtail', app, 'static', appLabel, 'js', filename);
+};
 
 // Mapping from package name to exposed global variable.
 const exposedDependencies = {
@@ -43,7 +46,10 @@ module.exports = function exports() {
     ],
     images: [
       'image-chooser',
-    ]
+    ],
+    documents: [
+      'document-chooser',
+    ],
   };
 
   const entry = {};

wagtail/documents/static_src/wagtaildocs/js/document-chooser.js

@@ -1,26 +0,0 @@
-function createDocumentChooser(id) {
-    var chooserElement = $('#' + id + '-chooser');
-    var docTitle = chooserElement.find('.title');
-    var input = $('#' + id);
-    var editLink = chooserElement.find('.edit-link');
-
-    $('.action-choose', chooserElement).on('click', function() {
-        ModalWorkflow({
-            url: chooserElement.data('chooserUrl'),
-            onload: DOCUMENT_CHOOSER_MODAL_ONLOAD_HANDLERS,
-            responses: {
-                documentChosen: function(docData) {
-                    input.val(docData.id);
-                    docTitle.text(docData.title);
-                    chooserElement.removeClass('blank');
-                    editLink.attr('href', docData.edit_link);
-                }
-            }
-        });
-    });
-
-    $('.action-clear', chooserElement).on('click', function() {
-        input.val('');
-        chooserElement.addClass('blank');
-    });
-}