Skip to content

Commit

Permalink
Restructure the folder and add a css trick
Browse files Browse the repository at this point in the history 
Add a box shadow to controls container when the container is positioned
stuck.
  • Loading branch information
@whaliendev
whaliendev committed Sep 10, 2021
1 parent ca32d81 commit 1a97cc6
Show file tree
Hide file tree
Showing 4 changed files with 144 additions and 97 deletions.
4 changes: 4 additions & 0 deletions style.css → css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,10 @@
border: 1px solid #dddddd;
}

.x-controls-container.is-pinned{
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26);
}

.x-controls-container .x-show-info{
display: inline-block;
}
Expand Down
4 changes: 2 additions & 2 deletions content-script.js → js/content-script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@
* Ref: https://stackoverflow.com/questions/9515704/use-a-content-script-to-access-the-page-context-variables-and-functions
*/
const style = document.createElement('link');
style.href = chrome.runtime.getURL('style.css');
style.href = chrome.runtime.getURL('css/style.css');
style.rel = "stylesheet";
document.head.appendChild(style);

let script = document.createElement('script');
script.src = chrome.runtime.getURL('script.js');
script.src = chrome.runtime.getURL('js/script.js');

document.body.appendChild(script);
227 changes: 135 additions & 92 deletions script.js → js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,6 @@ $.ajaxSetup({
}
});

$(document).ajaxComplete(customDynamicUI);

/**
* 触发查询按钮click事件，获取全部成绩
*/
Expand All @@ -33,6 +31,8 @@ $(document).ajaxComplete(customDynamicUI);
$('#search_go').trigger('click');
})();

$(document).ajaxComplete(customDynamicUI);

/**
* 配置成绩表格选项框
*/
Expand Down Expand Up @@ -72,6 +72,8 @@ function customDynamicUI() {
});
if ($('#x-sel-all').length === 0) {
customStaticUI(catsList);
} else {
$('input[name="x-selbox"]').prop('checked', true);
}
sortScores();
}
Expand Down Expand Up @@ -123,7 +125,115 @@ function customStaticUI(catsList) {
</div>
</div>
</div>
`);
`);

// add shadow to controls container, when controls container is positioned stuck.
// https://css-tricks.com/how-to-detect-when-a-sticky-element-gets-pinned/
// https://stackoverflow.com/questions/16302483/event-to-detect-when-positionsticky-is-triggered
const headerInfo = $('.x-controls-container')[0];
const observer = new IntersectionObserver(
([e]) => e.target.classList.toggle('is-pinned', e.intersectionRatio < 1),
{
rootMargin: '-28px 0px 0px',
threshold: [1]
}
);
observer.observe(headerInfo);
}

/**
* 对返回成绩进行重新排序，添加每学期的信息显示栏
*/
function sortScores() {
let rows = $('table:eq(1)')
.find('tr:gt(0)')
.toArray()
.sort(comparator([1, 2, 5]));
rows.splice(0, 0, $('table:eq(1)').find('tr:eq(0)'));
$('table:eq(1)').children('tbody').empty().html(rows);

let time = ['', 0];
$('table:eq(1)')
.find('tr:gt(0)')
.each(function () {
let year = $(this).find('td:eq(1)').text();
let sem = parseInt($(this).find('td:eq(2)').text());
if (time[0] !== year || time[1] !== sem) {
let semGPA = calcSemGPA(year, sem);
$(this).before(`
<tr class="x-sem-row">
<td colspan="22" class="x-sem-info">
<strong class="x-info-block">
${year}学年&nbsp;&nbsp;第 ${sem} 学期&nbsp;&nbsp;&nbsp;&nbsp;
学分数：<span>${semGPA[0]}</span>&nbsp;&nbsp;&nbsp;&nbsp;
平均GPA：<span color>${semGPA[1]}</span>&nbsp;&nbsp;&nbsp;&nbsp;
平均成绩：<span>${semGPA[2]}</span>
</strong>
</td>
</tr>
`);
}
time = [year, sem];
if ($(this).index() % 2 === 0) {
$(this).addClass('x-alt');
}
});
updateAllScores();
bindEvents();
}

/**
* 绑定各控件事件
*/
function bindEvents() {
// 响应表格中的复选框
$('input[name="x-course-select"]').change(() => updateAllScores());

// 响应课程类别复选框
$('input[name="x-selbox"]').change((e) => {
const input = e.target;
$('table:eq(1) tr:gt(0)').each(function () {
if ($(this).find('td:eq(5)').text() === input.value) {
$(this)
.find('td:eq(3) input[name="x-course-select"]')
.prop('checked', input.checked);
}
});
updateAllScores();
});

// 全选/全不选，我也不知道这个意义是啥，但是李叶加了
$('#x-sel-all').click(() => {
if ($('input[name="x-course-select"]:checked').length === 0) {
$('input[name="x-course-select"]').prop('checked', true);
$('#x-sel-all').text('全不选');
} else {
$('input[name="x-course-select"]').prop('checked', false);
$('#x-sel-all').text('全选');
}
updateAllScores();
});

// 反选
$('#x-sel-rev').click(() => {
let checked = $('input[name="x-course-select"]:checked');
$('input[name="x-course-select"]:not(:checked)').prop('checked', true);
checked.prop('checked', false);
updateAllScores();
});

// 复原
$('#x-sel-revert').click(() => {
$('table:eq(1) tr:gt(0)').each(function () {
const score = parseFloat($(this).find('td:eq(7)').text());
if (score >= 60.0) {
$(this).find('td:eq(3) input:checkbox').prop('checked', true);
} else {
$(this).find('td:eq(3) input:checkbox').prop('checked', false);
}
});
updateAllScores();
});
}

