renovations

tikoflano · Feb 20, 2015 · a62682e · a62682e
1 parent 2417155
commit a62682e
Show file tree

Hide file tree

Showing 49 changed files with 604 additions and 878 deletions.
diff --git a/1-js/3-writing-js/2-coding-style/code-style.svg b/1-js/3-writing-js/2-coding-style/code-style.svg
diff --git a/2-ui/5-widgets/4-template-lodash/1-table-template/solution.view/index.html b/2-ui/5-widgets/4-template-lodash/1-table-template/solution.view/index.html
@@ -2,8 +2,7 @@
  <html>
  <head>
    <meta charset="utf-8">
-   <script src="http://code.jquery.com/jquery.min.js"></script>
-   <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
+   <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
    <style>
      table {
       border-collapse: collapse;
@@ -44,14 +43,13 @@
   {name: "Даша", age: 30}
 ];
 
-$('#grid-holder').html( 
-  _.template( $('#grid-template').html().trim(), {list: users}) 
-);
+var tmpl = document.getElementById('grid-template').innerHTML.trim();
+tmpl = _.template(tmpl);
 
 
+document.getElementById('grid-holder').innerHTML = tmpl({list: users});
 
 </script>
 
-
 </body>
 </html>
diff --git a/2-ui/5-widgets/4-template-lodash/1-table-template/source.view/index.html b/2-ui/5-widgets/4-template-lodash/1-table-template/source.view/index.html
@@ -2,8 +2,7 @@
  <html>
  <head>
    <meta charset="utf-8">
-   <script src="http://code.jquery.com/jquery.min.js"></script>
-   <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
+   <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
  </head>
  <body>
 

diff --git a/2-ui/5-widgets/4-template-lodash/1-table-template/task.md b/2-ui/5-widgets/4-template-lodash/1-table-template/task.md
@@ -18,7 +18,7 @@ var users = [
 
 Результат:
 
-[iframe src="solution"]
+[iframe src="solution" height=180]
 
 
 
diff --git a/2-ui/5-widgets/4-template-lodash/3-menu-template/solution.md b/2-ui/5-widgets/4-template-lodash/3-menu-template/solution.md
@@ -1,2 +1,5 @@
-
-[edit src="solution"]Решение[/edit]
+В решении обратим внимание:
+<ul>
+<li>Чтобы ссылка `href` была корректной, даже если в ключах `items` попались русские символы и пробелы -- используется функция [encodeURIComponent](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent).</li>
+<li>Для вывода `href` при клике на ссылку используется делегирование. Причём обработчик не сам выводит `href`, а лишь разбирается в произошедшем и вызывает функцию `select`, которая представляет действие "выбора" элемента меню. В последующих примерах эта функция станет сложнее.</li>
+</ul>
diff --git a/2-ui/5-widgets/4-template-lodash/3-menu-template/solution.view/index.html b/2-ui/5-widgets/4-template-lodash/3-menu-template/solution.view/index.html
@@ -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>
@@ -15,30 +15,33 @@
 </div>
 </script>
 
+<!-- 
+встроенная браузерная функция encodeURIComponent кодирует спец-символы для URL,
+например русские буквы и пробелы 
+в этом примере русских букв в ключах items нет, но потенциально они возможны
+-->
 <script type="text/template" id="menu-list-template">
 <ul>
-  <% for(var key in items) { %>
-  <li><a href="#<%-key%>"><%-items[key]%></li>
+  <% for(var name in items) { %>
+  <li><a href="#<%=encodeURIComponent(name)%>"><%-items[name]%></a></li>
   <% } %>
 </ul>
 </script>
 
 <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: {
-    "donut": "Пончик", 
-    "cake": "Пирожное", 
-    "chocolate": "Шоколадка"
+    cake: "Торт", // cake  <a href="#cake">Торт</a>
+    donut: "Пончик", // donut
+    chokolate: "Шоколадка" // chokolate
   }
 });
 
-$(document.body).append(menu.getElem());
-menu.open();
+document.body.appendChild(menu.getElem());
 </script>
 
 </body>
