Skip to content

Commit 7397635

Browse files
easycodereasycoder
authored
Merge pull request #39 from easycoder/dev
Examples
2 parents 5dbb1cf + 446b872 commit 7397635

File tree

30 files changed

+289
-2
lines changed

30 files changed

+289
-2
lines changed

‎demos/dice/index.html renamed to ‎examples/dice/index.html

File renamed without changes.

‎examples/imageswitcher/index.html

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<html lang="en">
2+
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>EasyCoder - image switcher</title>
7+
</head>
8+
9+
<body>
10+
<div id="ex-imageswitcher"></div>
11+
<pre id="easycoder-script" style="display:none">
12+
! Image Switcher
13+
14+
script ImageSwitcher
15+
16+
div Container
17+
div Buttons
18+
img Left
19+
img Right
20+
img Thumb
21+
img Image
22+
a Link
23+
variable ImageCount
24+
variable N
25+
variable M
26+
27+
set the title to `Image Switcher`
28+
attach Container to `ex-imageswitcher`
29+
put 9 into ImageCount
30+
set the elements of Thumb to ImageCount
31+
set the elements of Image to ImageCount
32+
create Buttons in Container
33+
set the style of Buttons to `text-align:center; padding:10px;border:1px solid lightgray`
34+
create Link in Buttons
35+
create Left in Link
36+
set style `width` of Left to `60px`
37+
set attribute `src` of Left to `resources/icon/left.png`
38+
on click Left go to DoLeft
39+
put 0 into N
40+
while N is less than ImageCount
41+
begin
42+
index Thumb to N
43+
create Link in Buttons
44+
create Thumb in Link
45+
set style `width` of Thumb to `60px`
46+
set style `border` of Thumb to `1px solid white`
47+
if N is not 0 set style `margin-left` of Thumb to `10px`
48+
set attribute `src` of Thumb to `resources/img/imageswitcher/thumbs/img` cat N cat `.jpg`
49+
add 1 to N
50+
end
51+
on click Thumb go to DoThumb
52+
create Link in Buttons
53+
create Right in Link
54+
set style `width` of Right to `60px`
55+
set attribute `src` of Right to `resources/icon/right.png`
56+
on click Right go to DoRight
57+
put 0 into N
58+
while N is less than ImageCount
59+
begin
60+
index Image to N
61+
create Image in Container
62+
set the style of Image to `width:100%;display:none`
63+
set attribute `src` of Image to `resources/img/imageswitcher/img` cat N cat `.jpg`
64+
add 1 to N
65+
end
66+
put 0 into N
67+
Select:
68+
index Image to N
69+
index Thumb to N
70+
set style `display` of Image to `block`
71+
set style `border` of Thumb to `1px solid blue`
72+
stop
73+
74+
DoLeft:
75+
set style `display` of Image to `none`
76+
set style `border` of Thumb to `1px solid white`
77+
put the index of Image into N
78+
if N is 0 put ImageCount into N
79+
take 1 from N
80+
go to Select
81+
82+
DoRight:
83+
set style `display` of Image to `none`
84+
set style `border` of Thumb to `1px solid white`
85+
put the index of Image into N
86+
add 1 to N
87+
if N is ImageCount put 0 into N
88+
go to Select
89+
90+
DoThumb:
91+
set style `display` of Image to `none`
92+
put the index of Thumb into N
93+
put the index of Image into M
94+
index Thumb to M
95+
set style `border` of Thumb to `1px solid white`
96+
index Thumb to N
97+
index Image to N
98+
go to Select
99+
</pre>
100+
<script src='https://cdn.jsdelivr.net/gh/easycoder/easycoder.github.io/dist/easycoder.js?v=2.6.0'></script>
101+
102+
</body>
103+
</html>

‎demos/storyteller/index.html renamed to ‎examples/storyteller/index.html

File renamed without changes.

‎demos/storyteller/stories/GetStoryteller/content.txt renamed to ‎examples/storyteller/stories/GetStoryteller/content.txt

File renamed without changes.

‎demos/storyteller/stories/GetStoryteller/source.txt renamed to ‎examples/storyteller/stories/GetStoryteller/source.txt

File renamed without changes.

‎demos/storyteller/stories/GetStoryteller/title.txt renamed to ‎examples/storyteller/stories/GetStoryteller/title.txt

File renamed without changes.

‎demos/storyteller/stories/Images/content.txt renamed to ‎examples/storyteller/stories/Images/content.txt

File renamed without changes.

‎demos/storyteller/stories/Images/source.txt renamed to ‎examples/storyteller/stories/Images/source.txt

File renamed without changes.

‎demos/storyteller/stories/Images/title.txt renamed to ‎examples/storyteller/stories/Images/title.txt

File renamed without changes.

‎demos/storyteller/stories/Markdown/content.txt renamed to ‎examples/storyteller/stories/Markdown/content.txt

File renamed without changes.

‎demos/storyteller/stories/Markdown/source.txt renamed to ‎examples/storyteller/stories/Markdown/source.txt

File renamed without changes.

