moving styles for options

KevinGrandon · Mar 16, 2013 · a362f89 · a362f89
1 parent 0933b22
commit a362f89
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 7 deletions.
diff --git a/js/clipboard.js b/js/clipboard.js
@@ -185,14 +185,21 @@ Clipboard.prototype = {
     this[knob].addEventListener(this.START, function(origEvt) {
 
       this[knob].classList.add('moving');
+      this.optionsEl.classList.add('moving');
+
       origEvt.stopImmediatePropagation();
       origEvt.preventDefault();
 
       var mover = this.getKnobMover(name);
       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
@@ -184,14 +184,21 @@ Clipboard.prototype = {
     this[knob].addEventListener(this.START, function(origEvt) {
 
       this[knob].classList.add('moving');
+      this.optionsEl.classList.add('moving');
+
       origEvt.stopImmediatePropagation();
       origEvt.preventDefault();
 
       var mover = this.getKnobMover(name);
       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
@@ -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;