renovations

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();
   };