Coolpc Search

原價屋快速搜尋套件-可以快速搜尋商品和儲存歷史搜尋紀錄
目前為 2020-04-29 提交的版本，檢視最新版本。
安裝腳本 ?
換行
// ==UserScript==
// @name         Coolpc Search
// @namespace    https://github.com/lovebuizel
// @version      v1.0.8
// @description  原價屋快速搜尋套件-可以快速搜尋商品和儲存歷史搜尋紀錄
// @author       lovebuizel
// @match        *.coolpc.com.tw/evaluate.php
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    class Coolpc {
        constructor() {
            this.keyword = ""
            this.keywords = []
            this.selecteds = []
            this.records = JSON.parse(localStorage.getItem('coolpc')) || [];
            this.input = null
            this.details = ''
            this.isOpenDetails = JSON.parse(localStorage.getItem('coolpc_isOpenDetails')) || false
            this.isAutoAddResults = JSON.parse(localStorage.getItem('coolpc_isAutoAddResults')) === null ? true : JSON.parse(localStorage.getItem('coolpc_isAutoAddResults'))
            this.searchResultOptions = []
        }

        init() {
            this.clearAd()
            this.addUI()
            this.removeOriginalEventListener()
        }

        addUI() {
            const fDiv_table = document.querySelector('#fDiv table')
            const div = document.createElement("div")
            div.setAttribute('style', `
width:100%;
background:#FFCA62;
`)
            div.innerHTML = `
<div class="details" style="max-height:40vh;overflow:auto;height:${this.isOpenDetails ? '100%' : '0'};">
<ul style="list-style:none;padding-left:0px;overflow:hidden;margin:0;"></ul>
</div>
<div style="display:flex;align-items:center;justify-content:flex-start;margin-top:5px;">
<span class="openDetails" style="margin-left:20px;margin-right:20px;display:flex;align-items:center;cursor:pointer;color:blue;user-select:none;">
<span style="font-size:15pt;" class="signOpenDetails">${this.isOpenDetails ? '&minus;' : '&plus;'}</span>
<span style="margin-left:5px;">全部搜尋結果</span>
</span>
<div class="autoAddResults" style="display:flex;align-items:center;cursor:pointer;user-select:none;">
<div class="autoAddResults_div" style="
width:15px;
height:15px;
background:white;
border:1px solid black;
display:flex;
justify-content:center;
align-items:center;
"></div>
<span style="margin-left:5px;">搜尋後自動填入</span>
</div>
</div>
`
            fDiv_table.appendChild(div)
            const divDetails = document.querySelector(".details")
            divDetails.addEventListener('click', this.clickDetails.bind(this))

            const openDetails = document.querySelector('.openDetails')
            const signOpenDetails = document.querySelector('.signOpenDetails')
            openDetails.addEventListener('click', () => {
                this.isOpenDetails = !this.isOpenDetails
                signOpenDetails.innerHTML = `${this.isOpenDetails ? '&minus;' : '&plus;'}`
                divDetails.style.height = `${this.isOpenDetails ? '100%' : 0}`
                localStorage.setItem('coolpc_isOpenDetails', this.isOpenDetails)
            })

            const divSearch = document.createElement("div")
            divSearch.setAttribute('style', `
width:100%;
height:40px;
background:#FFCA62;
display:flex;
align-items:center;
justify-content:flex-start;
`)
            divSearch.innerHTML = `
<img src="https://i.imgur.com/aXfbfwd.png" style="width:15px;height:15px;margin-right:5px;margin-left:20px;user-select:none;"></img>
<input class="input" type="text" placeholder="e.g., R5 3600" spellcheck="false" style="width:250px;height:25px;padding-left:5px;flex-shrink:0;user-select:none;">
<button class="btn" style="height:25px;color:black;user-select:none;">GO</button>
<ul class="records" style="display:flex;list-style:none;padding-left:20px;overflow:hidden;align-items:center;"></ul>`
            fDiv_table.appendChild(divSearch)
            this.input = document.querySelector(".input")
            this.input.focus()
            const btn = document.querySelector(".btn")
            const records = document.querySelector(".records")
            btn.addEventListener('click', () => {
                this.keyword = this.input.value
                this.search()
            })
            this.input.addEventListener('keydown', (e) => {
                if (e.keyCode === 13 || e.KeyCode === 13) {
                    this.keyword = this.input.value
                    this.search()
                }
            })
            records.addEventListener('click', this.clickRecords.bind(this))

            const autoAddResults_div = document.querySelector('.autoAddResults_div')
            autoAddResults_div.innerHTML = this.isAutoAddResults ? '&check;' : ''

            const autoAddResults = document.querySelector('.autoAddResults')
            autoAddResults.addEventListener('click', this.clickAutoAddResults_div.bind(this))

            this.updateRecords()
        }

        search() {
            // 重置
            this.selecteds.forEach(option => {
                this.clearSelected(option)
            })
            this.selecteds = []
            this.details = ''
            this.searchResultOptions = []

            if (this.keyword.trim() === '') return
            const totalSelects = document.querySelectorAll('td:nth-child(3) > select')
            const ulDetails = document.querySelector('.details ul')
            // 重置optionNumber
            let optionNumber = 0
            totalSelects.forEach(select => {
                const totalOptions = select.querySelectorAll('option')
                this.keywords = this.keyword.toLowerCase().split(' ').map(keyword => keyword.trim())
                for (let i = 0; i < totalOptions.length; i++) {
                    if(this.isMatch(totalOptions[i])){
                        if (this.isAutoAddResults) {
                            this.addSelected(totalOptions[i])
                            this.selecteds.push(totalOptions[i])
                        }
                        this.details += `<li style="padding-left:20px;background:#fffd92;margin-top:20px;">${select.parentNode.previousSibling.textContent}</li>`
                        break
                    }
                }
                for (let i = 0; i < totalOptions.length; i++) {
                    if(this.isMatch(totalOptions[i])){
                        this.details += `<li style="padding-left:20px;cursor:pointer;"data-optionnumber="${optionNumber}">${totalOptions[i].text}</li>`
                        this.searchResultOptions.push(totalOptions[i])
                        optionNumber++
                    }
                }
            })

            ulDetails.innerHTML = this.details
            this.updateDetailStyle()
            this.addRecords()
            this.updateRecords()
        }

        isMatch(option) {
            return this.keywords.every(keyword => option.text.toLowerCase().includes(keyword.toLowerCase()))
        }

        addSelected(option) {
            option.selected = true
            option.parentNode.parentNode.dispatchEvent(new Event('change'))
        }

        clearSelected(option) {
            option.selected = false
            option.parentNode.parentNode.dispatchEvent(new Event('change'))
        }

        updateRecords() {
            let str = `<span style="flex-shrink:0;">歷史紀錄：</span>`
            for (let i = 0; i < this.records.length; i++) {
                str += `<li class="record" style="margin-right:5px;cursor:pointer;color:blue;text-decoration:underline;flex-shrink:0;";>${this.records[i]}</li><span class="deleteRecord" style="margin-right:20px;flex-shrink:0;font-size:15pt;cursor:pointer;" data-recordnumber="${i}">&times;</span>`
            }
            const records = document.querySelector('.records')
            records.innerHTML = str
            this.input.value = this.keyword
        }

        addRecords() {
            const isNotRepeat = this.records.every( record => record.toLowerCase() !== this.keyword.toLowerCase() )
            if (!isNotRepeat) return
            this.records.unshift(this.keyword)
            if (this.records.length > 10) {
                this.records.splice(10)
            }
            localStorage.setItem('coolpc', JSON.stringify(this.records))
        }

        clickRecords(e) {
            if (e.target.nodeName == 'LI' && e.target.className == 'record') {
                this.keyword = e.target.textContent
                this.search()
            }

            if (e.target.nodeName === 'SPAN' &&　e.target.className === 'deleteRecord') {
                this.records.splice(e.target.dataset.recordnumber,1)
                localStorage.setItem('coolpc', JSON.stringify(this.records))
                this.updateRecords()
            }
        }

        clearAd() {
            const body = document.querySelector('body')
            body.style.overflow = 'auto'
            const Psu = document.querySelector('#Psu')
            Psu.style.display = 'none'
            const doc = document.querySelector('#doc tbody')
            doc.style.display = 'none'
        }

        removeOriginalEventListener() {
            const script = document.createElement('script')
            script.innerHTML = `
document.querySelector('body').onkeyup = null;
document.querySelector('body').onselectstart = null;
document.querySelector('body').oncontextmenu = null;
document.querySelector('#fDiv').ondblclick = null;
`
            document.querySelector('body').append(script)
        }

        clickDetails(e) {
            if (e.target.nodeName === 'LI' &&　e.target.dataset.optionnumber) {
                if(!this.searchResultOptions[e.target.dataset.optionnumber].selected){
                    this.addSelected(this.searchResultOptions[e.target.dataset.optionnumber])
                } else {
                    this.clearSelected(this.searchResultOptions[e.target.dataset.optionnumber])
                }
                this.updateDetailStyle()
            }
        }

        updateDetailStyle() {
            const lists = document.querySelectorAll('.details li')
            lists.forEach(li => {
                if(li.dataset.optionnumber){
                    if(this.searchResultOptions[li.dataset.optionnumber].selected === true) {
                        li.style.background = '#c99932'
                    } else {
                        li.style.background = 'transparent'
                    }
                }
            })
        }

        clickAutoAddResults_div() {
            this.isAutoAddResults = !this.isAutoAddResults
            localStorage.setItem('coolpc_isAutoAddResults', this.isAutoAddResults)
            const autoAddResults_div = document.querySelector('.autoAddResults_div')
            autoAddResults_div.innerHTML = this.isAutoAddResults ? '&check;' : ''
        }
    }

    const coolpc = new Coolpc()

    window.onload = coolpc.init()

})();