Allow dynamic setting of publicpath, fix language loading error in pat-calendar.

.travis.yml

@@ -1,7 +1,5 @@
-dist: xenial
 language: node_js
 node_js:
     - lts/*
-before_script: travis_retry make stamp-yarn
+cache: yarn
 script: make check
-sudo: required

CHANGES.md

@@ -25,6 +25,7 @@
 -   Implenent lazy loading for external libraries via dynamic imports. Leads to significantly reduced bundle sizes.
 -   Upgrade pat-calendar to use lates fullcalendar version (5.3.0).
 -   pat tooltip: Use tippy v6 based implementation.
+-   Allow overriding the public path from outside via the definition of a ``window.__patternslib_public_path__`` global variable.
 
 ### Technical
 
@@ -47,6 +48,11 @@
 -   Build infrastructure: Build into /dist and cleanup before building.
 -   utils: Add `isIE` method to detect Internet Explorer browsers.
 
+### Fixes
+
+-   pat calendar: Fix language loading error "Error: Cannot find module './en.js'"
+-   pat depends, pat auto suggest: Fix a problem with initialization of ``pat-auto-suggest`` which occurred after the lazy loading changes.
+
 
 ## 3.0.0-dev - unreleased
 

Makefile

@@ -1,7 +1,7 @@
 ESLINT 		?= node_modules/.bin/eslint
 PEGJS		?= node_modules/.bin/pegjs
 SASS		?= node_modules/.bin/sass
-YARN 		?= node_modules/.bin/yarn
+YARN 		?= yarn
 
 SOURCES		= $(wildcard src/*.js) $(wildcard src/pat/*.js) $(wildcard src/lib/*.js)
 GENERATED	= src/lib/depends_parse.js
@@ -13,7 +13,6 @@ all:: bundle css
 ## Install dependencies
 
 stamp-yarn:
-	npm install --no-package-lock --no-save yarn
 	$(YARN) install
 	touch stamp-yarn
 

README.md

@@ -20,19 +20,46 @@ Currently that means:
 
 Other browser version may work too, but are not actively tested against.
 
+## Installation requirements
+
+Make sure, you have these requirements installed:
+
+    - Node.js ( https://nodejs.org/en/ )
+    - yarn ( https://yarnpkg.com/ )
+
+
 ## Installation
 
-You need to be on a recent node version and have yarn installed.
+The following commands will generate a `bundle.js` file in the `dist` directory
+which contains Patterns and all its dependencies:
 
     git clone git://github.com/Patternslib/Patterns.git
     cd Patterns
     make
 
-This will generate a `bundle.js` file which contains Patterns and all its
-dependencies.
-
 Alternatively, you can [download a bundle at patternslib.com](http://patternslib.com/download.html).
 
+
+## Overriding the path where JavaScript and other assets are loaded
+
+The bundle itself is included via a ``<script>`` tag.
+But the bundle loads also other assets dynamically - most importantly other JavaScript files from a webpack-built directory called ``chunks``.
+By default the path where these files are loaded is the absolute path ``/dist/``.
+You might want to override this path for your application.
+There are two ways to do this:
+
+1) Similar to ``src/patterns.js`` you can import on top of all other imports another file like ``src/public_path.js`` and define the public path for webpack like so:
+```
+__webpack_public_path__ = "/my-other-dist-directory";
+```
+
+2) You can dynamically set the public path from your web framework and include a ``<script>`` tag in your header BEFORE you load the bundle like so:
+
+```
+<script>window.__patternslib_public_path__ = "/my-other-dist-directory/";</script>
+```
+
+
 ## Layout
 
 The individual patterns are located in their own folders in `./src/pat/`.

src/pat/calendar/calendar.js

@@ -87,11 +87,17 @@ var calendar = {
         var lang = document
             .getElementsByTagName("html")[0]
             .getAttribute("lang");
-        if (lang && lang != "en" && lang != null) {
+        if (lang) {
             // we don't support any country-specific language variants, always use first 2 letters
             lang = lang.substr(0, 2).toLowerCase();
-            await import(`fullcalendar/dist/lang/${lang}.js`);
-            console.log("loaded cal locale for " + lang);
+            if (lang !== "en") {
+                try {
+                    await import(`fullcalendar/dist/lang/${lang}.js`);
+                    console.log("loaded cal locale for " + lang);
+                } catch {
+                    // ignore. default is english.
+                }
+            }
         }
 
         opts = opts || {};

src/pat/carousel/carousel.js

@@ -124,15 +124,13 @@ export default Base.extend({
     },
 
     onInitialized: function (event, slider) {
-        debugger;
         this._loadPanelImages(slider, slider.options.startPanel);
         this._loadPanelImages(slider, slider.options.startPanel + 1);
         this._loadPanelImages(slider, 0);
         this._loadPanelImages(slider, slider.pages + 1);
     },
 
     onSlideInit: function (event, slider) {
-        debugger;
         this._loadPanelImages(slider, slider.targetPage);
     },
 

src/pat/depends/depends.js

@@ -125,9 +125,12 @@ export default Base.extend({
     },
 
     enable() {
-        if (this.$el.is(":input")) this.$el[0].disabled = null;
-        else if (this.$el.is("a")) this.$el.off("click.patternDepends");
-        else if (this.$el.hasClass("pat-autosuggest")) {
+        if (this.$el.is(":input")) {
+            this.$el[0].disabled = null;
+        } else if (this.$el.is("a")) {
+            this.$el.off("click.patternDepends");
+        }
+        if (this.$el.hasClass("pat-autosuggest")) {
             this.$el
                 .findInclusive("input.pat-autosuggest")
                 .trigger("pat-update", {
@@ -139,10 +142,12 @@ export default Base.extend({
     },
 
     disable() {
-        if (this.$el.is(":input")) this.$el[0].disabled = "disabled";
-        else if (this.$el.is("a"))
-            this.$el.on("click.patternDepends", this.blockDefault);
-        else if (this.$el.hasClass("pat-autosuggest")) {
+        if (this.$el.is(":input")) {
+            this.$el[0].disabled = "disabled";
+        } else if (this.$el.is("a")) {
+            this.$el.on("click.patternDepends", (e) => e.preventDefault());
+        }
+        if (this.$el.hasClass("pat-autosuggest")) {
             this.$el
                 .findInclusive("input.pat-autosuggest")
                 .trigger("pat-update", {

src/pat/depends/index.html

@@ -11,6 +11,7 @@
         ></script>
     </head>
     <body>
+      <div id="pat-depends-demo">
         <form action="#">
             <fieldset class="pat-button-bar">
                 <button type="reset" class="pat-button">Reset</button>
@@ -19,6 +20,10 @@
                 <fieldset class="group pat-checklist radio">
                     <legend>Flavour</legend>
 
+                    <label
+                        ><input type="radio" name="flavour" value="margherita" />
+                        Margherita</label
+                    >
                     <label
                         ><input type="radio" name="flavour" value="hawaii" />
                         Hawaii</label
@@ -33,6 +38,20 @@
                     >
                 </fieldset>
 
+                <fieldset
+                    class="pat-depends group"
+                    data-pat-depends="condition:flavour=hawaii; transition: slide"
+                >
+                    <legend>Select the type of ananas</legend>
+                    <input
+                        class="pat-autosuggest"
+                        placeholder="Choose a type of ananas"
+                        data-pat-autosuggest="words: Smooth Cayenne, Kew, Natal Queen, Singapore Spanish, Paulista, Perolera;
+                                              allow-new-words: false; max-selection-size: 1;"
+                        type="text"
+                    />
+                </fieldset>
+
                 <fieldset class="group pat-checklist">
                     <legend>Add extra toppings</legend>
                     <label>
@@ -77,5 +96,10 @@
         >
             Bad, but <em>extremely</em> tasty!
         </p>
+      </div>
+
+      <h2>Open a form in a modal</h2>
+      <a href="./index.html#pat-depends-demo" class="pat-modal">Open form</a>.
+
     </body>
 </html>

src/patterns.js

@@ -1,74 +1,66 @@
 /* Patterns bundle configuration.
- *
- * This file is used to tell r.js which Patterns to load when it generates a
- * bundle. This is only used when generating a full Patterns bundle, or when
- * you want a simple way to include all patterns in your own project. If you
- * only want to use selected patterns you will need to pull in the patterns
- * directly in your RequireJS configuration.
+ * All imports here will go into the compiled bundle.
  */
 
