add Signature Pad feature (#2183)

Co-authored-by: ethancrawford <ethan_jc@hotmail.com>

.changeset/ninety-ghosts-shake.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Add Signature Pad feature and signatures page

core/scss/_utilities.scss

@@ -43,6 +43,7 @@ $utilities: (
       v-text: vertical-text,
       grab: grab,
       grabbing: grabbing,
+      crosshair: crosshair,
     ),
   ), 
   "border": (

pnpm-lock.yaml

@@ -147,6 +147,9 @@ importers:
       plyr:
         specifier: ^3.7.8
         version: 3.7.8
+      signature_pad:
+        specifier: ^5.0.4
+        version: 5.0.4
       star-rating.js:
         specifier: ^4.3.1
         version: 4.3.1
@@ -3777,6 +3780,10 @@ packages:
     engines: {node: '>=14'}
     dev: true
 
+  /signature_pad@5.0.4:
+    resolution: {integrity: sha512-nngOixbwLAUOuH3QnZwlgwmynQblxmo4iWacKFwfymJfiY+Qt+9icNtcIe/okqXKun4hJ5QTFmHyC7dmv6lf2w==}
+    dev: false
+
   /simple-swizzle@0.2.2:
     resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
     dependencies:

preview/eleventy.config.mjs

@@ -577,7 +577,7 @@ export default function (eleventyConfig) {
 	/**
 	 * Shortcodes
 	 */
-	const tags = ["capture_global", "endcapture_global", "highlight", "endhighlight"];
+	const tags = ["highlight", "endhighlight"];
 	tags.forEach(tag => {
 		eleventyConfig.addLiquidTag(tag, function (liquidEngine) {
 			return {
@@ -591,6 +591,31 @@ export default function (eleventyConfig) {
 		});
 	});
 
+	['script', 'modal'].forEach((tag) => {
+		eleventyConfig.addPairedShortcode(`capture_${tag}`, function (content) {
+			if (!this.page[tag]) {
+				this.page[tag] = []
+			}
+			
+			if (!this.page[tag][this.page.url]) {
+				this.page[tag][this.page.url] = [];
+			}
+
+			this.page[tag][this.page.url].push(content);
+
+			return ''
+		})
+
+		eleventyConfig.addShortcode(`${tag}s`, function () {
+
+			if (this.page[tag]) {
+				return this.page[tag][this.page.url] ? `<!-- BEGIN PAGE ${tag.toUpperCase()}S -->\n${this.page[tag][this.page.url].join('\n').trim()}\n<!-- END PAGE ${tag.toUpperCase()}S -->` : '';
+			}
+
+			return ''
+		});
+	});
+
 	/**
 	 * Transforms
 	 */

preview/package.json

@@ -31,32 +31,33 @@
     "zip": "mkdir -p packages-zip && zip -r packages-zip/tabler-$(node -p \"require('./package.json').version\").zip demo/*"
   },
   "dependencies": {
+    "@melloware/coloris": "^0.24.0",
     "@tabler/core": "workspace:*",
     "@tabler/icons": "^3.29.0",
-    "@melloware/coloris": "^0.24.0",
     "apexcharts": "^4.4.0",
-    "star-rating.js": "^4.3.1",
+    "autosize": "^6.0.1",
-    "tinymce": "^7.6.1",
+    "choices.js": "^11.0.3",
-    "tom-select": "^2.4.2",
+    "countup.js": "^2.8.0",
-    "typed.js": "^2.1.0",
+    "dropzone": "^6.0.0-beta.2",
+    "flatpickr": "^4.6.13",
+    "fslightbox": "^3.4.2",
     "imask": "^7.6.1",
     "jsvectormap": "^1.6.0",
     "list.js": "^2.3.1",
     "litepicker": "^2.0.12",
     "nouislider": "^15.8.1",
     "plyr": "^3.7.8",
-    "dropzone": "^6.0.0-beta.2",
+    "star-rating.js": "^4.3.1",
-    "flatpickr": "^4.6.13",
+    "tinymce": "^7.6.1",
-    "fslightbox": "^3.4.2",
+    "tom-select": "^2.4.2",
-    "choices.js": "^11.0.3",
+    "typed.js": "^2.1.0",
-    "countup.js": "^2.8.0",
+    "signature_pad": "^5.0.4"
-    "autosize": "^6.0.1"
   },
   "devDependencies": {
-    "request": "^2.88.2",
-    "imageoptim-cli": "^3.1.9",
     "@11ty/eleventy": "^3.0.0",
-    "@repo/banner": "workspace:*"
+    "@repo/banner": "workspace:*",
+    "imageoptim-cli": "^3.1.9",
+    "request": "^2.88.2"
   },
   "prettier": {
     "tabWidth": 2,

preview/pages/2-step-verification-code.html

@@ -53,7 +53,7 @@ permalink: 2-step-verification-code.html
 	It may take a minute to receive your code. Haven't received it? <a href="{{ page | relative }}/">Resend a new code.</a>
 </div>
 
-{% capture_global scripts %}
+{% capture_script %}
 <script>
 document.addEventListener("DOMContentLoaded", function() {
 	var inputs = document.querySelectorAll('[data-code-input]');
@@ -76,4 +76,4 @@ document.addEventListener("DOMContentLoaded", function() {
 	}
 });
 </script>
-{% endcapture_global %}
+{% endcapture_script %}

preview/pages/_data/libs.json

@@ -24,7 +24,8 @@
     "dropzone": "dropzone/dist/dropzone-min.js",
     "star-rating.js": "star-rating.js/dist/star-rating.min.js",
     "coloris.js": "@melloware/coloris/dist/umd/coloris.min.js",
-    "typed.js": "typed.js/dist/typed.umd.js"
+    "typed.js": "typed.js/dist/typed.umd.js",
+    "signature_pad": "signature_pad/dist/signature_pad.umd.min.js"
   },
   "css": {
     "mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css",

preview/pages/_data/menu.json

@@ -281,6 +281,11 @@
         "title": "Settings",
         "url": "settings.html"
       },
+      "signatures": {
+        "title": "Signatures",
+        "url": "signatures.html",
+        "badge": "New"
+      },
       "tasks": {
         "title": "Tasks",
         "url": "tasks.html"

preview/pages/_includes/layout/js.html

@@ -1,10 +1,10 @@
-<!-- BEGIN PAGE LEVEL SCRIPTS -->
 {% assign google-maps-key = site.googleMapsDevKey -%}
 {% if environment != 'development' -%}
 {% assign google-maps-key = site.googleMapsKey -%}
 {% endif -%}
 
 {% if page-libs -%}
+<!-- BEGIN PAGE LIBRARIES -->
 	{% for lib in libs.js -%}
 		{% if page-libs contains lib[0] or libs.global-libs contains lib[0] -%}
 			{% for file in lib[1] -%}
@@ -12,8 +12,8 @@
 			{% endfor -%}
 		{% endif -%}
 	{% endfor -%}
+<!-- END PAGE LIBRARIES -->
 {% endif -%}
-<!-- END PAGE LEVEL SCRIPTS -->
 
 <!-- BEGIN GLOBAL MANDATORY SCRIPTS -->
 <script src="{{ page | relative }}/dist/js/tabler{% if environment != 'development' %}.min{% endif %}.js{% if environment != 'development' %}?{{ 'now' | date: '%s' }}{% endif %}" defer></script>
@@ -23,13 +23,7 @@
 <script src="{{ page | relative }}/preview/js/demo{% if environment != 'development' %}.min{% endif %}.js{% if environment != 'development' %}?{{ 'now' | date: '%s' }}{% endif %}" defer></script>
 <!-- END DEMO SCRIPTS -->
 
-{% for script in site.captured_global.scripts %}
+{% scripts %}
-{{ script }}
-{% endfor %}
-
-{% for script in site.captured_once.scripts %}
-{{ script }}
-{% endfor %}
 
 {% assign libs = page-libs | default: layout.page-libs %}
 {% for lib in libs.js-files %}

preview/pages/_includes/layout/modals-capture.html

@@ -1,3 +0,0 @@
-{% for modal in site.captured_global.modals %}
-{{ modal }}
-{% endfor %}

preview/pages/_includes/ui/chart-heatmap.html

@@ -8,7 +8,6 @@
 {% capture script %}
 {% assign colors = include.colors | default: 1 %}
 <script>
-	 // @formatter:off
 document.addEventListener("DOMContentLoaded", function () {
 	{% if environment == 'development' %}
 	window.tabler_chart = window.tabler_chart || {};
@@ -85,10 +84,9 @@
 		},
 	})).render();
 });
-	 // @formatter:on
 </script>
 {% endcapture %}
 
-{% capture_global scripts %}
+{% capture_script %}
 {{ script }}
-{% endcapture_global %}
+{% endcapture_script %}

preview/pages/_includes/ui/chart-sparkline.html

@@ -14,9 +14,8 @@
 {% if id %}
 	<div class="chart-sparkline{% if type == 'pie' or type == 'donut' %} chart-sparkline-square{% endif %}{% if include.wide %} chart-sparkline-wide{% endif %}{% if include.small %} chart-sparkline-sm{% endif %}" id="sparkline-{{ id }}"></div>
 
-	{% capture_global scripts %}
+	{% capture_script %}
 	<script>
-		// @formatter:off
 		document.addEventListener("DOMContentLoaded", function () {
 			{% if environment == 'development' %}
 			window.tabler_chart = window.tabler_chart || {};
@@ -81,7 +80,6 @@
 				{% endif %}
 			})).render();
 		});
