@patternslib/patternslib

Patterns

Patterns is a toolkit that enables designers to build rich interactive prototypes without the need for writing any JavaScript. All functionality is triggered by classes and other attributes in the HTML, without abusing the HTML as a programming language. Accessibility, SEO and well structured HTML are core values of Patterns.

Changelog

See the Changelog at GitHub.

Browser support

Patterns aims to support at least the two latest major versions of all popular browsers:

• Apple Safari
• Google Chrome
• Firefox

Other browser version may work too, but are not actively tested against.

Development installation requirements

Make sure, you have these requirements installed:

- Node.js ( https://nodejs.org/en/ )
- yarn ( https://yarnpkg.com/ )
- make
- git

On OSX you need gnu-tar instead of tar (GNU tar supports the --transform option). Please install it with e.g. brew install gnu-tar.

Development installation

The following commands will generate a bundle.min.js file in the dist directory which contains Patterns and all its dependencies:

git clone git://github.com/Patternslib/Patterns.git
cd Patterns
make

Alternatively, you can download a bundle at patternslib.com.

Layout

The individual patterns are located in their own folders in ./src/pat/.

Each pattern folder contains some or all of the following files:

• index.html which contains HTML markup that shows a demonstration of the pattern.
• documentation.md which is a Markdown file that documents the pattern's purpose, how to use it and how to configure it.
• A javascript file which implements the pattern's functionality.
• A Sass (.scss) file which provides the CSS associated with the pattern.

To generate CSS files from the pattern's included Sass files, type make all_css and the css files will be generated in the same location as the Sass files.

You'll need to have a Sass compiler installed.

How to demo patterns

To demo the patterns, simply type make serve to install the necessary dependencies and to start a simple Node.js HTTP server.

You can then visit http://localhost:4001 to see a site with demos.

Alternatively, patterns can also be demoed through the Patternslib.com website, which is open-source. The code and setup instructions are here.

Contributing fixes

To develop on Patterns, clone the repository and set it's push-url to your fork:

git remote set-url --push origin <url_to_your_fork>

Create a branch for the feature/bug you are working on:

git checkout -b <feature>

For inclusion use either a GitHub pull request or create a ticket with a url to your external repository.

Please read our contribution notes and read our code style guide.

Running tests

The simplest way to run the tests are to use make:

make check

This will install all required npm and bower packages and run the tests.

Debugging tests

Eventually add to tests:

import "core-js/stable";
import "regenerator-runtime/runtime";

Then:

node --inspect-brk node_modules/.bin/jest --runInBand ./src/pat/tooltip/tooltip.test.js

Connect in chrome via:

chrome://inspect

You can pass Jest any parameter it accepts, like -t TESTPATTERN::

node --inspect-brk node_modules/.bin/jest --runInBand ./src/pat/tooltip/tooltip.test.js -t will.be.closed.when

Enabling log messages

To facilitate debugging you can change the default log level through the URL query string by adding loglevel options.

• http://www.example.com/?loglevel=DEBUG changes the default log level to DEBUG.
• http://www.example.com/?loglevel-inject=DEBUG changes the log level for just the inject pattern to DEBUG.
• http://www.example.com/?loglevel=ERROR&loglevel-inject=INFO changes the standard log level error, but enables messages at the INFO level for the inject pattern.

Bundle build analyzation

https://survivejs.com/webpack/optimizing/build-analysis/ https://formidable.com/blog/2018/finding-webpack-duplicates-with-inspectpack-plugin/

Build the stats.json file:

yarn build:stats

Check dependency tree and why which package was included: https://www.npmjs.com/package/whybundled

whybundled stats.json

Visualize dependency tree and analyze bundle size: https://www.npmjs.com/package/webpack-bundle-analyzer

webpack-bundle-analyzer stats.json

Organisations and projects which use Patternslib

• Overstroom ik?, a website which informs Dutch citizens of their risk of flooding. It was introduced and highly praised by the Dutch minister of infrastructure and environment, Melanie Schultz.
• OiRA, an online risk assessment tool, created for the Occupational Health and Safety Agency (OSHA) of the European Union.
• Staralliance uses Patternslib in their intranet.
• Plone CMS via Mockup, which is built upon Patternslib.
• Quaive Intranet uses Patternslib.

Interactive HTML/CSS prototypes made with Patternslib

• The Patternslib.com website uses Patternslib and is based upon a prototype, which can be found here.

Changelog

9.9.0-alpha.0 (2023-04-17)

Features

• core basepattern: Allow to specify parser options on the pattern. (eb66159)

• core basepattern: Throw pre-init.PATTERNNAME.patterns event. (cacb743)

  Throw a bubbling pre-init.PATTERNNAME.patterns event before initializing the event for new class-based patterns.

• core base: Throw pre-init.PATTERNNAME.patterns event. (e9a8f2f)

  Throw a bubbling pre-init.PATTERNNAME.patterns event before initializing the event for old prototype based patterns.

• core dom: Add get_scroll_x and get_scroll_y helper methods to get the horizontal/vertical scrolling position. (a3ecf93)

• core dom: Implement get_visible_ratio to calculate the visible ratio between an element and a container. (622d5e2)

• core utils: add parseLength method for parsing px and % lengths. (95c16b8)

• core utils: Add threshold_list helper for intersection observers. (52d9ecf)

• core utils: debouncer - Add postpone option for callback to be run after all debounce calls or in between. (12c980b)

  If "postpone" is set to "true" (the default and previous behavior) the callback will only be called after no more debouncer calls are done for the given timeout. If "postpone" is set to "false" the callback will be run after the timeout has passed and calls to "debouncer" in between are ignored.

• pat navigation: Add scroll-marker functionality. (fb8eb82)

  The pattern now sets current and in-view classes on the navigation and the content when scrolling to hash-link targets.

• pat scroll-marker: Add pattern to set navigation classes based on the scroll position. (6483649)

  The new scroll-marker pattern allows you to set classes on the navigation and content elements for hash-links. If a content section with a hash id and a corresponding navigation link with the same hash-url is visible, the navigation and content section are marked with CSS classes.

Maintenance

• pat inject: Use dom.find_scroll_container instead jQuery :scrollable selector. (14af661)

• pat navigation: Don't do option grouping. There will some options be added where grouping get's in the way. (3c55864)

• pat navigation: Switch to class based pattern. (5b0fc43)

• pat scroll-box: Cleanup code. (148f79a)

• pat scroll-box: Use dom.scroll_y instead of own implementation. (e5a4b24)

• pat scroll: Code cleanup. (a66a9f8)

• pat-inject: Remove obsolete hooks option. (411653d)

  The hooks option allowed to throw custom events after successful injection. It was a multi-value argument but only allowed "raptor" as value. Raptor was a WYSIWYG editor which has not been further developed since 10 years and which we're not supporting anymore since quite some time. Thus this option could be safely removed and this change is not a breaking change.

If you need to react on events, see the documented event list in pat-inject's documentation.

• pat-inject: Remove obsolete raptor-ui trigger. (ae01e20)

  Remove the ".raptor-ui .ui-button.pat-inject" trigger selector which was for raptor WYSIWYG HTML editor support. This editor isn't actively developed since almost 9 years and not supported anymore. This is not a breaking change.

• Upgrade dependencies. (15b6adb)

• Upgrade luxon to 3.3.0. (b19f1e5)

  The Module federation warning "Unable to find required version" is fixed since webpack v5.78.0 for modules which do package.json self-referencing.

Ref:

• https://github.com/webpack/webpack/issues/16683
• https://github.com/webpack/webpack/pull/16685