royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [royale-asjs] branch develop updated: restrict DateField input to numbers and remove double line between textinput and button to refine visuals
Date Wed, 22 Aug 2018 15:41:07 GMT
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 <carlosrovira@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
                 


Mime
View raw message