feat: options as clickable and buttons as buttons (#100)

watson-developer-cloud · Sep 24, 2018 · 33fb887 · 33fb887
1 parent 53e3e8a
commit 33fb887
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 14 deletions.
diff --git a/ui/css/conversation.css b/ui/css/conversation.css
@@ -230,6 +230,11 @@ input#user-input:-moz-placeholder {
     background: #00B4A0;
 }
 
+.options-list {
+    cursor: pointer;
+    text-decoration: underline;
+  }
+
 .option-buttons {
   background-color: #8d25e8;
   border-radius: 6px;

diff --git a/ui/js/conversation.js b/ui/js/conversation.js
@@ -258,21 +258,21 @@ var Conversation = (function () {
   function getOptions(optionsList, preference) {
     var list = '';
     var i = 0;
-    if (optionsList !== null) {
-      if (preference === 'text') {
-        list = '<ul>';
-        for (i = 0; i < optionsList.length; i++) {
-          if (optionsList[i].value) {
-            list += '<li>' + optionsList[i].label + '</li>';
-          }
+    if (preference === 'text') {
+      list = '<ul>';
+      for (i = 0; i < optionsList.length; i++) {
+        if (optionsList[i].value) {
+          list += '<li><div class="options-list" onclick="Conversation.sendMessage(\'' +
+            optionsList[i].value.input.text + '\');" >' + optionsList[i].label + '</div></li>';
         }
-        list += '</ul>';
-      } else if (preference === 'button') {
-        for (i = 0; i < optionsList.length; i++) {
-          if (optionsList[i].value) {
-            var item = '<p class="option-buttons" onclick="Conversation.sendMessage(\'' + optionsList[i].value.input.text + '\');" >' + optionsList[i].label + '</p>';
-            list += item;
-          }
+      }
+      list += '</ul>';
+    } else if (preference === 'button') {
+      list = '<br>';
+      for (i = 0; i < optionsList.length; i++) {
+        if (optionsList[i].value) {
+          var item = '<p class="option-buttons" onclick="Conversation.sendMessage(\'' + optionsList[i].value.input.text + '\');" >' + optionsList[i].label + '</p>';
+          list += item;
         }
       }
     }