flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From aha...@apache.org
Subject [19/36] git commit: [flex-asjs] [refs/heads/develop] - almost have the dropdownlist working in JS
Date Tue, 28 Jul 2015 18:40:45 GMT
almost have the dropdownlist working in JS


Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/2eda7491
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/2eda7491
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/2eda7491

Branch: refs/heads/develop
Commit: 2eda74913c91df1467c1c801bf61a4a11e8c2221
Parents: c204976
Author: Alex Harui <aharui@apache.org>
Authored: Mon Jul 20 12:04:19 2015 -0700
Committer: Alex Harui <aharui@apache.org>
Committed: Mon Jul 20 12:04:19 2015 -0700

----------------------------------------------------------------------
 examples/DataBindingTest/src/MyInitialView.mxml |   2 +-
 .../as/src/org/apache/flex/utils/CSSUtils.as    |  36 +++--
 .../org/apache/flex/utils/SolidBorderUtil.as    |  80 +++++++++-
 frameworks/projects/HTML/as/defaults.css        |  42 +++++
 .../org/apache/flex/html/beads/CSSButtonView.as |   2 +-
 .../apache/flex/html/beads/CSSTextButtonView.as |   2 +-
 .../flex/html/beads/SingleLineBorderBead.as     |  77 +++++++--
 .../js/src/org/apache/flex/html/DropDownList.js | 160 +++++++++++++++----
 8 files changed, 336 insertions(+), 65 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/2eda7491/examples/DataBindingTest/src/MyInitialView.mxml
----------------------------------------------------------------------
diff --git a/examples/DataBindingTest/src/MyInitialView.mxml b/examples/DataBindingTest/src/MyInitialView.mxml
index 0cb7911..0d14f92 100644
--- a/examples/DataBindingTest/src/MyInitialView.mxml
+++ b/examples/DataBindingTest/src/MyInitialView.mxml
@@ -126,7 +126,7 @@ limitations under the License.
                 <js:beads>
                     <js:VerticalLayout />
                 </js:beads>
-                <js:DropDownList id="list" width="100" height="17"
+                <js:DropDownList id="list" width="100" height="30"
                                     change="_symbol = list.selectedItem as String; dispatchEvent(new
CustomEvent('listChanged'))"
                                     dataProvider="{MyModel(applicationModel).strings}" />
                 <js:RadioButton id="radio1" text="Price" value="Ask" groupName="group1"
change="radioChanged(event)"/>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/2eda7491/frameworks/projects/Core/as/src/org/apache/flex/utils/CSSUtils.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Core/as/src/org/apache/flex/utils/CSSUtils.as b/frameworks/projects/Core/as/src/org/apache/flex/utils/CSSUtils.as
index 2f6d6d5..bb290b6 100644
--- a/frameworks/projects/Core/as/src/org/apache/flex/utils/CSSUtils.as
+++ b/frameworks/projects/Core/as/src/org/apache/flex/utils/CSSUtils.as
@@ -115,7 +115,8 @@ package org.apache.flex.utils
                 c2 = stringValue.indexOf(")");
                 stringValue = stringValue.substring(c + 4, c2);
                 var parts3:Array = stringValue.split(",");
-                return (uint(parts3[0]) << 16 +
+                return (0xFF000000 + 
+                        uint(parts3[0]) << 16 +
                         uint(parts3[1]) << 8 +
                         uint(parts3[2]));
             }
