Merge pull request #1868 from JimishF/master

lmccart · web-flow · commit 15ef1ef7d068 · 2017-05-10T05:03:27.000-07:00
Fixed select() issue with existing dropdown
diff --git a/lib/addons/p5.dom.js b/lib/addons/p5.dom.js
@@ -188,7 +188,10 @@
       return converted;
     } else if (elt.tagName === "VIDEO" || elt.tagName === "AUDIO") {
       return new p5.MediaElement(elt);
-    } else {
+    } else if ( elt.tagName === "SELECT" ){
+      return createSelect( new p5.Element(elt) );
+    } 
+    else {
       return new p5.Element(elt);
     }
   }
@@ -525,9 +528,11 @@
 
   /**
    * Creates a dropdown menu &lt;select&gt;&lt;/select&gt; element in the DOM.
+   * It also helps to assign select-box methods to p5.Element when selecting existing select box
    * @method createSelect
-   * @param {boolean} [multiple] true if dropdown should support multiple selections
-   * @return {Object|p5.Element} pointer to p5.Element holding created node
+   * @param {boolean} [multiple] true if dropdown should support multiple selections OR
+   * @param {Object|p5.Element} if wrapping methods to existing select
+   * @return {Object|p5.Element} pointer to p5.Element holding created or existing node
    * @example
    * <div><code>
    * var sel;
@@ -550,12 +555,20 @@
    * }
    * </code></div>
    */
-  p5.prototype.createSelect = function(mult) {
-    var elt = document.createElement('select');
-    if (mult){
-      elt.setAttribute('multiple', 'true');
+
+  p5.prototype.createSelect = function() {
+    var elt,self;
+    var arg = arguments[0];
+    if( typeof arg === 'object' && arg.elt.nodeName == 'SELECT' ){
+      self = arg;
+      elt = this.elt = arg.elt;
+    }else{
+      elt = document.createElement('select');
+      if( arg && typeof arg === 'boolean' ){
+        elt.setAttribute('multiple', 'true');
+      }
+      self = addElement(elt, this);
     }
-    var self = addElement(elt, this);
     self.option = function(name, value){
       var opt = document.createElement('option');
       opt.innerHTML = name;
@@ -575,7 +588,7 @@
         }
         return this;
       }else{
-        if (mult){
+        if (arg){
           for (var i = 0; i < this.elt.selectedOptions.length; i++){
             arr.push(this.elt.selectedOptions[i].value);
           }
diff --git a/test/manual-test-examples/addons/p5.dom/selectbox_test/index.html b/test/manual-test-examples/addons/p5.dom/selectbox_test/index.html
@@ -0,0 +1,10 @@
+<html>
+  <head>
+    <script language="javascript" type="text/javascript" src="../../../../../lib/p5.js"></script>
+    <script language="javascript" type="text/javascript" src="../../../../../lib/addons/p5.dom.js"></script>
+    <script language="javascript" src="sketch.js"></script>
+  </head>
+
+  <body>
+  </body>
+</html>
diff --git a/test/manual-test-examples/addons/p5.dom/selectbox_test/sketch.js b/test/manual-test-examples/addons/p5.dom/selectbox_test/sketch.js
@@ -0,0 +1,15 @@
+function setup() {
+ // Created a dropdown in DOM 
+  var dropdown = createSelect();
+    dropdown.option('apple');
+    dropdown.option('mango');
+    dropdown.id("fruitlist");
+  console.log( dropdown ); 
+
+// Selected a dropdown from DOM
+  var dropdown = select('#fruitlist');
+    dropdown.option('applex');
+    dropdown.option('mangox');
+  console.log( dropdown );
+
+}
