diff --git a/dist/plugins/iwsy.js b/dist/plugins/iwsy.js
index c69b485..9936c1c 100644
--- a/dist/plugins/iwsy.js
+++ b/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) {
diff --git a/iwsy/iwsy.js b/iwsy/iwsy.js
index a85e993..45db6c5 100644
--- a/iwsy/iwsy.js
+++ b/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
};
};
diff --git a/iwsy/resources/ecs/content.txt b/iwsy/resources/ecs/content.txt
index b3e7c2e..06fa5b4 100644
--- a/iwsy/resources/ecs/content.txt
+++ b/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
diff --git a/iwsy/resources/ecs/help.txt b/iwsy/resources/ecs/help.txt
new file mode 100644
index 0000000..c7c62b9
--- /dev/null
+++ b/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 `` 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 `
` into Payload
+ add 1 to ImageCount
+ return
+
+Exit:
+ set style `display` of Container to `none`
+ stop
\ No newline at end of file
diff --git a/iwsy/resources/ecs/iwsy.txt b/iwsy/resources/ecs/iwsy.txt
index 0b2a017..d63c3af 100644
--- a/iwsy/resources/ecs/iwsy.txt
+++ b/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
diff --git a/iwsy/resources/ecs/steps.txt b/iwsy/resources/ecs/steps.txt
index b9596d5..21fd602 100644
--- a/iwsy/resources/ecs/steps.txt
+++ b/iwsy/resources/ecs/steps.txt
@@ -34,6 +34,7 @@
input DurationInput
input TargetInput
input URLInput
+ textarea InitCSS
img AddStep
img Up
img UpContent
@@ -298,6 +299,7 @@ Restart:
json add `aspect ratio` to InitProperties
json add `background` to InitProperties
json add `border` to InitProperties
+ json add `css` to InitProperties
set ContinueTypes to array
json add `true` to ContinueTypes
json add `false` to ContinueTypes
@@ -455,8 +457,12 @@ ReloadStepEditor:
set the style of TD to `padding-bottom:0.2em`
create InsertBefore in TD
set the style of InsertBefore to `width:calc(100% / 3)`
- set the text of InsertBefore to `Add Step Before`
- on click InsertBefore go to AddStepBefore
+ if SelectedStep is 0 set the text of InsertBefore to `---`
+ else
+ begin
+ set the text of InsertBefore to `Add Step Before`
+ on click InsertBefore go to AddStepBefore
+ end
create Save in TD
set the style of Save to `width:calc(100% / 3)`
set the text of Save to `Save`
@@ -487,12 +493,24 @@ EditInit:
create Cell in BlockRow
set the style of Cell to `width:6em;padding-left:0.2em`
set the content of Cell to InitProperty
- index InitInput to B
- create InitInput in BlockRow
- set the style of InitInput to `flex:1`
- put property InitProperty of CurrentStep into Item
- replace `"` with `"` in Item
- set the content of InitInput to Item
+ if InitProperty is `css`
+ begin
+ create InitCSS in BlockRow
+ set the style of InitCSS to `flex:1;height:20em`
+ put property InitProperty of CurrentStep into Item
+ replace `%0a` with newline in Item
+ replace `"` with `"` in Item
+ set the content of InitCSS to Item
+ end
+ else
+ begin
+ index InitInput to B
+ create InitInput in BlockRow
+ set the style of InitInput to `flex:1`
+ put property InitProperty of CurrentStep into Item
+ replace `"` with `"` in Item
+ set the content of InitInput to Item
+ end
add 1 to B
end
return
@@ -893,7 +911,7 @@ SaveCurrentStep:
index StepButton to SelectedStep
set the text of StepButton to the content of TitleInput
index LabelInput to SelectedStep
- set property `label` of CurrentStep to the content of LabelInput
+ if SelectedStep is not 0 set property `label` of CurrentStep to the content of LabelInput
put property `action` of CurrentStep into Action
if Action is `init`
begin
@@ -902,7 +920,12 @@ SaveCurrentStep:
begin
put element N of InitProperties into InitProperty
index InitInput to N
- put InitInput into Item
+ if InitProperty is `css`
+ begin
+ put the content of InitCSS into Item
+ replace newline with `%0a` in Item
+ end
+ else put InitInput into Item
replace `"` with `"` in Item
set property InitProperty of CurrentStep to Item
add 1 to N
diff --git a/iwsy/resources/help/start.md b/iwsy/resources/help/start.md
new file mode 100644
index 0000000..4584a02
--- /dev/null
+++ b/iwsy/resources/help/start.md
@@ -0,0 +1,18 @@
+# I Wanna Show You
+
+I Wanna Show You, (IWSY, pronounced "You-zee" as an approximation to the initials) is an online presentation package. As with traditional applications such as PowerPoint, it has the ability to deliver slideshows that either run under manual control or unattended, but there the similarities end. Instead of being a PC application that's tied to the desktop, IWSY is entirely browser-based. IWSY presentations can run here in this web app, they can be embedded in other web pages or they can run as independent web pages.
+
+The basic features of IWSY are:
+
+ - A step editor, where you create a set of steps that together form your presentation
+ - A block editor, where you define templates to control where things appear on the screen
+ - A content editor, where you keep all the text that will be shown in your presentation
+ - A presentation viewer that runs your shows or displays any step
+ - A block viewer to visualise your blocks
+ - User management - each user has their own account and storage area
+ - Image management - users can create folders, upload/delete images and so on
+ - Built-in help - what you're reading
+
+The block and content editors may be an unfamiliar concept. Rather than hand-editing each slide you use blocks to define the areas of the screen that will hold text or images. Each block has a name so you can choose which ones to use for any given part of the show. Similarly, the text content is all edited separately and each item has a name.
+
+All text input in IWSY is in MarkDown format, which is much simpler than HTML, being mostly plain text. All standard features of MarkDown are supported, plus some custom additions documented in these Help pages.
diff --git a/iwsy/resources/icon/help.png b/iwsy/resources/icon/help.png
new file mode 100644
index 0000000..8817c0b
Binary files /dev/null and b/iwsy/resources/icon/help.png differ
diff --git a/js/plugins/iwsy.js b/js/plugins/iwsy.js
index c69b485..9936c1c 100644
--- a/js/plugins/iwsy.js
+++ b/js/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) {