jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

renovations

Browse source
This commit is contained in:
Ilya Kantor 2015-02-21 00:59:02 +03:00
parent 24171550ae
commit a62682e188
49 changed files with 620 additions and 894 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,8 +3,8 @@
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="menu.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
<script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.closest"></script>
<script src="menu.js"></script>
</head>
<body>
@ -26,18 +26,17 @@
<script>
var menu = new Menu({
title: "Сладости",
template: _.template($('#menu-template').html()),
listTemplate: _.template($('#menu-list-template').html()),
template: _.template( document.getElementById('menu-template').innerHTML.trim()),
listTemplate: _.template( document.getElementById('menu-list-template').innerHTML.trim()),
items: [
"Торт", // cake <a href="#cake">Торт</a>
"Пончик", // donut
"Пирожное", // cake
"Шоколадка", // chockolate
"Шоколадка" // chokolate
]
});
$(document.body).append(menu.getElem());
document.body.appendChild(menu.getElem());
</script>
</body>
</html>
</html>

12
2-ui/5-widgets/4-template-lodash/3-menu-template/source.view/menu.css
View file

@ -7,14 +7,18 @@
.menu .title {
font-weight: bold;
cursor: pointer;
background: url(https://js.cx/clipart/arrow-right.png) left center no-repeat;
padding-left: 18px;
}
.menu .title:before {
content: '▶';
padding-right: 6px;
color: green;
}
.menu.open ul {
display: block;
}
.menu.open .title {
background-image: url(https://js.cx/clipart/arrow-down.png);
.menu.open .title:before {
content: '▼';
}

32
2-ui/5-widgets/4-template-lodash/3-menu-template/source.view/menu.js
View file

@ -7,37 +7,41 @@ function Menu(options) {
}
function render() {
var elemHtml = options.template({title: options.title});
var html = options.template({title: options.title});
elem = $(elemHtml);
elem = document.createElement('div');
elem.innerHTML = html;
elem = elem.firstElementChild;
elem.on('mousedown selectstart', false);
elem.onmousedown = function() {
return false;
}
elem.on('click', '.title', onTitleClick);
elem.onclick = function(event) {
if (event.target.closest('.title')) {
toggle();
}
}
}
function renderItems() {
if (elem.find('ul').length) return;
if (elem.querySelector('ul')) return;
var listHtml = options.listTemplate({items: options.items});
elem.append(listHtml);
}
function onTitleClick(e) {
toggle();
elem.insertAdjacentHTML("beforeEnd", listHtml);
}
function open() {
renderItems();
elem.addClass('open');
elem.classList.add('open');
};
function close() {
elem.removeClass('open');
elem.classList.remove('open');
};
function toggle() {
if (elem.hasClass('open')) close();
if (elem.classList.contains('open')) close();
else open();
};
@ -45,4 +49,4 @@ function Menu(options) {
this.toggle = toggle;
this.close = close;
this.open = open;
}
}