search

surveyjs / survey-library

Free JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout.
https://surveyjs.io/form-library
MIT License
4.12k stars 802 forks source link

Implementing custom widget with JQuery image mapster #7872

Closed midas-phoenix closed 7 months ago

midas-phoenix commented 7 months ago

I'm trying to implement a custom question widget with jquery image mapster(for interactive purpose), but for some reason unknown to me surveyJs seems to be blocking the plugin.

        var widget = {
            name: 'hand',
            widgetIsLoaded: function () {
                return true; //We do not have external scripts
            },
            htmlTemplate: buildTemplate(),
            widgetIsLoaded: function () {
                return true; //we do not require anything so we just return true. 
            },
            activatedByChanged: function (activatedBy) {
                Survey.JsonObject.metaData.addClass("hand", [], null, "text");
                Survey.JsonObject.metaData.addProperties("hand", [
                    { name: "buttonText", default: "Click Me" }
                ]);
            },
            //SurveyJS library calls this function for every question to check, if it should use this widget instead of default rendering/behavior
            isFit: (question) => {
                return question.getType() === 'hand';
            },
            isDefaultRender: false,
            afterRender: function (question, el) {
                let imgBg = el.getElementsByTagName("img")[0];
                let default_options = {
                    fillOpacity: 0.5,
                    render_highlight: {
                        fillColor: '2aff00',
                        stroke: true
                    },
                    render_select: {
                        fillColor: 'ff000c',
                        stroke: false
                    },
                    mouseoutDelay: 0,
                    fadeInterval: 30,
                    isSelectable: true,
                    singleSelect: false,
                    mapKey: 'state',
                    mapValue: 'full',
                    listKey: 'name',
                    listSelectedAttribute: 'checked',
                    sortList: 'asc',
                    //onGetList: addCheckBoxes,
                    //onConfigured: mapsterConfigured,
                    showToolTip: false,
                    toolTipClose: ['area-mouseout']
                };
                $(`#${imgBg.id}`).mapster(default_options);

            },
            //willUnmount: function (question, el) { }
        };

        Survey.CustomWidgetCollection.Instance.addCustomWidget(widget, "customtype");

    function buildTemplate() {
        let randomNum = Math.floor(Math.random() * 1000000);
        return `
            <div>
                <img id="img_${randomNum}" src="/hand.png" style="width: 100%" class="hand-Widget" usemap="map_${randomNum}" alt="hands"/>
                <map id="map_${randomNum}" name="map_${randomNum}">
                        <area target='' state = 'LH-PLB'  class= 'LH-PLB' alt='LH-PLB' title='LH-PLB' href='#' coords='1807, 4087, 1882, 3374, 1919, 2698, 1751, 2685, 1317, 2673, 902, 2654, 666, 2685, 468, 2778, 375, 2859, 418, 3014, 487, 3157, 623, 3361, 704, 3492, 896, 3752, 1001, 3876, 1082, 3975, 1138, 4068, 1169, 4236, 1559, 4105, 1466, 4130' shape='poly'>
                        <area target='' state = 'LH-PRB'  class= 'LH-PRB' alt='LH-PRB' title='LH-PRB' href='#' coords='1919, 2698, 1894, 3188, 1857, 3547, 1807, 4081, 1925, 4099, 2080, 4136, 2247, 4174, 2409, 4192, 2545, 4242, 2564, 4068, 2632, 3876, 2743, 3566, 2861, 3212, 2874, 3002, 2861, 2933, 2619, 2834, 2278, 2747' shape='poly'>
                        <area target='' state = 'LH-PLT'  class= 'LH-PLT' alt='LH-PLT' title='LH-PLT' href='' coords='1913, 2698, 1913, 2338, 1913, 2022, 1894, 1842, 1770, 1829, 1677, 1860, 1603, 1885, 1510, 1873, 1441, 1842, 1293, 1854, 1107, 1898, 1051, 1947, 1026, 2071, 1007, 2195, 1007, 2307, 970, 2412, 927, 2574, 908, 2648' shape='poly'>
                        <area target='' state = 'LH-PRT'  class= 'LH-PRT' alt='LH-PRT' title='LH-PRT' href='' coords='1906, 2691, 1913, 2133, 1906, 1829, 1987, 1842, 2068, 1867, 2142, 1898, 2254, 1910, 2365, 1954, 2440, 2009, 2514, 2090, 2557, 2146, 2626, 2152, 2700, 2195, 2787, 2251, 2880, 2332, 2954, 2400, 2942, 2493, 2923, 2629, 2898, 2735, 2886, 2834, 2874, 2940, 2588, 2828, 2303, 2747' shape='poly'>
                        <area target='' state = 'LH-TFB'  class= 'LH-TFB' alt='LH-TFB' title='LH-TFB' href='' coords='375, 2853, 511, 2754, 604, 2704, 710, 2667, 803, 2667, 908, 2660, 846, 2611, 778, 2580, 722, 2518, 654, 2363, 604, 2288, 549, 2208, 462, 2189, 369, 2208, 276, 2239, 208, 2282, 152, 2350' shape='poly'>
                        <area target='' state = 'LH-TFT'  class= 'LH-TFT' alt='LH-TFT' title='LH-TFT' href='' coords='555, 2195, 542, 2084, 462, 1922, 375, 1805, 245, 1681, 139, 1631, 40, 1650, 3, 1743, 46, 1867, 102, 1985, 127, 2065, 127, 2152, 121, 2251, 152, 2338, 239, 2257, 381, 2195' shape='poly'>
                        <area target='' state = 'LH-IFB'  class= 'LH-IFB' alt='LH-IFB' title='LH-IFB' href='' coords='1045, 1947, 1032, 1792, 1020, 1619, 1007, 1488, 1001, 1358, 1007, 1222, 1094, 1216, 1162, 1203, 1255, 1197, 1311, 1178, 1373, 1172, 1423, 1172, 1454, 1271, 1466, 1371, 1472, 1563, 1472, 1693, 1479, 1792, 1497, 1842, 1379, 1842, 1193, 1873' shape='poly'>
                        <area target='' state = 'LH-IFM'  class= 'LH-IFM' alt='LH-IFM' title='LH-IFM' href='' coords='1014, 1222, 1007, 1091, 1001, 893, 1007, 800, 1063, 775, 1107, 775, 1175, 757, 1255, 757, 1317, 757, 1367, 763, 1386, 837, 1386, 936, 1392, 1017, 1404, 1091, 1423, 1160, 1342, 1178, 1212, 1191' shape='poly'>
                        <area target='' state = 'LH-IFT'  class= 'LH-IFT' alt='LH-IFT' title='LH-IFT' href='' coords='1361, 757, 1355, 583, 1342, 440, 1311, 341, 1255, 248, 1169, 217, 1094, 236, 1038, 298, 1001, 384, 1001, 484, 995, 558, 995, 664, 1001, 732, 1001, 794, 1076, 769, 1212, 763' shape='poly'>
                        <area target='' state = 'LH-MFB'  class= 'LH-MFB' alt='LH-MFB' title='LH-MFB' href='' coords='2074, 1860, 2080, 1755, 2080, 1612, 2099, 1470, 2117, 1340, 2117, 1240, 2018, 1216, 1931, 1216, 1851, 1216, 1782, 1222, 1708, 1247, 1677, 1278, 1677, 1439, 1665, 1662, 1665, 1780, 1658, 1854, 1776, 1836, 1900, 1829, 1993, 1848' shape='poly'>
                        <area target='' state = 'LH-MFM'  class= 'LH-MFM' alt='LH-MFM' title='LH-MFM' href='' coords='1689, 1247, 1683, 1122, 1708, 998, 1714, 862, 1727, 707, 1733, 626, 1813, 614, 1900, 620, 1999, 614, 2086, 614, 2099, 664, 2105, 744, 2105, 862, 2105, 986, 2123, 1091, 2123, 1160, 2123, 1240, 1993, 1216, 1826, 1209' shape='poly'>
                        <area target='' state = 'LH-MFT'  class= 'LH-MFT' alt='LH-MFT' title='LH-MFT' href='' coords='1739, 626, 1720, 509, 1733, 384, 1739, 248, 1776, 143, 1795, 74, 1875, 19, 1956, 6, 2049, 56, 2099, 112, 2117, 198, 2105, 304, 2105, 428, 2099, 527, 2105, 620, 1956, 614, 1851, 614' shape='poly'>
                        <area target='' state = 'LH-RFB'  class= 'LH-RFB' alt='LH-RFB' title='LH-RFB' href='' coords='2514, 2078, 2440, 1997, 2340, 1935, 2216, 1898, 2123, 1891, 2142, 1798, 2161, 1681, 2173, 1532, 2204, 1383, 2229, 1278, 2291, 1278, 2384, 1278, 2477, 1296, 2557, 1315, 2619, 1327, 2650, 1340, 2644, 1439, 2607, 1581, 2557, 1811' shape='poly'>
                        <area target='' state = 'LH-RFM'  class= 'LH-RFM' alt='LH-RFM' title='LH-RFM' href='' coords='2235, 1284, 2254, 1209, 2291, 1104, 2316, 986, 2340, 868, 2359, 769, 2433, 775, 2502, 788, 2576, 806, 2657, 825, 2694, 837, 2688, 936, 2681, 1054, 2675, 1141, 2663, 1234, 2650, 1340, 2545, 1309, 2384, 1284' shape='poly'>
                        <area target='' state = 'LH-RFT'  class= 'LH-RFT' alt='LH-RFT' title='LH-RFT' href='' coords='2698, 825, 2717, 701, 2741, 515, 2748, 379, 2704, 230, 2593, 186, 2487, 211, 2444, 286, 2400, 385, 2394, 478, 2376, 577, 2363, 683, 2351, 763, 2464, 781, 2582, 800' shape='poly'>
                        <area target='' state = 'LH-LFB'  class= 'LH-LFB' alt='LH-LFB' title='LH-LFB' href='' coords='2942, 2388, 2960, 2301, 2973, 2202, 3010, 2127, 3053, 2009, 3078, 1922, 3097, 1860, 2985, 1798, 2874, 1743, 2750, 1705, 2712, 1780, 2688, 1860, 2663, 1947, 2638, 2040, 2607, 2127, 2706, 2195, 2812, 2270' shape='poly'>
                        <area target='' state = 'LH-LFM'  class= 'LH-LFM' alt='LH-LFM' title='LH-LFM' href='' coords='2750, 1699, 2781, 1631, 2818, 1557, 2855, 1433, 2892, 1346, 2954, 1358, 3022, 1383, 3084, 1402, 3134, 1408, 3190, 1439, 3196, 1495, 3159, 1612, 3128, 1718, 3109, 1805, 3091, 1879, 2985, 1798, 2861, 1743' shape='poly'>
                        <area target='' state = 'LH-LFT'  class= 'LH-LFT' alt='LH-LFT' title='LH-LFT' href='' coords='3191, 1439, 3241, 1284, 3278, 1116, 3272, 1004, 3253, 924, 3185, 862, 3078, 856, 3024, 924, 2980, 1035, 2924, 1159, 2912, 1240, 2893, 1339, 2998, 1371, 3115, 1408' shape='poly'>
                        <area target='' state = 'LH-W'    class= 'LH-W'   alt='LH-W'   title='LH-W'   href='' coords='2570, 4633, 2533, 4273, 2483, 4217, 2359, 4180, 2229, 4174, 2061, 4136, 1882, 4087, 1795, 4093, 1640, 4099, 1510, 4124, 1404, 4143, 1305, 4186, 1175, 4236, 1175, 4323, 1193, 4434, 1200, 4546, 1206, 4626' shape='poly'>
                        <area target='' state = 'RH-PLB'  class= 'RH-PLB' alt='RH-PLB' title='RH-PLB' href='' coords='4467, 4254, 4523, 4211, 4597, 4205, 4721, 4186, 4845, 4167, 4938, 4136, 5087, 4105, 5229, 4068, 5198, 3913, 5161, 3609, 5130, 3281, 5118, 3088, 5105, 2785, 5099, 2704, 4963, 2716, 4839, 2723, 4678, 2754, 4547, 2791, 4430, 2822, 4312, 2865, 4144, 2940, 4144, 3045, 4182, 3256, 4237, 3448, 4324, 3684, 4399, 3926, 4461, 4093' shape='poly'>
                        <area target='' state = 'RH-PLT'  class= 'RH-PLT' alt='RH-PLT' title='RH-PLT' href='' coords='5105, 2704, 5093, 2524, 5099, 2233, 5105, 2040, 5112, 1829, 5019, 1836, 4944, 1879, 4864, 1891, 4746, 1910, 4634, 1947, 4560, 2009, 4510, 2084, 4479, 2133, 4417, 2152, 4318, 2189, 4213, 2257, 4132, 2326, 4070, 2394, 4076, 2462, 4082, 2536, 4089, 2611, 4107, 2704, 4120, 2778, 4126, 2859, 4144, 2933, 4275, 2871, 4529, 2791, 4764, 2735' shape='poly'>
                        <area target='' state = 'RH-PRT'  class= 'RH-PRT' alt='RH-PRT' title='RH-PRT' href='' coords='5105, 2704, 5254, 2698, 5484, 2679, 5694, 2679, 5949, 2660, 6128, 2667, 6116, 2598, 6073, 2487, 6023, 2344, 6011, 2220, 5998, 2115, 5967, 1947, 5843, 1879, 5694, 1854, 5539, 1867, 5446, 1873, 5378, 1873, 5273, 1829, 5118, 1817, 5112, 1997, 5099, 2195, 5093, 2406, 5099, 2561' shape='poly'>
                        <area target='' state = 'RH-PRB'  class= 'RH-PRB' alt='RH-PRB' title='RH-PRB' href='' coords='5223, 4074, 5347, 4081, 5465, 4112, 5552, 4130, 5595, 4149, 5843, 4229, 5874, 4112, 5936, 3963, 6011, 3882, 6141, 3740, 6265, 3541, 6389, 3367, 6482, 3231, 6538, 3150, 6587, 3057, 6612, 2952, 6637, 2853, 6562, 2785, 6395, 2704, 6259, 2673, 6141, 2654, 6029, 2654, 5868, 2654, 5701, 2679, 5546, 2673, 5353, 2679, 5217, 2698, 5105, 2698, 5105, 2847, 5124, 3188, 5149, 3510, 5186, 3789' shape='poly'>
                        <area target='' state = 'RH-TFB'  class= 'RH-TFB' alt='RH-TFB' title='RH-TFB' href='' coords='6643, 2853, 6513, 2760, 6383, 2691, 6234, 2673, 6122, 2648, 6153, 2617, 6228, 2580, 6277, 2555, 6321, 2468, 6364, 2357, 6426, 2251, 6457, 2189, 6538, 2202, 6637, 2208, 6736, 2245, 6810, 2282, 6835, 2326, 6872, 2357, 6810, 2487, 6724, 2636' shape='poly'>
                        <area target='' state = 'RH-TFT'  class= 'RH-TFT' alt='RH-TFT' title='RH-TFT' href='' coords='6866, 2350, 6885, 2276, 6885, 2164, 6891, 2059, 6934, 1960, 6984, 1842, 7003, 1730, 6990, 1662, 6928, 1631, 6829, 1656, 6736, 1712, 6655, 1798, 6581, 1873, 6525, 1997, 6482, 2102, 6457, 2158, 6438, 2220, 6556, 2202, 6680, 2214, 6761, 2251' shape='poly'>
                        <area target='' state = 'RH-IFB'  class= 'RH-IFB' alt='RH-IFB' title='RH-IFB' href='' coords='5973, 1954, 5980, 1798, 5992, 1619, 5998, 1457, 6011, 1333, 6004, 1222, 5862, 1209, 5750, 1197, 5670, 1185, 5595, 1178, 5564, 1265, 5558, 1364, 5552, 1414, 5558, 1538, 5539, 1668, 5533, 1767, 5496, 1854, 5589, 1848, 5701, 1848, 5825, 1873' shape='poly'>
                        <area target='' state = 'RH-IFM'  class= 'RH-IFM' alt='RH-IFM' title='RH-IFM' href='' coords='6011, 1222, 6017, 1085, 6017, 862, 6017, 794, 5936, 781, 5862, 763, 5769, 750, 5657, 763, 5639, 806, 5632, 924, 5632, 992, 5601, 1085, 5583, 1172, 5676, 1178, 5800, 1203' shape='poly'>
                        <area target='' state = 'RH-IFT'  class= 'RH-IFT' alt='RH-IFT' title='RH-IFT' href='' coords='6023, 800, 6017, 713, 6023, 527, 6017, 397, 5980, 291, 5874, 217, 5769, 242, 5694, 335, 5676, 434, 5657, 552, 5657, 639, 5651, 682, 5645, 750, 5744, 757, 5887, 769' shape='poly'>
                        <area target='' state = 'RH-MFB'  class= 'RH-MFB' alt='RH-MFB' title='RH-MFB' href='' coords='5372, 1860, 5353, 1687, 5335, 1501, 5322, 1240, 5217, 1216, 5087, 1209, 4981, 1216, 4895, 1240, 4888, 1321, 4907, 1433, 4932, 1557, 4950, 1687, 4938, 1811, 4932, 1867, 5068, 1836, 5186, 1823' shape='poly'>
                        <area target='' state = 'RH-MFM'  class= 'RH-MFM' alt='RH-MFM' title='RH-MFM' href='' coords='5329, 1259, 5335, 1178, 5316, 1048, 5304, 868, 5279, 726, 5285, 614, 5229, 626, 5118, 614, 5000, 620, 4913, 614, 4913, 738, 4926, 868, 4901, 955, 4895, 1054, 4895, 1153, 4888, 1247, 5012, 1216, 5155, 1203, 5242, 1222' shape='poly'>
                        <area target='' state = 'RH-MFT'  class= 'RH-MFT' alt='RH-MFT' title='RH-MFT' href='' coords='5285, 626, 5285, 509, 5285, 322, 5260, 192, 5223, 87, 5130, 12, 5050, 12, 4969, 43, 4907, 124, 4913, 223, 4913, 329, 4907, 465, 4913, 558, 4907, 620, 5050, 620, 5174, 620' shape='poly'>
                        <area target='' state = 'RH-RFB'  class= 'RH-RFB' alt='RH-RFB' title='RH-RFB' href='' coords='4895, 1879, 4864, 1724, 4833, 1501, 4795, 1358, 4771, 1271, 4640, 1284, 4454, 1309, 4374, 1346, 4374, 1420, 4392, 1526, 4442, 1718, 4467, 1867, 4485, 1966, 4516, 2084, 4616, 1972, 4740, 1916, 4826, 1910' shape='poly'>
                        <area target='' state = 'RH-RFM'  class= 'RH-RFM' alt='RH-RFM' title='RH-RFM' href='' coords='4374, 1352, 4349, 1197, 4330, 1011, 4312, 831, 4411, 800, 4492, 788, 4597, 769, 4653, 769, 4671, 850, 4684, 967, 4709, 1085, 4740, 1166, 4777, 1278, 4647, 1284, 4479, 1315' shape='poly'>
                        <area target='' state = 'RH-RFT'  class= 'RH-RFT' alt='RH-RFT' title='RH-RFT' href='' coords='4653, 775, 4634, 595, 4609, 360, 4541, 223, 4436, 192, 4361, 223, 4287, 279, 4268, 397, 4281, 626, 4299, 769, 4318, 837, 4479, 806' shape='poly'>
                        <area target='' state = 'RH-LFB'  class= 'RH-LFB' alt='RH-LFB' title='RH-LFB' href='' coords='4070, 2400, 4151, 2313, 4299, 2208, 4405, 2140, 4380, 2047, 4355, 1960, 4324, 1848, 4293, 1761, 4262, 1705, 4157, 1743, 4051, 1780, 3977, 1829, 3927, 1873, 3965, 2034, 4027, 2195, 4064, 2313' shape='poly'>
                        <area target='' state = 'RH-LFM'  class= 'RH-LFM' alt='RH-LFM' title='RH-LFM' href='' coords='3927, 1873, 3890, 1730, 3828, 1526, 3803, 1433, 3865, 1408, 3952, 1383, 4051, 1352, 4126, 1340, 4157, 1414, 4188, 1519, 4219, 1612, 4275, 1699, 4082, 1786' shape='poly'>
                        <area target='' state = 'RH-LFT'  class= 'RH-LFT' alt='RH-LFT' title='RH-LFT' href='' coords='3816, 1426, 3760, 1284, 3735, 1079, 3754, 924, 3810, 862, 3890, 850, 3952, 874, 4002, 949, 4058, 1085, 4095, 1191, 4113, 1284, 4132, 1340, 3989, 1383, 3896, 1408' shape='poly'>
                        <area target='' state = 'RH-W'    class= 'RH-W'   alt='RH-W'   title='RH-W'   href='' coords='4448, 4639, 4473, 4397, 4485, 4242, 4554, 4205, 4702, 4186, 4833, 4161, 5006, 4124, 5236, 4087, 5446, 4105, 5639, 4174, 5725, 4198, 5837, 4236, 5831, 4366, 5812, 4521, 5800, 4633' shape='poly'>
                </map>
            </div>
        `
    }

kindly assist with this please

JaneSjs commented 7 months ago

Please share a complete demo which reproduces the issue.

Thanks

JaneSjs commented 7 months ago

For further details on the issue, refer to the following support ticket: https://surveyjs.answerdesk.io/ticket/details/t16892/surveyjs-blocking-third-party-library-e-g-jquery-image-mapster-pictarea.