Gradient.types.ps1xml
|
<!-- Generated with EZOut 2.0.6: Install-Module EZOut or https://github.com/StartAutomating/EZOut --> <Types> <Type> <Name>Gradient</Name> <Members> <MemberSet> <Name>PSStandardMembers</Name> <Members> <PropertySet> <Name>DefaultDisplayPropertySet</Name> <ReferencedProperties> <Name>Input</Name> <Name>CSS</Name> </ReferencedProperties> </PropertySet> </Members> </MemberSet> <AliasProperty> <Name>GradientTypes</Name> <ReferencedMemberName>GradientType</ReferencedMemberName> </AliasProperty> <ScriptMethod> <Name>ToString</Name> <Script> <# .SYNOPSIS Stringifies the gradient .DESCRIPTION Gets the gradient as a string. By default, returns the CSS gradient. If any arguments are passed and are properties of this object, they will be returned as strings. .EXAMPLE "$(gradient '#4488ff' '#224488')" .EXAMPLE (gradient '#4488ff' '#224488').ToString("html") #> param() if ($args) { $anymatching = @(foreach ($arg in $args) { $thisArg = $this.$arg if ($thisArg) { if ($thisArg -is [xml]) { $thisArg.Outerxml } else { $thisArg } } }) if ($anymatching) { return ($anymatching -as 'string[]' -join [Environment]::NewLine) } } return "$($this.CSS)" </Script> </ScriptMethod> <ScriptProperty> <Name>CSS</Name> <GetScriptBlock> <# .SYNOPSIS Gets Gradient CSS .DESCRIPTION Gets the Gradient as CSS. .EXAMPLE gradient '#4488ff', '#224488' | Select-Object -Expand CSS #> param() # Get our gradient type $gradientTypes = $this.GradientTypes $gradientStack = @() $gradientValues = @(foreach ($in in $this.input) { if ($in.pstypenames -eq 'gradient') { $gradientStack += $in continue } if ($in -notmatch $this.GradientTypePattern) { $in } }) $ShallowJoiner = (', ' + [Environment]::NewLine + (' ' * 2)) if ($gradientValues) { if (-not $gradientTypes) { $gradientTypes = 'radial-gradient'} $gradientCss = @(foreach ($gradientType in $gradientTypes) { "$gradientType($( [Environment]::NewLine + (' ' * 2) + $( @( $gradientValues ) -join $ShallowJoiner ) ))" }) -join ', ' } if ($gradientStack) { $deepJoiner = (', ' + [Environment]::NewLine) if (-not $gradientValues) { $gradientStack -join $deepJoiner } else { @($gradientStack;$gradientCss) -join $deepJoiner } } elseif ($gradientValues) { $gradientCss } </GetScriptBlock> </ScriptProperty> <ScriptProperty> <Name>GradientType</Name> <GetScriptBlock> <# .SYNOPSIS Gets the Gradient Type .DESCRIPTION Gets the Gradient Types found in the Gradient's input. If no type is found, radial-gradient is the default. #> $foundTypes = @(foreach ($in in $this.input) { if ($in -match $this.GradientTypePattern) { $in -replace '(?:-gradient)?$', '-gradient' } }) if (-not $foundTypes) { $foundTypes = @('radial-gradient') } return $foundTypes </GetScriptBlock> </ScriptProperty> <ScriptProperty> <Name>GradientTypePattern</Name> <GetScriptBlock> <# .SYNOPSIS Gets the gradient type pattern .DESCRIPTION Gets the regular expression used to identify a gradient type .EXAMPLE Get-Gradiant '#4488ff' ,'#224488' | Select-Object -Expand GradientTypePattern #> '(?:repeating-)?(?>conic|linear|radial)(?:-gradient)?$' </GetScriptBlock> </ScriptProperty> <ScriptProperty> <Name>HTML</Name> <GetScriptBlock> <# .SYNOPSIS Gets the gradient as HTML .DESCRIPTION Gets the gradient as a `<div>` element with a style attribute. #> $styleAttribute = [Web.HttpUtility]::HtmlAttributeEncode(@( "width:100%" "height:100%" "background-image:$($this.CSS)" ) -join ';') "<div style='$styleAttribute'></div>" </GetScriptBlock> </ScriptProperty> <ScriptProperty> <Name>JSON</Name> <GetScriptBlock> <# .SYNOPSIS Gets a json gradient .DESCRIPTION Gets the gradient in JavaScript Object Notation (JSON) This describes the gradient as a background-image with the css inline in a string. This should work seamlessly with [Element.animate](https://developer.mozilla.org/en-US/docs/Web/API/Element/animate) to allow you to animate a gradient change. .LINK https://developer.mozilla.org/en-US/docs/Web/API/Element/animate #> @{ 'background-image' = "$($this.CSS)" } | ConvertTo-Json </GetScriptBlock> </ScriptProperty> <ScriptProperty> <Name>SVG</Name> <GetScriptBlock> <# .SYNOPSIS Gets a SVG gradient .DESCRIPTION Gets the gradient as SVG. SVG Gradients are a bit more picky than their CSS counterpart, and do not support conic gradients. #> $gradientTypeHint = $this.GradientType if (-not $gradientTypeHint) { $gradientTypeHint = 'radial' } if ($gradientTypeHint) { $gradientTypeHint = $gradientTypeHint -replace '-gradient', 'Gradient' $gradientTypeHint = $gradientTypeHint.Substring(0,1).ToLower() + $gradientTypeHint.Substring(1) } # AFAIK, SVG does not support conic gradients. if ($gradientTypeHint -match 'conic') { return } $gradientValues = @(foreach ($in in $this.input) { if ($in -match '\#[a-f0-9]{6}') { $matches.0 } }) if (-not $gradientValues) { return } if ($gradientValues.Count -eq 1) { $gradientValues = @($gradientValues) * 2 } # Now we have at least two colors we want to be a gradient # We need to make sure the offset starts at 0% an ends at 100% # and so we actually need to divide by one less than our fill color, so we end at 100%. $offsetStep = 1 / ($gradientValues.Count - 1) @( # Construct our gradient element. "<${gradientTypeHint}$( # propagate our attributes " id='${gradientTypeHint}-$($gradientValues -replace '#' -join '-')'" )>" @( # and put in our stop colors for ($StopNumber = 0; $StopNumber -lt $gradientValues.Count; $StopNumber++) { "<stop offset='$($offsetStep * $StopNumber * 100)%' stop-color='$($gradientValues[$StopNumber])' />" } ) "</${gradientTypeHint}>" ) -join [Environment]::NewLine </GetScriptBlock> </ScriptProperty> <NoteProperty> <Name>DefaultDisplay</Name> <Value>Input CSS</Value> </NoteProperty> </Members> </Type> </Types> |