Added some components

kb-dk · Feb 14, 2023 · d1bdd50 · d1bdd50
commit d1bdd50
Show file tree

Hide file tree

Showing 8 changed files with 324 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+/.idea/
+package-lock.json
+/node_modules/
diff --git a/index.html b/index.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="da">
+<head>
+    <meta charset="utf-8">
+    <script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
+    <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
+    <script type="module" src="kb-input.js"></script>
+    <script type="module" src="kb-button.js"></script>
+    <script type="module" src="kb-stack.js"></script>
+    <script type="module" src="kb-footer.js"></script>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
+</head>
+<body>
+
+<form action="https://www.kb.dk/" method="POST" role="search">
+    <kb-stack shadow>
+        <kb-input expand name="input" type="search" id="mainSearchInput" class="form-control" placeholder="Søg på titel, forfatter, tidsskrift, database etc." name=""></kb-input>
+        <kb-button type="submit" text="søg"></kb-button>
+    </kb-stack>
+</form>
+
+<kb-footer></kb-footer>
+</body>
+</html>
diff --git a/kb-button.js b/kb-button.js
@@ -0,0 +1,58 @@
+import {html, css, LitElement} from 'https://cdn.jsdelivr.net/gh/lit/dist@2/all/lit-all.min.js';
+
+export class KbButton extends LitElement {
+
+  static styles = css`
+    button{
+      height: 100%;
+      display: inline-flex;
+      align-items: center;
+      background: #fff;
+      border-radius: 0;
+      color: #002e70;
+      flex-direction: column;
+      justify-content: center;
+      margin-bottom: 0;
+      padding: 0 22px;
+      width: auto;
+      border: none;
+    }
+    `;
+  static properties = {
+    type: {attribute: 'type'},
+    text: {attribute: 'text'},
+  };
+
+  constructor() {
+    super();
+    this.type = {};
+    this.text = {};
+    this.addEventListener('click', (e) => this._submitForm(e));
+  }
+
+  render() {
+    return html`
+      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
+      <button type="${this.type}" >
+        <span class="material-symbols-outlined">search</span>
+        <span >${this.text}</span>
+      </button>
+    `;
+  }
+  _submitForm(evt) {
+    evt.stopPropagation();
+    // this.closest('FORM').dispatchEvent(new Event('submit'));
+    let submit = document.createElement('button');
+    submit.setAttribute("type", "submit");
+    submit.setAttribute("style", "display:none")
+    evt.target.closest('FORM').appendChild(submit);
+    // submit.click();
+    console.dir(evt.target.closest('FORM'));
+    const data = new FormData(evt.target.closest('FORM'));
+    for (const [name,value] of data) {
+      console.log(name, ":", value)
+    }
+  }
+}
+
+customElements.define('kb-button', KbButton);
diff --git a/kb-footer-column.js b/kb-footer-column.js
@@ -0,0 +1,44 @@
+import {html, directive, AsyncDirective} from 'https://cdn.jsdelivr.net/gh/lit/dist@2/all/lit-all.min.js';
+class KbFooterColumn extends AsyncDirective {
+
+    constructor() {
+        super();
+    }
+    update(part, [column]){
+        let footerColumnDataUrl = `https://kbdk-testing.kb.dk/jsonapi/node/site/e065d5e7-a348-4384-9859-c17841d03019?fields[node--site]=footer_column_${column}`;
+        if (this.isConnected) {
+            return this.fetchData(footerColumnDataUrl, column);
+        }
+        return '';
+    }
+
+    fetchData(url, column) {
+        fetch(url)
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                return response.json();
+            })
+            .then(data => {
+                return this.setValue(this.render(data.data.attributes[`footer_column_${column}`]));
+            })
+            .catch((error) => {
+                console.error('Error:', error);
+            });
+    }
+
+    render(listData) {
+        return html`
+            <div>
+                <h2>${listData[0].title}</h2>
+                <ul>
+                    ${listData.slice(1).map(itemData => html`
+                        <li><a href="${itemData.uri}">${itemData.title}</a></li>`)}
+                </ul>
+            </div>
+    `;
+    }
+}
+
+export const kbFooterColumn = directive(KbFooterColumn);
diff --git a/kb-footer.js b/kb-footer.js
@@ -0,0 +1,81 @@
+import {html, css, LitElement} from 'https://cdn.jsdelivr.net/gh/lit/dist@2/all/lit-all.min.js';
+import {kbFooterColumn} from "./kb-footer-column.js";
+
+export class KbFooter extends LitElement {
+
+  static styles = css`
+    :host{
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+    
+    footer{
+      padding: 36px 48px 40px;
+      display: flex;
+      background: #002e70;
+      color: #fff;
+    }
+    
+    footer div{
+      flex: 0 0 25%;
+      max-width: 25%;
+      padding-bottom: 12px;
+    }
+
+    footer div ul {
+      list-style-type: none;
+      padding-inline-start: 0;
+      margin-bottom: 1rem;
+    }
+    
+    footer a{
+      text-decoration: none;
+      color: white;
+    }
+    `;
+  static properties = {
+    type: {attribute: 'type'},
+    text: {attribute: 'text'},
+    data: {attribute: false},
+  };
+
+  constructor() {
+    super();
+    this.type = {};
+    this.text = {};
+    this.data = {};
+  }
+
+  lastColumn = html`
+    <div>
+      <ul>
+      <li><a href="/spoerg-biblioteket">Spørg biblioteket</a></li>
+      <li><a href="/om-os/kontakt">[email protected]</a></li>
+      <li aria-label="telefonnummer">
+        Tel: (+45) 3347 4747</li>
+      <li><a href="/om-os/presse">Pressekontakt</a></li>
+      <li aria-label="EAN nummer">
+        EAN: 5798000795297
+      </li>
+<!--      <li class="some-icons">-->
+<!--        <a href="https://www.facebook.com/DetKglBibliotek/"><i class="rdl-icons">rdl_facebook</i><span class="sr-only">Følg os på facebook</span></a>-->
+<!--        <a href="https://www.instagram.com/detkglbibliotek/"><i class="rdl-icons">rdl_instagram</i><span class="sr-only">Følg os på Instagram</span></a>-->
+<!--        <a href="https://www.linkedin.com/company/det-kgl-bibliotek/"><i class="rdl-icons">rdl_linkedin</i><span class="sr-only">Følg os på LinkedIn</span></a>-->
+<!--        <a href="https://twitter.com/DetKglBibliotek"><i class="rdl-icons">rdl_twitter</i><span class="sr-only">Følg os på twitter</span></a>-->
+<!--      </li>-->
+      </ul>
+    </div>
+  `;
+  render() {
+    return html`
+        <footer>
+            ${[1, 2, 3].map(i => html`${kbFooterColumn(i)}`)}
+            ${this.lastColumn}
+        </footer>
+    `;
+  }
+}
+
+customElements.define('kb-footer', KbFooter);
diff --git a/kb-input.js b/kb-input.js
@@ -0,0 +1,71 @@
+import {html, css, LitElement} from 'https://cdn.jsdelivr.net/gh/lit/dist@2/all/lit-all.min.js';
+
+export class KBInput extends LitElement {
+  static formAssociated = true;
+
+  static properties = {
+    type: {type: String, reflect: true},
+    placeholder: {type: String, reflect: true},
+    name: {type: String, reflect: true},
+    expand: {type: Boolean, reflect: true},
+  };
+
+  constructor() {
+    super();
+    this.type = {};
+    this.placeholder = {};
+    this.name = {};
+    this.expand = false;
+    this.internals = this.attachInternals();
+  }
+
+  static get styles() {
+    return [
+      css`
+        input {
+          border: none;
+          height: 72px;
+          padding: 20px 12px;
+          background-clip: padding-box;
+          background-color: #fff;
+          border-radius: 2px;
+          color: #495057;
+          display: block;
+          font-size: 1rem;
+          font-weight: 400;
+          line-height: 1.5;
+          transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+        }
+        :host([expand]),
+        :host([expand]) input{
+          width: 100%;
+        }
+        
+        :focus-visible {
+          outline: 0;
+        }
+      `];
+  }
+  render() {
+    return html`
+      <div>
+        <input type="${this.type}" name="${this.name}" placeholder="${this.placeholder}" @input="${this._onInput}">
+      </div>
+    `;
+  }
+
+  _onInput(event) {
+    this.value = event.target.value;
+    this.internals.setFormValue(this.value);
+  }
+
+  /** LitElement lifecycle method */
+  // firstUpdated(...args) {
+  //   super.firstUpdated(...args);
+  //   /** This ensures our element always participates in the form */
+  //   this.internals.setFormValue(this.value);
+  // }
+
+}
+
+customElements.define('kb-input', KBInput);
diff --git a/kb-stack.js b/kb-stack.js
@@ -0,0 +1,34 @@
+import {html, css, LitElement} from 'https://cdn.jsdelivr.net/gh/lit/dist@2/all/lit-all.min.js';
+
+export class KBStack extends LitElement {
+
+  static styles = css`
+    div{
+      display: flex;
+    }
+    :host([shadow]) div{
+      border: 1px solid #f5f5f5;
+      border-radius: 2px;
+      box-shadow: 0 2px 2px rgb(0 0 0 / 24%);
+      flex-wrap: nowrap;
+    }
+    `;
+
+  static properties = {
+    shadow: {type: Boolean, reflect: true},
+  };
+
+  constructor() {
+    super();
+  }
+
+  render() {
+    return html`
+        <div>
+          <slot></slot>
+        </div>
+    `;
+  }
+}
+
+customElements.define('kb-stack', KBStack);
diff --git a/package.json b/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "xfy11n.run",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "lit-element": "2.1.0",
+    "@webcomponents/webcomponentsjs": "2.2.10"
+  }
+}