‎demos/storyteller/stories/Markdown/title.txt renamed to ‎examples/storyteller/stories/Markdown/title.txt

File renamed without changes.

‎demos/storyteller/stories/Structure/content.txt renamed to ‎examples/storyteller/stories/Structure/content.txt

File renamed without changes.

‎demos/storyteller/stories/Structure/source.txt renamed to ‎examples/storyteller/stories/Structure/source.txt

File renamed without changes.

‎demos/storyteller/stories/Structure/title.txt renamed to ‎examples/storyteller/stories/Structure/title.txt

File renamed without changes.

‎demos/storyteller/stories/home/content.txt renamed to ‎examples/storyteller/stories/home/content.txt

File renamed without changes.

‎demos/storyteller/stories/home/images/demo0.jpg renamed to ‎examples/storyteller/stories/home/images/demo0.jpg

File renamed without changes.

‎demos/storyteller/stories/home/images/demo3.jpg renamed to ‎examples/storyteller/stories/home/images/demo3.jpg

File renamed without changes.

‎demos/storyteller/stories/home/images/demo5.jpg renamed to ‎examples/storyteller/stories/home/images/demo5.jpg

File renamed without changes.

‎demos/storyteller/stories/home/images/demo8.jpg renamed to ‎examples/storyteller/stories/home/images/demo8.jpg

File renamed without changes.

‎demos/storyteller/stories/home/source.txt renamed to ‎examples/storyteller/stories/home/source.txt

File renamed without changes.

‎demos/storyteller/stories/home/title.txt renamed to ‎examples/storyteller/stories/home/title.txt

File renamed without changes.

‎demos/storyteller/stories/info/content.txt renamed to ‎examples/storyteller/stories/info/content.txt

File renamed without changes.

‎demos/storyteller/stories/info/source.txt renamed to ‎examples/storyteller/stories/info/source.txt

File renamed without changes.

‎demos/storyteller/stories/info/title.txt renamed to ‎examples/storyteller/stories/info/title.txt

File renamed without changes.

‎demos/storyteller/stories/theme.txt renamed to ‎examples/storyteller/stories/theme.txt

File renamed without changes.

‎demos/storyteller/stories/title.txt renamed to ‎examples/storyteller/stories/title.txt

File renamed without changes.

