From a62682e188b5a05f5ed1567283a9a4173fb5153c Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Sat, 21 Feb 2015 00:59:02 +0300 Subject: [PATCH] renovations --- .../2-coding-style/code-style.svg | 4 +- .../1-table-template/solution.view/index.html | 10 +- .../1-table-template/source.view/index.html | 3 +- .../1-table-template/task.md | 2 +- .../3-menu-template/solution.md | 7 +- .../3-menu-template/solution.view/index.html | 27 +- .../3-menu-template/solution.view/menu.css | 12 +- .../3-menu-template/solution.view/menu.js | 45 ++- .../3-menu-template/source.view/index.html | 15 +- .../3-menu-template/source.view/menu.css | 12 +- .../3-menu-template/source.view/menu.js | 32 +- .../4-template-lodash/3-menu-template/task.md | 18 +- 2-ui/5-widgets/4-template-lodash/article.md | 99 +++--- .../template-error-sourceurl.view/index.html | 8 +- .../5-custom-events/1-voter-events/index.html | 94 ----- .../1-voter-events/solution.view/index.html | 66 +--- .../1-voter-events/solution.view/voter.js | 36 ++ .../5-custom-events/1-voter-events/task.md | 15 +- .../2-selectable-list-evented/solution.md | 8 - .../solution.view/index.html | 69 +--- .../solution.view/listSelect.js | 81 +++++ .../solution.view/style.css | 7 + .../2-selectable-list-evented/task.md | 4 +- .../solution.view/customselect.css | 33 +- .../solution.view/customselect.js | 53 ++- .../3-custom-select/solution.view/index.html | 22 +- .../source.view/customselect.css | 50 +++ .../source.view/customselect.js | 1 + .../3-custom-select/source.view/index.html | 29 +- .../5-custom-events/3-custom-select/task.md | 4 +- 2-ui/5-widgets/5-custom-events/article.md | 329 +++--------------- .../menu-callback.view/index.html | 30 +- .../menu-callback.view/menu.css | 24 ++ .../menu-callback.view/menu.js | 53 +-- .../menu-callback.view/style.css | 20 -- .../menu-event.view/eventMixin.js | 48 --- .../menu-event.view/index.html | 29 +- .../5-custom-events/menu-event.view/menu.css | 24 ++ .../5-custom-events/menu-event.view/menu.js | 53 +-- .../5-custom-events/menu-event.view/style.css | 20 -- .../1-date-selector/solution.view/index.html | 2 +- .../1-date-selector/source.view/index.html | 2 +- .../2-draggable-windows/index.html | 2 +- .../solution.view/index.html | 2 +- .../source.view/index.html | 2 +- .../3-window-manager/solution.view/index.html | 2 +- .../solution.view/index.html | 2 +- .../source.view/index.html | 2 +- .../solution.view/index.html | 2 +- 49 files changed, 620 insertions(+), 894 deletions(-) delete mode 100755 2-ui/5-widgets/5-custom-events/1-voter-events/index.html create mode 100644 2-ui/5-widgets/5-custom-events/1-voter-events/solution.view/voter.js create mode 100644 2-ui/5-widgets/5-custom-events/2-selectable-list-evented/solution.view/listSelect.js create mode 100644 2-ui/5-widgets/5-custom-events/2-selectable-list-evented/solution.view/style.css create mode 100644 2-ui/5-widgets/5-custom-events/3-custom-select/source.view/customselect.css create mode 100644 2-ui/5-widgets/5-custom-events/3-custom-select/source.view/customselect.js create mode 100644 2-ui/5-widgets/5-custom-events/menu-callback.view/menu.css delete mode 100755 2-ui/5-widgets/5-custom-events/menu-callback.view/style.css delete mode 100755 2-ui/5-widgets/5-custom-events/menu-event.view/eventMixin.js create mode 100644 2-ui/5-widgets/5-custom-events/menu-event.view/menu.css delete mode 100755 2-ui/5-widgets/5-custom-events/menu-event.view/style.css 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 index 71e1ce4a..64fa7c07 100644 --- a/1-js/3-writing-js/2-coding-style/code-style.svg +++ b/1-js/3-writing-js/2-coding-style/code-style.svg @@ -1,8 +1,8 @@ - + code-style.svg - Created with Sketch. + Created with bin/sketchtool. 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 index 11e61c9f..e24e7ea1 100755 --- 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 @@ - - + - - - -
- — - 0 - + -
- - - - - - diff --git a/2-ui/5-widgets/5-custom-events/1-voter-events/solution.view/index.html b/2-ui/5-widgets/5-custom-events/1-voter-events/solution.view/index.html index ba822a6a..6b80f167 100755 --- a/2-ui/5-widgets/5-custom-events/1-voter-events/solution.view/index.html +++ b/2-ui/5-widgets/5-custom-events/1-voter-events/solution.view/index.html @@ -2,7 +2,6 @@ - + + @@ -24,67 +25,14 @@ diff --git a/2-ui/5-widgets/5-custom-events/1-voter-events/solution.view/voter.js b/2-ui/5-widgets/5-custom-events/1-voter-events/solution.view/voter.js new file mode 100644 index 00000000..81a9bfde --- /dev/null +++ b/2-ui/5-widgets/5-custom-events/1-voter-events/solution.view/voter.js @@ -0,0 +1,36 @@ +function Voter(options) { + var elem = options.elem; + + var voteElem = elem.querySelector('.vote'); + + elem.onclick = function(event) { + // сам обработчик не меняет голос, он вызывает функцию + if (event.target.closest('.down')) { + voteDecrease(); + } else if (event.target.closest('.up')) { + voteIncrease(); + } + } + + elem.onmousedown = function() { + return false; + }; + + // ----------- методы ------------- + + function voteDecrease() { + setVote(+voteElem.innerHTML - 1); + } + + function voteIncrease() { + setVote(+voteElem.innerHTML + 1); + } + + function setVote(vote) { + voteElem.innerHTML = +vote; + var widgetEvent = new CustomEvent("change", { bubbles: true, detail: +vote }); + elem.dispatchEvent(widgetEvent); + }; + + this.setVote = setVote; +} diff --git a/2-ui/5-widgets/5-custom-events/1-voter-events/task.md b/2-ui/5-widgets/5-custom-events/1-voter-events/task.md index e55c538b..07a130d9 100644 --- a/2-ui/5-widgets/5-custom-events/1-voter-events/task.md +++ b/2-ui/5-widgets/5-custom-events/1-voter-events/task.md @@ -2,24 +2,25 @@ [importance 5] -Добавьте событие в голосовалку, созданную в задаче [](/task/voter), используя jQuery-механизм генерации событий на объекте. +Добавьте событие в голосовалку, созданную в задаче [](/task/voter), используя механизм генерации событий на объекте. -Пусть каждое изменение голоса сопровождается событием `change`: +Пусть каждое изменение голоса сопровождается событием `change` со свойством `detail`, содержащим обновлённое значение: ```js var voter = new Voter({ - elem: $('#voter'), - value: 5 + elem: document.getElementById('voter') }); -$(voter).on('change', function(e) { - alert(e.value); +voter.setVote(5); + +document.getElementById('voter').addEventListener('change', function(e) { + alert(e.detail); // новое значение голоса }); ``` Все изменения голоса должны производиться централизованно, через метод `setVote`, который и генерирует событие. Результат использования кода выше (планируемый): -[iframe border=1 height=60 src="index.html"]. +[iframe border=1 height=60 src="solution"] Исходный документ возьмите из решения задачи [](/task/voter). \ No newline at end of file diff --git a/2-ui/5-widgets/5-custom-events/2-selectable-list-evented/solution.md b/2-ui/5-widgets/5-custom-events/2-selectable-list-evented/solution.md index f09f45fe..e69de29b 100644 --- a/2-ui/5-widgets/5-custom-events/2-selectable-list-evented/solution.md +++ b/2-ui/5-widgets/5-custom-events/2-selectable-list-evented/solution.md @@ -1,8 +0,0 @@ - - -Обратите внимание: - \ No newline at end of file diff --git a/2-ui/5-widgets/5-custom-events/2-selectable-list-evented/solution.view/index.html b/2-ui/5-widgets/5-custom-events/2-selectable-list-evented/solution.view/index.html index 649ca116..a8153c03 100755 --- a/2-ui/5-widgets/5-custom-events/2-selectable-list-evented/solution.view/index.html +++ b/2-ui/5-widgets/5-custom-events/2-selectable-list-evented/solution.view/index.html @@ -2,22 +2,18 @@ - - + + + Клик на элементе выделяет только его.
-Shift+Клик добавляет/убирает элемент из выделенных.
+Ctrl(Cmd)+Клик добавляет/убирает элемент из выделенных.
+Shift+Клик добавляет промежуток от последнего кликнутого к выделению.
-
-
Выберите
-
    + +
    • Плотоядные
    • Травоядные
    • Всеядные
      • -
+
diff --git a/2-ui/5-widgets/5-custom-events/3-custom-select/source.view/customselect.css b/2-ui/5-widgets/5-custom-events/3-custom-select/source.view/customselect.css new file mode 100644 index 00000000..ff8ae390 --- /dev/null +++ b/2-ui/5-widgets/5-custom-events/3-custom-select/source.view/customselect.css @@ -0,0 +1,50 @@ +.customselect { + width: 200px; + font-size: 14px; + display: inline-block; +} + +.customselect .title { + height: 20px; + border: 2px groove #ADD8E6; + background: white; + width: 200px; + box-sizing: border-box; + padding: 2px; + line-height: 14px; + cursor: pointer; + text-align: left; +} + +.customselect li { + padding: 2px; + cursor: pointer; +} + +.customselect li:nth-child(even) { + background-color: #f0f8ff; +} + +.customselect li:hover { + background-color: #7fffd4; +} + +.customselect ul { + list-style: none; + margin: 0; + padding: 0; + display: none; + + position: absolute; + z-index: 1000; + background: white; + width: 200px; + border-bottom: 1px solid #add8e6; + border-left: 1px solid #add8e6; + border-right: 1px solid #add8e6; + box-sizing: border-box; +} + +.customselect.open ul { + display: block; +} diff --git a/2-ui/5-widgets/5-custom-events/3-custom-select/source.view/customselect.js b/2-ui/5-widgets/5-custom-events/3-custom-select/source.view/customselect.js new file mode 100644 index 00000000..c6fb05b4 --- /dev/null +++ b/2-ui/5-widgets/5-custom-events/3-custom-select/source.view/customselect.js @@ -0,0 +1 @@ +// ваш код CustomSelect \ No newline at end of file diff --git a/2-ui/5-widgets/5-custom-events/3-custom-select/source.view/index.html b/2-ui/5-widgets/5-custom-events/3-custom-select/source.view/index.html index 826163f7..5119c7ee 100755 --- a/2-ui/5-widgets/5-custom-events/3-custom-select/source.view/index.html +++ b/2-ui/5-widgets/5-custom-events/3-custom-select/source.view/index.html @@ -2,54 +2,51 @@ Селект - + +
Последний результат: ...
- -
-
Выберите
-
    + +
    • Птицы
    • Рыбы
    • Звери
    • Динозавры
    • Одноклеточные
      • -
+
-
Выберите
-
    + +
    • Плотоядные
    • Травоядные
    • Всеядные
      • -
+
- + \ No newline at end of file diff --git a/2-ui/5-widgets/5-custom-events/3-custom-select/task.md b/2-ui/5-widgets/5-custom-events/3-custom-select/task.md index 785c9f8b..49aac1a2 100644 --- a/2-ui/5-widgets/5-custom-events/3-custom-select/task.md +++ b/2-ui/5-widgets/5-custom-events/3-custom-select/task.md @@ -8,12 +8,12 @@ Например: -[iframe src="solution" border="1" height="200" newwin] +[iframe src="solution" height="200"] В примере выше два селекта, чтобы можно было проверить процесс открытия-закрытия. diff --git a/2-ui/5-widgets/5-custom-events/article.md b/2-ui/5-widgets/5-custom-events/article.md index 87b3a24f..ddbdd7c9 100644 --- a/2-ui/5-widgets/5-custom-events/article.md +++ b/2-ui/5-widgets/5-custom-events/article.md @@ -1,6 +1,6 @@ # Коллбэки и события на компонентах -Компоненты, хоть и каждый сам по себе, обычно интегрированы друг с другом. +Компоненты, хоть и каждый сам по себе, обычно как-то общаются с остальной частью страницы Есть несколько способов, при помощи которых компоненты сообщают друг другу о важных событиях, которые в них произошли. @@ -15,8 +15,8 @@ ```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": "Пончик", "cake": "Пирожное", @@ -34,321 +34,84 @@ function showSelected(href) { */!* ``` -В коде меню нужно будет вызывать её, как-то так: +В коде меню нужно будет вызывать её, например так: ```js ... - function onItemClick(e) { - e.preventDefault(); -*!* - var onselect = options.onselect; - if (onselect) { - onselect(e.currentTarget.getAttribute('href').slice(1)); - } -*/!* + function select(link) { + options.onselect(link.getAttribute('href').slice(1)); + ... } ... ``` -Демо: +Полный пример: [codetabs src="menu-callback" height="180"] ## Свои события -Оповещение через коллбэки -- это примерный аналог назначения обработчика через `onсвойство` для DOM-элементов. +Как мы уже знаем, в современных браузерах DOM-элементы могут [генерировать поизвольные события](/dispatch-events) при помощи встроенных методов, а в IE8- это возможно с использованием фреймворка, к примеру, jQuery. -Да, он работает, но чтобы можно было назначать сколько угодно обработчиков в любой момент, нужна полноценная поддержка событий, то есть аналог `addEventListener`. +Воспользуемся ими, чтобы корневой элемент меню генерировал событие, которое мы назовём `select`, при выборе элемента, и передавал в объект события выбранное значение. -Поддержка событий для компонентов будет выглядеть так: +Для этого модифицируем функцию `select`: + +```js +function Menu(options) { + ... + + function select(link) { +*!* + var widgetEvent = new CustomEvent("select", { + bubbles: true, + // detail - стандартное свойство CustomEvent для произвольных данных + detail: link.getAttribute('href').slice(1) + }); + elem.dispatchEvent(widgetEvent); +*/!* + } + + ... +} +``` + +Код, который заинтересован в том, чтобы узнавать, что выбрано в меню, подписывается на событие `select` его корневого элемента: ```js var menu = new Menu(...); -// любой код может подписаться на событие "select" -menu.on("select", function(item) { - // при выборе пункта меню сработает этот обработчик - alert("Выбран элемент " + item); +var elem = menu.getElem(); + +elem.addEventListener('select', function(event) { + alert(event.detail); }); ``` -Код, который заинтересован в том, чтобы узнавать, что происходит с меню, подписывается на нужные события вызовом `menu.on(имя события, обработчик)`. +Вместо `detail` можно было бы выбрать и другое название свойства, но тогда нужно позаботиться о том, чтобы оно не конфликтовало со стандартными. Кроме того, в конструкторе `CustomEvent` разрешено только `detail`, другое свойство понадобилось бы присваивать в отдельной строке. -Далее `Menu` при наступлении события вызывает обработчик методом `trigger`, при необходимости передавая ему важные данные в качестве аргументов, вот так: +Полный пример: -```js -function Menu(options) { - var self = this; - -*!* - // ... при клике на item - сгенерировать событие (trigger) - function onItemClick(e) { - e.preventDefault(); - - self.trigger("select", e.currentTarget.getAttribute('href').slice(1)); - } -*/!* - -} -``` - -Обратим внимание -- события будут генерироваться не на элементе `
`, а на объекте `new Menu`. Сейчас мы разберём методы, которые для этого нужны. - -## Методы on, off и trigger - -Для поддержки событий в любой объект достаточно добавить три метода: `on`, `off` и `trigger`, которые перечислены ниже в свойствах `EventMixin`: - -```js -var EventMixin = { - - /** - * Подписка на событие - * Использование: - * menu.on('select', function(item) { ... } - */ - on: function(eventName, handler) { - if (!this._eventHandlers) this._eventHandlers = {}; - if (!this._eventHandlers[eventName]) { - this._eventHandlers[eventName] = []; - } - this._eventHandlers[eventName].push(handler); - }, - - /** - * Прекращение подписки - * menu.off('select', handler) - */ - off: function(eventName, handler) { - var handlers = this._eventHandlers && this._eventHandlers[eventName]; - if (!handlers) return; - for(var i=0; i -
  • Вызов `obj.on(event, handler)` создаёт свойство `obj._eventHandlers`, если его ещё нет, и сохраняет в нём обработчик: `obj._eventHandlers[event].push(handler)`.
    • -
  • Далее вызов `obj.trigger(event, ...)` получает обработчики из `obj._eventHandlers[event]` и выполняет их один за другим.
    • -
  • Вызов `obj.off(event, handler)` удаляет обработчик из `obj._eventHandlers`.
    • - -[/smart] - -## Меню с событиями - -Для перехода на события в меню, нужно: -
      -
    1. Добавить методы из `EventMixin` в объект меню. Их можно скопировать либо в объект, либо в прототип.
      2. -
    2. Вместо вызова коллбэка `onselect` -- генерируем событие вызовом `trigger('select', значение)`.
      3. -
    - -Код: - -```js -function Menu(options) { - var elem; - var self = this; - -*!* - for(var method in EventMixin) { - this[method] = EventMixin[method] - } -*/!* - - function onItemClick(e) { - e.preventDefault(); - -*!* - self.trigger("select", currentTarget.getAttribute('href').slice(1)); -*/!* - } - - // другие методы без изменений -} -``` - -Во внешнем коде: - -```js -var menu = new Menu(...) -menu.on('select', function(value) { - alert('выбрано значение ' + value); -}); -``` - -Результат: [codetabs src="menu-event"] -## События при помощи jQuery +[warn header="Внимание, инкапсуляция!"] +Очень важно, что внешний код ставит обработчик на корневой элемент, но не на внутренние элементы меню. -Фреймворк jQuery предоставляет свои средства для генерации произвольных событий. +Строго говоря, он вообще не знает про то, как устроено меню, есть ли там ссылки и какие, или там вообще всё реализовано через кнопки. -Метод [trigger](http://api.jquery.com/trigger/) позволяет генерировать любое событие на элементе и он же -- работает на любом объекте, "обёрнутом" в jQuery: `$(...)`. +Меню для него -- "чёрный ящик". Корневой элемент -- точка доступа к его функционалу. Событие -- не то, которое произошло на ссылке, а "переработанный вариант", интерпретация действия со стороны меню. -Синтаксис для генерации события на элементе: - -```js -elem.trigger(event); -``` - -Объект `event` должен содержать свойство `type` -- тип события (произвольный) и любые другие свойства, которые будут переданы обработчикам. - -Например: - -```js -$('body').on('hello', function(e) { - alert(e.user) -}); - -*!* -$('body').trigger({ - type: 'hello', // тип события - user: 'Вася', // любые данные -}); -*/!* - -$('body').off('hello'); -``` - -Есть также альтернативный синтаксис: - -```js -elem.trigger(eventType, args); -``` - -
      -
    • `eventType` -- тип события (строка)
      • -
    • `args` -- массив аргументов, которые будут переданы обработчику.
      • -
    - -Пример использования: - -```js -$('body').on('hello', function(e, user) { - alert(user) -}); - -*!* -// аргументы - в виде массива -$('body').trigger("hello", ["Вася"]); -*/!* - -$('body').off('hello'); -``` - -Как правильно, предпочтителен первый синтаксис: `elem.trigger(event)`, поскольку он гораздо гибче, можно указывать любые свойства в любом порядке. - -События, сгенерированные таким образом на элементах, всплывают и обрабатываются jQuery наравне с обычными браузерными событиями. - -**Для объекта всё точно так же, как и для элемента:** - -```js -//+ run -var obj = {}; // произвольный объект - -$(obj).on('hello', function(e) { - alert(e.user) -}); - -$(obj).trigger({ - type: 'hello', - user: 'Вася' -}); -``` - -Конечно, события на объектах не всплывают, всё-таки "всплытие" -- это привилегия DOM. - -Внутри jQuery делает в точности то же самое, что `EventMixin` -- вызов `on(...)` добавляет обработчик добавляются в "скрытое" свойство объекта, из которого они потом читаются и выполняются вызовом `trigger(...)`. - -Это свойство можно легко увидеть: - -```js -//+ run -var obj = {}; - -$(obj).on('hello', function(e) { /* ... */ }); - -// свойство называется примерно так: jQuery19105266267273109406 -// оно имеет такое псевдослучайное название, -// чтобы не перезаписать "настоящие", важные свойства объекта -for(var prop in obj) alert(prop); -``` - -Технически, можно генерировать событие и на корневом элементе меню `
    ` и на JavaScript-объекте `new Menu` (`this` внутри конструктора). Однако, обычно используют именно объект: считается, что DOM компонента -- это его сугубо личное дело. Он может в любой момент поменяться и быть пересоздан "с нуля", если потребуется. Залезать в него снаружи и ставить какие-то обработчики никто не имеет права. +Такое правило позволяет нам не опасаться проблем при оптимизации, расширении и даже полной переделке DOM-структуры меню. Коль скоро события и методы сохраняются, внешний код будет работать как прежде. +Ещё раз -- внешний код не имеет права залезать внутрь DOM-структуры меню, ставить там обработчики и так далее. +[/warn] ## Итого Для того, чтобы внешний код мог узнавать о важных событиях, произошедших внутри компоненты, используются:
    • Коллбэки -- функции, которые передаются "снаружи" при создании компонента, и которые он обязуется вызвать при наступлении событий.
      • -
    • События -- компонент генерирует их при помощи вызова `trigger` (`EventMixin`, jQuery или другой фреймворк), а внешний код ставит обработчики при помощи `on`.
      • +
    • События -- компонент генерирует их на корневом элементе при помощи `dispatchEvent`, а внешний код ставит обработчики при помощи `addEventListener`. Такие события всплывают, если указан флаг `bubbles`, поэтому можно использовать с ними делегирование.
    -Можно использовать и то и другое одновременно. Например, виджеты фреймворка jQuery UI позволяют передать при создании коллбэк `onselect`, и вместе с тем генерируют событие. -Далее, для простоты, в примерах и задачах мы будем использовать для событий методы `on/off/trigger` из jQuery. Если jQuery не нужен -- всегда можно использовать `EventMixin` или какой-либо другой фреймворк. - - -[libs] -event-mixin.js -[/libs] \ No newline at end of file diff --git a/2-ui/5-widgets/5-custom-events/menu-callback.view/index.html b/2-ui/5-widgets/5-custom-events/menu-callback.view/index.html index 529c2700..9e542343 100755 --- a/2-ui/5-widgets/5-custom-events/menu-callback.view/index.html +++ b/2-ui/5-widgets/5-custom-events/menu-callback.view/index.html @@ -2,9 +2,9 @@ - - + + @@ -15,10 +15,15 @@
    + @@ -26,22 +31,21 @@ diff --git a/2-ui/5-widgets/5-custom-events/menu-callback.view/menu.css b/2-ui/5-widgets/5-custom-events/menu-callback.view/menu.css new file mode 100644 index 00000000..73515917 --- /dev/null +++ b/2-ui/5-widgets/5-custom-events/menu-callback.view/menu.css @@ -0,0 +1,24 @@ + +.menu ul { + display: none; + margin: 0; +} + +.menu .title { + font-weight: bold; + cursor: pointer; +} + +.menu .title:before { + content: '▶'; + padding-right: 6px; + color: green; +} + +.menu.open ul { + display: block; +} + +.menu.open .title:before { + content: '▼'; +} \ No newline at end of file diff --git a/2-ui/5-widgets/5-custom-events/menu-callback.view/menu.js b/2-ui/5-widgets/5-custom-events/menu-callback.view/menu.js index 323c4906..d11120b4 100755 --- a/2-ui/5-widgets/5-custom-events/menu-callback.view/menu.js +++ b/2-ui/5-widgets/5-custom-events/menu-callback.view/menu.js @@ -7,48 +7,51 @@ 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; - - var listHtml = options.listTemplate({items: options.items}); - elem.append(listHtml); - } - - function onItemClick(e) { - e.preventDefault(); - - var onselect = options.onselect; - if (onselect) { - onselect(e.currentTarget.getAttribute('href').slice(1)); } } - function onTitleClick(e) { - toggle(); + function renderItems() { + if (elem.querySelector('ul')) return; + + var listHtml = options.listTemplate({items: options.items}); + elem.insertAdjacentHTML("beforeEnd", listHtml); + } + + function select(link) { + options.onselect(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(); }; @@ -56,4 +59,4 @@ function Menu(options) { this.toggle = toggle; this.close = close; this.open = open; -} \ No newline at end of file +} diff --git a/2-ui/5-widgets/5-custom-events/menu-callback.view/style.css b/2-ui/5-widgets/5-custom-events/menu-callback.view/style.css deleted file mode 100755 index b9859671..00000000 --- a/2-ui/5-widgets/5-custom-events/menu-callback.view/style.css +++ /dev/null @@ -1,20 +0,0 @@ - -.menu ul { - display: none; - margin: 0; -} - -.menu .title { - font-weight: bold; - cursor: pointer; - background: url(https://js.cx/clipart/arrow-right.png) left center no-repeat; - padding-left: 18px; -} - -.menu.open ul { - display: block; -} - -.menu.open .title { - background-image: url(https://js.cx/clipart/arrow-down.png); -} \ No newline at end of file diff --git a/2-ui/5-widgets/5-custom-events/menu-event.view/eventMixin.js b/2-ui/5-widgets/5-custom-events/menu-event.view/eventMixin.js deleted file mode 100755 index d344baee..00000000 --- a/2-ui/5-widgets/5-custom-events/menu-event.view/eventMixin.js +++ /dev/null @@ -1,48 +0,0 @@ -var EventMixin = { - - /** - * Подписка на событие - * Использование: - * menu.on('select', function(item) { ... } - */ - on: function(eventName, handler) { - if (!this._eventHandlers) this._eventHandlers = {}; - if (!this._eventHandlers[eventName]) { - this._eventHandlers[eventName] = []; - } - this._eventHandlers[eventName].push(handler); - }, - - /** - * Прекращение подписки - * menu.off('select', handler) - */ - off: function(eventName, handler) { - var handlers = this._eventHandlers && this._eventHandlers[eventName]; - if (!handlers) return; - for(var i=0; i - - + - + @@ -18,8 +17,8 @@ @@ -27,21 +26,21 @@ diff --git a/2-ui/5-widgets/5-custom-events/menu-event.view/menu.css b/2-ui/5-widgets/5-custom-events/menu-event.view/menu.css new file mode 100644 index 00000000..73515917 --- /dev/null +++ b/2-ui/5-widgets/5-custom-events/menu-event.view/menu.css @@ -0,0 +1,24 @@ + +.menu ul { + display: none; + margin: 0; +} + +.menu .title { + font-weight: bold; + cursor: pointer; +} + +.menu .title:before { + content: '▶'; + padding-right: 6px; + color: green; +} + +.menu.open ul { + display: block; +} + +.menu.open .title:before { + content: '▼'; +} \ No newline at end of file diff --git a/2-ui/5-widgets/5-custom-events/menu-event.view/menu.js b/2-ui/5-widgets/5-custom-events/menu-event.view/menu.js index e1bd46d0..61d489bc 100755 --- a/2-ui/5-widgets/5-custom-events/menu-event.view/menu.js +++ b/2-ui/5-widgets/5-custom-events/menu-event.view/menu.js @@ -1,10 +1,5 @@ function Menu(options) { var elem; - var self = this; - - for(var method in EventMixin) { - this[method] = EventMixin[method] - } function getElem() { if (!elem) render(); @@ -12,45 +7,55 @@ 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); + elem.insertAdjacentHTML("beforeEnd", listHtml); } - function onItemClick(e) { - e.preventDefault(); - - self.trigger('select', e.currentTarget.getAttribute('href').slice(1)); - } - - function onTitleClick(e) { - toggle(); + function select(link) { + var widgetEvent = new CustomEvent("select", { + bubbles: true, + detail: link.getAttribute('href').slice(1) + }); + elem.dispatchEvent(widgetEvent); } 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(); }; diff --git a/2-ui/5-widgets/5-custom-events/menu-event.view/style.css b/2-ui/5-widgets/5-custom-events/menu-event.view/style.css deleted file mode 100755 index b9859671..00000000 --- a/2-ui/5-widgets/5-custom-events/menu-event.view/style.css +++ /dev/null @@ -1,20 +0,0 @@ - -.menu ul { - display: none; - margin: 0; -} - -.menu .title { - font-weight: bold; - cursor: pointer; - background: url(https://js.cx/clipart/arrow-right.png) left center no-repeat; - padding-left: 18px; -} - -.menu.open ul { - display: block; -} - -.menu.open .title { - background-image: url(https://js.cx/clipart/arrow-down.png); -} \ No newline at end of file diff --git a/2-ui/5-widgets/8-widget-tasks-2/1-date-selector/solution.view/index.html b/2-ui/5-widgets/8-widget-tasks-2/1-date-selector/solution.view/index.html index 0b3f8f65..960300f5 100755 --- a/2-ui/5-widgets/8-widget-tasks-2/1-date-selector/solution.view/index.html +++ b/2-ui/5-widgets/8-widget-tasks-2/1-date-selector/solution.view/index.html @@ -3,7 +3,7 @@ - + diff --git a/2-ui/5-widgets/8-widget-tasks-2/1-date-selector/source.view/index.html b/2-ui/5-widgets/8-widget-tasks-2/1-date-selector/source.view/index.html index 026f69a6..3f866331 100755 --- a/2-ui/5-widgets/8-widget-tasks-2/1-date-selector/source.view/index.html +++ b/2-ui/5-widgets/8-widget-tasks-2/1-date-selector/source.view/index.html @@ -3,7 +3,7 @@ - + diff --git a/2-ui/5-widgets/8-widget-tasks-2/2-draggable-windows/index.html b/2-ui/5-widgets/8-widget-tasks-2/2-draggable-windows/index.html index fa71294b..ee97c79f 100755 --- a/2-ui/5-widgets/8-widget-tasks-2/2-draggable-windows/index.html +++ b/2-ui/5-widgets/8-widget-tasks-2/2-draggable-windows/index.html @@ -3,7 +3,7 @@ - +