various tests
This commit is contained in:
madrilene
parent
3bcf6f15af
commit
32945ef13b
5 changed files with 101 additions and 97 deletions
|
|
@ -1,49 +1,51 @@
|
|||
<button class="test-button" type="button">Add</button>
|
||||
<output @html="2"></output>
|
||||
<is-land on:visible>
|
||||
<button class="test-button" type="button">Add</button>
|
||||
<output @html="2"></output>
|
||||
|
||||
<style webc:scoped>
|
||||
:host > button {
|
||||
padding: var(--space-xs) var(--space-xl);
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background: var(--color-primary);
|
||||
border: none;
|
||||
border-radius: 0.6818181818em;
|
||||
box-shadow: 0.3181818182em 0.3181818182em 0 black;
|
||||
color: var(--color-dark);
|
||||
display: inline-block;
|
||||
font-size: clamp(1.1rem, 1.8vw, 1.4rem);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0;
|
||||
padding: 0.45em 1.5em;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
:host > output {
|
||||
padding: var(--space-xs) var(--space-xl);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.customElements.define(
|
||||
'my-counter',
|
||||
class extends HTMLElement {
|
||||
connectedCallback() {
|
||||
console.log(this);
|
||||
let btn = this.querySelector(':scope button');
|
||||
let output = this.querySelector(':scope output');
|
||||
let value = parseInt(output.innerText);
|
||||
|
||||
console.log(this, btn);
|
||||
|
||||
btn.addEventListener('click', () => {
|
||||
output.innerText = ++value;
|
||||
});
|
||||
}
|
||||
<style webc:scoped>
|
||||
:host > button {
|
||||
padding: var(--space-xs) var(--space-xl);
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background: var(--color-primary);
|
||||
border: none;
|
||||
border-radius: 0.6818181818em;
|
||||
box-shadow: 0.3181818182em 0.3181818182em 0 black;
|
||||
color: var(--color-dark);
|
||||
display: inline-block;
|
||||
font-size: clamp(1.1rem, 1.8vw, 1.4rem);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0;
|
||||
padding: 0.45em 1.5em;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
text-transform: none;
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
:host > output {
|
||||
padding: var(--space-xs) var(--space-xl);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.customElements.define(
|
||||
'my-counter',
|
||||
class extends HTMLElement {
|
||||
connectedCallback() {
|
||||
console.log(this);
|
||||
let btn = this.querySelector(':scope button');
|
||||
let output = this.querySelector(':scope output');
|
||||
let value = parseInt(output.innerText);
|
||||
|
||||
console.log(this, btn);
|
||||
|
||||
btn.addEventListener('click', () => {
|
||||
output.innerText = ++value;
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
</is-land>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,16 @@
|
|||
<speedlify-score
|
||||
webc:raw
|
||||
:class="this.class"
|
||||
:hash="this.hash"
|
||||
speedlify-url="https://www.speedlify.dev"
|
||||
:score="this.score"
|
||||
:weight="this.weight"
|
||||
:requests="this.requests"
|
||||
></speedlify-score>
|
||||
<is-land on:visible>
|
||||
<speedlify-score
|
||||
webc:raw
|
||||
:class="this.class"
|
||||
:hash="this.hash"
|
||||
speedlify-url="https://www.speedlify.dev"
|
||||
:score="this.score"
|
||||
:weight="this.weight"
|
||||
:requests="this.requests"
|
||||
></speedlify-score>
|
||||
|
||||
<template>
|
||||
<link rel="stylesheet" :href="`/components/speedlify-score.css`" />
|
||||
<script :src="`/components/speedlify-score.js`"></script>
|
||||
</template>
|
||||
<template data-island="once">
|
||||
<link rel="stylesheet" :href="`/assets/components/speedlify-score.css`" />
|
||||
<script :src="`/assets/components/speedlify-score.js`"></script>
|
||||
</template>
|
||||
</is-land>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,31 @@
|
|||
<lite-youtube
|
||||
:videoid="this.slug"
|
||||
:params="this.start ? `start=${this.start}` : false"
|
||||
:playlabel="`Play${this.label ? `: ${this.label}` : ''}`"
|
||||
:style="`background-image:url('${this.poster || `https://i.ytimg.com/vi/${this.slug}/maxresdefault.jpg`}'); max-width: 100%`"
|
||||
<is-land
|
||||
on:visible
|
||||
:import="`/assets/components/lite-yt-embed.js`"
|
||||
class="fluid-width-video-wrapper"
|
||||
>
|
||||
<a
|
||||
:href="`https://youtube.com/watch?v=${this.slug}`"
|
||||
class="lty-playbtn"
|
||||
title="Play Video"
|
||||
><span
|
||||
class="lyt-visually-hidden"
|
||||
@html="`Play Video${this.label ? `: ${this.label}` : ''}`"
|
||||
></span
|
||||
></a>
|
||||
</lite-youtube>
|
||||
|
||||
<!-- <template>
|
||||
<link rel="stylesheet" :href="/assets/components/lite-yt-embed.css" />
|
||||
<script :src="/assets/components/lite-yt-embed.js"></script>
|
||||
</template> -->
|
||||
<lite-youtube
|
||||
:videoid="this.slug"
|
||||
:params="this.start ? `start=${this.start}` : false"
|
||||
:playlabel="`Play${this.label ? `: ${this.label}` : ''}`"
|
||||
:style="`background-image:url('${this.poster || `https://i.ytimg.com/vi/${this.slug}/maxresdefault.jpg`}'); max-width: 100%`"
|
||||
>
|
||||
<a
|
||||
:href="`https://youtube.com/watch?v=${this.slug}`"
|
||||
class="lty-playbtn"
|
||||
title="Play Video"
|
||||
><span
|
||||
class="lyt-visually-hidden"
|
||||
@html="`Play Video${this.label ? `: ${this.label}` : ''}`"
|
||||
></span
|
||||
></a>
|
||||
</lite-youtube>
|
||||
<template data-island>
|
||||
<style>
|
||||
/* Plugin bug: clicking the red youtube play icon in the center would navigate to youtube.com */
|
||||
lite-youtube:defined .lty-playbtn {
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" :href="`/assets/components/lite-yt-embed.css`" />
|
||||
</template>
|
||||
</is-land>
|
||||
|
|
|
|||
|
|
@ -24,6 +24,10 @@
|
|||
|
||||
<link rel="stylesheet" href="/assets/css/global.css?{{ assetHash }}" />
|
||||
|
||||
<!-- defer js -->
|
||||
<script type="module" src="/assets/app.js" defer></script>
|
||||
<script type="module" src="/assets/components/is-land.js" defer></script>
|
||||
|
||||
<!-- Add facility for pages to declare an array of stylesheet paths -->
|
||||
{% if pageStylesheets %} {% for item in pageStylesheets %}
|
||||
<link
|
||||
|
|
@ -59,9 +63,5 @@
|
|||
{% renderTemplate "webc" %}
|
||||
<script @html="this.getJS(this.page.url)"></script>
|
||||
{% endrenderTemplate %}
|
||||
|
||||
<!-- defer js -->
|
||||
<script type="module" src="/assets/app.js" defer></script>
|
||||
<script type="module" src="/assets/components/is-land.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -5,41 +5,31 @@ description: This is just a testing environment
|
|||
layout: page
|
||||
---
|
||||
|
||||
Version number {{ meta.pkv }}
|
||||
Version number
|
||||
|
||||
<!-- sdfg -->
|
||||
|
||||
{% renderTemplate "webc" %}
|
||||
<my-marquee>dsfgdfg</my-marquee>
|
||||
{% endrenderTemplate %}
|
||||
|
||||
<p>
|
||||
Icing jelly soufflé shortbread chocolate cake muffin gummies cotton candy lemon drops.
|
||||
Cake gummi bears dragée chocolate sweet croissant sweet croissant.
|
||||
</p>
|
||||
|
||||
{% renderTemplate "webc" %}
|
||||
<youtube-lite-player @slug="DC5fP_8Q8uQ" @label="{{ title }}"></youtube-lite-player>
|
||||
{% endrenderTemplate %}
|
||||
<youtube-lite-player @slug="g2aTwnLgAc8" @label="{{ title }}"></youtube-lite-player>
|
||||
|
||||
<h2>Testing counter</h2>
|
||||
|
||||
<p>counter inside island, activate on interaction</p>
|
||||
|
||||
{% renderTemplate "webc" %}
|
||||
<is-land on:interaction>
|
||||
<my-counter></my-counter>
|
||||
</is-land>
|
||||
{% endrenderTemplate %}
|
||||
<speedlify-score></speedlify-score>
|
||||
|
||||
<p>
|
||||
Icing jelly soufflé shortbread chocolate cake muffin gummies cotton candy lemon drops.
|
||||
Cake gummi bears dragée chocolate sweet croissant sweet croissant.
|
||||
</p>
|
||||
|
||||
{% renderTemplate "webc" %}
|
||||
<fancy-rule></fancy-rule>
|
||||
{% endrenderTemplate %}
|
||||
|
||||
<p>
|
||||
Marzipan croissant halvah sweet wafer sesame snaps cheesecake. Jelly candy canes toffee
|
||||
Loading…
Reference in a new issue