mod-build 3.6.75-beta.2 → 4.0.0-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintignore +3 -0
- package/.eslintrc +18 -0
- package/CHANGELOG.md +2 -252
- package/README.md +16 -263
- package/gulp-tasks/grab-cdn.js +0 -10
- package/package.json +18 -68
- package/siteconfig.js +38 -0
- package/src/data/footer.js +117 -0
- package/src/data/seasons.js +5 -7
- package/src/index.html +18 -0
- package/src/main.js +45 -0
- package/src/scripts/has-qs-params.js +6 -5
- package/src/scripts/url-cleaner.js +3 -3
- package/src/scripts/utils.js +178 -0
- package/src/styles/home.scss +1 -0
- package/src/templates/_partials/scripts/deferred-styles.html +16 -16
- package/src/templates/_partials/scripts/vwo-redirect-callback.html +43 -45
- package/src/templates/components/head.html +70 -0
- package/tasks/clean.js +13 -0
- package/tasks/grab-cdn.js +107 -0
- package/tasks/grab-form-helpers.js +94 -0
- package/tasks/grab-shared-components.js +81 -0
- package/tasks/grab-shared-scripts.js +267 -0
- package/tasks/serve.js +15 -0
- package/tasks/templates.js +168 -0
- package/template.js +801 -0
- package/vite.config.js +56 -0
- package/.eslintrc.yml +0 -59
- package/src/data/common.js +0 -704
- package/src/data/components/qs-footer.js +0 -55
- package/src/data/components/quote-footer.js +0 -73
- package/src/scripts/apt-block.js +0 -919
- package/src/scripts/components/custom-selects.js +0 -48
- package/src/scripts/components/radio-panels.js +0 -45
- package/src/scripts/es6-1.js +0 -6
- package/src/scripts/es6-2.js +0 -2
- package/src/scripts/qs-form.js +0 -839
- package/src/scripts/vendor/maxmind-geoip2.js +0 -2
- package/src/scripts/vendor/swiper.min.js +0 -13
- package/src/styles/apt-block.scss +0 -888
- package/src/templates/_partials/apt-block.html +0 -30
- package/src/templates/_partials/scripts/analytics.html +0 -4
- package/src/templates/_partials/scripts/go-page-hiding-snippet.html +0 -8
- package/src/templates/_partials/scripts/google-maps.html +0 -1
- package/src/templates/_partials/scripts/google-optimize.html +0 -12
- package/src/templates/_partials/scripts/gtm-editorials/body/google-tag-manager-body.html +0 -5
- package/src/templates/_partials/scripts/gtm-editorials/head/google-tag-manager-head.html +0 -10
- package/src/templates/_partials/scripts/gtm-hil/body/google-tag-manager-body.html +0 -5
- package/src/templates/_partials/scripts/gtm-hil/head/google-tag-manager-head.html +0 -10
- package/src/templates/_partials/scripts/gtm-pro/body/google-tag-manager-body.html +0 -5
- package/src/templates/_partials/scripts/gtm-pro/head/google-tag-manager-head.html +0 -10
- package/src/templates/_partials/scripts/gtm-quote/body/google-tag-manager-body.html +0 -5
- package/src/templates/_partials/scripts/gtm-quote/head/google-tag-manager-head.html +0 -9
- package/src/templates/_partials/scripts/gtm-whitelabel/body/mod-google-tag-manager-body.html +0 -5
- package/src/templates/_partials/scripts/gtm-whitelabel/body/non-mod-google-tag-manager-body.html +0 -5
- package/src/templates/_partials/scripts/gtm-whitelabel/head/mod-google-tag-manager-head.html +0 -10
- package/src/templates/_partials/scripts/gtm-whitelabel/head/non-mod-google-tag-manager-head.html +0 -9
- package/src/templates/_partials/scripts/gtm-wordpress/body/google-tag-manager-body.html +0 -5
- package/src/templates/_partials/scripts/gtm-wordpress/head/google-tag-manager-head.html +0 -9
- package/src/templates/_partials/scripts/visual-website-optimizer.html +0 -5
- package/src/templates/index.html +0 -46
- /package/{src → public}/favicon.ico +0 -0
package/.eslintignore
ADDED
package/.eslintrc
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
{
|
|
2
|
+
"env": {
|
|
3
|
+
"node": true,
|
|
4
|
+
"browser": true,
|
|
5
|
+
"es2021": true,
|
|
6
|
+
"jquery": true
|
|
7
|
+
},
|
|
8
|
+
"extends": [
|
|
9
|
+
"eslint:recommended"
|
|
10
|
+
],
|
|
11
|
+
"parserOptions": {
|
|
12
|
+
"ecmaVersion": "latest",
|
|
13
|
+
"sourceType": "module"
|
|
14
|
+
},
|
|
15
|
+
"rules": {
|
|
16
|
+
// Define your custom rules here
|
|
17
|
+
}
|
|
18
|
+
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,253 +1,3 @@
|
|
|
1
|
-
|
|
1
|
+
## 4.0.0-alpha.1
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
- Updating the `add-path-subdirectories` task to update paths that also start with `accessible-components`
|
|
6
|
-
|
|
7
|
-
## 3.6.73
|
|
8
|
-
|
|
9
|
-
- Updating `grab-shared-scripts` path to grab & replace the new, global `callrail.min.js` file
|
|
10
|
-
|
|
11
|
-
## 3.6.72
|
|
12
|
-
|
|
13
|
-
- Updating "isFontPresent" flag name to "copyLocalFontFile"
|
|
14
|
-
|
|
15
|
-
## 3.6.71
|
|
16
|
-
|
|
17
|
-
- Implemented copy-font gulp task based on configuration . Also update cache-bust task to not to include font files.
|
|
18
|
-
|
|
19
|
-
## 3.6.70
|
|
20
|
-
|
|
21
|
-
- Removed qa environment heap integration
|
|
22
|
-
|
|
23
|
-
## 3.6.69
|
|
24
|
-
|
|
25
|
-
- Adjusting the `browserSyncServeFolders` to include the `mod-base/src`
|
|
26
|
-
|
|
27
|
-
## 3.6.67
|
|
28
|
-
|
|
29
|
-
- Adjusting the `grab-theme-json` task conditional to also check for `opts.siteData.page` to exist as well as the `themeFile` before running the task!
|
|
30
|
-
|
|
31
|
-
## 3.6.66
|
|
32
|
-
|
|
33
|
-
- Adjusting the `mergeDefaultFormFieldConfig()` for the accessible configuration so it merges the values correctly.
|
|
34
|
-
|
|
35
|
-
## 3.6.65
|
|
36
|
-
|
|
37
|
-
- Removing the `'brand'` task (was working off `mod-site` dependencies which we are no longer using). Also removed the `useCDN` conditional for a few tasks (that I believe was added due to just copying/pasting).
|
|
38
|
-
|
|
39
|
-
## 3.6.64
|
|
40
|
-
|
|
41
|
-
- Removing the massive amounts of console logs added in version `3.6.60`; I think the issue with our `grab-shared-scripts` task was that we are calling the `[replaceFooterStylesReference, replaceFooterStylesReferenceInMap]` twice. On the first go around, the QS footer styles are not yet loaded, & then once QS footer styles DID get loaded and we called the function a second time – it might have gotten hung up (we should only call these functions once).
|
|
42
|
-
|
|
43
|
-
## 3.6.63
|
|
44
|
-
|
|
45
|
-
- Adding conditional to check for `siteData` to exist before checking for the `useAccessibleConfig`.
|
|
46
|
-
|
|
47
|
-
## 3.6.62
|
|
48
|
-
|
|
49
|
-
- Adding the accessible components to the `grab-shared-components` task; As well as pulling the accessible `defaultFormFieldConfig` for the new template.js configuration (& merging to the new template stucture appropriately); As well as updating the `grab-shared-scripts` to pull in / edit the necessary accessible components (including the accessible abandonment JS file);
|
|
50
|
-
|
|
51
|
-
## 3.6.61
|
|
52
|
-
|
|
53
|
-
- added functionality to increase the fileInclude maxRecursion value from site level
|
|
54
|
-
- fixed bug in `templates` task. Noticed that the task was not completing as expected.
|
|
55
|
-
|
|
56
|
-
## 3.6.60
|
|
57
|
-
|
|
58
|
-
- Adding consoles allllll throughout the `grab-shared-scripts` task. It is still breaking down somewhere; and the first step to trying to force-fail our builds is figure out where the issue is
|
|
59
|
-
|
|
60
|
-
## 3.6.59
|
|
61
|
-
|
|
62
|
-
- adding `srcset` to the `add-path-subdirectories` gulp task to update relative paths in `<picture>` tags
|
|
63
|
-
|
|
64
|
-
## 3.6.58
|
|
65
|
-
|
|
66
|
-
- removing the copying of mod-form & qs-form JS files out of `grab-shared-scripts` gulp task, now that all S3 sites have been migrated over to use homeowner.min.js
|
|
67
|
-
|
|
68
|
-
## 3.6.56
|
|
69
|
-
|
|
70
|
-
- `noheap` + `nogtm` conditionals no longer needed (those variables will & have been set to "true" for all sites in our shared components / configs)
|
|
71
|
-
- adding `!window.Modalytics.privacyPreferencesDetected` conditional to check privacy settings to not load Heap for modernize.com
|
|
72
|
-
|
|
73
|
-
## 3.6.55
|
|
74
|
-
|
|
75
|
-
- Added conditional to check if `siteData` is empty — so our `fetchTcpaFromSitegenie()` and `getDefaultFormFieldConfig()` functions won't try to run on modify.modernize.com
|
|
76
|
-
|
|
77
|
-
## 3.6.54
|
|
78
|
-
|
|
79
|
-
- swapping out `modUtils.getHeapCookieData()` in the old (but still used) mod-form-contractor.js
|
|
80
|
-
|
|
81
|
-
## 3.6.53
|
|
82
|
-
|
|
83
|
-
- Since we moved our footer modal templates to live in /quote/resources/shared-resources/, we needed to update `grab-cdn` gulp task to copy them from the updated path
|
|
84
|
-
|
|
85
|
-
## 3.6.52
|
|
86
|
-
|
|
87
|
-
- Added `templatesData.primary_trade` conditional to the `fetchTcpaFromSitegenie()` function so it won't try to run on quote/home-remodel
|
|
88
|
-
|
|
89
|
-
## 3.6.50
|
|
90
|
-
|
|
91
|
-
- Added functionality in `templates.js` to grab the tcpa from sitegenie at build time
|
|
92
|
-
|
|
93
|
-
## 3.6.47
|
|
94
|
-
|
|
95
|
-
- Bump up package version to publish a new version
|
|
96
|
-
|
|
97
|
-
## 3.6.46
|
|
98
|
-
|
|
99
|
-
- Added one condition for pathSubdirectory variable to resolve a bug (CRO-3185) . Also Made little updates on add-path-subdirectories to make the code more DRY
|
|
100
|
-
|
|
101
|
-
## 3.6.45
|
|
102
|
-
|
|
103
|
-
- Added `add-path-subdirectories` task. If `siteData.pathSubdirectory` exists at a site level, it will get the value & append the path to all of the existing RELATIVE paths (build task only – doesn't run on gulp serve). Also updated `grab-shared-scripts` to include the `pathSubdirectory` in the replacement paths during `build` if it exists.
|
|
104
|
-
|
|
105
|
-
## 3.6.44
|
|
106
|
-
|
|
107
|
-
- Added a `grab-form-helpers` task
|
|
108
|
-
|
|
109
|
-
## 3.6.42
|
|
110
|
-
|
|
111
|
-
- moved the `replaceFootAssetScripts` function to run off the largest file; reordered the tasks for `grab-shared-scripts`; also added consoles to print out the hashes for each file name & print `start` & `finish` states for replacing the foot asset paths
|
|
112
|
-
|
|
113
|
-
## 3.6.41
|
|
114
|
-
|
|
115
|
-
- added functionality to fetch & merge default form filed config in templateData
|
|
116
|
-
|
|
117
|
-
## 3.6.40
|
|
118
|
-
|
|
119
|
-
- Adding tree services to valid list of trade parameter values
|
|
120
|
-
|
|
121
|
-
## 3.6.39
|
|
122
|
-
|
|
123
|
-
- implementing a buffer to our `grab-shared-scripts` task, which fixes the hashing issue we were facing for our larger files. updated the hashing algorithm to MD5, so it matches our CircleCI CLI hash. updated `mod-form-beta.min.js` to `homeowner.min.js`
|
|
124
|
-
|
|
125
|
-
## 3.6.38
|
|
126
|
-
|
|
127
|
-
- when we removed the mod-form-beta functionality in 3.6.37 — we needed to also remove the replace search in the function.
|
|
128
|
-
|
|
129
|
-
## 3.6.37
|
|
130
|
-
|
|
131
|
-
- removing the mod-form-beta functionality in `grab-shared-scripts` while we rename the files.
|
|
132
|
-
|
|
133
|
-
## 3.6.36
|
|
134
|
-
|
|
135
|
-
- implementing fix needed for grabbing SVG sprites in our `grab-global-images` task. also removed consoles running in `grab-shared-scripts`
|
|
136
|
-
|
|
137
|
-
## 3.6.35
|
|
138
|
-
|
|
139
|
-
- trying one replace pipe for `replaceFootAssetScripts` function inside our `grab-shared-scripts` task. also added some console logs so within build.sh in circleci — you will be able to see it complete all the replacements.
|
|
140
|
-
|
|
141
|
-
## 3.6.34
|
|
142
|
-
|
|
143
|
-
- undid the chaining in `replaceFootAssetScripts` function inside our `grab-shared-scripts` task. seemed to make things worse in terms of replacing paths.
|
|
144
|
-
|
|
145
|
-
## 3.6.33
|
|
146
|
-
|
|
147
|
-
- chained the `.pipe(replace())` lines within the `replaceFootAssetScripts` function inside our `grab-shared-scripts` task to run after the previous has been completed — in hopes to keep our foot assets paths from getting incomplete paths during deployment
|
|
148
|
-
|
|
149
|
-
## 3.6.32
|
|
150
|
-
|
|
151
|
-
- made changes in `grab-cdn` task to copy footer templates
|
|
152
|
-
- added a new task to copy `resources` directory from `src` into `dist`
|
|
153
|
-
|
|
154
|
-
## 3.6.31
|
|
155
|
-
|
|
156
|
-
- `grab-global-images` task bug fixes.
|
|
157
|
-
|
|
158
|
-
## 3.6.30
|
|
159
|
-
|
|
160
|
-
- Adding in the `copy-videos` gulp task needed for native landing pages.
|
|
161
|
-
|
|
162
|
-
## 3.6.29
|
|
163
|
-
|
|
164
|
-
- added enhancements to abandonment path replace function in grab-shared-scripts task
|
|
165
|
-
|
|
166
|
-
## 3.6.28
|
|
167
|
-
|
|
168
|
-
- Changing warm seasonal change date to be April 14th, part of reverting changes once more to rule out variants to potential cause of low CVR performance in HVAC sites.
|
|
169
|
-
|
|
170
|
-
## 3.6.25
|
|
171
|
-
|
|
172
|
-
- Added new `addAttributes` handlebar helper that allows us to loop through all the attributes defined in the `attributes: {}` object. Use would be `{{{addAttributes objectName 'class'}}}`, with `objectName` being the object that contains `attributes: {}`, and the 'class' being the keys you wish you ignore. If you want to ignore multiple keys, you will add them as follows: `{{{addAttributes objectName 'class' 'id'}}}`. Note: Make sure you use 3 `{{{` so it doesn't automatically escape characters.
|
|
173
|
-
|
|
174
|
-
## 3.6.24
|
|
175
|
-
|
|
176
|
-
- Changing warm seasonal change date to be April 14th, part of reverting changes on March 15th 2023 where there was a bug triggered on HVACPros.org.
|
|
177
|
-
|
|
178
|
-
## 3.6.21
|
|
179
|
-
|
|
180
|
-
- `grab-shared-scripts` task code refactoring changes.
|
|
181
|
-
|
|
182
|
-
## 3.6.14
|
|
183
|
-
|
|
184
|
-
- Updating the `replaceFooterStylesReference` in `grab-shared-scripts` to use relative paths if the `useRelativePathForResources` parameter is set
|
|
185
|
-
|
|
186
|
-
## 3.6.13
|
|
187
|
-
|
|
188
|
-
- Adding in `dontSearchFile` param to `cache-bust` gulp task so it doesn't cache bust any paths in our local resources/ folder.
|
|
189
|
-
|
|
190
|
-
## 3.6.12
|
|
191
|
-
|
|
192
|
-
- In the `grab-shared-scripts` gulp task, we will no longer be replacing mod-footer.css for quote pages. We ran into a bug with split URL test pages, and since the original file lives on the same domain, we will leave as is.
|
|
193
|
-
|
|
194
|
-
## 3.6.11
|
|
195
|
-
|
|
196
|
-
- Adding `mod-form` & `qs-form` to the `grab-shared-scripts` gulp task. It will copy these files into the site's `resources/scripts/mod-form` folder & then update the src for both in the `foot-assets` shared component.
|
|
197
|
-
|
|
198
|
-
## 3.6.10
|
|
199
|
-
|
|
200
|
-
- Adding `modutils` JS to the `grab-shared-scripts` gulp task. It will copy this version into the site's `resources/scripts/mod-utils` folder & then update the src in the `foot-assets` shared component.
|
|
201
|
-
|
|
202
|
-
## 3.6.9
|
|
203
|
-
|
|
204
|
-
- Adding `footer-component` JS + CSS & `abandonment` JS + CSS to the `grab-shared-scripts` gulp task. It will copy local versions into the site's `resources/` folder & then update the src or href as needed. `cache-bust` will also ignore the entire resources folder.
|
|
205
|
-
|
|
206
|
-
## 3.6.8
|
|
207
|
-
|
|
208
|
-
- Adding a new `useRelativePathForResources` parameter for special use-cases that need to use a relative path for shared scripts (ie. the improvementcenter pages)
|
|
209
|
-
|
|
210
|
-
## 3.6.7
|
|
211
|
-
|
|
212
|
-
- Adding a new `grab-shared-scripts` gulp task grab the most recent version from `mod-analytics`. It will copy this version into the site's `resources/scripts/mod-alytics` folder & then update the src in the `head` shared component. Also updated `cache-bust` to ignore this file on build.
|
|
213
|
-
|
|
214
|
-
## 3.6.5
|
|
215
|
-
|
|
216
|
-
- Updating `settings_tolerance` & `library_tolerance` parameters default values in the VWO script to help reduce Heap-VWO undefined properties (for more information on these parameters you can read here -> https://help.vwo.com/hc/en-us/articles/900001789546-Why-Does-VWO-SmartCode-Time-out-and-How-to-Resolve-It-)
|
|
217
|
-
|
|
218
|
-
## 3.6.3
|
|
219
|
-
|
|
220
|
-
- Updating `cache-bust` gulp task to use dashes instead of a period. For example, cached files will now be `home-51fbcbac.js` instead of `home.51fbcbac.js`
|
|
221
|
-
|
|
222
|
-
## 3.6.2
|
|
223
|
-
|
|
224
|
-
- Adding `check-seasonal-variations` to grab seasons json; loop through the siteData for `seasonalVariations: {}`; find any active seasons; merge the json objects and adjust json content accordingly;
|
|
225
|
-
|
|
226
|
-
## 3.5.7
|
|
227
|
-
|
|
228
|
-
- Making `maxRecursion` for our file include plugin in template.js a lot higher
|
|
229
|
-
|
|
230
|
-
## 3.5.6
|
|
231
|
-
|
|
232
|
-
- Adding `inc` handlebars helper to template.js to increment a certain value by 1
|
|
233
|
-
|
|
234
|
-
## 3.5.5
|
|
235
|
-
|
|
236
|
-
- Added functionality to don't include the gtm script if `nogtm=true` parameter is present in vwo_callback.html/analytics.html fileInclude call (from site level). This is useful in late loading gtm on test versions.
|
|
237
|
-
|
|
238
|
-
## 3.5.2
|
|
239
|
-
|
|
240
|
-
- `grab-shared-components` task updated: now it grabs all shared-components files that are listed under `mod-site/shared-components/all.json` So there's no need to update the task every time we add a new component.
|
|
241
|
-
|
|
242
|
-
## 3.5.1
|
|
243
|
-
|
|
244
|
-
- `grab-shared-components` task was created; added to tasks.js, serve.js & build.js to grab the new shared-components folder from mod-site and copy them to your local env
|
|
245
|
-
|
|
246
|
-
## 3.5.0
|
|
247
|
-
|
|
248
|
-
- `gulp-sass` package updated to version 5 to make it compatible with active LTS version of node
|
|
249
|
-
- Updated `bootstrap-sass` to `^3.4.3` package version so that it can handle math.div feature in sass.
|
|
250
|
-
|
|
251
|
-
## 3.4.40
|
|
252
|
-
|
|
253
|
-
- Downgraded `bootstrap-sass` to version `3.4.1` as new version was breaking because of math.div feature.
|
|
3
|
+
Brand new build process using Vite 5, Node 18+. Gulp 4 is used as a task runner to grab shared assets.
|
package/README.md
CHANGED
|
@@ -1,273 +1,26 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Mod-Build v4 alpha
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
## Requirements
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
* form error texts for each field;
|
|
7
|
-
* configurable Javascript object `modSite` (mod-site.js) for handling form validation, switching steps, processing and submitting data to the backend, and handling backend responses;
|
|
8
|
-
* Javascript object for thank you page ads;
|
|
9
|
-
* helper Javascript object `modUtils` for variuos related methods used in modSite or thank you page;
|
|
10
|
-
* templates for about, terms, and privacy pages (with variables for company name, website name, emails, etc.)
|
|
5
|
+
Node 18+
|
|
11
6
|
|
|
12
|
-
##
|
|
7
|
+
## Development
|
|
13
8
|
|
|
14
|
-
|
|
15
|
-
* data/common.js - form fields options, form errors, TCPA copy, list of state names and abbreviations
|
|
16
|
-
* scripts/
|
|
17
|
-
* components/
|
|
18
|
-
* custom-selects.js - object for custom selects
|
|
19
|
-
* modal-pages.js - object for opening links in modal windows
|
|
20
|
-
* radio-panels.js - object for radio panels
|
|
21
|
-
* vendor/ - shared third party scripts
|
|
22
|
-
* heap-addeventproperties-identify.js
|
|
23
|
-
* heap-tracking.js
|
|
24
|
-
* heap-vwo.js
|
|
25
|
-
* maxmind-geoip2.js
|
|
26
|
-
* apt-block.js - used for rendering the set appointments widget (see [appointments widget repo](https://bitbucket.modernize.com/projects/MOD/repos/ads/browse))
|
|
27
|
-
* mod-form-pro.js - object for handling pros forms
|
|
28
|
-
* mod-form.js - object for handling forms
|
|
29
|
-
* mod-utils.js - helper object
|
|
30
|
-
* thankyou.js - object for thankyou page
|
|
31
|
-
* styles/
|
|
32
|
-
* partials/ - contains useful SASS partials & mixins; should be imported into project's SASS files
|
|
33
|
-
* apt-block.scss - styles for appointment block
|
|
34
|
-
* templates/
|
|
35
|
-
* _partials/scripts/ - GTM, VWO, and Google Maps script tags
|
|
36
|
-
* modals/ - templates for about, terms, and privacy pages
|
|
37
|
-
* .babelrc - config file for Babeljs
|
|
38
|
-
* .editorconfig - rules for code editors based on company's code guidelines
|
|
39
|
-
* .eslintrc.yml - configuration for Javascript linter
|
|
40
|
-
* .sass-lint.yml - configuration for SASS/SCSS linter
|
|
41
|
-
* gulpfile.babel.js - Gulp file for automations
|
|
42
|
-
* package-lock.json - lock file for package.json; makes sure that the same versions of Node modules are installed across env
|
|
43
|
-
* package.json - Node modules used in mod-site
|
|
9
|
+
`npm run dev` will generate assets to start a local build. ** Must connect to the QS VPN **
|
|
44
10
|
|
|
45
|
-
##
|
|
11
|
+
## Local Requirements
|
|
46
12
|
|
|
47
|
-
|
|
13
|
+
- `siteconfig.js`
|
|
14
|
+
- `template.js`
|
|
15
|
+
- `vite.config.js`
|
|
48
16
|
|
|
49
|
-
##
|
|
17
|
+
## Static Assets
|
|
50
18
|
|
|
51
|
-
|
|
19
|
+
Static assets & images that should be copied with the build go in the `public/` directory and will be copied automatically.
|
|
52
20
|
|
|
53
|
-
|
|
54
|
-
modForm.init({
|
|
55
|
-
vertical: 'windows'
|
|
56
|
-
});
|
|
57
|
-
```
|
|
21
|
+
## TODO
|
|
58
22
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
| vertical | Yes | null | Form's vertical. Possible options are: solar, windows, roof, hvac |
|
|
64
|
-
| form | Yes | $('#form') | jQuery form object |
|
|
65
|
-
| formLoadingCls | Yes | form--loading | CSS class for a loading state of the form |
|
|
66
|
-
| stepsSelector | Yes | [data-bind="step"] | CSS selector for form's steps |
|
|
67
|
-
| stepActiveCls | Yes | step--active | active step CSS class |
|
|
68
|
-
| tcpaCopy | Yes | $('#tcpa-copy') | jQuery object of a TCPA copy block |
|
|
69
|
-
| maskedPhoneFields | No | $('#form').find(':input[name="homePhone"]') | jQuery object of inputs to add phone mask to |
|
|
70
|
-
| numericsOnlyFields | No | $('#form').find(':input[name="zip"], :input[name="zip1"]') | jQuery object of digits only inputs (e.g. phone and zip) |
|
|
71
|
-
| addressField | No | $('#form').find(':input[name="address"]') | jQuery object of an address field |
|
|
72
|
-
| stateField | No | $('#form').find(':input[name="state"]') | jQuery object of a state field |
|
|
73
|
-
| cityField | No | $('#form').find(':input[name="city"]') | jQuery object of a city field |
|
|
74
|
-
| zip1Field | No | $('#form').find(':input[name="zip1"]') | jQuery object of secondary zip field |
|
|
75
|
-
| zipField | Yes | $('#form').find(':input[name="zip"]') | jQuery object of primary zip field |
|
|
76
|
-
| repairField | No | $('#form').find(':input[name="repair"]') | jQuery object of repair field |
|
|
77
|
-
| hvacWouldReplaceBlock | No | $('#hvac-would-replace-block') | HVAC only. Block that contains wouldReplace control. |
|
|
78
|
-
| hvacSystemTypeField | No | $('#form').find(':input[name="hvacSystemType"]') | HVAC only. System type field. |
|
|
79
|
-
| hvacFuelTypeBlock | No | $('#hvac-fuel-type-block') | HVAC only. Block that contains hvacFuelType control. |
|
|
80
|
-
| hvacSystemTypesWithFuel | No | 'Central Heating', 'Boiler' | HVAC only. Array of hvac system types (lowercase) that require fuel type selection. |
|
|
81
|
-
| fieldErrorCls | Yes | has-error | CSS error class. |
|
|
82
|
-
| errorParentCls | No | parent-error | CSS class of a field parent which will get fieldErrorCls on error. |
|
|
83
|
-
| gaTracker | No | main | GA tracker to use |
|
|
84
|
-
| thankyouPage | Yes | /thankyou/ | Thankyou page URL. |
|
|
85
|
-
| landingPage | No | window.location.href | Landing page URL. |
|
|
86
|
-
|
|
87
|
-
### modForm.init() method Callbacks
|
|
88
|
-
| Callback | Options | Return | Description |
|
|
89
|
-
|---|---|---|---|
|
|
90
|
-
| formSubmittingCallback | formData | formData | Fires right before form is submitted. Allows to change data that will be sent to the API. If you return false inside the callback, the submission will stop. |
|
|
91
|
-
| formSubmitSuccessCallback | | response | Fires when submitting form data to server was successful. Returns server response. Return false inside this callback to stop form from redirecting to TY page. |
|
|
92
|
-
| formSubmitErrorCallback | | response | Fires when submitting form data to server returned an error. Returns server response. |
|
|
93
|
-
| stepChangingCallback | oldStepId, stepId | stepId | Fires right before the step switches. Return stepId to switch to that step or false to stop |
|
|
94
|
-
| stepChangedCallback | oldStepId, stepId | | Fires right after the step was switched. |
|
|
95
|
-
| zipCodeValidated | | geoData | Fires right after the zip code has been validated on the server. Returns geo data: city and state for this zip code. |
|
|
96
|
-
|
|
97
|
-
### modForm methods
|
|
98
|
-
|
|
99
|
-
Below are most useful methods of the modForm object.
|
|
100
|
-
|
|
101
|
-
| Method | Options | Return | Description |
|
|
102
|
-
|---|---|---|---|
|
|
103
|
-
| showStep | stepId | | Shows form's step by id. |
|
|
104
|
-
| showNextStep | | | Shows form's next step. |
|
|
105
|
-
| showPrevStep | | | Shows form's prev step. |
|
|
106
|
-
| getCurrentStep | | $step | Returns form's current step as a jQuery object. |
|
|
107
|
-
| isCurrentStepLast | | true or false | Returns true/false if current step is the last one in the form. |
|
|
108
|
-
| getFormData | | Object | Returns form's data as a key/value object. |
|
|
109
|
-
|
|
110
|
-
## Templates
|
|
111
|
-
|
|
112
|
-
We use [Handlebars.js](http://handlebarsjs.com/) as a template engine. It allows us to use includes, loops, variables, etc. in our templates.
|
|
113
|
-
|
|
114
|
-
### Available variables
|
|
115
|
-
|
|
116
|
-
| Variable | Type | Example | Description |
|
|
117
|
-
|---|---|---|---|
|
|
118
|
-
| year | Integer | {{year}} | Current year. |
|
|
119
|
-
| tcpa | Function | {{#x 'this.tcpa("Get matches", "Modernize")'}}{{/x}} | Shows TCPA copy. You can pass in button name and company name as properties. |
|
|
120
|
-
| formErrors | Object | {{formErrors.firstName}} | Form errors. Support properties: firstName, lastName, streetAddress, city, state, zip, email, homePhone, tradeQuestion |
|
|
121
|
-
| states | Array | {{#each states}} ... {{/each}} | |
|
|
122
|
-
| solar.shade | Array | {{#each solar.shade}} ... {{/each}} | |
|
|
123
|
-
| solar.electricBill | Array | {{#each solar.electricBill}} ... {{/each}} | |
|
|
124
|
-
| windows.repair | Array | {{#each windows.repair}} ... {{/each}} | |
|
|
125
|
-
| windows.repair | Array | {{#each windows.repair}} ... {{/each}} | |
|
|
126
|
-
| windows.hear | Array | {{#each windows.hear}} ... {{/each}} | |
|
|
127
|
-
| windows.style | Array | {{#each windows.style}} ... {{/each}} | |
|
|
128
|
-
| hvac.project | Array | {{#each hvac.project}} ... {{/each}} | |
|
|
129
|
-
| hvac.repair | Array | {{#each hvac.repair}} ... {{/each}} | |
|
|
130
|
-
| hvac.hvacSystemFuelTypes | Array | {{#each hvac.hvacSystemFuelTypes}} ... {{/each}} | |
|
|
131
|
-
| hvac.hvacSystemTypes | Array | {{#each hvac.hvacSystemTypes}} ... {{/each}} | |
|
|
132
|
-
| hvac.hvacFuelTypes | Array | {{#each hvac.hvacFuelTypes}} ... {{/each}} | |
|
|
133
|
-
| roofing.repair | Array | {{#each roofing.repair}} ... {{/each}} | |
|
|
134
|
-
| roofing.material | Array | {{#each roofing.material}} ... {{/each}} | |
|
|
135
|
-
|
|
136
|
-
### Using partials
|
|
137
|
-
|
|
138
|
-
**Example: including VWO & GTM snippets into a project:**
|
|
139
|
-
```html
|
|
140
|
-
<!DOCTYPE html>
|
|
141
|
-
<head lang="en">
|
|
142
|
-
{{ fileInclude 'node_modules/mod-site/src/templates/_partials/scripts/visual-website-optimizer.html' }}
|
|
143
|
-
{{ fileInclude 'node_modules/mod-site/src/templates/_partials/scripts/google-tag-manager-head.html' }}
|
|
144
|
-
...
|
|
145
|
-
</head>
|
|
146
|
-
<body>
|
|
147
|
-
{{ fileInclude 'node_modules/mod-site/src/templates/_partials/scripts/google-tag-manager-body.html' }}
|
|
148
|
-
...
|
|
149
|
-
```
|
|
150
|
-
|
|
151
|
-
You can use variables from mod-site package and project itself inside any template.
|
|
152
|
-
|
|
153
|
-
**Example: displaying hvacSystemType select using data from mod-site:**
|
|
154
|
-
```html
|
|
155
|
-
<select class="form-control" name="hvacSystemType" data-required="nonempty">
|
|
156
|
-
<option value="">- Select system -</option>
|
|
157
|
-
{{#each hvac.hvacSystemTypes}}
|
|
158
|
-
<option value="{{this.value}}">{{this.name}}</option>
|
|
159
|
-
{{/each}}
|
|
160
|
-
</select>
|
|
161
|
-
```
|
|
162
|
-
|
|
163
|
-
More on using variables and conditions can be found on [Handlebars.js](http://handlebarsjs.com/) website.
|
|
164
|
-
|
|
165
|
-
### Form and steps markup
|
|
166
|
-
|
|
167
|
-
modForm object is flexible, and you can pass you own jQuery selector for steps, but the following markup is default:
|
|
168
|
-
|
|
169
|
-
```html
|
|
170
|
-
<!-- Form -->
|
|
171
|
-
<form class="form" id="form" method="" action="" novalidate="">
|
|
172
|
-
<!-- Step 1 -->
|
|
173
|
-
<div class="step step--active" data-bind="step" id="step-1">
|
|
174
|
-
...
|
|
175
|
-
</div>
|
|
176
|
-
<!--/Step 1 -->
|
|
177
|
-
|
|
178
|
-
<!-- Step 2 -->
|
|
179
|
-
<div class="step" data-bind="step" id="step-2">
|
|
180
|
-
...
|
|
181
|
-
</div>
|
|
182
|
-
<!--/Step 2 -->
|
|
183
|
-
|
|
184
|
-
<!-- Step 3 -->
|
|
185
|
-
<div class="step" data-bind="step" id="step-3">
|
|
186
|
-
...
|
|
187
|
-
<div class="form-group">
|
|
188
|
-
<button class="btn btn-primary" type="submit">
|
|
189
|
-
Get matches →
|
|
190
|
-
</button>
|
|
191
|
-
</div>
|
|
192
|
-
|
|
193
|
-
<div class="tcpa-copy">
|
|
194
|
-
<input name="originLeadId" id="originLeadId" type="hidden" />
|
|
195
|
-
<input name="leadToken" id="leadid_token" type="hidden" />
|
|
196
|
-
<input id="leadid_tcpa_disclosure" type="hidden" />
|
|
197
|
-
<label for="leadid_tcpa_disclosure" id="tcpa-copy">
|
|
198
|
-
{{#x 'this.tcpa("Get matches")'}}{{/x}}
|
|
199
|
-
</label>
|
|
200
|
-
</div>
|
|
201
|
-
</div>
|
|
202
|
-
<!--/Step 3 -->
|
|
203
|
-
</form>
|
|
204
|
-
<!--/Form -->
|
|
205
|
-
```
|
|
206
|
-
|
|
207
|
-
#### Validation and steps logic
|
|
208
|
-
|
|
209
|
-
When user clickes on submit button inside step 1 (or submits it using Enter from a text field), modForm will loop through all required fields inside step 1 and validate them. If there's an invalid field, it will be highlighted and the form won't be switched to the next step.
|
|
210
|
-
|
|
211
|
-
If step is valid, modForm will:
|
|
212
|
-
|
|
213
|
-
* check if step is not last (in DOM):
|
|
214
|
-
* If step contains input with name `zip` or `zip1`, it will freeze the form and validate its value with the backend:
|
|
215
|
-
* if it is valid, it will proceed;
|
|
216
|
-
* if not, error will be shown;
|
|
217
|
-
* If the step is valid, it will switch to the next step in the DOM;
|
|
218
|
-
* if step is last (in DOM), modForm will send data to the backend:
|
|
219
|
-
* if backend responds with errors, it will highlight all fields with errors and switch the form to the first step that has invalid fields;
|
|
220
|
-
* if backend responds with success, it will redirect to the thankyou page.
|
|
221
|
-
|
|
222
|
-
You can use modSite callbacks and methods to alter the logic (e.g. to switch to specific step when user selected homeowner = No).
|
|
223
|
-
|
|
224
|
-
### Fields validation and errors
|
|
225
|
-
|
|
226
|
-
modForms supports the following validation methods:
|
|
227
|
-
|
|
228
|
-
* nonempty - value of a control should be non-empty
|
|
229
|
-
* email - expects valid email address
|
|
230
|
-
* phone - expects valid US phone number
|
|
231
|
-
* zip - expects valid US zip code
|
|
232
|
-
* regex - custom Regex
|
|
233
|
-
* int - expects integer value (min and max are optional)
|
|
234
|
-
|
|
235
|
-
Validation method for a control is set in html attribute `data-required`.
|
|
236
|
-
|
|
237
|
-
**Example: required email control with error message**
|
|
238
|
-
```html
|
|
239
|
-
<div class="parent-error">
|
|
240
|
-
<input type="email" name="email" placeholder="Email" class="form-control" data-required="email" />
|
|
241
|
-
<div class="form-error">
|
|
242
|
-
{{formErrors.email}}
|
|
243
|
-
</div>
|
|
244
|
-
</div>
|
|
245
|
-
```
|
|
246
|
-
|
|
247
|
-
More details about the markup:
|
|
248
|
-
|
|
249
|
-
* `data-required="email"` on input defines validation method
|
|
250
|
-
* wrapper `<div class="parent-error">` will get class `has-error` if this field is not valid
|
|
251
|
-
* `{{formErrors.email}}` is a default error message for invalid email field
|
|
252
|
-
|
|
253
|
-
### Setting up modForm
|
|
254
|
-
|
|
255
|
-
modForm requires the following files to work:
|
|
256
|
-
* /node_modules/jquery/dist/jquery.js
|
|
257
|
-
* /node_modules/jquery-mask-plugin/dist/jquery.mask.min.js
|
|
258
|
-
* /node_modules/mod-site/src/scripts/mod-utils.js
|
|
259
|
-
* /node_modules/mod-site/src/scripts/mod-form.js
|
|
260
|
-
|
|
261
|
-
Default options for modForm can be found in mod-form.js file (with comments). The only required setting is `vertical`.
|
|
262
|
-
|
|
263
|
-
**Example: setting up modForm for a windows form**
|
|
264
|
-
```javascript
|
|
265
|
-
modForm.init({
|
|
266
|
-
vertical: 'windows'
|
|
267
|
-
});
|
|
268
|
-
```
|
|
269
|
-
## License
|
|
270
|
-
|
|
271
|
-
This project is licensed under the MIT license.
|
|
272
|
-
|
|
273
|
-
Copyright (c) 2017 Modernize.
|
|
23
|
+
- Build/dist config
|
|
24
|
+
- CSS config / clean old styles
|
|
25
|
+
- Check Handlebars helpers
|
|
26
|
+
- Create updated versions of some accessible components (head, footer, etc)
|
package/gulp-tasks/grab-cdn.js
CHANGED
|
@@ -24,7 +24,6 @@ module.exports = function(gulp, gulpPlugins, siteSettings, siteData) {
|
|
|
24
24
|
const { isQSPage, isWhiteLabel, domain } = siteData;
|
|
25
25
|
const isModWhiteLabel = isWhiteLabel && !isQSPage
|
|
26
26
|
const domainHasModernize = domain.indexOf('modernize') > -1;
|
|
27
|
-
const cssThemes = siteData && siteData.page && siteData.page.cssThemes;
|
|
28
27
|
|
|
29
28
|
let externalResources;
|
|
30
29
|
// listing of Static Resources sub-path and site destination paths
|
|
@@ -49,15 +48,6 @@ module.exports = function(gulp, gulpPlugins, siteSettings, siteData) {
|
|
|
49
48
|
Object.assign(externalResources, {'/quote/resources/mod-site/templates/scripts/recaptcha.html': ['/templates/scripts/', 'recaptcha.html']});
|
|
50
49
|
}
|
|
51
50
|
|
|
52
|
-
if (cssThemes) {
|
|
53
|
-
cssThemes.forEach(theme => {
|
|
54
|
-
const themeFileName = `_${theme}.scss`;
|
|
55
|
-
const themePath = `/quote/resources/shared-resources/styles/themes/${themeFileName}`;
|
|
56
|
-
|
|
57
|
-
Object.assign(externalResources, {[themePath]: ['/resources/styles/themes/', themeFileName]});
|
|
58
|
-
});
|
|
59
|
-
}
|
|
60
|
-
|
|
61
51
|
// local dev files
|
|
62
52
|
const remoteFilesForLocalDev = {
|
|
63
53
|
'/quote/resources/mod-site/scripts/vendor/maxmind-geoip2.js': ['/temp/scripts/', 'maxmind-geoip2.js']
|