From 95decbb9561068a28a29e5482bdb9cff11beb104 Mon Sep 17 00:00:00 2001
From: Sachin <sachin.kumar@goodworklabs.com>
Date: Fri, 27 Jul 2018 16:25:33 +0530
Subject: [PATCH] Issue #8 feat: option add ckeditor and validation

---
 editor/controllers/mcq-controller.js      | 42 +++++++++++++++++++++--
 editor/styles/style.css                   | 17 +++++++++
 editor/templates/horizontal_template.html | 11 +++---
 3 files changed, 61 insertions(+), 9 deletions(-)

diff --git a/editor/controllers/mcq-controller.js b/editor/controllers/mcq-controller.js
index 300ac2d..950e311 100644
--- a/editor/controllers/mcq-controller.js
+++ b/editor/controllers/mcq-controller.js
@@ -58,11 +58,12 @@ angular.module('mcqApp', [])
     };
     $scope.mcqFormData.media = [];
     $scope.editMedia = [];
-    var questionInput = CKEDITOR.replace('ckedit', {// eslint-disable-line no-undef
+    $scope.ckConfig={// eslint-disable-line no-undef
       customConfig: ecEditor.resolvePluginResource('org.ekstep.questionunit', '1.0', "editor/ckeditor-config.js"),
       skin: 'moono-lisa,' + CKEDITOR.basePath + "skins/moono-lisa/",// eslint-disable-line no-undef
       contentsCss: CKEDITOR.basePath + "contents.css"// eslint-disable-line no-undef
-    });
+    };
+    var questionInput = CKEDITOR.replace('ckedit',$scope.ckConfig);
     questionInput.on('change', function() {
       $scope.mcqFormData.question.text = this.getData();
     });
@@ -115,9 +116,30 @@ angular.module('mcqApp', [])
       };
       if ($scope.mcqFormData.options.length < 8) $scope.mcqFormData.options.push(option);
     }
+    $scope.getTextFromHTML = function(html) {
+      var div = document.createElement('div');
+      div.innerHTML = html;
+      return div.textContent || div.innerText;
+    };
     $scope.formValidation = function () {
       var opSel = false;
       var valid = false;
+      var optionElems = ecEditor.jQuery('.option-text');
+      optionElems.each(function (i, op) {
+          var index = op.id.split('options_')[1];
+          ecEditor.jQuery('option-box').removeClass('has-errorCard');
+          if(index && CKEDITOR.instances[op.id]) {
+            $scope.mcqFormData.options[index].text = CKEDITOR.instances[op.id].getData();
+            var opText = $scope.getTextFromHTML($scope.mcqFormData.options[index].text);
+            if(opText.length <= 0) {
+              ecEditor.jQuery('#option-box-' + index).addClass('has-errorCard');
+              $scope.mcqForm.$valid = false;
+            }
+          } else {
+            ecEditor.jQuery('#option-box-' + index).addClass('has-errorCard');
+            $scope.mcqForm.$valid = false;
+          }
+      });
       var formValid = $scope.mcqForm.$valid && $scope.mcqFormData.options.length > 1;
       $scope.submitted = true;
       if(!($scope.mcqFormData.question.text.length || $scope.mcqFormData.question.image.length || $scope.mcqFormData.question.audio.length)){
@@ -316,6 +338,22 @@ angular.module('mcqApp', [])
         $scope.$safeApply();
       });
     }
+    $scope.optionEditable = function(event) {
+      var optionElement = ecEditor.jQuery(event.target);
+      if(!optionElement.hasClass('option-text')) {
+        optionElement = optionElement.parents('.option-text');
+      }
+      if(!optionElement.hasClass('cke_editable_inline')) {
+        optionElement.attr('contenteditable', true);
+        optionElement.attr('title', '');
+        var editor = CKEDITOR.inline(optionElement[0].id, $scope.ckConfig);
+        editor.on('blur', function (e) {
+          ecEditor.jQuery('.cke_float').hide();
+        });
+        // optionElement.focus();
+      }
+      $scope.generateTelemetry({type: 'TOUCH', id: 'input', target: {id: 'questionunit-mcq-answer', ver: '', type: 'input'}})
+    };
     $scope.init();
   }]);
 //# sourceURL=horizontalMCQ.js
\ No newline at end of file
diff --git a/editor/styles/style.css b/editor/styles/style.css
index dab545c..7700ec0 100644
--- a/editor/styles/style.css
+++ b/editor/styles/style.css
@@ -186,3 +186,20 @@ i.large.icon.delete-icon{
 .ck-error{
   border: 1px solid red;
 }
+.cke_float {
+  z-index: 9999999 !important;
+}
+
+.option-text {
+  margin: 0 20px 0 20px;
+  border-bottom: 1px #eee solid;
+  cursor: text;
+}
+
+.option-text::before {
+  content: 'Enter answer';
+  color: #aaa;
+  text-align: center;
+  position: relative;
+  display: block;
+}
diff --git a/editor/templates/horizontal_template.html b/editor/templates/horizontal_template.html
index 5c8e304..e8e3d88 100644
--- a/editor/templates/horizontal_template.html
+++ b/editor/templates/horizontal_template.html
@@ -61,17 +61,14 @@
                             </span>
             </div>
             <div ng-repeat="(key, value) in mcqFormData.options" class="outer-segment">
-              <div class="ui segments inner-segment" ng-class="{cardBorder: focused, 'has-errorCard': submitted && mcqForm['options_' + $index].$error.required}" id="eachCard">
+              <div class="ui segments inner-segment option-box" ng-class="{cardBorder: focused, 'has-errorCard': submitted && mcqForm['options_' + $index].$error.required}" id="option-box-{{$index}}">
                 <div class="ui segment">
                   <div class="ui grid">
-                    <div class="eleven wide column">
-                      <div class="form-group segment textBoxDiv">
-                        <input type="text" class="form-control textbox" ng-class="{'has-success':mcqForm['options_' + $index].$valid, 'has-error': submitted && mcqForm['options_' + $index].$error.required}" placeholder="Enter answer" name="options_{{$index}}" ng-model="mcqFormData.options[key].text" maxlength="1000" ng-init="focused = false" ng-focus="focused = true;generateTelemetry({type: 'TOUCH', id: 'input', target: {id: 'questionunit-mcq-answer', ver: '', type: 'input'}})" ng-blur="focused = false" ng-required="!(mcqFormData.options[key].text.length || mcqFormData.options[key].image.length || mcqFormData.options[key].audio.length)"/>
+                    <div class="one column row">
+                      <div class="form-group one column row">
+                        <div ng-click="optionEditable($event)" class="form-control option-text" id="options_{{$index}}" name="options_{{$index}}">{{mcqFormData.options[key].text}}</div>
                       </div>
                     </div>
-                    <div class="one wide column text-len">
-                      <span class="maxLengthText">{{value.text.length}}<span class="length-divider">/</span>1000</span>
-                    </div>
                     <div class="four column row">
                       <div class="two wide column" ng-if="mcqFormData.options[key].image.length > 0">
                         <img src="{{mcqFormData.options[key].image}}" class="imgWidth" ng-click="addImage(key)"/>