Mobile Touch Widgets

src/aria/touch/widgets/Button.js

@@ -0,0 +1,131 @@
+/*
+ * Copyright 2012 Amadeus s.a.s.
+ * Licensed 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.
+ */
+
+Aria.classDefinition({
+    $classpath : "aria.touch.widgets.Button",
+    $extends : "aria.html.Element",
+    $dependencies : ["aria.touch.widgets.ButtonCfg", "aria.touch.Tap", "aria.utils.ClassList"],
+    $css : ["aria.touch.widgets.ButtonCSS"],
+    $statics : {
+        INVALID_USAGE : "Widget %1 can only be used as a %2.",
+        BUTTON_CLASS : "appButton",
+        LINK_CLASS : "appLink"
+    },
+    $constructor : function (cfg, context, line) {
+        /**
+         * Ref to hold the cancel id of the timer delay
+         * @type String
+         * @protected
+         */
+        this._timerId = null;
+
+        cfg.tagName = cfg.tagName || "div";
+
+        cfg.on = cfg.on || {};
+        /**
+         * delay for highlighting the state change in milliseconds
+         * @type Integer
+         * @protected
+         */
+        this._timeDelay = cfg.delay || 30;
+        /**
+         * Flag used for switching between Button and Link.
+         * @type Boolean
+         * @protected
+         */
+        this._isLink = cfg.isLink;
+        this.$cfgBean = this.$cfgBean || "aria.touch.widgets.ButtonCfg.Properties";
+
+        this.$Element.constructor.call(this, cfg, context, line);
+
+        if (cfg.attributes && !cfg.attributes.disabled) {
+            this._registerListeners(cfg);
+        }
+
+        // Needed for browsers where classList doesn't existnatively (e.g Android < 3 Version and IOS < 5.X)
+        this._classList = null;
+    },
+    $destructor : function () {
+        this.timerId = null;
+        this.isLink = null;
+        if (this._classList) {
+            this._classList.$dispose();
+            this._classList = null;
+        }
+        this.$Element.$destructor.call(this);
+
+    },
+    $prototype : {
+
+        /**
+         * Initialization method called after the markup of the widget has been inserted in the DOM.
+         */
+        initWidget : function () {
+            this.$Element.initWidget.call(this);
+            this._classList = new aria.utils.ClassList(this._domElt);
+            var classType = (this._isLink) ? this.LINK_CLASS : this.BUTTON_CLASS;
+            this._classList.add(classType);
+
+        },
+
+        _manageEvents : function (event) {
+            if (event.type == "tapstart") {
+                this.timerId = aria.core.Timer.addCallback({
+                    fn : this._delayedHighlightCB,
+                    scope : this,
+                    delay : this._timeDelay
+                });
+            }
+            if (event.type == "tapcancel" || event.type == "tap") {
+                if (this.timerId) {
+                    aria.core.Timer.cancelCallback(this.timerId);
+                }
+
+                if (event.type == "tapcancel" || (event.type == "tap" && !this.isLink)) {
+                    this._classList.remove("pressed");
+                }
+            }
+
+        },
+
+        _delayedHighlightCB : function (args) {
+            this._classList.add("pressed");
+        },
+
+        /**
+         * Add special listeners on top of the ones specified in configuration.
+         * @param {aria.html.beans.TextInputCfg.Properties} cfg Widget configuration.
+         * @protected
+         */
+        _registerListeners : function (cfg) {
+            var listeners = cfg.on;
+
+            this._chainListener(listeners, "tapstart", {
+                fn : this._manageEvents,
+                scope : this
+            });
+
+            this._chainListener(listeners, "tapcancel", {
+                fn : this._manageEvents,
+                scope : this
+            });
+
+            this._chainListener(listeners, "tap", {
+                fn : this._manageEvents,
+                scope : this
+            });
+        }
+    }
+});

src/aria/touch/widgets/ButtonCSS.tpl.css