-		// @formatter:on
 	</script>
-	{% endcapture_global %}
+	{% endcapture_script %}
 {% endif %}

preview/pages/_includes/ui/chart.html

@@ -21,7 +21,6 @@
 {% capture script %}
 {% assign chart-type = data.type | default: 'bar' %}
 <script>
-	// @formatter:off
 	document.addEventListener("DOMContentLoaded", function () {
 		{% if environment == 'development' %}
 		window.tabler_chart = window.tabler_chart || {};
@@ -262,12 +261,11 @@
 			{% endif %}
 		})).render();
 	});
-	// @formatter:on
 </script>
 {% endcapture %}
 
-{% capture_global scripts %}
+{% capture_script %}
 {{ script }}
-{% endcapture_global %}
+{% endcapture_script %}
 
 {% endif %}

preview/pages/_includes/ui/colorpicker.html

@@ -4,9 +4,8 @@
 
 <input type="text" class="form-control d-block{% if include.class %} {{ include.class }}{% endif %}" id="colorpicker-{{ id }}" value="{{ include.value }}" />
 
-{% capture_global scripts %}
+{% capture_script %}
 <script>
-	// @formatter:off
 	document.addEventListener("DOMContentLoaded", function () {
 		{% if environment == 'development' %}
 		window.tabler_colorpicker = window.tabler_colorpicker || {};
@@ -25,6 +24,5 @@
 			],
 		}))
 	})
