.gitignore

@@ -0,0 +1,2 @@
+/dist
+/node_modules

demo-test.html

@@ -10,11 +10,13 @@
   <!-- <script src="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
   <!-- <link href="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" /> -->
 
-  <script src="bbtimeline.js"></script>
-  <script src="bbtimeline-canvas.js"></script>
-  <script src="bbtimeline-background-canvas.js"></script>
-  <script src="bbtimeline-flourish-canvas.js"></script>
-  <script src="bbtimeline-foreground-canvas.js"></script>
+  <script src="dist//timeline.min.js"></script>
+
+  <!-- <script src="bbtimeline.js"></script> -->
+  <!-- <script src="bbtimeline-canvas.js"></script> -->
+  <!-- <script src="bbtimeline-background-canvas.js"></script> -->
+  <!-- <script src="bbtimeline-flourish-canvas.js"></script> -->
+  <!-- <script src="bbtimeline-foreground-canvas.js"></script> -->
 
   <!-- <script src="bbtimeline.min.js"></script> -->
 
@@ -145,7 +147,7 @@ textarea {
 
   <script>
 
-var timeline1 = new BBTimeline("myCanvas");
+var timeline1 = new LiteRyzJS.Timeline("myCanvas");
 timeline1.OnMouseDown = function(sender, e, event) {
   LogInfo("");
   LogInfo("OnMouseDown");

package.json

@@ -0,0 +1,11 @@
+{
+  "name": "LiteRyzJS/Timeline",
+  "version": "0.2.0.121",
+  "devDependencies": {
+    "webpack": "^5.93.0",
+    "webpack-cli": "^5.1.4"
+  },
+  "scripts": {
+    "build": "webpack"
+  }
+}

src/index.js

@@ -0,0 +1,5 @@
+// src/index.js
+import Timeline from './timeline/timeline.js';
+
+
+export { Timeline };

src/timeline/timeline-background-canvas.js

@@ -1,4 +1,7 @@
-class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
+import TimelineCanvas from './timeline-canvas.js';
+
+
+class TimelineBackgroundCanvas extends TimelineCanvas {
   constructor(parentEl, el) {
     super(parentEl, el);
   }
@@ -218,4 +221,7 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
     }
   }
 
-}
+}
+
+
+export default TimelineBackgroundCanvas;

src/timeline/timeline-canvas.js

@@ -1,4 +1,4 @@
-class BBTimelineCanvas {
+class TimelineCanvas {
   constructor(parentEl, el) {
     const a = this;
 
@@ -179,4 +179,7 @@ class BBTimelineCanvas {
     return rect;
   }
 
-}
+}
+
+
+export default TimelineCanvas;

src/timeline/timeline-flourish-canvas.js

@@ -1,4 +1,7 @@
-class BBTimelineFlourishCanvas extends BBTimelineCanvas {
+import TimelineCanvas from './timeline-canvas.js';
+
+
+class TimelineFlourishCanvas extends TimelineCanvas {
   constructor(parentEl, el) {
     super(parentEl, el);
   }
@@ -33,4 +36,7 @@ class BBTimelineFlourishCanvas extends BBTimelineCanvas {
     }
   }
 
-}
+}
+
+
+export default TimelineFlourishCanvas;

src/timeline/timeline-foreground-canvas.js

@@ -1,4 +1,7 @@
-class BBTimelineForegroundCanvas extends BBTimelineCanvas {
+import TimelineCanvas from './timeline-canvas.js';
+
+
+class TimelineForegroundCanvas extends TimelineCanvas {
   constructor(parentEl, el) {
     super(parentEl, el);
   }
@@ -207,4 +210,7 @@ class BBTimelineForegroundCanvas extends BBTimelineCanvas {
     return posY;
   }
 
-}
+}
+
+
+export default TimelineForegroundCanvas;

src/timeline/timeline.js

@@ -1,8 +1,9 @@
-/**
- * BBTimeline
- * @version v0.1.1.277 apha (2023/11/12 0106)
- */
-class BBTimeline {
+import TimelineBackgroundCanvas from './timeline-background-canvas.js';
+import TimelineFlourishCanvas from './timeline-flourish-canvas.js';
+import TimelineForegroundCanvas from './timeline-foreground-canvas.js';
+
+
+class Timeline {
   constructor(el) {
     const a = this;
 
@@ -49,9 +50,9 @@ class BBTimeline {
 
     const canvasList = a.Container.getElementsByTagName("canvas");
 
-    a.Layer.Background = new BBTimelineBackgroundCanvas(a, canvasList[0]);
-    a.Layer.Flourish = new BBTimelineFlourishCanvas(a, canvasList[1]);
-    a.Layer.Markers = new BBTimelineForegroundCanvas(a, canvasList[2]);
+    a.Layer.Background = new TimelineBackgroundCanvas(a, canvasList[0]);
+    a.Layer.Flourish = new TimelineFlourishCanvas(a, canvasList[1]);
+    a.Layer.Markers = new TimelineForegroundCanvas(a, canvasList[2]);
 
   }
 
@@ -373,4 +374,7 @@ class BBTimeline {
 
   OnDblClick(sender, e, event) { /* delegate */ }
 
-}
+}
+
+
+export default Timeline;

webpack.config.js

@@ -0,0 +1,48 @@
+const path = require('path');
+const { version } = require('./package.json');
+const webpack = require('webpack');
+
+
+class PrependVersionPlugin {
+  apply(compiler) {
+    compiler.hooks.emit.tapAsync('PrependVersionPlugin', (compilation, callback) => {
+      Object.keys(compilation.assets).forEach((filename) => {
+        if (filename.endsWith('.js')) {
+          const asset = compilation.assets[filename];
+
+          const headerText = `/*!\n  * LiteRyzJS/Timeline v${version}\n  * Copyright 2023-2024 Ray Lam (https://www.hiimray.co.uk)\n  *\n  */\n`;
+
+          const newContent = headerText + asset.source();
+
+          compilation.assets[filename] = {
+            source: () => newContent,
+            size: () => newContent.length,
+          };
+        }
+      });
+
+      callback();
+    });
+  }
+}
+
+
+module.exports = {
+  entry: {
+    timeline: './src/index.js'
+  },
+  output: {
+    filename: `[name].dist.js`,
+    path: path.resolve(__dirname, 'dist'),
+    library: 'LiteRyzJS',
+    libraryTarget: 'umd',
+    globalObject: 'this'
+  },
+  mode: 'production',  // development|production
+  plugins: [
+    new webpack.DefinePlugin({
+        'process.env.VERSION': JSON.stringify(version)
+    }),
+    new PrependVersionPlugin()
+  ]
+};