diff --git a/ui/uiController.js b/ui/uiController.js index 020ff8ad..2b947a38 100644 --- a/ui/uiController.js +++ b/ui/uiController.js @@ -1,5 +1,7 @@ -/* Function Name: openSlider - * Description: Opens the slider by adding the "clicked" class at the bottom of the html page. +/** + * Function Name: openSlider + * Description: Opens the slider by adding the "clicked" class at the + * bottom of the html page. * Parameters: None */ function openSlider() { @@ -14,8 +16,10 @@ function openSlider() { } } -/* Function Name: closeSlider - * Description: Closes the slider by removing the "clicked" class at the bottom of the html page. +/** + * Function Name: closeSlider + * Description: Closes the slider by removing the "clicked" class at the + * bottom of the html page. * Parameters: None */ function closeSlider() { @@ -30,10 +34,12 @@ function closeSlider() { } } -/* +/** * Function: addToSandwich - * Description: This function handles display of subgoals and actions in the expandable sidebar - * Params: type - either subgoal or idealAction, item - the object (either subgoal or action) + * Description: This function handles display of subgoals and actions in the + * expandable sidebar + * Params: type - either subgoal or idealAction, item - the object + * (either subgoal or action) */ // TODO: refactor to clarify logic and reduce duplicated code function addToSandwich(type, item){ @@ -41,10 +47,14 @@ function addToSandwich(type, item){ if(!type.localeCompare("subgoal")){ var subArr = getSubgoalArrayFromLocal(); var arrowSRC=chrome.runtime.getURL("images/arrow_collapsed.png"); - var sideSubgoal = ('
Subgoal ' + item.id + ': ' + item.name + '
'); + var sideSubgoal = ('
Subgoal ' + + item.id + ': ' + item.name + '
'); // checking to see if the subgoal has already been created (?) if (item.id >= subArr.length) { var foundIt = false; @@ -52,9 +62,15 @@ function addToSandwich(type, item){ var currId = Number(this.getAttribute('supercoolattr')); if (item.id == currId) { foundIt = true; - // if the subgoal already exists, make sure it has the correct name + /** + * if the subgoal already exists, make sure it has the + * correct name. + */ var match = "#sideSubgoal" + currId - sidebarBody().find("#subgoalList").children(match).html(sideSubgoal); + sidebarBody() + .find("#subgoalList") + .children(match) + .html(sideSubgoal); } }); // add the new subgoal to the sidebar @@ -63,31 +79,47 @@ function addToSandwich(type, item){ } } - sidebarBody().find("#sideSubgoal" + item.id).unbind( "click" ).click(function(){ - subArr = getSubgoalArrayFromLocal(); // in case something changes before the button is clicked - var currentSessionState = typeof getSessionState === "function" ? getSessionState() : null; - var savedSubgoal = getSessionSubgoalById(item.id, currentSessionState); - var hasSavedQuestions = Boolean( - savedSubgoal && - ( - savedSubgoal.why || - (savedSubgoal.ynm && (savedSubgoal.ynm.yes || savedSubgoal.ynm.no || savedSubgoal.ynm.maybe)) || - (savedSubgoal.actions && savedSubgoal.actions.length > 0) - ) - ); - // do not enter drawSubgoal with a different id until the current subgoal is saved - if (hasSavedQuestions || item.id == subArr.length){ - drawSubgoal(item.id); - } - sideSubgoalExpandy(item.id, 0); + sidebarBody() + .find("#sideSubgoal" + item.id) + .unbind( "click" ) + .click(function(){ + // in case something changes before the button is clicked + subArr = getSubgoalArrayFromLocal(); + var currentSessionState = + typeof getSessionState === "function" ? + getSessionState() : null; + var savedSubgoal = + getSessionSubgoalById(item.id, currentSessionState); + var hasSavedQuestions = Boolean(savedSubgoal && + (savedSubgoal.why || + (savedSubgoal.ynm && + (savedSubgoal.ynm.yes || + savedSubgoal.ynm.no || + savedSubgoal.ynm.maybe)) || + (savedSubgoal.actions && + savedSubgoal.actions.length > 0))); + /** + * Do not enter drawSubgoal with a different id until the + * current subgoal is saved. + */ + if (hasSavedQuestions || item.id == subArr.length){ + drawSubgoal(item.id); + } + sideSubgoalExpandy(item.id, 0); }); } else if(!type.localeCompare("idealAction") && item.name){ - var sideAction = ('
Action ' + item.actionId + ': ' + item.name + '
'); + var sideAction = ('
Action ' + item.actionId + ': ' + item.name + + '
'); var sideActionIdToFind = item.subgoalId + "-" + item.actionId; - var sideActionIdForClick = "#sideAction" + item.subgoalId + "-" + item.actionId; + var sideActionIdForClick = "#sideAction" + item.subgoalId + "-" + + item.actionId; var foundIt = false; // update an existing action? sidebarBody().find('#subgoalList').children().each(function () { @@ -103,24 +135,33 @@ function addToSandwich(type, item){ } // simple display else { - sidebarBody().find(sideActionIdForClick).html('Action ' + item.actionId + ': ' + item.name); + sidebarBody() + .find(sideActionIdForClick) + .html('Action ' + item.actionId + ': ' + item.name); var currArray = getSubgoalArrayFromLocal(); } - sidebarBody().find(sideActionIdForClick).unbind( "click" ).click(function(){ - drawAction(item.actionId, item.subgoalId); + sidebarBody() + .find(sideActionIdForClick) + .unbind( "click" ) + .click(function(){ + drawAction(item.actionId, item.subgoalId); }); } // create a new action object and add to the list else if(!type.localeCompare("idealAction") && !item){ - var sessionState = typeof getSessionState === "function" ? getSessionState() : null; + var sessionState = typeof getSessionState === "function" ? + getSessionState() : null; var subgoalId = sessionState ? sessionState.currentSubgoalId : null; var actionId = getSessionCurrentActionId(sessionState); var actionName = getSessionCurrentActionName(sessionState); - var sideAction = ('
Action ' + actionId + ': ' + actionName + '
'); + var sideAction = + ('
Action ' + actionId + ': ' + actionName + '
'); sidebarBody().find("#subgoalList").append(sideAction); var sideActionIdToFind = "#sideAction" + subgoalId + "-" + actionId; sidebarBody().find(sideActionIdToFind).unbind( "click" ).click(function(){ @@ -130,25 +171,32 @@ function addToSandwich(type, item){ } else { - console.log("Something went wrong in addToSandwich OH GOD PANIC", type, item); + console.log("Something went wrong in addToSandwich OH GOD PANIC", + type, item); } } //Happens after refresh //confused about when this happens exactly - -// TODO: Refactoring. This function contains code that exists elsewhere (see addToSandwich). Is it wise to have -// buttons within an each() loop? +/** + * TODO: Refactoring. This function contains code that exists elsewhere + * (see addToSandwich). Is it wise to have buttons within an each() loop? + */ function reloadSandwich () { console.log("Reloading sandwich menu..."); var subgoalDiv = sidebarBody().find('#subgoalList'); //check to see if user is on subgoals before refresh if (subgoalDiv && hasStartedSession()) { subgoalDiv.empty(); - var sessionState = typeof getSessionState === "function" ? getSessionState() : null; - var savedSubgoals = sessionState && Array.isArray(sessionState.subgoals) ? sessionState.subgoals : []; - var draftAction = sessionState && sessionState.draftAction ? sessionState.draftAction : null; + var sessionState = typeof getSessionState === "function" ? + getSessionState() : null; + var savedSubgoals = sessionState && + Array.isArray(sessionState.subgoals) ? + sessionState.subgoals : []; + var draftAction = sessionState && + sessionState.draftAction ? + sessionState.draftAction : null; savedSubgoals.forEach(function (savedSubgoal) { addToSandwich("subgoal", { @@ -189,25 +237,37 @@ function reloadSandwich () { if (currId.length == 1) { //It's a subgoal //console.log("subgoal"); - sidebarBody().find("#sideSubgoal" + currId).unbind( "click" ).click(function(){ - var subArr = getSubgoalArrayFromLocal(); // in case something changes before the button is clicked - var currentSessionState = typeof getSessionState === "function" ? getSessionState() : null; - var savedSubgoal = getSessionSubgoalById(currId, currentSessionState); - var hasSavedQuestions = Boolean( - savedSubgoal && - ( - savedSubgoal.why || - (savedSubgoal.ynm && (savedSubgoal.ynm.yes || savedSubgoal.ynm.no || savedSubgoal.ynm.maybe)) || - (savedSubgoal.actions && savedSubgoal.actions.length > 0) - ) - ); - // do not enter drawSubgoal with a different id until the current subgoal is saved - if (hasSavedQuestions || currId == subArr.length){ - drawSubgoal(currId); - } - sideSubgoalExpandy(currId, 0); - }); - //todo: add collapse onclick function here. + sidebarBody() + .find("#sideSubgoal" + currId) + .unbind( "click" ) + .click(function(){ + // in case something changes before button is clicked + var subArr = getSubgoalArrayFromLocal(); + var currentSessionState = + typeof getSessionState === "function" ? + getSessionState() : null; + var savedSubgoal = + getSessionSubgoalById(currId, currentSessionState); + var hasSavedQuestions = Boolean( + savedSubgoal && + (savedSubgoal.why || + (savedSubgoal.ynm && + (savedSubgoal.ynm.yes || + savedSubgoal.ynm.no || + savedSubgoal.ynm.maybe)) || + (savedSubgoal.actions && + savedSubgoal.actions.length > 0)) + ); + /** + * Do not enter drawSubgoal with a different id until + * the current subgoal is saved. + */ + if (hasSavedQuestions || currId == subArr.length){ + drawSubgoal(currId); + } + sideSubgoalExpandy(currId, 0); + }); + //todo: add collapse onclick function here. } else { @@ -219,23 +279,36 @@ function reloadSandwich () { var subgoals = getSubgoalArrayFromLocal(); if (subgoals[ thisSubNum-1 ].actions[ thisActionNum-1 ]) { //console.log("binding to answers..."); - sidebarBody().find("#sideAction" + currId).unbind( "click" ).click(function(){ - loadActionAnswersTemplate(thisActionNum, thisSubNum); - }); + sidebarBody() + .find("#sideAction" + currId) + .unbind( "click" ) + .click(function(){ + loadActionAnswersTemplate(thisActionNum, + thisSubNum); + }); } else { - sidebarBody().find("#sideAction" + currId).unbind( "click" ).click(function(){ + sidebarBody() + .find("#sideAction" + currId) + .unbind( "click" ) + .click(function(){ drawAction(thisActionNum, thisSubNum); var subgoals = getSubgoalArrayFromLocal(); var actionName = ""; - if (subgoals[ thisSubNum-1 ].actions[ thisActionNum-1 ]) { - actionName = subgoals[ thisSubNum-1 ].actions[ thisActionNum-1 ].name; + if (subgoals[ thisSubNum-1 ] + .actions[ thisActionNum-1 ]) { + actionName = + subgoals[ thisSubNum-1 ] + .actions[ thisActionNum-1 ] + .name; } else { //they name the function for the user? actionName = "Lights, Camera"; } - sidebarBody().find('#actionNameInput').html(actionName); + sidebarBody() + .find('#actionNameInput') + .html(actionName); //sidebarBody().find('#submitActionName').click(); }); } @@ -250,10 +323,17 @@ function reloadSandwich () { } -//Called when a sideSubgoal is clicked. -//Expands or collapses the actions under that subgoal, but not the subgoal itself. -//Call with sideSubgoalExpandy(id, 0) to toggle. -//Call with sideSubgoalExpandy(id, "expand") or sideSubgoalExpandy(id, "collapse") to do that specifically +/** + * Function Name: sideSubgoalExpandy + * Description: Called when a sideSubgoal is clicked. Expands or collapses + * the actions under that subgoal, but not the subgoal itself. + * + * Call with sideSubgoalExpandy(id, 0) to toggle. + * Call with sideSubgoalExpandy(id, "expand") or + * sideSubgoalExpandy(id, "collapse") to do that specifically. + * Parameters: subgoalId - ID of the sideSubgoal + * whatToDo - action subgoal actions should take + */ function sideSubgoalExpandy (subgoalId, whatToDo) { //Get the subgoal list @@ -265,9 +345,11 @@ function sideSubgoalExpandy (subgoalId, whatToDo) { sideList.find('#sideSubgoalImg' + subgoalId).attr("src", arrowSRC); sideList.children().each(function () { var currId = (this.getAttribute('supercoolattr')); - /*If the first part of the ID matches the subgoal number and the length of the ID - is longer than 1, it's an action to expand*/ - if ( Number(currId[0]) == Number(subgoalId) && currId.length > 1 ) { + /** + * If the first part of the ID matches the subgoal number and the + * length of the ID is longer than 1, it's an action to expand. + */ + if (Number(currId[0]) == Number(subgoalId) && currId.length > 1) { //console.log("showing ", currId); $(this).show(); } @@ -282,9 +364,11 @@ function sideSubgoalExpandy (subgoalId, whatToDo) { sideList.find('#sideSubgoalImg' + subgoalId).attr("src", arrowSRC); sideList.children().each(function () { var currId = (this.getAttribute('supercoolattr')); - /*If the first part of the ID matches the subgoal number and the length of the ID - is longer than 1, it's an action to collapse*/ - if ( Number(currId[0]) == Number(subgoalId) && currId.length > 1 ) { + /** + * If the first part of the ID matches the subgoal number and the + * length of the ID is longer than 1, it's an action to collapse. + */ + if (Number(currId[0]) == Number(subgoalId) && currId.length > 1) { //console.log("hiding ", currId); $(this).hide(); } @@ -296,7 +380,10 @@ function sideSubgoalExpandy (subgoalId, whatToDo) { else { //Toggle based on stateVar //Find the stateVar - var stateVar = Number(sidebarBody().find('#sideSubgoal' + subgoalId).attr("stateVar")); + var stateVar = + Number(sidebarBody() + .find('#sideSubgoal' + subgoalId) + .attr("stateVar")); //console.log('stateVar', stateVar); //If it's collapsed (stateVar == 0), expand and set the stateVar to 1 @@ -306,12 +393,16 @@ function sideSubgoalExpandy (subgoalId, whatToDo) { sideList.find('#sideSubgoalImg' + subgoalId).attr("src", arrowSRC); sideList.children().each(function () { var currId = (this.getAttribute('supercoolattr')); - /*If the first part of the ID matches the subgoal number and the length of the ID - is longer than 1, it's an action to expand*/ - if ( Number(currId[0]) == Number(subgoalId) && currId.length > 1 ) { - //console.log("showing ", currId); - $(this).show(); - } + /** + * If the first part of the ID matches the subgoal number and + * the length of the ID is longer than 1, it's an action to + * expand. + */ + if (Number(currId[0]) == Number(subgoalId) && + currId.length > 1) { + //console.log("showing ", currId); + $(this).show(); + } }); sidebarBody().find('#sideSubgoal' + subgoalId).attr("stateVar", 1); } @@ -323,18 +414,22 @@ function sideSubgoalExpandy (subgoalId, whatToDo) { sideList.find('#sideSubgoalImg' + subgoalId).attr("src", arrowSRC); sideList.children().each(function () { var currId = (this.getAttribute('supercoolattr')); - /*If the first part of the ID matches the subgoal number and the length of the ID - is longer than 1, it's an action to collapse*/ - if ( Number(currId[0]) == Number(subgoalId) && currId.length > 1 ) { - //console.log("hiding ", currId); - $(this).hide(); + /** + * If the first part of the ID matches the subgoal number + * and the length of the ID is longer than 1, it's an action + * to collapse. + */ + if (Number(currId[0]) == Number(subgoalId) && + currId.length > 1) { + //console.log("hiding ", currId); + $(this).hide(); } }); sidebarBody().find('#sideSubgoal' + subgoalId).attr("stateVar", 0); } else { - + // Empty else conditional. Was something meant to go here? } } @@ -342,7 +437,12 @@ function sideSubgoalExpandy (subgoalId, whatToDo) { } -//Loads the actionAnswers template with information about the passed in action, and puts it on the screen. +/** + * Function Name: loadActionAnswersTemplate + * Description: Loads the actionAnswers template with information about + * the passed in action and puts it on the screen. + * Parameters: actionId, subgoalId + */ function loadActionAnswersTemplate (actionId, subgoalId) { var subArr = getSubgoalArrayFromLocal(); @@ -368,35 +468,57 @@ function loadActionAnswersTemplate (actionId, subgoalId) { console.error("Error loading action answers template:", error); return; } - console.log("Action answers template appended successfully in loadActionAnswersTemplate."); + console.log("Action answers template appended successfully in \ + loadActionAnswersTemplate."); - // Add any additional logic here if needed after appending the template + /** + * Add any additional logic here if needed after appending the + * template. + */ var targetAction = subArr[subgoalId-1].actions[actionId-1]; //console.log("In loadAnswers", actionId, subgoalId, targetAction); sidebarBody().find('#answersActionNum').html(targetAction.id); sidebarBody().find('#answersActionName').html(targetAction.name); - var personaName = typeof getSessionPersonaDisplayName === "function" - ? getSessionPersonaDisplayName() - : (typeof getSessionPersonaName === "function" ? getSessionPersonaName() : "Abi"); - var personaPronoun = typeof getSessionPersonaPronoun === "function" ? getSessionPersonaPronoun() : "they"; - var personaPossessive = typeof getSessionPersonaPossessive === "function" ? getSessionPersonaPossessive() : "their"; - sidebarBody().find('#answersPreActionQuestion').html("Will " + personaName + " know what to do at this step?"); - sidebarBody().find('#answersPostActionQuestion').html( - "If " + personaName + " does the right thing, will " + personaPronoun + - " know that " + personaPronoun + " did the right thing and that " + - personaPronoun + " is making progress toward " + personaPossessive + " goal?" - ); + var personaName = typeof getSessionPersonaDisplayName === + "function" ? + getSessionPersonaDisplayName() + : (typeof getSessionPersonaName === "function" ? + getSessionPersonaName() : "Abi"); + var personaPronoun = typeof getSessionPersonaPronoun === + "function" ? + getSessionPersonaPronoun() : "they"; + var personaPossessive = typeof getSessionPersonaPossessive === + "function" ? + getSessionPersonaPossessive() : "their"; + sidebarBody() + .find('#answersPreActionQuestion') + .html("Will " + personaName + " know what to do at this step?"); + sidebarBody() + .find('#answersPostActionQuestion') + .html("If " + personaName + " does the right thing, will " + + personaPronoun + " know that " + personaPronoun + + " did the right thing and that " + personaPronoun + + " is making progress toward " + personaPossessive + + " goal?"); //Image stuff goes here - showMeTheStringYNM('#answersPreActionYNM', targetAction.preAction.ynm); - sidebarBody().find('#answersPreActionWhy').html(targetAction.preAction.why); - showMeTheStringFacets('#answersPreActionFacets', targetAction.preAction.facetValues); + showMeTheStringYNM('#answersPreActionYNM', + targetAction.preAction.ynm); + sidebarBody() + .find('#answersPreActionWhy') + .html(targetAction.preAction.why); + showMeTheStringFacets('#answersPreActionFacets', + targetAction.preAction.facetValues); - showMeTheStringYNM('#answersPostActionYNM', targetAction.postAction.ynm); - sidebarBody().find('#answersPostActionWhy').html(targetAction.postAction.why); - showMeTheStringFacets('#answersPostActionFacets', targetAction.postAction.facetValues); + showMeTheStringYNM('#answersPostActionYNM', + targetAction.postAction.ynm); + sidebarBody() + .find('#answersPostActionWhy') + .html(targetAction.postAction.why); + showMeTheStringFacets('#answersPostActionFacets', + targetAction.postAction.facetValues); }); @@ -405,8 +527,12 @@ function loadActionAnswersTemplate (actionId, subgoalId) { } -/* Iterates through the passed YNM object to see which values are true -and puts the right string on the answers template in the passed id. */ +/** + * Function Name: showMeTheStringYNM + * Description: Iterates through the passed YNM object to see which values are true + * and puts the right string on the answers template in the passed id. + * Parameters: targetId, targetObj + */ function showMeTheStringYNM (targetId, targetObj) { var myString = ""; @@ -417,7 +543,10 @@ function showMeTheStringYNM (targetId, targetObj) { if (propsFound == 0) { myString = myString.concat(prop); } - //concatenates the strings after the first string separated by a comma + /** + * Concatenates the strings after the first string + * separated by a comma. + */ else { myString = myString.concat(", ", prop); } @@ -428,8 +557,13 @@ function showMeTheStringYNM (targetId, targetObj) { } -/*Iterates through the passed facets object to see which values are true - and puts the right string on the answers template in the passed id. */ +/** + * Function Name: showMeTheStringFacets + * Description: Iterates through the passed facets object to see which + * values are true and puts the right string on the answers template + * in the passed id. + * Parameters: targetId, targetObj + */ function showMeTheStringFacets (targetId, targetObj) { var labels = typeof getSelectedFacetLabels === "function" ? getSelectedFacetLabels(targetObj, typeof getSessionState === "function" ? getSessionState() : null) @@ -439,9 +573,13 @@ function showMeTheStringFacets (targetId, targetObj) { } -// after setting up persona, subgoal the walkthrough functions start here - -//helper function to remove onclick = not used anywhere in the code atm +/** + * Function Name: + * Description: Helper function to remove onclick. Currently not used + * anywhere in the code, but intended that after setting up the + * persona and subgoal, the walkthrough functions start here. + * Parameters: checkboxId, textboxId + */ function toggleTextbox(checkboxId, textboxId) { const checkbox = document.getElementById(checkboxId); const textbox = document.getElementById(textboxId);