@pageboard/html 0.10.15 → 0.10.18

package/elements/card.js

@@ -18,7 +18,7 @@ exports.cards = {
 		shape: {
 			title: 'Shape',
 			anyOf: [{
-				type: 'null',
+				const: null,
 				title: 'Default',
 			}, {
 				const: "square",
@@ -33,9 +33,8 @@ exports.cards = {
 		},
 		responsive: {
 			title: 'Responsive',
-			nullable: true,
 			anyOf: [{
-				title: 'Disable',
+				title: 'No',
 				const: null
 			}, {
 				title: 'Stackable',

package/elements/form.js

@@ -92,7 +92,7 @@ exports.api_form = {
 					title: 'Method',
 					nullable: true,
 					type: "string",
-					pattern: "^(\\w+\\.\\w+)?$"
+					pattern: /^(\w+\.\w+)?$/.source
 				},
 				parameters: {
 					title: 'Parameters',

package/elements/grid.js

@@ -17,8 +17,10 @@ exports.grid = {
 		},
 		responsive: {
 			title: 'Responsive',
-			nullable: true,
 			anyOf: [{
+				title: 'No',
+				const: null
+			}, {
 				title: 'Stackable',
 				const: 'stackable'
 			}, {
@@ -67,9 +69,8 @@ exports.grid_row = {
 	properties: {
 		responsive: {
 			title: 'Responsive',
-			nullable: true,
 			anyOf: [{
-				title: 'Disable',
+				title: 'No',
 				const: null
 			}, {
 				title: 'Stackable',

package/elements/image.js

@@ -12,8 +12,9 @@ exports.image = {
 		url: {
 			title: 'Address',
 			description: 'Local or remote URL',
-			nullable: true,
 			anyOf: [{
+				type: "null"
+			}, {
 				type: "string",
 				format: "uri"
 			}, {
@@ -156,8 +157,9 @@ exports.inlineImage = {
 		url: {
 			title: 'Address',
 			description: 'Local or remote URL',
-			nullable: true,
 			anyOf: [{
+				type: "null"
+			}, {
 				type: "string",
 				format: "uri"
 			}, {

package/elements/inputs.js

@@ -156,8 +156,8 @@ exports.input_text = {
 		nodes: 'inline*'
 	},
 	patterns: {
-		tel: '^(\\(\\d+\\))? *\\d+([ .\\-]?\\d+)*$',
-		email: '^[\\w.!#$%&\'*+\\/=?^`{|}~-]+@\\w(?:[\\w-]{0,61}\\w)?(?:\\.\\w(?:[\\w-]{0,61}\\w)?)*$'
+		tel: /^(\(\d+\))? *\d+([ .\-]?\d+)*$/.source,
+		email: /^[\w.!#$%&'*+\/=?^`{|}~-]+@\w(?:[\w-]{0,61}\w)?(?:\.\w(?:[\w-]{0,61}\w)?)*$/.source
 	},
 	html: `<div class="[width|num: wide] field [type|eq:hidden:hidden:]">
 		<label block-content="label">Label</label>

package/elements/layout.js

@@ -106,8 +106,9 @@ exports.layout = {
 				image: {
 					title: 'Image',
 					description: 'Local or remote URL',
-					nullable: true,
 					anyOf: [{
+						type: "null"
+					}, {
 						type: "string",
 						format: "uri"
 					}, {
@@ -168,7 +169,7 @@ exports.layout = {
 				size: {
 					title: 'Size',
 					anyOf: [{
-						type: 'null',
+						const: null,
 						title: 'Auto'
 					}, {
 						const: 'cover',
@@ -181,7 +182,7 @@ exports.layout = {
 				position: {
 					title: 'Position',
 					anyOf: [{
-						type: 'null',
+						const: null,
 						title: 'Top Left'
 					}, {
 						const: 'top center',
@@ -212,7 +213,7 @@ exports.layout = {
 				repeat: {
 					title: 'Repeat',
 					anyOf: [{
-						type: 'null',
+						const: null,
 						title: 'Repeat'
 					}, {
 						const: 'no-repeat',
@@ -234,7 +235,7 @@ exports.layout = {
 				attachment: {
 					title: 'Attachment',
 					anyOf: [{
-						type: 'null',
+						const: null,
 						title: 'Local'
 					}, {
 						const: 'scroll',

package/elements/media.js

@@ -8,8 +8,9 @@ exports.video = {
 		url: {
 			title: 'Address',
 			description: 'Local or remote URL',
-			nullable: true,
 			anyOf: [{
+				type: "null"
+			}, {
 				type: "string",
 				format: "uri"
 			}, {
@@ -88,8 +89,9 @@ exports.audio = {
 		url: {
 			title: 'Address',
 			description: 'Local or remote URL',
-			nullable: true,
 			anyOf: [{
+				type: "null"
+			}, {
 				type: "string",
 				format: "uri"
 			}, {

package/elements/menu.js

@@ -9,7 +9,6 @@ exports.menu = {
 	properties: {
 		direction: {
 			title: 'Direction',
-			nullable: true,
 			anyOf: [{
 				const: null,
 				title: "Horizontal"
@@ -37,7 +36,6 @@ exports.menu_group = {
 	properties: {
 		position: {
 			title: 'Position',
-			nullable: true,
 			anyOf: [{
 				const: null,
 				title: "Left"
@@ -153,7 +151,6 @@ exports.menu_item_dropdown = {
 	properties: {
 		position: {
 			title: 'Position',
-			nullable: true,
 			anyOf: [{
 				const: null,
 				title: "Left"

package/elements/page.js

@@ -16,9 +16,8 @@ exports.page.properties.transition = {
 	properties: {
 		close: {
 			title: 'Close',
-			nullable: true,
 			anyOf: [{
-				type: 'null',
+				const: null,
 				title: 'None'
 			}, {
 				const: 'tr-up',
@@ -39,9 +38,8 @@ exports.page.properties.transition = {
 		},
 		open: {
 			title: 'Open',
-			nullable: true,
 			anyOf: [{
-				type: 'null',
+				const: null,
 				title: 'None'
 			}, {
 				const: 'tr-up',

package/elements/paragraph.js

@@ -128,7 +128,7 @@ exports.heading = {
 		id: {
 			nullable: true,
 			type: 'string',
-			pattern: '^[a-z0-9-]*$'
+			pattern: /^[a-z0-9-]*$/.source
 		}
 	},
 	contents: {

package/elements/rating.js

@@ -27,7 +27,7 @@ exports.rating = {
 			title: 'Color',
 			anyOf: [{
 				title: 'Default',
-				type: 'null'
+				const: null
 			}, {
 				title: 'Star',
 				const: "star"

package/lib/nouislider.js

@@ -714,6 +714,7 @@
         var hover = entry.indexOf("hover") >= 0;
         var unconstrained = entry.indexOf("unconstrained") >= 0;
         var dragAll = entry.indexOf("drag-all") >= 0;
+        var smoothSteps = entry.indexOf("smooth-steps") >= 0;
         if (fixed) {
             if (parsed.handles !== 2) {
                 throw new Error("noUiSlider: 'fixed' behaviour must be used with 2 handles");
@@ -728,6 +729,7 @@
             tap: tap || snap,
             drag: drag,
             dragAll: dragAll,
+            smoothSteps: smoothSteps,
             fixed: fixed,
             snap: snap,
             hover: hover,
@@ -1472,6 +1474,14 @@
                     scope_Body.removeEventListener("selectstart", preventDefault);
                 }
             }
+            if (options.events.smoothSteps) {
+                data.handleNumbers.forEach(function (handleNumber) {
+                    setHandle(handleNumber, scope_Locations[handleNumber], true, true, false, false);
+                });
+                data.handleNumbers.forEach(function (handleNumber) {
+                    fireEvent("update", handleNumber);
+                });
+            }
             data.handleNumbers.forEach(function (handleNumber) {
                 fireEvent("change", handleNumber);
                 fireEvent("set", handleNumber);
@@ -1771,7 +1781,7 @@
             });
         }
         // Split out the handle positioning logic so the Move event can use it, too
-        function checkHandlePosition(reference, handleNumber, to, lookBackward, lookForward, getValue) {
+        function checkHandlePosition(reference, handleNumber, to, lookBackward, lookForward, getValue, smoothSteps) {
             var distance;
             // For sliders with multiple handles, limit movement to the other handle.
             // Apply the margin option by adding it to the handle positions.
@@ -1810,7 +1820,9 @@
                     to = Math.min(to, distance);
                 }
             }
-            to = scope_Spectrum.getStep(to);
+            if (!smoothSteps) {
+                to = scope_Spectrum.getStep(to);
+            }
             // Limit percentage to the 0 - 100 range
             to = limit(to);
             // Return false if handle can't move
@@ -1830,6 +1842,7 @@
             var proposals = locations.slice();
             // Store first handle now, so we still have it in case handleNumbers is reversed
             var firstHandle = handleNumbers[0];
+            var smoothSteps = options.events.smoothSteps;
             var b = [!upward, upward];
             var f = [upward, !upward];
             // Copy handleNumbers so we don't change the dataset
@@ -1842,7 +1855,7 @@
             // Step 1: get the maximum percentage that any of the handles can move
             if (handleNumbers.length > 1) {
                 handleNumbers.forEach(function (handleNumber, o) {
-                    var to = checkHandlePosition(proposals, handleNumber, proposals[handleNumber] + proposal, b[o], f[o], false);
+                    var to = checkHandlePosition(proposals, handleNumber, proposals[handleNumber] + proposal, b[o], f[o], false, smoothSteps);
                     // Stop if one of the handles can't move.
                     if (to === false) {
                         proposal = 0;
@@ -1860,7 +1873,8 @@
             var state = false;
             // Step 2: Try to set the handles with the found percentage
             handleNumbers.forEach(function (handleNumber, o) {
-                state = setHandle(handleNumber, locations[handleNumber] + proposal, b[o], f[o]) || state;
+                state =
+                    setHandle(handleNumber, locations[handleNumber] + proposal, b[o], f[o], false, smoothSteps) || state;
             });
             // Step 3: If a handle moved, fire events
             if (state) {
@@ -1905,9 +1919,9 @@
         }
         // Test suggested values and apply margin, step.
         // if exactInput is true, don't run checkHandlePosition, then the handle can be placed in between steps (#436)
-        function setHandle(handleNumber, to, lookBackward, lookForward, exactInput) {
+        function setHandle(handleNumber, to, lookBackward, lookForward, exactInput, smoothSteps) {
             if (!exactInput) {
-                to = checkHandlePosition(scope_Locations, handleNumber, to, lookBackward, lookForward, false);
+                to = checkHandlePosition(scope_Locations, handleNumber, to, lookBackward, lookForward, false, smoothSteps);
             }
             if (to === false) {
                 return false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pageboard/html",
-  "version": "0.10.15",
+  "version": "0.10.18",
   "description": "",
   "main": "index.js",
   "scripts": {

package/ui/menu.css

@@ -45,14 +45,19 @@
 	display: flex;
 	flex-direction: column;
 }
+.right.burger .popup.item > .placer {
+	left: 0;
+	right:0;
+}
 .right.popup.item > .placer > div {
 	left:auto;
 	right:0;
 }
+.fixed.popup.item {
+	position:static !important;
+}
 .fixed.popup.item > .placer > div {
-	position:fixed;
-	max-width: 100%;
-	max-height: 100%;
+	max-width: 100vw;
 }
 .center.popup.item > .placer > div {
 	transform: translateX(-50%);
@@ -79,7 +84,6 @@
 
 /* menu_group */
 element-menu {
-	position: relative;
 	flex-shrink: 1;
 }
 .ui.menu:not(.vertical) > element-menu {
@@ -96,12 +100,12 @@ element-menu > [block-content="items"] {
 	display:flex;
 }
 element-menu.burger > [block-content="items"] {
-	position: fixed;
 	left:0;
 }
 element-menu.burger.right > [block-content="items"] {
-	left:auto;
-	right: 0;
+	position: absolute;
+	pointer-events: none;
+	height: 0;
 }
 
 element-menu:not(.burger) > .item {
@@ -114,6 +118,9 @@ element-menu.burger .placer .title {
 element-menu.burger > .item .popup.item {
 	display:block;
 }
+.ui.menu [block-type="menu_item_popup"] {
+	position:initial !important;
+}
 element-menu.burger .placer .popup.active .title {
 	margin-bottom:0.5em;
 }
@@ -123,6 +130,10 @@ element-menu.burger > [block-content="items"] > * {
 element-menu.burger .popup.item.active > .placer > div {
 	display:block;
 }
+element-menu.burger .popup.item > .placer > div {
+	left: 0 !important;
+	right: 0 !important;
+}
 element-menu.burger > .item .dropdown.item:hover > .menu,
 element-menu.burger > .item .popup.item:hover > .placer > div {
 	display:none !important;
@@ -135,8 +146,8 @@ element-menu.burger > .item .dropdown.item.active > .menu {
 }
 
 element-menu.burger > .item .popup.item.active > .placer > div {
-	display:block !important;
-	position:relative;
+	display: block !important;
+	position: relative;
 }
 element-menu.burger > .item:hover > .popup.item {
 	display:block;
@@ -147,7 +158,7 @@ element-menu.burger > .item .placer .menu .ui.dropdown {
 }
 
 element-menu.burger > .item .popup.item > .placer {
-	position:relative;
+	position: relative;
 }
 element-menu.burger > .item .popup.item > .placer > div > .grid {
 	border:0 !important;
@@ -159,9 +170,7 @@ element-menu.burger > .popup > .icon {
 	font-weight: bold;
 	font-family: sans-serif;
 }
-element-menu.burger > .popup > .placer > .menu {
-	right:auto; /* disables the right:0 given by .popup > .placer > div */
-}
+
 
 @media screen and (max-width: 768px) {
 	.ui.menu [block-type="menu_item_text"] {

package/ui/menu.js

@@ -33,7 +33,7 @@ class HTMLElementMenu extends VirtualHTMLElement {
 					const styles = window.getComputedStyle(this);
 					const parentWidth = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight) + this.offsetWidth;
 					const menuWidth = menu.offsetWidth;
-					this.classList.toggle('burger', parentWidth <= menuWidth);
+					this.classList.toggle('burger', menuWidth >= parentWidth);
 				});
 			});
 			this.observer.observe(this.parentNode);
@@ -55,9 +55,9 @@ class HTMLElementMenu extends VirtualHTMLElement {
 				tosser.classList.add('inactive');
 				tosser.blur();
 			} else {
-				const padding = this.offsetTop + this.offsetHeight;
-				const menu = tosser.lastElementChild.lastElementChild;
-				menu.style.maxHeight = `calc(100% - ${padding}px)`;
+				const placer = tosser.lastElementChild;
+				const padding = placer.offsetTop;
+				placer.lastElementChild.style.maxHeight = `calc(100vh - ${padding}px)`;
 			}
 		} else if (item) {
 			this.active = item != this.active ? item : null;