back, home, exit buttons

Author: bennyschmidt

components/App/index.js

@@ -1,11 +1,13 @@
+/*******************************************
+ * App
+ *
+ * Extends Page with events & scripting
+ *******************************************/
+
 import { randomUUID } from 'crypto';
 
 import { Page } from '../index.js';
 
-/**
- * App
- */
-
 class App extends Page {
 
   /*******************************************

components/Audio/index.js

@@ -1,11 +1,14 @@
+/*******************************************
+ * Audio
+ *
+ * An audio player
+ *******************************************/
+
+
 import { randomUUID } from 'crypto';
 
 import { Playable } from '../index.js';
 
-/**
- * Audio
- */
-
 class Audio extends Playable {
 
   /*******************************************

components/Component/index.js

@@ -1,8 +1,11 @@
-import { randomUUID } from 'crypto';
-
-/**
+/*******************************************
  * Component
- */
+ *
+ * The base component class with common
+ * methods and properties
+ *******************************************/
+
+import { randomUUID } from 'crypto';
 
 class Component {
 

components/Data/index.js

@@ -1,8 +1,11 @@
-import { Component } from '../index.js';
-
-/**
+/*******************************************
  * Data
- */
+ *
+ * Represents a viewable data structure
+ * element
+ *******************************************/
+
+import { Component } from '../index.js';
 
 class Data extends Component {
 

components/Document/index.js

@@ -1,12 +1,15 @@
+/*******************************************
+ * Document
+ *
+ * Represents a viewable file or
+ * document element
+ *******************************************/
+
 import fs from 'fs/promises';
 import { randomUUID } from 'crypto';
 
 import { Component, Data } from '../index.js';
 
-/**
- * Document
- */
-
 class Document extends Component {
   static async load (filePath, onLoad) {
     const response = await fs.readFile(filePath);
@@ -45,14 +48,29 @@ class Document extends Component {
     return this.data?.toString?.() || '';
   }
 
+  /**
+   * open
+   * Open a file or document source
+   **/
+
   open (source) {
     this.onLoad(source);
   }
 
+  /**
+   * close
+   * Close and unload the current file
+   **/
+
   close () {
     this.onUnload();
   }
 
+  /**
+   * onLoad
+   * Handle load
+   **/
+
   onLoad (source) {
     const json = JSON.parse(source?.toString());
     const base64String = source?.toString?.('base64') || '';
@@ -80,10 +98,6 @@ class Document extends Component {
     this.encoding = sourceType.slice(sourceType.indexOf(';') + 1, source.indexOf(','));
     this.format = sourceType.slice(sourceType.indexOf('/') + 1, sourceType.indexOf(';'));
   }
-
-  onScroll (event) {
-    console.log('scroll', event);
-  }
 }
 
 export default Document;

components/Image/index.js

@@ -1,13 +1,15 @@
+/*******************************************
+ * Image
+ *
+ * A viewable image
+ *******************************************/
+
 import { randomUUID } from 'crypto';
 
 import { WINDOW_OPTIONS } from '../../constants.js';
 
 import { Media } from '../index.js';
 
-/**
- * Image
- */
-
 class Image extends Media {
   static fit (isContain) {
     return (
@@ -85,10 +87,20 @@ class Image extends Media {
     return this.height;
   }
 
+  /**
+   * onHover
+   * Handle hover
+   **/
+
   onHover (event, component) {
     console.log('Image.onHover', event, component.id);
   }
 
+  /**
+   * onClick
+   * Handle click
+   **/
+
   onClick (event, component) {
     console.log('Image.onClick', event, component.id);
   }

components/Input/index.js

@@ -1,3 +1,10 @@
+/*******************************************
+ * Input
+ *
+ * A stateful text input with a
+ * placeholder and basic key validation
+ *******************************************/
+
 import { randomUUID } from 'crypto';
 
 import {
@@ -7,10 +14,6 @@ import {
 
 import { Rect, Text } from '../index.js';
 
-/**
- * Input
- */
-
 class Input extends Rect {
 
   /*******************************************
@@ -80,6 +83,11 @@ class Input extends Rect {
     return `<Input #${this.id}>`;
   }
 
+  /**
+   * onClick
+   * Handle click
+   **/
+
   onClick (event, component) {
     const { id } = component;
 
@@ -99,6 +107,11 @@ class Input extends Rect {
     this.state.focusTarget = component?.id;
   }
 
+  /**
+   * onKeyDown
+   * Handle keydown
+   **/
+
   onKeyDown (event, component) {
     let { key = '' } = event;
 

components/Link/index.js

@@ -1,11 +1,14 @@
+/*******************************************
+ * Link
+ *
+ * A text link with a hover state that
+ * navigates to a path
+ *******************************************/
+
 import { randomUUID } from 'crypto';
 
 import { Rect, Text } from '../index.js';
 
-/**
- * Link
- */
-
 class Link extends Rect {
 
   /*******************************************

components/Media/index.js

@@ -1,15 +1,16 @@
+/*******************************************
+ * Media
+ *
+ * Base media class with common methods
+ * and properties for viewable media
+ *******************************************/
+
 import fs from 'fs/promises';
 import notifier from 'node-notifier';
 
 import { Pressable } from '../index.js';
 
-const ERROR_MESSAGE = {
-  'HTTP/404': 'File not found.'
-};
-
-/**
- * Media
- */
+import { ERROR_MESSAGE } from '../../constants.js';
 
 class Media extends Pressable {
   static async load (filePath, onLoad) {

components/Page/index.js

@@ -1,11 +1,14 @@
+/*******************************************
+ * Page
+ *
+ * Extends Document with a title and
+ * JSX value
+ *******************************************/
+
 import { randomUUID } from 'crypto';
 
 import { Document } from '../index.js';
 
-/**
- * Page
- */
-
 class Page extends Document {
 
   /*******************************************
@@ -22,7 +25,7 @@ class Page extends Document {
     this.type = 'page';
     this.id = id || `${this.type}-${randomUUID().slice(0, 8)}`;
     this.title = title;
-    this.value = null;
+    this.value = '';
 
     this.attributes = {
       id: this.id,