diff --git a/js/clipboard.js b/js/clipboard.js index 7811db2..f9b255d 100644 --- a/js/clipboard.js +++ b/js/clipboard.js @@ -185,6 +185,8 @@ Clipboard.prototype = { this[knob].addEventListener(this.START, function(origEvt) { this[knob].classList.add('moving'); + this.optionsEl.classList.add('moving'); + origEvt.stopImmediatePropagation(); origEvt.preventDefault(); @@ -192,7 +194,12 @@ Clipboard.prototype = { window.addEventListener(this.MOVE, mover); window.addEventListener(this.END, function() { window.removeEventListener(this.MOVE, mover); - this[knob].classList.remove('moving'); + if (this[knob]) { + this[knob].classList.remove('moving'); + } + if (this.optionsEl) { + this.optionsEl.classList.remove('moving'); + } }.bind(this)); }.bind(this)); }, diff --git a/js/src/clipboard.js b/js/src/clipboard.js index ab3df6e..7451213 100644 --- a/js/src/clipboard.js +++ b/js/src/clipboard.js @@ -184,6 +184,8 @@ Clipboard.prototype = { this[knob].addEventListener(this.START, function(origEvt) { this[knob].classList.add('moving'); + this.optionsEl.classList.add('moving'); + origEvt.stopImmediatePropagation(); origEvt.preventDefault(); @@ -191,7 +193,12 @@ Clipboard.prototype = { window.addEventListener(this.MOVE, mover); window.addEventListener(this.END, function() { window.removeEventListener(this.MOVE, mover); - this[knob].classList.remove('moving'); + if (this[knob]) { + this[knob].classList.remove('moving'); + } + if (this.optionsEl) { + this.optionsEl.classList.remove('moving'); + } }.bind(this)); }.bind(this)); }, diff --git a/style/clipboard.css b/style/clipboard.css index d499f48..f2d11c1 100644 --- a/style/clipboard.css +++ b/style/clipboard.css @@ -20,11 +20,6 @@ .knob.moving span { box-shadow: inset 0 0 2px rgb(0,0,0,0.5), 0 0 3px rgb(0,0,0,0.4); } -/* -.knob.left { - margin-top: -18px; -} -*/ #clipboard-menu { position: absolute; @@ -36,6 +31,10 @@ border-radius: 0.2rem 0.2rem 0.2rem 0.2rem; } +#clipboard-menu.moving { + opacity: 0.2; +} + #clipboard-menu li { float: left; height: 3.4rem;