@4site/engrid-scripts 0.19.1

package/.prettierrc.js

@@ -0,0 +1,226 @@
+module.exports = {
+  /**
+   * Print Width
+   * https://prettier.io/docs/en/options.html#print-width
+   *
+   * Specify the line length that the printer will wrap on.
+   *
+   * printWidth: <int>
+   * default: 80
+   */
+  printWidth: 80,
+
+  /**
+   * Tab Width
+   * https://prettier.io/docs/en/options.html#tab-width
+   *
+   * Specify the number of spaces per indentation-level.
+   *
+   * tabWidth: <int>
+   * default: 2
+   */
+  tabWidth: 2,
+
+  /**
+   * Tabs
+   * https://prettier.io/docs/en/options.html#tabs
+   *
+   * Indent lines with tabs instead of spaces.
+   *
+   * useTabs: <bool>
+   * default: false
+   */
+  useTabs: false,
+
+  /**
+   * Semicolons
+   * https://prettier.io/docs/en/options.html#semicolons
+   *
+   * Print semicolons at the ends of statements
+   *
+   * semi: <bool>
+   * default: true
+   */
+  semi: true,
+
+  /**
+   * Quotes
+   * https://prettier.io/docs/en/options.html#quotes
+   *
+   * Use single quotes instead of double quotes.
+   *
+   * singleQuote: <bool>
+   * default: false
+   */
+  singleQuote: false,
+
+  /**
+   * Quote Props
+   * https://prettier.io/docs/en/options.html#quote-props
+   *
+   * Change when properties in objects are quoted.
+   *
+   * quoteProps: "<as-needed|consistent|preserve>"
+   * default: "as-needed"
+   */
+  // quoteProps: 'as-needed',
+
+  /**
+   * JSX Quotes
+   * https://prettier.io/docs/en/options.html#jsx-quotes
+   *
+   * Use single quotes instead of double quotes in JSX.
+   *
+   * jsxSingleQuote: <bool>
+   * default: false
+   */
+  // jsxSingleQuote: false,
+
+  /**
+   * Trailing Commas
+   * https://prettier.io/docs/en/options.html#trailing-commas
+   *
+   * Print trailing commas wherever possible when multi-line. (A single-line array, for example, never gets trailing commas.)
+   *
+   * trailingComma: "<es5|none|all>"
+   * default: 'es5'
+   */
+  trailingComma: "es5",
+
+  /**
+   * Bracket Spacing
+   * https://prettier.io/docs/en/options.html#bracket-spacing
+   *
+   * Print spaces between brackets in object literals.
+   *
+   * bracketSpacing: <bool>
+   * default: true
+   */
+  bracketSpacing: true,
+
+  /**
+   * JSX Brackets
+   * https://prettier.io/docs/en/options.html#jsx-brackets
+   *
+   * Put the > of a multi-line JSX element at the end of the last line instead of being alone on the next line (does not apply to self closing elements).
+   *
+   * jsxBracketSameLine: <bool>
+   * default: false
+   */
+  // jsxBracketSameLine: false,
+
+  /**
+   * Arrow Function Parentheses
+   * https://prettier.io/docs/en/options.html#arrow-function-parentheses
+   *
+   * Include parentheses around a sole arrow function parameter.
+   *
+   * arrowParens: "<always|avoid>"
+   * default: "always"
+   */
+  arrowParens: "always",
+
+  /**
+   * Range
+   * https://prettier.io/docs/en/options.html#range
+   *
+   * Format only a segment of a file.
+   *
+   * rangeStart: <int>
+   * default: 0
+   *
+   * rangeEnd: <int>
+   * default: Infinity
+   */
+  // rangeStart: 0,
+  // rangeEnd: Infinity,
+
+  /**
+   * Parser
+   * https://prettier.io/docs/en/options.html#parser
+   *
+   * Specify which parser to use.
+   *
+   * parser: "<string>" | require("./my-parser")
+   * no default
+   *
+   */
+  // parser: '',
+
+  /**
+   * File Path
+   * https://prettier.io/docs/en/options.html#file-path
+   *
+   * Specify the file name to use to infer which parser to use.
+   *
+   * filepath: "<string>"
+   * no default
+   */
+  // filepath: '',
+
+  /**
+   * Require pragma
+   * https://prettier.io/docs/en/options.html#require-pragma
+   *
+   * Prettier can restrict itself to only format files that contain a special comment, called a pragma, at the top of the file. This is very useful when gradually transitioning large, unformatted codebases to prettier.
+   *
+   * requirePragma: <bool>
+   * default: false
+   */
+  // requirePragma: false,
+
+  /**
+   * Insert Pragma
+   * https://prettier.io/docs/en/options.html#insert-pragma
+   *
+   * Prettier can insert a special @format marker at the top of files specifying that the file has been formatted with prettier. This works well when used in tandem with the --require-pragma option. If there is already a docblock at the top of the file then this option will add a newline to it with the @format marker.
+   *
+   * insertPragma: <bool>
+   * default: false
+   */
+  // insertPragma: false,
+
+  /**
+   * Prose Wrap
+   * https://prettier.io/docs/en/options.html#prose-wrap
+   *
+   * By default, Prettier will wrap markdown text as-is since some services use a linebreak-sensitive renderer, e.g. GitHub comment and BitBucket. In some cases you may want to rely on editor/viewer soft wrapping instead, so this option allows you to opt out with "never".
+   *
+   * proseWrap: "<always|never|preserve>"
+   * default: "preserve"
+   */
+  // proseWrap: 'preserve',
+
+  /**
+   * HTML Whitespace Sensitivity
+   * https://prettier.io/docs/en/options.html#html-whitespace-sensitivity
+   *
+   * Specify the global whitespace sensitivity for HTML files, see whitespace-sensitive formatting for more info.
+   *
+   * htmlWhitespaceSensitivity: "<css|strict|ignore>"
+   * default: "css"
+   */
+  // htmlWhitespaceSensitivity: 'css',
+
+  /**
+   * Vue files script and style tags indentation
+   * https://prettier.io/docs/en/options.html#vue-files-script-and-style-tags-indentation
+   *
+   * Whether or not to indent the code inside <script> and <style> tags in Vue files. Some people (like the creator of Vue) don’t indent to save an indentation level, but this might break code folding in your editor.
+   *
+   * vueIndentScriptAndStyle: <bool>
+   * default: false
+   */
+  // vueIndentScriptAndStyle: false,
+
+  /**
+   * End of Line
+   * https://prettier.io/docs/en/options.html#end-of-line
+   *
+   * For historical reasons, there exist two common flavors of line endings in text files. That is \n (or LF for Line Feed) and \r\n (or CRLF for Carriage Return + Line Feed). The former is common on Linux and macOS, while the latter is prevalent on Windows. Some details explaining why it is so can be found on Wikipedia.
+   *
+   * endOfLine: "<lf|crlf|cr|auto>"
+   * default: "lf"
+   */
+  // endOfLine: 'lf',
+};

