Test commit

component-templates/full-pane.js

@@ -0,0 +1,56 @@
+'use strict'
+
+import {x} from '../core/elements';
+import {pxParser} from '../utils/string-utils';
+import {Component} from '../core/component-factory';
+
+let TweenMax = require('gsap');
+
+export let FullPane = Component((opts) => {
+
+  let styles = Object.assign(defaultFactory(), opts);
+
+  let topStyles = Object.assign(defaultFactory(), { top: '0', position: 'absolute' });
+  let bottomStyles = Object.assign(defaultFactory(), { top: '225px', position: 'absolute' });
+
+  let wrapper = x
+    .div
+    .append(
+      x.div
+      .setStyles(topStyles)
+      .touchStart((el) => {
+        wrapper.to(0.2, topStyles);
+        el.publish('closePane', {});
+      }),
+      x.div
+      .setStyles(bottomStyles)
+      .touchStart((el) => {
+        wrapper.to(0.2, bottomStyles);
+        el.publish('closePane', {});
+      })
+    );
+
+    if(opts.topContent) {
+      wrapper.childNodes[0].append(opts.topContent);
+    }
+
+    if(opts.bottomContent) {
+      wrapper.childNodes[1].append(opts.bottomContent);
+    }
+
+    function defaultFactory (){
+      return { 
+        color: '#fff',
+        textShadow: '2px 1px 2px rgba(150, 150, 150, 1)',
+        backgroundColor: 'rgba(0, 0, 0, 0.7)',
+        height: '240px',
+        width: '800px',
+        left: '0',
+        zIndex: '10',
+        margin: '0'
+      }
+    }
+
+  return wrapper;
+
+});

components/plex-controls.js

@@ -0,0 +1,66 @@
+import {FullPane} from '../component-templates/full-pane';
+import {x} from '../core/elements';
+
+export let plexControls = plexControlFactory();
+
+
+function plexControlFactory() {
+  let buttonStyles = {
+    width: '50px',
+    height: '50px',
+    borderRadius: '5px',
+    backgroudColor: 'orange',
+    flex: '1'
+  }
+
+  let topContent = x
+    .div
+    .setStyles({
+      display: 'flex'
+    })
+    .append(
+      x.button
+      .setStyles(buttonStyles),
+      x.button
+      .setStyles(buttonStyles),
+      x.button
+      .setStyles(buttonStyles),
+      x.button
+      .setStyles(buttonStyles)
+    )
+
+  let bottomContent = x
+    .div
+    .setStyles({
+      display: 'flex'
+    })
+    .append(
+      x.button
+      .setStyles(buttonStyles),
+      x.button
+      .setStyles(buttonStyles),
+      x.button
+      .setStyles(buttonStyles),
+      x.button
+      .setStyles(buttonStyles)
+    )
+
+  let control = FullPane({
+    color: 'RGB(255, 21, 30)', 
+    padding: '15px',
+    topContent: topContent,
+    bottomContent: bottomContent
+  });
+
+  control
+  .touchStart((el) => {
+    el.animation.reverse();
+
+    el.animation.eventCallback('onReverseComplete', () => {      
+      [...el.childNodes].forEach((node) => { node.remove(); });
+    });
+  });
+
+  return control;
+}
+

core/dum.js

@@ -1,6 +1,11 @@
 'use strict';
 
 let TweenMax = require('gsap');
+const renderer = require('electron').ipcRenderer; 
+
+let pi;
+renderer.on('pi', (isPi) => { pi = isPi; });
+renderer.send('pi?');
 
 export function registerComponent(elementName, templateId, shadowHost) {
   let CustomElement   = document.registerElement(elementName);
@@ -37,11 +42,23 @@ export let decorateEl = (function() {
       },
 
       touchStart: {
-        value: _setUpHandler('touchstart', el)
+        value: (function(){
+          if(pi) {
+            return _setUpHandler('touchstart', el);
+          } else {
+            return _setUpHandler('click', el);
+          }
+        }())
       },
 
       touchEnd: {
-        value: _setUpHandler('touchend', el)
+        value: (function(){
+          if(pi) {
+            return _setUpHandler('touchend', el);
+          } else {
+            return _setUpHandler('click', el);
+          }
+        }())
       },
 
       click: {
@@ -75,13 +92,14 @@ export let decorateEl = (function() {
           let fragment = document.createDocumentFragment();
 
           [...args].forEach((childEl) => {
-            if(childEl.constructor === Array){
+            if(childEl && childEl.constructor === Array){
               childEl.forEach((elem) => {
                 fragment.appendChild(elem);
               });
 
               el.appendChild(fragment);
-            } else {
+            } else if(childEl){
+
               el.appendChild(childEl);
             }
           });

core/elements.js

@@ -2,8 +2,13 @@
 
 import {decorateEl, createEl} from './dum';
 const electron = require('electron');
+const renderer = require('electron').ipcRenderer; 
 
 let size = electron.screen.getPrimaryDisplay().workAreaSize;
+let pi;
+
+renderer.on('pi', (isPi) => { pi = isPi; });
+renderer.send('pi?');
 
 export let x = {};
 Object.defineProperties(x, {
@@ -18,14 +23,13 @@ Object.defineProperties(x, {
         backgroundImage: 'url("./img/background/80s.jpg")',
         backgroundSize: 'cover',
         backgroundRepeat: 'no-repeat',
-	      cursor: 'none'
+	      cursor: pi ? 'none' : 'pointer'
       });
 
       let fragment = decorateEl(document.createDocumentFragment());
 
       [...args].forEach((arg) => {
-
-        if(arg.constructor === Array){
+        if(arg && arg.constructor === Array){
           arg.forEach((elem) => {
             fragment.append(elem);
           });

js/playground.js

@@ -3,6 +3,7 @@ import {dots} from '../components/dots';
 import {dimmer} from '../components/dimmer';
 import {weatherPane} from '../components/weather-pane';
 import {mainControlTiles} from '../components/main-control-tiles';
+import {plexControls} from '../components/plex-controls';
 
 /*======== COMPONENT SETUP =======*/
 dots();
@@ -11,7 +12,8 @@ dots();
 x.attach(
   dimmer,
   weatherPane,
-  mainControlTiles
+  mainControlTiles,
+  plexControls
 );
 
 

main.js

@@ -30,6 +30,10 @@ function createWindow () {
     type: 'splash',
     backgroundColor: '#BDF4DE'
   });
+
+  ipcMain.on('pi?', (event) => {
+    event.sender.send('pi', pi);
+  });
 
   if(pi) {
     var gpio = require('rpi-gpio');