kempo 1.0.0

package/kempo/components/Tabs.js

@@ -0,0 +1,254 @@
+import Component from './Component.js';
+import {
+  dispatchEvent
+} from '../utils/element.js';
+
+const clickHandler = Symbol();
+export class Tab extends Component {
+  constructor(){
+    super();
+
+    /* Private Methods */
+    this[clickHandler] = () => {
+      if(!this.active){
+        this.tabs.active = this.for;
+      }
+    }
+
+    /* Init */
+    this.slot = 'tabs';
+    this.registerAttribute('active', false);
+  }
+
+  connectedCallback(){
+    super.connectedCallback();
+    this.shadowRoot.getElementById('button').addEventListener('click', this[clickHandler]);
+  }
+
+  get for(){
+    const forValue = this.getAttribute('for');
+    if(forValue) return forValue;
+    return this?.tabs.tabs.indexOf(this);
+  }
+  set for(v){
+    if(v){
+      this.setAttribute('for', v);
+    } else {
+      this.removeAttribute('for');
+    }
+  }
+
+  get tabs(){
+    return this.parentElement.tagName === 'K-TABS'?this.parentElement:null;
+  }
+
+  get shadowTemplate(){
+    return /*html*/`
+      <button id="button">
+        ${super.shadowTemplate}
+      </button>
+    `;
+  }
+  get shadowStyles(){
+    return /*css*/`
+      :host {
+        margin-bottom: -1px;
+      }
+      #button {
+        padding: var(--spacer_h);
+        background-color: transparent;
+        border: none;
+        cursor: inherit;
+        box-shadow: none;
+        color: inherit;
+      }
+      :host(:not([active])) #button {
+        cursor: pointer;
+      }
+      :host([active]){
+        border-bottom: 2px solid var(--c_primary);
+        margin-bottom: -1px;
+      }
+      :host([active]) #button {
+        color: var(--tc_primary);
+      }
+    `;
+  }
+
+}
+window.customElements.define('k-tab', Tab);
+
+export class TabContent extends Component {
+  constructor(){
+    super();
+
+    this.registerAttribute('active', false);
+  }
+
+  get tabs(){
+    return this.parentElement.tagName === 'K-TABS'?this.parentElement:null;
+  }
+  get name(){
+    const name = this.getAttribute('name');
+    if(name) return name;
+    return this?.tabs.contents.indexOf(this);
+  }
+  set name(v){
+    if(v){
+      this.setAttribute('name', v);
+    } else {
+      this.removeAttribute('name');
+    }
+  }
+
+  get shadowStyles(){
+    return /*css*/`
+      ${super.shadowStyles}
+      :host {
+        display: block;
+        height: 100%;
+        max-height: 100%;
+        flex: 1 1 auto;
+        overflow: hidden;
+      }
+      :host([active]) {
+        display: block;
+      }
+      :host(:not([active])) {
+        display: none;
+      }
+    `;
+  }
+}
+window.customElements.define('k-tab-content', TabContent);
+
+export class Tabs extends Component {
+  constructor(){
+    super();
+    this.registerAttribute('active', '');
+  }
+
+  async connectedCallback(){
+    await super.connectedCallback();
+    if(!this.active){
+      this.active = `${this.querySelectorAll('k-tab-content')[0].name}`;
+    }
+  }
+  attributeChangedCallback(n, oV, nV){
+    if(n === 'active'){
+      const $activeTab = this.getActiveTab();
+      if($activeTab) $activeTab.active = false;
+      const $activeContent = this.getActiveContent();
+      if($activeContent) $activeContent.active = false;
+      const $tab = this.getTab(nV);
+      if($tab) $tab.active = true;
+      const $content = this.getContent(nV);
+      if($content) $content.active = true;
+      dispatchEvent(this, 'tab', { tab: nV });
+    }
+  }
+
+  get contents(){
+    return [...this.querySelectorAll(':scope > k-tab-content')];
+  }
+  get tabs(){
+    return [...this.querySelectorAll(':scope > k-tab')];
+  }
+
+  getTab(id){
+    let $tab;
+    if(typeof(id) === 'string'){
+      $tab = this.querySelector(`k-tab[for="${id}"]`);
+    }
+    if(!$tab){
+      let index = parseInt(id);
+      if(!index) index = 0;
+      $tab = this.querySelectorAll('k-tab')[index];
+    }
+    return $tab;
+  }
+  getActiveTab(){
+    return this.querySelector(':scope > k-tab[active="true"]');
+  }
+  getContent(id){
+    let $content;
+    if(typeof(id) === 'string'){
+      $content = this.querySelector(`k-tab-content[name="${id}"]`);
+    }
+    if(!$content){
+      let index = parseInt(id);
+      if(!index) index = 0;
+      $content = this.querySelectorAll('k-tab-content')[index];
+    }
+    return $content;
+  }
+  getActiveContent(){
+    return this.querySelector(':scope > k-tab-content[active="true"]');
+  }
+  
+
+  get shadowTemplate(){
+    return /*html*/`
+      <div id="wrapper">
+        <div id="tabs">
+          <slot name="tabs"></slot>
+        </div>
+        <div id="contents">
+          ${super.shadowTemplate}
+        </div>
+      </div>
+      
+    `;
+  }
+  get shadowStyles(){
+    return /*css*/`
+      ${super.shadowStyles}
+      :host {
+        display: block;
+        overflow: hidden;
+      }
+      #wrapper {
+        display: flex;
+        flex-direction: column;
+        max-height: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+      #tabs {
+        display: flex;
+        border-bottom: 1px solid var(--c_border);
+        padding: 0;
+        margin-top: calc(0 - var(--spacer));
+        align-items: flex-start;
+      }
+      #contents {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        max-height: 100%;
+        overflow: hidden
+      }
+    `;
+  }
+
+  static observedAttributes = [...super.observedAttributes, 'active'];
+}
+window.customElements.define('k-tabs', Tabs);
+
+export class TabSpacer extends Component {
+  constructor(){
+    super();
+    this.slot = 'tabs';
+  }
+
+  get shadowStyles(){
+    return /*css*/`
+      ${super.shadowStyles}
+      :host {
+        flex: 1 1 auto;
+        height: 1px;
+      }
+    `;
+  }
+}
+window.customElements.define('k-tab-spacer', TabSpacer);

