cross window communication proof of concept

_assets/index.js

@@ -1,8 +1,19 @@
-import { init } from './js/lens.js'
+import { init as init_lens } from './js/lens.js'
-init();
+import { init as init_cartridge } from './js/cartridge';
+
+
 
 // Test import of an asset
 // import webpackLogo from '@/images/webpack-logo.svg'
 
 // Test import of styles
 import './index.scss';
+
+
+// let main = document.getElementsByTagName(main);
+// console.log('name', main[0].getAttribute('name'))
+// if (main[0].getAttribute('name') === "home"){
+  init_lens();
+  console.log('init lens');
+  init_cartridge();
+// }

_assets/js/cartridge.js

@@ -0,0 +1,85 @@
+const CART_SIZE = {
+  x: 300,
+  y: 200
+}
+
+function slot_position(){
+  let slot = document.querySelector('#slot');
+  return slot.getBoundingClientRect()
+}
+
+function list_carts(){
+  let carts= document.querySelectorAll('.cartridge-metadata');
+  return carts;
+
+}
+
+
+function showPopups(){
+  let carts = list_carts();
+
+  let cartPopups = carts.forEach((cart) => {
+    console.log('cart', cart);
+    let popup = window.open(
+        cart.getAttribute('url'),
+        cart.getAttribute('title'),
+        `popup=true,width=${CART_SIZE.x+10},height=${CART_SIZE.y+10}`
+        )
+    popup.screen
+  })
+}
+
+
+
+// function store_slot_position(){
+//   let slot_pos = slot_position();
+//   console.log(slot_pos);
+//   window.setTimeout(poll_position, 1000);
+// }
+
+function store_position(){
+  let name = document.querySelector('.cartridge .label').textContent;
+  let position = {
+    x: window.screenX,
+    y: window.screenY,
+    width: window.outerWidth,
+    height: window.outerHeight
+  };
+
+  localStorage.setItem(name,  JSON.stringify(position));
+  window.setTimeout(store_position, 100);
+  console.log('store position', position);
+}
+
+function console_message(msg){
+  // console.log('console message', msg);
+  let cart_position = JSON.parse(msg.newValue);
+  cart_position['name'] = String(msg.key).trim();
+  console.log(cart_position)
+}
+
+function init_console(){
+  showPopups();
+  // store_slot_position();
+
+  // window.addEventListener('resize', () => {
+  //   store_slot_position();
+  // })
+
+  window.addEventListener('storage', (event) => {console_message(event)})
+}
+
+function init_cartridge(){
+  console.log('init cartridge')
+  store_position();
+}
+
+export function init(){
+  window.showPopups = showPopups;
+  let page_type = document.querySelector('main').getAttribute('page');
+  if (page_type === 'console'){
+    init_console();
+  } else if (page_type === "cartridge"){
+    init_cartridge();
+  }
+}

_assets/js/lens.js

@@ -11,6 +11,11 @@ function _init(){
   let filter = document.getElementById('filter');
   let hid_hint = false;
 
+  if (!lens){
+    console.log('not doing lens')
+    return
+  }
+
   // let FOCUS_SIZE = root.style.getPropertyValue('--lens-size')
 
   root.style.setProperty(

_assets/template.html

@@ -9,7 +9,7 @@
 {% include navigation.html %}
 {% endif %}
 
-<main>
+<main page="{{ page.page_name }}">
     <!-- <div class="container"> -->
     {{ content }}
     <!-- </div> -->

src/_layouts/cartridge.html

@@ -0,0 +1,11 @@
+---
+layout: default
+---
+<div class="cartridge">
+    <div class="clip">
+
+    </div>
+    <div class="label">
+        {{ page.title }}
+    </div>
+</div>

src/_layouts/console.html

@@ -0,0 +1,35 @@
+---
+layout: default
+---
+
+<div id="console">
+
+    <div id="popups">
+        <button onclick="showPopups();">
+            SHOW POPUPS
+        </button>
+    </div>
+
+    <div id="container">
+        <div id="slot">
+
+        </div>
+        <div id="slot-label">
+            I AM A SLOT PUT THINGS IN ME
+        </div>
+    </div>
+
+    {% for cartridge in site.pages %}
+    {% if cartridge.layout == "cartridge" %}
+    <ul class="cartridge-list" id="cartridges">
+        <li
+            class="cartridge-metadata"
+            url="{{ cartridge.url }}"
+            title="{{ cartridge.title }}"
+        >
+            <a href="{{ cartridge.url }}">{{ cartridge.title }}</a>
+        </li>
+    </ul>
+    {% endif %}
+    {% endfor %}
+</div>

src/_layouts/default.html

@@ -9,7 +9,7 @@
 {% include navigation.html %}
 {% endif %}
 
-<main>
+<main page="{{ page.page_name }}">
     <!-- <div class="container"> -->
     {{ content }}
     <!-- </div> -->

src/_scss/index.scss

@@ -6,3 +6,4 @@
 @import 'text';
 
 @import 'pages/home';
+@import 'pages/console';

src/_scss/pages/console.scss

@@ -0,0 +1,60 @@
+.cartridge-list {
+    //display: none;
+}
+
+#console {
+
+    #container {
+        position: absolute;
+        bottom: 20px;
+        right: 20px;
+        height: 200px;
+        width: 50%;
+        border: 2px solid black;
+
+
+        #slot{
+            border: 3px solid black;
+            width: 300px;
+            height: 50px;
+
+        }
+        #slot-label {
+            font-family: monospace;
+            top: 3.5em;
+            position:relative;
+        }
+
+    }
+
+    #popups {
+        position:absolute;
+        top: 20%;
+        left: 20%;
+    }
+
+    & * {
+        position: absolute;
+    }
+}
+
+.cartridge {
+    position:absolute;
+    top:0;
+    left:0;
+    width: 300px;
+    height: 200px;
+    border: 2px solid black;
+
+    box-shadow: 5px 5px black;
+
+    .label {
+        position: absolute;
+        top: 20px;
+        left: 20px;
+        font-family: monospace;
+    }
+
+
+
+}

src/cartridge/blog.md

@@ -0,0 +1,5 @@
+---
+layout: cartridge
+title: blog
+page_name: cartridge
+---

src/cartridge/index.md

@@ -0,0 +1,4 @@
+---
+layout: console
+page_name: console
+---

src/index.markdown

@@ -3,4 +3,5 @@
 # To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
 
 layout: home
+page_name: home
 ---