CNN Desktop Newsletter Multi-trigger

{
  "plugin_id": "newsletter_desktop_support",
  "plugin_type": "widget",
  "name": "Desktop 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://i2.cdn.turner.com/cnn/2016/images/10/19/reverse-5things-logo-small-v2.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": "Subscribe to 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": "5TpopupArticlesD",
      "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": "rgba(32, 32, 32, 1)",
      "field_type": "color",
      "name": "button_color",
      "label": "Button 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": "rgba(0, 0, 0, 1)",
      "field_type": "color",
      "name": "text_color",
      "label": "Text Color",
      "options": {
        "mode": "rgba"
      }
    },
    {
      "default_value": "8146584311",
      "field_type": "text",
      "name": "experimentID",
      "label": "Experiment ID",
      "options": null
    }
  ],
  "description": "Alternate desktop newsletter extension (Oct 2016)",
  "options": {
    "apply_js": "/** Wait more than 15 sec ***/\n/* Here you can chnage the value for page source and value should be in CamelCase, no special characters*/\nconsole.log('Apply JS Start');\nemail_address = \"\";\noptimizely_page_source = extension.opg;\nvar path = window.location.href;\nvar utils = optimizely.get('utils');\nutils.waitForElement(\"body.pg-article\").then(function(){\nwindow.jQuery(\"body.pg-article\").append(extension.$html);\nfunction loadFiveThings() {\n\t\t//window.jQuery('.subscribe-test-wrapper').css('border-top', \"2px solid \" + extension.bordertop);\n  \twindow.jQuery('.js-mc-submit').css('background-color', extension.button_color);\n  \twindow.jQuery('.subscribe-intro-text').css('color', extension.text_color);\n  \twindow.jQuery('.subscribe-cta-text').css('color', extension.text_color);\n \t\twindow.jQuery('.subscribe-test-wrapper .modal-body').css('background-color', extension.background_color);\n    //window.jQuery('.subscribe-test-wrapper .OB_TR_2 .OUTBRAIN').attr('data-src', path);\n  \tif (extension.color_theme == \"dark\") {\n     \t window.jQuery('.modal-body').addClass('dark');\n    }\n    function isScrollsUp(e) {\n        var direction = (function () {\n            var delta = (e.type === 'DOMMouseScroll' ?\n            e.originalEvent.detail * -40 :\n            e.originalEvent.wheelDelta);\n            return delta > 0 ? 0 : 1;\n        }());\n        if (direction === 0) {\n            showFiveThings();\n        }\n    }\n    window.jQuery(\".js-mc-submit\").click(function(event) {\n        event.preventDefault();\n        console.log( \"subscription called.\" );\n        var inputEmail = window.jQuery('.cmcs-article-embed').val();\n        if (checkemail(inputEmail)) {\n            if (email_address != inputEmail) {\n                window.jQuery.ajax({\n                    type: \"POST\",\n                    url: extension.submit_url,\n                    data: JSON.stringify({\"email_address\":inputEmail, \"merge_fields\":{\"SOURCE\": extension.opg}}),\n                    contentType: \"application/json; charset=UTF-8\",\n                    dataType: \"json\",\n                    success: function(response){\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\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                        window.jQuery(\".js-subscribe-error\").html(\"\");\n                        window.jQuery(\"#js-state-default\").css({\"display\": \"none\"});\n                        window.jQuery(\".subscription-brand\").css({\"display\": \"none\"});\n                        window.jQuery(\"#js-state-success\").css({\"display\": \"block\"});\n                        email_address = \"\";\n                    },\n                    error: function(e){\n                        email_address = inputEmail;\n                        window.jQuery(\".js-subscribe-error\").html(\"\");\n                        window.jQuery(\".js-subscribe-error\").append(JSON.parse(e.responseText).message);\n                    }\n                });\n            }\n        } else {\n            window.jQuery(\".js-subscribe-error\").html(\"\");\n            window.jQuery(\".js-subscribe-error\").append(\"Your e-mail address is invalid.\");\n        }\n    });\n    window.jQuery(\".js-cnn-sub-ok\").click(function() {\n        close5Things();\n    });\n    window.jQuery(\".closeDialog\").click(function() {\n        close5Things();\n    });\n}\nloadFiveThings();\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 close5Things() {\n    window['optimizely'].push({\n        type: \"event\",\n        eventName: \"nl_closed\",\n        tags: {\n          source: extension.opg,\n          type: extension.type\n        }  \n    });\n    window.jQuery(\"#overlay\").css({\"display\": \"none\"});\n    window.jQuery(\".subscribe-test-wrapper\").css({\"border-top\": \"none\"});\n    window.jQuery(\".modal-body\").css({\"display\": \"none\"});  \n    window.jQuery(\".js-subscribe-error\").html(\"\");\n    window.jQuery(\".cmcs-article-embed\").val(\"\");\n    window.jQuery(\".subscription-brand\").css({\"display\": \"table-cell\"});\n    window.jQuery(\"#js-state-default\").css({\"display\": \"table-cell\"});\n    window.jQuery(\"#js-state-success\").css({\"display\": \"none\"});\n}\nfunction showFiveThings() {\n    if (window.jQuery('.user-msg').height() === 0 || window.jQuery('.user-msg').height() === 120 || 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        window.jQuery(\"#overlay\").show();\n        window.jQuery(\".subscribe-test-wrapper\").show(\"slow\").css(\n            {\n                'bottom': 0\n            });\n    }\n}\nfunction checkemail(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}\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;\nconsole.log(\"cur_variation is \");\nconsole.log(cur_variation);\nconsole.log(\"exp_variation is \");\nconsole.log(exp_variations);\nswitch (cur_variation) {\n    case exp_variations[0].id:\n        break;\n  \tcase exp_variations[1].id:\n        setTimeout(showFiveThings,15000);\n        break;\n    case exp_variations[2].id:\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('15 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}\n});",
    "html": "<div class=\"subscribe-test-wrapper\">\n  <div class=\"modal-body\">\n  \t<img class=\"closeDialog\" src=\"http://i.cdn.turner.com/cnn/.element/img/4.0/political-newsletter/close.png\" />\n    <ul class=\"cn cn-list-hierarchical-xs cn--idx-1 cn- subscriber-test\">\n      <article class=\"cd cd--tool cd--tool__mailchimp-subscribe\" data-analytics=\"tool-type_list-hierarchical-xs_mailchimp-subscribe\" data-vr-contentbox=\"\" data-eq-pts=\"xsmall: 0, small: 300, medium: 460, large: 780\" data-eq-state=\"large\">\n        <div class=\"js-cmcs-embedded cmcs-subscription-wrapper\">\n          <form class=\"js-cmcs-subscription-form cmcs-embedded\" novalidate=\"\">\n            <div class=\"subscription-brand\">\n              <img class=\"media__image media__image--responsive cn-\" src=\"{{ widget.image }}\"></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-article-embed input-email\" type=\"email\" name=\"email_address\" placeholder=\"Enter email address\" tabindex=\"1\" autocapitalize=\"off\" autocorrect=\"off\" accesskey=\"e\" value=\"\">\n                <div class=\"js-subscribe-error subscription-error-text\">\n                </div>\n              </div>\n              <input class=\"js-mc-submit\" type=\"submit\" tabindex=\"2\" value=\"Subscribe\">\n              <p class=\"subscribe-privacy-policy\">By subscribing, you agree to our <a href=\"/privacy\">privacy policy</a>.</p>\n            </div>\n            <div id=\"js-state-success\" class=\"state-success\">\n              <h3 class=\"submission-success-header\">Thank you for subscribing!</h3>\n              <div class=\"js-cnn-news-ok\"></div>\n              <div class=\"js-cnn-sub-ok\">OK</div>\n            </div>\n          </form>\n        </div>\n      </article>\n    </ul>\n  </div>\n</div>",
    "css": ".dark .cmcs-article-embed {\n  background: rgba(255,255,255,0.25);\n  border: 1px solid rgba(32,32,32,0.25);\n}\n\n.js-mc-submit {\n \tmargin-left: 0px !important; \n  width: 92px !important;\n}\n\n.cmcs-input-email {\n \t\tline-height:0.5em; \n}\n.dark .cmcs-article-embed::-webkit-input-placeholder {\n  color: #fff;\n}\n\n\n.cmcs-subscription-wrapper .js-cmcs-subscription-form {\n padding: 0; \n}\n\n.subscribe-privacy-policy {\n  color: #d9d9d9;\n  padding-right: 11px;\n}\n\n.subscribe-privacy-policy a {\n  text-decoration: underline;\n  color: #d9d9d9;\n}\n\n.dark .subscribe-privacy-policy {\n  color: #202020;\n}\n\n\n.dark .subscribe-privacy-policy a {\n  text-decoration: underline;\n  color: #202020;\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    .subscriber-test {\n      width: 700px;\n      margin: 0 auto;\n    }\n    .input-email {\n      background: rgba(255,255,255,0.25);\n      border: 1px solid #d9d9d9;\n      color: #fff !important;\n      font-weight:300;\n      display: block;\n      padding: 5px 8px;\n      width: 100%;\n      font-size: 1.125rem;  \n    }\n\n    .modal-body form {\n      border: 0;\n      background: transparent;\n    }\n\n    .modal-body {\n      background: rgb(251, 251, 251);\n      padding: 20px;\n    }\n\n    .subscribe-test-wrapper {\n      position: fixed;\n      z-index: 300;\n      width: 100%;\n      display: none;\n      left: 0;\n    }\n    .subscribe-intro-text {\n      margin-top: 13px;\n      font-size: 18px;\n      font-weight: 500;\n      line-height: 20px;\n      margin-bottom: 13px 0 0;\n      padding: 0 !important;\n      margin: 0 !important;\n    }\n\t\t.subscribe-cta-text {\n      font-size: 18px;\n      font-weight: 500;\n      line-height: 20px;\n      padding: 0 !important;\n      margin: 0 0 5px !important;\n    }\n\t\t.subscribe-privacy-policy {\n      font-size: 0.8em;\n      text-align:left;\n      clear: both;\n    }\n    .cmcs-input-email {\n     0.5em; \n    }\n    \n    .js-cnn-sub-ok {\n      width: 52px;\n      background-position: 24px center;\n    }\n\n    .subscription-error-text {\n      width: 375px;\n      padding-top: 0px;\n    }\n.js-mc-submit {\n \t\ttext-transform: uppercase; \n}\n    .cmcs-subscription-wrapper .cmcs-five-things .js-cnn-sub-ok, .cmcs-subscription-wrapper .cmcs-five-things .js-mc-submit {\n      color: #fefefe;\n      font-weight: 400;\n    }\n\n\t\tbody > div.subscribe-test-wrapper > div > ul > article .cmcs-five-things {\n      border: none;\n      \n      \n    }",
    "undo_js": "\njQuery('.fivethings-newsletter-container').remove();"
  }
}