diff --git a/_assets/index.js b/_assets/index.js index bf23c4c..1db58dc 100644 --- a/_assets/index.js +++ b/_assets/index.js @@ -1,8 +1,19 @@ -import { init } from './js/lens.js' -init(); +import { init as init_lens } from './js/lens.js' +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(); +// } diff --git a/_assets/js/cartridge.js b/_assets/js/cartridge.js new file mode 100644 index 0000000..05d4653 --- /dev/null +++ b/_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(); + } +} diff --git a/_assets/js/lens.js b/_assets/js/lens.js index 9a3d5a6..70dd90e 100644 --- a/_assets/js/lens.js +++ b/_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( diff --git a/_assets/template.html b/_assets/template.html index 4635c75..71b5460 100644 --- a/_assets/template.html +++ b/_assets/template.html @@ -9,7 +9,7 @@ {% include navigation.html %} {% endif %} -
+
{{ content }} diff --git a/src/_layouts/cartridge.html b/src/_layouts/cartridge.html new file mode 100644 index 0000000..8ab28b2 --- /dev/null +++ b/src/_layouts/cartridge.html @@ -0,0 +1,11 @@ +--- +layout: default +--- +
+
+ +
+
+ {{ page.title }} +
+
diff --git a/src/_layouts/console.html b/src/_layouts/console.html new file mode 100644 index 0000000..fc9281f --- /dev/null +++ b/src/_layouts/console.html @@ -0,0 +1,35 @@ +--- +layout: default +--- + +
+ +
+ +
+ +
+
+ +
+
+ I AM A SLOT PUT THINGS IN ME +
+
+ + {% for cartridge in site.pages %} + {% if cartridge.layout == "cartridge" %} + + {% endif %} + {% endfor %} +
diff --git a/src/_layouts/default.html b/src/_layouts/default.html index e1572f0..26492a6 100644 --- a/src/_layouts/default.html +++ b/src/_layouts/default.html @@ -9,7 +9,7 @@ {% include navigation.html %} {% endif %} -
+
{{ content }} diff --git a/src/_scss/index.scss b/src/_scss/index.scss index 5834685..e4c6795 100644 --- a/src/_scss/index.scss +++ b/src/_scss/index.scss @@ -6,3 +6,4 @@ @import 'text'; @import 'pages/home'; +@import 'pages/console'; diff --git a/src/_scss/pages/console.scss b/src/_scss/pages/console.scss new file mode 100644 index 0000000..edca7aa --- /dev/null +++ b/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; + } + + + +} diff --git a/src/cartridge/blog.md b/src/cartridge/blog.md new file mode 100644 index 0000000..93be6d7 --- /dev/null +++ b/src/cartridge/blog.md @@ -0,0 +1,5 @@ +--- +layout: cartridge +title: blog +page_name: cartridge +--- diff --git a/src/cartridge/index.md b/src/cartridge/index.md new file mode 100644 index 0000000..7b35029 --- /dev/null +++ b/src/cartridge/index.md @@ -0,0 +1,4 @@ +--- +layout: console +page_name: console +--- diff --git a/src/index.markdown b/src/index.markdown index 0671507..77c2f00 100644 --- a/src/index.markdown +++ b/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 ---