Skip to content

Commit 8d02c9c

Browse files
SonicTheCatSonicTheCat
committed
TEMPLATING LAB
1 parent 4f25790 commit 8d02c9c

File tree

10 files changed

+5185
-0
lines changed

10 files changed

+5185
-0
lines changed

‎08.Templating Lab/Contacts/app.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
$(() => {
2+
const templates = {};
3+
const phonebook = {contacts: []};
4+
const divList = $("#list .content");
5+
const divDetails = $("#details .content");
6+
loadData();
7+
8+
async function loadData() {
9+
phonebook.contacts = (await $.get("data.json")).map(c => {
10+
c.active = false;
11+
return c;
12+
});
13+
}
14+
15+
loadTemplates();
16+
17+
async function loadTemplates() {
18+
19+
const [contactSource, listSource, detailsSource] = await Promise.all([
20+
$.get("./templates/contacts.html"),
21+
$.get("./templates/contactList.html"),
22+
$.get("./templates/details.html")
23+
]);
24+
25+
Handlebars.registerPartial("contact", contactSource);
26+
templates.list = Handlebars.compile(listSource);
27+
templates.details = Handlebars.compile(detailsSource);
28+
29+
renderList();
30+
}
31+
32+
function renderList() {
33+
divList.html(templates.list(phonebook));
34+
attachEventListener();
35+
}
36+
37+
function renderDetails(id) {
38+
divDetails.html(templates.details(phonebook.contacts[id]))
39+
console.log(phonebook.contacts[id])
40+
}
41+
42+
function attachEventListener() {
43+
$(".contact").on("click", (e) => {
44+
let index = $(e.target).closest(".contact").attr("data-id");
45+
phonebook.contacts.filter(c => c.active).forEach(c => c.active = false);
46+
phonebook.contacts[index].active = true;
47+
renderDetails(index);
48+
renderList();
49+
})
50+
}
51+
});

‎08.Templating Lab/Contacts/data.json‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
[
2+
{
3+
"firstName": "pael",
4+
"lastName": "ILIEV",
5+
"phone": "0888 123 456",
6+
"email": "i.ivanov@gmail.com"
7+
},
8+
{
9+
"firstName": "Ivan",
10+
"lastName": "Ivanov",
11+
"phone": "0888 123 456",
12+
"email": "i.ivanov@gmail.com"
13+
},
14+
{
15+
"firstName": "Jordan",
16+
"lastName": "Kirov",
17+
"phone": "0988 456 789",
18+
"email": "jordk@gmail.com"
19+
},
20+
{
21+
"firstName": "Maria",
22+
"lastName": "Petrova",
23+
"phone": "0899 987 654",
24+
"email": "mar4eto@abv.bg"
25+
},
26+
{
27+
"firstName": "Sterling",
28+
"lastName": "Archer",
29+
"phone": "0123 123 123",
30+
"email": "archer@misix.com"
31+
},
32+
{
33+
"firstName": "Lana",
34+
"lastName": "Kane",
35+
"phone": "0123 423 873",
36+
"email": "lana@misix.com"
37+
},
38+
{
39+
"firstName": "Cyril",
40+
"lastName": "Figgis",
41+
"phone": "0123 176 679",
42+
"email": "cyril@misix.com"
43+
},
44+
{
45+
"firstName": "Cheryl",
46+
"lastName": "Tunt",
47+
"phone": "0123 277 380",
48+
"email": "cheryl@misix.com"
49+
},
50+
{
51+
"firstName": "Pam",
52+
"lastName": "Poovey",
53+
"phone": "0123 070 768",
54+
"email": "pam@misix.com"
55+
},
56+
{
57+
"firstName": "Malory",
58+
"lastName": "Archer",
59+
"phone": "0123 999 999",
60+
"email": "malory@misix.com"
61+
}
62+
]

‎08.Templating Lab/Contacts/index.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Contact Book</title>
6+
<link rel="stylesheet" href="style/site.css">
7+
<link rel="stylesheet" href="style/contact.css">
8+
<script src="../handlebars-v4.0.11.js"></script>
9+
<script src="../jquery-3.1.1.min.js"></script>
10+
<script defer src="app.js"></script>
11+
</head>
12+
<body>
13+
14+
<div class="container">
15+
<header>&#9993; Contact Book</header>
16+
<div id="book">
17+
<div id="list">
18+
<h1>Contacts</h1>
19+
<div class="content">
20+
<div class="contact" data-id="id">
21+
<span class="avatar small">&#9787;</span>
22+
<span class="title">Ivan Ivanov</span>
23+
</div>
24+
25+
<div class="contact" data-id="id">
26+
<span class="avatar small">&#9787;</span>
27+
<span class="title">Jordan Kirov</span>
28+
</div>
29+
30+
<div class="contact" data-id="id">
31+
<span class="avatar small">&#9787;</span>
32+
<span class="title">Maria Petrova</span>
33+
</div>
34+
</div>
35+
</div>
36+
<div id="details">
37+
<h1>Details</h1>
38+
<div class="content">
39+
40+
</div>
41+
</div>
42+
</div>
43+
<footer>Contact Book SPA &copy; 2017</footer>
44+
</div>
45+
46+
</body>
47+
</html>