@@ -0,0 +1,82 @@
+/*
+ * Copyright 2012 Amadeus s.a.s.
+ * Licensed 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.
+ */
+
+{CSSTemplate {
+    $classpath : "aria.touch.widgets.ButtonCSS"
+}}
+
+    {macro main()}
+
+    .appLink , .appButton {
+	position: relative;
+    display: block;
+	font:normal 700 15px/17px tahoma,arial,helvetica,sans-serif;
+    padding: 0.6em 1em;
+    border-radius: 16px;
+	text-align: center;
+    cursor: pointer;
+	}
+	.appLink {
+    background-color:#5393C5;
+    border:solid 1px #6FA0C0;
+	color:#fff;
+  }
+
+  .appLink.pressed {
+    outline: 0 none;
+	background-color:#5393C5;
+	background: -webkit-linear-gradient(#5393C5, #6FACD5) repeat scroll 0 0 #5393C5;
+	background: -ms-linear-gradient(#5393C5, #6FACD5) repeat scroll 0 0 #5393C5;
+	background: -moz-linear-gradient(#5393C5, #6FACD5) repeat scroll 0 0 #5393C5;
+	background: -o-linear-gradient(#5393C5, #6FACD5) repeat scroll 0 0 #5393C5;
+	background: linear-gradient(#5393C5, #6FACD5) repeat scroll 0 0 #5393C5;
+	/*http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx*/
+	 filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#5393C5', endColorstr='#6FACD5', GradientType=0)
+  }
+
+  .appButton {
+    background-color:#F1F1F1;
+    border:solid 1px #BABABA;
+	color:#000;
+  }
+
+  .appButton.pressed {
+    outline: 0 none;
+	background-color:#F1F1F1;
+	background: -webkit-linear-gradient(#F1F1F1, #D6D6D6) repeat scroll 0 0 #F1F1F1;
+	background: -ms-linear-gradient(#F1F1F1, #D6D6D6) repeat scroll 0 0 #F1F1F1;
+	background: -moz-linear-gradient(#F1F1F1, #D6D6D6) repeat scroll 0 0 #F1F1F1;
+	background: -o-linear-gradient(#F1F1F1, #D6D6D6) repeat scroll 0 0 #F1F1F1;
+	background: linear-gradient(#F1F1F1, #D6D6D6) repeat scroll 0 0 #F1F1F1;
+	/*http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx*/
+	 filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#F1F1F1', endColorstr='#D6D6D6', GradientType=0)
+  }
+
+  .appLink[disabled], .appButton[disabled]  {
+	border: solid 1px #E8E8E8;
+	color:#B9BEC0;
+    background: #F1F1F1; /* Old browsers */
+    background: -webkit-linear-gradient(#F1F1F1, #F7F7F7) repeat scroll 0 0 #BABABA;
+	background: -ms-linear-gradient(#F1F1F1, #F7F7F7) repeat scroll 0 0 #BABABA;
+	background: -moz-linear-gradient(#F1F1F1, #F7F7F7) repeat scroll 0 0 #BABABA;
+	background: -o-linear-gradient(#F1F1F1, #F7F7F7) repeat scroll 0 0 #BABABA;
+	background: linear-gradient(#F1F1F1, #F7F7F7) repeat scroll 0 0 #BABABA;
+	/*http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx*/
+	 filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#F1F1F1', endColorstr='#BABABA',GradientType=0) /* IE6-9 */
+  }
+
+    {/macro}
+
+{/CSSTemplate}

src/aria/touch/widgets/ButtonCfg.js

@@ -0,0 +1,54 @@
+/*
+ * Copyright 2012 Amadeus s.a.s.
+ * Licensed 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.
+ */
+Aria.beanDefinitions({
+    $package : "aria.touch.widgets.ButtonCfg",
+    $description : "Configuration for Button widget.",
+    $namespaces : {
+        "json" : "aria.core.JsonTypes",
+        "base" : "aria.html.beans.ElementCfg",
+        "common" : "aria.widgetLibs.CommonBeans"
+    },
+    $beans : {
+        "Properties" : {
+            $type : "base:Properties",
+            $description : "Properties of a Button widget.",
+            $properties : {
+                "on" : {
+                    $type : "base:Properties.$properties.on",
+                    $properties : {
+                        "type" : {
+                            $type : "common:Callback",
+                            $description : "Callback called when the user interacts with the button.."
+                        }
+                    }
+                },
+                "isLink" : {
+                    $type : "json:Boolean",
+                    $description : "Whether the button is a link, which means a different highlighting pattern.",
+                    $default : false
+                },
+                "delay" : {
+                    $type : "json:Integer",
+                    $description : "delay between and tapstart event and highlighting of the link or button in miliseconds."
+
+                },
+                "tagName" : {
+                    $type : "base:Properties.$properties.tagName",
+                    $description : "Tag to be Used for Button Markup."
+                }
+            }
+        }
+    }
+});