-// // Imports for copy/paste
-// import pat_base from './core/base.js';
-// import pat_parser from './core/parser.js';
-
 // Import base
-import registry from "./core/registry.js";
+import "./public_path"; // first import
+import registry from "./core/registry";
 import jquery from "jquery";
 
 // Import all used patterns for the bundle to be generated
-import "./core/push_kit.js";
-import "./core/url.js";
-import "./lib/input-change-events.js";
-import "./pat/ajax/ajax.js";
-import "./pat/auto-scale/auto-scale.js";
-import "./pat/auto-submit/auto-submit.js";
-import "./pat/auto-suggest/auto-suggest.js";
-import "./pat/autofocus/autofocus.js";
-import "./pat/breadcrumbs/breadcrumbs.js";
-import "./pat/bumper/bumper.js";
-import "./pat/calendar/calendar.js";
-import "./pat/carousel/carousel.js";
-import "./pat/checklist/checklist.js";
-import "./pat/clone/clone.js";
-import "./pat/collapsible/collapsible.js";
-import "./pat/colour-picker/colour-picker.js";
-import "./pat/date-picker/date-picker.js";
-import "./pat/datetime-picker/datetime-picker.js";
-import "./pat/depends/depends.js";
-import "./pat/display-time/display-time.js";
-import "./pat/equaliser/equaliser.js";
-import "./pat/expandable-tree/expandable-tree.js";
-import "./pat/focus/focus.js";
-import "./pat/form-state/form-state.js";
-import "./pat/forward/forward.js";
-import "./pat/fullscreen/fullscreen-close.js";
-import "./pat/fullscreen/fullscreen.js";
-import "./pat/gallery/gallery.js";
-import "./pat/image-crop/image-crop.js";
-import "./pat/inject/inject.js";
-import "./pat/legend/legend.js";
-import "./pat/markdown/markdown.js";
-import "./pat/masonry/masonry.js";
-import "./pat/menu/menu.js";
-import "./pat/modal/modal.js";
-import "./pat/navigation/navigation.js";
-import "./pat/notification/notification.js";
-import "./pat/push/push.js";
-import "./pat/scroll-box/scroll-box.js";
-import "./pat/scroll/scroll.js";
-import "./pat/selectbox/selectbox.js";
-import "./pat/slides/slides.js";
-import "./pat/sortable/sortable.js";
-import "./pat/stacks/stacks.js";
-import "./pat/sticky/sticky.js";
-import "./pat/subform/subform.js";
-import "./pat/switch/switch.js";
-import "./pat/syntax-highlight/syntax-highlight.js";
-import "./pat/tabs/tabs.js";
-import "./pat/toggle/toggle.js";
-import "./pat/tooltip/tooltip.js";
-import "./pat/validation/validation.js";
-import "./pat/zoom/zoom.js";
+import "./core/push_kit";
+import "./core/url";
+import "./lib/input-change-events";
+import "./pat/ajax/ajax";
+import "./pat/auto-scale/auto-scale";
+import "./pat/auto-submit/auto-submit";
+import "./pat/auto-suggest/auto-suggest";
+import "./pat/autofocus/autofocus";
+import "./pat/breadcrumbs/breadcrumbs";
+import "./pat/bumper/bumper";
+import "./pat/calendar/calendar";
+import "./pat/carousel/carousel";
+import "./pat/checklist/checklist";
+import "./pat/clone/clone";
+import "./pat/collapsible/collapsible";
+import "./pat/colour-picker/colour-picker";
+import "./pat/date-picker/date-picker";
+import "./pat/datetime-picker/datetime-picker";
+import "./pat/depends/depends";
+import "./pat/display-time/display-time";
+import "./pat/equaliser/equaliser";
+import "./pat/expandable-tree/expandable-tree";
+import "./pat/focus/focus";
+import "./pat/form-state/form-state";
+import "./pat/forward/forward";
+import "./pat/fullscreen/fullscreen-close";
+import "./pat/fullscreen/fullscreen";
+import "./pat/gallery/gallery";
+import "./pat/image-crop/image-crop";
+import "./pat/inject/inject";
+import "./pat/legend/legend";
+import "./pat/markdown/markdown";
+import "./pat/masonry/masonry";
+import "./pat/menu/menu";
+import "./pat/modal/modal";
+import "./pat/navigation/navigation";
+import "./pat/notification/notification";
+import "./pat/push/push";
+import "./pat/scroll-box/scroll-box";
+import "./pat/scroll/scroll";
+import "./pat/selectbox/selectbox";
+import "./pat/slides/slides";
+import "./pat/sortable/sortable";
+import "./pat/stacks/stacks";
+import "./pat/sticky/sticky";
+import "./pat/subform/subform";
+import "./pat/switch/switch";
+import "./pat/syntax-highlight/syntax-highlight";
+import "./pat/tabs/tabs";
+import "./pat/toggle/toggle";
+import "./pat/tooltip/tooltip";
+import "./pat/validation/validation";
+import "./pat/zoom/zoom";
 
 // example pattern
 import "./pat/minimalpattern/minimalpattern";

