Last active
April 29, 2021 10:15
-
-
Save achisholm/6f81759f2918983e2cd443565758416f to your computer and use it in GitHub Desktop.
Summary of function names in the bespoke cutting service JS app
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// set/initialise app-scope vars | |
var productData | |
var orderData | |
isEmpty() - // Checks if an object is empty; | |
document 'keypress' listener // For some elements, simulate a click when enter key is pressed during focus. | |
var steps | |
setStateBasedOnURL() // Inspect URL and switch to step given in the URL parameter. | |
.js-button-back click listener // Back button click handler to go back a step. | |
var buttonGetStarted // #buttonGetStarted element | |
buttonGetStarted click listener // Advance to step 1. | |
changeState() // Jump backwards or forwards steps by a given increment. | |
window onpopstate // When browser history changes, setStateBasedOnURL(); | |
var buttonContinue // #buttonContinue element | |
var colourSelect // #colour element | |
var setupData | |
buttonContinue click listener // Continue button click handler to advance a step. | |
onload() // Initialise the app state on page load. | |
fetchOrderData() // Make AJAX GET request to fetch orderData JSON from the server. | |
saveOrderData() // Make AJAX POST request to save OrderData to the server. | |
initialiseApp() // Set up all steps based on the most recently created product. | |
isIpRatingComplete() // Checks if the productData product includes an IP Rating id. | |
isColourComplete() // Checks if the productData product has includes a Colour id. | |
isComponentsComplete() // Checks if the productData product includes valid components. | |
isProductComplete() // Checks if the productData product is complete. | |
ipRatingInitialise() // Initialise the IP Rating step. | |
coloursInitialise() // Initialise the Step 2. Colour step. | |
setupInitialise() // Initialise the Step 3. Setup step. | |
extrasInitialise() // Initialise the Step 4. Extras steps. | |
reviewInitialise() // Initialise the Step 5. Review step. | |
orderInitialise() // Initialise the Step 6. Order step. | |
validationMessageShow() // Show a form invalid message, appended as a child of the given element. | |
validationMessageRemove() // Remove any form invalid messages present in the given element. | |
validateApp() // Show validation messages if pages are accessed before it's possible to populate them. | |
.js-button-restart click listener // 'Start a New Order' button click event handler. Reset & go to Intro page. | |
For all '.js-radio-field's register click listeners | |
handleRadioFieldClick() | |
var fields // all .field__input elements | |
initialiseField() // Add event listeners to an input field, enabling client-side validation feedback. | |
validationTooltipShow() | |
validationTooltipRemove() | |
checkValidity() | |
handleErrors() // Checks that a fetch was resolved successfully, throwing an error if not. | |
// Step 2. Colours | |
coloursRequest() // Make AJAX Request to fetch Colours JSON based on the selected IP Rating. | |
coloursConstruct() // Construct the HTML and add to DOM, the 'Step 2. Colour' dropdown select options and their content divs using JSON data. | |
colourSelectHandleChange() | |
// Step 3. Setup | |
var templateCable // #templateCable element | |
var templateConnector // #templateConnector element | |
var templateFlexStrip // #templateFlexStrip element | |
var componentList // #componentList element | |
setupRequest() // Make AJAX Request to fetch setup JSON based on the selected IP Rating & Colour. | |
setupConstruct() // Construct the HTML and add to DOM, the 'Step 3. Setup' configurator components using JSON data. | |
// register event listeners for add /remove component controls | |
setAddControlsState() | |
constructCableComponent() | |
constructFlexStripComponent() | |
constructConnectorComponent() | |
recordSetupProductData() | |
// Step 4. Extras. | |
extrasRequest() | |
var radioFieldTemplate // #templateRadioField element | |
var templateOptionContent // #optionContent element | |
var qtyInputFieldTemplate // #templateQtyInputField element | |
var lengthInputFieldTemplate // #templateLengthInputField element | |
extrasConstruct() | |
getDefaultProfileLength() // Return in mm, the total length of flex strip included in the current order, rounded up to nearest multiple of 1000. | |
// Step 5. Review. | |
recordExtrasProductData() // Record the products and quantities configured by the user on Step 4 Extras pages to the productData object. | |
var abortController | |
var isLoading | |
reviewRequest() | |
var templateReviewTableRow // #templateReviewTableRow element | |
var reviewComponentsTbody // #reviewComponents element | |
var reviewProductQtyInputField // #reviewProductQuantity element | |
reviewConstruct() | |
reviewProductQtyInputField 'change' listener | |
reviewProductQtyInputField 'keyup' listener | |
handleReviewQtyInputChange() | |
// Step 6. Order. | |
orderRequest() | |
var orderTableTbody // #orderTableTbody elemnent | |
var templateOrderTableRow // #templateOrderTableRow elemnent | |
var orderBasketTotal // #orderBasketTotal elemnent | |
var orderCarriageTotal // #orderCarriageTotal elemnent | |
var orderVatTotal // #orderVatTotal elemnent | |
var orderTotal // #orderTotal elemnent | |
orderConstruct() | |
handleOrderQtyInputChange() | |
recordReviewProductData() | |
var buttonAddProduct // #buttonAddProduct | |
buttonAddProduct click listener | |
// 'Remove' modal dialog | |
var dialogRemoveProduct // #dialogRemoveProduct element | |
var dialogRemoveProductCancel // #dialogRemoveProductCancel element | |
var dialogRemoveProductConfirm // #dialogRemoveProductConfirm element | |
dialogRemoveProductCancel click listener | |
dialogRemoveProductConfirm click listener | |
orderDataProductRemove() // Removes a product from orderData | |
handleRemoveButtonClick() // Click event handler for remove product buttons. | |
// Delivery Method modal dialog | |
var dialogDelivery // #dialogDelivery element | |
var dialogDeliveryCancel // #dialogDeliveryCancel element | |
var dialogDeliveryConfirm // #dialogDeliveryConfirm element | |
var buttonDeliveryEdit // #buttonDeliveryEdit element | |
buttonDeliveryEdit click listener | |
dialogDeliveryCancel click listener | |
dialogDeliveryConfirm click listener | |
browserSupportsDialog() | |
var deliveryRadioOptions | |
handleDeliveryMethodRadioChange() | |
collapseSection() | |
expandSection() | |
var buttonPlaceOrder // #buttonPlaceOrder element | |
buttonPlaceOrder click listener | |
requestPlaceOrder() // AJAX request made on clicking "Place Order" button on Step 6 Order page. | |
orderConfirmationConstruct() // Update the text on Step 7. Order Confirmation page. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment