commit 146b2bdaa72bcae5e10eeead64282d51b99b27ba Author: Thomas Lovén Date: Thu Oct 10 12:32:54 2019 +0200 Initial commit diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..192c654 --- /dev/null +++ b/.gitattributes @@ -0,0 +1 @@ +gui-sandbox.js binary diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..d26a54b --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +node_modules/ +package-lock.json +package.json +webpack.config.js diff --git a/README.md b/README.md new file mode 100644 index 0000000..2a9dbf3 --- /dev/null +++ b/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. + +--- +Buy Me A Coffee diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..5b0df6a --- /dev/null +++ b/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 + diff --git a/gui-sandbox.js b/gui-sandbox.js new file mode 100644 index 0000000..5f96d84 --- /dev/null +++ b/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` + + + Sandbox mode + + + + `}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); + } + `}})}]); \ No newline at end of file diff --git a/hacs.json b/hacs.json new file mode 100644 index 0000000..63375a7 --- /dev/null +++ b/hacs.json @@ -0,0 +1,4 @@ +{ + "name": "gui-sandbox", + "render_readme": true +} diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..9ee2942 --- /dev/null +++ b/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` + + + Sandbox mode + + + + `; + } + + 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);