/**
Expand All @@ -136,6 +246,11 @@ function getCellValue(row, index) {
return $(row).children('td').eq(index).text();
}

/**
* 根据传入的列索引数组，返回一个依次比较各列的比较器函数
* @param {Array} indexes 包含需要作为排序标准的列索引值，0-based, 顺序很重要
* @returns 返回一个comparator function
*/
function comparator(indexes) {
return function (a, b) {
let ans = 0;
Expand All @@ -155,6 +270,11 @@ function comparator(indexes) {
};
}

/**
* 计算传入课程的总学分数，平均GPA，平均分
* @param {number[][3]} scores 包含需要计算的每门课程的[学分，成绩，GPA]的float数组
* @returns 返回一个含三个元素的数组，分别对应总学分数，平均GPA，平均分
*/
function calcGPA(scores) {
let totalScore = 0,
totalCredits = 0,
Expand Down Expand Up @@ -183,6 +303,12 @@ function calcGPA(scores) {
return [totalCredits.toFixed(1), GPAMean.toFixed(3), scoreMean.toFixed(2)];
}

/**
* 计算某学年某学期的总学分数，平均GPA，平均分
* @param {string} year 学年
* @param {number} sem 整型数据，范围为[1, 3]，对应第几个学期
* @returns 返回一个含三个元素的数组，分别对应学年学期总学分数，平均GPA，平均分
*/
function calcSemGPA(year, sem) {
let scores = [];
$('table:eq(1) tr:gt(0)').each(function () {
Expand All @@ -206,6 +332,9 @@ function calcSemGPA(year, sem) {
return calcGPA(scores);
}

/**
* 更新头部（总）成绩信息
*/
function updateHeaderScores() {
let scores = [];
$('table tr:gt(0)').each(function () {
Expand All @@ -227,6 +356,9 @@ function updateHeaderScores() {
$('#x-average-score').text(info[2]);
}

/**
* 更新每学期的成绩信息
*/
function updateSemScores() {
let semCount = $('tr.x-sem-row').length;
for (let i = 0; i < semCount; i++) {
Expand Down Expand Up @@ -256,92 +388,3 @@ function updateAllScores() {
updateHeaderScores();
updateSemScores();
}

function sortScores() {
let rows = $('table:eq(1)')
.find('tr:gt(0)')
.toArray()
.sort(comparator([1, 2, 5]));
rows.splice(0, 0, $('table:eq(1)').find('tr:eq(0)'));
$('table:eq(1)').children('tbody').empty().html(rows);

let time = ['', 0];
$('table:eq(1)')
.find('tr:gt(0)')
.each(function () {
let year = $(this).find('td:eq(1)').text();
let sem = parseInt($(this).find('td:eq(2)').text());
if (time[0] !== year || time[1] !== sem) {
let semGPA = calcSemGPA(year, sem);
$(this).before(`
<tr class="x-sem-row">
<td colspan="22" class="x-sem-info">
<strong class="x-info-block">
${year}学年&nbsp;&nbsp;第 ${sem} 学期&nbsp;&nbsp;&nbsp;&nbsp;
学分数：<span>${semGPA[0]}</span>&nbsp;&nbsp;&nbsp;&nbsp;
平均GPA：<span color>${semGPA[1]}</span>&nbsp;&nbsp;&nbsp;&nbsp;
平均成绩：<span>${semGPA[2]}</span>
</strong>
</td>
</tr>
`);
}
time = [year, sem];
if ($(this).index() % 2 === 0) {
$(this).addClass('x-alt');
}
});
updateAllScores();
bindEvents();
}

function bindEvents() {
// 响应表格中的复选框
$('input[name="x-course-select"]').change(() => updateAllScores());

// 响应课程类别复选框
$('input[name="x-selbox"]').change((e) => {
const input = e.target;
$('table:eq(1) tr:gt(0)').each(function () {
if ($(this).find('td:eq(5)').text() === input.value) {
$(this)
.find('td:eq(3) input[name="x-course-select"]')
.prop('checked', input.checked);
}
});
updateAllScores();
});

// 全选/全不选，我也不知道这个意义是啥，但是李叶加了
$('#x-sel-all').click(() => {
if ($('input[name="x-course-select"]:checked').length === 0) {
$('input[name="x-course-select"]').prop('checked', true);
$('#x-sel-all').text('全不选');
} else {
$('input[name="x-course-select"]').prop('checked', false);
$('#x-sel-all').text('全选');
}
updateAllScores();
});

// 反选
$('#x-sel-rev').click(() => {
let checked = $('input[name="x-course-select"]:checked');
$('input[name="x-course-select"]:not(:checked)').prop('checked', true);
checked.prop('checked', false);
updateAllScores();
});

// 复原
$('#x-sel-revert').click(() => {
$('table:eq(1) tr:gt(0)').each(function () {
const score = parseFloat($(this).find('td:eq(7)').text());
if (score >= 60.0) {
$(this).find('td:eq(3) input:checkbox').prop('checked', true);
} else {
$(this).find('td:eq(3) input:checkbox').prop('checked', false);
}
});
updateAllScores();
});
}
6 changes: 3 additions & 3 deletions manifest.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,15 +27,15 @@
"https://jwgl.whu.edu.cn/cjcx/cjcx_cxDgXscj.html*"
],
"js": [
"content-script.js"
"js/content-script.js"
]
}
],
"web_accessible_resources": [
{
"resources": [
"script.js",
"style.css"
"js/script.js",
"css/style.css"
],
"matches": [
"https://jwgl.whu.edu.cn/*"
Expand Down

0 comments on commit 1a97cc6

Please sign in to comment.