API tools faq
paste
Guest User

Untitled

a guest
Jan 16th, 2018
88
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.16 KB | None | 0 0
raw download clone embed print report
  1. // JavaScript Document
  2. function showEmailFormPop() {
  3.  
  4.  
  5. var SCENARIO_NAME = '8digitsForm';
  6. var scenarioID = 20171216356;
  7. var BACKGROUND_IMAGE = '//i.imgur.com/mpd7hpB.jpg';
  8. var TITLE = "Wekelijks de lekkerste recepten ontvangen in je inbox? Meld je aan!";
  9. var SUBTITLE = "" //If no subtitle = "";
  10. var SUBMIT_TEXT = 'Aanmelden';
  11. var THANKYOUTEXT = "Bedankt voor je aanmelding.";
  12. var edFonts = "JumboRegular"; //Standard Tahoma,Arial,Helvetica
  13. var edFontsize = "14px";
  14. var titleColor = "#000";
  15. var subtitleColor = titleColor;
  16. var bgColor = "#ffffff";
  17. var headerColor = bgColor;
  18. var edButtonBG = "#ffffff";
  19. var edButtonborderColor = "#000000";
  20. var edButtonTextColor = "#000000";
  21.  
  22. var fields = [ //name=email, name=tel
  23. {
  24. type: "text",
  25. name: "name",
  26. placeholder: "Naam",
  27. },
  28. {
  29. type: "text",
  30. name: "email",
  31. placeholder: "E-mailadres",
  32. },
  33. {
  34. type: "checkbox",
  35. name: "opt1",
  36. placeholder: "Ja, houd mij op de hoogte van het laatste Jumbo nieuws via e-mail.",
  37. isMandatory: 1
  38. }
  39. ]
  40.  
  41.  
  42. var inputElements = '';
  43. for(var i in fields){
  44. var field = fields[i];
  45. fieldId = 'edFormId'+i;
  46. switch(field.type){
  47. case 'text':
  48. inputElements += '<input class="_ed_textfield" placeholder="'+field.placeholder+ '" name="'+field.name+'" type="text" maxlength="255" value="" id="'+fieldId+'">';
  49. break;
  50. case 'checkbox':
  51. inputElements += '<label class="_ed_checkbox" for="'+fieldId+'"><input name="'+field.name+'" type="checkbox" id="'+fieldId+'"><span>'+field.placeholder+'</span></label>';
  52. break;
  53. }
  54. }
  55.  
  56. var ed_subtitle = "";
  57. if(SUBTITLE!==""){
  58. ed_subtitle='<div class="_edf_subtitle">'+SUBTITLE+'</div>'
  59. }
  60.  
  61. var edwidth = -(window.innerWidth/2+210);
  62.  
  63. var html = '\
  64. <style type="text/css">\
  65. .ed_'+scenarioID+' ._edf_title {font-family: '+edFonts+';color: '+titleColor+';font-size: 20px;line-height: 20px; font-weight:100px}\
  66. .ed_'+scenarioID+' ._edf_subtitle {font-family: '+edFonts+';color: '+subtitleColor+';font-size: '+edFontsize+';line-height: 18px;text-align:center;font-weight:400px}\
  67. .ed_'+scenarioID+' .ed_button{background-color: '+edButtonBG+';color: '+edButtonTextColor+';font-family: '+edFonts+';letter-spacing: 1px;font-size: '+edFontsize+';border: 1px solid '+edButtonborderColor+';}\
  68. .ed_'+scenarioID+' .ed_button:hover{background-color: '+edButtonTextColor+';color: '+edButtonBG+';}\
  69. .ed_'+scenarioID+' ._ed_container{background: '+bgColor+';}\
  70. .ed_'+scenarioID+' .ed_inner_header{background-color: '+headerColor+';}\
  71. .ed_'+scenarioID+' .edf_form{margin-top:20px;}\
  72. .ed_'+scenarioID+' ._edf_all{ z-index: 999999;width: 100%;height: 309px;position: fixed;background-size: 100%;opacity: 1;top:10%;}\
  73. .ed_'+scenarioID+' ._ed_container{box-shadow: 0 0 16px 0 rgba(0,0,0,.4);margin: auto;border-radius: 10px!important;overflow: hidden;background: #FFFFFF;width: 680px;z-index: 999999;opacity: 1;}\
  74. .ed_'+scenarioID+' .ed_img{width: 100%;}\
  75. .ed_'+scenarioID+' .ed_content_left{float: left;width: 205px;line-height: 0px;cursor:pointer}\
  76. .ed_'+scenarioID+' .ed_button{text-align:center;display: block;margin: 20px auto;box-sizing: border-box;border-radius: 5px;width: 33%;padding: 7px;cursor:pointer;-webkit-transition: -webkit-box-shadow 0s ease;transition: -webkit-box-shadow 0s ease;transition: box-shadow 0s ease;transition: box-shadow 0s ease, -webkit-box-shadow 0s ease;transition:all 500ms ease;float: right;}\
  77. .ed_'+scenarioID+' .ed_inner_body{width: 85%; margin: auto;}\
  78. .ed_'+scenarioID+' .ed_inner_header{margin-top: -30px;}\
  79. .ed_'+scenarioID+' .ed_content_right{float: left;padding-top: 25px;padding-bottom: 10px;width: 470px;}\
  80. .ed_'+scenarioID+' ._ed_textfield {border-radius: 3px;padding: 0 1em;font-size: '+edFontsize+';height: 2.5rem;background: #fff;outline: none;width: 100%;box-sizing: border-box;margin: 10px auto 0px auto;display: block;}\
  81. .ed_'+scenarioID+' ._ed_checkbox{margin: 20px 5px 0px 0px;font-family: '+edFonts+';font-size: 12px;color: #aaa9a9;padding: 0px;display: block; float:left; width: 60%; line-height:16px;}\
  82. .ed_20171216356 ._ed_checkbox input[type="checkbox"]{ margin-right:5px !important;}\
  83. .ed_'+scenarioID+' ._ed_radio{margin: 10px 0px 0px 0px;font-family: '+edFonts+';font-size: '+edFontsize+';color: #aaa9a9;padding: 0px;display: block;margin-left:10%}\
  84. .ed_'+scenarioID+' ._ed_radio_inpt{margin-right:5px !important;vertical-align:top;}\
  85. .ed_'+scenarioID+' .edf_close{position: relative;left: 95%;font-size: '+edFontsize+';cursor: pointer;margin-top: -16px; color:'+titleColor+'}\
  86. .ed_'+scenarioID+' .edf_backover{position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 99999; opacity: 0.5; background-color: rgb(0, 0, 0);}\
  87. .ed_'+scenarioID+' ._edf_title {padding: 0 0 20px 0px;text-align: center; width: 80%; margin: 0 auto;line-height: 26px;}\
  88. .ed_'+scenarioID+' ._ed_txtarea{width: 95%;height: 100px;position: relative;margin: 10px auto;}\
  89. .ed_'+scenarioID+' .ed_textarea_text{position: relative;width: 90%;height: 20px;margin: auto;text-align: center;color:black;font-weight: bold;}\
  90. .ed_'+scenarioID+' ._ed_segmentation{color: #000000;font-family: '+edFonts+';font-size: '+edFontsize+';font-weight: bold; display: block;overflow: hidden;}\
  91. .ed_'+scenarioID+' ._ed_segmentation_title{padding: 8px 10px 8px 0px; float:left;}\
  92. .ed_'+scenarioID+' ._ed_segmentation label {-webkit-box-shadow: inset 0px 0px 0px 1px #c3c3c3;box-shadow: inset 0px 0px 0px 1px #c3c3c3; border-radius: 3px;font-size: 1em;margin-right: 10px;padding: 8px;text-align: center;background-color: #eeeeee;display: block;float: left;}\
  93. .ed_'+scenarioID+' ._ed_segmentation label._ed_is-active {background-color: #fdc614;-webkit-box-shadow: inset 0px 0px 0px 1px #fdc614 !important;box-shadow: inset 0px 0px 0px 1px #fdc614 !important;}\
  94. @media screen and (max-width: 700px) {\
  95. .ed_'+scenarioID+' ._edf_all{width:100%; height 350px}\
  96. .ed_'+scenarioID+' ._ed_container{width: 90% !important;}\
  97. .ed_'+scenarioID+' .ed_content_left{display: none !important;}\
  98. .ed_'+scenarioID+' .ed_content_right{width: 100% !important;}\
  99. .ed_'+scenarioID+' ._ed_checkbox_inpt{height:17px; width:25px;}\
  100. .ed_'+scenarioID+' ._ed_segmentation_title{float: none !important;}\
  101. }\
  102. </style>\
  103. <div class="ed_'+scenarioID+'">\
  104. <div class="_edf_all">\
  105. <div class="_ed_container">\
  106. <div class="ed_content_left">\
  107. <img class="ed_img" src="'+BACKGROUND_IMAGE+'" alt="" />\
  108. </div>\
  109. <div class="ed_content_right">\
  110. <div class="edf_close">X</div>\
  111. <div class="edf_form">\
  112. <div class="ed_inner_header">\
  113. <div class="_edf_title">'+TITLE+'</div>\
  114. </div>\
  115. <div class="ed_inner_body">\
  116. '+ed_subtitle+'\
  117. <div class="_ed_segmentation">\
  118. <div class="_ed_segmentation_title">Ik heb interesse in:</div>\
  119. <div class="">\
  120. <label for="input2" class="edSegmentCheck">\
  121. <input id="input2" type="radio" value="Vlees" style="display: none;">\
  122. <span>Vlees</span>\
  123. </label>\
  124. <label for="input1" class="_ed_is-active edSegmentCheck">\
  125. <input id="input1" type="radio" value="Vis" style="display: none;">\
  126. <span>Vis</span>\
  127. </label>\
  128. <label for="input3" class="edSegmentCheck">\
  129. <input id="input3" type="radio" value="Vega" style="display: none;">\
  130. <span>Vega</span>\
  131. </label>\
  132. </div>\
  133. </div>\
  134. <div id="form" action="" method="post">\
  135. '+ inputElements +'\
  136. <div type="submit" id="ed_submit" name="ed_submit" class="ed_button to-details yellow" >'+SUBMIT_TEXT+'</div>\
  137. </div>\
  138. </div>\
  139. </div>\
  140. </div>\
  141. </div>\
  142. </div>\
  143. </div>\
  144. ';
  145.  
  146. jQuery('body').append(html);
  147.  
  148. jQuery(".edSegmentCheck").click(function(){
  149. jQuery(".edSegmentCheck").removeClass("_ed_is-active");
  150. jQuery(this).addClass("_ed_is-active");
  151. });
  152.  
  153. EightDigits.analytics.sendEvent(SCENARIO_NAME, 'Shown');
  154.  
  155. jQuery('.edf_backover, .edf_close').on('click', function() {
  156. jQuery("._edf_all").animate({
  157. "opacity": "0"
  158. }, 500 )
  159. setTimeout(function(){ jQuery('._edf_all').remove();
  160. jQuery('.edf_backover').remove();
  161. jQuery('style').last().remove();
  162. }, 501);
  163. });
  164.  
  165. jQuery('#ed_submit').on('click', function() {
  166.  
  167. if(jQuery("[name='email']").length >=1){
  168. if (!validmail(jQuery("[name='email']").val())) {
  169. var oldColor = jQuery("#"+fieldId).closest("label").css('border');
  170. jQuery("[name='email']").css('border', '1px solid red');
  171. jQuery("[name='email']").click(function(){
  172. jQuery("[name='email']").css('border', oldColor);
  173. });
  174. return false;
  175. }
  176. }
  177. if(jQuery("[name='tel']").length >=1){
  178. if (!valPhoneNumber(jQuery("[name='tel']").val())) {
  179. var oldColor = jQuery("#"+fieldId).closest("label").css('border');
  180. jQuery("[name='tel']").css('border', '1px solid red');
  181. jQuery("[name='tel']").click(function() {
  182. jQuery("[name='tel']").css('border', oldColor);
  183. });
  184. return false;
  185. }
  186. }
  187.  
  188.  
  189. for(var i in fields){
  190. var field = fields[i];
  191. fieldId = 'edFormId'+i;
  192. if(field.type=="checkbox" && field.isMandatory==1 && !jQuery("#"+fieldId).is(':checked')){
  193. var oldColor = jQuery("#"+fieldId).closest("label").css('color');
  194. jQuery("#"+fieldId).closest("label").css('color', 'red');
  195. jQuery("#"+fieldId).click(function() {
  196. jQuery("#"+fieldId).closest("label").css('color', oldColor);
  197. });
  198. return false;
  199. }
  200.  
  201. }
  202.  
  203.  
  204. var getElements = {};
  205. for(var i in fields){
  206. var field = fields[i];
  207. fieldId = 'edFormId'+i;
  208. switch(field.type){
  209. default:
  210. getElements[field.name] = jQuery('#'+fieldId).val();
  211. break;
  212. }
  213. }
  214.  
  215. console.log(getElements);
  216.  
  217. EightDigits.setAttributes(
  218. getElements
  219. );
  220.  
  221.  
  222. jQuery('.edf_backover').click();
  223. EightDigits.analytics.sendEvent(SCENARIO_NAME, 'Click');
  224. setTimeout(function(){
  225. thankYouHtml();
  226. }, 502);
  227.  
  228.  
  229. setTimeout(function() {
  230. EightDigits.event({
  231. key: SCENARIO_NAME,
  232. noPath: 'true'
  233. });
  234. }, 2000);
  235. });
  236.  
  237.  
  238. function validmail(email) {
  239. var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  240. return re.test(email);
  241. }
  242.  
  243. function valPhoneNumber(inputtxt)
  244. {
  245. var phoneno = /^\d{9,10}$/;
  246. return phoneno.test(inputtxt);
  247. }
  248.  
  249. var THANKYOUTEXT = "Bedankt voor je aanmelding.";
  250. thankYouHtml = function() {
  251.  
  252. var ThankYou = '\
  253. <style>\
  254. #ed_thankyou_text{font-size: 16px;color: white;text-align: center;position: absolute;top: 0px; left:54px;width: 80%;}\
  255. #ed_all_show_thankyou{background-color: blue;}\
  256. \
  257. #ed_all_show_thankyou{z-index: 1000003;width: 332px;height: 67px;position: fixed;left: 0;right: -66%;top: -78%;bottom: 0;margin: auto;background-size: 100%;border-radius: 4px;color: white; opacity:0}\
  258. #ed_checkmark{background: url(//cdn.8digits.com/f/u/4ah1r9ym/fd9fcdfb-933c-491d-b73c-778be074bb96.png); width: 50px;height: 50px;background-size: 100%;position: absolute;left: 10px;top: 10px;}\
  259. #ed_close{ width: 13px;height: 23px;position: absolute;font-size: 18px;right: 1%;top: 1%;cursor: pointer;color: #fff;}\
  260. </style>\
  261. <div id="ed_all_show_thankyou">\
  262. <span id="ed_checkmark"></span>\
  263. <p id="ed_thankyou_text">'+THANKYOUTEXT+'</p>\
  264. <div id="ed_close"></div>\
  265. </div>\
  266. ';
  267.  
  268. jQuery('body').append(ThankYou);
  269. jQuery('._ed_submit').hide();
  270. jQuery("#ed_all_show_thankyou").animate({
  271. "opacity": "1"
  272. }, 750 );
  273. jQuery('#ed_close').click(function() { // Close PopUp
  274. jQuery('#ed_all_show_thankyou').remove();
  275. });
  276. setTimeout(function() {
  277. jQuery("#ed_all_show_thankyou").animate({
  278. "opacity": "0"
  279. }, 500 );
  280. setTimeout(function(){ jQuery('#ed_close').click();}, 501);
  281.  
  282. }, 2250)
  283. }
  284. }
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!