Custom widget: Image Picker, jQuery Survey Library Example

<!DOCTYPE html>
<html>
    <head>
        <title>Custom widget: Image Picker, jQuery Survey Library Example</title>
        <script src="https://unpkg.com/jquery"></script>
        <script src="https://surveyjs.azureedge.net/1.0.26/survey.jquery.js"></script>
        <link href="https://surveyjs.azureedge.net/1.0.26/survey.css" type="text/css" rel="stylesheet"/>
        <link rel="stylesheet" href="./index.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/image-picker/0.3.0/image-picker.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/image-picker/0.3.0/image-picker.css"/>
        <script src="https://unpkg.com/surveyjs-widgets"></script>
        <script type="text/javascript" src="./multiple-image-picker.js"></script>

    </head>
    <body>
        <div id="surveyElement"></div>
        <div id="surveyResult"></div>

        <script type="text/javascript" src="./index.js"></script>

    </body>
</html>

Survey
    .StylesManager
    .applyTheme("default");

var json = {
    "elements": [
        {
            "type": "imagepicker-multiple",
            "name": "choosepicture",
            "title": "What animal would you like to see first ?",
            "choices": [
                {
                    "value": "lion",
                    "imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg"
                }, {
                    "value": "giraffe",
                    "imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/giraffe.jpg"
                }, {
                    "value": "panda",
                    "imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/panda.jpg"
                }, {
                    "value": "camel",
                    "imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/camel.jpg"
                }
            ]
        }
    ]
};

window.survey = new Survey.Model(json);

survey
    .onComplete
    .add(function (result) {
        document
            .querySelector('#surveyResult')
            .innerHTML = "result: " + JSON.stringify(result.data);
    });

$("#surveyElement").Survey({model: survey});

var widget = {
    name: "imagepicker-multiple",
    isFit : function(question) {
      return question.getType() === 'imagepicker-multiple';
    },
    isDefaultRender: true,
    activatedByChanged: function(activatedBy) {
      Survey.JsonObject.metaData.addClass(
        "imageitemvalues",
        [],
        null,
        "itemvalue"
      );
      Survey.JsonObject.metaData.addClass(
        "imagepicker-multiple",
        [
          { name: "hasOther", visible: false },
          { name: "otherText", visible: false },
          { name: "optionsCaption", visible: false },
          { name: "otherErrorText", visible: false },
          { name: "storeOthersAsComment", visible: false },
          { name: "renderAs", visible: false }
        ],
        null,
        "dropdown"
      );
      Survey.JsonObject.metaData.addProperty("imagepicker-multiple", {
        name: "imageLink"
      });
      Survey.JsonObject.metaData.addProperty("imagepicker-multiple", {
        name: "showLabel:boolean",
        default: false
      });
      Survey.JsonObject.metaData.addProperty("imagepicker-multiple", {
        name: "choices:imageitemvalues",
        onGetValue: function(obj) {
          return Survey.ItemValue.getData(obj.choices);
        },
        onSetValue: function(obj, value) {
          obj.choices = value;
        }
      });
    },
    afterRender: function(question, el) {
        var $el = $(el).find("select");
        $el.attr("multiple", "multiple");
    
        var options = $el.find('option');
        for (var i=1; i<options.length; i++) {
            $(options[i]).data("imgSrc", question.choices[i-1].imageLink);
            options[i].selected = question.value == options[i].value;
        }
        $el.imagepicker({
            hide_select : true,
            show_label  : false,
            changed: function(oldValues, newValues) {
              question.value = (newValues || []).filter(function(val) { return !!val; });
            }
        })
    },
       willUnmount: function(question, el) {
        var $el = $(el).find("select");
        $el.removeAttr("multiple");
        $el.data('picker').destroy();
    } 
}
Survey.CustomWidgetCollection.Instance.addCustomWidget(widget, "customtype");