Merge pull request #116 from easycoder/dev

Dev

Author: easycoder

dist/plugins/iwsy.js

@@ -39,6 +39,18 @@ const EasyCoder_IWSY = {
 						action
 					});
 					return true;
+				case `remove`:
+					if (compiler.nextTokenIs(`styles`)) {
+						compiler.next();
+						compiler.addCommand({
+							domain: `iwsy`,
+							keyword: `iwsy`,
+							lino,
+							action: `removeStyles`
+						});
+						return true;
+					}
+					return false;					
 				case `script`:
 					const script = compiler.getNextValue();
 					compiler.addCommand({
@@ -176,6 +188,11 @@ const EasyCoder_IWSY = {
 						EasyCoder.iwsyFunctions.stop();
 					}
 					break;
+				case `removeStyles`:
+					if (EasyCoder.iwsyFunctions) {
+						EasyCoder.iwsyFunctions.removeStyles();
+					}
+					break;
 				case `onstep`:
 					const cb = command.pc + 2;
 					if (EasyCoder.iwsyFunctions) {

iwsy/iwsy.js

@@ -204,7 +204,7 @@ const IWSY = (player, text) => {
                     for (const text of script.content) {
                         if (text.name === item.content) {
                             const converter = new showdown.Converter({
-                                extensions: [`Extension`]
+                                extensions: [`IWSY`]
                             });
                             block.textPanel.innerHTML =
                                 converter.makeHtml(text.content.split(`%0a`).join(`\n`));
@@ -307,7 +307,7 @@ const IWSY = (player, text) => {
         for (const content of script.content) {
             if (content.name === step.target) {
                 const converter = new showdown.Converter({
-                    extensions: [`Extension`]
+                    extensions: [`IWSY`]
                 });
                 const newText = converter.makeHtml(content.content.split(`%0a`).join(`\n`));
                 for (const block of script.blocks) {
@@ -568,6 +568,9 @@ const IWSY = (player, text) => {
         if (step.title) {
             document.title = step.title;
         }
+        if (step.css) {
+            setHeadStyle(step.css.split(`%0a`).join(`\n`));
+        }
         const aspect = step[`aspect ratio`];
         if (aspect) {
             const colon = aspect.indexOf(`:`);
@@ -729,7 +732,7 @@ const IWSY = (player, text) => {
         if (typeof showdown === `undefined`) {
             require(`js`, `https://cdn.rawgit.com/showdownjs/showdown/1.9.1/dist/showdown.min.js`,
                 () => {
-                    showdown.extension(`Extension`, {
+                    showdown.extension(`IWSY`, {
                         type: `lang`,
                         filter: function (text, converter) {
                             return text.replace(/~([^~]+)~/g, function (match, group) {
@@ -829,10 +832,19 @@ const IWSY = (player, text) => {
             }
         }
         var style = document.createElement('style');
+        style.className = `iwsy-css`;
         style.innerHTML = `${styleName} ${styleValue}`;
         document.head.appendChild(style);
     };
 
+    // Remove all the CSS styles
+    const removeStyles = () => {
+        const styles = document.getElementsByClassName("iwsy-css");
+        for (const style of styles) {
+            style.parentNode.removeChild(style);
+        }
+    };
+
     // Initialize the script
     const initScript = () => {
         document.onkeydown = null;
@@ -843,6 +855,7 @@ const IWSY = (player, text) => {
         script.singleStep = true;
         script.labels = {};
         script.stop = false;
+        removeStyles();
         for (const block of script.blocks) {
             const element = block.element;
             if (typeof element !== `undefined`) {
@@ -935,8 +948,6 @@ const IWSY = (player, text) => {
     if (script.runMode === `auto`) {
         document.addEventListener(`click`, onClick);
     }
-    setHeadStyle(`p`, `{margin:0 0 0.5em 0}`)
-    setHeadStyle(`h1, h2, h3, h4, h5, h6`, `{margin:0}`)
     setupShowdown();
     initScript();
     IWSY.plugins = {};
@@ -949,6 +960,7 @@ const IWSY = (player, text) => {
         block,
         run,
         stop,
-        onStep
+        onStep,
+        removeStyles
     };
 };

iwsy/resources/ecs/content.txt

@@ -164,7 +164,7 @@ Restart:
             set the text of ItemNameInput to property `name` of Item
             set style `display` of Editor to `block`
             create TextArea in Editor
-            set the style of TextArea to `width:100%;max-width:100%;height:8em`
+            set the style of TextArea to `width:100%;max-width:100%;height:20em`
             put property `content` of Item into Content
             replace `%0a` with newline in Content
             set the content of TextArea to Content

iwsy/resources/ecs/help.txt

@@ -0,0 +1,115 @@
+!   Help Manager
+
+    script HelpManager
+
+    import div Container
+
+    callback DecoratorCallback
+    variable Mobile
+    variable Page
+    variable Content
+    variable Payload
+    variable ImageCount
+    variable Function
+    variable Data
+    variable Source
+    variable Style
+    variable Item
+    variable Len
+    variable N
+
+    if portrait
+    begin
+      	if mobile set Mobile else clear Mobile
+    end
+    
+    set style `padding` of Container to `0 1em`
+    set style `overflow-y` of Container to `scroll`
+    
+    load showdown
+  	on DecoratorCallback go to Decorate
+
+    on message go to Show
+    set ready
+    stop
+
+Show:
+	put 0 into ImageCount
+    set style `display` of Container to `block`
+    get Page from storage as `.help`
+GetPage:
+    if Page is empty
+    begin
+    	put `start` into Page
+        put Page into storage as `.help`
+    end
+    iwsy remove styles
+    rest get Content from `/resources/help/` cat Page cat `.md`
+    or begin
+    	put empty into Page
+        go to GetPage
+    end
+    set the content of Container to showdown decode Content with DecoratorCallback
+    stop
+
+!------------------------------------------------------------------------------
+!	This is the Showndown extension.
+
+!	Decorate is called for every occurrence of ~...~ in the topic data
+Decorate:
+    put the payload of DecoratorCallback into Payload
+    put the position of `:` in Payload into N
+    if N is -1
+    begin
+    	if Payload is `clear` put `<div style="height:1px;clear:both"></div>` into Payload
+    end
+    else
+    begin
+        put left N of Payload into Function
+        add 1 to N
+        put from N of Payload into Data
+        if Function is `img` gosub to ProcessImage
+    end
+    set the payload of DecoratorCallback to Payload
+    stop
+
+!	Process an image, including positioning and class information
+ProcessImage:
+	put the position of `:` in Data into N
+    if N is -1 return
+    put left N of Data into Source
+    add 1 to N
+    put from N of Data into Data
+    json split Data on `,` into Data
+    put empty into Style
+    put 0 into N
+    while N is less than the json count of Data
+    begin
+    	put element N of Data into Item
+        if Item is `left` put Style cat `float:left;` into Style
+        else if Item is `right` put Style cat `float:right;` into Style
+        else if Item is `center` put Style cat `margin:0 auto;` into Style
+        else if Item is `border` put Style cat `padding:2px;border:1px solid black;` into Style
+        else if Item is `clear` put Style cat `clear:both;` into Style
+        else if right 1 of Item is `%` put Style cat `width:` cat Item cat `;` into Style
+        else
+        begin
+        	if left 1 of Item is not `{` go to NextItem
+            if right 1 of Item is not `}` go to NextItem
+            put from 1 of Item into Item
+        	put the length of Item into Len
+            take 1 from Len
+            put left Len of Item into Item
+            put Style cat Item cat `;` into Style
+        end
+    NextItem:
+    	add 1 to N
+    end
+    put `<img id="ec-image-` cat ImageCount cat `" src="` cat Source
+    	cat `" style="` cat Style cat `" />` into Payload
+    add 1 to ImageCount
+    return
+
+Exit:
+    set style `display` of Container to `none`
+    stop

iwsy/resources/ecs/iwsy.txt

@@ -19,6 +19,7 @@
     div Player
     div UserPanel
     div FileManPanel
+    div HelpPanel
     div Panel
     div Div
     span Status
@@ -32,12 +33,14 @@
     img Delete
     img User
     img FileMan
+    img Help
     a Link
     module StepsModule
     module BlocksModule
     module ContentModule
     module UserModule
     module FileManModule
+    module HelpModule
     variable Mobile
     variable LastSavedState
     variable Content
@@ -111,7 +114,7 @@ L2:
 
     create Masthead in Left
     set the style of Masthead to
-    	`border:0.2em solid purple;text-align:center;color:	lemonchiffon;background:darkmagenta;position:relative`
+    	`border:0.2em solid purple;text-align:center;color:lemonchiffon;background:darkmagenta;position:relative`
     create Title in Masthead
     set the style of Title to `font-size:4em;font-weight:bold`
     set the content of Title to `I Wanna Show You`
@@ -173,6 +176,11 @@ L2:
     set attribute `src` of RunStop to `resources/icon/run.png`
     set attribute `title` of RunStop to `Run`
     create Link in Buttons
+    create Help in Link
+    set the style of Help to `width:40px;margin-right:1.5em`
+    set attribute `src` of Help to `resources/icon/help.png`
+    set attribute `title` of Help to `Help`
+    create Link in Buttons
     create User in Link
     set the style of User to `width:40px;position:absolute;top:0.5em;right:0.5em`
     set attribute `src` of User to `resources/icon/user.png`
@@ -184,6 +192,9 @@ L2:
 
     create FileManPanel in Left
     set the style of FileManPanel to `flex:1;display:none;margin-top:0.5em;border-top:1px solid black`
+    
+    create HelpPanel in Left
+    set the style of HelpPanel to `flex:1;display:none;margin-top:0.5em;border-top:1px solid black`
 
 !	The right-hand panel
     create Right in Body
@@ -353,10 +364,27 @@ L2:
             run Script with FileManPanel as FileManModule
         end
         set style `display` of Player to `none`
+        set style `display` of HelpPanel to `none`
         set style `display` of FileManPanel to `block`
         send to FileManModule
     end
 
+    on click Help
+    begin
+    	if Running stop
+    	if HelpModule is not running
+        begin
+      		require js
+            	`https://cdn.jsdelivr.net/gh/easycoder/easycoder.github.io/dist/plugins/showdown.js?v=` cat now
+            rest get Script from `/resources/ecs/help.txt?v=` cat now
+            run Script with HelpPanel as HelpModule
+        end
+        set style `display` of Player to `none`
+        set style `display` of FileManPanel to `none`
+    	set style `display` of HelpPanel to `block`
+        send to HelpModule
+    end
+    
     on click RunStop go to DoRunStop
 
     on click User
@@ -690,6 +718,7 @@ DoRunStop:
             send Message to StepsModule
         end
 
+		set style `display` of HelpPanel to `none`
 		iwsy run then
         begin
 			gosub to ClearStepsButtons