fix(pat structureupdater): re-enable pattern and cleanup README

src/pat/structure-updater/README.md

@@ -33,86 +33,5 @@ This can be done by adding options for that pattern via the resource registry co
  </value>
  </record>
 
-> For the `titleSelector` and `descriptionSelector` you have to provide valid JQuery selectors.
+> For the `titleSelector` and `descriptionSelector` you have to provide valid CSS selectors.
 > Like with any CSS selector you can also specify mutliple selectors by seperating them via a comma sign.
-
-### Pattern overloading
-
-If you need some more control, you can overload the pattern and provide your own.
-
-The pattern is registered in the RequireJS configuration in `mockup/js/config.js` under the name `mockup-patterns-structureupdater` and under the path `patterns/structure/pattern-structureupdater`.
-
-If you provide another path you can point it to your own implementation.
-
-This can be easily done in Plone, where the RequireJS configuration are `plone.app.registry` entries.
-
-For example, in your project's `registry.xml` profile, add this:
-
- <?xml version="1.0"?>
- <registry i18n:domain="plone" xmlns:i18n="http://xml.zope.org/namespaces/i18n">
-
-  <records
-  prefix="plone.resources/mockup-patterns-structureupdater"
-  interface='Products.CMFPlone.interfaces.IResourceRegistry'>
-  <value key="js">++plone++my.project.resources/mockup-patterns-structureupdater.js</value>
-  </records>
-
- </registry>
-
-In that example the custom implementation of the structure updater pattern lives in a `plone.resource` directory named `my.project.resources`.
-This is configured in the project's `configure.zcml`:
-
- <?xml version="1.0"?>
- <configure
-  xmlns="http://namespaces.zope.org/zope"
-  xmlns:plone="http://namespaces.plone.org/plone">
-  <plone:static
-  directory="resources"
-  name="my.project.resources"
-  type="plone"
-  />
- </configure>
-
-The custom implementation `mockup-patterns-structureupdater.js` looks like so:
-
- define([
-  'pat-base',
- ], function(Base) {
-  'use strict';
-  var Pattern = Base.extend({
-  name: 'structureupdater2',
-  trigger: '.template-folder_contents',
-  parser: 'mockup',
-  init: function() {
-  $('body').on('context-info-loaded', function (e, data) {
-  // Do something
-  $('.breadcrumb').html(data.object && '<li>' + data.object.Title + '</li>');
-  }.bind(this));
-  }
-  });
-  return Pattern;
- });
-
-You probably want to include the original behavior.
-If you have given the pattern another name than the original pattern, you can just let RequireJS depend on the original pattern and it will be registered and triggered as normal.
-We can include the original pattern via the `mockup-patterns-structure-url` path and incldue then the filename.
-The code looks then like so:
-
- define([
-  'pat-base',
-  'mockup-patterns-structure-url/pattern-structureupdater',
- ], function(Base) {
-  'use strict';
-  var Pattern = Base.extend({
-  name: 'structureupdater2', // Give it another name than the original pattern
-  trigger: '.template-folder_contents',
-  parser: 'mockup',
-  init: function() {
-  $('body').on('context-info-loaded', function (e, data) {
-  // Do something
-  $('.breadcrumb').html(data.object && '<li>' + data.object.Title + '</li>');
-  }.bind(this));
-  }
-  });
-  return Pattern;
- });

src/pat/structure-updater/structure-updater.js

@@ -11,20 +11,17 @@ export default Base.extend({
  },
 
  init: function () {
- $("body").on(
- "context-info-loaded",
- function (e, data) {
- if (this.options.titleSelector) {
- $(this.options.titleSelector, this.$el).html(
- (data.object && data.object.Title) || " "
- );
- }
- if (this.options.descriptionSelector) {
- $(this.options.descriptionSelector, this.$el).html(
- (data.object && data.object.Description) || " "
- );
- }
- }.bind(this)
- );
+ $("body").on("context-info-loaded", (e, data) => {
+ if (this.options.titleSelector) {
+ $(this.options.titleSelector, this.$el).html(
+ (data.object && data.object.Title) || " "
+ );
+ }
+ if (this.options.descriptionSelector) {
+ $(this.options.descriptionSelector, this.$el).html(
+ (data.object && data.object.Description) || " "
+ );
+ }
+ });
  },
 });

src/pat/structure-updater/structure-updater.test.js

@@ -0,0 +1,39 @@
+import "./structure-updater";
+import $ from "jquery";
+import registry from "@patternslib/patternslib/src/core/registry";
+import utils from "@patternslib/patternslib/src/core/utils";
+
+describe("AutoTOC", function () {
+ beforeEach(function () {
+ document.body.innerHTML = `
+ <div class="template-folder_contents" data-pat-structureupdater='{
+ "titleSelector": "h1",
+ "descriptionSelector": "p.lead"
+ }'>
+ <h1>Title</h1>
+ <p class="lead">Description</p>
+ </div>
+ `;
+
+ this.$el = $(".pat-autotoc");
+ });
+ afterEach(() => {
+ document.body.innerHTML = "";
+ });
+ it("change title and description on event", async function () {
+ expect(document.querySelectorAll("nav").length).toEqual(0);
+
+ registry.scan(document.body);
+ await utils.timeout(1);
+
+ $(document.body).trigger("context-info-loaded", {
+ "object": {
+ "Title": "New Title",
+ "Description": "Changed Description"
+ }
+ })
+
+ expect(document.querySelector("h1").innerHTML).toEqual("New Title");
+ expect(document.querySelector("p.lead").innerHTML).toEqual("Changed Description");
+ });
+});

src/patterns.js

@@ -41,6 +41,7 @@ import "./pat/search/search";
 import "./pat/select2/select2";
 import "./pat/sortable/sortable";
 import "./pat/structure/structure";
+import "./pat/structure-updater/structure-updater";
 import "./pat/textareamimetypeselector/textareamimetypeselector";
 import "./pat/tinymce/tinymce";
 import "./pat/toggle/toggle";