Skip to content

Commit a62682e

Browse files
iliakaniliakan
committed
renovations
1 parent 2417155 commit a62682e

File tree

49 files changed

+604
-878
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+604
-878
lines changed

‎1-js/3-writing-js/2-coding-style/code-style.svg

+2-2
Loading

‎2-ui/5-widgets/4-template-lodash/1-table-template/solution.view/index.html

+4-6
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<script src="http://code.jquery.com/jquery.min.js"></script>
6-
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
5+
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
76
<style>
87
table {
98
border-collapse: collapse;
@@ -44,14 +43,13 @@
4443
{name: "Даша", age: 30}
4544
];
4645

47-
$('#grid-holder').html(
48-
_.template( $('#grid-template').html().trim(), {list: users})
49-
);
46+
var tmpl = document.getElementById('grid-template').innerHTML.trim();
47+
tmpl = _.template(tmpl);
5048

5149

50+
document.getElementById('grid-holder').innerHTML = tmpl({list: users});
5251

5352
</script>
5453

55-
5654
</body>
5755
</html>

‎2-ui/5-widgets/4-template-lodash/1-table-template/source.view/index.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<script src="http://code.jquery.com/jquery.min.js"></script>
6-
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
5+
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
76
</head>
87
<body>
98

‎2-ui/5-widgets/4-template-lodash/1-table-template/task.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ var users = [
1818

1919
Результат:
2020

21-
[iframe src="solution"]
21+
[iframe src="solution" height=180]
2222

2323

2424

‎2-ui/5-widgets/4-template-lodash/3-menu-template/solution.md

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,5 @@
1-
2-
[edit src="solution"]Решение[/edit]
1+
В решении обратим внимание:
2+
<ul>
3+
<li>Чтобы ссылка `href` была корректной, даже если в ключах `items` попались русские символы и пробелы -- используется функция [encodeURIComponent](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent).</li>
4+
<li>Для вывода `href` при клике на ссылку используется делегирование. Причём обработчик не сам выводит `href`, а лишь разбирается в произошедшем и вызывает функцию `select`, которая представляет действие "выбора" элемента меню. В последующих примерах эта функция станет сложнее.</li>
5+
</ul>

‎2-ui/5-widgets/4-template-lodash/3-menu-template/solution.view/index.html

+15-12
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
<head>
44
<meta charset="utf-8">
55
<link rel="stylesheet" href="menu.css">
6-
<script src="http://code.jquery.com/jquery.min.js"></script>
76
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
7+
<script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.closest"></script>
88
<script src="menu.js"></script>
99
</head>
1010
<body>
@@ -15,30 +15,33 @@
1515
</div>
1616
</script>
1717

18+
<!--
19+
встроенная браузерная функция encodeURIComponent кодирует спец-символы для URL,
20+
например русские буквы и пробелы
21+
в этом примере русских букв в ключах items нет, но потенциально они возможны
22+
-->
1823
<script type="text/template" id="menu-list-template">
1924
<ul>
20-
<% for(var key in items) { %>
21-
<li><a href="#<%-key%>"><%-items[key]%></li>
25+
<% for(var name in items) { %>
26+
<li><a href="#<%=encodeURIComponent(name)%>"><%-items[name]%></a></li>
2227
<% } %>
2328
</ul>
2429
</script>
2530

2631
<script>
2732
var menu = new Menu({
2833
title: "Сладости",
29-
template: _.template($('#menu-template').html()),
30-
listTemplate: _.template($('#menu-list-template').html()),
34+
template: _.template( document.getElementById('menu-template').innerHTML.trim()),
35+
listTemplate: _.template( document.getElementById('menu-list-template').innerHTML.trim()),
3136
items: {
32-
"donut": "Пончик",
33-
"cake": "Пирожное",
34-
"chocolate": "Шоколадка"
37+
cake: "Торт", // cake <a href="#cake">Торт</a>
38+
donut: "Пончик", // donut
39+
chokolate: "Шоколадка" // chokolate
3540
}
3641
});
3742

38-
$(document.body).append(menu.getElem());
39-
menu.open();
43+
document.body.appendChild(menu.getElem());
4044
</script>
4145

4246
</body>
43-
</html>
44-
47+
</html>

‎2-ui/5-widgets/4-template-lodash/3-menu-template/solution.view/menu.css

+8-4
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,18 @@
77
.menu .title {
88
font-weight: bold;
99
cursor: pointer;
10-
background: url(https://js.cx/clipart/arrow-right.png) left center no-repeat;
11-
padding-left: 18px;
10+
}
11+
12+
.menu .title:before {
13+
content: '▶';
14+
padding-right: 6px;
15+
color: green;
1216
}
1317

1418
.menu.open ul {
1519
display: block;
1620
}
1721

18-
.menu.open .title {
19-
background-image: url(https://js.cx/clipart/arrow-down.png);
22+
.menu.open .title:before {
23+
content: '▼';
2024
}

‎2-ui/5-widgets/4-template-lodash/3-menu-template/solution.view/menu.js

+26-19
Original file line numberDiff line numberDiff line change
@@ -7,49 +7,56 @@ function Menu(options) {
77
}
88

99
function render() {
10-
var elemHtml = options.template({title: options.title});
10+
var html = options.template({title: options.title});
1111

12-
elem = $(elemHtml);
12+
elem = document.createElement('div');
13+
elem.innerHTML = html;
14+
elem = elem.firstElementChild;
1315

14-
elem.on('mousedown selectstart', false);
16+
elem.onmousedown = function() {
17+
return false;
18+
}
1519

16-
elem.on('click', '.title', onTitleClick);
17-
elem.on('click', 'a', onItemClick)
18-
}
20+
elem.onclick = function(event) {
21+
if (event.target.closest('.title')) {
22+
toggle();
23+
}
24+
25+
if (event.target.closest('a')) {
26+
event.preventDefault();
27+
select(event.target.closest('a'));
28+
}
1929

30+
}
31+
}
2032

2133
function renderItems() {
22-
if (elem.find('ul').length) return;
34+
if (elem.querySelector('ul')) return;
2335

2436
var listHtml = options.listTemplate({items: options.items});
25-
elem.append(listHtml);
26-
}
27-
28-
function onItemClick(e) {
29-
alert(e.currentTarget.getAttribute('href').slice(1));
30-
e.preventDefault();
37+
elem.insertAdjacentHTML("beforeEnd", listHtml);
3138
}
3239

33-
function onTitleClick(e) {
34-
toggle();
40+
function select(link) {
41+
alert(link.getAttribute('href').slice(1));
3542
}
3643

3744
function open() {
3845
renderItems();
39-
elem.addClass('open');
46+
elem.classList.add('open');
4047
};
4148

4249
function close() {
43-
elem.removeClass('open');
50+
elem.classList.remove('open');
4451
};
4552

4653
function toggle() {
47-
if (elem.hasClass('open')) close();
54+
if (elem.classList.contains('open')) close();
4855
else open();
4956
};
5057

5158
this.getElem = getElem;
5259
this.toggle = toggle;
5360
this.close = close;
5461
this.open = open;
55-
}
62+
}

‎2-ui/5-widgets/4-template-lodash/3-menu-template/source.view/index.html

+7-8
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
<head>
44
<meta charset="utf-8">
55
<link rel="stylesheet" href="menu.css">
6-
<script src="http://code.jquery.com/jquery.min.js"></script>
76
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
7+
<script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.closest"></script>
88
<script src="menu.js"></script>
99
</head>
1010
<body>
@@ -26,18 +26,17 @@
2626
<script>
2727
var menu = new Menu({
2828
title: "Сладости",
29-
template: _.template($('#menu-template').html()),
30-
listTemplate: _.template($('#menu-list-template').html()),
29+
template: _.template( document.getElementById('menu-template').innerHTML.trim()),
30+
listTemplate: _.template( document.getElementById('menu-list-template').innerHTML.trim()),
3131
items: [
32+
"Торт", // cake <a href="#cake">Торт</a>
3233
"Пончик", // donut
33-
"Пирожное", // cake
34-
"Шоколадка", // chockolate
34+
"Шоколадка" // chokolate
3535
]
3636
});
3737

38-
$(document.body).append(menu.getElem());
38+
document.body.appendChild(menu.getElem());
3939
</script>
4040

4141
</body>
42-
</html>
43-
42+
</html>

‎2-ui/5-widgets/4-template-lodash/3-menu-template/source.view/menu.css

+8-4
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,18 @@
77
.menu .title {
88
font-weight: bold;
99
cursor: pointer;
10-
background: url(https://js.cx/clipart/arrow-right.png) left center no-repeat;
11-
padding-left: 18px;
10+
}
11+
12+
.menu .title:before {
13+
content: '▶';
14+
padding-right: 6px;
15+
color: green;
1216
}
1317

1418
.menu.open ul {
1519
display: block;
1620
}
1721

18-
.menu.open .title {
19-
background-image: url(https://js.cx/clipart/arrow-down.png);
22+
.menu.open .title:before {
23+
content: '▼';
2024
}

‎2-ui/5-widgets/4-template-lodash/3-menu-template/source.view/menu.js

+18-14
Original file line numberDiff line numberDiff line change
@@ -7,42 +7,46 @@ function Menu(options) {
77
}
88

99
function render() {
10-
var elemHtml = options.template({title: options.title});
10+
var html = options.template({title: options.title});
1111

12-
elem = $(elemHtml);
12+
elem = document.createElement('div');
13+
elem.innerHTML = html;
14+
elem = elem.firstElementChild;
1315

14-
elem.on('mousedown selectstart', false);
16+
elem.onmousedown = function() {
17+
return false;
18+
}
1519

16-
elem.on('click', '.title', onTitleClick);
20+
elem.onclick = function(event) {
21+
if (event.target.closest('.title')) {
22+
toggle();
23+
}
24+
}
1725
}
1826

1927
function renderItems() {
20-
if (elem.find('ul').length) return;
28+
if (elem.querySelector('ul')) return;
2129

2230
var listHtml = options.listTemplate({items: options.items});
23-
elem.append(listHtml);
24-
}
25-
26-
function onTitleClick(e) {
27-
toggle();
31+
elem.insertAdjacentHTML("beforeEnd", listHtml);
2832
}
2933

3034
function open() {
3135
renderItems();
32-
elem.addClass('open');
36+
elem.classList.add('open');
3337
};
3438

3539
function close() {
36-
elem.removeClass('open');
40+
elem.classList.remove('open');
3741
};
3842

3943
function toggle() {
40-
if (elem.hasClass('open')) close();
44+
if (elem.classList.contains('open')) close();
4145
else open();
4246
};
4347

4448
this.getElem = getElem;
4549
this.toggle = toggle;
4650
this.close = close;
4751
this.open = open;
48-
}
52+
}

‎2-ui/5-widgets/4-template-lodash/3-menu-template/task.md

+10-8
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,16 @@
22

33
[importance 5]
44

5-
Возьмите в качестве исходного кода меню на шаблонах и модифицируйте его, чтобы вместо массива `items` оно принимало *объект* `items`, вот так:
5+
Возьмите в качестве исходного кода меню на шаблонах и модифицируйте его, чтобы оно выводило не просто список, а список ссылок.
6+
7+
<ol>
8+
<li>Вместо массива `items` меню должно принимать *объект* `items`, вот так:
69

710
```js
811
var menu = new Menu({
912
title: "Сладости",
10-
template: _.template($('#menu-template').html()),
11-
listTemplate: _.template($('#menu-list-template').html()),
13+
template: _.template(document.getElementById('menu-template').innerHTML),
14+
listTemplate: _.template(document.getElementById('menu-list-template').innerHTML),
1215
*!*
1316
items: {
1417
"donut": "Пончик",
@@ -18,11 +21,10 @@ var menu = new Menu({
1821
*/!*
1922
});
2023
```
24+
</ol>
25+
<li>Вывод в шаблоне пусть будет не просто `<li>Пончик</li>`, а через ссылку: `<a href="#donut">Пончик</a>`. При клике на ссылку должно выводиться название из её `href`.</li>
26+
</ol>
2127

22-
Вывод в шаблоне пусть будет не просто `<li>Пончик</li>`, а через ссылку: `<a href="#donut">Пончик</a>`.
23-
24-
При клике на ссылку должно выводиться название из её `href`. Демо:
28+
Демо:
2529

2630
[iframe src="solution" height="130" border="1"]
27-
28-
[edit src="source"]Исходное меню[/edit]

0 commit comments

Comments
 (0)