CNN - Desktop Newsletter

{
  "plugin_id": "newsletter_desktop",
  "plugin_type": "widget",
  "name": "Desktop Newsletter",
  "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/political-5things-logo.png",
      "field_type": "image",
      "name": "image",
      "label": "Image",
      "options": null
    },
    {
      "default_value": "Give us 5 minutes and we'll give you the 5 things you need to know  before you’re out the door. Sign up for our morning newsletter and arrive at work informed",
      "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": "5TpopupArticlesD",
      "field_type": "text",
      "name": "opg",
      "label": "Optimizely Page Source",
      "options": null
    },
    {
      "default_value": "rgba(251, 177, 46, 1)",
      "field_type": "color",
      "name": "bordertop",
      "label": "Border Top Color",
      "options": {
        "mode": "rgba"
      }
    },
    {
      "default_value": "rgba(51, 51, 51, 1)",
      "field_type": "color",
      "name": "button_color",
      "label": "Button Color",
      "options": {
        "mode": "rgba"
      }
    }
  ],
  "description": "All mobile newsletter's can be created using this extension. ",
  "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*/\nemail_address = \"\";\noptimizely_page_source = extension.opg;\nwindow.jQuery(\"body.pg-article\").append(extension.$html);\nfunction loadFiveThings() {\n\t\twindow.jQuery('.subscribe-test-wrapper').css('border-top', \"2px solid \" + extension.bordertop);\n  \twindow.jQuery('.cmcs-five-things .js-mc-submit').css('background-color', extension.button_color);\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\": optimizely_page_source}}),\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                              type: extension.type,\n                              source: extension.opg\n                            }                            \n                        });\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(\".subscribe-test-wrapper\").css({\"border-top\": \"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          type: extension.type,\n          source: extension.opg\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}\nshowFiveThings();\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-five-things 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\"><p class=\"subscribe-intro-text\">{{ widget.message }} <a href=\"/privacy\">privacy policy</a>.</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            </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": "\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: #ffffff;\n      border: 1px solid #d9d9d9;\n      color: #737373;\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    }\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-bottom: 10px;\n      margin-top: 13px;\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    .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      background: rgb(251, 251, 251);\n      \n    }",
    "undo_js": "\njQuery('.fivethings-newsletter-container').remove();"
  }
}