Rocksolid Light

Welcome to RetroBBS

mail  files  register  newsreader  groups  login

Message-ID:  

VMS is like a nightmare about RXS-11M.

devel / comp.lang.javascript / tabs-panel (web component)

SubjectAuthor
* tabs-panel (web component)luserdroog
`* Re: tabs-panel (web component)Michael Haufe (TNO)
 `* Re: tabs-panel (web component)luserdroog
  `- Re: tabs-panel (web component)Michael Haufe (TNO)

1
tabs-panel (web component)

<9ec23f0c-7a66-4610-9fac-e38e139d3462n@googlegroups.com>

  copy mid

https://www.rocksolidbbs.com/devel/article-flat.php?id=18182&group=comp.lang.javascript#18182

  copy link   Newsgroups: comp.lang.javascript
X-Received: by 2002:a05:6214:1025:b0:635:bcd1:868b with SMTP id k5-20020a056214102500b00635bcd1868bmr119206qvr.6.1689042184897;
Mon, 10 Jul 2023 19:23:04 -0700 (PDT)
X-Received: by 2002:a02:238f:0:b0:40f:d35a:56e4 with SMTP id
u137-20020a02238f000000b0040fd35a56e4mr154953jau.4.1689042184319; Mon, 10 Jul
2023 19:23:04 -0700 (PDT)
Path: i2pn2.org!i2pn.org!weretis.net!feeder6.news.weretis.net!1.us.feeder.erje.net!feeder.erje.net!usenet.blueworldhosting.com!diablo1.usenet.blueworldhosting.com!peer01.iad!feed-me.highwinds-media.com!news.highwinds-media.com!news-out.google.com!nntp.google.com!postnews.google.com!google-groups.googlegroups.com!not-for-mail
Newsgroups: comp.lang.javascript
Date: Mon, 10 Jul 2023 19:23:04 -0700 (PDT)
Injection-Info: google-groups.googlegroups.com; posting-host=24.107.183.247; posting-account=G1KGwgkAAAAyw4z0LxHH0fja6wAbo7Cz
NNTP-Posting-Host: 24.107.183.247
User-Agent: G2/1.0
MIME-Version: 1.0
Message-ID: <9ec23f0c-7a66-4610-9fac-e38e139d3462n@googlegroups.com>
Subject: tabs-panel (web component)
From: luser.droog@gmail.com (luserdroog)
Injection-Date: Tue, 11 Jul 2023 02:23:04 +0000
Content-Type: text/plain; charset="UTF-8"
X-Received-Bytes: 3103
 by: luserdroog - Tue, 11 Jul 2023 02:23 UTC

A <tabs-panel /> accepts contents for two slots, named "tab" and "content". The tabs are shown spaced out and clickable, controlling their associated content.

Critique or comments welcome.

tabs.html:
<html>
<body>
<tabs-panel>
<div slot="tab" data-target="#out1" class="active tab">first</div>
<div slot="tab" data-target="#out2" class="tab">second</div>
<div slot="tab" data-target="#out3" class="tab">third</div>
<div id="out1" slot="content" class="active content">Content 1: the first</div>
<div id="out2" slot="content" class="content">Content 2: which follows after</div>
<div id="out3" slot="content" class="content">Content 3: where it all ends</div>
</tabs-panel>
</body>
<script src="tabs.js"></script>
</html>

tabs.js:
const tabsPanelTemplate = document.createElement( "template" );
tabsPanelTemplate.innerHTML = `
<style>
.tabs{
display: flex;
justify-content: flex-start;
}
::slotted([slot="tab"]) {
cursor: pointer;
padding: 1ex;
margin: 1ex;
}
::slotted([slot="tab"].active) {
border: solid 1px;
}
::slotted([slot="content"]){
display: none;
}
::slotted([slot="content"].active){
display: block;
}
</style>
<slot name="tab" class="tabs"></slot>
<hr>
<slot name="content"></slot>
`;

class TabsPanel extends HTMLElement {
constructor() {
super();
this.attachShadow( {mode:"open"} );
this.shadowRoot.appendChild( tabsPanelTemplate.content.cloneNode(true) );
}

connectedCallback() {
this.querySelectorAll('[slot="tab"]').forEach( tab => {
tab.addEventListener( "click", e => {
this.querySelectorAll("[slot]").forEach( tab => tab.classList.remove( "active" ) );
tab.classList.add( "active" );
this.querySelector( tab.dataset.target ).classList.add( "active" );
})
});
}

disconnectedCallback() {
this.querySelectorAll('[slot="tab"]').forEach( tab => {
tab.removeEventListener();
});
}
};

window.customElements.define( "tabs-panel", TabsPanel );

Re: tabs-panel (web component)

<0553a6e2-5f31-4f88-a4bc-0de168509d06n@googlegroups.com>

  copy mid

https://www.rocksolidbbs.com/devel/article-flat.php?id=18184&group=comp.lang.javascript#18184

  copy link   Newsgroups: comp.lang.javascript
X-Received: by 2002:a05:622a:4d1:b0:403:aa87:d220 with SMTP id q17-20020a05622a04d100b00403aa87d220mr39742qtx.0.1689054026302;
Mon, 10 Jul 2023 22:40:26 -0700 (PDT)
X-Received: by 2002:a9d:798f:0:b0:6b9:1768:b318 with SMTP id
h15-20020a9d798f000000b006b91768b318mr452393otm.5.1689054026018; Mon, 10 Jul
2023 22:40:26 -0700 (PDT)
Path: i2pn2.org!i2pn.org!usenet.blueworldhosting.com!diablo1.usenet.blueworldhosting.com!peer02.iad!feed-me.highwinds-media.com!news.highwinds-media.com!news-out.google.com!nntp.google.com!postnews.google.com!google-groups.googlegroups.com!not-for-mail
Newsgroups: comp.lang.javascript
Date: Mon, 10 Jul 2023 22:40:25 -0700 (PDT)
In-Reply-To: <9ec23f0c-7a66-4610-9fac-e38e139d3462n@googlegroups.com>
Injection-Info: google-groups.googlegroups.com; posting-host=2603:6000:8900:6915:f4d6:66b5:8d99:ba93;
posting-account=hYRygAoAAABkmvJVmPilz9Q1TOjgPQAq
NNTP-Posting-Host: 2603:6000:8900:6915:f4d6:66b5:8d99:ba93
References: <9ec23f0c-7a66-4610-9fac-e38e139d3462n@googlegroups.com>
User-Agent: G2/1.0
MIME-Version: 1.0
Message-ID: <0553a6e2-5f31-4f88-a4bc-0de168509d06n@googlegroups.com>
Subject: Re: tabs-panel (web component)
From: tno@thenewobjective.com (Michael Haufe (TNO))
Injection-Date: Tue, 11 Jul 2023 05:40:26 +0000
Content-Type: text/plain; charset="UTF-8"
Content-Transfer-Encoding: quoted-printable
X-Received-Bytes: 2635
 by: Michael Haufe (TNO) - Tue, 11 Jul 2023 05:40 UTC

On Monday, July 10, 2023 at 9:23:09 PM UTC-5, luserdroog wrote:
> A <tabs-panel /> accepts contents for two slots, named "tab" and "content". The tabs are shown spaced out and clickable, controlling their associated content.
>
> Critique or comments welcome.
> [...]

You can leverage <details /> for this too. Something like:

<article class="tabs">
<details class="tab">
<summary class="tab-label">Tab 1</summary>
<div class="tab-content">Content 1</div>
</details>
<details class="tab">
<summary class="tab-label">Tab 2</summary>
<div class="tab-content">Content 2</div>
</details>
<details class="tab">
<summary class="tab-label">Tab 3</summary>
<div class="tab-content">Content 3</div>
</details>
</article>

<style>
..tabs {
position: relative;
display: inline-flex;
border: 1px solid blue;
height: 300px;
}

..tab[open] {
background-color: #ccc;
}

..tab-label {
padding: 1em;
border: 1px solid red;
border-radius: 15% 15% 0 0;
}

..tab-content {
position: absolute;
background-color: cyan;
left: 0;
height: calc(100% - 3.1em);
width: 100%;
overflow: auto;
} </style>

You'll just want to toggle all sibling tabs when one is open by intercepting the 'toggle' event. Here's a quick codepen:

<https://codepen.io/mlhaufe/pen/abQVrWg>

Re: tabs-panel (web component)

<f99e7f5b-b347-4867-a47e-b7653759ad63n@googlegroups.com>

  copy mid

https://www.rocksolidbbs.com/devel/article-flat.php?id=18185&group=comp.lang.javascript#18185

  copy link   Newsgroups: comp.lang.javascript
X-Received: by 2002:a05:622a:1989:b0:403:b55e:d4cb with SMTP id u9-20020a05622a198900b00403b55ed4cbmr30280qtc.6.1689082525206;
Tue, 11 Jul 2023 06:35:25 -0700 (PDT)
X-Received: by 2002:aca:340a:0:b0:3a2:2146:1e0 with SMTP id
b10-20020aca340a000000b003a2214601e0mr1349019oia.0.1689082524719; Tue, 11 Jul
2023 06:35:24 -0700 (PDT)
Path: i2pn2.org!i2pn.org!weretis.net!feeder6.news.weretis.net!1.us.feeder.erje.net!3.us.feeder.erje.net!feeder.erje.net!usenet.blueworldhosting.com!diablo1.usenet.blueworldhosting.com!peer02.iad!feed-me.highwinds-media.com!news.highwinds-media.com!news-out.google.com!nntp.google.com!postnews.google.com!google-groups.googlegroups.com!not-for-mail
Newsgroups: comp.lang.javascript
Date: Tue, 11 Jul 2023 06:35:24 -0700 (PDT)
In-Reply-To: <0553a6e2-5f31-4f88-a4bc-0de168509d06n@googlegroups.com>
Injection-Info: google-groups.googlegroups.com; posting-host=24.107.183.247; posting-account=G1KGwgkAAAAyw4z0LxHH0fja6wAbo7Cz
NNTP-Posting-Host: 24.107.183.247
References: <9ec23f0c-7a66-4610-9fac-e38e139d3462n@googlegroups.com> <0553a6e2-5f31-4f88-a4bc-0de168509d06n@googlegroups.com>
User-Agent: G2/1.0
MIME-Version: 1.0
Message-ID: <f99e7f5b-b347-4867-a47e-b7653759ad63n@googlegroups.com>
Subject: Re: tabs-panel (web component)
From: luser.droog@gmail.com (luserdroog)
Injection-Date: Tue, 11 Jul 2023 13:35:25 +0000
Content-Type: text/plain; charset="UTF-8"
Content-Transfer-Encoding: quoted-printable
X-Received-Bytes: 2090
 by: luserdroog - Tue, 11 Jul 2023 13:35 UTC

On Tuesday, July 11, 2023 at 12:40:30 AM UTC-5, Michael Haufe (TNO) wrote:
> On Monday, July 10, 2023 at 9:23:09 PM UTC-5, luserdroog wrote:
> > A <tabs-panel /> accepts contents for two slots, named "tab" and "content". The tabs are shown spaced out and clickable, controlling their associated content.
> >
> > Critique or comments welcome.
> > [...]
>
> You can leverage <details /> for this too. Something like:
>

That's pretty cool. <defensive reaction>I think there are real advantages
of abstraction, encapsulation, and packaging with the web component
approach. All the functionality is wrapped up in the component.
The application doesn't have to do a thing beyond constructing the html.
</defensive reaction>

The clickable words should probably be <button>s for accessibility.

Re: tabs-panel (web component)

<8ea29064-ba9f-494c-9b0b-f64d70347141n@googlegroups.com>

  copy mid

https://www.rocksolidbbs.com/devel/article-flat.php?id=18186&group=comp.lang.javascript#18186

  copy link   Newsgroups: comp.lang.javascript
X-Received: by 2002:ac8:580e:0:b0:403:b014:538f with SMTP id g14-20020ac8580e000000b00403b014538fmr46062qtg.10.1689094383619;
Tue, 11 Jul 2023 09:53:03 -0700 (PDT)
X-Received: by 2002:a05:6870:8c29:b0:1b3:e896:9bf4 with SMTP id
ec41-20020a0568708c2900b001b3e8969bf4mr2533019oab.6.1689094383143; Tue, 11
Jul 2023 09:53:03 -0700 (PDT)
Path: i2pn2.org!i2pn.org!usenet.goja.nl.eu.org!3.eu.feeder.erje.net!feeder.erje.net!proxad.net!feeder1-2.proxad.net!209.85.160.216.MISMATCH!news-out.google.com!nntp.google.com!postnews.google.com!google-groups.googlegroups.com!not-for-mail
Newsgroups: comp.lang.javascript
Date: Tue, 11 Jul 2023 09:53:02 -0700 (PDT)
In-Reply-To: <f99e7f5b-b347-4867-a47e-b7653759ad63n@googlegroups.com>
Injection-Info: google-groups.googlegroups.com; posting-host=2603:6000:8900:6915:f4d6:66b5:8d99:ba93;
posting-account=hYRygAoAAABkmvJVmPilz9Q1TOjgPQAq
NNTP-Posting-Host: 2603:6000:8900:6915:f4d6:66b5:8d99:ba93
References: <9ec23f0c-7a66-4610-9fac-e38e139d3462n@googlegroups.com>
<0553a6e2-5f31-4f88-a4bc-0de168509d06n@googlegroups.com> <f99e7f5b-b347-4867-a47e-b7653759ad63n@googlegroups.com>
User-Agent: G2/1.0
MIME-Version: 1.0
Message-ID: <8ea29064-ba9f-494c-9b0b-f64d70347141n@googlegroups.com>
Subject: Re: tabs-panel (web component)
From: tno@thenewobjective.com (Michael Haufe (TNO))
Injection-Date: Tue, 11 Jul 2023 16:53:03 +0000
Content-Type: text/plain; charset="UTF-8"
Content-Transfer-Encoding: quoted-printable
 by: Michael Haufe (TNO) - Tue, 11 Jul 2023 16:53 UTC

On Tuesday, July 11, 2023 at 8:35:29 AM UTC-5, luserdroog wrote:
> On Tuesday, July 11, 2023 at 12:40:30 AM UTC-5, Michael Haufe (TNO) wrote:
> > On Monday, July 10, 2023 at 9:23:09 PM UTC-5, luserdroog wrote:
> > > A <tabs-panel /> accepts contents for two slots, named "tab" and "content". The tabs are shown spaced out and clickable, controlling their associated content.
> > >
> > > Critique or comments welcome.
> > > [...]
> >
> > You can leverage <details /> for this too. Something like:
> >
> That's pretty cool. <defensive reaction>I think there are real advantages
> of abstraction, encapsulation, and packaging with the web component
> approach. All the functionality is wrapped up in the component.
> The application doesn't have to do a thing beyond constructing the html.
> </defensive reaction>

That was the hope on WebComponents, but I was burned bad by them and wrote a popular article criticizing them a handful of years ago:

<https://thenewobjective.com/web-development/a-criticism-of-web-components>

Things have improved, but not by much sadly

> The clickable words should probably be <button>s for accessibility.

The <summary/> element already has an aria role of "button" so there is no need:

<https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary#technical_summary>

1
server_pubkey.txt

rocksolid light 0.9.8
clearnet tor