Mobile_newsletter_support.json

{
  "plugin_id": "newsletter_mobile_support",
  "plugin_type": "widget",
  "name": "Mobile Newsletter (Support)",
  "edit_page_url": "http://www.cnn.com/2016/10/03/health/nobel-prize-2016-physiology-medicine-yoshinori-ohsumi/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": "Get the most important news delivered to your inbox daily with our 5 Things for Your New Day newsletter.",
      "field_type": "multi_text",
      "name": "message",
      "label": "Message",
      "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": "popupArticlesMW",
      "field_type": "text",
      "name": "opg",
      "label": "Optimizely Page Source",
      "options": null
    },
    {
      "default_value": "",
      "field_type": "text",
      "name": "experimentID",
      "label": "Experiment ID",
      "options": null
    }
  ],
  "description": "All mobile newsletter's can be created using this extension.  ",
  "options": {
    "apply_js": "email_address = \"\";\noptimizely_page_source = extension.opg;\nfunction initFiveThings() {\n\tjQuery('body').prepend(extension.$html);\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 = \"Thank you for subscribing\";\n                window['optimizely'].push({\n                  type: \"event\",\n                  eventName: \"nl_signup\",\n                  tags: {\n                    source: extension.opg,\n                    type: extension.type\n                  }                  \n                });\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    if (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();\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;\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      <div class=\"cmcs-input-email\">\n        <input class=\"cmcs-input-include\" type=\"email\" name=\"email_address\" placeholder=\"Enter 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  background-image: url(http://i.cdn.turner.com/cnn/images/bulletin/arrow.png);\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}\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: 20px;\n  display: none;\n}\n\n.privacy-policy a {\n text-decoration: underline; \n}\n\n.privacy-policy {\n  text-align: center;\n  font-size: 12px;\n  position: absolute;\n  bottom: 15px;\n  margin-left: 15px;\n  color: #d9d9d9;\n  left: 0;\n  right: 0;\n  margin: auto; \n}\n\n.js-subscribe-error {\n  color: #ee373b;\n  font-size: 12px;\n  margin-top: 53px; \n}\n\n.js-mc-submit {\n  float: left;\n  background-color: #333;\n  background-image: url(http://i.cdn.turner.com/cnn/images/bulletin/arrow.png);\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}\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.subscribe-intro-text {\n  font-size: 12px;\n  text-align: left;\n  color: #272A30; \n}\n\n.subscription-brand {\n    margin: 0 auto\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: 240px;\n  z-index: 2;\n  background: #F5F5F5;\n  -webkit-transition: bottom 5s;\n  transition: bottom 5s; \n}",
    "undo_js": "\njQuery('.fivethings-newsletter-container').remove();"
  }
}