Tocas-UI CK_Announcement

Prettify CK Announcement
换行
// ==UserScript==
// @name         Tocas-UI CK_Announcement
// @namespace    http://tampermonkey.net/
// @version      0.1.2
// @description  Prettify CK Announcement
// @author       oToToT
// @match        https://web.ck.tp.edu.tw/ann/*
// @match        http://web.ck.tp.edu.tw/ann/*
// @require      https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/i18n/datepicker.zh.min.js
// @grant        GM_addStyle
// ==/UserScript==

/* initialize */
if(location.protocol === 'http:'){
    location.protocol = 'https:'
}else{
    const AddStylesheet = async function(href){
        let script = document.createElement('link');
        script.setAttribute('href', href);
        script.setAttribute('rel','stylesheet');
        script.setAttribute('type', 'text/css');
        await document.head.appendChild(script);
    };
    const identify = new URL(location.href);
    const page_type = identify.pathname
    console.log("Using: "+page_type);
    if(page_type === "/ann/" || page_type==="/ann/index.php"){
        (async()=>{
            /* add scripts */
            await AddStylesheet("https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.css");
            await AddStylesheet("https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.min.css");
            GM_addStyle(`body{
background-color: rgb(243, 227, 203)
}
.ts.surrounded{
padding: 1.8em !important;
}`);
            /* my script */
            let anns = [];
            $("table:eq(1) tr:not(:eq(0))").each(function(){
                let obj = {};
                obj.level = $(this).find("td:eq(0)").text().trim();
                obj.title = $(this).find("td:eq(1)").text().trim();
                obj.origin = $(this).find("td:eq(2)").text().trim();
                obj.date = $(this).find("td:eq(3)").text().trim();
                obj.popularity = $(this).find("td:eq(4)").text().trim();
                obj.href = $(this).find('a').attr("href");
                anns.push(obj);
            });
            let htmlData = `<div class="ts fluid top link huge menu">
<div class="ts narrow container"><a class="item" href="/">台北市立建國高級中學公告系統</a><span class="item right"><a href="/ann/index.php">
        <button class="ts mini very compact basic button">列出全部</button></a></span></div>
</div>
<div class="ts narrow container surrounded">
<table class="ts attatched selectable striped celled table">
<thead>
<tr>
<th>標題</th>
<th>單位</th>
<th>日期</th>
<th>人氣</th>
</tr>
</thead>
<tbody>
${anns.map((ele)=>{
    let ret_str = "";
    if(ele.level === '普通'){
        ret_str += `<tr class="info indicated">
<!-- 普通-->`;
    }else if(ele.level === '重要'){
        ret_str += `<tr class="primary indicated">
<!-- 重要-->`;
    }else if(ele.level === '急件'){
        ret_str += `<tr class="negative indicated">
<!-- 急件-->`;
    }else{ return `<tr><td>Parsing Failed</td><td>Parsing Failed</td><td>Parsing Failed</td><td>Parsing Failed</td></tr>`;}
    ret_str += `
<td><a href="${ele.href}">${ele.title}</a></td>
<td>${ele.origin}</td>
<td>${ele.date}</td>
<td>${ele.popularity}</td>
</tr>`
    return ret_str;
}).join('')}
</tbody>
</table>
<div class="ts horizontal list">
<a class="item${(typeof $("a:contains('上一頁')").attr('href') === 'undefined')?" disabled":""}" href="${$("a:contains('上一頁')").attr('href')}">上一頁</a>
<a class="item${(typeof $("a:contains('下一頁')").attr('href') === 'undefined')?" disabled":""}" href="${$("a:contains('下一頁')").attr('href')}">下一頁</a>
<span class="item">
<select class="ts dropdown basic" onchange="location=this.value;">
${$('select:eq(-1)').html()}
</select>
${$('select:eq(-1)').next().text()}
</span>
</div>
</div>
</div>
<div class="ts surrounded">
<div class="ts narrow container">
<div class="ts slate">
<form class="ts form" action="/ann/index.php" method="POST">
<fieldset>
<legend>搜尋參數</legend>
<div class="inline field">
<label for="mysearch">搜尋</label>
<input id="mysearch" type="text" name="mysearch" />
</div>
<div class="field">
<div class="ts toggle checkbox">
<input id="stxt" type="checkbox" name="stxt" />
<label for="stxt">含內容</label>
</div>
</div>
<div class="inline fields">
<div class="eight wide field">
<label>幾天以內</label>
<input type="number" name="myday" />
</div>
<div class="eight wide field">
<label>何時之前</label>
<input class="datepicker-here" id="mydate" type="text" data-language="zh" data-min-view="months" data-view="months" data-date-format="yyyy, MM" />
<input type="hidden" name="myyear" id="myyear">
<input type="hidden" name="mymonth" id="mymonth">
</div>
</div>
</fieldset>
<div class="ts two fields">
<div class="field">
<label>類別</label>
<select name="myclass">
${$("select[name='myclass']:eq(0)").html()}
</select>
</div>
<div class="field">
<label>群組</label>
<select onchange="location.href=this.options[this.selectedIndex].value">
${$("select[name='mypartid']:eq(1)").html()}
</select>
</div>
</div>
<button class="ts positive button">查詢</button>
</form>
</div>
</div>
</div>`;
            // clear data
            $("body").attr("background","");
            $("center").remove();
            $("br").remove();
            $("style[id^='stylus']").remove();
            // append html
            document.body.innerHTML += htmlData;
            $("#mydate").datepicker({
                "onSelect": function(str, d, inst) {
                    $("#myyear").val(d.getFullYear());
                    $("#mymonth").val(d.getMonth());
                }
            });
        })();
    }else if(page_type === "show"){
    }
}
欢迎访问Greasy Fork镜像
