Rocksolid Light

Welcome to RetroBBS

mail  files  register  newsreader  groups  login

Message-ID:  

No one can guarantee the actions of another. -- Spock, "Day of the Dove", stardate unknown

devel / comp.lang.javascript / Re: More-or-Less panel (web component)

SubjectAuthor
* More-or-Less panel (web component)luserdroog
`* Re: More-or-Less panel (web component)Michael Haufe (TNO)
 `* Re: More-or-Less panel (web component)luserdroog
  `* Re: More-or-Less panel (web component)Michael Haufe (TNO)
   `- Re: More-or-Less panel (web component)luserdroog

1
More-or-Less panel (web component)

<18005420-8f92-4006-abf0-96b90be48674n@googlegroups.com>

  copy mid

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

  copy link   Newsgroups: comp.lang.javascript
X-Received: by 2002:a05:6214:a8f:b0:635:da85:d29e with SMTP id ev15-20020a0562140a8f00b00635da85d29emr5687qvb.5.1688657684028;
Thu, 06 Jul 2023 08:34:44 -0700 (PDT)
X-Received: by 2002:a63:7516:0:b0:55b:379:629f with SMTP id
q22-20020a637516000000b0055b0379629fmr1192738pgc.9.1688657683625; Thu, 06 Jul
2023 08:34:43 -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!peer03.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: Thu, 6 Jul 2023 08:34:43 -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: <18005420-8f92-4006-abf0-96b90be48674n@googlegroups.com>
Subject: More-or-Less panel (web component)
From: luser.droog@gmail.com (luserdroog)
Injection-Date: Thu, 06 Jul 2023 15:34:44 +0000
Content-Type: text/plain; charset="UTF-8"
X-Received-Bytes: 4111
 by: luserdroog - Thu, 6 Jul 2023 15:34 UTC

I'm trying to factor out some of the disparate functionality in my app.
This one seemed to peel out rather nicely, only I'm somehow not able
to successfully send it a custom "redraw" event. In my application I'm
having to trigger a redraw by peeking into the shadow dom and calling
..click() twice on the toggle.

A <more-panel></more-panel> works like a div that can be in either
of two states: a 'more' state where the clickable word says "(less)"
and the panel hides contents with the class of "less" and shows
contents with the class of "more; and a 'less' state where the clickable
word says "(more)" and the panel hides contents with the class of
"more" and shows contents with the class of "less". Contents without
either of these classes is simply passed through unmolested.
Contents with both classes will be shown in both states.

The more-panel itself can be instantiated with or without the "more"
class to specify its initial state.

Any critiques or comments welcome.

more.js:
const morePanelTemplate = document.createElement("template");
morePanelTemplate.innerHTML = `
<style>
.content{
border: 1px solid;
border-radius: 5px;
}
#toggle{
font-size: small;
text-decoration: underline;
cursor: pointer;
}
</style>
<div class="content">
<span id=toggle></span>
<slot></slot>
</div>
`;

class MorePanel extends HTMLElement {

constructor() {
super();
this.attachShadow( {mode:"open"} );
this.shadowRoot.appendChild( morePanelTemplate.content.cloneNode(true) );
let content = this.shadowRoot.querySelector(".content");
this.showStuff();
}

showStuff() {
if( this.classList.contains( "more" ) )
this.showMore();
else
this.showLess();
}

connectedCallback() {
this.shadowRoot.querySelector("#toggle").addEventListener( "click", ()=>{
this.classList.toggle( "more" );
this.showStuff();
});
self.addEventListener( "redraw", (event) => this.showStuff() );
}

disconnectedCallback() {
this.shadowRoot.querySelector("#toggle").removeEventListener();
}

showMore() {
this.shadowRoot.querySelector("#toggle").textContent="(less)";
this.querySelectorAll(".less").forEach( el => el.style.display = 'none' );
this.querySelectorAll(".more").forEach( el => el.style.display = '' );
}

showLess() {
this.shadowRoot.querySelector("#toggle").textContent="(more)";
this.querySelectorAll(".more").forEach( el => el.style.display = 'none' );
this.querySelectorAll(".less").forEach( el => el.style.display = '' );
}
}