‎examples/usercapture/index.html

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
<html>
2+
<head>
3+
<meta charset="UTF-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
</head>
6+
7+
<body>
8+
<div id="ex-usercapture"></div>
9+
<pre id="easycoder-script" style="display:none">
10+
! User Capture
11+
12+
script UserCapture
13+
14+
! Declare variables
15+
div Body
16+
div Container
17+
div MainPanel
18+
div Title
19+
div Subtitle
20+
div DemoText
21+
div Dialog
22+
div Row
23+
div Label
24+
span Cell
25+
input Name
26+
input Email
27+
hr Rule
28+
a Button
29+
a Close
30+
a Submit
31+
variable Mobile
32+
variable W
33+
variable H
34+
variable Message
35+
36+
set the title to `User Capture`
37+
! Attach to the parent DIV
38+
attach Body to `ex-usercapture`
39+
clear Mobile
40+
if mobile
41+
begin
42+
if portrait set Mobile
43+
end
44+
45+
! Detect and deal with mobile
46+
if Mobile set style `width` of Body to `100%`
47+
else set style `width` of Body to `500px`
48+
put the width of Body into W
49+
if Mobile put W into H
50+
else
51+
begin
52+
multiply W by 3 giving H
53+
divide H by 4
54+
end
55+
set style `height` of Body to H cat `px`
56+
57+
! Set up all CSS styles
58+
set style `.container` to
59+
`{width:calc(` cat W cat `px - 2em);`
60+
cat `height:calc(` cat H cat `px - 3em);`
61+
cat `margin:1em auto;`
62+
cat `text-align:center;`
63+
cat `font-size:0.5em;`
64+
cat `position:relative}`
65+
set style `.main` to
66+
`{background-color:#333;width:100%;height:100%;`
67+
cat `font-family:sans-serif;color:white;padding-top:1em}`
68+
set style `.title` to `{font-size:3em;margin-top:0.5em}`
69+
set style `.subtitle` to `{font-size:1.4em;margin:0 0.5em 2em 0.5em}`
70+
set style `a.button` to
71+
`{font-size:2em;background:gray;border-radius:0.2em;`
72+
cat `padding:0.7em;text-decoration:none;color:white}`
73+
set style `a.button:hover` to `{background:#666}`
74+
set style `.demo` to `{margin-top:3em}`
75+
set style `.dialog` to `{background-color:white;`
76+
cat `border-radius:0.2em;`
77+
cat `width:calc(` cat W cat `px - 4em);`
78+
cat `position:absolute;left:1em;top:1em;`
79+
cat `font-size:1.5em}`
80+
set style `.row` to `{font-size:1.5em;margin:1em 0;display:flex}`
81+
set style `.cell-left` to `{margin-left:1em;text-align:left;flex:2}`
82+
set style `.cell-right` to `{margin-right:1em;text-align:right;flex:1}`
83+
set style `a.closedialog` to
84+
`{font-weight:bold;color:gray;text-decoration:none}`
85+
set style `a.closedialog:hover` to `{color:black}`
86+
set style `input` to `{width:90%;margin:1em 0;padding:0.5em}`
87+
set style `.right` to `{text-align:right;padding:0.5em 1em 1em 0}`
88+
set style `a.submit` to
89+
`{font-weight:bold;background:#88f;color:white;`
90+
cat `border-radius:0.2em;text-decoration:none;padding:0.5em;`
91+
cat `float:right:margin:1em 1em 0 0}`
92+
set style `a.submit:hover` to `{background:#44f}`
93+
94+
! Create and run the main screen
95+
create Container in Body
96+
set the class of Container to `container`
97+
98+
create MainPanel in Container
99+
set the class of MainPanel to `main`
100+
101+
create Title in MainPanel
102+
set the class of Title to `title`
103+
set the content of Title to `New widget launching soon.`
104+
105+
create Subtitle in MainPanel
106+
set the class of Subtitle to `subtitle`
107+
set the content of Subtitle to
108+
`Not long to go until Acme Inc launch their latest product.`
109+
110+
create Button in MainPanel
111+
set the class of Button to `button`
112+
set the content of Button to `Get in touch`
113+
on click Button go to GetDetails
114+
115+
create DemoText in MainPanel
116+
set the class of DemoText to `demo`
117+
set the content of DemoText to `Demo of EasyCoder for Dev.to`
118+
119+
stop
120+
121+
! Create and run the dialog screen
122+
GetDetails:
123+
create Dialog in Container
124+
set the class of Dialog to `dialog`
125+
126+
create Row in Dialog
127+
set the class of Row to `row`
128+
129+
create Cell in Row
130+
set the class of Cell to `cell-left`
131+
set the content of Cell to `Get in touch`
132+
133+
create Cell in Row
134+
set the class of Cell to `cell-right`
135+
136+
create Close in Cell
137+
set the class of Close to `closedialog`
138+
set the content of Close to `&times;`
139+
on click Close remove element Dialog
140+
141+
create Rule in Dialog
142+
143+
create Label in Dialog
144+
set the content of Label to `Your name`
145+
146+
create Name in Dialog
147+
148+
create Label in Dialog
149+
set the content of Label to `Your email`
150+
151+
create Email in Dialog
152+
153+
create Rule in Dialog
154+
155+
create Row in Dialog
156+
set the class of Row to `right`
157+
158+
create Submit in Row
159+
set the class of Submit to `submit`
160+
set the content of Submit to `Submit`
161+
on click Submit
162+
begin
163+
if Name is empty go to EmptyField
164+
if Email is empty go to EmptyField
165+
set Message to object
166+
set property `name` of Message to Name
167+
set property `email` of Message to Email
168+
alert `Sending ` cat Message
169+
rest post Message to `https://bad.url`
170+
or begin
171+
alert `The message could not be sent`
172+
end
173+
end
174+
stop
175+
176+
EmptyField:
177+
alert `Please complete both fields`
178+
stop
179+
</pre>
180+
181+
<script src='https://cdn.jsdelivr.net/gh/easycoder/easycoder.github.io/dist/easycoder.js?v=2.6.0'></script>
182+
183+
</body>
184+
</html>

‎resources/md/examples.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ The User Capture can be run as an independent web page; see [User Capture](/user
2323

2424
Storyteller is a tool for building static websites using Markdown instead of HTML. Markdown is much easier to learn and is very suited to pages that comprise a single column of text, with headings, images and links to other pages. The structure of the site is one of subjects that contain topics; each subject is a folder and each topic is a single text file written in Markdown. All the images used by the subject and its topics are placed in a folder inside that subject folder.
2525

26-
To use Storyteller all you need is to copy a short `index.html` file to your server and provide the topics as described. This is all covered by the documentation on the [Storyteller website](https://storyteller20.neocities.org).
26+
To use Storyteller all you need is to copy a short `index.html` file to your server and provide the topics as described. This is all covered by the documentation on the [Storyteller website](https://easycoder.github.io/examples/storyteller).
2727

2828
Storyteller is written in ~ec~; its source code is in the [Storyteller repository](https://github.com/easycoder/storyteller).
2929

‎resources/md/imageswitcher.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
## Notes
22

3-
The Image Switcher can be run as an independent web page; see [Image Switcher](/imageswitcher.html). If you view the page source you will see the entire script inside its special preformatted element.
3+
The Image Switcher can be run as an independent web page; see [Image Switcher](https://easycoder.github.io/examples/imageswitcher). If you view the page source you will see the entire script inside its special preformatted element.
44

55
After declaring all its variables, the script attaches its ~code:Container~ variable to the ~code:div~ element defined at the top of the file. It then sets the size of two arrays, ~code:Thumb~ and ~code:Image~, each of which will hold a set of 9 images as either thumbnails or full-size images. The script then creates the button bar with its 9 thumbnails and arrows at each end to move forward or back.
66

0 commit comments

Comments
 (0)