-	// @formatter:on
 </script>
-{% endcapture_global %}
+{% endcapture_script %}

preview/pages/_includes/ui/datepicker.html

@@ -26,7 +26,6 @@
 
 {% capture script %}
 <script>
-	// @formatter:off
 	document.addEventListener("DOMContentLoaded", function () {
 		{% if environment == 'development' %}
 		window.tabler_datepicker = window.tabler_datepicker || {};
@@ -40,18 +39,16 @@
 			},
 			{% if include.inline %}inlineMode: true,{% endif %}
 		}));
-
 	});
-	// @formatter:on
 </script>
 {% endcapture %}
 
 {% if include.show-scripts %}
 {{ script }}
 {% else %}
-{% capture_global scripts %}
+{% capture_script %}
 {{ script }}
-{% endcapture_global %}
+{% endcapture_script %}
 {% endif %}
 
 {% endif %}

preview/pages/_includes/ui/dropzone.html

@@ -14,13 +14,12 @@
 	{% endif %}
 </form>
 
-{% capture_global scripts %}
+{% capture_script %}
 <script>
-  // @formatter:off
   {% if environment == 'development' %}window.tabler_dropzone = window.tabler_dropzone || {};{% endif %}
 
   document.addEventListener("DOMContentLoaded", function() {
     {% if environment == 'development' %}window.tabler_dropzone["dropzone-{{ id }}"] = {% endif %}new Dropzone("#dropzone-{{ id }}")
   })
 </script>
