|
|
|
@@ -18,6 +18,20 @@ |
|
|
|
|
|
|
|
<div id="surveyContainer" style="max-width: 760px; margin: 0 auto 64px; padding: 0 16px;"></div> |
|
|
|
|
|
|
|
<div id="colorPickerOverlay" style="display:none; position:fixed; inset:0; background:rgba(36,16,58,0.55); z-index:1000; align-items:center; justify-content:center; padding:16px;"> |
|
|
|
<div style="background:#fff; border-radius:14px; max-width:640px; width:100%; max-height:85vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 12px 40px rgba(36,16,58,0.35);"> |
|
|
|
<div style="display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid #f0e7f8;"> |
|
|
|
<h3 style="margin:0; color:#201a27; font-size:18px;">Choose your colors</h3> |
|
|
|
<button type="button" id="colorPickerCloseBtn" aria-label="Close" style="background:none; border:none; font-size:22px; line-height:1; color:#6d6574; cursor:pointer; padding:4px 8px;">×</button> |
|
|
|
</div> |
|
|
|
<div id="colorPickerGrid" style="overflow-y:auto; padding:20px 24px; display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px;"></div> |
|
|
|
<div style="display:flex; justify-content:flex-end; gap:10px; padding:16px 24px; border-top:1px solid #f0e7f8;"> |
|
|
|
<button type="button" id="colorPickerCancelBtn" class="button button-secondary">Cancel</button> |
|
|
|
<button type="button" id="colorPickerApplyBtn" class="button button-primary">Apply</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/survey-core@2.5.36/survey.core.min.js"></script> |
|
|
|
<script src="https://cdn.jsdelivr.net/npm/survey-js-ui@2.5.36/survey-js-ui.min.js"></script> |
|
|
|
<script> |
|
|
|
@@ -28,12 +42,16 @@ |
|
|
|
var csrfToken = "<%= H(csrfToken) %>"; |
|
|
|
|
|
|
|
// Election-materials order form. Field (name) values match the OrderDetails table |
|
|
|
// columns 1:1 - see db/migrations/20260728145000_create_order_details_table.asp. |
|
|
|
// Content and branching sourced from docs/lucid/*.pdf. |
|
|
|
// columns 1:1 - see db/migrations/20260728145000_create_order_details_table.asp and |
|
|
|
// db/migrations/20260804153857_revise_order_details_columns.asp. |
|
|
|
// Content and branching sourced from docs/lucid/*.pdf (the "(1)" files are the current |
|
|
|
// revision - see docs/lucid for both the original and revised versions). |
|
|
|
var surveyJson = { |
|
|
|
showProgressBar: "top", |
|
|
|
showQuestionNumbers: "off", |
|
|
|
completeText: "Submit Order", |
|
|
|
checkErrorsMode: "onNextPage", |
|
|
|
completedHtml: "<h3>Thank you for submitting your order.</h3>", |
|
|
|
pages: [ |
|
|
|
{ |
|
|
|
name: "contact", |
|
|
|
@@ -46,53 +64,72 @@ |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "purpleEnvelope", |
|
|
|
title: "2. Purple Ballot Envelope Quote Request", |
|
|
|
title: "2. Purple Ballot Envelope Order Form", |
|
|
|
elements: [ |
|
|
|
{ |
|
|
|
type: "boolean", name: "PurpleWantsQuote", labelTrue: "Yes", labelFalse: "No", |
|
|
|
title: "Would you like a quote for KCI to print your purple AV envelopes?" |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "radiogroup", name: "PurplePrintOption", |
|
|
|
title: "Would you like KCI to print addresses on your purple envelopes or return postage only?", |
|
|
|
visibleIf: "{PurpleWantsQuote} = true", |
|
|
|
choices: [ |
|
|
|
{ value: "AddressesAndPostage", text: "Addresses and return postage" }, |
|
|
|
{ value: "PostageOnly", text: "Return postage only" } |
|
|
|
] |
|
|
|
title: "Would you like for KCI to print your purple AV envelopes?", |
|
|
|
isRequired: true |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "radiogroup", name: "PurpleEnvelopeStock", |
|
|
|
title: "Are you planning to use KCI's purple envelopes or from your own stock?", |
|
|
|
visibleIf: "{PurplePrintOption} = 'AddressesAndPostage'", |
|
|
|
visibleIf: "{PurpleWantsQuote} = true", |
|
|
|
isRequired: true, |
|
|
|
choices: [ |
|
|
|
{ value: "KCIStock", text: "KCI's stock" }, |
|
|
|
{ value: "OwnStock", text: "My own stock" } |
|
|
|
] |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "text", name: "PurpleEnvelopeProvider", |
|
|
|
title: "Who is your purple envelope provider?", |
|
|
|
visibleIf: "{PurpleEnvelopeStock} = 'OwnStock'" |
|
|
|
type: "radiogroup", name: "PurplePrintOption", |
|
|
|
title: "Would you like KCI to print addresses on your purple envelopes or state of Michigan permit only?", |
|
|
|
visibleIf: "{PurpleWantsQuote} = true", |
|
|
|
isRequired: true, |
|
|
|
choices: [ |
|
|
|
{ value: "AddressesAndPermit", text: "Addresses and state of Michigan permit" }, |
|
|
|
{ value: "PermitOnly", text: "State of Michigan permit only" } |
|
|
|
] |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "boolean", name: "PurpleWantsBlueEnvelopes", labelTrue: "Yes", labelFalse: "No", |
|
|
|
title: "Are you planning to use KCI blue envelopes?", |
|
|
|
visibleIf: "{PurplePrintOption} = 'AddressesAndPostage'" |
|
|
|
visibleIf: "{PurplePrintOption} = 'AddressesAndPermit'", |
|
|
|
isRequired: true |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "radiogroup", name: "PurpleBlueProvider", |
|
|
|
title: "Who is your blue envelope provider?", |
|
|
|
visibleIf: "{PurpleWantsBlueEnvelopes} = false", |
|
|
|
isRequired: true, |
|
|
|
choices: [ |
|
|
|
{ value: "ElectionSource", text: "ElectionSource" }, |
|
|
|
{ value: "PSI", text: "PSI" }, |
|
|
|
{ value: "Spectrum", text: "Spectrum" }, |
|
|
|
{ value: "Other", text: "Other" } |
|
|
|
] |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "text", name: "PurpleBlueProviderOther", |
|
|
|
title: "Please specify your blue envelope provider", |
|
|
|
visibleIf: "{PurpleBlueProvider} = 'Other'", |
|
|
|
isRequired: true |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "radiogroup", name: "PurplePrintStyle", |
|
|
|
title: "Would you like your envelopes printed with color coding or black only?", |
|
|
|
visibleIf: "{PurplePrintOption} = 'AddressesAndPostage'", |
|
|
|
title: "Would you like your envelopes printed with color coding or black ink only?", |
|
|
|
visibleIf: "{PurplePrintOption} = 'AddressesAndPermit'", |
|
|
|
isRequired: true, |
|
|
|
choices: [ |
|
|
|
{ value: "ColorCoding", text: "Color Coding" }, |
|
|
|
{ value: "BlackOnly", text: "Black Only" } |
|
|
|
{ value: "BlackOnly", text: "Black Ink Only" } |
|
|
|
] |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "radiogroup", name: "PurpleColorCodingBy", |
|
|
|
title: "Color coding by precinct or by election?", |
|
|
|
visibleIf: "{PurplePrintStyle} = 'ColorCoding'", |
|
|
|
isRequired: true, |
|
|
|
choices: [ |
|
|
|
{ value: "Precinct", text: "Precinct" }, |
|
|
|
{ value: "Election", text: "Election" } |
|
|
|
@@ -101,91 +138,114 @@ |
|
|
|
{ |
|
|
|
type: "text", name: "PurplePrecinctCount", title: "How many precincts?", |
|
|
|
inputType: "number", min: 0, |
|
|
|
visibleIf: "{PurpleColorCodingBy} = 'Precinct'" |
|
|
|
visibleIf: "{PurpleColorCodingBy} = 'Precinct'", |
|
|
|
isRequired: true |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "html", |
|
|
|
visibleIf: "{PurplePrintStyle} = 'ColorCoding'", |
|
|
|
html: "<button type=\"button\" id=\"openColorPickerBtn\" class=\"button button-secondary\">Choose Colors…</button>" |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "text", name: "PurpleColorNames", readOnly: true, |
|
|
|
title: "Which colors would you like to use?", |
|
|
|
description: "Use the \"Choose Colors…\" button above to pick from KCI's available envelope colors.", |
|
|
|
visibleIf: "{PurplePrintStyle} = 'ColorCoding'", |
|
|
|
isRequired: true |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "boolean", name: "PurpleTrackMIBallot", labelTrue: "Yes", labelFalse: "No", |
|
|
|
title: "Would you like to track ballots using TrackMI Ballot?", |
|
|
|
visibleIf: "{PurplePrintOption} = 'AddressesAndPostage'" |
|
|
|
visibleIf: "{PurplePrintOption} = 'AddressesAndPermit'", |
|
|
|
isRequired: true |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "text", name: "PurpleExtraEnvelopeQty", |
|
|
|
title: "How many extra purple envelopes would you like? (If none, please put zero)", |
|
|
|
inputType: "number", min: 0, |
|
|
|
visibleIf: "{PurplePrintOption} = 'AddressesAndPostage'" |
|
|
|
visibleIf: "{PurplePrintOption} = 'AddressesAndPermit'", |
|
|
|
isRequired: true |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "text", name: "PurpleDeliveryDate", inputType: "date", |
|
|
|
title: "Please provide a date you would like these purple envelopes delivered.", |
|
|
|
visibleIf: "{PurpleWantsQuote} = true" |
|
|
|
type: "html", |
|
|
|
visibleIf: "{PurpleWantsQuote} = true", |
|
|
|
html: "<p>Purple envelopes are usually delivered or shipped 3 to 5 days after proof is approved.</p>" |
|
|
|
} |
|
|
|
] |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "blueEnvelope", |
|
|
|
title: "3. Blue AV Envelope Quote Request", |
|
|
|
title: "3. Blue AV Envelope Order Form", |
|
|
|
elements: [ |
|
|
|
{ |
|
|
|
type: "boolean", name: "BlueWantsQuote", labelTrue: "Yes", labelFalse: "No", |
|
|
|
title: "Would you like to purchase blue AV envelopes from KCI?" |
|
|
|
title: "Would you like to purchase blue AV envelopes from KCI?", |
|
|
|
isRequired: true |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "radiogroup", name: "BlueEnvelopeProvider", |
|
|
|
title: "Are you planning to use KCI's blue envelopes or another provider's?", |
|
|
|
type: "boolean", name: "BluePrintPermit", labelTrue: "Yes", labelFalse: "No", |
|
|
|
title: "Would you like KCI to print a permit on your blue envelope?", |
|
|
|
visibleIf: "{BlueWantsQuote} = true", |
|
|
|
choices: [ |
|
|
|
{ value: "KCI", text: "KCI" }, |
|
|
|
{ value: "OtherProvider", text: "Other provider" } |
|
|
|
] |
|
|
|
isRequired: true |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "boolean", name: "BluePrintPermit", labelTrue: "Yes", labelFalse: "No", |
|
|
|
title: "Would you like KCI to print a permit on your blue envelope?", |
|
|
|
visibleIf: "{BlueEnvelopeProvider} = 'KCI'" |
|
|
|
type: "radiogroup", name: "BluePermitOwnership", |
|
|
|
title: "Will you be using KCI's permit or your own?", |
|
|
|
visibleIf: "{BluePrintPermit} = true", |
|
|
|
isRequired: true, |
|
|
|
choices: [ |
|
|
|
{ value: "KCIPermit", text: "KCI permit" }, |
|
|
|
{ value: "OwnPermit", text: "My organization's permit" } |
|
|
|
] |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "text", name: "BluePermitNumber", title: "Permit Number", |
|
|
|
visibleIf: "{BluePrintPermit} = true" |
|
|
|
type: "html", |
|
|
|
visibleIf: "{BluePermitOwnership} = 'KCIPermit'", |
|
|
|
html: "<p><strong>Please note, envelopes with KCI's permit MUST be mailed from KCI.</strong></p>" |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "text", name: "BluePermitCity", title: "City of permit holder", |
|
|
|
visibleIf: "{BluePrintPermit} = true" |
|
|
|
type: "boolean", name: "BlueHasNonprofitStatus", labelTrue: "Yes", labelFalse: "No", |
|
|
|
title: "Does your organization have confirmed nonprofit status with USPS?", |
|
|
|
visibleIf: "{BluePermitOwnership} = 'OwnPermit'", |
|
|
|
isRequired: true |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "radiogroup", name: "BluePermitClass", title: "NP or STD", |
|
|
|
visibleIf: "{BluePrintPermit} = true", |
|
|
|
choices: [ |
|
|
|
{ value: "NP", text: "NP" }, |
|
|
|
{ value: "STD", text: "STD" } |
|
|
|
] |
|
|
|
type: "text", name: "BlueNonprofitAuthCode", |
|
|
|
title: "Please provide your nonprofit authorization code.", |
|
|
|
visibleIf: "{BlueHasNonprofitStatus} = true", |
|
|
|
isRequired: true |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "boolean", name: "BluePrintReturnAddress", labelTrue: "Yes", labelFalse: "No", |
|
|
|
title: "Would you like KCI to print return address information on the back of the blue envelope?", |
|
|
|
visibleIf: "{BlueEnvelopeProvider} = 'KCI'" |
|
|
|
type: "text", name: "BluePermitCity", title: "City of permit holder", |
|
|
|
description: "Please provide the following information.", |
|
|
|
visibleIf: "{BlueHasNonprofitStatus} = false", |
|
|
|
isRequired: true |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "text", name: "BlueDeliveryDate", inputType: "date", |
|
|
|
title: "Please provide a date you would like the blue envelopes delivered.", |
|
|
|
visibleIf: "{BlueWantsQuote} = true" |
|
|
|
type: "text", name: "BluePermitNumber", title: "Permit Number", |
|
|
|
visibleIf: "{BlueHasNonprofitStatus} = false", |
|
|
|
isRequired: true |
|
|
|
} |
|
|
|
] |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "mailingService", |
|
|
|
title: "4. Ballot Mailing Service Quote Request", |
|
|
|
title: "4. Ballot Mailing Service", |
|
|
|
elements: [ |
|
|
|
{ |
|
|
|
type: "boolean", name: "MailingWantsService", labelTrue: "Yes", labelFalse: "No", |
|
|
|
title: "Would you like to save postage and have KCI mail your ballots?" |
|
|
|
title: "Would you like to save postage and have KCI mail your ballots?", |
|
|
|
isRequired: true |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "radiogroup", name: "MailingPostageOption", |
|
|
|
title: "Would you like KCI to apply postage?", |
|
|
|
visibleIf: "{MailingWantsService} = true", |
|
|
|
isRequired: true, |
|
|
|
choices: [ |
|
|
|
{ value: "FirstClass", text: "Yes, at First Class Rate" }, |
|
|
|
{ value: "NonprofitRate", text: "Yes, at Nonprofit Rate" }, |
|
|
|
{ value: "FirstClass", text: "Yes, at First Class Rate ($0.721/pc.)" }, |
|
|
|
{ value: "NonprofitRate", text: "Yes, at Nonprofit Rate ($0.263/pc.)" }, |
|
|
|
{ value: "PresortStandard", text: "Yes, at Presort Standard Rate ($0.473/pc.)" }, |
|
|
|
{ value: "No", text: "No" } |
|
|
|
] |
|
|
|
}, |
|
|
|
@@ -193,6 +253,7 @@ |
|
|
|
type: "radiogroup", name: "MailingHasNonprofitStatus", |
|
|
|
title: "Do you have Nonprofit Status with the USPS?", |
|
|
|
visibleIf: "{MailingPostageOption} = 'NonprofitRate'", |
|
|
|
isRequired: true, |
|
|
|
choices: [ |
|
|
|
{ value: "Yes", text: "Yes" }, |
|
|
|
{ value: "No", text: "No" }, |
|
|
|
@@ -200,12 +261,29 @@ |
|
|
|
] |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "boolean", name: "MailingWantsSorting", labelTrue: "Yes", labelFalse: "No", |
|
|
|
title: "Would you like KCI to sort your ballots?" |
|
|
|
type: "text", name: "MailingEstimatedQuantity", |
|
|
|
title: "Please provide your estimated quantity.", |
|
|
|
inputType: "number", min: 0, |
|
|
|
visibleIf: "{MailingWantsService} = true", |
|
|
|
isRequired: true |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "text", name: "MailingPickupDate", inputType: "date", |
|
|
|
title: "What is your preferred (first) pickup date?" |
|
|
|
type: "dropdown", name: "MailingPickupDate", |
|
|
|
title: "What is your preferred (first) pickup date?", |
|
|
|
visibleIf: "{MailingWantsService} = true", |
|
|
|
isRequired: true, |
|
|
|
choices: [ |
|
|
|
{ value: "2026-09-21", text: "September 21, 2026" }, |
|
|
|
{ value: "2026-09-22", text: "September 22, 2026" }, |
|
|
|
{ value: "2026-09-23", text: "September 23, 2026" }, |
|
|
|
{ value: "2026-09-24", text: "September 24, 2026" }, |
|
|
|
{ value: "2026-09-25", text: "September 25, 2026" }, |
|
|
|
{ value: "2026-09-28", text: "September 28, 2026" }, |
|
|
|
{ value: "2026-09-29", text: "September 29, 2026" }, |
|
|
|
{ value: "2026-09-30", text: "September 30, 2026" }, |
|
|
|
{ value: "2026-10-01", text: "October 1, 2026" }, |
|
|
|
{ value: "2026-10-02", text: "October 2, 2026" } |
|
|
|
] |
|
|
|
} |
|
|
|
] |
|
|
|
}, |
|
|
|
@@ -215,15 +293,22 @@ |
|
|
|
elements: [ |
|
|
|
{ |
|
|
|
type: "text", name: "SecrecySleevesQty", title: "Secrecy Sleeves (quantity)", |
|
|
|
inputType: "number", min: 0, defaultValue: 0 |
|
|
|
inputType: "number", min: 0, defaultValue: 0, |
|
|
|
isRequired: true |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "text", name: "IVotedStickerRolls", title: "\"I Voted\" Stickers (rolls of 250)", |
|
|
|
inputType: "number", min: 0, defaultValue: 0 |
|
|
|
type: "text", name: "IVotedStickerRolls", title: "\"I Voted\" Stickers - number of rolls (rolls of 250)", |
|
|
|
inputType: "number", min: 0, defaultValue: 0, |
|
|
|
isRequired: true |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "text", name: "FutureVoterStickerRolls", title: "\"Future Voter\" Stickers (rolls of 500)", |
|
|
|
inputType: "number", min: 0, defaultValue: 0 |
|
|
|
type: "text", name: "FutureVoterStickerRolls", title: "\"Future Voter\" Stickers - number of rolls (rolls of 500)", |
|
|
|
inputType: "number", min: 0, defaultValue: 0, |
|
|
|
isRequired: true |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "comment", name: "SpecialRequests", |
|
|
|
title: "We will send you a copy of your price quote upon completion of this order form. If you have any special requests for any of your orders, please let us know here." |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
@@ -232,6 +317,83 @@ |
|
|
|
|
|
|
|
var survey = new Survey.Model(surveyJson); |
|
|
|
|
|
|
|
// Color picker modal for the "Which colors would you like to use?" question. Swatches are |
|
|
|
// the pre-converted PNGs in public/images/purple-envelope-colors/ (converted from the |
|
|
|
// original public/images/Purple_ballot_envelopes colors/*.bmp - those BMPs were ~400KB |
|
|
|
// each; PNG compresses these flat-color swatches down to ~1-4KB each). |
|
|
|
(function () { |
|
|
|
var COLOR_FILES = [ |
|
|
|
"Aqua", "Black", "Blue", "Brown", "BurlyWood", "Chocolate", "Clay", "Coral", |
|
|
|
"CornflowerBlue", "Crimson", "DarkOrange", "DeepPink", "DeepSkyBlue", "DimGray", |
|
|
|
"DodgerBlue", "FireBrick", "ForestGreen", "Fuchsia", "Gold", "Goldenrod", "Green", |
|
|
|
"HotPink", "Indigo", "LightSeaGreen", "Lime", "LimeGreen", "LtGreen", "MediumOrchid", |
|
|
|
"MediumPurple", "MediumTurquoise", "MintGreen", "Navy", "Olive", "OliveDrab", "Orange", |
|
|
|
"OrangeRed", "Orchid", "PastelBlue", "PastelPink", "PastelPurple", "PastelYellow", |
|
|
|
"Peru", "Pink", "Purple", "Red", "RoyalBlue", "SaddleBrown", "SeaGreen", "Sienna", |
|
|
|
"Silver", "SkyBlue", "SteelBlue", "Tan", "Teal", "Tomato", "Turquoise", "Violet", |
|
|
|
"White", "Yellow" |
|
|
|
]; |
|
|
|
var colorImageBaseUrl = "<%= H(Routes().AppURL & "images/purple-envelope-colors/") %>"; |
|
|
|
var overlay = document.getElementById("colorPickerOverlay"); |
|
|
|
var grid = document.getElementById("colorPickerGrid"); |
|
|
|
|
|
|
|
function colorLabel(fileName) { |
|
|
|
return fileName.replace(/([a-z])([A-Z])/g, "$1 $2"); |
|
|
|
} |
|
|
|
|
|
|
|
COLOR_FILES.forEach(function (fileName) { |
|
|
|
var label = colorLabel(fileName); |
|
|
|
var item = document.createElement("label"); |
|
|
|
item.style.cssText = "display:flex; flex-direction:column; gap:6px; border:1px solid #f0e7f8; border-radius:8px; padding:8px; cursor:pointer;"; |
|
|
|
item.innerHTML = |
|
|
|
'<img src="' + colorImageBaseUrl + encodeURIComponent(fileName) + '.png" alt="" ' + |
|
|
|
'style="width:100%; height:36px; border-radius:4px; object-fit:cover; border:1px solid #e5d9f2;" />' + |
|
|
|
'<span style="display:flex; align-items:center; gap:6px; font-size:13px; color:#201a27;">' + |
|
|
|
'<input type="checkbox" class="color-picker-checkbox" value="' + label.replace(/"/g, """) + '" /> ' + |
|
|
|
label + "</span>"; |
|
|
|
grid.appendChild(item); |
|
|
|
}); |
|
|
|
|
|
|
|
function openColorPicker() { |
|
|
|
var current = (survey.getValue("PurpleColorNames") || "") |
|
|
|
.split(",") |
|
|
|
.map(function (s) { return s.trim(); }) |
|
|
|
.filter(Boolean); |
|
|
|
var currentSet = {}; |
|
|
|
current.forEach(function (c) { currentSet[c] = true; }); |
|
|
|
var checkboxes = grid.querySelectorAll(".color-picker-checkbox"); |
|
|
|
checkboxes.forEach(function (cb) { cb.checked = !!currentSet[cb.value]; }); |
|
|
|
overlay.style.display = "flex"; |
|
|
|
} |
|
|
|
|
|
|
|
function closeColorPicker() { |
|
|
|
overlay.style.display = "none"; |
|
|
|
} |
|
|
|
|
|
|
|
function applyColorPicker() { |
|
|
|
var checked = grid.querySelectorAll(".color-picker-checkbox:checked"); |
|
|
|
var selected = Array.prototype.map.call(checked, function (cb) { return cb.value; }); |
|
|
|
survey.setValue("PurpleColorNames", selected.join(", ")); |
|
|
|
closeColorPicker(); |
|
|
|
} |
|
|
|
|
|
|
|
document.getElementById("colorPickerCloseBtn").addEventListener("click", closeColorPicker); |
|
|
|
document.getElementById("colorPickerCancelBtn").addEventListener("click", closeColorPicker); |
|
|
|
document.getElementById("colorPickerApplyBtn").addEventListener("click", applyColorPicker); |
|
|
|
overlay.addEventListener("click", function (event) { |
|
|
|
if (event.target === overlay) closeColorPicker(); |
|
|
|
}); |
|
|
|
|
|
|
|
// The "Choose Colors..." button is rendered by SurveyJS as an html question, so it |
|
|
|
// doesn't exist in the DOM until that page is shown - delegate from a stable ancestor. |
|
|
|
document.addEventListener("click", function (event) { |
|
|
|
if (event.target && event.target.id === "openColorPickerBtn") { |
|
|
|
event.preventDefault(); |
|
|
|
openColorPicker(); |
|
|
|
} |
|
|
|
}); |
|
|
|
})(); |
|
|
|
|
|
|
|
survey.onComplete.add(function (sender) { |
|
|
|
fetch(submitUrl, { |
|
|
|
method: "POST", |
|
|
|
@@ -251,7 +413,7 @@ |
|
|
|
if (result.ok && result.body && result.body.success) { |
|
|
|
container.innerHTML = |
|
|
|
'<p style="text-align:center; padding: 32px 0;">' + |
|
|
|
"Thanks! Your order details have been submitted." + |
|
|
|
"Thank you for submitting your order." + |
|
|
|
"</p>"; |
|
|
|
} else { |
|
|
|
alert((result.body && result.body.error) || "Something went wrong submitting your order. Please try again."); |
|
|
|
|
Daniel Covington
2 тижднів тому