window.customElements.define( "more-panel", MorePanel );

more.html:
<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html" charset="UTF-8">
<meta name="viewport" content="width=device-width">
<html>
<title></title>
<style>
</style>
<body>
<more-panel class="more">
<div class="more">This div</div>
<span>the span</span>
</more-panel>
</body>
<script src="more.js"></script>
<script>
</script>
</html>

Re: More-or-Less panel (web component)

<20b5ef4f-2f10-40a5-832c-d33611d9da99n@googlegroups.com>

  copy mid

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

  copy link   Newsgroups: comp.lang.javascript
X-Received: by 2002:a05:620a:4725:b0:767:dc46:ec5d with SMTP id bs37-20020a05620a472500b00767dc46ec5dmr2334qkb.5.1689011190484;
Mon, 10 Jul 2023 10:46:30 -0700 (PDT)
X-Received: by 2002:a05:6a00:2d17:b0:66a:4083:5c99 with SMTP id
fa23-20020a056a002d1700b0066a40835c99mr17909456pfb.1.1689011189813; Mon, 10
Jul 2023 10:46:29 -0700 (PDT)
Path: i2pn2.org!i2pn.org!weretis.net!feeder6.news.weretis.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: Mon, 10 Jul 2023 10:46:29 -0700 (PDT)
In-Reply-To: <18005420-8f92-4006-abf0-96b90be48674n@googlegroups.com>
Injection-Info: google-groups.googlegroups.com; posting-host=2603:6000:8900:6915:887a:3a9f:ec4:2c9c;
posting-account=hYRygAoAAABkmvJVmPilz9Q1TOjgPQAq
NNTP-Posting-Host: 2603:6000:8900:6915:887a:3a9f:ec4:2c9c
References: <18005420-8f92-4006-abf0-96b90be48674n@googlegroups.com>
User-Agent: G2/1.0
MIME-Version: 1.0
Message-ID: <20b5ef4f-2f10-40a5-832c-d33611d9da99n@googlegroups.com>
Subject: Re: More-or-Less panel (web component)
From: tno@thenewobjective.com (Michael Haufe (TNO))
Injection-Date: Mon, 10 Jul 2023 17:46:30 +0000
Content-Type: text/plain; charset="UTF-8"
Content-Transfer-Encoding: quoted-printable
X-Received-Bytes: 2584
 by: Michael Haufe (TNO) - Mon, 10 Jul 2023 17:46 UTC

On Thursday, July 6, 2023 at 10:34:49 AM UTC-5, luserdroog wrote:
> I'm trying to factor out some of the disparate functionality in my app.
> This one seemed to peel out rather nicely, only I'm somehow not able
> to successfully send it a custom "redraw" event. In my application I'm
> having to trigger a redraw by peeking into the shadow dom and calling
> .click() twice on the toggle.
>
> A <more-panel></more-panel> works like a div that can be in either
> of two states: a 'more' state where the clickable word says "(less)"
> and the panel hides contents with the class of "less" and shows
> contents with the class of "more; and a 'less' state where the clickable
> word says "(more)" and the panel hides contents with the class of
> "more" and shows contents with the class of "less". Contents without
> either of these classes is simply passed through unmolested.
> Contents with both classes will be shown in both states.
>
> The more-panel itself can be instantiated with or without the "more"
> class to specify its initial state.
>
> Any critiques or comments welcome.
> [...]

There is a native <details /> tag you can use now:

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

Just style it as appropriate

Re: More-or-Less panel (web component)

<ff3d0930-7890-40fd-8868-b8be1548a4c2n@googlegroups.com>

  copy mid

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

  copy link   Newsgroups: comp.lang.javascript
