-
Notifications
You must be signed in to change notification settings - Fork 254
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: render SVG content with lit svg` (#904)
### **Background** The SVG tag itself should be rendered with the html function, but its content must be rendered with the svg function of lit-html. Otherwise dynamic updates inside the svg do not work. ### **Othe changes** **ui5-icon** - Create Icon HBS template and remove the IconLitTemplate as it will be generated properly **ui5-shellbar** - Update ShellBar`s CoPilot animates (taken from latest openui5) - Make ShellBar`s animated CoPilot add-on feature, by default the CoPilot is displayed as static SVG . To make it animated you have the following public import: ```js import "@ui5/webcomponents/dist/features/CoPilotAnimation.js": ``` - Start considering the global `animationMode` config regarding the CoPilot animation BREAKING CHANGE: to get the ShellBar's coPilot animated you have to import the `@ui5/webcomponents/dist/features/CoPilotAnimation.js` module
- Loading branch information
Showing
10 changed files
with
134 additions
and
57 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,69 @@ | ||
|
||
const svgrx = new RegExp(/<svg[\s\S]*?>([\s\S]*?)<\/svg>/, 'g'); | ||
const blockrx = /block[0-9]+/g; | ||
|
||
function process(input) { | ||
let matches; | ||
let template = input; | ||
let blockCounter = 0; | ||
|
||
matches = getSVGMatches(template); | ||
|
||
if (!matches.length) { | ||
return template; | ||
} | ||
|
||
matches.forEach(match => { | ||
//(1) extract the SVG content as a separate block | ||
const svgContentGroup = match[1]; | ||
const block = getSVGBlock(svgContentGroup, ++blockCounter); | ||
|
||
// (2) replace the SVG content with its block called, e.g ${blockSVG(context)} | ||
template = template.replace(svgContentGroup, block.usage); | ||
|
||
// (3) look for internal blocks in the SVG content and replace their `html with `svg | ||
template = replaceInternalBlocks(template, svgContentGroup); | ||
|
||
// (4) append the SVG block definiton (built in step 1), e.g const blockSVG = (context) => {return svg`.*`} | ||
template += block.definition; | ||
}); | ||
|
||
return template; | ||
} | ||
|
||
function getSVGMatches(template) { | ||
let matches = []; | ||
|
||
while (svgMatch = svgrx.exec(template)) { | ||
matches.push(svgMatch); | ||
if (svgrx.lastIndex === svgMatch.index) { | ||
svgrx.lastIndex++; | ||
} | ||
} | ||
|
||
return matches; | ||
} | ||
|
||
function getSVGBlock(input, blockCounter) { | ||
return { | ||
usage: `\${blockSVG${blockCounter}(context)}`, | ||
definition: `\nconst blockSVG${blockCounter} = (context) => {return svg\`${input}\`};`, | ||
}; | ||
} | ||
|
||
function replaceInternalBlocks(template, svgContent) { | ||
const internalBlocks = svgContent.match(blockrx) || []; | ||
|
||
internalBlocks.forEach(blockName => { | ||
const rx = new RegExp(`const ${blockName}.*(html\`).*};`); | ||
template = template.replace(rx, (match, p1) => { | ||
return match.replace(p1, "svg\`"); | ||
}); | ||
}); | ||
|
||
return template; | ||
} | ||
|
||
module.exports = { | ||
process: process | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
<svg | ||
class="ui5-icon-root" | ||
dir="{{dir}}" | ||
viewBox="0 0 512 512" | ||
role="img" | ||
preserveAspectRatio="xMidYMid meet" | ||
aria-label="{{accessibleNameText}}" | ||
xmlns="http://www.w3.org/2000/svg" | ||
> | ||
{{#if hasIconTooltip}} | ||
<title id="{{_id}}-tooltip">{{accessibleNameText}}</title> | ||
{{/if}} | ||
|
||
<g role="presentation"> | ||
<path transform="translate(0, 512) scale(1, -1)" d="{{d}}"/> | ||
</g> | ||
</svg> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters