Skip to content

Commit 3ea762b

Browse files
roseg31roseg31
committed
Fix facet pop up windows.
Fixed facet popups so that they open to show the info of the selected persona. Created a new function to handle setting on clicks for pop up links. Also updated styles on facet pop ups - updated the Pats and Tim to match the Abby pop up color scheme. Also updated exit button to say 'save and exit'.
1 parent d90e54c commit 3ea762b

18 files changed

+78
-113
lines changed

‎scripts/action.js‎

Lines changed: 51 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,53 @@ var personaName = localStorage.getItem("personaName");
1111
if (personaName !== null ) {personaName = personaName.slice(1, personaName.length-1);}
1212
else { personaName = "abby"; }
1313

14+
function setFacetPopups(personaName) {
15+
if(personaName === "Custom"){
16+
17+
}
18+
else {
19+
var lowercaseName = personaName.toLowerCase();
20+
//set functionality for motivation pop up info window
21+
$(".MTrigger").unbind("click").click(function () {
22+
addToolTip(lowercaseName+"MToolTip", personaName);
23+
/*$('#abbyMSeeMOAR').off('click').on('click', function () {
24+
var isOpen = $(this).attr("stateVar");
25+
26+
//The "see more" is expanded and needs to be closed
27+
if (isOpen == 0) {
28+
$("#abbyMPreview").hide();
29+
$("#abbyMComplete").show();
30+
$("#abbyMSeeMOAR").html("See less");
31+
$(this).attr("stateVar", 1);
32+
} else {
33+
$("#abbyMPreview").show();
34+
$("#abbyMComplete").hide();
35+
$("#abbyMSeeMOAR").html("See more...");
36+
$(this).attr("stateVar", 0);
37+
}
38+
39+
});*/
40+
});
41+
//set up other info pop ups
42+
$(".IPSTrigger").unbind("click").click(function () {
43+
addToolTip(lowercaseName+"IPSToolTip", personaName);
44+
45+
});
46+
$(".SETrigger").unbind("click").click(function () {
47+
addToolTip(lowercaseName+"SEToolTip", personaName);
48+
49+
});
50+
$(".RTrigger").unbind("click").click(function () {
51+
addToolTip(lowercaseName+"RToolTip", personaName);
52+
53+
});
54+
$(".TTrigger").unbind("click").click(function () {
55+
addToolTip(lowercaseName+"TToolTip", personaName);
56+
57+
});
58+
}
59+
}
60+
1461
/*
1562
* Function: preActionQuestions
1663
* Description: This function handles the 'preaction questions' in the pop up window
@@ -61,48 +108,9 @@ function preActionQuestions(el){
61108
});
62109

63110
//Set up links by checkboxes to show info popups
64-
//currently hard coded with Abby name, not sure how this will impact when selecting other personas but suspect things might break.
111+
//currently hard coded with Abby name, not sure how this will impact when selecting other personas but suspect things might break.
65112
//motivation info
66-
67-
//set functionality for motivation pop up info window
68-
$(".abbyMTrigger").unbind( "click" ).click(function (){
69-
addToolTip("abbyMToolTip", "Abby");
70-
$('#abbyMSeeMOAR').off('click').on('click', function() {
71-
var isOpen = $(this).attr("stateVar");
72-
73-
//The "see more" is expanded and needs to be closed
74-
if (isOpen == 0) {
75-
$("#abbyMPreview").hide();
76-
$("#abbyMComplete").show();
77-
$("#abbyMSeeMOAR").html("See less");
78-
$(this).attr("stateVar", 1);
79-
}
80-
else{
81-
$("#abbyMPreview").show();
82-
$("#abbyMComplete").hide();
83-
$("#abbyMSeeMOAR").html("See more...");
84-
$(this).attr("stateVar", 0);
85-
}
86-
87-
});
88-
});
89-
//set up other info pop ups
90-
$(".abbyIPSTrigger").unbind( "click" ).click(function(){
91-
addToolTip("abbyIPSToolTip", "Abby");
92-
93-
});
94-
$(".abbySETrigger").unbind( "click" ).click(function(){
95-
addToolTip("abbySEToolTip", "Abby");
96-
97-
});
98-
$(".abbyRTrigger").unbind( "click" ).click(function(){
99-
addToolTip("abbyRToolTip", "Abby");
100-
101-
});
102-
$(".abbyTTrigger").unbind( "click" ).click(function(){
103-
addToolTip("abbyTToolTip", "Abby");
104-
105-
});
113+
setFacetPopups(personaName);
106114
}
107115

108116
/*
@@ -184,51 +192,8 @@ function postActionQuestions(el){
184192
actionLoop(el);
185193
});
186194

187-
//set functionality for motivation pop up info window
188-
$(".abbyMTrigger").unbind( "click" ).click(function (){
189-
addToolTip("abbyMToolTip", "Abby");
190-
$('#abbyMSeeMOAR').off('click').on('click', function() {
191-
var isOpen = $(this).attr("stateVar");
192-
193-
//The "see more" is expanded and needs to be closed
194-
if (isOpen == 0) {
195-
$("#abbyMPreview").hide();
196-
$("#abbyMComplete").show();
197-
$("#abbyMSeeMOAR").html("See less");
198-
$(this).attr("stateVar", 1);
199-
}
200-
else{
201-
$("#abbyMPreview").show();
202-
$("#abbyMComplete").hide();
203-
$("#abbyMSeeMOAR").html("See more...");
204-
$(this).attr("stateVar", 0);
205-
}
206-
207-
});
208-
});
209-
//set up other info pop ups
210-
$(".abbyIPSTrigger").unbind( "click" ).click(function(){
211-
addToolTip("abbyIPSToolTip", "Abby");
212-
213-
});
214-
$(".abbySETrigger").unbind( "click" ).click(function(){
215-
addToolTip("abbySEToolTip", "Abby");
216-
217-
});
218-
$(".abbyRTrigger").unbind( "click" ).click(function(){
219-
addToolTip("abbyRToolTip", "Abby");
220-
221-
});
222-
$(".abbyTTrigger").unbind( "click" ).click(function(){
223-
addToolTip("abbyTToolTip", "Abby");
224-
225-
});
226-
$("#postActionBack").unbind( "click" ).click(function(){
227-
$(el).find("#postActionTemplate").hide();
228-
$(el).find("#doActionPromptTemplate").show();
229-
setStatusToFalse("idealActionPerformed");
230-
doActionPrompt(el);
231-
});
195+
//set functionality for facet pop up info window
196+
setFacetPopups(personaName);
232197
}
233198

234199
/*

‎templates/Patricia/patriciaIPSToolTip.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<html>
22
<body>
3-
<div style="height:20px; background-color:#999999;text-align:center;"> <span style="color:white;">Pat's Information Processing Style</span> <button id="patriciaIPSToolTipButton" class="closeToolTip" style="float:right; width:40px; height:20px;background-color:#D24726;font-color:white;"> &#10006 </button></div>
3+
<div style="height:20px; background-color:#4A96AD;text-align:center;"> <span style="color:white;">Pat's Information Processing Style</span> <button id="patriciaIPSToolTipButton" class="closeToolTip" style="float:right; width:70px; height:20px; background-color:#7D1935; color: white;" > Close </button></div>
44
<div id="patriciaIPSToolTip" style="margin:5px;">
55
<span id="patriciaIPSToolTipPreview" >Pat's <i>comprehensive information processing style</i> means that she tends to gather information about a problem before she starts to solve it. For instance, she might look up a tutorial.</span>
66
<span id="patriciaIPSToolTipComplete" hidden>

‎templates/Patricia/patriciaMToolTip.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<html>
22
<body>
3-
<div style="height:20px; background-color:#999999;text-align:center;"> <span style="color:white;">Pat's Motivation</span> <button id="patriciaMToolTipButton"class="closeToolTip" style="float:right; width:40px; height:20px;background-color:#D24726;font-color:white;"> &#10006 </button></div>
3+
<div style="height:20px; background-color:#4A96AD;text-align:center;"> <span style="color:white;">Pat's Motivation</span> <button id="patriciaMToolTipButton"class="closeToolTip" style="float:right; width:70px; height:20px; background-color:#7D1935; color: white;" > Close </button></div>
44
<div id="patriciaMToolTip" style="margin:5px;">
55
<span id="patriciaMToolTipPreview" >Pat learns new technologies when she needs to, and she's good with technology that she has experience with.</span>
66
<span id="patriciaMToolTipComplete" hidden>

‎templates/Patricia/patriciaRToolTip.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<html>
22
<body>
3-
<div style="height:20px; background-color:#999999;text-align:center;"> <span style="color:white;">Pat's Attitudes About Risk</span> <button id="patriciaRToolTipButton"class="closeToolTip" style="float:right; width:40px; height:20px;background-color:#D24726;font-color:white;"> &#10006 </button></div>
3+
<div style="height:20px; background-color:#4A96AD;text-align:center;"> <span style="color:white;">Pat's Attitudes About Risk</span> <button id="patriciaRToolTipButton"class="closeToolTip" style="float:right; width:70px; height:20px; background-color:#7D1935; color: white;" > Close </button></div>
44
<div id="patriciaRToolTip" style="margin:5px;">
55
<span id="patriciaRToolTipPreview" >Pat's risk-aversion leads her to mainly use software features that she is familiar with and to avoid features that she hasn't used before.</span>
66
<span id="patriciaRToolTipComplete" hidden>

‎templates/Patricia/patriciaSEToolTip.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<html>
22
<body>
3-
<div style="height:20px; background-color:#999999;text-align:center;"> <span style="color:white;">Pat's Computer Self-Efficacy</span> <button id="patriciaSEToolTipButton" class="closeToolTip" style="float:right; width:40px; height:20px;background-color:#D24726;font-color:white;"> &#10006 </button></div>
3+
<div style="height:20px; background-color:#4A96AD;text-align:center;"> <span style="color:white;">Pat's Computer Self-Efficacy</span> <button id="patriciaSEToolTipButton" class="closeToolTip" style="float:right; width:70px; height:20px; background-color:#7D1935; color: white;" > Close </button></div>
44
<div id="patriciaSEToolTip" style="margin:5px;">
55
<span id="patriciaSEToolTipPreview" > Pat's medium computer self efficacy means that she will persist through some challenges when using software for a reasonable amount of time. </span>
66
<span id="patriciaSEToolTipComplete" hidden>

‎templates/Patricia/patriciaTToolTip.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<html>
22
<body >
3-
<div id="BARkeryCroc" style="height:20px; background-color:#999999;text-align:center;"> <span style="color:white;">Pat's Attitudes Towards Tinkering</span><button id="patriciaTToolTipButton" class="closeToolTip" style="float:right; width:40px; height:20px;background-color:#D24726;font-color:white;"> &#10006 </button></div>
3+
<div id="BARkeryCroc" style="height:20px; background-color:#4A96AD;text-align:center;"> <span style="color:white;">Pat's Attitudes Towards Tinkering</span><button id="patriciaTToolTipButton" class="closeToolTip" style="float:right; width:70px; height:20px; background-color:#7D1935; color: white;" > Close </button></div>
44
<div id="patriciaTToolTip" style="padding:5px;" >
55
<span id="patriciaTToolTipPreview" >Pat will tinker and explore software features a bit, but if she doesn't think that she's getting closer to her goal, she will revert to familiar ways.</span>
66
<span id="patriciaTToolTipComplete" hidden>

‎templates/Patrick/patrickIPSToolTip.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<html>
22
<body>
3-
<div style="height:20px; background-color:#999999;text-align:center;"> <span style="color:white;">Pat's Information Processing Style</span> <button id="patrickIPSToolTipButton" class="closeToolTip" style="float:right; width:40px; height:20px;background-color:#D24726;font-color:white;"> &#10006 </button></div>
3+
<div style="height:20px; background-color:#4A96AD;text-align:center;"> <span style="color:white;">Pat's Information Processing Style</span> <button id="patrickIPSToolTipButton" class="closeToolTip" style="float:right; width:70px; height:20px; background-color:#7D1935; color: white;" > Close </button></div>
44
<div id="patrickIPSToolTip" style="margin:5px;">
55
<span id="patrickIPSToolTipPreview" >Pat's <i>comprehensive information processing style</i> means that he tends to gather information about a problem before he starts to solve it. For instance, he might look up a tutorial.</span>
66
<span id="patrickIPSToolTipComplete" hidden>

‎templates/Patrick/patrickMToolTip.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<html>
22
<body>
3-
<div style="height:20px; background-color:#999999;text-align:center;"> <span style="color:white;">Pat's Motivation</span> <button id="patrickMToolTipButton"class="closeToolTip" style="float:right; width:40px; height:20px;background-color:#D24726;font-color:white;"> &#10006 </button></div>
3+
<div style="height:20px; background-color:#4A96AD;text-align:center;"> <span style="color:white;">Pat's Motivation</span> <button id="patrickMToolTipButton" style="float:right; width:70px; height:20px; background-color:#7D1935; color: white;" > Close </button></div>
44
<div id="patrickMToolTip" style="margin:5px;">
55
<span id="patrickMToolTipPreview" >Pat learns new technologies when he needs to, and he's good with technology that he has experience with.</span>
66
<span id="patrickMToolTipComplete" hidden>

‎templates/Patrick/patrickRToolTip.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<html>
22
<body>
3-
<div style="height:20px; background-color:#999999;text-align:center;"> <span style="color:white;">Pat's Attitudes About Risk</span> <button id="patrickRToolTipButton"class="closeToolTip" style="float:right; width:40px; height:20px;background-color:#D24726;font-color:white;"> &#10006 </button></div>
3+
<div style="height:20px; background-color:#4A96AD;text-align:center;"> <span style="color:white;">Pat's Attitudes About Risk</span> <button id="patrickRToolTipButton"class="closeToolTip" style="float:right; width:70px; height:20px; background-color:#7D1935; color: white;" > Close </button></div>
44
<div id="patrickRToolTip" style="margin:5px;">
55
<span id="patrickRToolTipPreview" >Pat's risk-aversion leads him to mainly use software features that he is familiar with and to avoid features that he hasn't used before.</span>
66
<span id="patrickRToolTipComplete" hidden>

‎templates/Patrick/patrickSEToolTip.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<html>
22
<body>
3-
<div style="height:20px; background-color:#999999;text-align:center;"> <span style="color:white;">Pat's Computer Self-Efficacy</span> <button id="patrickSEToolTipButton" class="closeToolTip" style="float:right; width:40px; height:20px;background-color:#D24726;font-color:white;"> &#10006 </button></div>
3+
<div style="height:20px; background-color:#4A96AD;text-align:center;"> <span style="color:white;">Pat's Computer Self-Efficacy</span> <button id="patrickSEToolTipButton" class="closeToolTip" style="float:right; width:70px; height:20px; background-color:#7D1935; color: white;" > Close </button></div>
44
<div id="patrickSEToolTip" style="margin:5px;">
55
<span id="patrickSEToolTipPreview" > Pat's medium computer self efficacy means that he will persist through some challenges when using software for a reasonable amount of time. </span>
66
<span id="patrickSEToolTipComplete" hidden>

0 commit comments

Comments
 (0)