‎08.Templating Lab/Contacts/style/contact.css‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
#book {
2+
margin: 20px;
3+
overflow: auto;
4+
clear: both;
5+
background: #ffffff;
6+
}
7+
8+
#list {
9+
float: left;
10+
width: 40%;
11+
}
12+
13+
#details {
14+
float: left;
15+
width: 60%;
16+
}
17+
18+
.contact {
19+
background: #EEE;
20+
padding: 5px;
21+
margin: 5px;
22+
vertical-align: middle;
23+
cursor: pointer;
24+
}
25+
26+
.contact:hover {
27+
background: #d59450;
28+
}
29+
30+
.avatar {
31+
display: inline-block;
32+
width: 96px;
33+
height: 96px;
34+
font-size: 5em;
35+
line-height: 96px;
36+
vertical-align: middle;
37+
text-align: center;
38+
background: #838383;
39+
color: #ffffff;
40+
}
41+
42+
.small {
43+
width: 48px;
44+
height: 48px;
45+
font-size: 2.5em;
46+
line-height: 48px;
47+
}
48+
49+
.title {
50+
display: inline-block;
51+
padding: 5px;
52+
font-weight: bold;
53+
}
54+
55+
.name {
56+
font-size: 2em;
57+
font-weight: bold;
58+
margin: 5px 20px;
59+
}
60+
61+
.info-line {
62+
margin: 5px;
63+
}
64+
65+
.info {
66+
overflow: auto;
67+
padding: 5px;
68+
}
69+
70+
.info span {
71+
display: block;
72+
}
73+
74+
.col {
75+
float: left;
76+
}
77+
78+
.active {
79+
background: #d59450;
80+
color: #ffffff;
81+
}

‎08.Templating Lab/Contacts/style/site.css‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
body {
2+
margin: 0;
3+
padding: 0;
4+
background: #DDDDDD;
5+
font-family: sans-serif;
6+
}
7+
8+
.container {
9+
margin: 10px auto 10px auto;
10+
max-width: 900px;
11+
min-height: 90vh;
12+
background: #EEEEEE;
13+
position: relative;
14+
padding-bottom: 2em;
15+
}
16+
17+
header {
18+
background: #d59450;
19+
color: #fff;
20+
text-align: left;
21+
font-size: 2em;
22+
font-weight: bold;
23+
padding: 0.5em;
24+
}
25+
26+
footer {
27+
background: #d59450;
28+
color: #fff;
29+
text-align: center;
30+
padding: 0.5em;
31+
position: absolute;
32+
bottom: 0;
33+
left: 0;
34+
right: 0;
35+
}
36+
37+
.content {
38+
margin: 0;
39+
padding: 1em;
40+
background: #fff;
41+
}
42+
43+
.centered {
44+
text-align: center;
45+
vertical-align: middle;
46+
}
47+
48+
h1 {
49+
background: #d59450;
50+
margin: 0;
51+
padding: 0.25em 1em 0.25em 1em;
52+
color: #fff
53+
}
54+
55+
.box {
56+
text-align: left;
57+
display: inline-block;
58+
margin: auto;
59+
margin-top: 20%;
60+
width: 250px;
61+
}
62+
63+
.box label, .box input {
64+
box-sizing: border-box;
65+
display: block;
66+
width: 90%;
67+
margin: 0.25em auto 0.25em auto;
68+
}
69+
70+
.box label {
71+
margin-top: 1em;
72+
}
73+
74+
a {
75+
text-decoration: none;
76+
}
77+
78+
a:hover {
79+
color: #d59450;
80+
}

‎08.Templating Lab/Contacts/templates/contactList.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{{#each contacts}}
2+
{{> contact}}
3+
{{/each}}

‎08.Templating Lab/Contacts/templates/contacts.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<div class="contact {{#if active}}active {{/if}}" data-id="{{@index}}">
2+
<span class="avatar small">&#9787;</span>
3+
<span class="title">{{firstName}} {{lastName}}</span>
4+
</div>

‎08.Templating Lab/Contacts/templates/details.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<div class="info">
2+
<div class="col">
3+
<span class="avatar">&#9787;</span>
4+
</div>
5+
<div class="col">
6+
<span class="name">{{firstName}}</span>
7+
<span class="name">{{lastName}}</span>
8+
</div>
9+
</div>
10+
<div class="info">
11+
<span class="info-line">&phone; {{phone}}</span>
12+
<span class="info-line">&#9993; {{email}}</span>
13+
</div>

0 commit comments

Comments
 (0)