You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by ah...@apache.org on 2015/07/28 20:40:46 UTC
[20/36] git commit: [flex-asjs] [refs/heads/develop] - most of a
flat-ui-like dropdownlist
most of a flat-ui-like dropdownlist
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/9d1950f5
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/9d1950f5
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/9d1950f5
Branch: refs/heads/develop
Commit: 9d1950f52ddf6e54470face7ef26d2183b150f78
Parents: 2eda749
Author: Alex Harui <ah...@apache.org>
Authored: Fri Jul 24 06:15:51 2015 -0700
Committer: Alex Harui <ah...@apache.org>
Committed: Fri Jul 24 06:15:51 2015 -0700
----------------------------------------------------------------------
examples/DataBindingTest/src/MyInitialView.mxml | 2 +-
frameworks/projects/Core/as/src/CoreClasses.as | 3 +
.../as/src/org/apache/flex/core/CSSShape.as | 162 ++++++++++++++
.../as/src/org/apache/flex/core/CSSSprite.as | 162 ++++++++++++++
.../src/org/apache/flex/utils/CSSBorderUtils.as | 218 +++++++++++++++++++
.../as/src/org/apache/flex/utils/CSSUtils.as | 4 +-
.../org/apache/flex/utils/SolidBorderUtil.as | 58 +++--
frameworks/projects/HTML/as/defaults.css | 38 +++-
.../org/apache/flex/html/beads/CSSButtonView.as | 2 +-
.../apache/flex/html/beads/CSSTextButtonView.as | 2 +-
.../apache/flex/html/beads/DropDownListView.as | 102 +++++----
.../flex/html/beads/SingleLineBorderBead.as | 108 +--------
.../flex/html/beads/SolidBackgroundBead.as | 36 ++-
.../beads/controllers/DropDownListController.as | 3 +-
.../html/supportClasses/DropDownListList.as | 1 +
.../js/src/org/apache/flex/html/DropDownList.js | 57 ++---
16 files changed, 730 insertions(+), 228 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9d1950f5/examples/DataBindingTest/src/MyInitialView.mxml
----------------------------------------------------------------------
diff --git a/examples/DataBindingTest/src/MyInitialView.mxml b/examples/DataBindingTest/src/MyInitialView.mxml
index 0d14f92..59bfd77 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="30"
+ <js:DropDownList id="list" width="100" height="43"
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/9d1950f5/frameworks/projects/Core/as/src/CoreClasses.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Core/as/src/CoreClasses.as b/frameworks/projects/Core/as/src/CoreClasses.as
index 0c04ca4..0b575af 100644
--- a/frameworks/projects/Core/as/src/CoreClasses.as
+++ b/frameworks/projects/Core/as/src/CoreClasses.as
@@ -29,6 +29,8 @@ internal class CoreClasses
{
import org.apache.flex.core.BeadViewBase; BeadViewBase;
import org.apache.flex.core.BrowserWindow; BrowserWindow;
+ import org.apache.flex.core.CSSShape; CSSShape;
+ import org.apache.flex.core.CSSSprite; CSSSprite;
import org.apache.flex.core.CSSTextField; CSSTextField;
import org.apache.flex.core.StyleableCSSTextField; StyleableCSSTextField;
import org.apache.flex.core.ItemRendererClassFactory; ItemRendererClassFactory;
@@ -85,6 +87,7 @@ internal class CoreClasses
import org.apache.flex.utils.BinaryData; BinaryData;
import org.apache.flex.utils.BeadMetrics; BeadMetrics;
import org.apache.flex.utils.CSSUtils; CSSUtils;
+ import org.apache.flex.utils.CSSBorderUtils; CSSBorderUtils;
import org.apache.flex.utils.dbg.DOMPathUtil; DOMPathUtil;
import org.apache.flex.utils.EffectTimer; EffectTimer;
import org.apache.flex.utils.MixinManager; MixinManager;
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9d1950f5/frameworks/projects/Core/as/src/org/apache/flex/core/CSSShape.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Core/as/src/org/apache/flex/core/CSSShape.as b/frameworks/projects/Core/as/src/org/apache/flex/core/CSSShape.as
new file mode 100644
index 0000000..e1e238c
--- /dev/null
+++ b/frameworks/projects/Core/as/src/org/apache/flex/core/CSSShape.as
@@ -0,0 +1,162 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.flex.core
+{
+ import flash.display.Graphics;
+ import flash.display.Shape;
+
+ import org.apache.flex.core.IChild;
+ import org.apache.flex.events.Event;
+ import org.apache.flex.utils.CSSBorderUtils;
+
+ /**
+ * The Border class is a class used internally by many
+ * controls to draw a border. The border actually drawn
+ * is dictated by the IBeadView in the CSS.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public class CSSShape extends Shape implements IStyleableObject, IChild
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function CSSShape()
+ {
+ super();
+ }
+
+ private var _id:String;
+
+ /**
+ * An id property for MXML documents.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function get id():String
+ {
+ return _id;
+ }
+
+ /**
+ * @private
+ */
+ public function set id(value:String):void
+ {
+ if (_id != value)
+ {
+ _id = value;
+ dispatchEvent(new Event("idChanged"));
+ }
+ }
+
+ private var _className:String;
+
+ /**
+ * The classname. Often used for CSS
+ * class selector lookups.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function get className():String
+ {
+ return _className;
+ }
+
+ /**
+ * @private
+ */
+ public function set className(value:String):void
+ {
+ if (_className != value)
+ {
+ _className = value;
+ dispatchEvent(new Event("classNameChanged"));
+ }
+ }
+
+ private var _styles:Object;
+
+ /**
+ * The object that contains
+ * "styles" and other associated
+ * name-value pairs. You can
+ * also specify a string in
+ * HTML style attribute format.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function get style():Object
+ {
+ return _styles;
+ }
+
+ /**
+ * @private
+ */
+ public function set style(value:Object):void
+ {
+ if (_styles != value)
+ {
+ if (value is String)
+ {
+ _styles = ValuesManager.valuesImpl.parseStyles(value as String);
+ }
+ else
+ _styles = value;
+ dispatchEvent(new Event("stylesChanged"));
+ }
+ }
+
+ public var state:String;
+
+ /**
+ * Draw the contents based on styles
+ *
+ * @param width The width.
+ * @param height The height.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function draw(w:Number, h:Number):void
+ {
+ CSSBorderUtils.draw(this.graphics, w, h, this, state, true);
+ }
+ }
+}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9d1950f5/frameworks/projects/Core/as/src/org/apache/flex/core/CSSSprite.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Core/as/src/org/apache/flex/core/CSSSprite.as b/frameworks/projects/Core/as/src/org/apache/flex/core/CSSSprite.as
new file mode 100644
index 0000000..fcd2716
--- /dev/null
+++ b/frameworks/projects/Core/as/src/org/apache/flex/core/CSSSprite.as
@@ -0,0 +1,162 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.flex.core
+{
+ import flash.display.Graphics;
+ import flash.display.Sprite;
+
+ import org.apache.flex.core.IChild;
+ import org.apache.flex.events.Event;
+ import org.apache.flex.utils.CSSBorderUtils;
+
+ /**
+ * The Border class is a class used internally by many
+ * controls to draw a border. The border actually drawn
+ * is dictated by the IBeadView in the CSS.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public class CSSSprite extends Sprite implements IStyleableObject, IChild
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function CSSSprite()
+ {
+ super();
+ }
+
+ private var _id:String;
+
+ /**
+ * An id property for MXML documents.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function get id():String
+ {
+ return _id;
+ }
+
+ /**
+ * @private
+ */
+ public function set id(value:String):void
+ {
+ if (_id != value)
+ {
+ _id = value;
+ dispatchEvent(new Event("idChanged"));
+ }
+ }
+
+ private var _className:String;
+
+ /**
+ * The classname. Often used for CSS
+ * class selector lookups.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function get className():String
+ {
+ return _className;
+ }
+
+ /**
+ * @private
+ */
+ public function set className(value:String):void
+ {
+ if (_className != value)
+ {
+ _className = value;
+ dispatchEvent(new Event("classNameChanged"));
+ }
+ }
+
+ private var _styles:Object;
+
+ /**
+ * The object that contains
+ * "styles" and other associated
+ * name-value pairs. You can
+ * also specify a string in
+ * HTML style attribute format.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function get style():Object
+ {
+ return _styles;
+ }
+
+ /**
+ * @private
+ */
+ public function set style(value:Object):void
+ {
+ if (_styles != value)
+ {
+ if (value is String)
+ {
+ _styles = ValuesManager.valuesImpl.parseStyles(value as String);
+ }
+ else
+ _styles = value;
+ dispatchEvent(new Event("stylesChanged"));
+ }
+ }
+
+ public var state:String;
+
+ /**
+ * Draw the contents based on styles
+ *
+ * @param width The width.
+ * @param height The height.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function draw(w:Number, h:Number):void
+ {
+ CSSBorderUtils.draw(this.graphics, w, h, this, state, true);
+ }
+ }
+}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9d1950f5/frameworks/projects/Core/as/src/org/apache/flex/utils/CSSBorderUtils.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Core/as/src/org/apache/flex/utils/CSSBorderUtils.as b/frameworks/projects/Core/as/src/org/apache/flex/utils/CSSBorderUtils.as
new file mode 100644
index 0000000..5a80e31
--- /dev/null
+++ b/frameworks/projects/Core/as/src/org/apache/flex/utils/CSSBorderUtils.as
@@ -0,0 +1,218 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.flex.utils
+{
+ import flash.display.DisplayObject;
+ import flash.display.Graphics;
+
+ import org.apache.flex.core.IStatesObject;
+ import org.apache.flex.core.IUIBase;
+ import org.apache.flex.core.ValuesManager;
+ import org.apache.flex.utils.SolidBorderUtil;
+ import org.apache.flex.utils.StringTrimmer;
+
+ /**
+ * The CSSBorderUtils class is shared code for getting the styles
+ * regarding borders and drawing one.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public class CSSBorderUtils
+ {
+ /**
+ * @private
+ */
+ public function CSSBorderUtils()
+ {
+ throw new Error("CSSBorderUtils should not be instantiated.");
+ }
+
+ /**
+ * Get the related styles and draw a border
+ *
+ * @param g The flash.display.Graphics to draw into.
+ * @param width The width.
+ * @param height The height.
+ * @param host The object to pull styles from.
+ * @param state The pseudo-state, if any.
+ * @param drawBackground True if area inside border should be filled with backgroundColor.
+ * @param clear True if graphics.clear() should be called.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public static function draw(g:Graphics, width:Number, height:Number,
+ host:DisplayObject, state:String = null,
+ drawBackground:Boolean = false, clear:Boolean = true):void
+ {
+ if (clear)
+ g.clear();
+
+ var needBorderColor:Boolean = true;
+ var borderColor:uint;
+ var borderThickness:uint = 0;
+ var borderStyle:String = "none";
+ var borderStyles:Object = ValuesManager.valuesImpl.getValue(host, "border", state);
+ if (borderStyles is Array)
+ {
+ borderColor = CSSUtils.toColor(borderStyles[2]);
+ borderStyle = borderStyles[1];
+ borderThickness = borderStyles[0];
+ needBorderColor = false;
+ }
+ else if (borderStyles is String)
+ borderStyle = borderStyles as String;
+ var value:Object = ValuesManager.valuesImpl.getValue(host, "border-style", state);
+ if (value != null)
+ borderStyle = value as String;
+ value = ValuesManager.valuesImpl.getValue(host, "border-color", state);
+ if (value != null)
+ borderColor = CSSUtils.toColor(value);
+ else if (needBorderColor)
+ {
+ value = ValuesManager.valuesImpl.getValue(host, "color", state);
+ if (value != null)
+ borderColor = CSSUtils.toColor(value);
+ }
+ // if alpha = 0; assume that alpha just wasn't specified
+ if ((borderColor & 0xFF000000) == 0)
+ borderColor = borderColor | 0xFF000000;
+ value = ValuesManager.valuesImpl.getValue(host, "border-width", state);
+ if (value != null)
+ borderThickness = value as uint;
+
+ var borderRadius:String;
+ var borderEllipseWidth:Number = NaN;
+ var borderEllipseHeight:Number = NaN;
+ value = ValuesManager.valuesImpl.getValue(host, "border-radius", state);
+ if (value != null)
+ {
+ if (value is Number)
+ borderEllipseWidth = value as Number;
+ else
+ {
+ borderRadius = value as String;
+ var arr:Array = StringTrimmer.splitAndTrim(borderRadius, "/");
+ borderEllipseWidth = CSSUtils.toNumber(arr[0]);
+ if (arr.length > 1)
+ borderEllipseHeight = CSSUtils.toNumber(arr[1]);
+ }
+ }
+ if (borderStyle == "none" && isNaN(borderEllipseWidth))
+ {
+ 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(host, "border-top", state);
+ if (value != null)
+ {
+ if (value is Array)
+ values = value as Array;
+ else
+ values = value.split(" ");
+ n = values.length;
+ widthTop = CSSUtils.toNumber(values[0]);
+ // assume solid for now
+ if (n > 2)
+ colorTop = CSSUtils.toColorWithAlpha(values[2]);
+ else
+ colorTop = borderColor;
+ }
+ value = ValuesManager.valuesImpl.getValue(host, "border-left", state);
+ if (value != null)
+ {
+ if (value is Array)
+ values = value as Array;
+ else
+ values = value.split(" ");
+ n = values.length;
+ widthLeft = CSSUtils.toNumber(values[0]);
+ // assume solid for now
+ if (n > 2)
+ colorLeft = CSSUtils.toColorWithAlpha(values[2]);
+ else
+ colorLeft = borderColor;
+ }
+ value = ValuesManager.valuesImpl.getValue(host, "border-bottom", state);
+ if (value != null)
+ {
+ if (value is Array)
+ values = value as Array;
+ else
+ values = value.split(" ");
+ n = values.length;
+ widthBottom = CSSUtils.toNumber(values[0]);
+ // assume solid for now
+ if (n > 2)
+ colorBottom = CSSUtils.toColorWithAlpha(values[2]);
+ else
+ colorBottom = borderColor;
+ }
+ value = ValuesManager.valuesImpl.getValue(host, "border-right", state);
+ if (value != null)
+ {
+ if (value is Array)
+ values = value as Array;
+ else
+ values = value.split(" ");
+ n = values.length;
+ widthRight = CSSUtils.toNumber(values[0]);
+ // assume solid for now
+ if (n > 2)
+ colorRight = CSSUtils.toColorWithAlpha(values[2]);
+ else
+ colorRight = borderColor;
+ }
+ SolidBorderUtil.drawDetailedBorder(g, 0, 0, width, height,
+ colorTop, colorRight, colorBottom, colorLeft,
+ widthTop, widthRight, widthBottom, widthLeft);
+ }
+ else
+ {
+ if (borderStyle == "none")
+ borderThickness = 0;
+ var backgroundColor:Object = null;
+ if (drawBackground)
+ {
+ value = ValuesManager.valuesImpl.getValue(host, "background-color", state);
+ if (value != null)
+ backgroundColor = CSSUtils.toColorWithAlpha(value);
+ }
+ SolidBorderUtil.drawBorder(g,
+ 0, 0, width, height,
+ borderColor, backgroundColor, borderThickness, 1,
+ borderEllipseWidth, borderEllipseHeight);
+ }
+
+ }
+
+ }
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9d1950f5/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 bb290b6..3dbee10 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
@@ -96,7 +96,7 @@ package org.apache.flex.utils
public static function toColorWithAlpha(value:Object):uint
{
if (!(value is String))
- return uint(value);
+ return uint(value) | 0xFF000000; // css parser converted #rrggbb without alpha channel
var c:int;
var c2:int;
@@ -108,6 +108,8 @@ package org.apache.flex.utils
return uint("0x" + stringValue.charAt(1) + stringValue.charAt(1) +
stringValue.charAt(2) + stringValue.charAt(2) +
stringValue.charAt(3) + stringValue.charAt(3));
+ if (stringValue.length == 7)
+ return uint("0xFF" + stringValue.substr(1));
return uint("0x" + stringValue.substr(1));
}
else if ((c = stringValue.indexOf("rgb(")) != -1)
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9d1950f5/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 59c0fcf..d814a2a 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
@@ -130,44 +130,58 @@ public class SolidBorderUtil
{
g.lineStyle(); // don't draw the line, it tends to get aligned on half-pixels
+ var color:uint;
+ var alpha:Number;
if (thicknessTop > 0)
{
- g.beginFill(colorTop & 0xFFFFFF, colorTop >> 24 / 255);
- g.moveTo(-thicknessLeft, -thicknessTop);
- g.lineTo(width + thicknessRight, -thicknessTop);
- g.lineTo(width, 0);
+ color = colorTop & 0xFFFFFF;
+ alpha = (colorTop >>> 24 & 0xFF) / 255;
+ g.beginFill(color, alpha);
+ g.moveTo(0, 0);
+ g.lineTo(width + thicknessRight + thicknessLeft, 0);
+ if (width > 0)
+ g.lineTo(width + thicknessLeft, thicknessTop);
+ g.lineTo(thicknessLeft, thicknessTop);
g.lineTo(0, 0);
- g.lineTo(-thicknessLeft, -thicknessTop);
g.endFill();
}
if (thicknessLeft > 0)
{
- g.beginFill(colorLeft & 0xFFFFFF, colorLeft >> 24 / 255);
- g.moveTo(-thicknessLeft, -thicknessTop);
+ color = colorLeft & 0xFFFFFF;
+ alpha = (colorLeft >>> 24 & 0xFF) / 255;
+ g.beginFill(color, alpha);
+ g.moveTo(0, 0);
+ g.lineTo(thicknessLeft, thicknessTop);
+ if (height > 0)
+ g.lineTo(thicknessLeft, thicknessTop + height);
+ g.lineTo(0, height + thicknessBottom);
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);
+ color = colorRight & 0xFFFFFF;
+ alpha = (colorRight >>> 24 & 0xFF) / 255;
+ g.beginFill(color, alpha);
+ g.moveTo(width + thicknessRight + thicknessLeft, 0);
+ g.lineTo(width + thicknessRight + thicknessLeft, height + thicknessBottom + thicknessTop);
+ if (height > 0)
+ g.lineTo(width + thicknessLeft, height + thicknessTop);
+ g.lineTo(width + thicknessLeft, thicknessTop);
+ g.lineTo(width + thicknessRight + thicknessLeft, 0);
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);
+ color = colorBottom & 0xFFFFFF;
+ alpha = (colorBottom >>> 24 & 0xFF) / 255;
+ g.beginFill(color, alpha);
+ g.moveTo(0, height + thicknessBottom + thicknessTop);
+ g.lineTo(thicknessLeft, height + thicknessBottom);
+ if (width > 0)
+ g.lineTo(width + thicknessLeft, height + thicknessTop);
+ g.lineTo(width + thicknessRight + thicknessLeft + thicknessLeft, height + thicknessBottom);
+ g.lineTo(-0, height + thicknessRight + thicknessBottom);
g.endFill();
}
}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9d1950f5/frameworks/projects/HTML/as/defaults.css
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/defaults.css b/frameworks/projects/HTML/as/defaults.css
index 1f7eeb7..aa3ef9d 100644
--- a/frameworks/projects/HTML/as/defaults.css
+++ b/frameworks/projects/HTML/as/defaults.css
@@ -36,18 +36,6 @@
background-color: #fff;
}
-*:active
-{
- font-family: "Arial";
- font-size: 12px;
-}
-
-*:hover
-{
- font-family: "Arial";
- font-size: 12px;
-}
-
.flexjs *, . flexjs *:before, . flexjs *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
@@ -229,6 +217,7 @@ DateField {
}
.dropdown-menu {
+ position: absolute;
z-index: 1000;
min-width: 220px;
padding: 0;
@@ -238,6 +227,7 @@ DateField {
border: none;
border-radius: 4px;
box-shadow: none;
+ list-style: none;
}
.dropdown-menu-divider {
height: 2px;
@@ -248,10 +238,32 @@ DateField {
.dropdown-menu-item-renderer {
padding: 8px 16px;
line-height: 1.429;
+ font-size: inherit;
color: #606d7a;
+ background-color: transparent;
+}
+.dropdown-menu-item-renderer-selected {
+ padding: 8px 16px;
+ line-height: 1.875;
+ font-size: inherit;
+ color: #fff;
+ background-color: #1abc9c;
+}
+.dropdown-menu-item-renderer:hover {
+ font-size: inherit;
+ color: #55606c;
+ background-color: rgba(202, 206, 209, .5);
}
.dropdown-toggle-open-btn {
+ border-radius: 4px;
+ color: #fff;
+ background-color: #1abc9c;
+ border-color: #1abc9c;
+ }
+
+.dropdown-toggle-open-btn:hover {
+ border-radius: 4px;
color: #fff;
background-color: #48c9b0;
border-color: #48c9b0;
@@ -259,6 +271,8 @@ DateField {
.dropdown-caret {
display: inline-block;
+ color: inherit;
+ background-color: inherit;
width: 0;
height: 0;
margin-left: 5px;
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9d1950f5/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 c41bbd7..72038e1 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
@@ -158,7 +158,7 @@ package org.apache.flex.html.beads
bgColor = CSSUtils.toColorWithAlpha(backgroundColor);
if (bgColor & 0xFF000000)
{
- bgAlpha = bgColor >> 24 / 255;
+ bgAlpha = bgColor >>> 24 / 255;
bgColor = bgColor & 0xFFFFFF;
}
}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9d1950f5/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 866259e..0ee0b8d 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
@@ -213,7 +213,7 @@ package org.apache.flex.html.beads
bgColor = CSSUtils.toColorWithAlpha(backgroundColor);
if (bgColor & 0xFF000000)
{
- bgAlpha = bgColor >> 24 / 255;
+ bgAlpha = bgColor >>> 24 / 255;
bgColor = bgColor & 0xFFFFFF;
}
}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9d1950f5/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/DropDownListView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/DropDownListView.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/DropDownListView.as
index d2a4945..30df676 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/DropDownListView.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/DropDownListView.as
@@ -28,15 +28,18 @@ package org.apache.flex.html.beads
import org.apache.flex.core.BeadViewBase;
import org.apache.flex.core.CSSTextField;
+ import org.apache.flex.core.CSSShape;
+ import org.apache.flex.core.CSSSprite;
import org.apache.flex.core.IBeadView;
import org.apache.flex.core.IPopUpHost;
import org.apache.flex.core.ISelectionModel;
import org.apache.flex.core.IStrand;
import org.apache.flex.core.IPopUpHost;
+ import org.apache.flex.core.IUIBase;
import org.apache.flex.core.ValuesManager;
import org.apache.flex.events.Event;
import org.apache.flex.events.IEventDispatcher;
-
+
/**
* The DropDownListView class is the default view for
* the org.apache.flex.html.DropDownList class.
@@ -61,71 +64,45 @@ package org.apache.flex.html.beads
*/
public function DropDownListView()
{
- upSprite = new Sprite();
- downSprite = new Sprite();
- overSprite = new Sprite();
+ upSprite = new CSSSprite();
+ upSprite.className = 'dropdown-toggle-open-btn';
+ downSprite = new CSSSprite();
+ downSprite.className = 'dropdown-toggle-open-btn';
+ overSprite = new CSSSprite();
+ overSprite.className = 'dropdown-toggle-open-btn';
+ overSprite.state = 'hover';
upTextField = new CSSTextField();
downTextField = new CSSTextField();
overTextField = new CSSTextField();
upSprite.addChild(upTextField);
overSprite.addChild(overTextField);
downSprite.addChild(downTextField);
- upTextField.border = true;
- downTextField.border = true;
- overTextField.border = true;
- upTextField.background = true;
- downTextField.background = true;
- overTextField.background = true;
- upTextField.borderColor = 0;
- downTextField.borderColor = 0;
- overTextField.borderColor = 0;
- upTextField.backgroundColor = 0xEEEEEE;
- downTextField.backgroundColor = 0x808080;
- overTextField.backgroundColor = 0xFFFFFF;
upTextField.selectable = false;
+ upTextField.parentDrawsBackground = true;
upTextField.type = TextFieldType.DYNAMIC;
downTextField.selectable = false;
+ downTextField.parentDrawsBackground = true;
downTextField.type = TextFieldType.DYNAMIC;
overTextField.selectable = false;
+ overTextField.parentDrawsBackground = true;
overTextField.type = TextFieldType.DYNAMIC;
// auto-size collapses if no text
//upTextField.autoSize = "left";
//downTextField.autoSize = "left";
//overTextField.autoSize = "left";
- upArrows = new Shape();
- overArrows = new Shape();
- downArrows = new Shape();
+ upArrows = new CSSShape();
+ upArrows.className = 'dropdown-caret';
+ overArrows = new CSSShape();
+ overArrows.className = 'dropdown-caret';
+ downArrows = new CSSShape();
+ downArrows.className = 'dropdown-caret';
upSprite.addChild(upArrows);
overSprite.addChild(overArrows);
downSprite.addChild(downArrows);
- drawArrows(upArrows, 0xEEEEEE);
- drawArrows(overArrows, 0xFFFFFF);
- drawArrows(downArrows, 0x808080);
}
- private function drawArrows(shape:Shape, color:uint):void
- {
- var g:Graphics = shape.graphics;
- g.beginFill(color);
- g.drawRect(0, 0, 16, 17);
- g.endFill();
- g.beginFill(0);
- g.moveTo(8, 2);
- g.lineTo(12, 6);
- g.lineTo(4, 6);
- g.lineTo(8, 2);
- g.endFill();
- g.beginFill(0);
- g.moveTo(8, 14);
- g.lineTo(12, 10);
- g.lineTo(4, 10);
- g.lineTo(8, 14);
- g.endFill();
- g.lineStyle(1, 0);
- g.drawRect(0, 0, 16, 17);
- }
private var selectionModel:ISelectionModel;
@@ -176,15 +153,29 @@ package org.apache.flex.html.beads
{
var ww:Number = DisplayObject(_strand).width;
var hh:Number = DisplayObject(_strand).height;
+ upArrows.draw(0, 0);
+ overArrows.draw(0, 0);
+ downArrows.draw(0, 0);
+ upSprite.draw(ww, hh);
+ overSprite.draw(ww, hh);
+ downSprite.draw(ww, hh);
+
upArrows.x = ww - upArrows.width;
overArrows.x = ww - overArrows.width;
downArrows.x = ww - downArrows.width;
+ upArrows.y = (hh - upArrows.height) / 2;
+ overArrows.y = (hh - overArrows.height) / 2;
+ downArrows.y = (hh - downArrows.height) / 2;
+
upTextField.width = upArrows.x;
downTextField.width = downArrows.x;
overTextField.width = overArrows.x;
- upTextField.height = hh;
- downTextField.height = hh;
- overTextField.height = hh;
+ upTextField.height = upTextField.textHeight + 5;
+ downTextField.height = downTextField.textHeight + 5;
+ overTextField.height = overTextField.textHeight + 5;
+ upTextField.y = (hh - upTextField.height) / 2;
+ downTextField.y = (hh - downTextField.height) / 2;
+ overTextField.y = (hh - overTextField.height) / 2;
shape.graphics.clear();
shape.graphics.beginFill(0xCCCCCC);
shape.graphics.drawRect(0, 0, ww, hh);
@@ -194,12 +185,12 @@ package org.apache.flex.html.beads
private var upTextField:CSSTextField;
private var downTextField:CSSTextField;
private var overTextField:CSSTextField;
- private var upSprite:Sprite;
- private var downSprite:Sprite;
- private var overSprite:Sprite;
- private var upArrows:Shape;
- private var downArrows:Shape;
- private var overArrows:Shape;
+ private var upSprite:CSSSprite;
+ private var downSprite:CSSSprite;
+ private var overSprite:CSSSprite;
+ private var upArrows:CSSShape;
+ private var downArrows:CSSShape;
+ private var overArrows:CSSShape;
/**
* The text that is displayed in the view.
@@ -224,7 +215,12 @@ package org.apache.flex.html.beads
upTextField.text = value;
downTextField.text = value;
overTextField.text = value;
-
+ upTextField.height = upTextField.textHeight + 5;
+ downTextField.height = downTextField.textHeight + 5;
+ overTextField.height = overTextField.textHeight + 5;
+ upTextField.y = (hh - upTextField.height) / 2;
+ downTextField.y = (hh - downTextField.height) / 2;
+ overTextField.y = (hh - overTextField.height) / 2;
}
private var _popUp:IStrand;
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9d1950f5/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 6a39157..49f3608 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
@@ -27,9 +27,7 @@ package org.apache.flex.html.beads
import org.apache.flex.core.ValuesManager;
import org.apache.flex.events.Event;
import org.apache.flex.events.IEventDispatcher;
- import org.apache.flex.utils.CSSUtils;
- import org.apache.flex.utils.SolidBorderUtil;
- import org.apache.flex.utils.StringTrimmer;
+ import org.apache.flex.utils.CSSBorderUtils;
/**
* The SingleLineBorderBead class draws a single line solid border.
@@ -86,110 +84,8 @@ package org.apache.flex.html.beads
var gd:IGraphicsDrawing = _strand.getBeadByType(IGraphicsDrawing) as IGraphicsDrawing;
if( this == gd ) g.clear();
-
- var borderColor:uint;
- var borderThickness:uint;
- var borderStyle:String;
- var borderStyles:Object = ValuesManager.valuesImpl.getValue(_strand, "border", state);
- if (borderStyles is Array)
- {
- borderColor = CSSUtils.toColor(borderStyles[2]);
- borderStyle = borderStyles[1];
- borderThickness = borderStyles[0];
- }
- else if (borderStyles is String)
- borderStyle = borderStyles as String;
- var value:Object = ValuesManager.valuesImpl.getValue(_strand, "border-style", state);
- if (value != null)
- borderStyle = value as String;
- value = ValuesManager.valuesImpl.getValue(_strand, "border-color", state);
- if (value != null)
- borderColor = CSSUtils.toColor(value);
- value = ValuesManager.valuesImpl.getValue(_strand, "border-width", state);
- if (value != null)
- borderThickness = value as uint;
- var borderRadius:String;
- var borderEllipseWidth:Number = NaN;
- var borderEllipseHeight:Number = NaN;
- value = ValuesManager.valuesImpl.getValue(_strand, "border-radius", state);
- if (value != null)
- {
- if (value is Number)
- borderEllipseWidth = value as Number;
- else
- {
- borderRadius = value as String;
- var arr:Array = StringTrimmer.splitAndTrim(borderRadius, "/");
- borderEllipseWidth = CSSUtils.toNumber(arr[0]);
- if (arr.length > 1)
- borderEllipseHeight = CSSUtils.toNumber(arr[1]);
- }
- }
- 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);
- }
+ CSSBorderUtils.draw(g, w, h, host, state, false, false);
}
}
}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9d1950f5/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/SolidBackgroundBead.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/SolidBackgroundBead.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/SolidBackgroundBead.as
index ffa5502..8c755de 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/SolidBackgroundBead.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/SolidBackgroundBead.as
@@ -86,6 +86,12 @@ package org.apache.flex.html.beads
if( bgAlpha != null ) {
opacity = Number(bgAlpha);
}
+
+ var corner:Object = ValuesManager.valuesImpl.getValue(host, "border-radius");
+ if( corner != null ) {
+ borderRadius = Number(corner);
+ }
+
changeHandler(null);
}
@@ -139,6 +145,31 @@ package org.apache.flex.html.beads
changeHandler(null);
}
+ private var _borderRadius:Number;
+
+ /**
+ * The opacity (alpha).
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function get borderRadius():Number
+ {
+ return _borderRadius;
+ }
+
+ /**
+ * @private
+ */
+ public function set borderRadius(value:Number):void
+ {
+ _borderRadius = value;
+ if( _strand )
+ changeHandler(null);
+ }
+
private function changeHandler(event:Event):void
{
var g:Graphics = Sprite(host).graphics;
@@ -149,7 +180,10 @@ package org.apache.flex.html.beads
if( this == gd ) g.clear();
g.beginFill(backgroundColor,opacity);
- g.drawRect(0, 0, w, h);
+ if (isNaN(borderRadius))
+ g.drawRect(0, 0, w, h);
+ else
+ g.drawRoundRect(0, 0, w, h, borderRadius);
g.endFill();
}
}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9d1950f5/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/controllers/DropDownListController.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/controllers/DropDownListController.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/controllers/DropDownListController.as
index 48d9a6a..cc295fc 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/controllers/DropDownListController.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/controllers/DropDownListController.as
@@ -82,8 +82,7 @@ package org.apache.flex.html.beads.controllers
popUpModel.dataProvider = selectionModel.dataProvider;
popUpModel.selectedIndex = selectionModel.selectedIndex;
DisplayObject(viewBead.popUp).width = DisplayObject(_strand).width;
- DisplayObject(viewBead.popUp).height = 200;
- var pt:Point = new Point(DisplayObject(_strand).x, DisplayObject(_strand).y);
+ var pt:Point = new Point(DisplayObject(_strand).x, DisplayObject(_strand).y + DisplayObject(_strand).height);
pt = DisplayObject(_strand).parent.localToGlobal(pt);
DisplayObject(viewBead.popUp).x = pt.x;
DisplayObject(viewBead.popUp).y = pt.y;
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9d1950f5/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/DropDownListList.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/DropDownListList.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/DropDownListList.as
index b2a8a14..199744b 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/DropDownListList.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/DropDownListList.as
@@ -58,6 +58,7 @@ package org.apache.flex.html.supportClasses
public function DropDownListList()
{
super();
+ className = "dropdown-menu";
}
/**
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9d1950f5/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 df61633..ed89c9a 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
@@ -83,14 +83,14 @@ org.apache.flex.html.DropDownList.prototype.selectChanged =
function(event) {
var select;
- select = event.currentTarget;
+ select = event.target;
- this.selectedItem = select.options[select.selectedIndex].value;
+ this.selectedIndex = parseInt(select.id, 10);
- this.popup.parentNode.removeChild(this.popup);
- this.popup = null;
+ this.menu.parentNode.removeChild(this.menu);
+ this.menu = null;
- this.dispatchEvent(event);
+ this.dispatchEvent('change');
};
@@ -101,9 +101,9 @@ org.apache.flex.html.DropDownList.prototype.selectChanged =
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;
+ if (this.menu) {
+ this.menu.parentNode.removeChild(this.menu);
+ this.menu = null;
}
};
@@ -135,6 +135,7 @@ org.apache.flex.html.DropDownList.prototype.buttonClicked =
left = pn.offsetLeft;
width = pn.offsetWidth;
+ /*
popup = document.createElement('div');
popup.className = 'dropdown-menu';
popup.id = 'test';
@@ -145,40 +146,40 @@ org.apache.flex.html.DropDownList.prototype.buttonClicked =
popup.style.margin = '0px auto';
popup.style.padding = '0px';
popup.style.zIndex = '10000';
+ */
- this.menu = select = document.createElement('select');
+ this.menu = select = document.createElement('ul');
select.style.width = width.toString() + 'px';
- goog.events.listen(select, 'change', goog.bind(this.selectChanged, this));
- opts = select.options;
+ goog.events.listen(select, 'click', goog.bind(this.selectChanged, this));
+ select.className = 'dropdown-menu';
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];
+ opt = document.createElement('li');
+ opt.style.backgroundColor = 'transparent';
+ var ir = document.createElement('a');
+ ir.innerHTML = dp[i];
+ ir.id = i.toString();
+ if (i == this.selectedIndex)
+ ir.className = 'dropdown-menu-item-renderer-selected';
+ else
+ ir.className = 'dropdown-menu-item-renderer';
+ opt.appendChild(ir);
+ select.appendChild(opt);
}
- this.popup = popup;
-
- popup.appendChild(select);
- document.body.appendChild(popup);
+ this.element.appendChild(select);
};
Object.defineProperties(org.apache.flex.html.DropDownList.prototype, {
dataProvider: {
/** @this {org.apache.flex.html.DropDownList} */
+ get: function() {
+ return this.model.dataProvider;
+ },
+ /** @this {org.apache.flex.html.DropDownList} */
set: function(value) {
var dp, i, n, opt;