assuring that just one droplet is active

javascript/src/DragAndDrop.js

@@ -18,7 +18,7 @@ var QfqNS = QfqNS || {};
     'use strict';
 
     /**
-     * Dragging and dropping area!
+     *
      */
     n.DragAndDrop = function ($hook) {
         this.$container = $hook;
@@ -267,5 +267,4 @@ var QfqNS = QfqNS || {};
         }
     };
 
-
 })(QfqNS);
\ No newline at end of file

javascript/src/Droplet.js

@@ -21,8 +21,11 @@ var QfqNS = QfqNS || {};
         this.position = {};
         this._$container = {};
         this.visible = false;
+        this.eventEmitter = new EventEmitter();
     };
 
+    n.Droplet.prototype.on = n.EventEmitter.onMixin;
+
     n.Droplet.prototype.setTrigger = function($trigger) {
         this._$trigger = $trigger;
         var that = this;
@@ -54,8 +57,7 @@ var QfqNS = QfqNS || {};
             position: 'absolute',
             zIndex: '100',
             top: this.position.top + 10 + "px",
-            left: this.position.left + "px",
-            backgroundColor: "#fff"
+            left: this.position.left + "px"
         });
 
         $(document.body).append($container);
@@ -73,8 +75,22 @@ var QfqNS = QfqNS || {};
     };
 
     n.Droplet.prototype.toggleDroplet = function () {
-        this._$container.toggle();
-        this.visible = !this.visible;
+        if (this.visible) {
+            this._$container.hide();
+            this.visible = false;
+        } else {
+            this.eventEmitter.emitEvent('droplet.toggle',
+                n.EventEmitter.makePayload(this, "toggle"));
+            this._$container.show();
+            this.visible = true;
+        }
+    };
+
+    n.Droplet.prototype.hideDroplet = function() {
+        if (this.visible) {
+            this._$container.hide();
+            this.visible = false;
+        }
     };
 
 })(QfqNS);
\ No newline at end of file

javascript/src/DropletController.js

+/**
+ * @author Benjamin Baer <benjamin.baer@math.uzh.ch>
+ */
+/* global $ */
+/* global EventEmitter */
+/* @depend QfqEvents.js */
+/* @depend Alert.js */
+/* @depend Droplet.js */
+/**
+ * Qfq Namespace
+ *
+ * @namespace QfqNS
+ */
+var QfqNS = QfqNS || {};
+(function (n) {
+    'use strict';
+
+    n.DropletController = function() {
+        this.droplets = [];
+        this.eventEmitter = new EventEmitter();
+    };
+
+    n.DropletController.prototype.setUpDroplets = function() {
+        var that = this;
+
+        $(".qfq-droplet").each(function() {
+            var droplet = new QfqNS.Droplet();
+            droplet.setTrigger($(this));
+            droplet.setContainer(droplet.createContainerBellowTrigger());
+            that.droplets.push(droplet);
+            droplet.on('droplet.toggle', function() { that.hideDroplets(); });
+        });
+    };
+
+    n.DropletController.prototype.getDroplet = function(reference) {
+        if (reference < this.droplets.length && reference >= 0) {
+            return this.droplets[reference];
+        }
+    };
+
+    n.DropletController.prototype.hideDroplets = function() {
+        for(var i=0; i < this.droplets.length; i++) {
+            this.droplets[i].hideDroplet();
+        }
+    };
+
+})(QfqNS);
\ No newline at end of file

less/qfq-bs.css.less

@@ -499,9 +499,10 @@ select.qfq-locked:invalid {
 
 .qfq-droplet-container {
   position: absolute;
-  border: 2px solid #666;
-  border-radius: 8px;
+  border: 2px solid #25adf1;
+  border-radius: 6px;
   padding: 15px;
+  background-image: linear-gradient(to bottom,#d9edf7 0,#b9def0 100%);
 }
 
 .qfq-droplet-container:before {
@@ -510,14 +511,14 @@ select.qfq-locked:invalid {
   left: 10px;
   top: -10px;
   border: 5px solid;
-  border-color: transparent #666 #666 transparent;
+  border-color: transparent #25adf1 #25adf1 transparent;
 }
 
 .qfq-droplet-container:after {
   content: ' ';
   position: absolute;
-  left: 19px;
+  left: 20px;
   top: -10px;
   border: 5px solid;
-  border-color: transparent transparent #666 #666;
+  border-color: transparent transparent #25adf1 #25adf1;
 }
\ No newline at end of file

mockup/droplet.html

@@ -11,8 +11,6 @@
     <link rel="stylesheet" href="../css/jqx.bootstrap.css">
     <link rel="stylesheet" href="../extension/Resources/Public/Css/qfq-bs.css">
     <title>Input Mode Switcher</title>
-
-
 </head>
 <body>
 <div class="container-fluid">
@@ -68,7 +66,6 @@
 <script src="../js/EventEmitter.min.js"></script>
 <script src="../js/qfq.debug.js"></script>
 
-
 <script type="text/javascript">
     $(function () {
         var qfqPage = new QfqNS.QfqPage({