Skip to content

Commit d4cf3d4

Browse files
JaimeSalasJaimeSalas
committed
Source Timers Demo
1 parent fc000b0 commit d4cf3d4

File tree

7 files changed

+3391
-0
lines changed

7 files changed

+3391
-0
lines changed

‎06 Source Timers/README.md

Lines changed: 260 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,260 @@
1+
## In this demo we are goin to polay with the user interactions.
2+
* References: https://developer.mozilla.org/es/docs/Web/API/DataTransfer
3+
https://codepen.io/patrickhlauke/pen/azbYWZ
4+
5+
* Folder structure:
6+
7+
05 User interactions/
8+
├── src/
9+
│ ├── content/
10+
| | ├── site.css
11+
│ ├── js/
12+
| | ├── main.js
13+
│ ├── index.html
14+
│ └── bootstrap-theme.min.css
15+
├── gulpfile.js
16+
├── package.json
17+
18+
## Steps.
19+
20+
### 1. Create the `index.html` for our demo.
21+
22+
* Just paste this code.
23+
24+
```html
25+
<!doctype html>
26+
27+
<html lang="en">
28+
<head>
29+
<meta charset="utf-8">
30+
<title>LEMONCODE 16/17 jQuery</title>
31+
<link rel="stylesheet" href="content/site.css">
32+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
33+
</head>
34+
35+
<body>
36+
<h1>API Rest</h1>
37+
<div id="drag-element" draggable="true" class="drag"></div>
38+
<br>
39+
<div id="drop-element-a" class="drop"></div>
40+
<div id="drop-element-b" class="drop"></div>
41+
<script src="./js/main.js"></script>
42+
</body>
43+
</html>
44+
45+
```
46+
47+
### 2. Create `site.css`
48+
49+
* Just paste this code,
50+
51+
```css
52+
@import url('https://fonts.googleapis.com/css?family=Raleway');
53+
54+
body {
55+
font-family: 'Raleway', sans-serif;
56+
}
57+
58+
.container {
59+
padding: 2em;
60+
}
61+
62+
.container p {
63+
max-width: 70%;
64+
font-size: 0.9em;
65+
margin-top: 0.2em;
66+
margin-bottom: 0.2em;
67+
height: 2.3em;
68+
}
69+
70+
.container p img {
71+
max-width: 95%;
72+
max-height: 95%;
73+
position: relative;
74+
top: 0.7em;
75+
left: 1em;
76+
}
77+
78+
.container ul {
79+
list-style: none;
80+
}
81+
82+
.drag {
83+
background-color: cyan;
84+
width: 200px;
85+
height: 200px;
86+
}
87+
88+
.drop {
89+
border: 1px solid black;
90+
width: 300px;
91+
height: 300px;
92+
float: left;
93+
}
94+
95+
```
96+
* Run the application and have a look
97+
98+
### 3. Lets type the javascript code to manage the drag and drop
99+
100+
```javascript
101+
document.onreadystatechange = () => {
102+
if(document.readyState === 'complete') {
103+
104+
const dragStart = (event) => {
105+
event.dataTransfer.setData('text/plain', event.target.id);
106+
console.log("dragStart", event);
107+
};
108+
109+
const dragElement = document.getElementById('drag-element');
110+
dragElement.addEventListener('dragstart', dragStart);
111+
112+
const dragOver = (event) => {
113+
event.preventDefault();
114+
event.dataTransfer.dropEffect = 'move';
115+
console.log({
116+
x: event.pageX,
117+
y: event.pageY
118+
});
119+
};
120+
121+
const drop = (event) => {
122+
const id = event.dataTransfer.getData('text');
123+
console.log('drop', id);
124+
event.target.appendChild(dragElement);
125+
};
126+
127+
const dropElementA = document.getElementById('drop-element-a');
128+
const dropElementB = document.getElementById('drop-element-b');
129+
130+
dropElementA.addEventListener('dragover', dragOver);
131+
dropElementB.addEventListener('dragover', dragOver);
132+
133+
dropElementA.addEventListener('drop', drop);
134+
dropElementB.addEventListener('drop', drop);
135+
}
136+
};
137+
138+
```
139+
* Drag and drop it's a great example of async sources, code that it's executed later.
140+
* Obviously these are user interactions, that it's getting the elements and moving around the page.
141+
* When we click the drag element and start the dragging around, the `dragstart` event it's triggered. The associated handler will be pushed to the queue, and later on executed.
142+
* How many little programs do we have here?
143+
## In this demo we are going to play with the user interactions.
144+
* Folder structure:
145+
146+
05 User interactions/
147+
├── src/
148+
│ ├── content/
149+
| | ├── site.css
150+
│ ├── js/
151+
| | ├── main.js
152+
│ ├── index.html
153+
│ └── bootstrap-theme.min.css
154+
├── gulpfile.js
155+
├── package.json
156+
157+
* Start from previous code demo.
158+
159+
## Steps.
160+
161+
### 1. Refactor the `index.html` for our demo.
162+
163+
* Just paste this code.
164+
165+
```diff html
166+
<!doctype html>
167+
168+
<html lang="en">
169+
<head>
170+
<meta charset="utf-8">
171+
<title>LEMONCODE 16/17 jQuery</title>
172+
<link rel="stylesheet" href="content/site.css">
173+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
174+
+ <script src="./js/main.js"></script>
175+
</head>
176+
177+
<body>
178+
<h1>API Rest</h1>
179+
+ <div id="content"></div>
180+
- <div id="drag-element" draggable="true" class="drag"></div>
181+
- <br>
182+
- <div id="drop-element-a" class="drop"></div>
183+
- <div id="drop-element-b" class="drop"></div>
184+
- <script src="./js/main.js"></script>
185+
</body>
186+
</html>
187+
188+
```
189+
190+
### 2. Refactor `site.css`
191+
192+
* Just paste this code,
193+
194+
```diff css
195+
@import url('https://fonts.googleapis.com/css?family=Raleway');
196+
197+
body {
198+
font-family: 'Raleway', sans-serif;
199+
}
200+
201+
.container {
202+
padding: 2em;
203+
}
204+
205+
.container p {
206+
max-width: 70%;
207+
font-size: 0.9em;
208+
margin-top: 0.2em;
209+
margin-bottom: 0.2em;
210+
height: 2.3em;
211+
}
212+
213+
.container p img {
214+
max-width: 95%;
215+
max-height: 95%;
216+
position: relative;
217+
top: 0.7em;
218+
left: 1em;
219+
}
220+
221+
.container ul {
222+
list-style: none;
223+
}
224+
225+
-.drag {
226+
- background-color: cyan;
227+
- width: 200px;
228+
- height: 200px;
229+
-}
230+
-
231+
-.drop {
232+
- border: 1px solid black;
233+
- width: 300px;
234+
- height: 300px;
235+
- float: left;
236+
-}
237+
-
238+
```
239+
240+
### 3. Remove the previous code and place the start point.
241+
242+
```javascript
243+
document.getElementById('content').innerHTML = 'Main content from JS';
244+
245+
```
246+
* Run the application. No text appears on the browser's window. Why?
247+
* The reason it's that the document does not load yet, so the element with `id = content`, does not exist as well.
248+
* Of course, we have this behavior because, the script it's loaded on the head.
249+
250+
### 4. To fix this behavior, we are going to use a delay.
251+
252+
```diff main.js
253+
-document.getElementById('content').innerHTML = 'Main content from JS';
254+
+setTimeout(() => {
255+
+ document.getElementById('content').innerHTML = 'Main content from JS';
256+
+}, 100);
257+
```
258+
* En la función de arriba, cuando pasen 100 ms, esa función que estamos suministrando aquí será empujada a la cola del event loop, y una vez que se ejecute, lo que sea que estuvierá por delante se ejecuté, entonces después esta, función comnzará su ejecución. Esto, nos muestra un aspecto importante de esta función, no hay garatía sea llamada exactamente a los 100ms, cuando es alcanzada. A los 100ms, será empujada a la cola, pero si hay mucho trabajo, en frente, tendrá que esperar a que ese trabajo, se ejecute antes.
259+
260+
* Analogía con un dietario.

‎06 Source Timers/gulpfile.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
'use strict';
2+
3+
const gulp = require('gulp'),
4+
connect = require('gulp-connect'),
5+
open = require('gulp-open'),
6+
options = {
7+
port: 9005,
8+
root: ['src'],
9+
devBase: 'http://localhost:',
10+
browsers: ['safari', 'chrome']
11+
},
12+
openOptions = {
13+
uri: options.devBase + options.port,
14+
app: options.browser
15+
};
16+
17+
gulp.task('connect', () => connect.server({
18+
root: options.root,
19+
port: options.port
20+
}));
21+
// https://github.com/stevelacy/gulp-open/issues/15
22+
gulp.task('open', () => gulp.src(__filename).pipe(open(openOptions)));
23+
24+
gulp.task('default', ['connect', 'open']);

0 commit comments

Comments
 (0)