Added pretty-checkbox custom widget (work for #12 - widget request "lokesh pretty checkbox")

Author: tsv2013

package.json

@@ -21,6 +21,7 @@
     "jquery-ui": "^1.12.1",
     "live-server": "^1.2.0",
     "nouislider": "^10.1.0",
+    "pretty-checkbox": "^3.0.3",
     "select2": "^4.0.4",
     "signature_pad": "^2.3.2",
     "sortablejs": "^1.6.1",

src/pretty-checkbox.js

@@ -0,0 +1,108 @@
+function init(Survey) {
+  var widget = {
+    settings: {
+      radiogroup: {
+        rootClass: "pretty p-default p-round",
+        inputType: "radio",
+        titleClass: "state p-success"
+      },
+      checkbox: {
+        rootClass: "pretty p-default",
+        inputType: "checkbox",
+        titleClass: "state p-success"
+      }
+    },
+    name: "pretty-checkbox",
+    widgetIsLoaded: function () {
+      for (var i = 0; i < document.styleSheets.length; i++) {
+        var href = document.styleSheets[i].ownerNode["href"];
+        if (!!href && href.indexOf("pretty-checkbox") != -1) {
+          return true;
+        }
+      }
+      return false;
+    },
+    htmlTemplate: "<fieldset></fieldset>",
+    isFit: function (question) {
+      var type = question.getType();
+      return type === "radiogroup" || type === "checkbox"; // || type === "matrix";
+    },
+    isDefaultRender: false,
+    afterRender: function (question, el) {
+      var itemInputs = {};
+      var options = this.settings[question.getType()];
+      var inChangeHandler = false;
+      var changeHandler = function (event) {
+        inChangeHandler = true;
+        try {
+          var value = arguments[0].target.value;
+          if (question.getType() === "checkbox") {
+            var qValue = question.value || [];
+            if (arguments[0].target.checked) {
+              if (qValue.indexOf(value) === -1) {
+                qValue.push(value);
+              }
+            } else {
+              if (qValue.indexOf(value) !== -1) {
+                qValue.splice(qValue.indexOf(value), 1);
+              }
+            }
+            question.value = qValue;
+          } else {
+            question.value = value;
+          }
+        } finally {
+          inChangeHandler = false;
+        }
+      };
+      question.choices.forEach(function (choiceItem, index) {
+        var itemRoot = document.createElement("div");
+        itemRoot.className = options.rootClass;
+        var input = document.createElement("input");
+        input.type = options.inputType;
+        input.name =
+          question.name + (question.getType() === "checkbox" ? "" + index : "");
+        input.onchange = changeHandler;
+        input.value = choiceItem.value;
+        var titleRoot = document.createElement("div");
+        titleRoot.className = options.titleClass;
+        var label = document.createElement("label");
+        label.textContent = choiceItem.text;
+        titleRoot.appendChild(label);
+        itemRoot.appendChild(input);
+        itemRoot.appendChild(titleRoot);
+        el.appendChild(itemRoot);
+
+        itemInputs[choiceItem.value] = input;
+      });
+      var updateValueHandler = function (newValue) {
+        if (!inChangeHandler) {
+          var checkedItems = newValue || [];
+          if (question.getType() === "radiogroup") {
+            checkedItems = [newValue];
+          }
+          Object.values(itemInputs).forEach(function (inputItem) {
+            if (checkedItems.indexOf(inputItem.value) !== -1) {
+              inputItem.setAttribute("checked", undefined);
+            } else {
+              inputItem.removeAttribute("checked");
+            }
+          });
+        }
+      };
+      question.valueChangedCallback = updateValueHandler;
+      updateValueHandler(question.value);
+    },
+    willUnmount: function (question, el) {
+      question.valueChangedCallback = undefined;
+    }
+  };
+
+  Survey.CustomWidgetCollection.Instance.addCustomWidget(widget, "type");
+}
+
+if (typeof Survey !== "undefined") {
+  init(Survey);
+}
+
+export default init;

src/surveyjs-widgets.js

@@ -10,3 +10,4 @@ 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";
+export { default as prettycheckbox } from "./pretty-checkbox.js";

webpack.config.js

@@ -32,7 +32,8 @@ var widgets = [
   "sortablejs",
   "nouislider",
   "ck-editor",
-  "easy-autocomplete"
+  "easy-autocomplete",
+  "pretty-checkbox"
 ];
 
 var dependencies = {
@@ -45,7 +46,8 @@ var dependencies = {
   nouislider: "^10.1.0",
   inputmask: "^3.3.10",
   "jquery-bar-rating": "^1.2.2",
-  "easy-autocomplete": "^1.3.5"
+  "easy-autocomplete": "^1.3.5",
+  "pretty-checkbox": "^3.0.3"
 };
 
 var entry = {};