➕ Add a new skin (iMobile)
This commit is contained in:
iTanken
153
iMobile/js/lib/OwO/OwO.min.js
vendored
Normal file
153
iMobile/js/lib/OwO/OwO.min.js
vendored
Normal file
@@ -0,0 +1,153 @@
|
||||
'use strict';
|
||||
var _createClass = function() {
|
||||
function defineProperties(target, props) {
|
||||
for (var i = 0; i < props.length; i++) {
|
||||
var descriptor = props[i];
|
||||
descriptor.enumerable = descriptor.enumerable || false;
|
||||
descriptor.configurable = true;
|
||||
if ("value" in descriptor) descriptor.writable = true;
|
||||
Object.defineProperty(target, descriptor.key, descriptor);
|
||||
}
|
||||
}
|
||||
return function(Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; };
|
||||
}();
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
(function() {
|
||||
var OwO = function() {
|
||||
function OwO(option) {
|
||||
var _this = this;
|
||||
_classCallCheck(this, OwO);
|
||||
var defaultOption = {
|
||||
logo: 'OωO表情',
|
||||
container: document.getElementsByClassName('OwO')[0],
|
||||
target: document.getElementsByTagName('textarea')[0],
|
||||
position: 'down',
|
||||
width: '100%',
|
||||
maxHeight: '250px',
|
||||
api: '/skins/mobile/js/lib/OwO/OwO.json',
|
||||
useMarkdown: false,
|
||||
appendContent: '',
|
||||
addClass: '',
|
||||
usedSize: 'h_200'
|
||||
};
|
||||
for (var defaultKey in defaultOption) {
|
||||
if (defaultOption.hasOwnProperty(defaultKey) && !option.hasOwnProperty(defaultKey)) {
|
||||
option[defaultKey] = defaultOption[defaultKey];
|
||||
}
|
||||
}
|
||||
this.container = option.container;
|
||||
this.target = option.target;
|
||||
if (option.position === 'up') {
|
||||
this.container.classList.add('OwO-up');
|
||||
}
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.onreadystatechange = function() {
|
||||
if (xhr.readyState === 4) {
|
||||
if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
|
||||
_this.odata = JSON.parse(xhr.responseText);
|
||||
_this.init(option);
|
||||
} else {
|
||||
console.log('OwO data request was unsuccessful: ' + xhr.status);
|
||||
}
|
||||
}
|
||||
};
|
||||
xhr.open('get', option.api, true);
|
||||
xhr.send(null);
|
||||
}
|
||||
_createClass(OwO, [{
|
||||
key: 'init',
|
||||
value: function init(option) {
|
||||
var _this2 = this;
|
||||
this.area = option.target;
|
||||
this.packages = Object.keys(this.odata);
|
||||
// fill in HTML
|
||||
var html = '<div class="OwO-logo"><span>' + option.logo + '</span></div>\n<div class="OwO-body" style="width: ' + option.width + '">';
|
||||
for (var i = 0; i < this.packages.length; i++) {
|
||||
html += '<ul class="OwO-items OwO-items-' + this.odata[this.packages[i]].type + '" style="max-height: ' + (parseInt(option.maxHeight) - 30 + 'px') + ';">';
|
||||
var opackage = this.odata[this.packages[i]].container;
|
||||
for (var _i = 0; _i < opackage.length; _i++) {
|
||||
html += '<li class="OwO-item ' + option.addClass + ('" alt="' + opackage[_i].text + '" title="' + opackage[_i].text + '">' + opackage[_i].icon + '</li>');
|
||||
}
|
||||
html += '</ul>';
|
||||
}
|
||||
html += '<div class="OwO-bar"><ul class="OwO-packages">';
|
||||
for (var _i2 = 0; _i2 < this.packages.length; _i2++) {
|
||||
html += '<li><span>' + this.packages[_i2] + '</span></li>';
|
||||
}
|
||||
html += '</ul></div></div>';
|
||||
if (option.appendContent != '') {
|
||||
html += option.appendContent;
|
||||
}
|
||||
this.container.innerHTML = html;
|
||||
// bind event
|
||||
this.logo = this.container.getElementsByClassName('OwO-logo')[0];
|
||||
this.logo.addEventListener('click', function() {
|
||||
_this2.toggle();
|
||||
});
|
||||
this.container.getElementsByClassName('OwO-body')[0].addEventListener('click', function(e) {
|
||||
var target = null;
|
||||
if (e.target.classList.contains('OwO-item')) {
|
||||
target = e.target;
|
||||
} else if (e.target.parentNode.classList.contains('OwO-item')) {
|
||||
target = e.target.parentNode;
|
||||
}
|
||||
if (target) {
|
||||
var insertContent = target.innerHTML;
|
||||
if (target.firstChild.tagName == "IMG" && option.useMarkdown) {
|
||||
insertContent = "![" + target.title + "](" + target.firstChild.src.substr(0, target.firstChild.src.indexOf(",") + 1) + option.usedSize + ")";
|
||||
}
|
||||
var cursorPos = _this2.area.selectionEnd;
|
||||
var areaValue = _this2.area.value;
|
||||
_this2.area.value = areaValue.slice(0, cursorPos) + insertContent + areaValue.slice(cursorPos);
|
||||
_this2.area.focus();
|
||||
//_this2.toggle();
|
||||
}
|
||||
});
|
||||
this.packagesEle = this.container.getElementsByClassName('OwO-packages')[0];
|
||||
var _loop = function _loop(_i3) {
|
||||
(function(index) {
|
||||
_this2.packagesEle.children[_i3].addEventListener('click', function() {
|
||||
_this2.tab(index);
|
||||
});
|
||||
})(_i3);
|
||||
};
|
||||
|
||||
for (var _i3 = 0; _i3 < this.packagesEle.children.length; _i3++) {
|
||||
_loop(_i3);
|
||||
}
|
||||
this.tab(0);
|
||||
}
|
||||
}, {
|
||||
key: 'toggle',
|
||||
value: function toggle() {
|
||||
if (this.container.classList.contains('OwO-open')) {
|
||||
this.container.classList.remove('OwO-open');
|
||||
} else {
|
||||
this.container.classList.add('OwO-open');
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'tab',
|
||||
value: function tab(index) {
|
||||
var itemsShow = this.container.getElementsByClassName('OwO-items-show')[0];
|
||||
if (itemsShow) {
|
||||
itemsShow.classList.remove('OwO-items-show');
|
||||
}
|
||||
this.container.getElementsByClassName('OwO-items')[index].classList.add('OwO-items-show');
|
||||
|
||||
var packageActive = this.container.getElementsByClassName('OwO-package-active')[0];
|
||||
if (packageActive) {
|
||||
packageActive.classList.remove('OwO-package-active');
|
||||
}
|
||||
this.packagesEle.getElementsByTagName('li')[index].classList.add('OwO-package-active');
|
||||
}
|
||||
}]);
|
||||
return OwO;
|
||||
}();
|
||||
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
|
||||
module.exports = OwO;
|
||||
} else {
|
||||
window.OwO = OwO;
|
||||
}
|
||||
})();
|
||||
Reference in New Issue
Block a user