Skip to content

Commit

Permalink
Merge branch 'dev'
Browse files Browse the repository at this point in the history
  • Loading branch information
JoernT committed Dec 12, 2024
2 parents da96ad7 + 7ccde69 commit 4147c45
Show file tree
Hide file tree
Showing 49 changed files with 4,394 additions and 411 deletions.
47 changes: 47 additions & 0 deletions cypress/e2e/value-changed.cy.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
describe('value-changed event firing', () => {
beforeEach(() => {
cy.visit('value-changed.html');
});

it('triggers the correct events with the correct data for the default instance', () => {
cy.get('[data-cy=relative-path] input').type(' Test1!').blur();
cy.get('.toastify').should(
'contain',
`instance('default') in $default/greetings[1]/greeting-a[1] changed from Hello World! to Hello World! Test1!`,
);

cy.get('[data-cy=implicit-default-instance] input').type(' Test2!').blur();
cy.get('.toastify').should(
'contain',
`instance('default') in $default/greetings[1]/greeting-b[1] changed from Hello World! to Hello World! Test2!`,
);

cy.get('[data-cy=variable-default-instance] input').type(' Test3!').blur();
cy.get('.toastify').should(
'contain',
`instance('default') in $default/greetings[1]/greeting-b[1] changed from Hello World! to Hello World! Test2!`,
);
});

it('triggers the correct events with the correct data for the second instance', () => {
cy.get('[data-cy=explicit-second-instance] input').type(' Test1!').blur();
cy.get('.toastify').should(
'contain',
`instance('second') in $second/greetings[1]/greeting-a[1] changed from GoodBye to GoodBye Test1!`,
);

cy.get('[data-cy=variable-second-instance] input').type(' Test2!').blur();
cy.get('.toastify').should(
'contain',
`instance('second') in $second/greetings[1]/greeting-b[1] changed from GoodBye to GoodBye Test2!`,
);
});

it('also allows aliased variables', () => {
cy.get('[data-cy=aliased-variable] input').type(' Test!').blur();
cy.get('.toastify').should(
'contain',
`instance('second') in $second/greetings[1]/greeting-c[1] changed from GoodBye to GoodBye Test!`,
);
});
});
8 changes: 4 additions & 4 deletions demo/04-instances.html
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ <h1>Instance super powers</h1>

<demo-snippet>
<template>
<fx-fore>
<fx-fore id="demo1">
<fx-model>
<fx-instance src="instance1.xml"></fx-instance>
</fx-model>
Expand All @@ -42,7 +42,7 @@ <h2>JSON instances</h2>
<p>Just note the syntax to access JSON values. XPath 3.1 notation is used to query the JSON.</p>
<demo-snippet>
<template>
<fx-fore>
<fx-fore id="demo2">
<fx-model>
<fx-instance src="automobiles.json" type="json"></fx-instance>
</fx-model>
Expand All @@ -57,7 +57,7 @@ <h2>JSON instances</h2>
<h2>Using the queryString</h2>
<demo-snippet>
<template>
<fx-fore>
<fx-fore id="demo3">
<fx-model>
<fx-instance src="#querystring"></fx-instance>
</fx-model>
Expand All @@ -76,7 +76,7 @@ <h3>Description</h3>
</p>

</div>

<fx-lens open></fx-lens>

<script type="module" src="./demo.js"></script>
</body>
Expand Down
88 changes: 88 additions & 0 deletions demo/convert-icons/convert.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, minimum-scale=1, initial-scale=1, task-scalable=yes" name="viewport"/>
<title>My Work</title>
<link href="../../resources/fore.css" rel="stylesheet">
<link href="mywork.css" rel="stylesheet">
<link href="../../resources/icons.css" rel="stylesheet">
<style>
textarea{
width:90vw;
height:50vh;
}
.icon{
display:inline-block;
color:black;
stroke:black;
fill:black;
}
</style>
</head>
<body>
<fx-fore>

<fx-model>
<fx-instance id="default" src="icons.xml">
</fx-instance>
<fx-instance id="result">
<data>
<css></css>
</data>
</fx-instance>
<fx-function signature="convert($input as element()) as xs:string" type="text/javascript">
const serializer = new XMLSerializer();
let result = '';
const gs = $input.querySelectorAll('g');
Array.from(gs).forEach(g => {
// Wrap the <g> content in an <svg> element and set attributes
const id = g.getAttribute('id');

const svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svgElement.setAttribute("xmlns", "http://www.w3.org/2000/svg");
svgElement.setAttribute("viewBox", "0 0 24 24");

const gClone = document.importNode(g,true);
svgElement.append(gClone);



const svgString = serializer.serializeToString(svgElement);
console.log('svgString', svgString);
// Encode the SVG to make it URL-safe
const encodedSvg = svgString;
console.log('encodedSvg', encodedSvg);

// Generate the CSS rule
const cssRule = `
.icon-${id} {
width: 24px;
height: 24px;
display:inline-block;
background-image: url('data:image/svg+xml;utf8,${encodedSvg}');
background-size: contain;
background-repeat: no-repeat;
}
`;

result += cssRule;
});
console.log(result);
return result;
</fx-function>
<fx-setvalue ref="instance('result')/css" value="convert(instance('default')//defs)" event="model-construct-done"></fx-setvalue>
</fx-model>

<h1>icon to css converter</h1>
<!-- <div class="css-result">{instance('result')/css}</div>-->
<fx-repeat ref="instance()//g">
<template>
<span class="icon icon-{@id}"></span>
</template>
</fx-repeat>
</fx-fore>
<script type="module" src="../demo.js"></script>

</body>
</html>
Loading

0 comments on commit 4147c45

Please sign in to comment.