package/kempo/components/ThemeSwitcher.js

@@ -0,0 +1,77 @@
+import Component from './Component.js';
+import {
+  onEvent,
+  dispatchEvent
+} from '../utils/element.js';
+
+const storageWatcher = Symbol('storageWatcher'),
+      clickHandler = Symbol('clickHandler');
+export default class ThemeSwitcher extends Component {
+  constructor(){
+    super();
+
+    this[storageWatcher] = () => {
+      this.currentTheme =  ThemeSwitcher.getCurrentTheme();
+    }
+    this[clickHandler] = () => {
+      ThemeSwitcher.setTheme(ThemeSwitcher.getCurrentTheme()==='light'?'dark':'light');
+    }
+    this.registerAttribute('currentTheme', ThemeSwitcher.getCurrentTheme());
+  }
+  async render(force){
+    if(await super.render(force)){1
+      onEvent(window, 'storage', this[storageWatcher]);
+      onEvent(this.shadowRoot.getElementById('toggle'), 'click', this[clickHandler]);
+      return true;
+    }
+    return false;
+  }
+
+  get shadowTemplate(){
+    return /*html*/`
+      <button
+        id="toggle"
+        class="no-btn"
+      >
+        <k-icon
+          id="lightMode"
+          name="light-mode"
+        ></k-icon>
+        <k-icon
+          id="darkMode"
+          name="dark-mode"
+        ></k-icon>
+      </button>
+    `;
+  }
+  get shadowStyles(){
+    return /*css*/`
+      :host {
+        --padding: var(--spacer);
+
+        display: flex;
+      }
+      #toggle {
+        padding: var(--padding);
+      }
+      :host([current-theme="dark"]) #darkMode,
+      :host([current-theme="light"]) #lightMode {
+        display: none;
+      }
+    `;
+  }
+
+  static setTheme(theme){
+    localStorage.setItem('theme', theme);
+    document.documentElement.setAttribute('theme', theme);
+    dispatchEvent(window, 'storage', { theme });
+  }
+  static getCurrentTheme(){
+    let theme = document.documentElement.getAttribute('theme');
+    if(!theme) theme = localStorage.getItem('theme');
+    if(!theme) theme = window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';
+    return theme;
+  }
+}
+ThemeSwitcher.setTheme(ThemeSwitcher.getCurrentTheme());
+window.customElements.define('k-theme-switcher', ThemeSwitcher);

