Basic interactions

blocks/edit/da-content/da-content.css

@@ -16,6 +16,14 @@ da-editor {
   z-index: 1;
 }
 
+da-version {
+  display: none;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 2;
+}
+
 da-preview,
 da-versions {
   visibility: hidden;

blocks/edit/da-content/da-content.js

@@ -3,6 +3,7 @@ import { LitElement, html } from '../../../deps/lit/lit-core.min.js';
 import getSheet from '../../shared/sheet.js';
 import '../da-editor/da-editor.js';
 import '../da-preview/da-preview.js';
+import '../da-version/da-version.js';
 import '../da-versions/da-versions.js';
 
 const sheet = await getSheet('/blocks/edit/da-content/da-content.css');
@@ -31,6 +32,7 @@ export default class DaContent extends LitElement {
     return html`
       <div class="editor-wrapper">
         <da-editor path="${this.details.sourceUrl}"></da-editor>
+        <da-version></da-version>
         <div class="da-preview-menubar">
           <span class="da-preview-menuitem show-preview" @click=${this.showPreview}></span>
           <span class="da-versions-menuitem show-versions" @click=${this.showVersions}></span>

blocks/edit/da-version/da-version.css

@@ -0,0 +1,10 @@
+.ProseMirror {
+  min-height: 600px;
+  background-color: lavender;
+  position: relative;
+  grid-area: editor;
+  padding: 48px;
+  box-shadow: rgb(181, 181, 181) 0px 0px 20px 0px;
+  border-radius: 10px;
+  z-index: 1;
+}

blocks/edit/da-version/da-version.js

@@ -0,0 +1,23 @@
+import { LitElement, html } from '../../../deps/lit/lit-core.min.js';
+import getSheet from '../../shared/sheet.js';
+
+const sheet = await getSheet('/blocks/edit/da-version/da-version.css');
+
+export default class DaVersion extends LitElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.shadowRoot.adoptedStyleSheets = [sheet];
+  }
+
+  render() {
+    return html`
+    <div class="da-version-view">
+      <div contenteditable="false" translate="no" class="ProseMirror">
+        <p>Some older version</p>
+      </div>
+    </div>
+    `;
+  }
+}
+
+customElements.define('da-version', DaVersion);

blocks/edit/da-versions/da-versions.css

@@ -33,6 +33,22 @@
   background-color: rgb(239, 239, 239);
 }
 
+.da-versions-panel li {
+  list-style-type: square;
+}
+
+.da-versions-panel li:focus {
+  background: rgb(239, 239, 239);
+}
+
 .da-versions-close {
   background: url("/blocks/edit/img/Smock_Close_18_N.svg") center center / 20px no-repeat #EFEFEF;
 }
+
+.da-versions-create {
+  background: url("/blocks/edit/img/Smock_DataAdd_18_N.svg") center center / 20px no-repeat #EFEFEF;
+}
+
+.da-versions-restore {
+  background: url("/blocks/edit/img/Smock_DataUpload_18_N.svg") center center / 20px no-repeat #EFEFEF;
+}

blocks/edit/da-versions/da-versions.js

@@ -3,13 +3,6 @@ import getSheet from '../../shared/sheet.js';
 
 const sheet = await getSheet('/blocks/edit/da-versions/da-versions.css');
 
-const SIZES = {
-  mobile: '375px',
-  tablet: '899px',
-  laptop: '1280px',
-  desktop: '1440px',
-};
-
 export default class DaVersions extends LitElement {
   constructor() {
     super();
@@ -21,20 +14,25 @@ export default class DaVersions extends LitElement {
     this.shadowRoot.adoptedStyleSheets = [sheet];
   }
 
+  setDaVersionVisibility(displayStyle) {
+    const dav = this.parent.shadowRoot.querySelector('da-version');
+    dav.style.display = displayStyle;
+    return dav;
+  }
+
   hideVersions() {
+    this.setDaVersionVisibility('none');
+
     this.parent.classList.remove('show-versions');
     this.classList.remove('show-versions');
   }
 
-//   <div class="da-preview-menubar">
-//   ${Object.keys(SIZES).map((key) => html`
-//     <span
-//       class="da-preview-menuitem set-${key}"
-//       @click=${() => this.setWidth(key)}>
-//     </span>`)}
-//   <span class="da-preview-menuitem" @click=${this.hidePreview}></span>
-// </div>
-// <iframe
+  versionSelected(event) {
+    const dav = this.setDaVersionVisibility('block');
+    const pm = dav.shadowRoot.querySelector('.ProseMirror');
+    pm.innerHTML = `<p>${event.target.innerText}</p>`;
+  }
+
 
   render() {
     return html`
@@ -43,7 +41,18 @@ export default class DaVersions extends LitElement {
       <span class="da-versions-menuitem da-versions-restore"></span>
       <span class="da-versions-menuitem da-versions-close" @click=${this.hideVersions}></span>
     </div>
-    <div class="da-versions-panel">The versions list </div>
+    <div class="da-versions-panel">
+    <ul @click=${this.versionSelected}>
+      <li tabindex="1">6 hours ago
+      <br>David Bosschaert
+
+      <li tabindex="1">Mar 19, 2024 17:50 PM
+      <br>Chris Millar
+
+      <li tabindex="1">Mar 19, 2024 9:53 AM
+      <br>Karl Pauls
+    </ul>
+    </div>
     `;
   }
 }