function myHostedFormInit(form_container){ var jquery_id = 'jquery_script_mhf'; var bootstrap_id = 'bootstrap_script_mhf'; var bootstrapselect_id = 'bootstrapselect_script_mhf'; var sweetalertload_id = 'sweetalert_script_mhf'; var popper_id = 'popper_script_mhf'; var form_controls_id = 'formcontrols_script_mhf'; var bootstrap_mhf_css_id = 'bootstrap_mhf_css_id'; var styles_mhf_id = 'styles_mhf_id'; var bootstrap_select_min_css_id = 'bootstrap_select_min_css_id'; var img_markup_script_id = 'mhf_fabris_js_markup'; var signature_script_id_1 = 'mhf_signature_script_1'; var signature_script_id_2 = 'mhf_signature_script_2'; var time_picker_js = 'mhf_time_picker_js'; var signature_pad_css = 'mhf_signature_pad_css'; var time_picker_css = 'mhf_time_picker_css'; var time_picker_with_no_dropdown_type = 'time_picker_with_no_dropdown'; var data_mhf_type_prepend = 'data-mhf-type'; var url_prefix = ''; var sent_host_name = ''; var total_subs_addons = 0; var img_markup_ids_str = ''; var signature_ids_str = ''; var time_pickers_str = ''; function loadScripts(scriptPath,integrityValue,crossoriginValue,script_id) { var script = ''; var if_existing_script_id = document.getElementById(script_id); if (!if_existing_script_id) { script = document.createElement('script'); script.setAttribute('id',script_id); script.src = scriptPath; if (integrityValue != '') { script.integrity = integrityValue; } if (crossoriginValue != '') { script.crossoriginValue = crossoriginValue; } var parent_head = document.getElementsByTagName('head')[0]; parent_head.insertBefore(script, parent_head.firstChild); document.getElementsByTagName('head')[0].appendChild(script); return script; } else { return ''; } } function loadCss(cssPath,form_container,css_id) { var link = ''; var if_existing_css_id = document.getElementById(css_id); if (!if_existing_css_id) { link = document.createElement('link'); link.setAttribute('id',css_id); link.type = 'text/css'; link.rel = 'stylesheet'; link.media = 'screen'; link.href = cssPath; document.getElementsByTagName('head')[0].appendChild(link); console.log('form_container: '+form_container); } if (form_container != '') { var element = document.getElementById(form_container); element.classList.add('hfb'); } } function getjQueryVersion() { var jQueryVersion = ''; //simpler version: if(!window.jQuery) { ... } if (typeof jQuery !== typeof undefined && typeof jQuery !== 'undefined' && jQuery !== false && jQuery !== '') { var jQueryVersion = jQuery.fn.jquery; console.log('jQuery Exists. Version: '+jQueryVersion); } else { jQueryVersion = ''; console.log('No jQuery Exists yet...'); } return jQueryVersion; } function isBootstrapLoaded() { var bootstrapLoaded = ''; if (typeof jQuery().emulateTransitionEnd !== typeof undefined && typeof jQuery().emulateTransitionEnd !== 'undefined' && typeof jQuery().emulateTransitionEnd !== false && typeof jQuery().emulateTransitionEnd !== '') { bootstrapLoaded = 'TRUE'; console.log('Bootstrap Exists'); } else { bootstrapLoaded = ''; console.log('No Bootstrap Exists.'); } return bootstrapLoaded; } function isPopperLoaded() { var popperLoaded = ''; if (typeof(Popper) !== typeof undefined && typeof(Popper) !== 'undefined' && typeof(Popper) !== false && typeof(Popper) !== '') { popperLoaded = 'TRUE'; console.log('Popper Exists.'); } else { popperLoaded = ''; console.log('No Popper Exists.'); } return popperLoaded; } function isSweetAlertLoaded() { var sweetAlertLoaded = ''; if (typeof(swal) !== typeof undefined && typeof(swal) !== 'undefined' && typeof(swal) !== false && typeof(swal) !== '') { sweetAlertLoaded = 'TRUE'; console.log('Sweet Alert Exists.'); } else { sweetAlertLoaded = ''; console.log('Sweet Alert Does Not Exist.'); } return sweetAlertLoaded; } function isBootstrapSelectLoaded() { var bootstrapSelect = ''; if (typeof(jQuery.fn.selectpicker) !== typeof undefined && typeof(jQuery.fn.selectpicker) !== 'undefined' && typeof(jQuery.fn.selectpicker) !== false && typeof(jQuery.fn.selectpicker) !== '') { bootstrapSelect = 'TRUE'; console.log('Bootstrap Select Exists.'); } else { bootstrapSelect = ''; console.log('No Bootstrap Select Exists.'); } return bootstrapSelect; } function load_sub_dependencies(lite_mode,http_host,form_container,url_prefix,bootstrapLoaded,popperLoaded,bootstrapSelect,sweetAlertLoaded,uselatest_mode) { var loaded_subs_num = 0; //currently 4 sub dependencies var total_subs = 4; var speed = 100; if (img_markup_ids_str != '') { total_subs_addons++; } if (signature_ids_str != '') { total_subs_addons++; } if (time_pickers_str != '') { total_subs_addons++; } if (lite_mode === '0') { var total_runs = 0; var intveralEXP = setInterval(function () { total_runs = total_runs + 1; if (loaded_subs_num == 0) { //Pretty much need popper and bootstrap to work at all if (popperLoaded == '') { loadScripts('https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js','','',popper_id).onload = function(){ console.log('Just loaded Popper.'); loaded_subs_num++; }; } else { loaded_subs_num++; //For Popper } } else if (loaded_subs_num == 1) { if (bootstrapLoaded == '') { loadScripts('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js','','',bootstrap_id).onload = function(){ console.log('Just loaded Bootstrap.'); loadCss("https://rocketsitesprod.blob.core.windows.net/rocketsitesv1/editor/global_modules/glmod_My-Hosted-Forms/bootstrap-my-hosted-forms.css",form_container,bootstrap_mhf_css_id); loaded_subs_num++; }; } else { loaded_subs_num++; //For bootstrapLoaded } } else if (loaded_subs_num == 2) { // Now Bootstrap select because it looks way better if (uselatest_mode == 1) { if (bootstrapSelect == '') { loadScripts('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js','','',bootstrapselect_id).onload = function(){ console.log('Just loaded Bootstrap Select.'); loadCss("https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css",form_container,bootstrap_select_min_css_id); loaded_subs_num++; }; } else { loaded_subs_num++; //For bootstrapSelect } } else { loaded_subs_num++; //For bootstrapSelect } } else if (loaded_subs_num == 3) { //Now SweetAlert because its better if (sweetAlertLoaded == '') { loadScripts('https://unpkg.com/sweetalert/dist/sweetalert.min.js','','',sweetalertload_id).onload = function(){ console.log('Just loaded Sweet Alert.'); loaded_subs_num++; }; } else { loaded_subs_num++; //For sweetAlertLoaded } } else if (loaded_subs_num == total_subs) { if (img_markup_ids_str != '') { load_img_markup(img_markup_ids_str); } if (signature_ids_str != '') { load_signature(signature_ids_str); } if (time_pickers_str != '') { load_time_picker(time_pickers_str); } if (total_subs_addons == 0) { //Finally at the end load form controls //All sub dependencies accounted for OR rought 3-4 seconds loadScripts(url_prefix+http_host+'/virteom/editor/global_modules/glmod_My-Hosted-Forms/form_controls.js','','',form_controls_id).onload = function(){ console.log('Just loaded form_controls.js'); loadCss("https://rocketsitesprod.blob.core.windows.net/rocketsitesv1/editor/global_modules/glmod_My-Hosted-Forms/styles-my-hosted-forms.css",form_container,styles_mhf_id); setServiceUrl(url_prefix+http_host); }; clearInterval(intveralEXP); console.log('All subs and subs addons accounted for.'); } } jQuery(window).resize(function() { if (jQuery('.mhf_img_markup_canvas').length) { jQuery(".mhf_img_markup_canvas").each(function( index, element ) { if (canvas_arr[index] !== typeof undefined && typeof canvas_arr[index] !== 'undefined' && typeof canvas_arr[index] !== false && typeof canvas_arr[index] !== '') { var canvas_id = canvas_arr[index]['lowerCanvasEl']['id']; var parent_width = jQuery('#'+canvas_id).parents('.form-group').width(); var bg_image_native_width = jQuery('#'+canvas_id).attr('data-bg-image-width'); var bg_image_native_height = jQuery('#'+canvas_id).attr('data-bg-image-height'); var img_percentage_change = parent_width/bg_image_native_width; var canvas_height = bg_image_native_height * img_percentage_change; var markup_bg_img = jQuery('#'+canvas_id).attr('data-bg-image'); var canvas = canvas_arr[index]; canvas.setWidth(parent_width); canvas.setHeight(canvas_height); // jQuery('#'+canvas_id).attr('width',parent_width); // jQuery('#'+canvas_id).attr('height',canvas_height); scaleAndPositionImage(canvas,markup_bg_img,parent_width,canvas_height,bg_image_native_width,bg_image_native_height); } }); } if (jQuery('.signature-pad-canvas').length && typeof(signaturePad_obj_list) !== typeof undefined && typeof(signaturePad_obj_list) !== 'undefined' && typeof(signaturePad_obj_list) !== false && typeof(signaturePad_obj_list) !== '') { window["resize_actions_for_signature"](); } }); }, speed); intveralEXP; console.log('lite mode = 0'); } else if (lite_mode === '1') { loadCss("https://rocketsitesprod.blob.core.windows.net/rocketsitesv1/editor/global_modules/glmod_My-Hosted-Forms/bootstrap-my-hosted-forms.css",form_container,bootstrap_mhf_css_id); loadCss("https://rocketsitesprod.blob.core.windows.net/rocketsitesv1/editor/global_modules/glmod_My-Hosted-Forms/styles-my-hosted-forms.css",form_container,styles_mhf_id); loadScripts(url_prefix+http_host+'/virteom/editor/global_modules/glmod_My-Hosted-Forms/form_controls.js','','',form_controls_id).onload = function(){ console.log('Just loaded form_controls.js'); setServiceUrl(url_prefix+http_host); }; console.log('lite mode = 1'); loaded_subs_num = total_subs; } } function get_url_prefix(http_host) { url_prefix = 'https://'; var http_host_arr = http_host.split('.'); if (http_host_arr[0] == 'local') { url_prefix = 'http://' } } function get_unique_string_and_ele_id(full_id,seperator) { var this_ele_id = ''; var this_form_unique_str = ''; var modal_id_arr = full_id.split(seperator); if (seperator == '-') { this_ele_id = modal_id_arr.pop(); this_form_unique_str = modal_id_arr[2]; } return {"ele_id":this_ele_id,"unique_string":this_form_unique_str}; } function load_dependencies(lite_mode,uselatest_mode,http_host,form_container) { // var url_prefix = 'https://'; // var http_host_arr = http_host.split('.'); // if (http_host_arr[0] == 'local') { // var url_prefix = 'http://' // } get_url_prefix(http_host); var jQueryVersion = getjQueryVersion(); if (jQueryVersion != '') { var jQueryVersion_arr = jQueryVersion.split('.'); var jQueryVersion_main = jQueryVersion_arr[0]; if (jQueryVersion_main >= 2) { var popperLoaded = isPopperLoaded(); var bootstrapLoaded = isBootstrapLoaded(); var bootstrapSelect = isBootstrapSelectLoaded(); var sweetAlertLoaded = isSweetAlertLoaded(); } } if (jQueryVersion == '' || uselatest_mode === '1') { loadScripts('https://code.jquery.com/jquery-3.4.1.min.js','','',jquery_id).onload = function(){ console.log('Just loaded jQuery.'); var bootstrapLoaded = isBootstrapLoaded(); var popperLoaded = isPopperLoaded(); var bootstrapSelect = isBootstrapSelectLoaded(); var sweetAlertLoaded = isSweetAlertLoaded(); load_sub_dependencies(lite_mode,http_host,form_container,url_prefix,bootstrapLoaded,popperLoaded,bootstrapSelect,sweetAlertLoaded,uselatest_mode); }; } else if (jQueryVersion_main >= 3) { console.log('jQuery exists and is at least version 3.'); load_sub_dependencies(lite_mode,http_host,form_container,url_prefix,bootstrapLoaded,popperLoaded,bootstrapSelect,sweetAlertLoaded,uselatest_mode); } else if (jQueryVersion_main < 3) { //Treat as thought 'lite mode' was enabled. if (jQueryVersion_main == 1) { //load at least version 2 loadScripts('https://code.jquery.com/jquery-2.2.4.min.js','','',jquery_id).onload = function(){ console.log('jQuery version exists but is less than 3 so loading jQuery version 2.'); // loadCss("https://rocketsitesprod.blob.core.windows.net/rocketsitesv1/editor/global_modules/glmod_My-Hosted-Forms/bootstrap-my-hosted-forms.css",form_container,bootstrap_mhf_css_id); // loadCss("https://rocketsitesprod.blob.core.windows.net/rocketsitesv1/editor/global_modules/glmod_My-Hosted-Forms/styles-my-hosted-forms.css",form_container,styles_mhf_id); // loadScripts(url_prefix+http_host+'/virteom/editor/global_modules/glmod_My-Hosted-Forms/form_controls.js','','',form_controls_id).onload = function(){ // console.log('Just loaded form_controls.js'); // setServiceUrl(url_prefix+http_host); // }; var bootstrapLoaded = isBootstrapLoaded(); var popperLoaded = isPopperLoaded(); var bootstrapSelect = isBootstrapSelectLoaded(); var sweetAlertLoaded = isSweetAlertLoaded(); load_sub_dependencies(lite_mode,http_host,form_container,url_prefix,bootstrapLoaded,popperLoaded,bootstrapSelect,sweetAlertLoaded,uselatest_mode); }; } else if (jQueryVersion_main == 2) { console.log('jQuery main version is 2. Load basic CSS and JS.'); // loadCss("https://rocketsitesprod.blob.core.windows.net/rocketsitesv1/editor/global_modules/glmod_My-Hosted-Forms/bootstrap-my-hosted-forms.css",form_container,bootstrap_mhf_css_id); // loadCss("https://rocketsitesprod.blob.core.windows.net/rocketsitesv1/editor/global_modules/glmod_My-Hosted-Forms/styles-my-hosted-forms.css",form_container,styles_mhf_id); // //Now SweetAlert because its better // if (sweetAlertLoaded == '') { // loadScripts('https://unpkg.com/sweetalert/dist/sweetalert.min.js','','',sweetalertload_id).onload = function(){ // console.log('Just loaded Sweet Alert.'); // }; // } else { // console.log('Sweet Alert Already Loaded'); // } // loadScripts(url_prefix+http_host+'/virteom/editor/global_modules/glmod_My-Hosted-Forms/form_controls.js','','',form_controls_id).onload = function(){ // console.log('Just loaded form_controls.js'); // setServiceUrl(url_prefix+http_host); // }; var bootstrapLoaded = isBootstrapLoaded(); var popperLoaded = isPopperLoaded(); var bootstrapSelect = isBootstrapSelectLoaded(); var sweetAlertLoaded = isSweetAlertLoaded(); load_sub_dependencies(lite_mode,http_host,form_container,url_prefix,bootstrapLoaded,popperLoaded,bootstrapSelect,sweetAlertLoaded,uselatest_mode); } } } var canvas_arr = new Array(); function scaleAndPositionImage(canvas,markup_bg_img,parent_width,canvas_height,bg_image_native_width,bg_image_native_height) { var canvasAspect = parent_width / canvas_height; var imgAspect = bg_image_native_width / bg_image_native_height; var left, top, scaleFactor; if (canvasAspect >= imgAspect) { var scaleFactor = parent_width / bg_image_native_width; left = 0; top = -((bg_image_native_height * scaleFactor) - canvas_height) / 2; } else { var scaleFactor = canvas_height / bg_image_native_height; top = 0; left = -((bg_image_native_width * scaleFactor) - parent_width) / 2; } if (markup_bg_img != '') { canvas.setBackgroundImage(markup_bg_img, canvas.renderAll.bind(canvas), { top: top, left: left, originX: 'left', originY: 'top', scaleX: scaleFactor, scaleY: scaleFactor, crossOrigin: 'anonymous' }); canvas.renderAll(); } } window["resize_actions_for_signature"] = async function(){ // Adjust canvas coordinate space taking into account pixel ratio, // to make it look crisp on mobile devices. // This also causes canvas to be cleared. // On mobile devices it might make more sense to listen to orientation change, // rather than window resize events. // When zoomed out to less than 100%, for some very strange reason, // some browsers report devicePixelRatio as less than 1 // and only part of the canvas is cleared then. // This part causes the canvas to be cleared // This library does not listen for canvas changes, so after the canvas is automatically // cleared by the browser, SignaturePad#isEmpty might still return false, even though the // canvas looks empty, because the internal data of this library wasn't cleared. To make sure // that the state of this library is consistent with visual state of the canvas, you // have to clear it manually. var ratio = Math.max(window.devicePixelRatio || 1, 1); jQuery(".signature-pad-canvas").each(function( index, element ) { var this_ele_full_id = $(this).attr('id'); var get_unique_string_and_ele_id_res = get_unique_string_and_ele_id(this_ele_full_id,'-'); var this_ele_id = get_unique_string_and_ele_id_res.ele_id; var this_unique_str = get_unique_string_and_ele_id_res.unique_string if ( jQuery("#mhf_signature_modal_"+this_unique_str+"_"+this_ele_id).is(':visible') ) { element.width = element.offsetWidth * ratio; element.height = element.offsetHeight * ratio; element.getContext("2d").scale(ratio, ratio); signaturePad_obj_list[this_ele_full_id].clear(); // signaturePad.clear(); } }); } function load_img_markup(ele_list) { loadScripts('https://rocketsitesprod.blob.core.windows.net/rocketsitesv1/editor/global_modules/glmod_My-Hosted-Forms/fabric.min.js','','',img_markup_script_id).onload = function(){ jQuery(function() { var ele_list_arr = ele_list.split(','); jQuery.each( ele_list_arr, function( key, form_and_ele_id ) { console.log( key + ": " + form_and_ele_id ); var ele_id = function(id){return document.getElementById(id)}; var parent_width = jQuery('#'+form_and_ele_id).parents('.form-group').width(); var bg_image_native_width = jQuery('#'+form_and_ele_id).attr('data-bg-image-width'); var bg_image_native_height = jQuery('#'+form_and_ele_id).attr('data-bg-image-height'); var img_percentage_change = parent_width/bg_image_native_width; var canvas_height = bg_image_native_height * img_percentage_change; jQuery('#'+form_and_ele_id).attr('width',parent_width); jQuery('#'+form_and_ele_id).attr('height',canvas_height); var canvas = this.__canvas = new fabric.Canvas(form_and_ele_id, { isDrawingMode: true }); canvas_arr.push(canvas); var markup_bg_img = jQuery('#'+form_and_ele_id).attr('data-bg-image'); scaleAndPositionImage(canvas,markup_bg_img,parent_width,canvas_height,bg_image_native_width,bg_image_native_height); canvas.on('mouse:down', function(options) { jQuery('#'+form_and_ele_id).attr('data-markedup','data-markedup'); }); fabric.Object.prototype.transparentCorners = false; var drawingModeEl = ele_id('drawing-mode-'+form_and_ele_id), drawingOptionsEl = ele_id('drawing-mode-options-'+form_and_ele_id), drawingColorEl = ele_id('drawing-color-'+form_and_ele_id), drawingShadowColorEl = ele_id('drawing-shadow-color-'+form_and_ele_id), drawingLineWidthEl = ele_id('drawing-line-width-'+form_and_ele_id), drawingShadowWidth = ele_id('drawing-shadow-width-'+form_and_ele_id), drawingShadowOffset = ele_id('drawing-shadow-offset-'+form_and_ele_id), clearEl = ele_id('clear-canvas-'+form_and_ele_id); clearEl.onclick = function() { canvas.clear(); jQuery('#'+form_and_ele_id).removeAttr('data-markedup'); var markup_bg_img = jQuery('#'+form_and_ele_id).attr('data-bg-image'); var parent_width = jQuery('#'+form_and_ele_id).parents('.form-group').width(); var bg_image_native_height = jQuery('#'+form_and_ele_id).attr('data-bg-image-height'); var bg_image_native_width = jQuery('#'+form_and_ele_id).attr('data-bg-image-width'); var img_percentage_change = parent_width/bg_image_native_width; var canvas_height = bg_image_native_height * img_percentage_change; scaleAndPositionImage(canvas,markup_bg_img,parent_width,canvas_height,bg_image_native_width,bg_image_native_height); // canvas.setBackgroundImage(markup_bg_img, canvas.renderAll.bind(canvas), { // // Needed to position backgroundImage at 0/0 // originX: 'left', // originY: 'top', // crossOrigin: 'anonymous' // }); }; if ( jQuery('#drawing-mode-'+form_and_ele_id).length ) { drawingModeEl.onclick = function() { canvas.isDrawingMode = !canvas.isDrawingMode; if (canvas.isDrawingMode) { drawingModeEl.innerHTML = 'Cancel drawing mode'; drawingOptionsEl.style.display = ''; } else { drawingModeEl.innerHTML = 'Enter drawing mode'; drawingOptionsEl.style.display = 'none'; } }; if (fabric.PatternBrush) { var vLinePatternBrush = new fabric.PatternBrush(canvas); vLinePatternBrush.getPatternSrc = function() { var patternCanvas = fabric.document.createElement('canvas'); patternCanvas.width = patternCanvas.height = 10; var ctx = patternCanvas.getContext('2d'); ctx.strokeStyle = this.color; ctx.lineWidth = 5; ctx.beginPath(); ctx.moveTo(0, 5); ctx.lineTo(10, 5); ctx.closePath(); ctx.stroke(); return patternCanvas; }; var hLinePatternBrush = new fabric.PatternBrush(canvas); hLinePatternBrush.getPatternSrc = function() { var patternCanvas = fabric.document.createElement('canvas'); patternCanvas.width = patternCanvas.height = 10; var ctx = patternCanvas.getContext('2d'); ctx.strokeStyle = this.color; ctx.lineWidth = 5; ctx.beginPath(); ctx.moveTo(5, 0); ctx.lineTo(5, 10); ctx.closePath(); ctx.stroke(); return patternCanvas; }; var squarePatternBrush = new fabric.PatternBrush(canvas); squarePatternBrush.getPatternSrc = function() { var squareWidth = 10, squareDistance = 2; var patternCanvas = fabric.document.createElement('canvas'); patternCanvas.width = patternCanvas.height = squareWidth + squareDistance; var ctx = patternCanvas.getContext('2d'); ctx.fillStyle = this.color; ctx.fillRect(0, 0, squareWidth, squareWidth); return patternCanvas; }; var diamondPatternBrush = new fabric.PatternBrush(canvas); diamondPatternBrush.getPatternSrc = function() { var squareWidth = 10, squareDistance = 5; var patternCanvas = fabric.document.createElement('canvas'); var rect = new fabric.Rect({ width: squareWidth, height: squareWidth, angle: 45, fill: this.color }); var canvasWidth = rect.getBoundingRect().width; patternCanvas.width = patternCanvas.height = canvasWidth + squareDistance; rect.set({ left: canvasWidth / 2, top: canvasWidth / 2 }); var ctx = patternCanvas.getContext('2d'); rect.render(ctx); return patternCanvas; }; var img = new Image(); img.src = 'http://fabricjs.com/assets/honey_im_subtle.png'; var texturePatternBrush = new fabric.PatternBrush(canvas); texturePatternBrush.source = img; } ele_id('drawing-mode-selector-'+form_and_ele_id).onchange = function() { if (this.value === 'hline') { canvas.freeDrawingBrush = vLinePatternBrush; } else if (this.value === 'vline') { canvas.freeDrawingBrush = hLinePatternBrush; } else if (this.value === 'square') { canvas.freeDrawingBrush = squarePatternBrush; } else if (this.value === 'diamond') { canvas.freeDrawingBrush = diamondPatternBrush; } else if (this.value === 'texture') { canvas.freeDrawingBrush = texturePatternBrush; } else { canvas.freeDrawingBrush = new fabric[this.value + 'Brush'](canvas); } if (canvas.freeDrawingBrush) { var brush = canvas.freeDrawingBrush; brush.color = drawingColorEl.value; if (brush.getPatternSrc) { brush.source = brush.getPatternSrc.call(brush); } brush.width = parseInt(drawingLineWidthEl.value, 10) || 1; brush.shadow = new fabric.Shadow({ blur: parseInt(drawingShadowWidth.value, 10) || 0, offsetX: 0, offsetY: 0, affectStroke: true, color: drawingShadowColorEl.value, }); } }; drawingColorEl.onchange = function() { var brush = canvas.freeDrawingBrush; brush.color = this.value; if (brush.getPatternSrc) { brush.source = brush.getPatternSrc.call(brush); } }; drawingShadowColorEl.onchange = function() { canvas.freeDrawingBrush.shadow.color = this.value; }; drawingLineWidthEl.onchange = function() { canvas.freeDrawingBrush.width = parseInt(this.value, 10) || 1; this.previousSibling.innerHTML = this.value; }; drawingShadowWidth.onchange = function() { canvas.freeDrawingBrush.shadow.blur = parseInt(this.value, 10) || 0; this.previousSibling.innerHTML = this.value; }; drawingShadowOffset.onchange = function() { canvas.freeDrawingBrush.shadow.offsetX = parseInt(this.value, 10) || 0; canvas.freeDrawingBrush.shadow.offsetY = parseInt(this.value, 10) || 0; this.previousSibling.innerHTML = this.value; }; if (canvas.freeDrawingBrush) { canvas.freeDrawingBrush.color = drawingColorEl.value; // canvas.freeDrawingBrush.source = canvas.freeDrawingBrush.getPatternSrc.call(this); canvas.freeDrawingBrush.width = parseInt(drawingLineWidthEl.value, 10) || 1; canvas.freeDrawingBrush.shadow = new fabric.Shadow({ blur: parseInt(drawingShadowWidth.value, 10) || 0, offsetX: 0, offsetY: 0, affectStroke: true, color: drawingShadowColorEl.value, }); } } else { //If drawing options are hidden this is the default if (canvas.freeDrawingBrush) { var brush = canvas.freeDrawingBrush; brush.color = '#FF0000'; if (brush.getPatternSrc) { brush.source = brush.getPatternSrc.call(brush); } brush.width = 4; brush.shadow = new fabric.Shadow({ blur: 0, offsetX: 0, offsetY: 0, affectStroke: true, color: '#000000' }); } } }); }); total_subs_addons--; console.log('Just loaded fabric.js and subs-addons now equals '+total_subs_addons); }; // alert('Fabric JS loaded 1 '+ele_list+'--'); } var signature_canvas_arr = new Array(); var signaturePad_obj_list = new Object(); function load_signature(ele_list) { // get_url_prefix(sent_host_name); // loadCss("https://rocketsitesprod.blob.core.windows.net/rocketsitesv1/editor/global_modules/glmod_My-Hosted-Forms/signature_pad/css/signature-pad.css",form_container,signature_pad_css); loadScripts('https://rocketsitesprod.blob.core.windows.net/rocketsitesv1/editor/global_modules/glmod_My-Hosted-Forms/signature_pad/js/signature_pad.js','','',signature_script_id_1).onload = function(){ // loadScripts(url_prefix+sent_host_name+'/virteom/editor/global_modules/glmod_My-Hosted-Forms/signature_pad/js/signature_pad.js','','',signature_script_id_1).onload = function(){ jQuery(function() { var ele_list_arr = ele_list.split(','); jQuery.each( ele_list_arr, function( key, form_and_ele_id ) { console.log( key + ": " + form_and_ele_id ); var canvas = document.getElementById(form_and_ele_id); console.log(canvas); var signaturePad = new SignaturePad(canvas, { // It's Necessary to use an opaque color when saving image as JPEG; // this option can be omitted if only saving as PNG or SVG backgroundColor: 'rgb(255, 255, 255)' }); signature_canvas_arr.push(canvas); signaturePad_obj_list[form_and_ele_id] = signaturePad; }); console.log(signature_canvas_arr); console.log(signaturePad_obj_list); $('.modal .save_sig').on('click', function() { var element_full_id = jQuery(this).parents('.modal').find('canvas.signature-pad-canvas').attr('id'); var get_unique_string_and_ele_id_res = get_unique_string_and_ele_id(element_full_id,'-'); var element_ele_id = get_unique_string_and_ele_id_res.ele_id; var form_unique_string = get_unique_string_and_ele_id_res.unique_string; if (signaturePad_obj_list[element_full_id].isEmpty()) { $title = 'Oops!'; $message = 'Please provide a signature first.'; if (typeof(window['swal']) !== typeof undefined && typeof(window['swal']) !== 'undefined' && typeof(window['swal']) !== false && typeof(window['swal']) !== '') { swal ( $title , $message , "error" ); } else { alert($message); } } else { var dataURL = signaturePad_obj_list[element_full_id].toDataURL(); jQuery('#'+element_full_id).attr('data-markedup','data-markedup'); jQuery('#img_preview_mhf_signature_modal_'+form_unique_string+'_'+element_ele_id).attr('src',dataURL); jQuery('.modal').hide(); } }); $("[data-action='undo']").on('click', function() { var element_full_id = jQuery(this).parents('.modal').find('canvas.signature-pad-canvas').attr('id'); var get_unique_string_and_ele_id_res = get_unique_string_and_ele_id(element_full_id,'-'); var element_ele_id = get_unique_string_and_ele_id_res.ele_id; var form_unique_string = get_unique_string_and_ele_id_res.unique_string; var data = signaturePad_obj_list[element_full_id].toData(); if (data) { data.pop(); // remove the last dot or line signaturePad_obj_list[element_full_id].fromData(data); if (data.length == 0) { jQuery('#'+element_full_id).attr('data-markedup',''); jQuery('#img_preview_mhf_signature_modal_'+form_unique_string+'_'+element_ele_id).attr('src',jQuery('#img_preview_mhf_signature_modal_'+form_unique_string+'_'+element_ele_id).attr('data-default-image')); } } }); $("[data-action='clear']").on('click', function() { var element_full_id = jQuery(this).parents('.modal').find('canvas.signature-pad-canvas').attr('id'); var get_unique_string_and_ele_id_res = get_unique_string_and_ele_id(element_full_id,'-'); var element_ele_id = get_unique_string_and_ele_id_res.ele_id; var form_unique_string = get_unique_string_and_ele_id_res.unique_string; jQuery('#'+element_full_id).attr('data-markedup',''); jQuery('#img_preview_mhf_signature_modal_'+form_unique_string+'_'+element_ele_id).attr('src',jQuery('#img_preview_mhf_signature_modal_'+form_unique_string+'_'+element_ele_id).attr('data-default-image')); signaturePad_obj_list[element_full_id].clear(); }); }); // loadScripts('https://rocketsitesprod.blob.core.windows.net/rocketsitesv1/editor/global_modules/glmod_My-Hosted-Forms/signature_pad/js/signature_pad_app.js','','',signature_script_id_2).onload = function(){ // loadScripts(url_prefix+sent_host_name+'/virteom/editor/global_modules/glmod_My-Hosted-Forms/signature_pad/js/signature_pad_app.js','','',signature_script_id_2).onload = function(){ // console.log('Just loaded signature 2 of 2.js'); // }; total_subs_addons--; console.log('Just loaded signature 1 of 1.js and subs-addons now equals '+total_subs_addons); }; } function load_time_picker(ele_list) { // get_url_prefix(sent_host_name); loadCss("https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.css",form_container,time_picker_css); loadScripts('https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js','','',time_picker_js).onload = function(){ jQuery(function() { jQuery("input["+data_mhf_type_prepend+"='"+time_picker_with_no_dropdown_type+"']").timepicker({ dropdown: false }); }); total_subs_addons--; console.log('Just loaded timepicker.js and subs-addons now equals '+total_subs_addons); }; } function set_sent_host_name(value) { sent_host_name = value; } function set_img_markup_ids_str(value) { img_markup_ids_str = value; } function set_signature_ids_str(value) { signature_ids_str = value; } function set_time_pickers_str(value) { time_pickers_str = value; } console.log('testPHPclass_placeholder'); set_signature_ids_str('rs-hf-iWfO2916370071780dtF1-ele-711');set_sent_host_name('myhostedforms.com'); load_dependencies("0","0","myhostedforms.com",form_container); document.getElementById(form_container).innerHTML = '