add Signature Pad feature (#2183)

Co-authored-by: ethancrawford <[email protected]>

.changeset/ninety-ghosts-shake.md

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

core/scss/_utilities.scss

@@ -43,8 +43,9 @@ $utilities: (
       v-text: vertical-text,
       grab: grab,
       grabbing: grabbing,
+      crosshair: crosshair,
     ),
-  ),
+  ), 
   "border": (
     property: border,
     values: $border-values,

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
 
+  /[email protected]:
+    resolution: {integrity: sha512-nngOixbwLAUOuH3QnZwlgwmynQblxmo4iWacKFwfymJfiY+Qt+9icNtcIe/okqXKun4hJ5QTFmHyC7dmv6lf2w==}
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
     dependencies:

preview/eleventy.config.mjs

@@ -33,7 +33,7 @@ const getCopyList = () => {
 
 	files.forEach((file) => {
 		if (!file.match(/^https?/)) {
-			copy[`node_modules/${dirname(file)}`] = `libs/${dirname(file) }`;
+			copy[`node_modules/${dirname(file)}`] = `libs/${dirname(file)}`;
 		}
 	})
 
@@ -91,7 +91,7 @@ export default function (eleventyConfig) {
 			return {
 				url: file.replace(/^pages\//, '/')
 			}
-});
+		});
 	});
 
 	eleventyConfig.addGlobalData("site", {
@@ -413,12 +413,12 @@ export default function (eleventyConfig) {
 	/**
 	 * Filters
 	 */
-	eleventyConfig.addFilter("miliseconds_to_minutes", function (value) { 
+	eleventyConfig.addFilter("miliseconds_to_minutes", function (value) {
 		// Raturn 3:45 time format
 		const minutes = Math.floor(value / 60000);
 		const seconds = ((value % 60000) / 1000).toFixed(0);
 		return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
-	 });
+	});
 
 	eleventyConfig.addFilter("relative", (page) => {
 		const segments = (page.url || '').replace(/^\//).split('/');
@@ -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

@@ -16,7 +16,7 @@
     "js-compile": "rollup --config build/rollup.config.mjs --sourcemap",
     "js-minify": "pnpm run js-minify-demo && pnpm run js-minify-theme",
     "js-minify-demo": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/preview/js/demo.js.map,includeSources,url=demo.min.js.map\" --output dist/preview/js/demo.min.js dist/preview/js/demo.js",
-    "js-minify-theme": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/preview/js/demo-theme.js.map,includeSources,url=demo-theme.min.js.map\" --output dist/preview/js/demo-theme.min.js dist/preview/js/demo-theme.js", 
+    "js-minify-theme": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/preview/js/demo-theme.js.map,includeSources,url=demo-theme.min.js.map\" --output dist/preview/js/demo-theme.min.js dist/preview/js/demo-theme.js",
     "clean": "shx rm -rf dist demo",
     "html": "pnpm run html-build && pnpm run html-prettify",
     "html-build": "eleventy",
@@ -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",
-    "tinymce": "^7.6.1",
-    "tom-select": "^2.4.2",
-    "typed.js": "^2.1.0",
+    "autosize": "^6.0.1",
+    "choices.js": "^11.0.3",
+    "countup.js": "^2.8.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",
-    "flatpickr": "^4.6.13",
-    "fslightbox": "^3.4.2",
-    "choices.js": "^11.0.3",
-    "countup.js": "^2.8.0",
-    "autosize": "^6.0.1"
+    "star-rating.js": "^4.3.1",
+    "tinymce": "^7.6.1",
+    "tom-select": "^2.4.2",
+    "typed.js": "^2.1.0",
+    "signature_pad": "^5.0.4"
   },
   "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 -%}
+{% 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 %}
-{{ script }}
-{% endfor %}
-
-{% for script in site.captured_once.scripts %}
-{{ script }}
-{% endfor %}
+{% scripts %}
 
 {% 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,87 +8,85 @@
 {% capture script %}
 {% assign colors = include.colors | default: 1 %}
 <script>
-	 // @formatter:off
-	 document.addEventListener("DOMContentLoaded", function () {
-		{% if environment == 'development' %}
-		window.tabler_chart = window.tabler_chart || {};
-		{% endif %}
+document.addEventListener("DOMContentLoaded", function () {
+	{% if environment == 'development' %}
+	window.tabler_chart = window.tabler_chart || {};
+	{% endif %}
 
-		window.ApexCharts && ({% if environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(document.getElementById('chart-{{ id }}'), {
-			chart: {
-				height: {{ height | times: 16 }},
-				type: "heatmap",
-				toolbar: {
-					show: false,
-				},
+	window.ApexCharts && ({% if environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(document.getElementById('chart-{{ id }}'), {
+		chart: {
+			height: {{ height | times: 16 }},
+			type: "heatmap",
+			toolbar: {
+				show: false,
 			},
-			dataLabels: {
-				enabled: {% if include.labels %}true{% else %}false{% endif %}
+		},
+		dataLabels: {
+			enabled: {% if include.labels %}true{% else %}false{% endif %}
+		},
+		{% if include.scale %}
+		plotOptions: {
+			heatmap: {
+				enableShades: {% unless include.no-shades %}true{% else %}false{% endunless %},
+				colorScale: {
+					ranges: [{
+						from: 0,
+						to: 20,
+						name: "Low",
+						color: tabler.getColor("green")
+					}, {
+						from: 21,
+						to: 50,
+						name: "Medium",
+						color: tabler.getColor("blue")
+					}, {
+						from: 51,
+						to: 75,
+						name: "High",
+						color: tabler.getColor("yellow")
+					}, {
+						from: 76,
+						to: 100,
+						name: "Extreme",
+						color: tabler.getColor("red")
+					}]
+				}
+			}
+		},
+		{% else %}
+		colors: [{% if include.color %}'{{ include.color }}'{% else %}{% for color in site.colors limit: colors %}tabler.getColor("{{ color[0] }}"), {% endfor %}{% endif %}],
+		{% endif %}
+		series: [
+			{% for i in site.monthsShort limit: 12 %}
+			{% assign month-i = forloop.index %}
+			{ name: "{{ i }}", data: [{% for j in (1..16) %}{x: '{{ j }}', y: {{ j | random_number: 0, 100  | plus: month-i | random_number: 0, 100 }}},{% endfor %}] },
+			{% endfor %}
+		],
+		xaxis: {
+			type: "category"
+		},
+		legend: {
+			{% if include.legend %}
+			show: true,
+			position: 'bottom',
+			offsetY: 8,
+			markers: {
+				width: 10,
+				height: 10,
+				radius: 100,
 			},
-			{% if include.scale %}
-			plotOptions: {
-				heatmap: {
-					enableShades: {% unless include.no-shades %}true{% else %}false{% endunless %},
-					colorScale: {
-						ranges: [{
-							from: 0,
-							to: 20,
-							name: "Low",
-							color: tabler.getColor("green")
-						}, {
-							from: 21,
-							to: 50,
-							name: "Medium",
-							color: tabler.getColor("blue")
-						}, {
-							from: 51,
-							to: 75,
-							name: "High",
-							color: tabler.getColor("yellow")
-						}, {
-							from: 76,
-							to: 100,
-							name: "Extreme",
-							color: tabler.getColor("red")
-						}]
-					}
-	 			}
+			itemMargin: {
+				horizontal: 8,
 			},
 			{% else %}
-			colors: [{% if include.color %}'{{ include.color }}'{% else %}{% for color in site.colors limit: colors %}tabler.getColor("{{ color[0] }}"), {% endfor %}{% endif %}],
+			show: false,
 			{% endif %}
-			series: [
-				{% for i in site.monthsShort limit: 12 %}
-				{% assign month-i = forloop.index %}
-		  		{ name: "{{ i }}", data: [{% for j in (1..16) %}{x: '{{ j }}', y: {{ j | random_number: 0, 100  | plus: month-i | random_number: 0, 100 }}},{% endfor %}] },
-				{% endfor %}
-			],
-			xaxis: {
-				type: "category"
-			},
-			legend: {
-				{% if include.legend %}
-				show: true,
-				position: 'bottom',
-				offsetY: 8,
-				markers: {
-					width: 10,
-					height: 10,
-					radius: 100,
-				},
-				itemMargin: {
-					horizontal: 8,
-				},
-				{% else %}
-				show: false,
-				{% endif %}
-			},
-		})).render();
-	 });
-	 // @formatter:on
+		},
+	})).render();
+});
 </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 %}