/
randomizer.js
194 lines (169 loc) · 18.7 KB
/
randomizer.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
var buttonIDs = ["academicsB", "financesB", "personalInfoB", "classButtonB", "holdsB", "toDoB", "enrollmentB", "recordsB"];
var sectionIDs = ["academics", "finances", "personalInfo", "classButton", "holds", "toDo", "enrollment", "records"];
var buttonText = ["Academics", "Finances", "Personal Information", "Class Button", "Holds", "To Do List", "Enrollment", "Records"]; //text that goes in the buttons
let htmlRules = {
'origin': ['#rowColumns#', '<div class="row">#rowColumns#</div><div class="row">#rowColumns#</div>', '<div class="row">#rowColumns#</div><div class="row">#rowColumns#</div><div class="row">#rowColumns#</div>'],
'rowColumns': ['<div class="col-lg-7 col-xs-7" >#leftStyleColumn#</div><div class="col-lg-1 col-xs-1"></div><div class="col-lg-3 col-xs-3">#rightStyleColumn#</div>', '<div class="col-lg-3 col-xs-3" >#leftStyleColumn#</div><div class="col-lg-1 col-xs-1"></div><div class="col-lg-7 col-xs-7" >#rightStyleColumn#</div>', '<div class="col-lg-5 col-xs-5" >#leftStyleColumn#</div><div class="col-lg-1 col-xs-1"></div><div class="col-lg-5 col-xs-5" >#rightStyleColumn#</div>', '<div class="col-lg-3 col-xs-3" >#leftStyleColumn#</div><div class="col-lg-1 col-xs-1"></div><div class="col-lg-3 col-xs-3">#rightStyleColumn#</div><div class="col-lg-1 col-xs-1"></div><div class="col-lg-3 col-xs-3">#leftStyleColumn#</div>'],
'leftStyleColumn': ['#sections# #sections# #sections#'],
'rightStyleColumn': ['#sections#<div class=\"vertSpacer\"></div>#sections#<div class=\"vertSpacer\"></div>#sections#<div class=\"vertSpacer\"></div>#sections#<div class=\"vertSpacer\"></div>#sections#'],
'sections': ['#classButton#', '#holds#', '#toDo#', '#enrollment#', '#records#', '#academics#', '#personalInfo#', '#finances#'],
'classButton': ['<div id=\"classButton\"><div class=\"border\"><h5 class=\"button\">SEARCH FOR CLASSES</h5></div></div><div class=\"vertSpacer\"></div>'],
'holds': ['<div id=\"holds\"><table class=\"schedule\"><tr class=\"notSchedule\"><th class=\"box\"><img src=\"arrow.png\">Holds</th><th class=\"box\"></th></tr><tr class=\"boxHold\"><td class=\"box\">No Holds</td><td class=\"box\"></td></tr></table></div>'],
'toDo': ['<div id=\"toDo\"><table class=\"schedule\"><tr class=\"notSchedule\"><th class=\"box\"><img src=\"arrow.png\">To Do List</th><th class=\"box\"></th></tr><tr class=\"box\"><td class=\"boxLink\">Authorization to Release Info</td><td class=\"box\"></td></tr><tr class=\"box\"><td class=\"boxSpacer\"></td><td class=\"boxSpacer\"></td></tr><tr class=\"box\"><td class=\"boxSpacer\"></td><td class=\"boxEnder\">more<img src=\"arrow3.png\"></td></tr></table></div>'],
'enrollment': ['<div id=\"enrollment\"><table class=\"schedule\"><tr class=\"notSchedule\"><th class=\"box\"><img src=\"arrow.png\">Enrollment Dates</th><th class=\"box\"></th></tr><tr class=\"box\"><td class=\"boxDescriptor\">Enrollment Appointment</td><td class=\"box\"></td></tr><tr class=\"box\"><td class=\"box\">You may begin enrolling for the 2018 Winter Quarter Regular Academic Session session on November 27, 2017</td> <td class=\"boxSpacer\"></td></tr><tr class=\"box\"><td class=\"boxSpacer\"></td><td class=\"boxEnder\">details<img src=\"arrow3.png\"></td></tr></table></div>'],
'records': ['<div id=\"records\"><table class=\"schedule\"><tr class=\"notSchedule\"><th class=\"box\"><img src=\"arrow.png\">Student Records and Enrollment</th><th class=\"box\"></th></tr><tr class=\"box\"><td class=\"boxLink\">California Voter Registration</td><td class=\"box\"></td></tr></table></div>'],
'academics': ['<div class=\"row\" id=\"academics\"><div class=\"col-lg-12 col-xs-12\" id=\"box\"><h4 class=\"box\"><img src=\"arrow.png\">Academics</h4>#academicsColumns#</div></div>'],
'academicsContent': ['#academicsLinks#', '<div class=\"vertSpacer\"></div>', '<div class=\"row\"><div class=\"col-lg-8 col-xs-8\"><div class=\"row\" id=\"dropdown\"><div class=\"col-lg-9 col-xs-9\"><p class=\"box\">more links...</p></div><div class=\"col-lg-1 col-xs-1\"><img class=\"arrow2\" src=\"arrow2.png\"></div></div></div><div class=\"col-lg-1 col-xs-1\"><img src=\"go.png\"></div></div>', '<div class=\"row\" id=\"dropdown\"><div class=\"col-lg-4 col-xs-4\"><p>#academicsImg##academicsImgLabel#</p></div><div class=\"col-lg-3 col-xs-3\"><p>#academicsImg##academicsImgLabel#</p></div></div>', '<h5 class=\"box\">This Week\'s Schedule</h5>', '<table class=\"schedule\"><tr class=\"schedule\"><th class=\"schedule\"></th><th class=\"schedule\">Class</th><th class=\"schedule\">Schedule</th></tr><tr class=\"schedule\"><td class=\"schedule\">#academicsImg#</td><td class=\"schedule\">#academicsClasses#</td><td class=\"schedule\">#academicSched#</td></tr><tr class=\"schedule\"><td class=\"schedule\">#academicsImg#</td><td class=\"schedule\">#academicsClasses#</td><td class=\"schedule\">#academicSched#</td></tr><tr class=\"schedule\"><td class=\"schedule\">#academicsImg#</td><td class=\"schedule\">#academicsClasses#</td><td class=\"schedule\">#academicSched#</td></tr><tr class=\"schedule\"><td class=\"schedule\">#academicsImg#</td><td class=\"schedule\">#academicsClasses#</td><td class=\"schedule\">#academicSched#</td></tr><tr class=\"schedule\"><td class=\"schedule\">#academicsImg#</td><td class=\"schedule\">#academicsClasses#</td><td class=\"schedule\">#academicSched#</td></tr></table>', '<p class=\"ender\">weekly schedule<img src=\"arrow3.png\"></p>', '<p class=\"ender\">enrollment schedule<img src=\"arrow3.png\"></p>'],
'academicsContentAmount': ['#academicsContent# #academicsContent# #academicsContent#', '#academicsContent# #academicsContent# #academicsContent# #academicsContent#'],
'academicsColumns': ['<div class=\"col-lg-4 col-xs-4\">#academicsContentAmount#</div><div class=\"col-lg-8 col-xs-8\">#academicsContentAmount#</div>', '<div class=\"col-lg-2 col-xs-2\">#academicsContentAmount#</div><div class=\"col-lg-10 col-xs-10\">#academicsContentAmount#</div>', '<div class=\"col-lg-6 col-xs-6\">#academicsContentAmount#</div><div class=\"col-lg-6 col-xs-6\">#academicsContentAmount#</div>', '<div class=\"col-lg-10 col-xs-10\">#academicsContentAmount#</div><div class=\"col-lg-2 col-xs-2\">#academicsContentAmount#</div>', '<div class=\"col-lg-8 col-xs-8\">#academicsContentAmount#</div><div class=\"col-lg-4 col-xs-4\">#academicsContentAmount#</div>', '<div class=\"col-lg-4 col-xs-4\">#academicsContentAmount#</div><div class=\"col-lg-4 col-xs-4\">#academicsContentAmount#</div><div class=\"col-lg-4 col-xs-4\">#academicsContentAmount#</div>', '<div class=\"col-lg-3 col-xs-3\">#academicsContentAmount#</div><div class=\"col-lg-3 col-xs-3\">#academicsContentAmount#</div><div class=\"col-lg-3 col-xs-3\">#academicsContentAmount#</div>', '<div class=\"col-lg-3 col-xs-3\">#academicsContentAmount#</div><div class=\"col-lg-3 col-xs-3\">#academicsContentAmount#</div><div class=\"col-lg-3 col-xs-3\">#academicsContentAmount#</div><div class=\"col-lg-3 col-xs-3\">#academicsContentAmount#</div>', '<div class=\"col-lg-2 col-xs-2\">#academicsContentAmount#</div><div class=\"col-lg-2 col-xs-2\">#academicsContentAmount#</div><div class=\"col-lg-2 col-xs-2\">#academicsContentAmount#</div><div class=\"col-lg-2 col-xs-2\">#academicsContentAmount#</div><div class=\"col-lg-2 col-xs-2\">#academicsContentAmount#</div><div class=\"col-lg-2 col-xs-2\">#academicsContentAmount#</div>'],
'academicsLinks': ['<div class=\"links\">#academicsLink# #academicsLink# #academicsLink# #academicsLink# #academicsLink# #academicsLink#</div>'],
'academicsLinkContent': ['Search', 'Plan', 'Enroll', 'Grades', 'My Academics', 'My Scheduler'],
'academicsLink': ['<p class=\"link\">#academicsLinkContent#</p>', '<p class=\"bigLink\">#academicsLinkContent#</p>'],
'academicsImg': ['<img src=\"calendar.png\">', '<img src=\"computerBook.png\">'],
'academicsImgLabel': ['URL', 'Deadlines'],
'academicsClasses': ['CMPM 148-01 LEC(22864)', 'CMPM 170-01 LEC(22917)', 'CMPM 170-01G DIS(22924)', 'CMPM 179-01 LEC(23812)', 'TIM 198F-01 IND(17347)'],
'academicSched': ['MoWeFr 4:00 PM - 5:05PM Merrill Acad 102', 'TuTh 3:20 PM - 4:55PM Kresge Clrm 321', 'Fr 10:40 AM - 11:45AM Soc Sci 2 137', 'MoWeFr 2:40 PM - 3:45PM Kresge Clrm 327', 'Room: TBA'],
'personalInfo': ['<div class=\"row\" id=\"personalInfo\"><div class=\"col-lg-12 col-xs-12\" id=\"box\"><h4 class=\"box\"><img src=\"arrow.png\">Personal Information</h4>#personalInfoColumns#</div></div>'],
'personalInfoContent': ['#personalInfoLinks#', '<div class=\"vertSpacer\"></div>', '<div class=\"row\"><div class=\"col-lg-8 col-xs-8\"><div class=\"row\" id=\"dropdown\"><div class=\"col-lg-9 col-xs-9\"><p class=\"box\">more links...</p></div><div class=\"col-lg-1 col-xs-1\"><img class=\"arrow2\" src=\"arrow2.png\"></div></div></div><div class=\"col-lg-1 col-xs-1\"><img src=\"go.png\"></div></div>', '<div class=\"col-lg-8 col-xs-8\"><table class=\"notSchedule\"><tr class=\"notSchedule\"><th class=\"notSchedule\">Contact Information</th><th class=\"notSchedule\"></th></tr><tr class=\"notSchedule\"><td class=\"link\">Mailing Address</td><td class=\"link\">Billing Address</td></tr><tr class=\"notSchedule\"><td class=\"notSchedule\">1156 High St, Santa Cruz, CA 95064</td><td class=\"notSchedule\">None</td></tr><tr class=\"notSchedule\"><td class=\"link\">Cell Phone</td><td class=\"link\">Campus Email Address</td></tr><tr class=\"notSchedule\"><td class=\"notSchedule\">None</td><td class=\"notSchedule\">chancellor@ucsc.edu</td></tr></table></div>'],
'personalInfoContentAmount': ['#personalInfoContent# #personalInfoContent# #personalInfoContent#', '#personalInfoContent# #personalInfoContent# #personalInfoContent# #personalInfoContent#'],
'personalInfoColumns': ['<div class=\"col-lg-4 col-xs-4\">#personalInfoContentAmount#</div><div class=\"col-lg-8 col-xs-8\">#personalInfoContentAmount#</div>', '<div class=\"col-lg-8 col-xs-8\">#personalInfoContentAmount#</div><div class=\"col-lg-4 col-xs-4\">#personalInfoContentAmount#</div>', '<div class=\"col-lg-6 col-xs-6\">#personalInfoContentAmount#</div><div class=\"col-lg-6 col-xs-6\">#personalInfoContentAmount#</div>', '<div class=\"col-lg-4 col-xs-4\">#personalInfoContentAmount#</div><div class=\"col-lg-4 col-xs-4\">#personalInfoContentAmount#</div><div class=\"col-lg-4 col-xs-4\">#personalInfoContentAmount#</div>'],
'personalInfoLinks': ['<div class=\"links\">#personalInfoLink# #personalInfoLink# #personalInfoLink# #personalInfoLink# #personalInfoLink# #personalInfoLink#</div>'],
'personalInfoLink': ['<p class=\"link\">#personalInfoLinkContent#</p>', '<p class=\"bigLink\">#personalInfoLinkContent#</p>'],
'personalInfoLinkContent': ['Names', 'Private Policy', 'Mailing Address', 'Cell Phone', 'Billing Address', 'Campus Email Address'],
'finances': ['<div class=\"row\" id=\"finances\"><div class=\"col-lg-12 col-xs-12\" id=\"box\"><h4 class=\"box\"><img src=\"arrow.png\">Finances</h4>#financesColumns#</div></div>'],
'financesContent': ['#financesLinks#', '<div class=\"vertSpacer\"></div>', '<div class=\"row\"><div class=\"col-lg-8 col-xs-8\"><div class=\"row\" id=\"dropdown\"><div class=\"col-lg-9 col-xs-9\"><p class=\"box\">more links...</p></div><div class=\"col-lg-1 col-xs-1\"><img class=\"arrow2\" src=\"arrow2.png\"></div></div></div><div class=\"col-lg-1 col-xs-1\"><img src=\"go.png\"></div></div>', '<div class=\"col-lg-8 col-xs-8\"><table class=\"notSchedule\"><tr class=\"notSchedule\"><th class=\"notSchedule\">Account Summary</th><th class=\"notSchedule\"></th></tr><tr class=\"notSchedule\"><td class=\"descriptor\">You owe 6,969.69</td><td class=\"link\">View Charges Due Date</td></tr><tr class=\"notSchedule\"><td class=\"vertSpacer\"></td><td class=\"vertSpacer\"></td></tr><tr class=\"notSchedule\"><th>Currency is US Dollars</th><th></th></table></div>'],
'financesContentAmount': ['#financesContent# #financesContent# #financesContent#', '#financesContent# #financesContent# #financesContent# #financesContent# #financesContent#'],
'financesColumns': ['<div class=\"col-lg-4 col-xs-4\">#financesContentAmount#</div><div class=\"col-lg-8 col-xs-8\">#financesContentAmount#</div>', '<div class=\"col-lg-8 col-xs-8\">#financesContentAmount#</div><div class=\"col-lg-4 col-xs-4\">#financesContentAmount#</div>', '<div class=\"col-lg-4 col-xs-4\">#financesContentAmount#</div><div class=\"col-lg-4 col-xs-4\">#financesContentAmount#</div><div class=\"col-lg-4 col-xs-4\">#financesContentAmount#</div>'],
'financesLinks': ['<div class=\"links\">#financesLink# #financesLink# #financesLink# #financesLink#</div>'],
'financesLinkContent': ['Account Inquiry', 'View Financial Aid', 'Accept/Decline Financial Aid', 'Report Other Financial Aid', 'Payment Estimator'],
'financesLink': ['<p class=\"link\">#financesLinkContent#</p>'],
}
let cssRules = {
'font-family': ['Impact', '\"Comic Sans MS\"', '\"Lucida Console\"', '\'Gloria Hallelujah\', cursive', '\'Bonbon\', cursive'],
'text-align': ['left', 'right', 'center', 'justify', 'initial', 'inherit'],
'color':['#hexDigit##hexDigit##hexDigit##hexDigit##hexDigit##hexDigit#'],
'background-color':['#hexDigit##hexDigit##hexDigit##hexDigit##hexDigit##hexDigit#'],
'hexDigit':['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'],
'font-size':['#size# px'],
'sizes':['12','13','14','15','16','17','18','19','20','21','22','23','24'],
'origin': ['font-family text-align color background-color font-size']
}
function htmlRedo() {
let htmlGrammar = tracery.createGrammar(htmlRules);
$('#ContentRow').empty();
$('#ContentRow').append(htmlGrammar.flatten('#origin#'));
}
//should scramble only html section that has class
function htmlRedoSection(sectionClass) {
let htmlGrammar = tracery.createGrammar(htmlRules);
$('.' + sectionClass + '').empty();
let sectionType = "";
for (let i = 0; i < sectionIDs.length; i++) {
//console.log(sectionClass+"looking for in "+sectionIDs[i]+": "+sectionIDs[i].search(sectionClass));
if (sectionClass.search(sectionIDs[i]) != -1) {//sectionIDs[i].length){
sectionType = sectionIDs[i];
break;
}
}
$('.' + sectionClass).append(htmlGrammar.flatten('#' + sectionType + '#'));
}
//gives a section a unique class anme
function markSection(sectionID, index) {
let sections = $('[id=' + sectionID + ']');
let section = sections[index];
let newClassName = "" + sectionID + index;
section.className += " ";
section.className += newClassName;
let children = $('.' + newClassName + ' *').addClass(newClassName);
return newClassName;
}
cssRedo = function (t) {
let cssGrammar = tracery.createGrammar(cssRules);
let tags = ["h5", "h4", "p", "h6", "tr", "td", "th",
"body", "hr", "h4.title", "h4.box", "h5.box", "h5.button", "p.link", "p.bigLink", "p.linkDescriptor", "p.ender",
"div.links", "div.vertSpacer", "div#dropdown", "div.border", "img.arrow2", "table.schedule", "table.notSchedule",
"table.box", "tr.schedule", "tr.box", "tr.boxHolder", "th.schedule", "th.notSchedule", "th.box", "td.schedule",
"td.vertSpacer", "td.descriptor", "td.link", "td.box", "td.boxLink", "td.boxSpacer", "td.boxEnder", "td.boxDescriptor",
"button#reRollB", "button#academicsB", "button#financesB", "button#personalInfoB", "button#classButtonB", "button#holdsB", "button#toDoB", "button#enrollmentB", "button#recordsB"
];
if (t == "") {
tags.forEach(function (tag) {
var toChange = cssGrammar.flatten("#origin#").split(" ");
for (let i = 0; i < toChange.length; i++) {
var property = toChange[i];
if (property == 'color' || property == 'background-color') {
$(tag).css(property, '#'+cssGrammar.flatten("#" + property + "#"));
} else {
$(tag).css(property, cssGrammar.flatten("#" + property + "#"));
}
}
});
}
else {
tags.forEach(function (tag) {
var toChange = cssGrammar.flatten("#origin#").split(" ");
for (let i = 0; i < toChange.length; i++) {
var property = toChange[i];
if (property == 'color' || property == 'background-color') {
$('.' + t + ' ' + tag).css(property, '#'+cssGrammar.flatten("#" + property + "#")); } else {
$('.' + t + ' ' + tag).css(property, cssGrammar.flatten("#" + property + "#"));
}
}
});
}
}
window.onload = function () {
document.getElementById("reRollB").addEventListener("click", function () {
htmlRedo();
resetButtons();
cssRedo("");
})
resetButtons();
}
function resetButtons() {
let numButtons = {};
//Remove existing buttons
for (let i = 0; i < buttonIDs.length; i++) {
let buttons = $("[id=" + buttonIDs[i] + "]");
for (let j = 0; j < buttons.length; j++) {
buttons.remove();
}
numButtons[sectionIDs[i]] = 0;
}
let children = $("#contentRow *");
for(let i=0; i < children.length; i++){
for(let j=0; j < sectionIDs.length; j++){
if (children[i].id == sectionIDs[j]) {
let elements = $("[id=" + sectionIDs[j] + "]");
if (numButtons[sectionIDs[j]] == 0) {
$('#buttons').append('<button id="' + buttonIDs[j] + '">' + buttonText[j] + '</button>');
} else {
let displayedNum = numButtons[sectionIDs[j]] + 1;
$('#buttons').append('<button id="' + buttonIDs[j] + '">' + buttonText[j] + ' ' + displayedNum + '</button>');
}
let buttonsOfType = $('[id="' + buttonIDs[j] + '"]');
let newClassName = markSection(sectionIDs[j], buttonsOfType.length-1);
buttonsOfType[buttonsOfType.length-1].addEventListener("click", function () {
htmlRedoSection(newClassName);
cssRedo(newClassName);
});
numButtons[sectionIDs[j]]++;
}
}
}
}
//https://www.w3schools.com/howto/howto_js_navbar_sticky.asp
// When the user scrolls the page, execute myFunction
window.onscroll = function () { myFunction() };
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}