Merge pull request #1 from NetLogo-Mobile/bundling_changes

Bundling changes
NetLogo-Mobile · Oct 24, 2024 · 805c35b · 805c35b
2 parents 1c03b5c + 2676ee3
commit 805c35b
Show file tree

Hide file tree

Showing 10 changed files with 224 additions and 162 deletions.
diff --git a/README.md b/README.md
@@ -2,18 +2,50 @@
 
 This is a guide to the Color Picker feature for NetLogo Web. The Color Picker is a user interface that allows a user to explore and experiment with different colors, and finally select one. The selected color can then be provided to the program using the Color Picker in the form of a callback function. The Color Picker is still in the experimental stage, all feedback is welcome.
 
-## Demo Link
+### Demo Link
 https://netlogo-mobile.github.io/Color-Picker/
 - This should bring you to a page with just the standalone color picker. The callback function after selecting a color simply logs the color.
 
-## Usage
-
-To integrate the Color Picker into your NetLogo Web project, start by installing the Color Picker npm package:
-
+### Installation
 ```bash
 npm i @netlogo/netlogo-color-picker
 ```
 
+### Usage Examples
+
+This repository provides two usage examples for the NetLogo Color Picker:
+
+1. **ES Module Example**:
+   - Import the `ColorPicker` as an ES module within your JavaScript.
+   - Example usage:
+     ```javascript
+     import { ColorPicker } from "./dist/ColorPicker.bundle.js";
+
+     const colorPickerConfig = {
+         parent: parentElement,
+         initColor: [165, 234, 251, 255],
+         onColorSelect: (selectedColor) => {
+             console.log("Color selected:", selectedColor);
+         },
+         savedColors: savedColorsArray
+     };
+     let colorPicker = new ColorPicker(colorPickerConfig);
+     ```
+
+2. **Standalone UMD Example**:
+   - Use the standalone UMD bundle with a `<script>` tag in your HTML.
+   - Example usage:
+     ```html
+     <script src="../dist/ColorPicker.standalone.js"></script>
+     <script>
+         const colorPicker = new ColorPicker.ColorPicker(colorPickerConfig);
+     </script>
+     ```
+
+Check the `examples/` folder for the full HTML implementations of each example: `module.html` for ES module usage and `standalone.html` for UMD bundle usage.
+To integrate the Color Picker into your NetLogo Web project, start by installing the Color Picker npm package:
+
+### Configuration Options
 After importing it into your project, you can create a Color Picker by calling the constructor. The `ColorPicker` class constructor accepts a single `config` object that contains the necessary properties for initialization:
 
 - `parent`: The HTML element that will host the Color Picker. This ensures the picker is embedded in the correct location in your UI.

diff --git a/examples/module.html b/examples/module.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NetLogo Color Picker</title>
+    <style>
+        html, body {
+            height: 100%;
+            margin: 0;
+            font-size: 16px;
+        }
+    </style>
+</head>
+<body>
+    <div class="code-editor"></div>
+    <script type="module"> 
+        import { ColorPicker } from "./dist/ColorPicker.bundle.js";
+        const savedColors = [
+            [228, 202, 152, 255],
+            [228, 110, 72, 255],
+            [157, 110, 72, 255]
+        ];
+
+        function init(parent) {
+            const colorPickerConfig = {
+                parent: parent,
+                initColor: [165, 234, 251, 255],
+                onColorSelect: (selectedColor) => {
+                    console.log("Color selected:", selectedColor);
+                },
+                savedColors: savedColors
+            };
+            let colorPicker = new ColorPicker(colorPickerConfig);
+        }
+        var ce = document.querySelector(".code-editor");
+        ce.style.width = '100%';
+        ce.style.height = '100%';
+        ce.style.display = 'flex';
+        ce.style.justifyContent = 'center';
+        ce.style.alignItems = 'center';
+        ce.style.margin = '0 auto';
+        var editor = init(ce);
+    </script>
+</body>
+</html>
diff --git a/examples/standalone.html b/examples/standalone.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="../dist/color-picker.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <div class="cp-container"></div>
+    <script src="../dist/ColorPicker.standalone.js"></script>
+    <script>
+        const savedColors = [
+            [228, 202, 152, 255],
+            [228, 110, 72, 255],
+            [157, 110, 72, 255]
+        ];
+        let parent = document.querySelector('.cp-container');
+        const colorPickerConfig = {
+            parent: parent,
+            initColor: [165, 234, 251, 255],
+            initColorType: "rgb", 
+            onColorSelect: (selectedColor) => {
+                console.log("Color selected:", selectedColor);
+            },
+            savedColors: savedColors
+        };
+        const colorPicker = new ColorPicker.ColorPicker(colorPickerConfig);
+    </script>
+</body>
+</html>
diff --git a/index.html b/index.html