package/kempo/components/Timestamp.js

@@ -0,0 +1,25 @@
+import Component from './Component.js'
+import formatTimestamp from '../utils/formatTimestamp.js';
+
+export default class Timestamp extends Component {
+	constructor(timestamp){
+		super();
+		this.registerAttribute('timestamp', 0);
+		if(timestamp) this.timestamp = timestamp;
+	}
+
+	/* Lifecycle Callbacks */
+	attributeChangedCallback(n, oV, nV){
+		if(n == 'timestamp'){
+			if(nV){
+				this.innerHTML = formatTimestamp(nV, 'en-US');
+			} else {
+				this.innerHTML = '';
+			}
+		}
+	}
+
+	/* Static Members */
+	static observedAttributes = ['timestamp'];
+}
+window.customElements.define('k-timestamp', Timestamp);

package/kempo/components/WebSnippetEditor.js

@@ -0,0 +1,159 @@
+import Component from './Component.js';
+import {
+  escapeHTML,
+  unescapeHTML
+} from '../utils/string.js';
+import './Split.js';
+import './Tabs.js';
+import './CodeEditor.js';
+
+const changeHandler = Symbol();
+export default class WebSnippetEditor extends Component {
+  constructor(){
+    super();
+
+    this[changeHandler] = () => {
+      this.renderResults();
+    }
+
+    this.registerAttributes({
+      useKempo: false,
+      showHtml: true,
+      showCss: true,
+      showJs: true,
+      scripts: ''
+    });
+  }
+
+  async render(){
+    await super.render();
+
+    const $htmlCode = this.querySelector('pre[for="html"]');
+    const $htmlEditor = this.shadowRoot.getElementById('html');
+    $htmlEditor.addEventListener('change', this[changeHandler]);
+    if($htmlCode){
+      $htmlEditor.value = escapeHTML($htmlCode.textContent);
+    } else {
+      $htmlEditor.value = escapeHTML(`<div>\n  \n</div>`);
+    }
+
+    const $cssCode = this.querySelector('pre[for="css"]');
+    const $cssEditor = this.shadowRoot.getElementById('css');
+    $cssEditor.addEventListener('change', this[changeHandler]);
+    if($cssCode){
+      $cssEditor.value = $cssCode.textContent;
+    } else {
+      $cssEditor.value = `div {\n  \n}`;
+    }
+
+    const $jsCode = this.querySelector('pre[for="js"]');
+    const $jsEditor = this.shadowRoot.getElementById('js');
+    $jsEditor.addEventListener('change', this[changeHandler]);
+    if($jsCode){
+      $jsEditor.value = $jsCode.textContent;
+    } else {
+      $jsEditor.value = '';
+    }
+    this.renderResults();
+  }
+
+  renderResults(){
+    const html = this.shadowRoot.getElementById('html').value;
+    const css = this.shadowRoot.getElementById('css').value;
+    const js = this.shadowRoot.getElementById('js').value;
+
+    const $results = this.shadowRoot.getElementById('results');
+    $results.innerHTML = '';
+    const $iframe = document.createElement('iframe');
+    $iframe.frameBorder = "0";
+    $results.appendChild($iframe);
+    const iframeDoc = $iframe.contentDocument || $iframe.contentWindow.document;
+    iframeDoc.body.innerHTML = `
+      ${this.useKempo?`<link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />`:''}
+      <style>
+        body, html {
+          background-color: transparent;
+        }
+        body {
+          overflow-y: auto;
+          padding: var(--spacer_q, 4px);
+        }
+        ${css}
+      </style>
+      ${html}
+    `;
+    if(this.useKempo && this.scripts){
+      this.scripts.split(',').forEach( script => {
+        const $script = document.createElement('script');
+        $script.type = 'module';
+        $script.src = script;
+        iframeDoc.head.appendChild($script);
+      });
+    }
+    const $script = document.createElement('script');
+    $script.textContent = js;
+    iframeDoc.head.appendChild($script);
+  }
+
+  get shadowTemplate(){
+    return /*html*/`
+      <k-split id="split">
+        <k-tabs class="ml">
+          ${this.showHtml?`<k-tab for="html">HTML</k-tab>`:''}
+          ${this.showCss?`<k-tab for="css">CSS</k-tab>`:''}
+          ${this.showJs?`<k-tab for="js">JS</k-tab>`:''}
+          <k-tab-content name="html">
+            <k-code-editor
+              id="html"
+              language="xml"
+              class="my"
+            ></k-code-editor>
+          </k-tab-content>
+          <k-tab-content name="css">
+            <k-code-editor
+              id="css"
+              language="css"
+              class="my"
+            ></k-code-editor>
+          </k-tab-content>
+          <k-tab-content name="js">
+            <k-code-editor
+              id="js"
+              language="js"
+              class="my"
+            ></k-code-editor>
+          </k-tab-content>
+        </k-tabs>
+        <div
+          id="results"
+          slot="right"
+        ></div>
+      </k-split>
+    `;
+  }
+  get shadowStyles(){
+    return /*css*/`
+      :host {
+        --min-height: auto;
+        --height: auto;
+        --max-height: auto;
+        display: block;
+      }
+      k-tab-content {
+        min-height: var(--min-height);
+        height: var(--height);
+        max-height: var(--max-height);
+      }
+      k-code-editor {
+        max-height: calc(100% - (2 * var(--spacer)));
+      }
+      #results,
+      iframe {
+        width: 100%;
+        height: 100%;
+        background-color: transparent;
+      }
+    `;
+  }
+}
+window.customElements.define('k-web-snippet-editor', WebSnippetEditor);