-{% endcapture_global %}
+{% endcapture_script %}

preview/pages/_includes/ui/inline-player.html

@@ -3,17 +3,15 @@
 {% if id and include.embed-id %}
 <div id="player-{{ id }}" data-plyr-provider="{{ include.type | default: 'youtube' }}" data-plyr-embed-id="{{ include.embed-id }}"></div>
 
-{% capture_global scripts %}
+{% capture_script %}
 <script>
-  // @formatter:off
   document.addEventListener("DOMContentLoaded", function () {
     {% if environment == 'development' %}
     window.tabler_player = window.tabler_player || {};
     {% endif %}
     window.Plyr && ({% if environment == 'development' %}window.tabler_player["player-{{ id }}"] = {% endif %}new Plyr('#player-{{ id }}'));
   });
-  // @formatter:on
 </script>
-{% endcapture_global %}
+{% endcapture_script %}
 
 {% endif %}

preview/pages/_includes/ui/map-vector.html

@@ -11,7 +11,6 @@
 
 	{% capture script %}
 	<script>
-		// @formatter:on
 		{% if environment == 'development' %}window.tabler_map_vector = window.tabler_map_vector || {};{% endif %}
 
 		document.addEventListener("DOMContentLoaded", function() {
@@ -99,15 +98,14 @@
 				map.updateSize();
 			});
 		});
-		// @formatter:off
 	</script>
 	{% endcapture %}
 
 	{% if include.show-scripts %}
 		{{ script }}
 	{% else %}
-		{% capture_global scripts %}
+		{% capture_script %}
 			{{ script }}
-		{% endcapture_global %}
+		{% endcapture_script %}
 	{% endif %}
 {% endif %}

preview/pages/_includes/ui/map.html

@@ -8,9 +8,8 @@
 		</div>
 	</div>
 
-	{% capture_global scripts %}
+	{% capture_script %}
 	<script>
-		// @formatter:off
 		{% if environment == 'development' %}window.tabler_map = window.tabler_map || {};{% endif %}
 
 		document.addEventListener("DOMContentLoaded", function() {
@@ -33,7 +32,6 @@
 
 			{% if environment == 'development' %}window.tabler_map["map-{{ map-id }}"] = map;{% endif %}
 		});
-		// @formatter:on
 	</script>
-	{% endcapture_global %}
+	{% endcapture_script %}
 {% endif %}

preview/pages/_includes/ui/modal.html

@@ -2,7 +2,7 @@
 {% assign modal-id = include.modal-id | default: 'simple' %}
 {% assign size = include['size'] %}
 
-{% capture_global modals %}
+{% capture_modal %}
 <div class="modal modal-blur fade" id="modal-{{ modal-id }}" tabindex="-1" role="dialog" aria-hidden="true">
 	<div class="modal-dialog{% if size%} modal-{{ size }}{% endif %}{% unless include.top %} modal-dialog-centered{% endunless %}{% if include.scrollable %} modal-dialog-scrollable{% endif %}" role="document">
 		<div class="modal-content">
@@ -10,5 +10,5 @@
 		</div>
 	</div>
 </div>
-{% endcapture_global %}
+{% endcapture_modal %}
 <!-- END MODAL -->

preview/pages/_includes/ui/range.html

