You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2018/08/22 15:41:07 UTC
[royale-asjs] branch develop updated: restrict DateField input to
numbers and remove double line between textinput and button to refine
visuals
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/develop by this push:
new 78ad4e4 restrict DateField input to numbers and remove double line between textinput and button to refine visuals
78ad4e4 is described below
commit 78ad4e4476de06f15946b92f50f1a415441c7d7d
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Wed Aug 22 17:41:01 2018 +0200
restrict DateField input to numbers and remove double line between textinput and button to refine visuals
---
.../datefield/DateFieldTextInputRestrictBead.as | 154 +++++++++++++++++++++
.../royale/jewel/beads/views/DateFieldView.as | 10 +-
.../JewelTheme/src/main/resources/defaults.css | 2 +-
.../main/sass/components-primary/_datefield.sass | 12 +-
4 files changed, 163 insertions(+), 15 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/datefield/DateFieldTextInputRestrictBead.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/datefield/DateFieldTextInputRestrictBead.as
new file mode 100644
index 0000000..7767d1a
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/datefield/DateFieldTextInputRestrictBead.as
@@ -0,0 +1,154 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.royale.jewel.beads.controls.datefield
+{
+ COMPILE::JS
+ {
+ import goog.events.BrowserEvent;
+ }
+ COMPILE::SWF
+ {
+ import flash.events.TextEvent;
+ import org.apache.royale.core.CSSTextField;
+ import org.apache.royale.html.beads.ITextFieldView;
+ }
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+
+ /**
+ * The DateFieldTextInputRestrictBead class is a specialty bead that is used
+ * by DateField control. The bead prevents non-numeric entry into the text input
+ * area.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class DateFieldTextInputRestrictBead implements IBead
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function DateFieldTextInputRestrictBead()
+ {
+ }
+
+ private var _strand:IStrand;
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+
+ COMPILE::SWF
+ {
+ IEventDispatcher(value).addEventListener("viewChanged",viewChangeHandler);
+ }
+ COMPILE::JS
+ {
+ var host:UIBase = _strand as UIBase;
+ host.element.addEventListener("keypress", validateInput, false);
+ }
+ }
+
+ /**
+ * @private
+ */
+ COMPILE::SWF
+ private function viewChangeHandler(event:Event):void
+ {
+ // get the ITextFieldView bead, which is required for this bead to work
+ var textView:ITextFieldView = _strand.getBeadByType(ITextFieldView) as ITextFieldView;
+ if (textView) {
+ var textField:CSSTextField = textView.textField;
+ textField.restrict = "0-9";
+ // listen for changes to this textField and prevent non-numeric values
+ textField.addEventListener(TextEvent.TEXT_INPUT, handleTextInput);
+ }
+ else {
+ throw new Error("NumericOnlyTextInputBead requires strand to have an ITextFieldView bead");
+ }
+ }
+
+ /**
+ * @private
+ */
+ COMPILE::SWF
+ private function handleTextInput(event:TextEvent):void
+ {
+ var insert:String = event.text;
+ var caretIndex:int = (event.target as CSSTextField).caretIndex;
+ var current:String = (event.target as CSSTextField).text;
+ var value:String = current.substring(0,caretIndex) + insert + current.substr(caretIndex);
+ var n:Number = Number(value);
+ if (isNaN(n)) event.preventDefault();
+ }
+
+ COMPILE::JS
+ private function validateInput(event:BrowserEvent):void
+ {
+ var code:int = event.charCode;
+
+ // backspace or delete
+ if (event.keyCode == 8 || event.keyCode == 46) return;
+
+ // tab or return/enter
+ if (event.keyCode == 9 || event.keyCode == 13) return;
+
+ // left or right cursor arrow
+ if (event.keyCode == 37 || event.keyCode == 39) return;
+
+ var key:String = String.fromCharCode(code);
+
+ var regex:RegExp = /[0-9]|\./;
+ if (!regex.test(key)) {
+ event["returnValue"] = false;
+ if (event.preventDefault) event.preventDefault();
+ return;
+ }
+ var cursorStart:int = event.target.selectionStart;
+ var cursorEnd:int = event.target.selectionEnd;
+ var left:String = event.target.value.substring(0, cursorStart);
+ var right:String = event.target.value.substr(cursorEnd);
+ var complete:String = left + key + right;
+ if (isNaN(parseFloat(complete))) {
+ event["returnValue"] = false;
+ if (event.preventDefault) event.preventDefault();
+ }
+
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateFieldView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateFieldView.as
index 6f53d7b..cc7adcb 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateFieldView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateFieldView.as
@@ -35,6 +35,7 @@ package org.apache.royale.jewel.beads.views
import org.apache.royale.jewel.Button;
import org.apache.royale.jewel.TextInput;
import org.apache.royale.jewel.beads.controls.textinput.MaxNumberCharacters;
+ import org.apache.royale.jewel.beads.controls.datefield.DateFieldTextInputRestrictBead;
COMPILE::SWF
{
//import org.apache.royale.jewel.beads.views.TextInputView;
@@ -98,10 +99,10 @@ package org.apache.royale.jewel.beads.views
/**
* @royaleignorecoercion org.apache.royale.core.UIBase
*/
- protected function getHost():UIBase
- {
- return _strand as UIBase;
- }
+ protected function getHost():UIBase
+ {
+ return _strand as UIBase;
+ }
/**
* @copy org.apache.royale.core.IBead#strand
@@ -116,6 +117,7 @@ package org.apache.royale.jewel.beads.views
super.strand = value;
_textInput = new TextInput();
+ _textInput.addBead(new DateFieldTextInputRestrictBead());
var maxNumberCharacters:MaxNumberCharacters = new MaxNumberCharacters();
maxNumberCharacters.maxlength = 10;
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 53e7a6f..58f1918 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -289,13 +289,13 @@ j|Card {
.jewel.datefield .jewel.textinput input {
width: 8em;
- background: linear-gradient(white, #f3f3f3);
border-radius: 0.25rem 0px 0px 0.25rem;
}
.jewel.datefield .jewel.button {
color: transparent;
border-bottom-left-radius: 0px;
border-top-left-radius: 0px;
+ border-left: 0px;
}
.jewel.datefield .jewel.button::after {
background-size: 66%;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datefield.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datefield.sass
index 64b8686..357f9e3 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datefield.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datefield.sass
@@ -28,21 +28,13 @@ $datefield-border-radius: $border-radius
.jewel.textinput
input
width: $datefield-input-width
- @if $flat
- background: $default-color
- border: 0px solid
- @else
- background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%))
- //border: 1px solid darken($default-color, 15%)
border-radius: $datefield-border-radius 0px 0px $datefield-border-radius
-
- // &:focus
- // border-right: 1px
- // border-right-color: darken($default-color, 15%)
+
.jewel.button
color: transparent
border-bottom-left-radius: 0px
border-top-left-radius: 0px
+ border-left: 0px
&::before