pre-release

Author: pseusys

pages/index.pug

@@ -1,3 +1,10 @@
+mixin section(id, content_id, active="")
+    section.mdl-layout__tab-panel(id=id class=active)
+        .tab-content.mdl-grid(id=content_id)
+            block
+
+
+
 doctype html
 html(lang='en')
     head
@@ -22,16 +29,12 @@ html(lang='en')
 
             main.mdl-layout__content
                 #tabs
-                    section#GENERAL.mdl-layout__tab-panel
-                        #file-content.tab-content.mdl-grid
-                            include general_tab
-                    section#STYLE.mdl-layout__tab-panel.is-active
-                        #style-content.tab-content.mdl-grid
-                            include style_tab
-                    section#PREVIEW.mdl-layout__tab-panel
-                        #preview-content.tab-content
-                    section#CODE.mdl-layout__tab-panel
-                        #code-content.tab-content
+                    +section("GENERAL", "file-content")
+                        include general_tab
+                    +section("STYLE", "style-content", "is-active")
+                        include style_tab
+                    +section("PREVIEW", "preview-content")
+                    +section("CODE", "code-content")
 
                 #terminal.mdl-shadow--2dp
                     include terminal

pages/style_tab.pug

@@ -2,10 +2,10 @@ mixin presets(names)
     each cls, name in names
         span.mdl-chip
             .preset
-                span.preset-label.mdl-chip__text(class=cls)=name
+                span.preset-label.mdl-chip__text(id=name class=cls)=name
             .mdl-layout-spacer
             button.preset-button.mdl-chip__action(type="button")
-                i.material-icons cancel
+                i.material-icons mode_edit
 
 mixin checkboxes(...simple)
     each check in simple

scripts/cutter.ts

@@ -1,7 +1,7 @@
-import { DEFAULTS, getPrefix, multiplePrefix, SEPARATOR, VAR_NAMES } from "../core/constants";
+import { CLASS_CODES, DEFAULTS, getPrefix, multiplePrefix, SEPARATOR, VAR_NAMES } from "../core/constants";
 import { areArraysEqual, getSameElements } from "../core/utils";
 import { find_span_for_place, get_chosen_line_content, terminal } from "./terminal";
-import { restorePresets } from "./style_tab";
+import { restore_presets } from "./style_tab";
 
 
 