X-Received: by 2002:a05:622a:18a7:b0:3f9:aa64:7dbf with SMTP id v39-20020a05622a18a700b003f9aa647dbfmr94443qtc.4.1689041521569;
Mon, 10 Jul 2023 19:12:01 -0700 (PDT)
X-Received: by 2002:a05:6820:1629:b0:566:15df:6615 with SMTP id
bb41-20020a056820162900b0056615df6615mr428018oob.1.1689041521085; Mon, 10 Jul
2023 19:12:01 -0700 (PDT)
Path: i2pn2.org!i2pn.org!weretis.net!feeder6.news.weretis.net!tncsrv06.tnetconsulting.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:12:00 -0700 (PDT)
In-Reply-To: <20b5ef4f-2f10-40a5-832c-d33611d9da99n@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: <18005420-8f92-4006-abf0-96b90be48674n@googlegroups.com> <20b5ef4f-2f10-40a5-832c-d33611d9da99n@googlegroups.com>
User-Agent: G2/1.0
MIME-Version: 1.0
Message-ID: <ff3d0930-7890-40fd-8868-b8be1548a4c2n@googlegroups.com>
Subject: Re: More-or-Less panel (web component)
From: luser.droog@gmail.com (luserdroog)
Injection-Date: Tue, 11 Jul 2023 02:12:01 +0000
Content-Type: text/plain; charset="UTF-8"
Content-Transfer-Encoding: quoted-printable
X-Received-Bytes: 3200
 by: luserdroog - Tue, 11 Jul 2023 02:12 UTC

On Monday, July 10, 2023 at 12:46:36 PM UTC-5, Michael Haufe (TNO) wrote:
> On Thursday, July 6, 2023 at 10:34:49 AM UTC-5, luserdroog wrote:
> > I'm trying to factor out some of the disparate functionality in my app.
> > This one seemed to peel out rather nicely, only I'm somehow not able
> > to successfully send it a custom "redraw" event. In my application I'm
> > having to trigger a redraw by peeking into the shadow dom and calling
> > .click() twice on the toggle.
> >
> > A <more-panel></more-panel> works like a div that can be in either
> > of two states: a 'more' state where the clickable word says "(less)"
> > and the panel hides contents with the class of "less" and shows
> > contents with the class of "more; and a 'less' state where the clickable
> > word says "(more)" and the panel hides contents with the class of
> > "more" and shows contents with the class of "less". Contents without
> > either of these classes is simply passed through unmolested.
> > Contents with both classes will be shown in both states.
> >
> > The more-panel itself can be instantiated with or without the "more"
> > class to specify its initial state.
> >
> > Any critiques or comments welcome.
> > [...]
>
> There is a native <details /> tag you can use now:
>
> <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details>
>
> Just style it as appropriate

Well, dang. I wish I'd noticed that earlier. Thanks. That does 90% of what
I wanted. Ultimately, I found the extra flexibility very useful. Being able to
toggle the "more" and "less" classes separately on the contents means
I can pop up an important control into the abbreviated state by just
adding "less" to it. I suppose I could accomplish similar with some js
gymnastics upon a <details />.

Anyway, good to know. I like mine better.

Re: More-or-Less panel (web component)

<4cd38140-99f0-476c-9a3f-f4893c508044n@googlegroups.com>

  copy mid

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

  copy link   Newsgroups: comp.lang.javascript
X-Received: by 2002:a05:620a:17a5:b0:763:a2e8:2b1a with SMTP id ay37-20020a05620a17a500b00763a2e82b1amr64163qkb.10.1689052332449;
Mon, 10 Jul 2023 22:12:12 -0700 (PDT)
X-Received: by 2002:a9d:67c2:0:b0:6b2:ad56:2f5c with SMTP id
c2-20020a9d67c2000000b006b2ad562f5cmr416363otn.6.1689052332117; Mon, 10 Jul
2023 22:12:12 -0700 (PDT)
Path: i2pn2.org!i2pn.org!weretis.net!feeder8.news.weretis.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: Mon, 10 Jul 2023 22:12:11 -0700 (PDT)
In-Reply-To: <ff3d0930-7890-40fd-8868-b8be1548a4c2n@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: <18005420-8f92-4006-abf0-96b90be48674n@googlegroups.com>
<20b5ef4f-2f10-40a5-832c-d33611d9da99n@googlegroups.com> <ff3d0930-7890-40fd-8868-b8be1548a4c2n@googlegroups.com>
User-Agent: G2/1.0
MIME-Version: 1.0
Message-ID: <4cd38140-99f0-476c-9a3f-f4893c508044n@googlegroups.com>
Subject: Re: More-or-Less panel (web component)
From: tno@thenewobjective.com (Michael Haufe (TNO))
Injection-Date: Tue, 11 Jul 2023 05:12:12 +0000
Content-Type: text/plain; charset="UTF-8"
Content-Transfer-Encoding: quoted-printable
 by: Michael Haufe (TNO) - Tue, 11 Jul 2023 05:12 UTC