@@ -7,9 +7,8 @@
 {% if id %}
 	<div class="form-range mb-2{% if include.class %} {{ include.class }}{% endif %}" id="range-{{ id }}"></div>
 
-	{% capture_global scripts %}
+	{% capture_script %}
 	<script>
-		// @formatter:off
 		{% assign value = value | split: ',' %}
 
 		document.addEventListener("DOMContentLoaded", function () {
@@ -25,9 +24,8 @@
 					  }
 			 }));
 		});
-		// @formatter:on
 	</script>
-	{% endcapture_global %}
+	{% endcapture_script %}
 {% else %}
 	<input type="range" class="form-range mb-2{% if include.class %} {{ include.class }}{% endif %}" value="{{ value }}" min="{{ min }}" max="{{ max }}" step="{{ step }}">
 {% endif %}

preview/pages/_includes/ui/rating.html

@@ -20,9 +20,8 @@
 {% assign star = star | replace_regex: "[\n\t]{2,}", " " | strip %}
 {% assign star = star | replace_regex: "<!--[^-]*-->", "" | strip %}
 
-{% capture_global scripts %}
+{% capture_script %}
 <script>
-  // @formatter:off
   {% if environment == 'development' %}window.tabler_rating = window.tabler_rating || {};{% endif %}
 
   document.addEventListener("DOMContentLoaded", function () {
@@ -37,6 +36,5 @@
 	 })		
     {% if environment == 'development' %}window.tabler_rating["rating-{{ id }}"] = rating;{% endif %}
   })
-  // @formatter:on
 </script>
-{% endcapture_global %}
+{% endcapture_script %}

preview/pages/_includes/ui/select.html

@@ -56,7 +56,6 @@
 
 {% capture script %}
 <script>
-	// @formatter:off
 	document.addEventListener("DOMContentLoaded", function () {
 		{% if environment == 'development' %}
 		window.tabler_select = window.tabler_select || {};
@@ -88,7 +87,6 @@
 		}));
 
 	});
-	// @formatter:on
 </script>
 {% endcapture %}
 
@@ -96,9 +94,9 @@
 {% if include.show-scripts %}
 {{ script }}
 {% else %}
-{% capture_global scripts %}
+{% capture_script %}
 {{ script }}
-{% endcapture_global %}
+{% endcapture_script %}
 {% endif %}
 
 {% endif %}

preview/pages/_includes/ui/signature.html

@@ -0,0 +1,52 @@
+{% assign id = include.id | default: 'default' %}
+
+<div class="form-control p-0 position-relative{% if include.class %} {{ include.class }}{% endif %}">
+	{% if include.clear %}
+	<div class="position-absolute top-0 end-0 p-2">
+		<div class="btn btn-icon" id="signature-{{ id }}-clear" title="Clear signature" data-bs-toggle="tooltip">
+			{% include "ui/icon.html" icon="trash" %} 
+		</div>
+	</div>
+	{% endif %}
+  <canvas id="signature-{{ id }}" width="{{ include.width | default: 400 }}" height="{{ include.height | default: 200 }}" class="rounded d-block w-100 cursor-crosshair"></canvas>
+</div>
+
+{% capture_script %}
+<!-- BEGIN SIGNATURE PAD -->
+<script>  
+  document.addEventListener("{{ include.event | default: 'DOMContentLoaded' }}", function () {
+    const canvas = document.getElementById("signature-{{ id }}");
+
+    if (canvas) {
+      const signaturePad = new SignaturePad(canvas, {
+        backgroundColor: "transparent",
+		  penColor: getComputedStyle(canvas).color
+      });
+
+		{% if include.clear %}
+		document.querySelector("#signature-{{ id }}-clear").addEventListener("click", function () {
+		  signaturePad.clear();
+		});
+		{% endif %}
+
+		function resizeCanvas() {
+        const ratio = Math.max(window.devicePixelRatio || 1, 1);
+
+		  console.log(canvas.offsetWidth, canvas.offsetHeight);
+
+        canvas.width = canvas.offsetWidth * ratio;
+        canvas.height = canvas.offsetHeight * ratio;
+        canvas.getContext("2d").scale(ratio, ratio);
+        signaturePad.fromData(signaturePad.toData()); 
+      }  
+
+		window.addEventListener("resize", resizeCanvas);
+		resizeCanvas();
+
+		{% if include.extra-js %}
+		{{ include.extra-js }}
+		{% endif %}
+    }
+  });
+</script>
+{% endcapture_script %}

