CNN Mobile Newsletter Multi-trigger

{
  "plugin_id": "newsletter_mobile_support",
  "plugin_type": "widget",
  "name": "Mobile Newsletter (Support)",
  "edit_page_url": "http://www.cnn.com/2016/10/14/travel/bourdain-parts-unknown-sichuan-essay/index.html",
  "form_schema": [
    {
      "default_value": "http://i.cdn.turner.com/cnn/.element/img/4.0/political-newsletter/5things-logo-small.png ",
      "field_type": "image",
      "name": "image",
      "label": "Image",
      "options": null
    },
    {
      "default_value": "Arrive at work informed.",
      "field_type": "multi_text",
      "name": "message",
      "label": "Message",
      "options": null
    },
    {
      "default_value": "Sign up for CNN's morning newsletter",
      "field_type": "multi_text",
      "name": "cta_language",
      "label": "CTA Language",
      "options": null
    },
    {
      "default_value": "https://bulletin.cnn.com/3.0/lists/6da287d761/members/",
      "field_type": "text",
      "name": "submit_url",
      "label": "Submit URL",
      "options": null
    },
    {
      "default_value": "5things",
      "field_type": "text",
      "name": "type",
      "label": "Newsletter Type",
      "options": null
    },
    {
      "default_value": "popupArticlesMobi",
      "field_type": "text",
      "name": "opg",
      "label": "Optimizely Page Source",
      "options": null
    },
    {
      "default_value": "rgba(255, 207, 9, 1)",
      "field_type": "color",
      "name": "background_color",
      "label": "Background Color",
      "options": {
        "mode": "rgba"
      }
    },
    {
      "default_value": "dark",
      "field_type": "dropdown",
      "name": "color_theme",
      "label": "Color theme",
      "options": {
        "choices": [
          {
            "value": "light",
            "label": "Light"
          },
          {
            "value": "dark",
            "label": "Dark"
          }
        ]
      }
    },
    {
      "default_value": "center",
      "field_type": "dropdown",
      "name": "logo_position",
      "label": "Logo position",
      "options": {
        "choices": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Center"
          }
        ]
      }
    },
    {
      "default_value": "center",
      "field_type": "dropdown",
      "name": "copy_align",
      "label": "Copy align",
      "options": {
        "choices": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Center"
          }
        ]
      }
    },
    {
      "default_value": "rgba(0, 0, 0, 1)",
      "field_type": "color",
      "name": "text_color",
      "label": "Text color",
      "options": {
        "mode": "rgba"
      }
    },
    {
      "default_value": "rgba(0, 0, 0, 1)",
      "field_type": "color",
      "name": "button_color",
      "label": "Button Color",
      "options": {
        "mode": "rgba"
      }
    }
  ],
  "description": "Alternate mobile newsletter extension (Oct 2016)",
  "options": {
    "apply_js": "email_address = \"\";\noptimizely_page_source = extension.opg;\nvar path = window.location.href;\nvar utils = optimizely.get('utils');\nutils.waitForElement('body').then(function(){\nfunction initFiveThings() {\n\tjQuery('body').prepend(extension.$html);\n  window.jQuery('.fivethings-newsletter-container').css('background-color', extension.background_color);\n  window.jQuery('.js-mc-submit').css('background-color', extension.button_color);\n  window.jQuery('.subscribe-intro-text').css('color', extension.text_color);\n \twindow.jQuery('.subscribe-cta-text').css('color', extension.text_color);\n  //window.jQuery('.fivethings-newsletter-container .OB_TR_2 .OUTBRAIN').attr('data-src', path);\n  if (extension.logo_position == \"center\") {\n    window.jQuery('.subscription-brand').css('margin', '0 auto');\n  }\n  if (extension.color_theme == \"dark\") {\n    window.jQuery('.newsletter-wrapper').addClass('dark');\n  }\n  if (extension.copy_align == \"left\") {\n    window.jQuery('.subscribe-intro-text').css('text-align', 'left');\n    window.jQuery('.subscribe-cta-text').css('text-align', 'left');\n  }\n  jQuery('.js-mc-submit').click(function(event) {\n    /* Act on the event */\n    validation();\n  });\n  jQuery('.js-cnn-sub-ok').click(function(event) {\n    /* Act on the event */\n    closeNewsLetterPopup();\n  });\n  jQuery('.closeDialog').click(function(event) {\n    /* Act on the event */\n    closeNewsLetterPopup();\n  });\n  jQuery('.newsletter-overlay').click(function(event) {\n    /* Act on the event */\n    closeNewsLetterPopup();\n  });\n  jQuery('.privacy').click(function(event) {\n    /* Act on the event */\n    event.preventDefault();\n    window.open(\"/privacy\");\n  });\n}\nfunction closeNewsLetterPopup() {\n    window['optimizely'].push({\n        type: \"event\",\n        eventName: \"nl_closed\",\n        tags: {\n          source: extension.opg,\n          type: extension.type\n        }\n    });\n    jQuery(\".js-subscribe-error\").html(\"\");\n    jQuery(\"#js-state-default\").show();\n    jQuery(\"#js-state-success\").hide();\n    jQuery('.cmcs-input-include').val(\"\");\n    jQuery('.fivethings-newsletter-container').hide();\n    jQuery('.newsletter-overlay').hide();\n}\nfunction callSubscribeFiveThings() {\n    var inputEmail = jQuery('.cmcs-input-include').val();\n    if (email_address != inputEmail) {\n        jQuery.ajax({\n            type: \"POST\",\n            url: extension.submit_url,\n            data: JSON.stringify({\"email_address\":inputEmail, \"merge_fields\":{\"SOURCE\": optimizely_page_source}}),\n            contentType: \"application/json; charset=UTF-8\",\n            dataType: \"json\",\n            success: function(response){\n                subscribedNightcap = true;\n                statusFiveThings = \"Thanks! Please check your inbox to confirm your subscription\";\n                window['optimizely'].push({\n                  type: \"event\",\n                  eventName: \"nl_signup\",\n                  tags: {\n                    source: extension.opg,\n                    type: extension.type\n                  }                  \n                });\n              \t!function(f,b,e,v,n,t,s)\n                        {if(f.fbq)return;n=f.fbq=function(){n.callMethod?\n                        n.callMethod.apply(n,arguments):n.queue.push(arguments)};\n                        if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';\n                        n.queue=[];t=b.createElement(e);t.async=!0;\n                        t.src=v;s=b.getElementsByTagName(e)[0];\n                        s.parentNode.insertBefore(t,s)}(window,document,'script','https://connect.facebook.net/en_US/fbevents.js');\n                        window.fbq('init', '1338815979496723'); \n                        window.fbq('track', 'CompleteRegistration');\n                //console.log(statusFiveThings);\n                email_address = \"\";\n                displaySuccessMessage(statusFiveThings);\n            },\n            error: function(e){\n                email_address = inputEmail;\n                statusFiveThings = JSON.parse(e.responseText).message + \" of Newsletter\";\n                //console.log(statusFiveThings);\n                jQuery(\".js-subscribe-error\").html(\"\");\n                jQuery(\".js-subscribe-error\").append(statusFiveThings);\n            }\n        });\n    }\n}\nfunction displaySuccessMessage(subscriptionMessage) {\n    jQuery('.submission-success-header').text(subscriptionMessage);\n    jQuery(\"js-subscribe-error\").html(\"\");\n    jQuery(\"#js-state-default\").hide();\n    jQuery(\".state-success\").show();\n    jQuery('.privacy-policy').hide();\n}\nfunction showValidationError() {\n    jQuery(\".js-subscribe-error\").html(\"\");\n    jQuery(\".js-subscribe-error\").append(\"Your e-mail address is invalid.\");\n}\nfunction validation() {\n    var emailID = jQuery('.cmcs-input-include').val();\n    if (checkEmailValidation(emailID)) {\n        callSubscribeFiveThings();\n    } else {\n        showValidationError();\n    }\n}\nfunction checkEmailValidation(inputValue){\n    var str=inputValue;\n    var check = /^([\\w\\.\\'\\+\\-]+)\\@([\\w\\-]{1,63}\\.)+[\\w\\-]{2,63}$/;\n    if (check.test(str)) {\n        testresults=true;\n    } else {\n        testresults=false;\n    }\n    return (testresults);\n}\nfunction setCookie(c_name,value,exdays,c_domain) {\n    //console.log(\"Cookie Droped\");\n    c_domain = (typeof c_domain === \"undefined\") ? \"\" : \"domain=\" + c_domain + \";\";\n    var exdate=new Date();\n    exdate.setDate(exdate.getDate() + exdays);\n    var c_value=escape(value) + ((exdays === null) ? \"\" : \"; expires=\"+exdate.toUTCString());\n    //console.log(c_name + \"=\" + c_value + \";\" + c_domain + \"path=/\");\n    document.cookie=c_name + \"=\" + c_value + \";\" + c_domain + \"path=/\";\n}\nfunction showFiveThings() {\n    \n  \tif (jQuery('.user-msg').attr('style') === undefined || jQuery('.user-msg').height() === 0 || window.jQuery('.user-msg').css('display') === \"none\") {\n      window['optimizely'].push({\n        type: \"event\",\n        eventName: \"nl_shown\",\n        tags: {\n          source: extension.opg,\n          type: extension.type\n        }\n      });\n      \n        jQuery('.fivethings-newsletter-container').css(\n            {\n                'bottom': '43px'\n            });\n    }\n}\ninitFiveThings();\nvar opt_data = optimizely.get('data');\nvar experiment_id = extension.experimentID;\nconsole.log('Extension Debugging Experiment ID and experiments object');\nconsole.log(experiment_id);\nconsole.log(opt_data.experiments);\nvar exp_variations = opt_data.experiments[experiment_id].variations;\nvar variation_map = optimizely.get('state').getVariationMap();\nvar cur_variation = variation_map[experiment_id].id;\nswitch (cur_variation) {\n    case exp_variations[0].id:\n    \t\tconsole.log('var 1');\n        break;\n  \tcase exp_variations[1].id:\n    \t\tconsole.log('var 2');\n        setTimeout(showFiveThings,15000);\n        break;\n    case exp_variations[2].id:\n    \t\tconsole.log('var 3');\n        setTimeout(showFiveThings,50000);\n        break;\n    case exp_variations[3].id:\n        var scrollUp = true;\n        var lastScrollTop = 0;\n        window.jQuery(window).bind('scroll', function(){\n        var st = window.jQuery(this).scrollTop();\n        if(scrollUp && st < lastScrollTop){\n          scrollUp = false;\n          console.log('Scroll Up');\n          showFiveThings();\n        }\n        lastScrollTop = st;\n        });\n    \t\tbreak;\n    case exp_variations[4].id:\n        var scrollFifty = true;\n        var lastScrollTop = 0;\n        window.jQuery(window).bind('scroll', function(){\n         window.scrollPercent = (window.jQuery(window).scrollTop() / (window.jQuery(document).height() - window.jQuery(window).height())) * 100;\n            if (window.scrollPercent >= 50 && scrollFifty) {\n        showFiveThings();\n        scrollFifty = false;\n         console.log('Scroll 50');\n            }\n        });\n    \t\tbreak;\n    case exp_variations[5].id:\n            var seconds_50 = false;\n            setTimeout(function(){\n                seconds_50=true;\n                console.log('35 Seconds + ');\n                console.log(seconds_50);\n            },15000);\n            var scrollFifty = true;\n            var scrollFifty_a = true;\n            var scrollUp = true;\n            var lastScrollTop = 0;\n            window.jQuery(window).bind('scroll', function(){\n              window.scrollPercent = (window.jQuery(window).scrollTop() / (window.jQuery(document).height() - window.jQuery(window).height())) * 100;\n                var st = window.jQuery(this).scrollTop();\n              if(window.scrollPercent >= 50 && scrollFifty_a){\n              console.log('Scrolled 50');\n                window.scrolled_50 = true;\n                scrollFifty_a = false;\n              }\n              if (scrollUp && st < lastScrollTop && seconds_50 && window.scrolled_50) {\n                console.log('Combination');\n                    showFiveThings();\n                scrollFifty = false;\n                scrollUp = false;\n                console.log('Scroll 50');\n              }\n              lastScrollTop = st;\n            });\n        break;\n    \n}});",
    "html": "<div class=\"fivethings-newsletter-container\">\n  <div class=\"close-button\"><img class=\"closeDialog\" src=\"http://i.cdn.turner.com/cnn/.element/img/4.0/political-newsletter/close.png\" />\n\n  </div>\n\t<div class=\"newsletter-wrapper\">\n\t\t<div class=\"subscription-brand\">\n      <img class=\"media__image media__image--responsive cmcs-eqjs\" src=\"{{ widget.image }}\">\n    </div>\n    <div id=\"js-state-default\" class=\"state-default\">\n      <p class=\"subscribe-intro-text\">{{ widget.message }}</p>\n      <p class=\"subscribe-cta-text\">{{ widget.cta_language }}</p>\n      <div class=\"cmcs-input-email\">\n        <input class=\"cmcs-input-include\" type=\"email\" name=\"email_address\" placeholder=\"Email address\" tabindex=\"1\" autocapitalize=\"off\" autocorrect=\"off\" accesskey=\"e\" value=\"\">\n      </div>\n      <input class=\"js-mc-submit\" type=\"submit\" tabindex=\"2\" value=\"Subscribe\">\n      <div class=\"js-subscribe-error\"></div>\n    </div>\n    <div id=\"js-state-success\" class=\"state-success\">\n      <h3 class=\"submission-success-header\">Submission Success</h3>\n      <div class=\"js-cnn-news-ok\"></div>\n      <div class=\"js-cnn-sub-ok\">OK</div>\n    </div>\n    <div class=\"privacy-policy\">\n      <p class=\"privacy-text\">By subscribing, you agree to our <a href=\"/privacy\">privacy policy</a>.</p>\n    </div>\n\t</div>\n</div>",
    "css": ".js-cnn-sub-ok {\n\tbackground-position:\t51px center;\n\tmargin: 0 auto;\n  width: 73px;\n  background-color: #333;\n  font-weight: 300;\n  font-size: 1.0rem;\n  background-repeat: no-repeat;\n  border: 0;\n  color: #fff;\n  margin-top: 10px;\n  padding: 8px;\n  text-align: left;\n  background-size: 10px;\n  text-transform: uppercase;\n}\n\n.submission-success-header {\n  border-top: 1px solid #e9e9e9;\n  color: #777;\n  font-size: 1.0rem\n}\n\n#js-state-success {\n  text-align: center;\n  padding-bottom: 30px;\n  display: none;\n}\n\n.privacy-policy a {\n text-decoration: underline; \n  \n  color: #d9d9d9;\n}\n\n.privacy-policy {\n  text-align: center;\n  font-size: 10px;\n  position: absolute;\n  bottom: 0;\n  margin-left: 15px;\n  color: #d9d9d9;\n  left: 0;\n  right: 0;\n  margin: auto; \n}\n\n.dark .privacy-policy, .dark .privacy-policy a {\n  color: #202020;\n}\n.js-subscribe-error {\n  color: #ee373b;\n  font-size: 10px;\n  margin-top: 53px; \n}\n\n.js-mc-submit {\n  float: left;\n  background-color: rgba(255,255,255,0.25);\n  font-weight: 100;\n  font-size: .9rem;\n  background-position: 83px center;\n  background-repeat: no-repeat;\n  border: 0;\n  color: #fff;\n  padding: 8px 8px 8px 16px;\n  text-align: left;\n  width: 109px;\n  background-size: 11px;\n  outline: none;\n  border-radius: 0px; \n  text-transform: uppercase;\n}\n\n.cmcs-input-include {\n  float: left;\n  background: #fff;\n  border: 1px solid #d9d9d9;\n  font-weight: 300;\n  padding: .5em 12px .6em;\n  font-size: .9rem;\n  color: #737373;\n  width: 61%;\n  outline: none;\n  border-radius: 0px; \n}\n\n.dark .cmcs-input-include {\n  background: rgba(255,255,255,0.25);\n  border: 1px solid rgba(32,32,32,0.25);\n}\n\n.dark .cmcs-input-include::-webkit-input-placeholder {\n  color: #fff;\n}\n\n.subscribe-intro-text {\n  font-size: 19px;\n  text-align: center;\n  color: #202020;\n  font-weight: 500;\n  margin-bottom: 0px;\n  line-height: 19px;\n}\n\n.subscribe-cta-text {\n  font-size: 16px;\n  text-align: center;\n  font-weight: 300;\n  margin-bottom: 2px;\n}\n\n.subscription-brand {\n    max-width: 180px;\n  width: 50%;\n  \n}\n\n.close-button {\n  z-index: 2;\n  height: 30px;\n  position: absolute;\n  width: 30px;\n  right: 5px; \n}\n\n.closeDialog {\n  float: right;\n  margin-top: 10px;\n  margin-right: 10px;\n  height: 15px;\n  width: 15px;\n  border: 0px;\n  cursor: pointer; \n}\n\n.close-text {\n  color: #777;\n  font: 20px/100% arial sans-serif;\n  position: absolute;\n  right: 5px;\n  text-decoration: none;\n  top: 5px;\n  cursor: pointer; \n}\n\n.newsletter-wrapper {\n  height: inherit;\n  width: inherit;\n  padding: 20px;\n  padding-top: 5px;\n  position: absolute;\n  z-index: 1; \n}\n\n.fivethings-newsletter-container {\n  position: fixed;\n  bottom: -300px;\n  width: inherit;\n  height: 170px;\n  z-index: 2;\n  background: #F5F5F5;\n  -webkit-transition: bottom 5s;\n  transition: bottom 5s; \n}",
    "undo_js": "\njQuery('.fivethings-newsletter-container').remove();"
  }
}