From 8193d4b78fefa539a7564af4be3cc26ff2aa646e Mon Sep 17 00:00:00 2001
From: surunzi <surunzi@foxmail.com>
Date: Thu, 12 May 2016 19:02:11 +0800
Subject: [PATCH] Fix: Elements select

---
 src/Elements/Elements.es6   | 38 +++++++++++++++++++++----------------
 src/Elements/Highlight.scss |  4 ++++
 src/Elements/Select.es6     |  4 +++-
 test/index.html             |  1 +
 4 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/src/Elements/Elements.es6 b/src/Elements/Elements.es6
index 6369d1e..cf448a9 100644
--- a/src/Elements/Elements.es6
+++ b/src/Elements/Elements.es6
@@ -15,6 +15,7 @@ export default class Elements extends Tool
         this._tpl = require('./Elements.hbs');
         this._rmDefComputedStyle = true;
         this._highlightElement = false;
+        this._selectElement = false;
     }
     init($el, parent)
     {
@@ -52,7 +53,6 @@ export default class Elements extends Tool
     _bindEvent()
     {
         var self = this,
-            parent = this._parent,
             select = this._select;
 
         this._$el.on('click', '.eruda-child', function ()
@@ -95,23 +95,10 @@ export default class Elements extends Tool
         $bottomBar.on('click', '.eruda-back', () => this._back())
                   .on('click', '.eruda-refresh', () => this._render())
                   .on('click', '.eruda-highlight', () => this._toggleHighlight())
-                  .on('click', '.eruda-select', () =>
-                  {
-                      parent.hide();
-                      if (this._highlightElement) this._toggleHighlight();
-                      this._render();
-
-                      this._select.enable();
-                  })
+                  .on('click', '.eruda-select', () => this._toggleSelect())
                   .on('click', '.eruda-reset', () => this._setEl(this._htmlEl));
 
-        select.on('select', (target) =>
-        {
-            parent.show();
-
-            if (!this._highlightElement) this._toggleHighlight();
-            this._setEl(target);
-        });
+        select.on('select', (target) => this._setEl(target));
     }
     _toggleAllComputedStyle()
     {
@@ -129,11 +116,30 @@ export default class Elements extends Tool
     }
     _toggleHighlight()
     {
+        if (this._selectElement) return;
+
         this._$el.find('.eruda-highlight').toggleClass('eruda-active');
         this._highlightElement = !this._highlightElement;
 
         this._render();
     }
+    _toggleSelect()
+    {
+        var select = this._select;
+
+        this._$el.find('.eruda-select').toggleClass('eruda-active');
+        if (!this._selectElement && !this._highlightElement) this._toggleHighlight();
+        this._selectElement = !this._selectElement;
+
+        if (this._selectElement)
+        {
+            select.enable();
+            this._parent.hide();
+        } else
+        {
+            select.disable();
+        }
+    }
     _setEl(el)
     {
         this._curEl = el;
diff --git a/src/Elements/Highlight.scss b/src/Elements/Highlight.scss
index 5c08ed9..6f10fc8 100644
--- a/src/Elements/Highlight.scss
+++ b/src/Elements/Highlight.scss
@@ -5,6 +5,10 @@
     right: 0;
     opacity: .5;
     z-index: -100;
+    pointer-events: none !important;
+    * {
+        pointer-events: none !important;
+    }
     .margin {
         position: absolute;
         background: #e8925b;
diff --git a/src/Elements/Select.es6 b/src/Elements/Select.es6
index c71e639..b1db1f1 100644
--- a/src/Elements/Select.es6
+++ b/src/Elements/Select.es6
@@ -10,7 +10,9 @@ export default class Select extends util.Emitter
 
         this._listener = function (e)
         {
-            self.disable().emit('select', e.target);
+            self.emit('select', e.target);
+
+            e.preventDefault();
 
             return false;
         };
diff --git a/test/index.html b/test/index.html
index 7e70646..c0fdf5a 100644
--- a/test/index.html
+++ b/test/index.html
@@ -27,6 +27,7 @@
         <div>
             <img src="http://7xn2zy.com1.z0.glb.clouddn.com/blog_elf.jpg">
         </div>
+        <button>Test</button>
         <script>
             function req(url)
             {