Added easy-autocomplete widget (#11 - add easyautocomplete plugin for…

… text editor)
surveyjs · Dec 4, 2017 · d7b231b · d7b231b
1 parent cea3413
commit d7b231b
Show file tree

Hide file tree

Showing 6 changed files with 271 additions and 173 deletions.
diff --git a/examples/jquery/index.html b/examples/jquery/index.html
@@ -1,27 +1,40 @@
 <!DOCTYPE html>
 <html>
+
 <head>
     <title>Welcome to JQuery</title>
     <script src="https://unpkg.com/jquery"></script>
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
 
     <!-- custom widgets -->
-        <!-- select2 -->
-            <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
-            <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
-        <!-- select2 -->
+    <!-- select2 -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
+    <!-- select2 -->
     <!-- eo custom widgets-->
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="./index.css">
+    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
+    <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css" type="text/css" rel="stylesheet"
+    />
+
+    <!-- JS file -->
+    <script src="https://unpkg.com/easy-autocomplete"></script>
+
+    <!-- CSS file -->
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/easy-autocomplete.css">
 
     <!-- <script src="https://unpkg.com/survey-jquery"></script> TODO uncomment and remove the import below after the surveyjs release-->
-    <script src="http://127.0.0.1:8080/packages/survey-jquery/survey.jquery.js"></script> 
-    
+    <script src="http://127.0.0.1:7777/packages/survey-jquery/survey.jquery.js"></script>
+
 
     <script src="../../package/surveyjs-widgets.js"></script>
 </head>
 
 <body>
-<div id="surveyElement">
-</div>
-<script src="./index.js"></script>
+    <div id="surveyElement">
+    </div>
+    <script src="./index.js"></script>
 </body>
-</html>
+
+</html>
diff --git a/examples/jquery/index.js b/examples/jquery/index.js
@@ -1,22 +1,55 @@
 function init() {
-    //$.material.init();
+  //$.material.init();
 
-    var json = { questions: [
-        { type: "dropdown", renderAs: "select2", choicesByUrl: { url: "https://restcountries.eu/rest/v1/all" }, name: "countries", title: "Please select the country you have arrived from:"}
-    ]};
+  var json = {
+    questions: [
+      {
+        type: "dropdown",
+        renderAs: "select2",
+        choicesByUrl: { url: "https://restcountries.eu/rest/v1/all" },
+        name: "countries",
+        title: "Please select the country you have arrived from:"
+      },
+      {
+        name: "date",
+        type: "datepicker",
+        inputType: "date",
+        title: "Your favorite date:",
+        dateFormat: "mm/dd/yy",
+        isRequired: true
+      },
+      {
+        name: "autocomplete1",
+        title: "Easy-autocomplete:",
+        type: "text",
+        choices: [
+          "fontawesome-stars",
+          "css-stars",
+          "bars-pill",
+          "bars-1to10",
+          "bars-movie",
+          "bars-square",
+          "bars-reversed",
+          "bars-horizontal",
+          "bootstrap-stars",
+          "fontawesome-stars-o"
+        ]
+      }
+    ]
+  };
 
-    Survey.defaultBootstrapCss.navigationButton = "btn btn-primary";
-    //Survey.Survey.cssType = "bootstrapmaterial";
-    Survey.Survey.cssType = "bootstrap";
+  Survey.defaultBootstrapCss.navigationButton = "btn btn-primary";
+  //Survey.Survey.cssType = "bootstrapmaterial";
+  Survey.Survey.cssType = "bootstrap";
 
-    var model = new Survey.Model(json);
-    window.survey = model;
+  var model = new Survey.Model(json);
+  window.survey = model;
 
-    $("#surveyElement").Survey({ 
-        model: survey 
-    });
+  $("#surveyElement").Survey({
+    model: survey
+  });
 }
 
-if(!window["%hammerhead%"]) {
-    init();
+if (!window["%hammerhead%"]) {
+  init();
 }
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
   "devDependencies": {
     "clean-webpack-plugin": "^0.1.17",
     "copy-webpack-plugin": "^4.1.1",
+    "easy-autocomplete": "^1.3.5",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "generate-json-webpack-plugin": "^0.2.2",
     "icheck": "^1.0.2",

diff --git a/src/easy-autocomplete.js b/src/easy-autocomplete.js
@@ -0,0 +1,49 @@
+function init(Survey) {
+  var widget = {
+    name: "autocomplete",
+    title: "Autocomplete",
+    iconName: "icon-autocomplete",
+    widgetIsLoaded: function() {
+      return typeof $ === "function" && !!$.fn.easyAutocomplete;
+    },
+    defaultJSON: {},
+    isFit: function(question) {
+      return question.getType() === "text";
+    },
+    isDefaultRender: true,
+    activatedByChanged: function(activatedBy) {
+      if (Survey.JsonObject.metaData.findProperty("text", "choices") !== null) {
+        return;
+      }
+      Survey.JsonObject.metaData.addProperty("text", {
+        name: "choices:itemvalues",
+        onGetValue: function(obj) {
+          return ItemValue.getData(obj.choices);
+        },
+        onSetValue: function(obj, value) {
+          obj.choices = value;
+        }
+      });
+    },
+    afterRender: function(question, el) {
+      var $el = $(el).is("input") ? $(el) : $(el).find("input");
+      var options = {
+        data: question.choices,
+        placeholder: question.placeholder
+      };
+      $el.easyAutocomplete(options);
+    },
+    willUnmount: function(question, el) {
+      // var $el = $(el).find("input");
+      // $el.autocomplete("destroy");
+    }
+  };
+
+  Survey.CustomWidgetCollection.Instance.addCustomWidget(widget, "customtype");
+}
+
+if (typeof Survey !== "undefined") {
+  init(Survey);
+}
+
+export default init;
diff --git a/src/surveyjs-widgets.js b/src/surveyjs-widgets.js
@@ -9,3 +9,4 @@ export { default as select2tagbox } from "./select2-tagbox.js";
 export { default as signaturepad } from "./signature_pad.js";
 export { default as sortablejs } from "./sortablejs.js";
 export { default as ckeditor } from "./ck-editor.js";
+export { default as autocomplete } from "./easy-autocomplete.js";