- \n\n '+Object.keys(h).map(function(l){return'
- \n
- \n '+g.services[l].map(function(m){return m.is_parent?'':'\n
- \n
No additional content options in the '+g.parents[l]+' category.
\n ')+'\n\n '}).join('\n')+'\n\n - \n
\n
\n '}).then(function(){var g=function(){var l=document.querySelector('div.form .response');l&&l.parentNode.removeChild(l),fetch(e,{method:'post',body:new FormData(h)}).then(function(m){return m.json()}).then(function(m){a.removeChild(document.querySelector('.message'));var n=document.createElement('div');n.classList.add('response'),console.log('error?',m),m.error?(n.classList.add('error'),n.innerHTML='Error: '+g.message+'
\nDouble check the link you recieved. If it’s incorrect, contact the Digital Marketing team.
\n'+m.message+'
'):(n.classList.add('success'),n.innerHTML=''+m.message+'
\nPlease allow 24-48 for your changes to be made live on your site. If you still don\'t see the changes, please contact the web team.
'),h.innerHTML='',h.appendChild(n);var o=Math.floor(10*Math.random())+1,p=document.createElement('div');p.classList.add('success-img'),p.innerHTML='
',h.insertBefore(p,n)})},h=document.getElementById('update-form');h.addEventListener('submit',function(l){l.preventDefault(),g()})}).catch(function(){a.innerHTML='\n
\n '})});
--------------------------------------------------------------------------------
/dist/assets/styles/verify.css:
--------------------------------------------------------------------------------
1 | :root {
2 | font-size: 100%;
3 | line-height: 1.2;
4 | }
5 | :root * {
6 | box-sizing: border-box;
7 | }
8 | body {
9 | margin: 0;
10 | color: #333;
11 | min-height: 100vh;
12 | font: 400 1rem/1.2 Montserrat, Helvetica, Arial, sans-serif;
13 | background: linear-gradient(135deg, rgba(5,127,162,1) 0%, rgba(11,141,143,1) 100%);
14 | }
15 |
16 | .page-header {
17 | padding: 2em;
18 | margin: 0 auto;
19 | max-width: 1000px;
20 | color: #fff;
21 | }
22 | .page-header .logo {
23 | display: block;
24 | margin: 0 auto;
25 | width: 300px;
26 | max-width: 100%;
27 | }
28 | .page-header h1 {
29 | font-size: 1.5em;
30 | font-weight: 600;
31 | margin: 2em auto;
32 | text-align: center;
33 | }
34 | @media only screen and (min-width: 480px) {
35 | .page-header h1 {
36 | font-size: 2em;
37 | }
38 | }
39 | .page-header p {
40 | text-align: left;
41 | font-weight: 200;
42 | font-size: 1.2em;
43 | line-height: 1.5;
44 | }
45 | .page-header .error p {
46 | text-align: center;
47 | }
48 |
49 |
50 | div.form {
51 | max-width: calc(860px - 6em);
52 | margin: 3em 1.5em;
53 | padding: 0 0 10em;
54 | }
55 | @media only screen and (min-width: 480px) {
56 | div.form {
57 | margin: 3em;
58 | }
59 | }
60 | @media only screen and (min-width: 860px) {
61 | div.form {
62 | margin: 1em auto;
63 | }
64 | }
65 | ul {
66 | list-style: none;
67 | margin: 0;
68 | padding: 0;
69 | }
70 | li {
71 | margin: 0;
72 | padding: 0;
73 | }
74 | ul.categories > li {
75 | display: block;
76 | width: auto;
77 | margin: 3em auto;
78 | border-radius: 4px;
79 | background: #fff;
80 | background: linear-gradient(135deg, rgba(242,242,242,1) 0%, rgba(237,237,237,1) 100%);
81 | box-shadow: 1px 1px 9px -2px rgba(0,0,0,0.4);
82 | }
83 | .categories > li > label {
84 | display: block;
85 | width: 100%;
86 | background-color: #333;
87 | color: #fff;
88 | font-size: 1.5rem;
89 | line-height: 2;
90 | border-radius: 4px 4px 0 0;
91 | padding: 0 0.5em;
92 | vertical-align: middle;
93 | }
94 | ul.categories li p {
95 | padding: 1em 1.5em 0.5em;
96 | margin: 0;
97 | }
98 | ul.services {
99 | padding: 0.5em 1.5em 1em;
100 | }
101 | ul.services li {
102 | font-size: 1.2rem;
103 | line-height: 1.6;
104 | margin-left: 1.3em;
105 | }
106 | ul.services li label {
107 | margin-left: -1.3em;
108 | text-indent: 1.3em;
109 | }
110 |
111 |
112 | form {
113 |
114 | }
115 | input[type="checkbox"] ~ label {
116 | cursor: pointer;
117 | }
118 | input[type="checkbox"] ~ label svg {
119 | position: relative;
120 | top: 2px;
121 | }
122 | input[type="checkbox"].category:checked:hover ~ ul.services li input[type="checkbox"]:checked ~ label,
123 | input[type="checkbox"].category:checked ~ label:hover ~ ul.services li input[type="checkbox"]:checked ~ label {
124 | text-decoration: line-through;
125 | color: #f00;
126 | }
127 | ul.services input[type="checkbox"]:not(:checked) ~ label {
128 | opacity: 0.5;
129 | }
130 | ul.services input[type="checkbox"]:not(:checked):hover ~ label,
131 | ul.services input[type="checkbox"]:not(:checked) ~ label:hover {
132 | color: #3a8e11;
133 | opacity: 1;
134 | }
135 |
136 | .form .response {
137 | margin: 2em auto 0;
138 | padding: 2em 1em;
139 | background: #eee;
140 | /* border: 3px solid #bbb; */
141 | box-shadow: 1px 1px 9px -2px rgba(0,0,0,0.4);
142 | }
143 | .form .response p {
144 | font-size: 1.2em;
145 | line-height: 1.5;
146 | padding: 0 0 0.5em;
147 | }
148 | .form .response p:last-child {
149 | border-bottom: 3px solid #bbb;
150 | }
151 | .response.success p:last-child {
152 | border-color: #3a8e11;
153 | }
154 | .response.error p:last-child {
155 | border-color: #f4961a;
156 | }
157 | form .success-img {
158 | }
159 | .success-img img {
160 | width: 100%;
161 | max-width: 500px;
162 | display: block;
163 | margin: 0 auto;
164 | }
165 |
166 | label[for=authcode] {
167 | display: block;
168 | color: #fff;
169 | text-align: center;
170 | }
171 | input.authcode {
172 | display: block;
173 | margin: 0.5em auto 1em;
174 | background: #fff;
175 | color: #333;
176 | font-size: 1.4em;
177 | padding: 0.3em;
178 | border: none;
179 | box-shadow: inset 1px 1px 9px -2px rgba(0,0,0,0.4);
180 | width: 100%;
181 | max-width: 400px;
182 | }
183 | input[type=submit] {
184 | display: block;
185 | margin: 2em 0 0 auto;
186 | background: #fff;
187 | color: #333;
188 | cursor: pointer;
189 | font-size: 1.6em;
190 | padding: 0.5em 2em;
191 | border: none;
192 | box-shadow: 1px 1px 9px -2px rgba(0,0,0,0.4);
193 | }
194 | input[type=submit]:hover {
195 | background: #333;
196 | color: #fff;
197 | }
198 | input[type=submit]:active {
199 | background: #333;
200 | color: #fff;
201 | position: relative;
202 | top: 1px;
203 | left: 1px;
204 | box-shadow: 0px 0px 9px -2px rgba(0,0,0,0.4);
205 | }
206 |
207 |
208 |
209 | .icon {
210 | display: inline-block;
211 | width: 1em;
212 | height: 1em;
213 | stroke-width: 0;
214 | stroke: currentColor;
215 | fill: currentColor;
216 | }
217 | input[type="checkbox"] {
218 | display: none;
219 | }
220 | input[type="checkbox"]:checked ~ label svg.icon-check {display: inline-block;}
221 | input[type="checkbox"]:checked ~ label svg.icon-uncheck {display: none;}
222 | input[type="checkbox"]:not(:checked) ~ label svg.icon-check {display: none;}
223 | input[type="checkbox"]:not(:checked) ~ label svg.icon-uncheck {display: inline-block;}
224 |
--------------------------------------------------------------------------------
/src/assets/styles/verify.css:
--------------------------------------------------------------------------------
1 | :root {
2 | font-size: 100%;
3 | line-height: 1.2;
4 | }
5 | :root * {
6 | box-sizing: border-box;
7 | }
8 | body {
9 | margin: 0;
10 | color: #333;
11 | min-height: 100vh;
12 | font: 400 1rem/1.2 Montserrat, Helvetica, Arial, sans-serif;
13 | background: linear-gradient(135deg, rgba(5,127,162,1) 0%, rgba(11,141,143,1) 100%);
14 | }
15 |
16 | .page-header {
17 | padding: 2em;
18 | margin: 0 auto;
19 | max-width: 1000px;
20 | color: #fff;
21 | }
22 | .page-header .logo {
23 | display: block;
24 | margin: 0 auto;
25 | width: 300px;
26 | max-width: 100%;
27 | }
28 | .page-header h1 {
29 | font-size: 1.5em;
30 | font-weight: 600;
31 | margin: 2em auto;
32 | text-align: center;
33 | }
34 | @media only screen and (min-width: 480px) {
35 | .page-header h1 {
36 | font-size: 2em;
37 | }
38 | }
39 | .page-header p {
40 | text-align: left;
41 | font-weight: 200;
42 | font-size: 1.2em;
43 | line-height: 1.5;
44 | }
45 | .page-header .error p {
46 | text-align: center;
47 | }
48 |
49 |
50 | div.form {
51 | max-width: calc(860px - 6em);
52 | margin: 3em 1.5em;
53 | padding: 0 0 10em;
54 | }
55 | @media only screen and (min-width: 480px) {
56 | div.form {
57 | margin: 3em;
58 | }
59 | }
60 | @media only screen and (min-width: 860px) {
61 | div.form {
62 | margin: 1em auto;
63 | }
64 | }
65 | ul {
66 | list-style: none;
67 | margin: 0;
68 | padding: 0;
69 | }
70 | li {
71 | margin: 0;
72 | padding: 0;
73 | }
74 | ul.categories > li {
75 | display: block;
76 | width: auto;
77 | margin: 3em auto;
78 | border-radius: 4px;
79 | background: #fff;
80 | background: linear-gradient(135deg, rgba(242,242,242,1) 0%, rgba(237,237,237,1) 100%);
81 | box-shadow: 1px 1px 9px -2px rgba(0,0,0,0.4);
82 | }
83 | .categories > li > label {
84 | display: block;
85 | width: 100%;
86 | background-color: #333;
87 | color: #fff;
88 | font-size: 1.5rem;
89 | line-height: 2;
90 | border-radius: 4px 4px 0 0;
91 | padding: 0 0.5em;
92 | vertical-align: middle;
93 | }
94 | ul.categories li p {
95 | padding: 1em 1.5em 0.5em;
96 | margin: 0;
97 | }
98 | ul.services {
99 | padding: 0.5em 1.5em 1em;
100 | }
101 | ul.services li {
102 | font-size: 1.2rem;
103 | line-height: 1.6;
104 | margin-left: 1.3em;
105 | }
106 | ul.services li label {
107 | margin-left: -1.3em;
108 | text-indent: 1.3em;
109 | }
110 |
111 |
112 | form {
113 |
114 | }
115 | input[type="checkbox"] ~ label {
116 | cursor: pointer;
117 | }
118 | input[type="checkbox"] ~ label svg {
119 | position: relative;
120 | top: 2px;
121 | }
122 | input[type="checkbox"].category:checked:hover ~ ul.services li input[type="checkbox"]:checked ~ label,
123 | input[type="checkbox"].category:checked ~ label:hover ~ ul.services li input[type="checkbox"]:checked ~ label {
124 | text-decoration: line-through;
125 | color: #f00;
126 | }
127 | ul.services input[type="checkbox"]:not(:checked) ~ label {
128 | opacity: 0.5;
129 | }
130 | ul.services input[type="checkbox"]:not(:checked):hover ~ label,
131 | ul.services input[type="checkbox"]:not(:checked) ~ label:hover {
132 | color: #3a8e11;
133 | opacity: 1;
134 | }
135 |
136 | .form .response {
137 | margin: 2em auto 0;
138 | padding: 2em 1em;
139 | background: #eee;
140 | /* border: 3px solid #bbb; */
141 | box-shadow: 1px 1px 9px -2px rgba(0,0,0,0.4);
142 | }
143 | .form .response p {
144 | font-size: 1.2em;
145 | line-height: 1.5;
146 | padding: 0 0 0.5em;
147 | }
148 | .form .response p:last-child {
149 | border-bottom: 3px solid #bbb;
150 | }
151 | .response.success p:last-child {
152 | border-color: #3a8e11;
153 | }
154 | .response.error p:last-child {
155 | border-color: #f4961a;
156 | }
157 | form .success-img {
158 | }
159 | .success-img img {
160 | width: 100%;
161 | max-width: 500px;
162 | display: block;
163 | margin: 0 auto;
164 | }
165 |
166 | label[for=authcode] {
167 | display: block;
168 | color: #fff;
169 | text-align: center;
170 | }
171 | input.authcode {
172 | display: block;
173 | margin: 0.5em auto 1em;
174 | background: #fff;
175 | color: #333;
176 | font-size: 1.4em;
177 | padding: 0.3em;
178 | border: none;
179 | box-shadow: inset 1px 1px 9px -2px rgba(0,0,0,0.4);
180 | width: 100%;
181 | max-width: 400px;
182 | }
183 | input[type=submit] {
184 | display: block;
185 | margin: 2em 0 0 auto;
186 | background: #fff;
187 | color: #333;
188 | cursor: pointer;
189 | font-size: 1.6em;
190 | padding: 0.5em 2em;
191 | border: none;
192 | box-shadow: 1px 1px 9px -2px rgba(0,0,0,0.4);
193 | }
194 | input[type=submit]:hover {
195 | background: #333;
196 | color: #fff;
197 | }
198 | input[type=submit]:active {
199 | background: #333;
200 | color: #fff;
201 | position: relative;
202 | top: 1px;
203 | left: 1px;
204 | box-shadow: 0px 0px 9px -2px rgba(0,0,0,0.4);
205 | }
206 |
207 |
208 |
209 | .icon {
210 | display: inline-block;
211 | width: 1em;
212 | height: 1em;
213 | stroke-width: 0;
214 | stroke: currentColor;
215 | fill: currentColor;
216 | }
217 | input[type="checkbox"] {
218 | display: none;
219 | }
220 | input[type="checkbox"]:checked ~ label svg.icon-check {display: inline-block;}
221 | input[type="checkbox"]:checked ~ label svg.icon-uncheck {display: none;}
222 | input[type="checkbox"]:not(:checked) ~ label svg.icon-check {display: none;}
223 | input[type="checkbox"]:not(:checked) ~ label svg.icon-uncheck {display: inline-block;}
224 |
--------------------------------------------------------------------------------
/src/assets/scripts/default.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | const apiDisabled = false;
3 |
4 | const clearChildren = function() {
5 | var $options = document.querySelectorAll('input[type="checkbox"].category');
6 | for(var i = 0; i< $options.length; i++) {
7 | $options[i].addEventListener( 'change', function() {
8 | if(this.checked) {
9 | } else {
10 | var $childOptions = document.querySelectorAll(`#${this.id} ~ ul input.service`);
11 | for(var j = 0; j < $childOptions.length; j++) {
12 | $childOptions[j].checked = false;
13 | }
14 | }
15 | });
16 | }
17 | }
18 |
19 | const selectParent = function() {
20 | var $options = document.querySelectorAll('input[type="checkbox"].service');
21 | for(var i = 0; i< $options.length; i++) {
22 | $options[i].addEventListener( 'change', function() {
23 | if(this.checked) {
24 | this.parentElement.parentElement.parentElement.querySelector('input.category').checked = true;
25 | }
26 | });
27 | }
28 | }
29 |
30 | function tokenizeURLArgs(url) {
31 | let result = {};
32 | let _url = url.replace('/', '').replace('?', '').replace('%20', ' ');
33 | _url.split('&').map((k) => {
34 | let item = k.split('=');
35 | if (item[0] !== '') { result[item[0]] = item[1]; }
36 | });
37 | return result;
38 | }
39 |
40 | document.addEventListener("DOMContentLoaded", function() {
41 | const $intro = document.getElementById('intro');
42 | const $form = document.getElementById('update-form');
43 | const urlParams = tokenizeURLArgs(window.location.search);
44 | if (typeof(apiDisabled) !== 'undefined' && apiDisabled) {
45 | $intro.innerHTML =
46 | `Unable to connect to API resource
\nTry again later or contact the Digital Marketing team.
\n
47 |
50 | `;
51 | return false;
52 | }
53 | if (!urlParams.site) {
54 | $intro.innerHTML =
55 | `Service Unavailable
48 |The Verification service will be available when the next batch of sites is ready for launch.
49 |
56 |
59 | `;
60 | return false;
61 | }
62 | const serviceURL = `https://api.heartland.com/services/v1/${urlParams.site}/?verification=on`;
63 | const submissionURL = `https://api.heartland.com/services/v1/${urlParams.site}/update/`;
64 | const svg = {
65 | checkbox: ''
66 | };
67 | fetch(serviceURL)
68 | .then(data => data.json())
69 | .then(data => {
70 | if (data.error == false) {
71 | $intro.innerHTML =
72 | `No sites found
57 |You need to use the URL provided by your RMS.
58 |
78 |
82 | `;
83 | const keysAlpha = {};
84 | Object.keys(data.services).sort().forEach(key => {
85 | keysAlpha[key] = data.services[key];
86 | });
87 | $form.innerHTML =
88 | `
89 |
90 | -
91 |
92 | ${Object.keys(keysAlpha).map(k =>
93 | `
-
94 |
101 |
104 |
105 | ${data.services[k].length > 1 ? `
106 |
Please select all that apply
107 |-
108 | ${data.services[k].map(kk => kk.is_parent ? '' : `
109 |
- 110 | 118 | 121 | `) 122 | .join('\n')}
No additional content options in the ${data.parents[k]} category.
124 | `} 125 | 126 | `).join('\n')}
127 |
128 |
139 |
142 | `;
143 | }
144 | })
145 | .then(() => {
146 | const sendData = () => {
147 | let $response = document.querySelector('div.form .response')
148 | if ($response) {
149 | $response.parentNode.removeChild($response);
150 | }
151 | fetch(submissionURL, {method: 'post', body: new FormData($form)})
152 | .then(response => response.json())
153 | .then(function(data) {
154 | $intro.removeChild(document.querySelector('.message'));
155 | let $response = document.createElement("div");
156 | $response.classList.add("response");
157 | console.log("error?", data);
158 | if (data.error) {
159 | $response.classList.add("error");
160 | $response.innerHTML = `Error: ${data.message}
140 |Double check the link you recieved. If it’s incorrect, contact the Digital Marketing team.
141 |${data.message}
`; 161 | } else { 162 | $response.classList.add("success"); 163 | $response.innerHTML = `${data.message}
164 |Please allow 24-48 for your changes to be made live on your site. If you still don't see the changes, please contact the web team.
`; 165 | } 166 | $form.innerHTML = ''; 167 | $form.appendChild($response); 168 | let rand = Math.floor(Math.random() * 10) + 1; 169 | let $responseGif = document.createElement("div"); 170 | $responseGif.classList.add("success-img"); 171 | $responseGif.innerHTML = `
`;
172 | $form.insertBefore($responseGif, $response);
173 | });
174 | }
175 |
176 | const $form = document.getElementById('update-form');
177 | $form.addEventListener('submit', event => {
178 | event.preventDefault();
179 | sendData();
180 | });
181 | })
182 | .catch( function() {
183 | $intro.innerHTML =
184 | `
185 |
188 | `;
189 | });
190 | });
--------------------------------------------------------------------------------
Unable to connect to API resource
186 |Try again later or contact the Digital Marketing team.
187 |