From 6e2b4dcdbd548ac548f61ea37c6eef16f23ce30e Mon Sep 17 00:00:00 2001 From: metacryst Date: Wed, 25 Sep 2024 22:03:32 -0500 Subject: [PATCH] extra functions, new test from amplify lessons --- Test/Element/stacks.test.js | 38 +++++++++++++++ index.js | 93 ++++++++++++++++++++++++++++++++----- 2 files changed, 119 insertions(+), 12 deletions(-) diff --git a/Test/Element/stacks.test.js b/Test/Element/stacks.test.js index aaf8861..3b89650 100644 --- a/Test/Element/stacks.test.js +++ b/Test/Element/stacks.test.js @@ -37,5 +37,43 @@ window.testSuites.push( class testStacks { return "Incorrect amount of children inside vstack!" } } + + NestedStacks() { + register(class File extends Shadow { + $name + + render = () => { + VStack(() => { + HStack(() => { + p("hi") + }) + }) + } + + }, randomName("file")) + + const file = File("asdf") + console.log(file) + let fileStyle = Registry.styles.children[Registry.styles.children.length-1].sheet.cssRules + if(fileStyle[0].cssText.includes("row")) { + return "Should not be horizontal" + } + + console.log(file.innerHTML) + if(!file.children[0].matches("div.HStack")) { + return "The child is not an HStack" + } + + file.rerender() + + if(!file.children[0].matches("div.HStack")) { + return "The child is not an HStack" + } + + let fileStyle2 = Registry.styles.children[Registry.styles.children.length-1].sheet.cssRules + if(fileStyle2[0].cssText.includes("row")) { + return "Should not be horizontal" + } + } }) \ No newline at end of file diff --git a/index.js b/index.js index 77e4566..6320184 100644 --- a/index.js +++ b/index.js @@ -573,6 +573,18 @@ window.Registry = class Registry { } } + static getStyle = function(el) { + let stylesheet = this.styles.querySelector(`:scope > style[id='${el.tagName.toLowerCase()}']`) + return stylesheet?.sheet.cssRules[0]?.cssText + } + + static removeStyle = function(el) { + let stylesheet = document.getElementById(el.tagName.toLowerCase())?.sheet + if(stylesheet.cssRules.length > 0) { + stylesheet.deleteRule(0) + } + } + static addStyle = function(tag) { let stylesheet = this.styles.querySelector(`:scope > style[id='${tag}']`) tag = tag.replace(/\*/g, "all"); @@ -608,6 +620,10 @@ if(!Registry.styles) { document.head.appendChild(Registry.styles); } +HTMLElement.prototype.rerender = function() { + Registry.rerender(this) +} + /* DEFAULT WRAPPERS */ let allStyleProps = ["accentColor", "additiveSymbols", "alignContent", "alignItems", "alignSelf", "alignmentBaseline", "all", "animation", "animationComposition", "animationDelay", "animationDirection", "animationDuration", "animationFillMode", "animationIterationCount", "animationName", "animationPlayState", "animationRange", "animationRangeEnd", "animationRangeStart", "animationTimeline", "animationTimingFunction", "appRegion", "appearance", "ascentOverride", "aspectRatio", "backdropFilter", "backfaceVisibility", "background", "backgroundAttachment", "backgroundBlendMode", "backgroundClip", "backgroundColor", "backgroundImage", "backgroundOrigin", "backgroundPosition", "backgroundPositionX", "backgroundPositionY", "backgroundRepeat", "backgroundSize", "basePalette", "baselineShift", "baselineSource", "blockSize", "border", "borderBlock", "borderBlockColor", "borderBlockEnd", "borderBlockEndColor", "borderBlockEndStyle", "borderBlockEndWidth", "borderBlockStart", "borderBlockStartColor", "borderBlockStartStyle", "borderBlockStartWidth", "borderBlockStyle", "borderBlockWidth", "borderBottom", "borderBottomColor", "borderBottomLeftRadius", "borderBottomRightRadius", "borderBottomStyle", "borderBottomWidth", "borderCollapse", "borderColor", "borderEndEndRadius", "borderEndStartRadius", "borderImage", "borderImageOutset", "borderImageRepeat", "borderImageSlice", "borderImageSource", "borderImageWidth", "borderInline", "borderInlineColor", "borderInlineEnd", "borderInlineEndColor", "borderInlineEndStyle", "borderInlineEndWidth", "borderInlineStart", "borderInlineStartColor", "borderInlineStartStyle", "borderInlineStartWidth", "borderInlineStyle", "borderInlineWidth", "borderLeft", "borderLeftColor", "borderLeftStyle", "borderLeftWidth", "borderRadius", "borderRight", "borderRightColor", "borderRightStyle", "borderRightWidth", "borderSpacing", "borderStartEndRadius", "borderStartStartRadius", "borderStyle", "borderTop", "borderTopColor", "borderTopLeftRadius", "borderTopRightRadius", "borderTopStyle", "borderTopWidth", "borderWidth", "bottom", "boxShadow", "boxSizing", "breakAfter", "breakBefore", "breakInside", "bufferedRendering", "captionSide", "caretColor", "clear", "clip", "clipPath", "clipRule", "color", "colorInterpolation", "colorInterpolationFilters", "colorRendering", "colorScheme", "columnCount", "columnFill", "columnGap", "columnRule", "columnRuleColor", "columnRuleStyle", "columnRuleWidth", "columnSpan", "columnWidth", "columns", "contain", "containIntrinsicBlockSize", "containIntrinsicHeight", "containIntrinsicInlineSize", "containIntrinsicSize", "containIntrinsicWidth", "container", "containerName", "containerType", "content", "contentVisibility", "counterIncrement", "counterReset", "counterSet", "cursor", "cx", "cy", "d", "descentOverride", "direction", "display", "dominantBaseline", "emptyCells", "fallback", "fieldSizing", "fill", "fillOpacity", "fillRule", "filter", "flex", "flexBasis", "flexDirection", "flexFlow", "flexGrow", "flexShrink", "flexWrap", "float", "floodColor", "floodOpacity", "font", "fontDisplay", "fontFamily", "fontFeatureSettings", "fontKerning", "fontOpticalSizing", "fontPalette", "fontSize", "fontStretch", "fontStyle", "fontSynthesis", "fontSynthesisSmallCaps", "fontSynthesisStyle", "fontSynthesisWeight", "fontVariant", "fontVariantAlternates", "fontVariantCaps", "fontVariantEastAsian", "fontVariantLigatures", "fontVariantNumeric", "fontVariantPosition", "fontVariationSettings", "fontWeight", "forcedColorAdjust", "gap", "grid", "gridArea", "gridAutoColumns", "gridAutoFlow", "gridAutoRows", "gridColumn", "gridColumnEnd", "gridColumnGap", "gridColumnStart", "gridGap", "gridRow", "gridRowEnd", "gridRowGap", "gridRowStart", "gridTemplate", "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows", "height", "hyphenateCharacter", "hyphenateLimitChars", "hyphens", "imageOrientation", "imageRendering", "inherits", "initialLetter", "initialValue", "inlineSize", "inset", "insetBlock", "insetBlockEnd", "insetBlockStart", "insetInline", "insetInlineEnd", "insetInlineStart", "isolation", "justifyContent", "justifyItems", "justifySelf", "left", "letterSpacing", "lightingColor", "lineBreak", "lineGapOverride", "lineHeight", "listStyle", "listStyleImage", "listStylePosition", "listStyleType", "margin", "marginBlock", "marginBlockEnd", "marginBlockStart", "marginBottom", "marginInline", "marginInlineEnd", "marginInlineStart", "marginLeft", "marginRight", "marginTop", "marker", "markerEnd", "markerMid", "markerStart", "mask", "maskClip", "maskComposite", "maskImage", "maskMode", "maskOrigin", "maskPosition", "maskRepeat", "maskSize", "maskType", "mathDepth", "mathShift", "mathStyle", "maxBlockSize", "maxHeight", "maxInlineSize", "maxWidth", "minBlockSize", "minHeight", "minInlineSize", "minWidth", "mixBlendMode", "negative", "objectFit", "objectPosition", "objectViewBox", "offset", "offsetAnchor", "offsetDistance", "offsetPath", "offsetPosition", "offsetRotate", "opacity", "order", "orphans", "outline", "outlineColor", "outlineOffset", "outlineStyle", "outlineWidth", "overflow", "overflowAnchor", "overflowClipMargin", "overflowWrap", "overflowX", "overflowY", "overlay", "overrideColors", "overscrollBehavior", "overscrollBehaviorBlock", "overscrollBehaviorInline", "overscrollBehaviorX", "overscrollBehaviorY", "pad", "padding", "paddingBlock", "paddingBlockEnd", "paddingBlockStart", "paddingBottom", "paddingInline", "paddingInlineEnd", "paddingInlineStart", "paddingLeft", "paddingRight", "paddingTop", "page", "pageBreakAfter", "pageBreakBefore", "pageBreakInside", "pageOrientation", "paintOrder", "perspective", "perspectiveOrigin", "placeContent", "placeItems", "placeSelf", "pointerEvents", "position", "prefix", "quotes", "r", "range", "resize", "right", "rotate", "rowGap", "rubyPosition", "rx", "ry", "scale", "scrollBehavior", "scrollMargin", "scrollMarginBlock", "scrollMarginBlockEnd", "scrollMarginBlockStart", "scrollMarginBottom", "scrollMarginInline", "scrollMarginInlineEnd", "scrollMarginInlineStart", "scrollMarginLeft", "scrollMarginRight", "scrollMarginTop", "scrollPadding", "scrollPaddingBlock", "scrollPaddingBlockEnd", "scrollPaddingBlockStart", "scrollPaddingBottom", "scrollPaddingInline", "scrollPaddingInlineEnd", "scrollPaddingInlineStart", "scrollPaddingLeft", "scrollPaddingRight", "scrollPaddingTop", "scrollSnapAlign", "scrollSnapStop", "scrollSnapType", "scrollTimeline", "scrollTimelineAxis", "scrollTimelineName", "scrollbarColor", "scrollbarGutter", "scrollbarWidth", "shapeImageThreshold", "shapeMargin", "shapeOutside", "shapeRendering", "size", "sizeAdjust", "speak", "speakAs", "src", "stopColor", "stopOpacity", "stroke", "strokeDasharray", "strokeDashoffset", "strokeLinecap", "strokeLinejoin", "strokeMiterlimit", "strokeOpacity", "strokeWidth", "suffix", "symbols", "syntax", "system", "tabSize", "tableLayout", "textAlign", "textAlignLast", "textAnchor", "textCombineUpright", "textDecoration", "textDecorationColor", "textDecorationLine", "textDecorationSkipInk", "textDecorationStyle", "textDecorationThickness", "textEmphasis", "textEmphasisColor", "textEmphasisPosition", "textEmphasisStyle", "textIndent", "textOrientation", "textOverflow", "textRendering", "textShadow", "textSizeAdjust", "textSpacingTrim", "textTransform", "textUnderlineOffset", "textUnderlinePosition", "textWrap", "timelineScope", "top", "touchAction", "transform", "transformBox", "transformOrigin", "transformStyle", "transition", "transitionBehavior", "transitionDelay", "transitionDuration", "transitionProperty", "transitionTimingFunction", "translate", "unicodeBidi", "unicodeRange", "userSelect", "vectorEffect", "verticalAlign", "viewTimeline", "viewTimelineAxis", "viewTimelineInset", "viewTimelineName", "viewTransitionName", "visibility", "webkitAlignContent", "webkitAlignItems", "webkitAlignSelf", "webkitAnimation", "webkitAnimationDelay", "webkitAnimationDirection", "webkitAnimationDuration", "webkitAnimationFillMode", "webkitAnimationIterationCount", "webkitAnimationName", "webkitAnimationPlayState", "webkitAnimationTimingFunction", "webkitAppRegion", "webkitAppearance", "webkitBackfaceVisibility", "webkitBackgroundClip", "webkitBackgroundOrigin", "webkitBackgroundSize", "webkitBorderAfter", "webkitBorderAfterColor", "webkitBorderAfterStyle", "webkitBorderAfterWidth", "webkitBorderBefore", "webkitBorderBeforeColor", "webkitBorderBeforeStyle", "webkitBorderBeforeWidth", "webkitBorderBottomLeftRadius", "webkitBorderBottomRightRadius", "webkitBorderEnd", "webkitBorderEndColor", "webkitBorderEndStyle", "webkitBorderEndWidth", "webkitBorderHorizontalSpacing", "webkitBorderImage", "webkitBorderRadius", "webkitBorderStart", "webkitBorderStartColor", "webkitBorderStartStyle", "webkitBorderStartWidth", "webkitBorderTopLeftRadius", "webkitBorderTopRightRadius", "webkitBorderVerticalSpacing", "webkitBoxAlign", "webkitBoxDecorationBreak", "webkitBoxDirection", "webkitBoxFlex", "webkitBoxOrdinalGroup", "webkitBoxOrient", "webkitBoxPack", "webkitBoxReflect", "webkitBoxShadow", "webkitBoxSizing", "webkitClipPath", "webkitColumnBreakAfter", "webkitColumnBreakBefore", "webkitColumnBreakInside", "webkitColumnCount", "webkitColumnGap", "webkitColumnRule", "webkitColumnRuleColor", "webkitColumnRuleStyle", "webkitColumnRuleWidth", "webkitColumnSpan", "webkitColumnWidth", "webkitColumns", "webkitFilter", "webkitFlex", "webkitFlexBasis", "webkitFlexDirection", "webkitFlexFlow", "webkitFlexGrow", "webkitFlexShrink", "webkitFlexWrap", "webkitFontFeatureSettings", "webkitFontSmoothing", "webkitHyphenateCharacter", "webkitJustifyContent", "webkitLineBreak", "webkitLineClamp", "webkitLocale", "webkitLogicalHeight", "webkitLogicalWidth", "webkitMarginAfter", "webkitMarginBefore", "webkitMarginEnd", "webkitMarginStart", "webkitMask", "webkitMaskBoxImage", "webkitMaskBoxImageOutset", "webkitMaskBoxImageRepeat", "webkitMaskBoxImageSlice", "webkitMaskBoxImageSource", "webkitMaskBoxImageWidth", "webkitMaskClip", "webkitMaskComposite", "webkitMaskImage", "webkitMaskOrigin", "webkitMaskPosition", "webkitMaskPositionX", "webkitMaskPositionY", "webkitMaskRepeat", "webkitMaskSize", "webkitMaxLogicalHeight", "webkitMaxLogicalWidth", "webkitMinLogicalHeight", "webkitMinLogicalWidth", "webkitOpacity", "webkitOrder", "webkitPaddingAfter", "webkitPaddingBefore", "webkitPaddingEnd", "webkitPaddingStart", "webkitPerspective", "webkitPerspectiveOrigin", "webkitPerspectiveOriginX", "webkitPerspectiveOriginY", "webkitPrintColorAdjust", "webkitRtlOrdering", "webkitRubyPosition", "webkitShapeImageThreshold", "webkitShapeMargin", "webkitShapeOutside", "webkitTapHighlightColor", "webkitTextCombine", "webkitTextDecorationsInEffect", "webkitTextEmphasis", "webkitTextEmphasisColor", "webkitTextEmphasisPosition", "webkitTextEmphasisStyle", "webkitTextFillColor", "webkitTextOrientation", "webkitTextSecurity", "webkitTextSizeAdjust", "webkitTextStroke", "webkitTextStrokeColor", "webkitTextStrokeWidth", "webkitTransform", "webkitTransformOrigin", "webkitTransformOriginX", "webkitTransformOriginY", "webkitTransformOriginZ", "webkitTransformStyle", "webkitTransition", "webkitTransitionDelay", "webkitTransitionDuration", "webkitTransitionProperty", "webkitTransitionTimingFunction", "webkitUserDrag", "webkitUserModify", "webkitUserSelect", "webkitWritingMode", "whiteSpace", "whiteSpaceCollapse", "widows", "width", "willChange", "wordBreak", "wordSpacing", "wordWrap", "writingMode", "x", "y", "zIndex", "zoom"] @@ -699,7 +715,7 @@ window.ForEach = function (arr, cb) { window.VStack = function (cb = () => {}) { let nowRendering = window.rendering.last() - if(nowRendering.innerHTML === "") { // Parent is Empty, make it a VStack + if(nowRendering.innerHTML.trim() === "") { let styles = ` display: flex; flex-direction: column; @@ -724,7 +740,7 @@ window.VStack = function (cb = () => {}) { window.HStack = function (cb = () => {}) { let nowRendering = window.rendering.last() - if(nowRendering.innerHTML === "") { + if(nowRendering.innerHTML.trim() === "") { let styles = ` display: flex; flex-direction: row; @@ -736,6 +752,14 @@ window.HStack = function (cb = () => {}) { } cb() return nowRendering + } else { + let div = document.createElement("div") + div.classList.add("HStack") + div.style.display = "flex" + div.style.flexDirection = "row" + div.render = cb + Registry.render(div) + return div } } @@ -854,23 +878,60 @@ HTMLElement.prototype.padding = function(direction, value) { return this } -HTMLElement.prototype.margin = function(direction, value) { - if(!value) { - this.style.margin = direction; - Registry.initReactivity(this, ["style", "margin"], value); + HTMLElement.prototype.paddingTop = function(value, unit = "px") { + this.style.paddingTop = value + unit + Registry.initReactivity(this, ["style", "paddingTop"], value); return this } - const directionName = `margin${direction.charAt(0).toUpperCase()}${direction.slice(1)}`; - if (typeof value === 'number') { - this.style[directionName] = `${value}px`; - } else { - this.style[directionName] = value; + HTMLElement.prototype.paddingLeft = function(value, unit = "px") { + this.style.paddingLeft = value + unit + Registry.initReactivity(this, ["style", "paddingLeft"], value); + return this } - Registry.initReactivity(this, ["style", directionName], value); + + HTMLElement.prototype.paddingBottom = function(value, unit = "px") { + this.style.paddingBottom = value + unit + Registry.initReactivity(this, ["style", "paddingBottom"], value); + return this + } + + HTMLElement.prototype.paddingRight = function(value, unit = "px") { + this.style.paddingRight = value + unit + Registry.initReactivity(this, ["style", "paddingRight"], value); + return this + } + +HTMLElement.prototype.margin = function(value, unit = "px") { + this.style.margin = value + unit + Registry.initReactivity(this, ["style", "margin"], value); return this } + HTMLElement.prototype.marginTop = function(value, unit = "px") { + this.style.marginTop = value + unit + Registry.initReactivity(this, ["style", "marginTop"], value); + return this + } + + HTMLElement.prototype.marginLeft = function(value, unit = "px") { + this.style.marginLeft = value + unit + Registry.initReactivity(this, ["style", "marginLeft"], value); + return this + } + + HTMLElement.prototype.marginBottom = function(value, unit = "px") { + this.style.marginBottom = value + unit + Registry.initReactivity(this, ["style", "marginBottom"], value); + return this + } + + HTMLElement.prototype.marginRight = function(value, unit = "px") { + this.style.marginRight = value + unit + Registry.initReactivity(this, ["style", "marginRight"], value); + return this + } + HTMLElement.prototype.width = function(value, unit = "px") { this.style.width = value + unit Registry.initReactivity(this, ["style", "width"], value); @@ -952,6 +1013,14 @@ HTMLElement.prototype.onClick = function(func) { this.addEventListener("click", func) return this } +HTMLElement.prototype.onMouseDown = function(func) { + this.addEventListener("mousedown", func) + return this +} +HTMLElement.prototype.onMouseUp = function(func) { + this.addEventListener("mouseup", func) + return this +} HTMLElement.prototype.onRightClick = function(func) { this.addEventListener("contextmenu", func) return this