On Monday, July 10, 2023 at 9:12:05 PM UTC-5, luserdroog wrote:
> > Just style it as appropriate
> Well, dang. I wish I'd noticed that earlier. Thanks. That does 90% of what
> I wanted. Ultimately, I found the extra flexibility very useful. Being able to
> toggle the "more" and "less" classes separately on the contents means
> I can pop up an important control into the abbreviated state by just
> adding "less" to it. I suppose I could accomplish similar with some js
> gymnastics upon a <details />.
>
> Anyway, good to know. I like mine better.

Well, the open state of <details /> can be styled with: details[open].

The JavaScript event is simply:

details.addEventListener("toggle", (event) => {
if (details.open) {
/* the element was toggled open */
} else {
/* the element was toggled closed */
}
});

Re: More-or-Less panel (web component)

<65b2190e-b058-458e-8b9d-3d087f5fcfbcn@googlegroups.com>

  copy mid

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

  copy link   Newsgroups: comp.lang.javascript
X-Received: by 2002:a05:622a:1b89:b0:40f:da3f:bd79 with SMTP id bp9-20020a05622a1b8900b0040fda3fbd79mr24940qtb.8.1691554779165;
Tue, 08 Aug 2023 21:19:39 -0700 (PDT)
X-Received: by 2002:a05:6808:e83:b0:3a3:efef:5c74 with SMTP id
k3-20020a0568080e8300b003a3efef5c74mr999541oil.8.1691554778866; Tue, 08 Aug
2023 21:19:38 -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: Tue, 8 Aug 2023 21:19:38 -0700 (PDT)
In-Reply-To: <4cd38140-99f0-476c-9a3f-f4893c508044n@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: <18005420-8f92-4006-abf0-96b90be48674n@googlegroups.com>
<20b5ef4f-2f10-40a5-832c-d33611d9da99n@googlegroups.com> <ff3d0930-7890-40fd-8868-b8be1548a4c2n@googlegroups.com>
<4cd38140-99f0-476c-9a3f-f4893c508044n@googlegroups.com>
User-Agent: G2/1.0
MIME-Version: 1.0
Message-ID: <65b2190e-b058-458e-8b9d-3d087f5fcfbcn@googlegroups.com>
Subject: Re: More-or-Less panel (web component)
From: luser.droog@gmail.com (luserdroog)
Injection-Date: Wed, 09 Aug 2023 04:19:39 +0000
Content-Type: text/plain; charset="UTF-8"
Content-Transfer-Encoding: quoted-printable
X-Received-Bytes: 2622
 by: luserdroog - Wed, 9 Aug 2023 04:19 UTC

On Tuesday, July 11, 2023 at 12:12:17 AM UTC-5, Michael Haufe (TNO) wrote:
> On Monday, July 10, 2023 at 9:12:05 PM UTC-5, luserdroog wrote:
> > > Just style it as appropriate
> > Well, dang. I wish I'd noticed that earlier. Thanks. That does 90% of what
> > I wanted. Ultimately, I found the extra flexibility very useful. Being able to
> > toggle the "more" and "less" classes separately on the contents means
> > I can pop up an important control into the abbreviated state by just
> > adding "less" to it. I suppose I could accomplish similar with some js
> > gymnastics upon a <details />.
> >
> > Anyway, good to know. I like mine better.
> Well, the open state of <details /> can be styled with: details[open].
>
> The JavaScript event is simply:
>
> details.addEventListener("toggle", (event) => {
> if (details.open) {
> /* the element was toggled open */
> } else {
> /* the element was toggled closed */
> }
> });

This tidbit turned out incredibly valuable. I wanted to wrap them all up
and disappear them with one click. But mine don't nest. sigh.
Wrapping it all in a <details> got me out of the corner without stepping
in the paint.

1
server_pubkey.txt

rocksolid light 0.9.8
clearnet tor