@@ -184,7 +184,7 @@ interface Formatting {
  * It applies given style to a node (preset example) or to a range of nodes (styled spans),
  * cutting and merging them if necessary.
  * @see terminal styled spans
- * @see restorePresets preset example
+ * @see restore_presets preset example
  * @param acceptor node or acceptor to apply style to.
  * @param format style that will be applied.
  */
@@ -234,8 +234,9 @@ function cut (range: Range, format?: Formatting) {
  * @param format style to apply.
  */
 function apply_formatting (elem: HTMLElement, format?: Formatting) {
-    if (format == null) elem.className = "";
-    else {
+    if (format == null) elem.className = [...elem.classList].filter((value: string): boolean => {
+        return !Object.keys(CLASS_CODES).includes(value);
+    }).join(" "); else {
         if (multiplePrefix(format.type)) {
             const new_name = format.type + SEPARATOR + format.value;
             const same_class = [...elem.classList].find((value: string): boolean => {
@@ -259,7 +260,7 @@ function apply_formatting (elem: HTMLElement, format?: Formatting) {
  * @param single - node to identify classes.
  * @return list of common classes or null if none.
  */
-export function get_common_classes (range?: Range, single?: HTMLDivElement): string[] | null {
+export function get_common_classes (range?: Range, single?: HTMLSpanElement): string[] | null {
     if (!range == !single) return null;
     let base: HTMLElement[];
     if (!!single) base = [single];

scripts/main.ts

@@ -1,7 +1,7 @@
 import "./imports"
 
 import { choose_line, getClearText, mode, reflect_nodes, selection_in_place, switch_mode, terminal, TERMINAL_STATE } from "./terminal";
-import { reflect_term_changers, reflectVariable, restorePresets } from "./style_tab";
+import { reflect_term_changers, reflect_variable, restore_presets } from "./style_tab";
 import { check } from "./storer";
 
 
@@ -16,7 +16,7 @@ window.onload = () => {
     switch_mode(TERMINAL_STATE.STYLE);
     choose_line(terminal.firstElementChild as HTMLDivElement);
     check();
-    restorePresets();
+    restore_presets();
 }
 
 
@@ -50,15 +50,15 @@ document.ondrop = (event) => {
  * @see STYLE STYLE mode
  * @see reflect_nodes selecting nodes
  * @see reflect_term_changers term changers
- * @see reflectVariable reflect variable
+ * @see reflect_variable reflect variable
  */
 document.onselectionchange = () => {
     const selection = document.getSelection();
     if ((mode != TERMINAL_STATE.STYLE) || !selection_in_place(selection)) return;
     const range = selection.getRangeAt(0);
     reflect_nodes(range);
     reflect_term_changers(range);
-    reflectVariable(range);
+    reflect_variable(range);
 }
 
 

scripts/storer.ts

@@ -1,5 +1,11 @@
+/**
+ * Flag, symbolizing whether user allowed saving cookies or not. If not set, no cookies will be saved.
+ */
 let allowed = Boolean(get('allowed'));
 
+/**
+ * Function, asking user to allow cookies. It is called once, after window loaded.
+ */
 export function check () {
     if (!allowed) {
         alert("For storing user preferences and presets this site uses cookies.");
@@ -8,11 +14,21 @@ export function check () {
     }
 }
 
-export function get (key: string): string | boolean | null {
-    return window.localStorage.getItem(key);
+
+
+/**
+ * Function to get parameter from storage.
+ * @param key string key
+ */
+export function get (key: string): any | null {
+    return JSON.parse(window.localStorage.getItem(key));
 }
 
-export function set (key: string, value: string | boolean): void {
-    check();
-    window.localStorage.setItem(key, String(value));
+/**
+ * Function to set parameter to storage.
+ * @param key string key.
+ * @param value any value, will be saved as JSON.
+ */
+export function set (key: string, value: any): void {
+    if (allowed) window.localStorage.setItem(key, JSON.stringify(value));
 }

scripts/style_tab.ts

@@ -5,32 +5,54 @@ import { get, set } from "./storer";
 
 
 
+/**
+ * Style tab onclick handler. Recognizes 2 types of click:
+ * 1. Click on 'term changer' or 'preset', applies given style (or styles) connected to currently selected element.
+ * 2. Click on 'preset button' to alter preset value.
+ * @see term_changers term changers
+ * @see focused_preset presets
+ * @see save_preset preset button
+ * @param event click event.
+ */
 document.getElementById('style-content').onclick = (event: MouseEvent) => {
     const target = event.target as HTMLElement;
-    const selection = window.getSelection();
-    if (selection.rangeCount == 0) return;
 
     if (target.classList.contains('term-changer') || target.classList.contains('preset-label')) {
-        const acceptor = focusedPreset ?? get_focus();
+        const acceptor = focused_preset ?? get_focus();
         if (target.classList.contains('term-changer')) apply_style(acceptor, target);
         else apply_styles(acceptor, target as HTMLSpanElement);
 
     } else if (target.classList.contains('preset-button')) {
-        if (!!focusedPreset && (target.id == focusedPreset.id)) {
-            savePreset(focusedPreset);
-            focusedPreset = null;
-        } else focusedPreset = target as HTMLDivElement;
-        switch_mode(focusedPreset == null ? TERMINAL_STATE.STYLE : TERMINAL_STATE.GENERAL);
-        reflect_term_changers(null, focusedPreset);
+        const preset_target = target.parentElement.getElementsByClassName('preset-label')[0] as HTMLSpanElement;
+        if (!!focused_preset && (preset_target.id != focused_preset.id)) return;
+        target.parentElement.classList.toggle("focused", !focused_preset);
+        switch_mode(!!focused_preset ? TERMINAL_STATE.STYLE : TERMINAL_STATE.GENERAL);
+        if (!!focused_preset) {
+            save_preset(focused_preset);
+            focused_preset = null;
+        } else {
+            focused_preset = preset_target;
+            reflect_term_changers(null, focused_preset);
+        }
     }
 }
 
 
 
 // Left section: styles controls.
 
+/**
+ * Array of 'term changers' - interface elements, representing all styles that can be handled.
+ * Interacting with term changer leads to changing of style of selected text part.
+ */
 const term_changers = [...document.getElementsByClassName('term-changer')] as HTMLElement[];
 
+/**
+ * Function, called after 'term changer' was clicked. It applies term changer style to given element or range.
+ * @see term_changers term changer
+ * @param acceptor element or range, to which style will be applied.
+ * @param elem term changer, representing style, that will be applied.
+ */
 function apply_style (acceptor: Range | HTMLSpanElement, elem: HTMLElement): void {
     const name = elem.getAttribute('name');
     if (elem.nodeName == "INPUT") {
@@ -43,7 +65,14 @@ function apply_style (acceptor: Range | HTMLSpanElement, elem: HTMLElement): voi
     }
 }
 
-export function reflect_term_changers (range?: Range, single?: HTMLDivElement) {
+/**
+ * Function to set term changers to represent selected text or preset styles.
+ * @see term_changers term changers
+ * @see focused_preset preset
+ * @param range selected text, that should be represented.
+ * @param single preset, that should be represented.
+ */
+export function reflect_term_changers (range?: Range, single?: HTMLSpanElement) {
     drop_term_changers();
     if (!range == !single) return;
 
@@ -63,6 +92,10 @@ export function reflect_term_changers (range?: Range, single?: HTMLDivElement) {
     }
 }
 
+/**
+ * Function to reset 'term changers' to their default values.
+ * @see term_changers term changers
+ */
 export function drop_term_changers (): void {
     (document.getElementById('colors-tab') as HTMLFormElement).reset();
     [...term_changers].forEach((value: HTMLElement) => {
@@ -74,24 +107,46 @@ export function drop_term_changers (): void {
 
 // Middle section: presets controls.
 
-let focusedPreset: HTMLDivElement = null;
-
+/**
+ * Preset, that is currently focused to change.
+ * Preset is a stylable span outside of terminal, may be considered as a combination of term changers.
+ * @see term_changers term changers
+ */
+let focused_preset: HTMLSpanElement = null;
+
+/**
+ * Function, called after 'preset' was clicked. It applies preset styles to given element or range.
+ * @see focused_preset preset
+ * @param acceptor element or range, to which style will be applied.
+ * @param elem term changer, representing style, that will be applied.
+ */
 function apply_styles (acceptor: Range | HTMLSpanElement, elem: HTMLElement): void {
     style(acceptor, null);
     [...elem.classList].forEach((value: string): void => {
-        if ((value == "preset-label") || (value == 'mdl-chip__text')) return;
+        if (!Object.keys(CLASS_CODES).includes(value)) return;
         const type = getPrefix(value);
         if (multiplePrefix(type)) style(acceptor, { type: type, value: getPostfix(value) });
         else style(acceptor, { type: type, value: true });
     });
 }
 
-function savePreset (preset: HTMLDivElement): void {
+/**
+ * Function to save preset styles to cookies. Presets may be altered after 'preset button' is clicked.
+ * During alteration terminal goes into 'GENERAL' mode.
+ * Their value is saved after button is clicked for the second time.
+ * @see TERMINAL_STATE terminal mode
+ * @param preset preset to save value.
+ */
+function save_preset (preset: HTMLSpanElement): void {
     set(preset.id, preset.className);
 }
 
-export function restorePresets () {
-    [...document.getElementsByClassName('preset-example')].forEach((value: HTMLDivElement): void => {
+/**
+ * Function, loading preset values from cookies. Called once on window loaded.
+ * @see focused_preset presets
+ */
+export function restore_presets () {
+    [...document.getElementsByClassName('preset-label')].forEach((value: HTMLDivElement): void => {
         const savedValue = get(value.id) as string;
         if (!!savedValue) value.className = savedValue;
     });
@@ -101,25 +156,43 @@ export function restorePresets () {
 
 // Right section: variable controls.
 
+/**
+ * Input element, representing variable name, and function called on input to this element.
+ * Variable name may be set to every 'styled span' and is contained in special 'data-var-name' attribute.
+ * @see terminal styled span
+ */
 const var_name = document.getElementById("var-name-input") as HTMLInputElement;
 var_name.oninput = () => {
     const collapse = get_collapse(get_focus());
     if (!!collapse) {
         collapse.setAttribute(VAR_NAMES[var_name.id], var_name.value);
         if (var_name.value.length == 0) collapse.setAttribute(VAR_NAMES["var-type-input"], "");
     }
-    reflectVariable(get_focus());
+    reflect_variable(get_focus());
 };
+
+/**
+ * Input element, representing variable type, and function called on input to this element.
+ * Variable type may be set to 'styled span' with 'var name' and is contained in special 'data-var-type' attribute.
+ * If span has no 'var name', this element is automatically cleared and disabled.
+ * @see var_name var name
+ * @see terminal styled span
+ */
 const var_type = document.getElementById("var-type-input") as HTMLSelectElement;
 var_type.oninput = () => {
     const collapse = get_collapse(get_focus());
     if (!!collapse && var_type.selectedIndex != 0) collapse.setAttribute(VAR_NAMES[var_type.id], var_type.value);
-    reflectVariable(get_focus());
+    reflect_variable(get_focus());
 };
 
-export function reflectVariable (range: Range): void {
+/**
+ * Function to set 'var name' and 'var type' to represent selected span.
+ * @see var_name var name
+ * @see var_type var type
+ */
+export function reflect_variable (range: Range): void {
     const collapse = get_collapse(range);
-    dropVariables();
+    drop_variables();
 
     if (!!collapse) {
         const variable = collapse.getAttribute(VAR_NAMES[var_name.id]) ?? "";
@@ -133,7 +206,12 @@ export function reflectVariable (range: Range): void {
     } else var_name._enable(false);
 }
 
-function dropVariables (): void {
+/**
+ * Function to reset 'var name' and 'var type' to none.
+ * @see var_name var name
+ * @see var_type var type
+ */
+function drop_variables (): void {
     (document.getElementById('variables-tab') as HTMLFormElement).reset();
     var_name._set("");
     var_name._enable(true);