-
Notifications
You must be signed in to change notification settings - Fork 0
/
examples.html
134 lines (130 loc) · 6.77 KB
/
examples.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html>
<head>
<title>InventJS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://w3schools.com/lib/w3-theme-green.css">
<script src="./main.js"></script>
<style>
.title { font-family: "Lucida Console", "Courier New", monospace; }
.w3-bar .w3-right { padding-right: 2rem; align: middle; }
#projects a { margin: 4px }
td, th { border: 1px solid #dddddd; text-align: left; padding: 2px; min-width: 8rem }
* { scrollbar-color: rgb(40, 100, 40) #508F24 }
h2 {
background: black; color: white;
max-width: 50%; margin-top: 1rem !important;
padding: .1rem; padding-left: 1rem;
}
h3 {
background: black; color: white; max-width: 50%;
margin-top: 8rem !important;
padding: .1rem; padding-left: 1rem;
margin-bottom: 0 !important;
}
.mc { border: 1px solid black; padding: 1rem !important }
img { max-width: 80vw }
</style>
</head>
<body style="background-color:#EBF7E3">
<div class="w3-bar w3-xlarge" style="background-color:#508F24;color:white;font-style:bold">
<a href="./index.html" class="w3-bar-item w3-button"><button>Back</button></a>
<span class="w3-bar-item title" style="font-sizre:2rem;">InventJS™ Examples & Documentation</span>
<div class="w3-right">
<a href="#" class="w3-bar-item">
<img src="https://developers.google.com/blockly/images/logos/logo_built_on_dark_with_bg.png" width="92">
</a>
</div>
</div>
<div class="w3-container w3-padding-small w3-theme-d3" style="max-height:1rem;"> </div>
<!--<script src="https://unpkg.com/blockly/blockly.min.js"></script>
<script src="https://unpkg.com/[email protected]/javascript_compressed.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.0/beautify.min.js"></script>-->
<div class="w3-content" style="padding-top:1rem;background:#EBF7E3;">
<!--<div id="#about"><h2>InventJS</h2><table><tr><th>Product</th><th>Version</th></tr><tr><td>InventJS</td><td><span id="version">${version}</span> by Isaiah</td></tr><tr><td>Blockly</td><td>6.20210701.0 + Javascript Generator</td></tr><tr><td>W3.CSS</td><td>4.15 (December 2020) by Jan Egil and Borge Refsnes</td></tr></table></div>-->
<div id="#export">
<h2>Exporting Project</h2>
<b>As HTML Webpage:</b>
<div class="w3-container">InventJS™ allows exporting projects as full webpages! <br>
<img src="./assets/ex-export.png" width="160"> <img src="./assets/ex-dl.PNG" width="80" style="border-radius:8px;">
<br>
</div>
<b>As Android App:</b>
<div class="w3-container"> Sites like <a rel="nofollow" target="_blank" href="https://appsgeyser.com/create-html-app/">AppsGeyser</a> provide ways to package the HTML file into an APK (Android) <img src="./assets/Capture.PNG" width="44" style="float:left;">
</div>
</div>
<div id="#ui">
<h2>JS UI</h2>
<p>The "JS UI" block category contains custom blocks allowing with interaction with the HTML DOM.</p>
<p>Examples:
<ul>
<li><a href="#ui-create-el">Create Element</a></li>
<li><a href="#ui-change-content">Changing the Content of an Element</a></li>
<li><a href="#ui-clickevent">Element onClick Event</a></li>
</ul>
</p>
<div class="w3-container">
<h3 style="margin-top:2rem !important;" id="ui-create-el">Creating an Element</h3>
<div class="w3-container mc"> InventJS provides an helper function in JS to take care of creation of Elements: <img src="./assets/helper-createEl.png">
<h4>Create a Button with ID</h4>
<div class="w3-container"><img src="./assets/ex-createButton.png"></div>
</div>
<h3 id="ui-change-content">Changing the Content of an Element</h3>
<div class="w3-container mc"> You might have noticed in the last section, the button we created was empty. This is because we have not set the <code>innerHTML</code>, or content, of the Element. <h4>Set the content of an Element</h4>
<div class="w3-container">
<img src="./assets/ex-setContent.png">
<br> In the above blocks, we set the <code>innerHTML</code> of the element with id of <code>myid</code>, the button we created earlier, to <code>Hello</code>
</div>
</div>
<h3 id="ui-clickevent">Element onClick Event</h3>
<div class="w3-container mc"> A Button is just not very useful without being clickable. <h4>First create a new function</h4>
<div class="w3-container">
<img src="./assets/ex-function.png">
</div>
<h4>Set the <code>onClickEvent</code> Element </h4>
<div class="w3-container">
<img src="./assets/ex-clickEvent.png">
<br> In the above blocks, we set the <code>onClick</code> event of the element with id of <code>myid</code> to <code>myFunction();</code>
</div>
<h4>Now Run</h4>
<div class="w3-container">
<img src="./assets/ex-alert.png" style="border-radius:1rem;" width="120">
<br> Success!
</div>
<h4>onClick and functions with arguments </h4>
<div class="w3-container"> onClick uses the generated JS name of the function. <br> A function with the name of <code>myFunction</code>: <div class="w3-container"> - No inputs would be <code>myFunction();</code>
<br> - The input of <code>x</code> would be <code>myFunction(x);</code>
<br> - The inputs of <code>x & y</code> would be <code>myFunction(x, y);</code>
<br>
</div>
</div>
</div>
<h3 id="ui-pos">Get/Change the Position of an Element</h3>
<div class="w3-container mc">
<h4>Get Position</h4>
<div class="w3-container"> Blocks that return the x & y values from <code>getBoundingClientRect</code> are provided. ex: <img src="./assets/ex-bxy.png" height="40">
</div>
<br>
<h4>Set Position</h4>
<div class="w3-container"> By default HTML elements have the position value of <code>static</code>; For us to set the coordinates of the element, <br> we have to set the position style to <code>absolute</code>. <img src="./assets/ex-abs.png" height="38">
<br>
<br> Now we can set the top (y) and left (x) positions of the element. <br> Preview: <img src="./assets/ex-pos.png" height="60">
<br>
<i>Note:</i> The value is in CSS units, so <code>px</code> or <code>rem</code> needs to be appended to the end. <br>
</div>
</div>
</div>
</div>
</div>
<br>
<p> </p>
<br>
<div class="w3-bar w3-theme" style="width:100%;background-color:#508F24 !important;padding:2rem;padding-top:4rem;">
<p class="w3-center" style="padding-left:1rem;">InventJS™ <br>Copyright © 2021 by Isaiah. </p>
</div>
</body>
<script>
document.getElementById("version").innerHTML = projectVersion;
</script>
</html>