Skip to content

Commit 94e1fff

Browse files
StartAutomatingStartAutomating
authored
Merge pull request #24 from PowerShellWeb/Gradient-Growth
Gradient 0.1.1
2 parents 597947f + db1fe7a commit 94e1fff

File tree

9 files changed

+337
-42
lines changed

9 files changed

+337
-42
lines changed

‎CHANGELOG.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1+
## Gradient 0.1.1:
2+
3+
* Better Gradient Stacking (#21)
4+
* Gradient.css joins with newlines (#20)
5+
* Gradient.json returns the gradient as json (for easy Element.animate) (#6)
6+
* Gradient.html returns the gradient as an HTML fragment (#22)
7+
* Gradient.ToString is more flexible (#23)
8+
9+
---
10+
111
## Gradient 0.1:
212

313
> Initial Gradient Module (#1)

‎Gradient.psd1‎

Lines changed: 11 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
RootModule = 'Gradient.psm1'
1313

1414
# Version number of this module.
15-
ModuleVersion = '0.1'
15+
ModuleVersion = '0.1.1'
1616

1717
# Supported PSEditions
1818
# CompatiblePSEditions = @()
@@ -109,28 +109,17 @@ PrivateData = @{
109109

110110
# ReleaseNotes of this module
111111
ReleaseNotes = @'
112-
## Gradient 0.1:
113-
114-
> Initial Gradient Module (#1)
115-
116-
* `Get-Gradient` (aka `Gradient`) gets gradients (#3)
117-
* It returns `Gradient` objects, using the `.Input`
118-
* Have a `.CSS` property (#4)
119-
* Hava a `.SVG` property (#5)
120-
* Have a `.GradientTypePattern` (#15)
121-
* Can get a `.GradientType` (#16) (defaulting to `radial-gradient`)
122-
* Will `.ToString()` to `.CSS` (#17)
123-
* Displays Input and CSS by default (#18)
124-
* Basic Module Scaffolding
125-
* GitHub Workflow (#2)
126-
* GitHub Action (#7)
127-
* Tests (#8)
128-
* Sponsorship (#14)
129-
* Code of Conduct (#9)
130-
* Contributing Guide (#10)
131-
* Security notice (#11)
132-
* Also, initial examples are in `/Examples` (#13)
112+
## Gradient 0.1.1:
133113
114+
* Better Gradient Stacking (#21)
115+
* Gradient.css joins with newlines (#20)
116+
* Gradient.json returns the gradient as json (for easy Element.animate) (#6)
117+
* Gradient.html returns the gradient as an HTML fragment (#22)
118+
* Gradient.ToString is more flexible (#23)
119+
120+
---
121+
122+
Additional history found in [CHANGELOG](https://github.com/PowerShellWeb/Gradient/blob/main/CHANGELOG.md)
134123
'@
135124

136125
# Prerelease string of this module

‎Gradient.tests.ps1‎

Lines changed: 72 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,86 @@
11
describe Gradient {
22
it 'Generates gradients' {
33
$gradient = '#4488ff', '#224488' | Gradient
4-
"$gradient" | Should -Match '^radial-gradient\(.+?\)'
4+
"$gradient" | Should -Match '^radial-gradient\([\s\S]+?\)'
55
}
66
it 'Can stack gradients by joining them with commas' {
77
$gradients = @(
88
'linear', '217deg', 'rgb(255 0 0 / 80%)', 'transparent 70.71%' | Gradient
99
'linear', '127deg', 'rgb(0 255 0 / 80%)', 'transparent 70.71%' | Gradient
1010
'linear', '336deg', 'rgb(0 0 255 / 80%)', 'transparent 70.71%' | Gradient
1111
)
12+
$($gradients | Gradient) | Should -Match 'linear-gradient[\s\S]+?,'
13+
}
14+
it 'Can stack gradients' {
15+
16+
$gradients = @(
17+
gradient repeating-radial @(
18+
'circle closest-side at 0.01% 0.01%'
19+
'color-mix(in srgb, red 50%, transparent) 1rem'
20+
'color-mix(in srgb, green 50%, transparent) 2rem'
21+
'color-mix(in srgb, blue 50%, transparent) 3rem'
22+
)
23+
24+
gradient repeating-radial @(
25+
'circle closest-side at 99.99% 0.01%'
26+
'color-mix(in srgb, red 50%, transparent) 1rem'
27+
'color-mix(in srgb, green 50%, transparent) 2rem'
28+
'color-mix(in srgb, blue 50%, transparent) 3rem'
29+
)
30+
)
1231

13-
$($gradients -join ',') | Should -Match 'linear-gradient.+?,'
32+
"$($gradients | gradient)" -match 'repeating-radial-gradient[\s\S]+?repeating-radial-gradient'
33+
}
34+
35+
it 'Can stack multiple types' {
36+
$gradients = @(
37+
gradient repeating-radial @(
38+
'circle closest-side at 0.01% 0.01%'
39+
'color-mix(in srgb, red 33%, transparent) 1rem'
40+
'color-mix(in srgb, green 33%, transparent) 2rem'
41+
'color-mix(in srgb, blue 33%, transparent) 3rem'
42+
)
43+
44+
gradient repeating-linear @(
45+
'135deg'
46+
'color-mix(in srgb, red 33%, transparent) 1rem'
47+
'color-mix(in srgb, green 33%, transparent) 2rem'
48+
'color-mix(in srgb, blue 33%, transparent) 3rem'
49+
)
50+
51+
gradient repeating-conic @(
52+
'from 180deg at 99.99% 0.01%'
53+
'color-mix(in srgb, red 33%, transparent) 0% 1%'
54+
'color-mix(in srgb, green 33%, transparent) 1% 2%'
55+
'color-mix(in srgb, blue 33%, transparent) 2% 3%'
56+
)
57+
) | gradient
58+
59+
"$($gradients)" | Should -Match 'repeating-radial-gradient'
60+
"$($gradients)" | Should -Match 'repeating-linear-gradient'
61+
"$($gradients)" | Should -Match 'repeating-conic-gradient'
62+
63+
$gradients.ToString("html") > ./mutli.html
64+
}
65+
it 'Can be clever with ToString' {
66+
gradient repeating-radial 'red 1rem', 'green 2rem', 'blue 3rem'
1467

68+
$gradient = @(
69+
gradient repeating-radial @(
70+
'circle closest-side at 0.01% 0.01%'
71+
'color-mix(in srgb, red 50%, transparent) 1rem'
72+
'color-mix(in srgb, green, transparent) 2rem'
73+
'color-mix(in srgb, blue, transparent) 3rem'
74+
)
75+
76+
gradient repeating-radial @(
77+
'circle closest-side at 99.99% 0.01%'
78+
'color-mix(in srgb, red 50%, transparent) 1rem'
79+
'color-mix(in srgb, green 50%, transparent) 2rem'
80+
'color-mix(in srgb, blue 50%, transparent) 3rem'
81+
)
82+
) | Gradient
83+
84+
$gradient.ToString("html") > ./test.html
1585
}
16-
1786
}

‎Gradient.types.ps1xml‎

Lines changed: 97 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,32 @@
2727
Stringifies the gradient
2828
.DESCRIPTION
2929
Gets the gradient as a string. By default, returns the CSS gradient.
30+
31+
If any arguments are passed and are properties of this object,
32+
they will be returned as strings.
33+
.EXAMPLE
34+
"$(gradient '#4488ff' '#224488')"
35+
.EXAMPLE
36+
(gradient '#4488ff' '#224488').ToString("html")
3037
#>
38+
param()
39+
40+
if ($args) {
41+
$anymatching = @(foreach ($arg in $args) {
42+
$thisArg = $this.$arg
43+
if ($thisArg) {
44+
if ($thisArg -is [xml]) {
45+
$thisArg.Outerxml
46+
} else {
47+
$thisArg
48+
}
49+
}
50+
})
51+
if ($anymatching) {
52+
return ($anymatching -as 'string[]' -join [Environment]::NewLine)
53+
}
54+
}
55+
3156
return "$($this.CSS)"
3257
</Script>
3358
</ScriptMethod>
@@ -46,20 +71,45 @@ return "$($this.CSS)"
4671
param()
4772
# Get our gradient type
4873
$gradientTypes = $this.GradientTypes
74+
75+
$gradientStack = @()
76+
4977
$gradientValues = @(foreach ($in in $this.input) {
78+
if ($in.pstypenames -eq 'gradient') {
79+
$gradientStack += $in
80+
continue
81+
}
5082
if ($in -notmatch $this.GradientTypePattern) {
5183
$in
5284
}
5385
})
5486

55-
if (-not $gradientTypes) { $gradientTypes = 'radial-gradient'}
56-
@(foreach ($gradientType in $gradientTypes) {
57-
"$gradientType($(
58-
@(
59-
$gradientValues
60-
) -join ', '
61-
))"
62-
}) -join ', '
87+
$ShallowJoiner = (', ' + [Environment]::NewLine + (' ' * 2))
88+
if ($gradientValues) {
89+
if (-not $gradientTypes) { $gradientTypes = 'radial-gradient'}
90+
$gradientCss = @(foreach ($gradientType in $gradientTypes) {
91+
"$gradientType($(
92+
[Environment]::NewLine + (' ' * 2) +
93+
$(
94+
@(
95+
$gradientValues
96+
) -join $ShallowJoiner
97+
)
98+
))"
99+
}) -join ', '
100+
}
101+
if ($gradientStack) {
102+
$deepJoiner = (', ' + [Environment]::NewLine)
103+
if (-not $gradientValues) {
104+
$gradientStack -join $deepJoiner
105+
} else {
106+
@($gradientStack;$gradientCss) -join $deepJoiner
107+
}
108+
} elseif ($gradientValues) {
109+
$gradientCss
110+
}
111+
112+
63113
</GetScriptBlock>
64114
</ScriptProperty>
65115
<ScriptProperty>
@@ -103,6 +153,45 @@ return $foundTypes
103153
'(?:repeating-)?(?&gt;conic|linear|radial)(?:-gradient)?$'
104154
</GetScriptBlock>
105155
</ScriptProperty>
156+
<ScriptProperty>
157+
<Name>HTML</Name>
158+
<GetScriptBlock>
159+
&lt;#
160+
.SYNOPSIS
161+
Gets the gradient as HTML
162+
.DESCRIPTION
163+
Gets the gradient as a `&lt;div&gt;` element with a style attribute.
164+
#&gt;
165+
$styleAttribute = [Web.HttpUtility]::HtmlAttributeEncode(@(
166+
"width:100%"
167+
"height:100%"
168+
"background-image:$($this.CSS)"
169+
) -join ';')
170+
"&lt;div style='$styleAttribute'&gt;&lt;/div&gt;"
171+
</GetScriptBlock>
172+
</ScriptProperty>
173+
<ScriptProperty>
174+
<Name>JSON</Name>
175+
<GetScriptBlock>
176+
&lt;#
177+
.SYNOPSIS
178+
Gets a json gradient
179+
.DESCRIPTION
180+
Gets the gradient in JavaScript Object Notation (JSON)
181+
182+
This describes the gradient as a background-image with the css inline in a string.
183+
184+
This should work seamlessly with
185+
[Element.animate](https://developer.mozilla.org/en-US/docs/Web/API/Element/animate)
186+
to allow you to animate a gradient change.
187+
.LINK
188+
https://developer.mozilla.org/en-US/docs/Web/API/Element/animate
189+
#&gt;
190+
@{
191+
'background-image' = "$($this.CSS)"
192+
} | ConvertTo-Json
193+
</GetScriptBlock>
194+
</ScriptProperty>
106195
<ScriptProperty>
107196
<Name>SVG</Name>
108197
<GetScriptBlock>

‎README.md‎

Lines changed: 61 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,62 @@
1+
<a href='https://www.powershellgallery.com/packages/gradient/'>
2+
<img src='https://img.shields.io/powershellgallery/dt/gradient' />
3+
</a>
4+
15
# Gradient
2-
CSS and SVG Gradient Generator
6+
7+
## CSS Gradient Generator
8+
9+
CSS Gradients are pretty great.
10+
11+
Their syntax is pretty flexible, but can require a commanding knowledge of CSS and comma placement.
12+
13+
This PowerShell module tries to simplify things a bit.
14+
15+
## Installing and Importing
16+
17+
You can install Gradient from the PowerShell Gallery
18+
19+
~~~PowerShell
20+
Install-Module Gradient
21+
~~~
22+
23+
Once installed, you can import Gradient with Import-Module
24+
25+
~~~PowerShell
26+
Import-Module Gradient -PassThru
27+
~~~
28+
29+
### Cloning and Importing
30+
31+
You can also install this module by cloning the repository and importing it
32+
33+
~~~PowerShell
34+
git clone https://github.com/PowerShellWeb/Gradient
35+
Import-Module ./Gradient -PassThru
36+
~~~
37+
38+
## Generating gradients
39+
40+
Gradients are really easy to generate:
41+
42+
Let's make a red green blue radial gradient
43+
44+
~~~PowerShell
45+
gradient red green blue
46+
~~~
47+
48+
This will give us back a Gradient object.
49+
50+
It has our .input and also has a .css property that contains the gradient as CSS
51+
52+
~~~PowerShell
53+
(gradient red green blue).CSS
54+
~~~
55+
56+
Gradients can get pretty cool.
57+
For some inspiration, check out the MDN topic on [using gradients](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Images/Using_gradients)
58+
59+
To get a full sense of what we can do with Gradient,
60+
feel free to check out [my page of gradient experiments](https://MrPowerShell.com/CSS/Gradients).
61+
62+

‎Types/Gradient/ToString.ps1‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,30 @@
33
Stringifies the gradient
44
.DESCRIPTION
55
Gets the gradient as a string. By default, returns the CSS gradient.
6+
7+
If any arguments are passed and are properties of this object,
8+
they will be returned as strings.
9+
.EXAMPLE
10+
"$(gradient '#4488ff' '#224488')"
11+
.EXAMPLE
12+
(gradient '#4488ff' '#224488').ToString("html")
613
#>
14+
param()
15+
16+
if ($args) {
17+
$anymatching = @(foreach ($arg in $args) {
18+
$thisArg = $this.$arg
19+
if ($thisArg) {
20+
if ($thisArg -is [xml]) {
21+
$thisArg.Outerxml
22+
} else {
23+
$thisArg
24+
}
25+
}
26+
})
27+
if ($anymatching) {
28+
return ($anymatching -as 'string[]' -join [Environment]::NewLine)
29+
}
30+
}
31+
732
return "$($this.CSS)"

0 commit comments

Comments
 (0)