-</html>
-
+</html>
diff --git a/2-ui/5-widgets/4-template-lodash/3-menu-template/solution.view/menu.css b/2-ui/5-widgets/4-template-lodash/3-menu-template/solution.view/menu.css
@@ -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: '▼';
 }
diff --git a/2-ui/5-widgets/4-template-lodash/3-menu-template/solution.view/menu.js b/2-ui/5-widgets/4-template-lodash/3-menu-template/solution.view/menu.js
@@ -7,49 +7,56 @@ 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.on('click', 'a', onItemClick)
-  }
+    elem.onclick = function(event) {
+      if (event.target.closest('.title')) {
+        toggle();
+      }
+
+      if (event.target.closest('a')) {
+        event.preventDefault();
+        select(event.target.closest('a'));
+      }
 
+    }
+  }
 
   function renderItems() {
-    if (elem.find('ul').length) return;
+    if (elem.querySelector('ul')) return;
 
     var listHtml = options.listTemplate({items: options.items});
-    elem.append(listHtml);
-  }
-
-  function onItemClick(e) {
-    alert(e.currentTarget.getAttribute('href').slice(1));
-    e.preventDefault();
+    elem.insertAdjacentHTML("beforeEnd", listHtml);
   }
 
-  function onTitleClick(e) {
-    toggle();
+  function select(link) {
+    alert(link.getAttribute('href').slice(1));
   }
 
   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();
   };
 
   this.getElem = getElem;
   this.toggle = toggle;
   this.close = close;
   this.open = open;
-}
+}
diff --git a/2-ui/5-widgets/4-template-lodash/3-menu-template/source.view/index.html b/2-ui/5-widgets/4-template-lodash/3-menu-template/source.view/index.html
@@ -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>
diff --git a/2-ui/5-widgets/4-template-lodash/3-menu-template/source.view/menu.css b/2-ui/5-widgets/4-template-lodash/3-menu-template/source.view/menu.css
@@ -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: '▼';
 }
diff --git a/2-ui/5-widgets/4-template-lodash/3-menu-template/source.view/menu.js b/2-ui/5-widgets/4-template-lodash/3-menu-template/source.view/menu.js
@@ -7,42 +7,46 @@ 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();
   };
 
   this.getElem = getElem;
   this.toggle = toggle;
   this.close = close;
   this.open = open;
-}
+}
diff --git a/2-ui/5-widgets/4-template-lodash/3-menu-template/task.md b/2-ui/5-widgets/4-template-lodash/3-menu-template/task.md
@@ -2,13 +2,16 @@
 
 [importance 5]
 
-Возьмите в качестве исходного кода меню на шаблонах и модифицируйте его, чтобы вместо массива `items` оно принимало *объект* `items`, вот так:
+Возьмите в качестве исходного кода меню на шаблонах и модифицируйте его, чтобы оно выводило не просто список, а список ссылок.
+
+<ol>
+<li>Вместо массива `items` меню должно принимать *объект* `items`, вот так:
 
 ```js
 var menu = new Menu({ 
   title: "Сладости",
-  template: _.template($('#menu-template').html()),
-  listTemplate: _.template($('#menu-list-template').html()),
+  template: _.template(document.getElementById('menu-template').innerHTML),
+  listTemplate: _.template(document.getElementById('menu-list-template').innerHTML),
 *!*
   items: {
     "donut": "Пончик", 
@@ -18,11 +21,10 @@ var menu = new Menu({
 */!*
 });
 ```
+</ol>
+<li>Вывод в шаблоне пусть будет не просто `<li>Пончик</li>`, а через ссылку: `<a href="#donut">Пончик</a>`. При клике на ссылку должно выводиться название из её `href`.</li>
+</ol>
 
-Вывод в шаблоне пусть будет не просто `<li>Пончик</li>`, а через ссылку: `<a href="#donut">Пончик</a>`.
-
-При клике на ссылку должно выводиться название из её `href`. Демо:
+Демо:
 
 [iframe src="solution" height="130" border="1"]
-
-[edit src="source"]Исходное меню[/edit]
Original file line number	Diff line number	Diff line change
Expand Up		@@ -18,7 +18,7 @@ var users = [

		Результат:

		[iframe src="solution"]
		[iframe src="solution" height=180]