made jquery widgets works in angular and reactjs boilerptlates

fixed sortablejs widget
#23
#21

Author: dmitry-kurmanov

src/bootstrap-slider.js

@@ -6,7 +6,7 @@ function init(Survey) {
     title: "Bootstrap Slider",
     iconName: "icon-bootstrap-slider",
     widgetIsLoaded: function() {
-      return typeof Slider != "undefined";
+      return typeof Slider !== "undefined";
     },
     isFit: function(question) {
       return question.getType() === "bootstrapslider";
@@ -37,7 +37,10 @@ function init(Survey) {
       inputEl.setAttribute("data-slider-min", question.rangeMin);
       inputEl.setAttribute("data-slider-max", question.rangeMax);
       inputEl.setAttribute("data-slider-step", question.step);
-      inputEl.setAttribute("data-slider-value", question.value || question.rangeMin);
+      inputEl.setAttribute(
+        "data-slider-value",
+        question.value || question.rangeMin
+      );
       el.appendChild(inputEl);
       var slider = new Slider(inputEl, {
         id: question.name + "_" + question.id,

src/easy-autocomplete.js

@@ -1,8 +1,9 @@
-function init(Survey) {
+function init(Survey, $) {
+  $ = $ || window.$;
   var widget = {
     name: "autocomplete",
     widgetIsLoaded: function() {
-      return typeof $ === "function" && !!$.fn.easyAutocomplete;
+      return !!$.fn.easyAutocomplete;
     },
     isFit: function(question) {
       return question.getType() === "text";
@@ -79,7 +80,7 @@ function init(Survey) {
 }
 
 if (typeof Survey !== "undefined") {
-  init(Survey);
+  init(Survey, window.$);
 }
 
 export default init;

src/icheck.js

@@ -1,9 +1,10 @@
-function init(Survey) {
+function init(Survey, $) {
+  $ = $ || window.$;
   var widget = {
     className: "iradio_square-blue",
     name: "icheck",
     widgetIsLoaded: function() {
-      return typeof $ == "function" && !!$.fn.iCheck;
+      return !!$.fn.iCheck;
     },
     isFit: function(question) {
       var t = question.getType();
@@ -58,7 +59,7 @@ function init(Survey) {
 }
 
 if (typeof Survey !== "undefined") {
-  init(Survey);
+  init(Survey, window.$);
 }
 
 export default init;

src/image-picker.js

@@ -1,10 +1,11 @@
-function init(Survey) {
+function init(Survey, $) {
+  $ = $ || window.$;
   var widget = {
     name: "imagepicker",
     title: "Image picker",
     iconName: "icon-imagepicker",
     widgetIsLoaded: function() {
-      return typeof $ == "function" && !!$.fn.imagepicker;
+      return !!$.fn.imagepicker;
     },
     isFit: function(question) {
       return question.getType() === "imagepicker";
@@ -68,7 +69,7 @@ function init(Survey) {
 }
 
 if (typeof Survey !== "undefined") {
-  init(Survey);
+  init(Survey, window.$);
 }
 
 export default init;

src/jquery-bar-rating.js

@@ -1,10 +1,11 @@
-function init(Survey) {
+function init(Survey, $) {
+  $ = $ || window.$;
   var widget = {
     name: "barrating",
     title: "Bar rating",
     iconName: "icon-barrating",
     widgetIsLoaded: function() {
-      return typeof $ === "function" && !!$.fn.barrating;
+      return !!$.fn.barrating;
     },
     defaultJSON: { choices: [1, 2, 3, 4, 5] },
     isFit: function(question) {
@@ -70,7 +71,7 @@ function init(Survey) {
 }
 
 if (typeof Survey !== "undefined") {
-  init(Survey);
+  init(Survey, window.$);
 }
 
 export default init;

src/jquery-ui-datepicker.js

@@ -1,10 +1,11 @@
-function init(Survey) {
+function init(Survey, $) {
+  $ = $ || window.$;
   var widget = {
     name: "datepicker",
     title: "Date picker",
     iconName: "icon-datepicker",
     widgetIsLoaded: function() {
-      return typeof $ == "function" && !!$.fn.datepicker;
+      return !!$.fn.datepicker;
     },
     isFit: function(question) {
       return question.getType() === "datepicker";
@@ -15,25 +16,25 @@ function init(Survey) {
       Survey.JsonObject.metaData.addClass(
         "datepicker",
         [
-          {
-            name: "dateFormat",
-            default: "mm/dd/yy",
-            choices: [
-              "mm/dd/yy",
-              "yy-mm-dd",
-              "d M, y",
-              "d MM, y",
-              "DD, d MM, yy",
-              "'day' d 'of' MM 'in the year' yy"
-            ]
-          },
           { name: "inputType", visible: false },
           { name: "inputFormat", visible: false },
           { name: "inputMask", visible: false }
         ],
         null,
         "text"
       );
+      Survey.JsonObject.metaData.addProperty("datepicker", {
+        name: "dateFormat",
+        default: "mm/dd/yy",
+        choices: [
+          "mm/dd/yy",
+          "yy-mm-dd",
+          "d M, y",
+          "d MM, y",
+          "DD, d MM, yy",
+          "'day' d 'of' MM 'in the year' yy"
+        ]
+      });
     },
     afterRender: function(question, el) {
       var $el = $(el).is(".widget-datepicker")
@@ -70,7 +71,7 @@ function init(Survey) {
 }
 
 if (typeof Survey !== "undefined") {
-  init(Survey);
+  init(Survey, window.$);
 }
 
 export default init;

src/select2-tagbox.js

@@ -1,6 +1,5 @@
-import $ from "jquery";
-
-function init(Survey) {
+function init(Survey, $) {
+  $ = $ || window.$;
   var widget = {
     name: "tagbox",
     title: "Tag box",
@@ -65,7 +64,7 @@ function init(Survey) {
 }
 
 if (typeof Survey !== "undefined") {
-  init(Survey);
+  init(Survey, window.$);
 }
 
 export default init;

src/select2.js

@@ -1,6 +1,5 @@
-import $ from "jquery";
-
-function init(Survey) {
+function init(Survey, $) {
+  $ = $ || window.$;
   var widget = {
     activatedBy: "property",
     name: "select2",
@@ -15,9 +14,7 @@ function init(Survey) {
           question.getType() === "dropdown"
         );
       if (widget.activatedBy == "type")
-        return (
-          typeof Select2 !== undefined && question.getType() === "dropdown"
-        );
+        return typeof question.getType() === "dropdown";
       if (widget.activatedBy == "customtype")
         return question.getType() === "select2";
       return false;
@@ -93,7 +90,7 @@ function init(Survey) {
 }
 
 if (typeof Survey !== "undefined") {
-  init(Survey);
+  init(Survey, window.$);
 }
 
 export default init;

src/sortablejs.js

@@ -74,7 +74,7 @@ function init(Survey) {
         });
         emptyEl.style.display = wasInResults ? "none" : "";
       };
-      question.resultEl = Sortable.create($(resultEl)[0], {
+      question.resultEl = Sortable.create(resultEl, {
         animation: 150,
         group: question.name,
         onSort: function(evt) {
@@ -84,7 +84,8 @@ function init(Survey) {
           } else {
             emptyEl.style.display = "none";
             for (var i = 0; i < resultEl.children.length; i++) {
-              if(typeof resultEl.children[i].dataset.value === 'undefined') continue;
+              if (typeof resultEl.children[i].dataset.value === "undefined")
+                continue;
               result.push(resultEl.children[i].dataset.value);
             }
           }
@@ -93,7 +94,7 @@ function init(Survey) {
           isUpdatingQuestionValue = false;
         }
       });
-      question.sourceEl = Sortable.create($(sourceEl)[0], {
+      question.sourceEl = Sortable.create(sourceEl, {
         animation: 150,
         group: question.name
       });