-
Notifications
You must be signed in to change notification settings - Fork 70
/
config.json
56 lines (56 loc) · 10 KB
/
config.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
{
"plugin_type": "widget",
"name": "Timed Modal",
"edit_page_url": "www.optimizely.com",
"form_schema": [
{
"default_value": "This is a headline",
"field_type": "text",
"name": "headline1",
"label": "Headline 1",
"options": null
},
{
"default_value": "This is a subheadline",
"field_type": "text",
"name": "description",
"label": "Description",
"options": null
},
{
"default_value": "CTA Text",
"field_type": "text",
"name": "cta",
"label": "CTA",
"options": null
},
{
"default_value": ".",
"field_type": "text",
"name": "ctaLink",
"label": "CTA Link",
"options": null
},
{
"default_value": "//cdn.optimizely.com/img/2851030069/f503108533b44c3b9a60546133e44bd0.png",
"field_type": "image",
"name": "imageURL",
"label": "Image URL",
"options": null
},
{
"default_value": 5,
"field_type": "number",
"name": "timer",
"label": "Time (in Seconds)",
"options": null
}
],
"description": "Pop a Modal at a specific time in seconds.",
"options": {
"html": "<div class=\"optly-modal\">\n <div class=\"optly-modal-content\">\n \t<span class=\"optly-modal-close\">x</span>\n \t<div class=\"grid\">\n \t\t<div class=\"grid__cell optly-modal-left\">\n \t\t\t<h1>{{ widget.headline1 }}</h1>\n \t\t\t<h3>{{ widget.description }}</h3>\n \t\t\t<form class=\"optly-modal-form\">\n \t\t\t\t<a href=\"{{ widget.ctaLink }}\"><button class='button button--highlight button--large'>{{ widget.cta }}</button></a>\n \t\t\t</form>\n \t\t</div>\n \t\t<div class=\"grid__cell optly-modal-right\">\n \t\t\t<img src='{{ widget.imageURL }}'>\n \t\t</div>\n \t</div>\n </div>\n</div>",
"css": ".optly-modal {\n background-color: rgb(0,0,0);\n background-color: rgba(0,0,0,0.4);\n display: none;\n height: 100%;\n left: 0;\n overflow: auto;\n padding-top: 9%;\n position: fixed;\n top: 0;\n width: 100%;\n z-index: 1000;\n}\n\n.optly-modal-close {\n color: #aaa;\n float: right;\n font-family: Helvetica,Arial,sans-serif;\n font-size: 28px;\n font-weight: bold;\n margin: -2%;\n}\n\n.optly-modal-close:hover,\n.optly-modal-close:focus {\n color: black;\n cursor: pointer;\n text-decoration: none;\n}\n\n.optly-modal-content {\n background-color: #fefefe;\n margin: auto;\n padding: 2% 3% 3% 3%;\n border: 1px solid #888;\n width: 80%;\n max-width: 1100px;\n position: relative;\n}\n\n.optly-modal-left {\n\tmargin-top: 5%\n}\n\n.optly-modal-left h1 {\n color: #0F75B2;\n font-size: 3em;\n line-height: 1.2em;\n margin-bottom: 20px;\n}\n\n.optly-modal-left h3 {\n font-size: 1.5em;\n color:rgba(0,0,0,0.5);\n margin-bottom: 20px;\n}\n\n.optly-modal-right img {\n margin-top: 0%;\n max-height:90%;\n max-width:90%;\n border: 1px solid transparent;\n border-radius: 8px;\n}\n\n.grid {\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-flex-wrap: wrap;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n margin-left: -20px; }\n \n .grid__cell {\n -webkit-flex: 1;\n -ms-flex: 1;\n flex: 1;\n padding-left: 20px; }\n \n .grid--gutter--narrow {\n margin-left: -10px; }\n \n .grid--gutter--narrow > .grid__cell {\n padding-left: 10px; }\n \n .grid--gutter--wide {\n margin-left: -40px; }\n \n .grid--gutter--wide > .grid__cell {\n padding-left: 40px; }\n \n .grid--flush {\n margin-left: 0; }\n \n .grid--flush > .grid__cell {\n padding-left: 0; }\n \n .grid--natural > .grid__cell {\n -webkit-flex: none;\n -ms-flex: none;\n flex: none; }\n \n .grid--center {\n -webkit-align-items: center;\n -ms-flex-align: center;\n -ms-grid-row-align: center;\n align-items: center; }\n \n .grid--bottom {\n -webkit-align-items: flex-end;\n -ms-flex-align: end;\n -ms-grid-row-align: flex-end;\n align-items: flex-end; }\n \n .grid__cell[class*=\"width-\"] {\n -webkit-flex: none;\n -ms-flex: none;\n flex: none; }\n\n\n.button {\n display: inline-block;\n vertical-align: middle;\n white-space: nowrap;\n font-family: inherit;\n cursor: pointer;\n margin: 0;\n line-height: 32px;\n border-width: 1px;\n border-style: solid;\n font-size: 13px;\n font-weight: 400;\n border-radius: 2px;\n height: 34px;\n padding: 0 15px;\n background-color: #F6F6F7;\n border-color: #CDD0D8;\n color: #262626; }\n \n .button:visited {\n color: #262626; }\n \n .button:hover {\n color: #262626;\n box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.16); }\n \n .button.is-active,\n .button:active {\n background: #64738A;\n border-color: #3B5871;\n color: #FFF;\n box-shadow: inset 1px 0 3px 0 rgba(0, 0, 0, 0.5);\n text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); }\n \n .button--highlight {\n background-color: #0F75B2;\n border-color: #0E699F;\n color: #FFF;\n text-shadow: 1px 0 1px rgba(0, 0, 0, 0.2); }\n \n .button--highlight:hover {\n background: #0081BA;\n border-color: #0176A9; }\n \n .button--highlight:active {\n background: #0074B4;\n border-color: #005584;\n box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5); }\n \n .button--highlight:visited,\n .button--highlight:hover,\n .button--highlight:active,\n .button--highlight:focus {\n color: #FFF; }\n \n .button--outline {\n background-color: transparent;\n border-color: #8D96A8;\n color: #64738A; }\n \n .button--outline:visited {\n color: #64738A; }\n \n .button--outline:hover {\n background-color: transparent;\n border-color: #0074B4;\n color: #0074B4;\n text-shadow: none;\n box-shadow: none; }\n \n .button--outline:active {\n background-color: transparent;\n border-color: #00415D;\n color: #00415D;\n text-shadow: none;\n box-shadow: none; }\n \n .button--outline-reverse {\n background-color: transparent;\n border-color: #FFF;\n color: #FFF; }\n \n .button--outline-reverse:visited {\n color: #FFF; }\n \n .button--outline-reverse:hover {\n background: transparent;\n border-color: #E0E1E5;\n color: #E5E5E9; }\n \n .button--outline-reverse:active {\n background: transparent;\n border-color: #FFF;\n color: #FFF; }\n \n .button--danger {\n background-color: #E8464E;\n border-color: #AA161E;\n color: #FFF;\n text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); }\n \n .button--danger:hover {\n background: #F35E65;\n border-color: #AC192B; }\n \n .button--danger:active {\n background: #CB2D35;\n border-color: #8F192B; }\n \n .button--danger:visited,\n .button--danger:hover,\n .button--danger:active,\n .button--danger:focus {\n color: #FFF; }\n \n .button--plain {\n color: #00415D;\n border-color: transparent;\n background-color: transparent;\n text-shadow: none;\n box-shadow: none; }\n \n .button--plain:hover {\n color: #8D96A8; }\n \n .button--plain:active {\n color: #00415D; }\n \n .button--plain:visited,\n .button--plain:hover,\n .button--plain:active,\n .button--plain:focus {\n border-color: transparent;\n background-color: transparent;\n text-shadow: none;\n box-shadow: none; }\n \n .button--toggle:hover {\n color: #262626; }\n \n .button--toggle:active,\n .button--toggle.is-active:hover {\n color: #FFF; }\n \n .button--toggle:not(:hover):not(.is-active) {\n border-color: transparent;\n background-color: transparent; }\n \n .button--small {\n font-size: 11px;\n font-weight: 400;\n border-radius: 2px;\n line-height: 26px;\n height: 27px;\n padding: 0 7px; }\n \n .button--large {\n font-size: 15px;\n font-weight: 400;\n border-radius: 2px;\n line-height: 41px;\n height: 42px;\n padding: 0 20px; }\n \n .button--narrow {\n padding-left: 10px;\n padding-right: 10px; }\n \n .button--tight {\n padding-left: 5px;\n padding-right: 5px; }\n \n .button--full {\n width: 100%;\n padding-right: 0;\n padding-left: 0;\n text-align: center; }\n \n .button--icon {\n line-height: 1.4; }\n \n .button--icon .icon {\n vertical-align: sub; }\n \n .button[disabled],\n .button--disabled,\n .button--disabled:visited,\n .button--disabled:hover,\n .button--disabled:active,\n .button--disabled:focus {\n cursor: default;\n box-shadow: none;\n background-color: #EFF0F2;\n border-color: #E5E5E9;\n color: #a6a6a6;\n text-shadow: none;\n box-shadow: none; }\n \n .button[disabled].button--plain,\n .button--disabled.button--plain,\n .button--disabled:visited.button--plain,\n .button--disabled:hover.button--plain,\n .button--disabled:active.button--plain,\n .button--disabled:focus.button--plain {\n background-color: transparent;\n border-color: transparent; }\n \n .button[disabled].button--outline-reverse,\n .button--disabled.button--outline-reverse,\n .button--disabled:visited.button--outline-reverse,\n .button--disabled:hover.button--outline-reverse,\n .button--disabled:active.button--outline-reverse,\n .button--disabled:focus.button--outline-reverse {\n background-color: transparent; }",
"apply_js": "var utils = window.optimizely.get(\"utils\");\n \nvar hidePopup = function() {\n document.querySelector('.optly-modal').style.display = \"none\";\n window['optimizely'] = window['optimizely'] || [];\n window['optimizely'].push({\n type: \"event\",\n eventName: \"close_modal\"\n });\n};\n\nvar showPopup = function() {\n\tdocument.querySelector('.optly-modal').style.display = \"block\";\n};\n\nutils.waitForElement('body').then(function(element) {\n var html = widget.$html;\n element.insertAdjacentHTML('beforeend', html);\n\n document.querySelector('.optly-modal').addEventListener('click', function() {\n hidePopup();\n });\n\n\tvar pop = setTimeout(function(){\n showPopup();\n }, widget.timer*1000);\n});",
"undo_js": "var extensionHTML = document.querySelector('.optly-modal');\nif(extensionHTML) extensionHTML.remove();"
}
}