Development

Author: graham-trott

iwsy/iwsy.js

@@ -92,8 +92,8 @@ const IWSY = (container, script) => {
         }
     };
 
-    // Create a text block.
-    const createTextBlock = (block) => {
+    // Create a block.
+    const createBlock = (block) => {
         const container = block.container;
         if (block.element) {
             container.removeChild(block.element);
@@ -102,6 +102,7 @@ const IWSY = (container, script) => {
         const h = container.getBoundingClientRect().height / 1000;
         const properties = block.properties;
         const element = document.createElement(`div`);
+        container.appendChild(element);
         block.element = element;
         element.style[`position`] = `absolute`;
         element.style[`opacity`] = `0.0`;
@@ -127,27 +128,23 @@ const IWSY = (container, script) => {
         element.style[`height`] = val;
         element.style[`background`] = properties.background;
         element.style[`border`] = properties.border;
-        container.appendChild(element);
         val = properties.textMarginLeft;
         if (!isNaN(val)) {
-            val = `${val * w}px`;
+            val *= w;
         }
-        element.style[`width`] = val;
         const marginLeft = val;
         val = properties.textMarginTop;
         if (!isNaN(val)) {
-            val = `${val * h}px`;
+            val *= h;
         }
-        element.style[`height`] = val;
         const marginTop = val;
-        const inner = document.createElement(`div`);
-        inner.style[`position`] = `absolute`;
-        inner.style[`left`] = marginLeft;
-        inner.style[`top`] = marginTop;
-        inner.style[`width`] = `calc(100% - ${marginLeft}px - ${marginLeft}px)`;
-        element.appendChild(inner);
-        element.inner = inner;
         const text = document.createElement(`div`);
+        element.appendChild(text);
+        text.style[`position`] = `absolute`;
+        text.style[`left`] = marginLeft;
+        text.style[`top`] = marginTop;
+        text.style[`width`] = `calc(100% - ${marginLeft}px - ${marginLeft}px)`;
+        text.style[`height`] = `calc(100% - ${marginTop}px - ${marginTop}px)`;
         text.style[`font-family`] = properties.fontFamily;
         val = properties.fontSize;
         if (!isNaN(val)) {
@@ -158,82 +155,20 @@ const IWSY = (container, script) => {
         text.style[`font-style`] = properties.fontStyle;
         text.style[`color`] = properties.fontColor;
         text.style[`text-align`] = properties.textAlign;
-        inner.appendChild(text);
-        inner.text = text;
-        if (script.speed === `scan`) {
-            element.style.opacity = 0;
-        }
-    };
-
-    // Create an image block.
-    const createImageBlock = (block) => {
-        const container = block.container;
-        if (block.element) {
-            container.removeChild(block.element);
-        }
-        const w = container.getBoundingClientRect().width / 1000;
-        const h = container.getBoundingClientRect().height / 1000;
-        const properties = block.properties;
-        const element = document.createElement(`div`);
-        block.element = element;
-        element.style[`position`] = `absolute`;
-        element.style[`opacity`] = `0.0`;
-        let val = properties.left;
-        if (!isNaN(val)) {
-            val *= w;
-        }
-        element.style[`left`] = val;
-        val = properties.top;
-        if (!isNaN(val)) {
-            val *= h;
-        }
-        element.style[`top`] = val;
-        element.style[`top`] = val;
-        val = properties.width;
-        if (!isNaN(val)) {
-            val = `${val * w}px`;
-        }
-        element.style[`width`] = val;
-        val = properties.height;
-        if (!isNaN(val)) {
-            val = `${val * h}px`;
-        }
-        element.style[`height`] = val;
-        element.style[`background`] = properties.background;
-        element.style[`border`] = properties.border;
-        element.style[`border-radius`] = properties.borderRadius;
-        container.appendChild(element);
-        if (script.speed === `scan`) {
-            element.style.opacity = 0;
-        }
+        element.textPanel = text;
     };
 
     // Set the content of a block
     const doSetContent = (spec) => {
         const block = script.blocks[spec.block];
-        const contentSpec = script.content[spec.content];
+        const content = script.content[spec.content];
         if (!block) {
             throw Error(`Block '${block}' cannot be found`);
         }
-        switch (contentSpec.type) {
-            case `text`:
-                if (!block.element) {
-                    createTextBlock(block);
-                }
-                let content = contentSpec.content;
-                if (Array.isArray(content)) {
-                    content = content.join(`<br><br>`);
-                }
-                block.element.inner.text.innerHTML = content.split(`\n`).join(`<br>`);
-            break;
-            case `image`:
-                if (!block.element) {
-                    createImageBlock(block);
-                }
-                block.element.style[`background`] = `url("${contentSpec.url}")`;
-                block.element.style[`background-size`] = `cover`;
-                break;
+        if (!block.element) {
+            createBlock(block);
         }
+        block.element.textPanel.innerHTML = content.split(`\n`).join(`<br>`);
     };
 
     // Set the content of a block
@@ -280,14 +215,7 @@ const IWSY = (container, script) => {
         for (const b of stepBlocks) {
             const block = script.blocks[b];
             if (!block.element) {
-                switch (block.type) {
-                    case `text`:
-                        createTextBlock(block);
-                        break;
-                    case `image`:
-                        createImageBlock(block);
-                        break;
-                }
+                createBlock(block);
             }
         }
         if (script.speed === `scan`) {

iwsy/resources/ecs/content.txt

@@ -12,9 +12,7 @@
     tr TR
     td TD
     span ItemNameSpan
-    span Span
     input ItemNameInput
-    select TypeSelect
     textarea TextArea
     button EditButton
     img AddItem
@@ -24,28 +22,22 @@
     variable Item
     variable ItemNames
     variable ItemName
-    variable TypeNames
-    variable Content
     variable SelectedItem
     variable Action
     variable N
     variable B
 
     put -1 into SelectedItem
 
-    set TypeNames to array
-    json add `text` to TypeNames
-    json add `image` to TypeNames
-    
     on message go to Start
     set ready
     stop
 
 Start:
 	if the message is `save`
     begin
-    	if SelectedItem is -1 stop
-        go to SaveSelectedItem
+        gosub to SaveSelectedItem
+        stop
     end
 
 Restart:
@@ -78,7 +70,6 @@ Restart:
     set the elements of EditButton to N
     set the elements of Editor to N
     set the elements of DeleteItem to N
-    set the elements of TypeSelect to N
     set the elements of TextArea to N
     create Table in Panel
     set the style of Table to `width:100%`
@@ -116,6 +107,7 @@ Restart:
     end
     on click EditButton
     begin
+    	gosub to SaveSelectedItem
         put the index of EditButton into SelectedItem
         put the text of EditButton into Action
         put 0 into N
@@ -137,34 +129,23 @@ Restart:
     	if Action is `Edit`
         begin
         	set style `background` of EditButton to `lightgray`
-        	set the text of EditButton to `Content`
+        	set the text of EditButton to `Close`
             index ItemNameSpan to SelectedItem
             index ItemNameInput to SelectedItem
-            index TypeSelect to SelectedItem
             index TextArea to SelectedItem
             set style `display` of ItemNameSpan to `none`
             set style `display` of ItemNameInput to `inline`
             index Editor to SelectedItem
             set style `display` of Editor to `block`
             clear Editor
             put property ItemName of Items into Item
-            create Row in Editor
-            set the style of Row to `width:100%;display:flex`
-            create Span in Row
-            set the style of Span to `flex:1`
-            set the content of Span to `Type:`
-            create TypeSelect in Row
-            set the style of TypeSelect to `flex:1`
-            set TypeSelect from TypeNames as property `type` of Item
             create TextArea in Editor
             set the style of TextArea to `width:100%;max-width:100%;height:8em`
             put element SelectedItem of ItemNames into ItemName
-            put property `content` of Item into Content
-            replace `%0a` with newline in Content
-            set the content of TextArea to Content
-            put property ItemName of Items into Item
+            replace `%0a` with newline in Item
+            set the content of TextArea to Item
         end
-        else go to SaveSelectedItem
+        else gosub to SaveSelectedItem
     end
     on click DeleteItem
     begin
@@ -179,10 +160,9 @@ Restart:
 
 !	Save the seleced content
 SaveSelectedItem:
-	set property `type` of Item to TypeSelect
-    put the content of TextArea into Content
-    replace newline with `%0a` in Content
-    set property `content` of Item to Content
+	if SelectedItem is -1 return
+    put the content of TextArea into Item
+    replace newline with `%0a` in Item
     set property ItemName of Items to Item
     index ItemNameInput to SelectedItem
     if ItemNameInput is not ItemName
@@ -193,4 +173,4 @@ SaveSelectedItem:
     	set property ItemName of Items to Item
     end
     set property `content` of Presentation to Items
-	stop
+	return