feat(ui/modules/Linphone/TelKeypad): supports keyboard (close #106)

resources.qrc

@@ -368,6 +368,7 @@
     <file>ui/modules/Linphone/Styles/Timeline/TimelineStyle.qml</file>
     <file>ui/modules/Linphone/Styles/View/SipAddressesViewStyle.qml</file>
     <file>ui/modules/Linphone/TelKeypad/TelKeypadButton.qml</file>
+    <file>ui/modules/Linphone/TelKeypad/TelKeypad.js</file>
     <file>ui/modules/Linphone/TelKeypad/TelKeypad.qml</file>
     <file>ui/modules/Linphone/Timeline/Timeline.js</file>
     <file>ui/modules/Linphone/Timeline/Timeline.qml</file>

ui/modules/Linphone/TelKeypad/TelKeypad.js

+// =============================================================================
+// `TelKeypad.qml` Logic.
+// =============================================================================
+
+.import Linphone.Styles 1.0 as LinphoneStyles
+
+.import 'qrc:/ui/scripts/Utils/utils.js' as Utils
+
+// =============================================================================
+
+function mapKeyToButtonIndex (key) {
+  // Digits.
+  if (key === 48) {
+    return 13
+  }
+
+  if (key >= 49 && key <= 57) {
+    return (key - 49) + parseInt((key - 49) / 3)
+  }
+
+  // A, B, C and D.
+  if (key >= 65 && key <= 68) {
+    return (key - 65) * 4 + 3
+  }
+
+  // *
+  if (key === 42) {
+    return 12
+  }
+
+  // #
+  if (key === 35) {
+    return 14
+  }
+}
+
+function sendDtmf (index) {
+  var children = grid.children[index]
+
+  children.color = LinphoneStyles.TelKeypadStyle.button.color.pressed
+  children.clicked()
+
+  var timeout = children._timeout
+  if (timeout) {
+    Utils.clearTimeout(timeout)
+  }
+
+  children._timeout = Utils.setTimeout(dragBox, 100, (function (index) {
+    grid.children[index].color = LinphoneStyles.TelKeypadStyle.button.color.normal
+  }).bind(dragBox, index))
+}

ui/modules/Linphone/TelKeypad/TelKeypad.qml

@@ -3,7 +3,8 @@ import QtQuick.Layouts 1.3
 
 import Common 1.0
 import Linphone.Styles 1.0
-import Utils 1.0
+
+import 'TelKeypad.js' as Logic
 
 // =============================================================================
 
@@ -23,6 +24,14 @@ Rectangle {
   height: TelKeypadStyle.height
   width: TelKeypadStyle.width
 
+  Keys.onPressed: {
+    var index = Logic.mapKeyToButtonIndex(event.key)
+    if (index != null) {
+      event.accepted = true;
+      Logic.sendDtmf(index)
+    }
+  }
+
   // ---------------------------------------------------------------------------
 
   GridLayout {
@@ -82,24 +91,11 @@ Rectangle {
       _mouseX = mouse.x
       _mouseY = mouse.y
       _id = parseInt(_mouseX / (parent.width / grid.columns)) + parseInt(_mouseY / (parent.height / grid.rows)) * grid.columns
-    }
 
-    onReleased: {
-      if (Math.abs(_mouseX - mouse.x) <= delta && Math.abs(_mouseY - mouse.y) <= delta) {
-        var children = grid.children[_id]
-
-        children.color = TelKeypadStyle.button.color.pressed
-        children.clicked()
-
-        var timeout = children._timeout
-        if (timeout) {
-          Utils.clearTimeout(timeout)
-        }
-
-        children._timeout = Utils.setTimeout(this, 100, (function (id) {
-          grid.children[id].color = TelKeypadStyle.button.color.normal
-        }).bind(this, _id))
-      }
+      telKeypad.focus = true
     }
+
+    onReleased: Math.abs(_mouseX - mouse.x) <= delta && Math.abs(_mouseY - mouse.y) <= delta &&
+      Logic.sendDtmf(_id)
   }
 }