src/public_path.js

@@ -0,0 +1,3 @@
+// NOTE: Import this file before any other files
+// Overwrite path to load resources or use default one.
+__webpack_public_path__ = window.__patternslib_public_path__ || "/dist/"; // eslint-disable-line no-undef

webpack/base.config.js

@@ -9,9 +9,7 @@ const TerserPlugin = require("terser-webpack-plugin");
 const DuplicatePackageCheckerPlugin = require("duplicate-package-checker-webpack-plugin");
 
 module.exports = (env) => {
-    console.log(env.NODE_ENV);
-
-    return {
+    const config = {
         entry: {
             "bundle": path.resolve(__dirname, "../src/patterns.js"),
             "bundle-polyfills": path.resolve(__dirname, "../src/polyfills.js"),
@@ -24,8 +22,10 @@ module.exports = (env) => {
         output: {
             filename: "[name].js",
             chunkFilename: "chunks/[name].[contenthash].js",
-            publicPath: "/dist",
-            path: path.resolve(__dirname, "../dist"),
+            path: path.resolve(__dirname, "../dist/"),
+            // publicPath set in bundle entry points via __webpack_public_path__
+            // See: https://webpack.js.org/guides/public-path/
+            // publicPath: "/dist/",
         },
         optimization: {
             minimize: true,
@@ -103,4 +103,10 @@ module.exports = (env) => {
             }),
         ],
     };
+    if (env.NODE_ENV === "development") {
+        // Set public path to override __webpack_public_path__
+        // for webpack-dev-server
+        config.output.publicPath = "/dist/";
+    }
+    return config;
 };