preview/pages/_includes/ui/tinymce.html

@@ -4,9 +4,8 @@
 	<textarea id="tinymce-{{ id }}">Hello, <b>Tabler</b>!</textarea>
 </form>
 
-{% capture_global scripts %}
+{% capture_script %}
 <script>
-  // @formatter:off
   document.addEventListener("DOMContentLoaded", function () {
     let options = {
       selector: '#tinymce-{{ id }}',
@@ -33,6 +32,5 @@
 
     tinyMCE.init(options);
   })
-  // @formatter:on
 </script>
-{% endcapture_global %}
+{% endcapture_script %}

preview/pages/_includes/ui/typed.html

@@ -2,7 +2,7 @@
 {% assign id = include.id | default: "typed" %}
 <span class="text-primary" id="{{ id }}">{{ strings | first }}</span>
 
-{% capture_global scripts %}
+{% capture_script %}
 <script>
 document.addEventListener("DOMContentLoaded", function() {
 	var typed = new Typed('#{{ id }}', {
@@ -16,4 +16,4 @@ document.addEventListener("DOMContentLoaded", function() {
 	});
 });
 </script>
-{% endcapture_global %}
+{% endcapture_script %}

preview/pages/_layouts/base.html

@@ -46,7 +46,7 @@
 
 	{{ content }}
 
-	{% include "layout/modals-capture.html" %}
+	{% modals %}
 
 	{% include "layout/js.html" %}
 </body>

preview/pages/datatables.html

@@ -49,7 +49,7 @@ permalink: datatables.html
 	</div>
 </div>
 
-{% capture_global scripts %}
+{% capture_script %}
 <script>
 {% if environment == 'development' %}window.tabler_list = window.tabler_list || {};{% endif %}
 
@@ -65,4 +65,4 @@ permalink: datatables.html
 	});
 })
 </script>
-{% endcapture_global %}
+{% endcapture_script %}

preview/pages/emails.html

@@ -78,7 +78,7 @@ permalink: emails.html
 	</div>
 </div>
 
-{% capture_global scripts %}
+{% capture_script %}
 <script>
 	const emailModal = document.getElementById("email-modal")
 	if (emailModal) {
@@ -98,4 +98,4 @@ permalink: emails.html
 		})
 	}
 </script>
-{% endcapture_global %}
+{% endcapture_script %}

preview/pages/illustrations.html

@@ -128,7 +128,7 @@ permalink: illustrations.html
 </div>
 
 
-{% capture_global scripts %}
+{% capture_script %}
 <script>
 	let skinColor = "{{ skin_color[1].hex }}",
 	   primaryColor = "{{ color[1].hex }}";
@@ -169,4 +169,4 @@ permalink: illustrations.html
 		})
 	})
 </script>
-{% endcapture_global %}
+{% endcapture_script %}

preview/pages/map-fullsize.html

@@ -12,9 +12,8 @@ permalink: map-fullsize.html
 
 <div class="map flex-fill" id="map-{{ map-id }}"></div>
 
-{% capture_global scripts %}
+{% capture_script %}
 <script>
-	// @formatter:off
 	let map;
 	{% if environment == 'development' %}window.tabler_map = window.tabler_map || {};{% endif %}
 
@@ -26,6 +25,5 @@ permalink: map-fullsize.html
 
 		{% if environment == 'development' %}window.tabler_map["map-{{ map-id }}"] = map;{% endif %}
 	});
-// @formatter:on
 </script>
-{% endcapture_global %}
+{% endcapture_script %}