package/kempo/kempo-hljs.css

@@ -0,0 +1,145 @@
+:root,
+[theme="light"] {
+  --c_text: #000000;
+  --c_keyword: #0000ff;
+  --c_builtin: #00b0e8;
+  --c_number: #709756;
+  --c_string: #a31515;
+  --c_regex: #914525;
+  --c_function: inherit;
+  --c_comment: #008000;
+  --c_doc: #808080;
+  --c_tag: #7d7d7d;
+  --c_var: #b436bf;
+  --c_attr: #ff0000;
+  --c_section: #a31515;
+  --c_selector: #0000ff;
+  --c_addition: #a31515;
+  --c_deletion: #2b91af;
+  --c_caret: black;
+}
+[theme="dark"] {
+  --c_text: #DCDCDC;
+  --c_keyword: #569CD6;
+  --c_builtin: #4EC9B0;
+  --c_number: #B8D7A3;
+  --c_string: #D69D85;
+  --c_regex: #9A5334;
+  --c_function: inehrit;
+  --c_comment: #57A64A;
+  --c_doc: #608B4E;
+  --c_tag: #9B9B9B;
+  --c_var: #BD63C5;
+  --c_attr: #9CDCFE;
+  --c_section: #ffd700;
+  --c_selector: #569CD6;
+  --c_addition: #144212;
+  --c_deletion: #600;
+  --c_caret: white;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  color: var(--c_text);
+}
+
+.hljs-keyword,
+.hljs-literal,
+.hljs-symbol,
+.hljs-name,
+.hljs-link {
+  color: var(--c_keyword);
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+.hljs-built_in,
+.hljs-type {
+  color: var(--c_builtin);
+}
+
+.hljs-number,
+.hljs-class {
+  color: var(--c_number);
+}
+
+.hljs-string,
+.hljs-meta-string {
+  color: var(--c_string);
+}
+
+.hljs-regexp,
+.hljs-template-tag {
+  color: var(--c_regex);
+}
+
+.hljs-subst,
+.hljs-function,
+.hljs-title,
+.hljs-params,
+.hljs-formula {
+  color: var(--c_function);
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: var(--c_comment);
+  font-style: italic
+}
+
+.hljs-doctag {
+  color: var(--c_doc);
+}
+
+.hljs-meta,
+.hljs-meta-keyword,
+.hljs-tag {
+  color: var(--c_tag);
+}
+
+.hljs-variable,
+.hljs-template-variable {
+  color: var(--c_var);
+}
+
+.hljs-attr,
+.hljs-attribute,
+.hljs-builtin-name {
+  color: var(--c_attr);
+}
+
+.hljs-section {
+  color: var(--c_section);
+}
+
+.hljs-emphasis {
+  font-style: italic
+}
+
+.hljs-strong {
+  font-weight: bold
+}
+
+.hljs-bullet,
+.hljs-selector-tag,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: var(--c_selector);
+}
+
+.hljs-addition {
+  background-color: var(--c_addition);
+  display: inline-block;
+  width: 100%
+}
+
+.hljs-deletion {
+  background-color: var(--c_deletion);
+  display: inline-block;
+  width: 100%
+}