search

dso-toolkit / dso-toolkit

DSO Toolkit
http://www.dso-toolkit.nl
24 stars 18 forks source link

`<dso-viewer-grid />` #1403

Closed tfrijsewijk closed 2 years ago

tfrijsewijk commented 2 years ago

Inleiding

In dit issue gaan we het huidige HTML/CSS component "Viewer Grid" (https://css.dso-toolkit.nl/33.1.0/?path=/story/viewer-grid--viewer-grid) omzetten naar een Web Component. Dat betekent dat het HTML/CSS component niet meer beschikbaar is: Alles in /packages/css/components/viewer-grid krijgt een plek in /packages/core/components/viewer-grid.

Achtergrond

Viewer Grid is een alternatieve layout voor .container en .container-fluid. Deze layout is alleen geschikt voor viewer applicaties: Links de inhoud (main) en rechts de kaart. De inhoud en kaart liggen naast elkaar. De inhoud kan met formaat knoppen een ander formaat krijgen: klein, middel, groot. Vanaf zowel de linkerkant als de rechterkant kunnen er panelen over de inhoud vallen.

Viewer Grid heeft een aantal "sub componenten":

Deze sub componenten kunnen alleen binnen Viewer Grid main gebruikt worden. Daarom worden ze ook nergens geisoleerd getoond.

De formaat knoppen krijgen in #1373 een andere positie.

Probleem

Omdat Viewer Grid een HTML/CSS component is brengt dit complexiteit met zich mee bij team toolkit voor het onderhouden en documenteren, en bij afnemers bij het bouwen.

De echt moeilijke vraagstukken komen pas naar voren toe bij gedrag van kindjes in het Viewer Grid. De componenten die nu in main worden geplaatst kunnen geen responsive gedrag uitoefenen: Responsiveness gaat op viewport en niet op paneel breedte. De sub componenten Document Header en Document List Item zijn bekend met de class name modifiers .dso-small|medium|large. Dit is een model wat niet schaalt als we straks willekeurige componenten willen inzetten. Dit laatste probleem pakken we niet in dit issue op maar is wel een van de argumenten om eerst een Web Component te maken.

Oplossing

Mapping van het huidige HTML/CSS component naar Web Component.

    <div class="dso-viewer-grid dso-viewer-grid-${panelSize}">        <!-- <dso-viewer-grid> -->
      <div class="dso-viewer-grid-main">                              <!-- <main slot="main"> of <div slot="main"> -->
        <div class="dso-viewer-grid-sizing-buttons">                  <!-- Deze functionaliteit verplaatst naar het Web Component -->
          <button
            type="button"
            class="dso-viewer-grid-shrink"
            @click=${shrink}
            .disabled=${panelSize === 'small'}
          >
            ${iconTemplate({ icon: 'chevron-left' })}
          </button>
          <button
            type="button"
            class="dso-viewer-grid-expand"
            @click=${expand}
            .disabled=${panelSize === 'large'}
          >
            ${iconTemplate({ icon: 'chevron-right' })}
          </button>
        </div>
        ${main}                                                     <!-- Dit zijn de child nodes van [slot="main"] -->
      </div>
      <div class="dso-viewer-grid-map">                             <!-- <div slot="map">, hier plaatst de afnemer de kaart (bv. Leaflet of OpenLayers) -->
        ${map}
      </div>
      <div class="dso-viewer-grid-overlay" .hidden=${!panelOpen}>   <!-- <div slot="overlay"> Dit is het rechterpaneel. Open/close state management gaat met een attribuut op het root element <dso-viewer-grid> -->
        <button
          type="button"
          class="dso-viewer-grid-overlay-close-button"
          @click=${closeOverlay}
        >                                                           <!-- De sluitknop wordt onderdeel van het Web Component en verwijdert het state attribuut van het root element <dso-viewer-grid> -->
          ${iconTemplate({ icon: 'times' })}
        </button>
        ${overlay}                                                  <!-- Dit zijn de kindjes van de overlay -->
      </div>
    </div>

Interactiviteit

Formaat knoppen

image

De formaat knoppen wisselen tussen 3 afmetingen waarvan de maten in het component zijn vastgezet:

De state van de huidige selectie wordt in een attribuut op <dso-responsive-grid> beheerd. Als de kleinste of grootste maat is geselecteerd, is de bijbehorende formaat knop disabled.

Overlay sluiten knop

image

De state van open/closed is een attribuut op het root element <dso-viewer-grid> en kan door de afnemer worden geplaatst of verwijderd. Vanuit de overlay kan het attribuut weer worden verwijderd waarna de overlay sluit.

Als de overlay open is moet er een focus trap actief zijn en moet de rest van het grid worden gedimd.

Sub componenten blijven HTML/CSS componenten

Document Header, Document List Item en Filterpanel blijven HTML/CSS componenten. Misschien dat dit ooit ook Web Componenten worden, maar voor nu laten we dit intact. Waarschijnlijk zullen class name selectors omgeschreven moeten worden naar attribute selectors om hetzelfde gedrag te houden. Ik vermoed dat die styling in grid-viewer.global.scss de beste plek heeft. Zie andere .global.scss stylesheets voor inspiratie.

Bonus bug

In #1392 is een regressie bug geintroduceerd:

image

In het sub component Document List Item zijn "Omgevingsplan" en "Gemeente Gouda" zijn twee spans waar 8px tussen hoort te zitten. Zie de vergelijkbare elementen in het sub component Document Header.

benheldoorn commented 2 years ago

Alles in /packages/css/components/viewer-grid krijgt een plek in /packages/core/components/viewer-grid

&

Viewer Grid heeft een aantal "sub componenten":

Filterpanel Document Header Document List Item

Deze sub componenten kunnen alleen binnen Viewer Grid main gebruikt worden. Daarom worden ze ook nergens geisoleerd getoond.

&

Document Header, Document List Item en Filterpanel blijven HTML/CSS componenten.

Is er al ergens een constructie die hier op lijkt?

tfrijsewijk commented 2 years ago

Is er al ergens een constructie die hier op lijkt?

Nee, dit is een nieuwe situatie.

"sub componenten" is een concept wat we nog niet echt een plek hebben gegeven in de DSO Toolkit. Tot aan het Viewer Grid hebben we het ook nog niet nodig gehad. Voor nu is het voldoende om een "sub component" te zien als een component wat alleen binnen een hoger component kan werken.

Styling

Met die gedachte is het Viewer Grid het moeder component. Dit HTML/CSS component heeft markup voorschriften die bestaan uit "eigen markup" en "sub componenten". De "sub componenten" zijn

De styling voor het Viewer Grid "moeder component" wordt ondergebracht in het Web Component stylesheet (/packages/core/src/components/viewer-grid/viewer-grid.scss). De styling voor de "sub components" wordt ondergebracht in een zogenaamde "global stylesheet" (/packages/core/src/components/viewer-grid/viewer-grid.global.scss):

.global.scss stylesheets worden in packages/core/src/global-styling.scss geimporteerd.

Templating

packages/css/src/components/viewer-grid/viewer-grid.template.ts moet worden herschreven met Web Component markup, zie de opening post voor inspiratie. De andere .template.ts files kunnen afgezien van slot="xxx" attributen verder onaangetast worden verplaatst naar /packages/core/src/components/viewer-grid/.

benheldoorn commented 2 years ago

De "sub componenten" zijn

dso-viewer-grid-document-header dso-viewer-grid-list-item dso-viewer-grid-filterblok

en hoe zit het dan met de sub-sub componenten

tfrijsewijk commented 2 years ago

De "sub componenten" zijn dso-viewer-grid-document-header dso-viewer-grid-list-item dso-viewer-grid-filterblok

en hoe zit het dan met de sub-sub componenten

  • anchor
  • button
  • context
  • definition-list
  • icon
  • label-group

Die componenten worden door de afnemer gemaakt, als child nodes "ergens" in <dso-viewer-grid />. Deze markup leeft in het Light DOM en zou dus gewoon moeten werken. Maandagochtend anders samen kijken? Ik denk dat jij iets ziet wat ik niet heb kunnen bedenken.