Initial commit

.gitattributes

@@ -0,0 +1 @@
+gui-sandbox.js binary

.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+package-lock.json
+package.json
+webpack.config.js

README.md

@@ -0,0 +1,33 @@
+gui-sandbox
+===========
+
+[![hacs_badge](https://img.shields.io/badge/HACS-Default-orange.svg)](https://github.com/custom-components/hacs)
+
+This card adds a button that lets you play around with the amazing lovelace GUI editors even if you're using [YAML mode](https://www.home-assistant.io/lovelace/yaml-mode/).
+
+**Note that you can't save your changes. Instead, switch to the GUI YAML editor and copy the code into your normal lovelace configuration.**
+
+![TdQACew7YI](https://user-images.githubusercontent.com/1299821/66561504-e6e69a80-eb59-11e9-971c-12ed0d1b1baa.gif)
+
+# Installation instructions
+
+For installation instructions [see this guide](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins).
+
+The recommended type of this plugin is: `module`.
+
+```yaml
+resources:
+  url: /local/gui-sandbox.js
+  type: module
+```
+
+# Usage instructions
+
+```yaml
+type: custom:gui-sandbox
+```
+
+Don't try to save.
+
+---
+<a href="https://www.buymeacoffee.com/uqD6KHCdJ" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/white_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>

docker-compose.yml

@@ -0,0 +1,9 @@
+version: "2.0"
+services:
+  node:
+    image: node:11
+    volumes:
+      - .:/usr/src
+      - ../card-tools:/card-tools:ro
+    working_dir: /usr/src
+

gui-sandbox.js

@@ -0,0 +1,28 @@
+!function(e){var t={};function o(r){if(t[r])return t[r].exports;var n=t[r]={i:r,l:!1,exports:{}};return e[r].call(n.exports,n,n.exports,o),n.l=!0,n.exports}o.m=e,o.c=t,o.d=function(e,t,r){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(o.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)o.d(r,n,function(t){return e[t]}.bind(null,n));return r},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=0)}([function(e,t,o){"use strict";o.r(t);const r=customElements.get("home-assistant-main")?Object.getPrototypeOf(customElements.get("home-assistant-main")):Object.getPrototypeOf(customElements.get("hui-view")),n=r.prototype.html,i=r.prototype.css;function a(){var e=document.querySelector("home-assistant");if(e=(e=(e=(e=(e=(e=(e=(e=e&&e.shadowRoot)&&e.querySelector("home-assistant-main"))&&e.shadowRoot)&&e.querySelector("app-drawer-layout partial-panel-resolver"))&&e.shadowRoot||e)&&e.querySelector("ha-panel-lovelace"))&&e.shadowRoot)&&e.querySelector("hui-root")){var t=e.lovelace;return t.current_view=e.___curView,t}return null}customElements.define("gui-sandbox",class extends r{setConfig(e){}render(){return n`
+      <ha-card
+      @click=${this.clicked}
+      >
+        <span>
+          Sandbox mode
+        </span>
+      <ha-icon
+        .icon="${"yaml"===a().mode?"mdi:shovel":"mdi:shovel-off"}"
+        style="${a().editMode?"color: green":""}"
+        ></ha-icon>
+      </ha-card>
+    `}clicked(){"yaml"===a().mode&&(a().setEditMode(!a().editMode),this.requestUpdate())}static get styles(){return i`
+      ha-card {
+        cursor: pointer;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        padding: 4% 0;
+        font-size: 1.2rem;
+      }
+      ha-icon {
+        width: 40%;
+        height: auto;
+        color: var(--paper-item-icon-color, #44739e);
+      }
+    `}})}]);

hacs.json

@@ -0,0 +1,4 @@
+{
+  "name": "gui-sandbox",
+  "render_readme": true
+}

src/main.js

@@ -0,0 +1,56 @@
+import { LitElement, html, css } from "/card-tools/lit-element.js";
+import { lovelace } from "/card-tools/hass.js";
+
+class GuiSandbox extends LitElement {
+  setConfig(config) {
+  }
+
+  render() {
+    return html`
+      <ha-card
+      @click=${this.clicked}
+      >
+        <span>
+          Sandbox mode
+        </span>
+      <ha-icon
+        .icon="${ lovelace().mode === "yaml"
+          ? "mdi:shovel"
+          : "mdi:shovel-off"
+        }"
+        style="${lovelace().editMode
+          ? "color: green"
+          : ""
+        }"
+        ></ha-icon>
+      </ha-card>
+    `;
+  }
+
+  clicked() {
+    if(lovelace().mode !== "yaml") return;
+    lovelace().setEditMode(!lovelace().editMode);
+    this.requestUpdate();
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        cursor: pointer;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        padding: 4% 0;
+        font-size: 1.2rem;
+      }
+      ha-icon {
+        width: 40%;
+        height: auto;
+        color: var(--paper-item-icon-color, #44739e);
+      }
+    `;
+  }
+}
+
+customElements.define('gui-sandbox', GuiSandbox);