diff --git a/docs/editing/extensions.md b/docs/editing/extensions.md index 66bea23..98688af 100644 --- a/docs/editing/extensions.md +++ b/docs/editing/extensions.md @@ -242,3 +242,65 @@ Output: Normal text with inline $\LaTeX$: $\frac{1}{x}$. $$\sum\limits_{i=1}^n{n\choose i}t^i(1-t)^{n-1}P_i$$ + + +### `lottie_color` + +Shows an inline preview of a lottie color array. + +Example: + +``` +{lottie_color:1, 0.5, 0} +``` + +Output: + +{lottie_color:1, 0.5, 0} + + +### `lottie_hexcolor` + +Shows an inline preview of a color from hex code. + +Example: + +``` +{lottie_hexcolor:#FF8000} +``` + +Output: + +{lottie_hexcolor:#FF8000} + + +### `lottie_gradient` + +Shows an inline preview of a lottie gradient (without alpha). + +Example: + +``` +{lottie_gradient:0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96} +``` + +Output: + +{lottie_gradient:0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96} + + +### `lottie_gradient_alpha` + +Shows an inline preview of a lottie gradient (with alpha). + +Alpha stop offsets need to match the color stop offsets. + +Example: + +``` +{lottie_gradient_alpha:0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96, 0, 0.8, 0.5, 0.2, 1, 1} +``` + +Output: + +{lottie_gradient_alpha:0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96, 0, 0.8, 0.5, 0.2, 1, 1} diff --git a/docs/specs/values.md b/docs/specs/values.md index 5a82ba8..58ec69b 100644 --- a/docs/specs/values.md +++ b/docs/specs/values.md @@ -50,22 +50,22 @@ So let's say you want these colors: the array will look like the following: -`[0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96]` +{lottie_gradient:0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96} | Value | Description | |-----------|---| | `0` | Offset of the 1st color (`0` means at the start) | -| `0.16` | Red component for the 1st color | -| `0.18` | Green component for the 1st color | -| `0.46` | Blue component for the 1st color | +| `0.16` | Red component for the 1st color | +| `0.18` | Green component for the 1st color | +| `0.46` | Blue component for the 1st color | | `0.5` | Offset of the 2nd color (`0.5` means half way) | -| `0.2` | Red component for the 2nd color | -| `0.31` | Green component for the 2nd color | +| `0.2` | Red component for the 2nd color | +| `0.31` | Green component for the 2nd color | | `0.69` | Blue component for the 2nd color | | `1` | Offset of the 3rd color (`1` means at the end) | -| `0.77` | Red component for the 3rd color | -| `0.85` | Green component for the 3rd color | -| `0.96` | Blue component for the 3rd color | +| `0.77` | Red component for the 3rd color | +| `0.85` | Green component for the 3rd color | +| `0.96` | Blue component for the 3rd color | <h3>Gradient with transparency</h3> @@ -76,7 +76,7 @@ So assume the same colors as before, but opacity of 80% for the first color and The array will look like this: -`[0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96, 0, 0.8, 0.5, 1, 1, 1]` +{lottie_gradient_alpha:0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96, 0, 0.8, 0.5, 0.2, 1, 1} It's the same array as the case without transparency but with the following values added at the end: @@ -86,7 +86,7 @@ It's the same array as the case without transparency but with the following valu | `0` | Offset of the 1st color (`0` means at the start) | | `0.8` | Alpha component for the 1st color | | `0.5` | Offset of the 2nd color (`0.5` means half way) | -| `1` | Alpha component for the 2nd color | +| `0.2` | Alpha component for the 2nd color | | `1` | Offset of the 3rd color (`1` means at the end) | | `1` | Alpha component for the 3rd color | diff --git a/docs/static/css/lottie-theme.css b/docs/static/css/lottie-theme.css index d861e5f..15d545b 100644 --- a/docs/static/css/lottie-theme.css +++ b/docs/static/css/lottie-theme.css @@ -111,3 +111,7 @@ a:hover { text-decoration: none; background-color: #006a5f; } + +.container { + width: fit-content; +} diff --git a/tools/lottie_markdown.py b/tools/lottie_markdown.py index de84f6c..1928696 100644 --- a/tools/lottie_markdown.py +++ b/tools/lottie_markdown.py @@ -980,7 +980,6 @@ def __init__(self, pattern, md, mult): def handleMatch(self, match, data): span = etree.Element("span") - span.attrib["style"] = "font-family: right" if self.mult == -1: hex = match.group(1) @@ -1001,6 +1000,62 @@ def handleMatch(self, match, data): return span, match.start(0), match.end(0) +class LottieGradient(InlineProcessor): + def __init__(self, pattern, md, alpha): + super().__init__(pattern, md) + self.alpha = alpha + + def handleMatch(self, match, data): + span = etree.Element("span") + + values = list(map(float, match.group(1).split(","))) + + stops = [] + + if self.alpha: + n_colors = len(values) // 6 + split = n_colors * 4 + for i in range(n_colors): + color_i = i * 4 + alpha_i = split + i * 2 + stops.append([ + values[color_i], + values[color_i + 1], values[color_i + 2], values[color_i + 3], + values[alpha_i + 1] + ]) + else: + n_colors = len(values) // 4 + for i in range(n_colors): + color_i = i * 4 + stops.append([ + values[color_i], + values[color_i + 1], values[color_i + 2], values[color_i + 3], + 1 + ]) + + css_grad = ",".join( + "rgba(%s, %s, %s, %s) %s%%" % ( + v[1] * 255, + v[2] * 255, + v[3] * 255, + v[4], + v[0] * 100, + ) + for v in stops + ) + + etree.SubElement(span, "code").text = "[%s]" % match.group(1) + + alpha_bg = etree.SubElement(span, "div") + alpha_bg.attrib["class"] = "alpha-checkered" + + color = etree.SubElement(alpha_bg, "div") + color.attrib["style"] = css_style(background="linear-gradient(90deg, %s)" % css_grad) + color.attrib["class"] = "gradient-preview" + + return span, match.start(0), match.end(0) + + def block_to_html(block_processor, block): match = HTML_PLACEHOLDER_RE.match(block) if match: @@ -1146,6 +1201,8 @@ def extendMarkdown(self, md): md.inlinePatterns.register(SchemaInheritance(md, ts), "schema_inheritance", 175) md.inlinePatterns.register(BCP14(md), "bcp14", 175) md.inlinePatterns.register(RfcLink(md), "rfc", 175) + md.inlinePatterns.register(LottieGradient(r'{lottie_gradient:((?:[^,]+\s*,?\s*)+)}', md, False), 'lottie_gradient', 175) + md.inlinePatterns.register(LottieGradient(r'{lottie_gradient_alpha:((?:[^,]+\s*,?\s*)+)}', md, True), 'lottie_gradient_alpha', 175) md.parser.blockprocessors.register( RawHTML(