package/LICENSE

@@ -0,0 +1,24 @@
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <https://unlicense.org>

package/dist/a11y.d.ts

@@ -0,0 +1,6 @@
+export declare class A11y {
+    constructor();
+    private addGroupRole;
+    private addRequired;
+    private addLabel;
+}

package/dist/a11y.js

@@ -0,0 +1,46 @@
+// a11y means accessibility
+// This Component is supposed to be used as a helper for Aria Attributes & Other Accessibility Features
+export class A11y {
+    constructor() {
+        this.addRequired();
+        this.addLabel();
+        this.addGroupRole();
+    }
+    addGroupRole() {
+        // Add role="group" to all EN Radio fields
+        const radioFields = document.querySelectorAll(".en__field--radio");
+        radioFields.forEach((field) => {
+            field.setAttribute("role", "group");
+            // Add random ID to the label
+            const label = field.querySelector("label");
+            if (label) {
+                label.setAttribute("id", `en__field__label--${Math.random().toString(36).slice(2, 7)}`);
+                field.setAttribute("aria-labelledby", label.id);
+            }
+        });
+    }
+    addRequired() {
+        const mandatoryFields = document.querySelectorAll(".en__mandatory .en__field__input");
+        mandatoryFields.forEach((field) => {
+            field.setAttribute("aria-required", "true");
+        });
+    }
+    addLabel() {
+        const otherAmount = document.querySelector(".en__field__input--otheramount");
+        if (otherAmount) {
+            otherAmount.setAttribute("aria-label", "Enter your custom donation amount");
+        }
+        // Split selects usually don't have a label, so let's make the first option the label
+        const splitSelects = document.querySelectorAll(".en__field__input--splitselect");
+        splitSelects.forEach((select) => {
+            var _a, _b, _c, _d;
+            const firstOption = select.querySelector("option");
+            if (firstOption &&
+                firstOption.value === "" &&
+                !((_b = (_a = firstOption.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes("select")) &&
+                !((_d = (_c = firstOption.textContent) === null || _c === void 0 ? void 0 : _c.toLowerCase()) === null || _d === void 0 ? void 0 : _d.includes("choose"))) {
+                select.setAttribute("aria-label", firstOption.textContent || "");
+            }
+        });
+    }
+}

package/dist/add-name-to-message.d.ts

@@ -0,0 +1,5 @@
+export declare class AddNameToMessage {
+    constructor();
+    shouldRun(): boolean;
+    replaceNameShortcode(fName: string, lName: string): void;
+}

package/dist/add-name-to-message.js

@@ -0,0 +1,49 @@
+/*
+ Adds first and last name when First Name and Last Name fields lose focus if name shortcodes aren't present
+*/
+import { ENGrid } from ".";
+export class AddNameToMessage {
+    constructor() {
+        if (!this.shouldRun()) {
+            // Don't run the script if the page isn't email to target
+            return;
+        }
+        this.replaceNameShortcode("#en__field_supporter_firstName", "#en__field_supporter_lastName");
+    }
+    shouldRun() {
+        return ENGrid.getPageType() === "EMAILTOTARGET";
+    }
+    replaceNameShortcode(fName, lName) {
+        const firstName = document.querySelector(fName);
+        const lastName = document.querySelector(lName);
+        let message = document.querySelector('[name="contact.message"]');
+        let addedFirstName = false;
+        let addedLastName = false;
+        if (message) {
+            if (message.value.includes("{user_data~First Name") ||
+                message.value.includes("{user_data~Last Name")) {
+                return;
+            }
+            else {
+                if (!message.value.includes("{user_data~First Name") && firstName) {
+                    firstName.addEventListener("blur", (e) => {
+                        const target = e.target;
+                        if (message && !addedFirstName) {
+                            addedFirstName = true;
+                            message.value = message.value.concat("\n" + target.value);
+                        }
+                    });
+                }
+                if (!message.value.includes("{user_data~Last Name") && lastName) {
+                    lastName.addEventListener("blur", (e) => {
+                        const target = e.target;
+                        if (message && !addedLastName) {
+                            addedLastName = true;
+                            message.value = message.value.concat(" " + target.value);
+                        }
+                    });
+                }
+            }
+        }
+    }
+}

package/dist/advocacy.d.ts

@@ -0,0 +1,7 @@
+export declare class Advocacy {
+    private logger;
+    constructor();
+    shoudRun(): boolean;
+    setClickableLabels(): void;
+    toggleCheckbox(contact: HTMLElement): void;
+}

package/dist/advocacy.js

@@ -0,0 +1,34 @@
+// Component to handle advocacy features
+// 1 - Adds EN Polyfill to support "label" clicking on Advocacy Recipient "labels"
+import { ENGrid, EngridLogger } from ".";
+export class Advocacy {
+    constructor() {
+        this.logger = new EngridLogger("Advocacy", "#232323", "#f7b500", "👨‍⚖️");
+        if (!this.shoudRun())
+            return;
+        this.setClickableLabels();
+    }
+    shoudRun() {
+        return ["ADVOCACY", "EMAILTOTARGET"].includes(ENGrid.getPageType());
+    }
+    setClickableLabels() {
+        const contactItems = document.querySelectorAll(".en__contactDetails__rows");
+        if (!contactItems)
+            return;
+        contactItems.forEach((contact) => {
+            contact.addEventListener("click", (e) => {
+                this.toggleCheckbox(contact);
+            });
+        });
+    }
+    toggleCheckbox(contact) {
+        const wrapper = contact.closest(".en__contactDetails");
+        if (!wrapper)
+            return;
+        const checkbox = wrapper.querySelector("input[type='checkbox']");
+        if (!checkbox)
+            return;
+        this.logger.log("toggleCheckbox", checkbox.checked);
+        checkbox.checked = !checkbox.checked;
+    }
+}

package/dist/amount-label.d.ts

@@ -0,0 +1,6 @@
+export declare class AmountLabel {
+    private _frequency;
+    constructor();
+    shouldRun(): boolean;
+    fixAmountLabels(): void;
+}

package/dist/amount-label.js

@@ -0,0 +1,29 @@
+// This script checks if the donations amounts are numbers and if they are, appends the correct currency symbol
+import { DonationFrequency, ENGrid } from ".";
+export class AmountLabel {
+    constructor() {
+        this._frequency = DonationFrequency.getInstance();
+        if (!this.shouldRun()) {
+            // If we're not on a Donation Page, get out
+            return;
+        }
+        this._frequency.onFrequencyChange.subscribe((s) => window.setTimeout(this.fixAmountLabels.bind(this), 100));
+        // Run the main function on page load so we can analyze the amounts of the current frequency
+        window.setTimeout(this.fixAmountLabels.bind(this), 300);
+    }
+    // Should we run the script?
+    shouldRun() {
+        return !!(ENGrid.getPageType() === "DONATION" &&
+            ENGrid.getOption("AddCurrencySymbol"));
+    }
+    // Fix Amount Labels
+    fixAmountLabels() {
+        let amounts = document.querySelectorAll(".en__field--donationAmt label");
+        const currencySymbol = ENGrid.getCurrencySymbol() || "";
+        amounts.forEach((element) => {
+            if (!isNaN(element.innerText)) {
+                element.innerText = currencySymbol + element.innerText;
+            }
+        });
+    }
+}

package/dist/app.d.ts

@@ -0,0 +1,19 @@
+import { ENGrid, Options } from ".";
+export declare class App extends ENGrid {
+    private _form;
+    private _fees;
+    private _amount;
+    private _frequency;
+    private _country;
+    private _dataLayer;
+    private options;
+    private logger;
+    constructor(options: Options);
+    private run;
+    private onLoad;
+    private onResize;
+    private onValidate;
+    private onSubmit;
+    private onError;
+    static log(message: string): void;
+}