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