---
myst:
  html_meta:
    "description": ""
    "property=og:description": ""
    "property=og:title": ""
    "keywords": ""
---

# Exercise 7: Pattern Wrapping A 3rd Party Library

```{warning}
This exercise requires a working buildout using a fork of the `collective.jstraining` package.
```

In this exercise, we will be walking through wrapping the tablesorter JavaScript library into a pattern.

You will be working in the `exercise7` directory of the `collective.jstraining` package.

## Add Your Pattern File

First off, in your `exercise7/static` directory, add a file named `pattern.js`.

Use this file to build your pattern.
This example will simply load and initialize the tablesorter JavaScript code.

```javascript
/* global require */

require([
  'jquery',
  'pat-base',
  'tablesorter'
], function($, Base) {
  'use strict';

  /* combining bundle and pattern in same file this example */

  Base.extend({
    name: 'tablesorter',
    trigger: '.pat-tablesorter',
    parser: 'mockup',
    defaults: {
    },
    init: function() {
      var that = this;
      that.$el.tablesorter();
    }
  });

});
```

Notice in this example how we are not using `define` for this pattern.
In this example, we are defining our pattern right inside what will be our bundle.

`tablesorter` will be our registered 3rd party library include.

## Register Static Resource Directory

Register the static directory we just placed our script into.
To register it, you need to add ZCML registration for the static directory your script is in.

Add this to the `exercise7/configure.zcml` file

```xml
<plone:static
    directory="static"
    type="plone"
    name="exercise7"
    />
```

## Register Your Bundle

Registering your bundle is done by adding Generic Setup XML configuration to the Plone registry.

This is done in the `registry.xml` file in the `profiles/default` directory.

### Tablesorter

The resource is registered exactly the same as in Exercise 1.

```xml
<records prefix="plone.resources/tablesorter"
         interface='Products.CMFPlone.interfaces.IResourceRegistry'>
  <value key="js">++plone++exercise7/jquery.tablesorter.min.js</value>
</records>
```

### Bundle Resource

Our pattern is a bundle-able resource since it uses the `require` function instead of the `define` function.

```xml
<records prefix="plone.resources/exercise7"
         interface='Products.CMFPlone.interfaces.IResourceRegistry'>
    <value key="js">++plone++exercise7/pattern.js</value>
    <value key="css">
      <element>++plone++exercise7/pattern.less</element>
    </value>
</records>
```

### Bundle

Finally, let us create our bundle registration

```xml
<records prefix="plone.bundles/exercise7"
         interface='Products.CMFPlone.interfaces.IBundleRegistry'>
  <value key="resources">
    <element>exercise7</element>
  </value>
  <value key="merge_with">default</value>
  <value key="enabled">True</value>
  <value key="jscompilation">++plone++exercise7/exercise7-compiled.min.js</value>
  <value key="csscompilation">++plone++exercise7/exercise7-compiled.css</value>
  <value key="last_compilation">2016-10-04 00:00:00</value>
  <value key="stub_js_modules">
    <element>jquery</element>
    <element>pat-base</element>
  </value>
</records>
```

## Installation

At this point, we have all the files necessary to run the pattern.

1. Start up your Plone instance
2. Install the `Exercise 7` add-on

## Running

At this point, we have no compiled version of the code that we are running with, so our code does nothing.

1. Go into {menuselection}`Site Setup --> Resource Registries`
2. Check {guilabel}`Development Mode`
3. Select to develop JavaScript and CSS for the `exercise7` bundle
4. Click {guilabel}`Save`

This should load your JavaScript and LESS files now.
However, we do not have any elements with the `pat-exercise7` class assigned to them.

It is up to you how to apply the pattern class to an element of your choice.
A couple options available to you are:

1. use TinyMCE source view and add `class="pat-tablesorter"` onto any `table` tag.
   You need to use `th` tags for the top row in your header for tablesorter to know to do anything.
2. customize the theme on your site and add it to an element in your theme file or use a diazo rule to dynamically add the class to an element.

## Production

To build our bundle, we will utilize the `plone-compile-resources` script that ships with Plone.

```{warning}
If you are not running a ZEO setup, you will need to shut down your Plone instance since the ZODB in this mode does not allow multiple processes to access it at the same time.
```

An example command will look like this

```shell
./bin/plone-compile-resources --site-id=Plone --bundle=exercise7
```

Once this command finishes, your bundle is built and will be deployed with your package.