| commit | author | age | ||
| 1169d0 | 1 | ;(() => { |
| I | 2 | class OwO { |
| 3 | constructor(option) { | |
| 4 | const defaultOption = { | |
| 5 | container: document.getElementsByClassName('OwO')[0], | |
| 6 | target: document.getElementsByTagName('textarea')[0], | |
| 7 | position: 'down', | |
| 8 | width: '100%', | |
| 9 | maxHeight: '250px', | |
| 10 | api: 'https://api.anotherhome.net/OwO/OwO.json' | |
| 11 | } | |
| 12 | for (let defaultKey in defaultOption) { | |
| 13 | if (defaultOption.hasOwnProperty(defaultKey) && !option.hasOwnProperty(defaultKey)) { | |
| 14 | option[defaultKey] = defaultOption[defaultKey] | |
| 15 | } | |
| 16 | } | |
| 17 | this.container = option.container | |
| 18 | this.target = option.target | |
| 19 | if (option.position === 'up') { | |
| 20 | this.container.classList.add('OwO-up') | |
| 21 | } | |
| 22 | const xhr = new XMLHttpRequest() | |
| 23 | xhr.onreadystatechange = () => { | |
| 24 | if (xhr.readyState === 4) { | |
| 25 | if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) { | |
| 26 | this.odata = JSON.parse(xhr.responseText) | |
| 27 | this.init(option) | |
| 28 | } else { | |
| 29 | console.log('OwO data request was unsuccessful: ' + xhr.status) | |
| 30 | } | |
| 31 | } | |
| 32 | } | |
| 33 | xhr.open('get', option.api, true) | |
| 34 | xhr.send(null) | |
| 35 | } | |
| 36 | ||
| 37 | init(option) { | |
| 38 | this.area = option.target | |
| 39 | this.packages = Object.keys(this.odata) | |
| 40 | ||
| 41 | // fill in HTML | |
| 42 | let html = ` | |
| 43 | <div class="OwO-logo"><span>OωO</span></div> | |
| 44 | <div class="OwO-body" style="width: ${option.width}"><div class="OwO-jio"></div>` | |
| 45 | ||
| 46 | for (let i = 0; i < this.packages.length; i++) { | |
| 47 | html += ` | |
| 48 | <ul class="OwO-items OwO-items-${this.odata[this.packages[i]].type}" style="max-height: ${parseInt(option.maxHeight) - 53 + 'px'};">` | |
| 49 | var type = this.odata[this.packages[i]].type | |
| 50 | let opackage = this.odata[this.packages[i]].container | |
| 51 | for (let i = 0; i < opackage.length; i++) { | |
| 52 | if (type == 'image') { | |
| 53 | html += ` | |
| 54 | <li class="OwO-item" data-id="${opackage[i].data}" title="${opackage[i].text}"><img class="biaoqing ${opackage[i].css}" src="${Config.themeUrl+opackage[i].icon}"></li>` | |
| 55 | } else { | |
| 56 | html += ` | |
| 57 | <li class="OwO-item" data-id="not-given" title="${opackage[i].text}">${opackage[i].icon}</li>` | |
| 58 | } | |
| 59 | } | |
| 60 | ||
| 61 | html += ` | |
| 62 | </ul>` | |
| 63 | } | |
| 64 | ||
| 65 | html += ` | |
| 66 | <div class="OwO-bar"> | |
| 67 | <ul class="OwO-packages">` | |
| 68 | ||
| 69 | for (let i = 0; i < this.packages.length; i++) { | |
| 70 | html += ` | |
| 71 | <li><span>${this.packages[i]}</span></li>` | |
| 72 | } | |
| 73 | ||
| 74 | html += ` | |
| 75 | </ul> | |
| 76 | </div> | |
| 77 | </div> | |
| 78 | ` | |
| 79 | this.container.innerHTML = html | |
| 80 | ||
| 81 | // bind event | |
| 82 | this.logo = document.getElementsByClassName('OwO-logo')[0] | |
| 83 | this.logo.addEventListener('click', e => { | |
| 84 | e.stopPropagation() | |
| 85 | this.toggle() | |
| 86 | }) | |
| 87 | ||
| 88 | this.container.getElementsByClassName('OwO-body')[0].addEventListener('click', e => { | |
| 89 | let target = null | |
| 90 | if (e.target.classList.contains('OwO-item')) { | |
| 91 | target = e.target | |
| 92 | } else if (e.target.parentNode.classList.contains('OwO-item')) { | |
| 93 | target = e.target.parentNode | |
| 94 | } | |
| 95 | if (target) { | |
| 96 | const cursorPos = this.area.selectionEnd | |
| 97 | let areaValue = this.area.value | |
| 98 | //this.area.value = areaValue.slice(0, cursorPos) + target.innerHTML + areaValue.slice(cursorPos); | |
| 99 | if (target.dataset.id == 'not-given') { | |
| 100 | this.area.value = areaValue.slice(0, cursorPos) + target.innerHTML + areaValue.slice(cursorPos) | |
| 101 | } else { | |
| 102 | this.area.value = areaValue.slice(0, cursorPos) + target.dataset.id + areaValue.slice(cursorPos) | |
| 103 | } | |
| 104 | this.area.focus() | |
| 105 | this.toggle() | |
| 106 | } | |
| 107 | }) | |
| 108 | this.packagesEle = this.container.getElementsByClassName('OwO-packages')[0] | |
| 109 | for (let i = 0; i < this.packagesEle.children.length; i++) { | |
| 110 | ;(index => { | |
| 111 | this.packagesEle.children[i].addEventListener('click', e => { | |
| 112 | e.stopPropagation() | |
| 113 | this.tab(index) | |
| 114 | }) | |
| 115 | })(i) | |
| 116 | } | |
| 117 | this.tab(0) | |
| 118 | } | |
| 119 | ||
| 120 | toggle() { | |
| 121 | if (this.container.classList.contains('OwO-open')) { | |
| 122 | this.container.classList.remove('OwO-open') | |
| 123 | } else { | |
| 124 | this.container.classList.add('OwO-open') | |
| 125 | } | |
| 126 | } | |
| 127 | ||
| 128 | tab(index) { | |
| 129 | const itemsShow = this.container.getElementsByClassName('OwO-items-show')[0] | |
| 130 | if (itemsShow) { | |
| 131 | itemsShow.classList.remove('OwO-items-show') | |
| 132 | } | |
| 133 | this.container.getElementsByClassName('OwO-items')[index].classList.add('OwO-items-show') | |
| 134 | ||
| 135 | const packageActive = this.container.getElementsByClassName('OwO-package-active')[0] | |
| 136 | if (packageActive) { | |
| 137 | packageActive.classList.remove('OwO-package-active') | |
| 138 | } | |
| 139 | this.packagesEle.getElementsByTagName('li')[index].classList.add('OwO-package-active') | |
| 140 | } | |
| 141 | } | |
| 142 | ||
| 143 | if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') { | |
| 144 | module.exports = OwO | |
| 145 | } else { | |
| 146 | window.OwO = OwO | |
| 147 | } | |
| 148 | })() | |