@@ -286,22 +287,23 @@ package org.apache.flex.utils
 		 *  @productversion FlexJS 0.0
          */
         public static var colorMap:Object = {
-            white:   0xFFFFFF,
-            silver:	 0xC0C0C0,
-            gray:    0x808080,
-            black:	 0x000000,
-            red:     0xFF0000,
-            maroon:  0x800000,
-            yellow:	 0xFFFF00,
-            olive:	 0x808000,
-            lime:	 0x00FF00,
-            green:	 0x008000,
-            aqua:	 0x00FFFF,
-            teal:	 0x008080,
-            blue:	 0x0000FF,
-            navy:	 0x000080,
-            fuchsia: 0xFF00FF,
-            purple:	 0x800080
+            transparent:   0,
+            white:   0xFFFFFFFF,
+            silver:	 0xFFC0C0C0,
+            gray:    0xFF808080,
+            black:	 0xFF000000,
+            red:     0xFFFF0000,
+            maroon:  0xFF800000,
+            yellow:	 0xFFFFFF00,
+            olive:	 0xFF808000,
+            lime:	 0xFF00FF00,
+            green:	 0xFF008000,
+            aqua:	 0xFF00FFFF,
+            teal:	 0xFF008080,
+            blue:	 0xFF0000FF,
+            navy:	 0xFF000080,
+            fuchsia: 0xFFFF00FF,
+            purple:	 0xFF800080
         }
 	}
 }
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/2eda7491/frameworks/projects/Core/as/src/org/apache/flex/utils/SolidBorderUtil.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Core/as/src/org/apache/flex/utils/SolidBorderUtil.as b/frameworks/projects/Core/as/src/org/apache/flex/utils/SolidBorderUtil.as
index 5848826..59c0fcf 100644
--- a/frameworks/projects/Core/as/src/org/apache/flex/utils/SolidBorderUtil.as
+++ b/frameworks/projects/Core/as/src/org/apache/flex/utils/SolidBorderUtil.as
@@ -36,7 +36,8 @@ public class SolidBorderUtil
 {
     /**
      *  Draw a solid color border as specified.  Will fill with
-     *  the backgroundColor if specified.
+     *  the backgroundColor if specified.  The border draws
+     *  inside with given width/height.
      * 
      *  @param g The flash.display.DisplayObject#graphics
      *  @param x The x position
@@ -94,5 +95,82 @@ public class SolidBorderUtil
             g.endFill();
         }
 	}
+    
+    /**
+     *  Draw a solid color border as specified.  Only square corners
+     *  are supported as the real usage for this is to handle
+     *  CSS triangles.  The border is drawn around the given
+     *  width and height.
+     * 
+     *  @param g The flash.display.DisplayObject#graphics
+     *  @param x The x position
+     *  @param y The y position
+     *  @param width The width 
+     *  @param height The height 
+     *  @param colorTop The rgba color (alpha is in highest order byte)
+     *  @param colorRight The rgba color
+     *  @param colorBottom The rgba color
+     *  @param colorLeft The rgba color
+     *  @param backgroundColor The optional fill color
+     *  @param thicknessTop The thickness of the border
+     *  @param thicknessRight The thickness of the border
+     *  @param thicknessBottom The thickness of the border
+     *  @param thicknessLeft The thickness of the border
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+    public static function drawDetailedBorder(g:Graphics, x:Number, y:Number, 
+                                      width:Number, height:Number,
+                                      colorTop:uint, colorRight:uint, colorBottom:uint, colorLeft:uint,
+                                      thicknessTop:int = 0, thicknessRight:int = 0, thicknessBottom:int
= 0, thicknessLeft:int = 0  
+                                      ):void
+    {
+        g.lineStyle();  // don't draw the line, it tends to get aligned on half-pixels
+        
+        if (thicknessTop > 0)
+        {
+            g.beginFill(colorTop & 0xFFFFFF, colorTop >> 24 / 255);
+            g.moveTo(-thicknessLeft, -thicknessTop);
+            g.lineTo(width + thicknessRight, -thicknessTop);
+            g.lineTo(width, 0);
+            g.lineTo(0, 0);
+            g.lineTo(-thicknessLeft, -thicknessTop);
+            g.endFill();
+        }
+        if (thicknessLeft > 0)
+        {
+            g.beginFill(colorLeft & 0xFFFFFF, colorLeft >> 24 / 255);
+            g.moveTo(-thicknessLeft, -thicknessTop);
+            g.lineTo(0, 0);
+            g.lineTo(0, height);
+            g.lineTo(-thicknessLeft, height + thicknessBottom);
+            g.lineTo(-thicknessLeft, -thicknessTop);
+            g.endFill();
+        }
+        if (thicknessRight > 0)
+        {
+            g.beginFill(colorRight & 0xFFFFFF, colorRight >> 24 / 255);
+            g.moveTo(width + thicknessRight, -thicknessTop);
+            g.lineTo(width + thicknessRight, height + thicknessBottom);
+            g.lineTo(width, height);
+            g.lineTo(width, 0);
+            g.lineTo(width + thicknessRight, -thicknessTop);
+            g.endFill();
+        }
+        if (thicknessBottom > 0)
+        {
+            g.beginFill(colorBottom & 0xFFFFFF, colorBottom >> 24 / 255);
+            g.moveTo(-thicknessLeft, height + thicknessBottom);
+            g.lineTo(0, height);
+            g.lineTo(width, height);
+            g.lineTo(width + thicknessRight, height + thicknessBottom);
+            g.lineTo(-thicknessLeft, height + thicknessBottom);
+            g.endFill();
+        }
+    }
+
 }
 }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/2eda7491/frameworks/projects/HTML/as/defaults.css
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/defaults.css b/frameworks/projects/HTML/as/defaults.css
index c34fea3..1f7eeb7 100644
--- a/frameworks/projects/HTML/as/defaults.css
+++ b/frameworks/projects/HTML/as/defaults.css
@@ -228,6 +228,48 @@ DateField {
     IFormatBead: ClassReference("org.apache.flex.html.accessories.DateFormatMMDDYYYYBead");
 }
 
+.dropdown-menu {
+  z-index: 1000;
+  min-width: 220px;
+  padding: 0;
+  margin-top: 9px;
+  font-size: 14px;
+  background-color: #f3f4f5;
+  border: none;
+  border-radius: 4px;
+  box-shadow: none;
+  }
+.dropdown-menu-divider {
+  height: 2px;
+  margin: 3px 0;
+  overflow: hidden;
+  background-color: rgba(202, 206, 209, .5);
+  }
+.dropdown-menu-item-renderer {
+  padding: 8px 16px;
+  line-height: 1.429;
+  color: #606d7a;
+}
+
+.dropdown-toggle-open-btn {
+  color: #fff;
+  background-color: #48c9b0;
+  border-color: #48c9b0;
+  }
+  
+.dropdown-caret {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin-left: 5px;
+  vertical-align: middle;
+  border-top: 8px solid;
+  border-right: 6px solid transparent;
+  border-left: 6px solid transparent;
+  -webkit-transition: border-color .25s, color .25s;
+          transition: border-color .25s, color .25s;
+  }
+
 HContainer
 {
     IBeadView: ClassReference("org.apache.flex.html.beads.ContainerView");

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/2eda7491/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSButtonView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSButtonView.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSButtonView.as
index 4377e8e..c41bbd7 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSButtonView.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSButtonView.as
@@ -114,7 +114,7 @@ package org.apache.flex.html.beads
 			value = ValuesManager.valuesImpl.getValue(_strand, "border-color", state);
 			if (value != null)
 				borderColor = CSSUtils.toColor(value);
-			value = ValuesManager.valuesImpl.getValue(_strand, "border-thickness", state);
+			value = ValuesManager.valuesImpl.getValue(_strand, "border-width", state);
 			if (value != null)
 				borderThickness = value as uint;
             if (borderStyle == "none")

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/2eda7491/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSTextButtonView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSTextButtonView.as
b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSTextButtonView.as
index 98dc7f5..866259e 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSTextButtonView.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSTextButtonView.as
@@ -168,7 +168,7 @@ package org.apache.flex.html.beads
 			value = ValuesManager.valuesImpl.getValue(_strand, "border-color", state);
 			if (value != null)
 				borderColor = CSSUtils.toColor(value);
-			value = ValuesManager.valuesImpl.getValue(_strand, "border-thickness", state);
+			value = ValuesManager.valuesImpl.getValue(_strand, "border-width", state);
 			if (value != null)
 				borderThickness = value as uint;
             if (borderStyle == "none")

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/2eda7491/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/SingleLineBorderBead.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/SingleLineBorderBead.as
b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/SingleLineBorderBead.as
index 470fa9d..6a39157 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/SingleLineBorderBead.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/SingleLineBorderBead.as
@@ -21,8 +21,8 @@ package org.apache.flex.html.beads
 	import flash.display.Graphics;
 	
 	import org.apache.flex.core.IBead;
+	import org.apache.flex.core.IStatesObject;
 	import org.apache.flex.core.IStrand;
-    import org.apache.flex.core.IStatesObject;
 	import org.apache.flex.core.UIBase;
 	import org.apache.flex.core.ValuesManager;
 	import org.apache.flex.events.Event;
@@ -105,14 +105,9 @@ package org.apache.flex.html.beads
             value = ValuesManager.valuesImpl.getValue(_strand, "border-color", state);
             if (value != null)
                 borderColor = CSSUtils.toColor(value);
-            value = ValuesManager.valuesImpl.getValue(_strand, "border-thickness", state);
+            value = ValuesManager.valuesImpl.getValue(_strand, "border-width", state);
             if (value != null)
                 borderThickness = value as uint;
-            if (borderStyle == "none")
-            {
-                borderStyle = "solid";
-                borderThickness = 0;
-            }
             
             var borderRadius:String;
             var borderEllipseWidth:Number = NaN;
@@ -131,10 +126,70 @@ package org.apache.flex.html.beads
                         borderEllipseHeight = CSSUtils.toNumber(arr[1]);
                 } 
             }
-            SolidBorderUtil.drawBorder(g, 
-                0, 0, w, h,
-                borderColor, null, borderThickness, 1,
-                borderEllipseWidth, borderEllipseHeight);
+            if (borderStyle == "none")
+            {
+                var n:int;
+                var values:Array;
+                var colorTop:uint;
+                var colorLeft:uint;
+                var colorRight:uint;
+                var colorBottom:uint;
+                var widthTop:int = -1;
+                var widthLeft:int = -1;
+                var widthBottom:int = -1;
+                var widthRight:int = -1;
+                value = ValuesManager.valuesImpl.getValue(_strand, "border-top", state);
+                if (value != null)
+                {
+                    values = value.split(" ");
+                    n = values.length;
+                    widthTop = CSSUtils.toNumber(values[0]);
+                    // assume solid for now
+                    if (n > 2)
+                        colorTop = CSSUtils.toColorWithAlpha(values[2]);
+                }
+                value = ValuesManager.valuesImpl.getValue(_strand, "border-left", state);
+                if (value != null)
+                {
+                    values = value.split(" ");
+                    n = values.length;
+                    widthLeft = CSSUtils.toNumber(values[0]);
+                    // assume solid for now
+                    if (n > 2)
+                        colorLeft = CSSUtils.toColorWithAlpha(values[2]);
+                }
+                value = ValuesManager.valuesImpl.getValue(_strand, "border-bottom", state);
+                if (value != null)
+                {
+                    values = value.split(" ");
+                    n = values.length;
+                    widthBottom = CSSUtils.toNumber(values[0]);
+                    // assume solid for now
+                    if (n > 2)
+                        colorBottom = CSSUtils.toColorWithAlpha(values[2]);
+                }
+                value = ValuesManager.valuesImpl.getValue(_strand, "border-right", state);
+                if (value != null)
+                {
+                    values = value.split(" ");
+                    n = values.length;
+                    widthRight = CSSUtils.toNumber(values[0]);
+                    // assume solid for now
+                    if (n > 2)
+                        colorRight = CSSUtils.toColorWithAlpha(values[2]);
+                }
+                SolidBorderUtil.drawDetailedBorder(g, 0, 0, w, h,
+                    colorTop, colorRight, colorBottom, colorLeft,
+                    widthTop, widthRight, widthBottom, widthLeft);
+            }
+            else
+            {
+                borderThickness = 0;
+                SolidBorderUtil.drawBorder(g, 
+                    0, 0, w, h,
+                    borderColor, null, borderThickness, 1,
+                    borderEllipseWidth, borderEllipseHeight);
+            }
 		}
 	}
 }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/2eda7491/frameworks/projects/HTML/js/src/org/apache/flex/html/DropDownList.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/DropDownList.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/DropDownList.js
index 7df803f..df61633 100644
--- a/frameworks/projects/HTML/js/src/org/apache/flex/html/DropDownList.js
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/DropDownList.js
@@ -44,41 +44,145 @@ org.apache.flex.html.DropDownList.prototype.FLEXJS_CLASS_INFO =
 /**
  * @override
  */
-org.apache.flex.html.DropDownList.prototype.
-    createElement = function() {
-  this.element = document.createElement('select');
-  this.element.size = 1;
-  goog.events.listen(this.element, 'change',
-      goog.bind(this.changeHandler, this));
+org.apache.flex.html.DropDownList.prototype.createElement =
+    function() {
+  var button, input;
+
+  this.element = document.createElement('div');
+
+  this.button = button = document.createElement('button');
+  button.className = 'dropdown-toggle-open-btn';
+  goog.events.listen(button, 'click', goog.bind(this.buttonClicked, this));
+  this.element.appendChild(button);
+
+  var caret = document.createElement('span');
+  caret.className = 'dropdown-caret';
+
+  this.element.style.position = 'relative';
+
   this.positioner = this.element;
 
+  // add a click handler so that a click outside of the combo box can
+  // dismiss the pop-up should it be visible.
+  goog.events.listen(document, 'click',
+      goog.bind(this.dismissPopup, this));
+
+  button.flexjs_wrapper = this;
   this.element.flexjs_wrapper = this;
+  caret.flexjs_wrapper = this;
 
   return this.element;
 };
 
 
+/**
+ * @export
+ * @param {Object} event The event.
+ */
+org.apache.flex.html.DropDownList.prototype.selectChanged =
+    function(event) {
+  var select;
+
+  select = event.currentTarget;
+
+  this.selectedItem = select.options[select.selectedIndex].value;
+
+  this.popup.parentNode.removeChild(this.popup);
+  this.popup = null;
+
+  this.dispatchEvent(event);
+};
+
+
+/**
+ * @export
+ * @param {Object=} opt_event The event.
+ */
+org.apache.flex.html.DropDownList.prototype.dismissPopup =
+    function(opt_event) {
+  // remove the popup if it already exists
+  if (this.popup) {
+    this.popup.parentNode.removeChild(this.popup);
+    this.popup = null;
+  }
+};
+
+
+/**
+ * @export
+ * @param {Object} event The event.
+ */
+org.apache.flex.html.DropDownList.prototype.buttonClicked =
+    function(event) {
+  /**
+   * @type {Array.<string>}
+   */
+  var dp;
+  var i, button, left, n, opt, opts, pn, popup, select, si, top, width;
+
+  event.stopPropagation();
+
+  if (this.popup) {
+    this.dismissPopup();
+
+    return;
+  }
+
+  button = this.element.childNodes.item(0);
+
+  pn = this.element;
+  top = pn.offsetTop + button.offsetHeight;
+  left = pn.offsetLeft;
+  width = pn.offsetWidth;
+
+  popup = document.createElement('div');
+  popup.className = 'dropdown-menu';
+  popup.id = 'test';
+  popup.style.position = 'absolute';
+  popup.style.top = top.toString() + 'px';
+  popup.style.left = left.toString() + 'px';
+  popup.style.width = width.toString() + 'px';
+  popup.style.margin = '0px auto';
+  popup.style.padding = '0px';
+  popup.style.zIndex = '10000';
+
+  this.menu = select = document.createElement('select');
+  select.style.width = width.toString() + 'px';
+  goog.events.listen(select, 'change', goog.bind(this.selectChanged, this));
+  opts = select.options;
+
+  dp = /** @type {Array.<string>} */ (this.dataProvider);
+  n = dp.length;
+  for (i = 0; i < n; i++) {
+    opt = document.createElement('option');
+    opt.className = 'dropdown-menu-item-renderer';
+    opt.text = dp[i];
+    opts.add(opt);
+  }
+
+  select.size = n;
+
+  si = this.selectedIndex;
+  if (si < 0) {
+    select.value = null;
+  } else {
+    select.value = dp[si];
+  }
+
+  this.popup = popup;
+
+  popup.appendChild(select);
+  document.body.appendChild(popup);
+};
+
+
 Object.defineProperties(org.apache.flex.html.DropDownList.prototype, {
-    /** @export */
     dataProvider: {
         /** @this {org.apache.flex.html.DropDownList} */
         set: function(value) {
             var dp, i, n, opt;
 
             this.model.dataProvider = value;
-
-            dp = this.element.options;
-            n = dp.length;
-            for (i = 0; i < n; i++) {
-              dp.remove(0);
-            }
-
-            n = value.length;
-            for (i = 0; i < n; i++) {
-              opt = document.createElement('option');
-              opt.text = value[i];
-              dp.add(opt);
-            }
         }
     },
     /** @export */
@@ -93,7 +197,7 @@ Object.defineProperties(org.apache.flex.html.DropDownList.prototype, {
         /** @this {org.apache.flex.html.DropDownList} */
         set: function(value) {
             this.model.selectedIndex = value;
-            this.element.selectedIndex = value;
+            this.button.innerHTML = this.selectedItem + '<span class="dropdown-caret"/>';
         }
     },
     /** @export */
@@ -108,17 +212,7 @@ Object.defineProperties(org.apache.flex.html.DropDownList.prototype,
{
         /** @this {org.apache.flex.html.DropDownList} */
         set: function(value) {
             this.model.selectedItem = value;
-            this.element.selectedIndex = this.selectedIndex;
-        }
+            this.button.innerHTML = this.selectedItem + '<span class="dropdown-caret"/>';
+         }
     }
 });
-
-
-/**
- * @protected
- */
-org.apache.flex.html.DropDownList.prototype.changeHandler =
-    function() {
-  this.model.selectedIndex = this.element.selectedIndex;
-  this.dispatchEvent('change');
-};


Mime
View raw message