new version
This commit is contained in:
DIYgod
parent
451288bdc7
commit
20f98f729e
81
README.md
81
README.md
|
|
@ -1,4 +1,4 @@
|
|||
# OwO
|
||||
# OωO
|
||||
|
||||
[](https://www.npmjs.com/package/owo)
|
||||
[](https://www.npmjs.com/package/owo)
|
||||
|
|
@ -11,7 +11,84 @@ Lovely Emoticon and Emoji Keyboard for textarea or input
|
|||
|
||||
## Introduction
|
||||
|
||||
*NOTE:* This module is still under *development*.
|
||||
[Demo]()
|
||||
|
||||
Screenshot
|
||||
|
||||
|
||||
|
||||
## Install
|
||||
|
||||
`$ npm install owo`
|
||||
|
||||
## Usage
|
||||
|
||||
### HTML
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="OwO.min.css">
|
||||
<!-- ... -->
|
||||
<div class="OwO"></div>
|
||||
<!-- ... -->
|
||||
<script src="OwO.min.js"></script>
|
||||
```
|
||||
|
||||
### JS
|
||||
|
||||
```js
|
||||
var OwO_demo = new OwO({
|
||||
logo: 'OωO表情',
|
||||
container: document.getElementsByClassName('OwO')[0],
|
||||
target: document.getElementsByClassName('OwO-textarea')[0],
|
||||
api: './OwO.json',
|
||||
position: 'down',
|
||||
width: '100%',
|
||||
maxHeight: '250px'
|
||||
});
|
||||
```
|
||||
|
||||
#### Options
|
||||
|
||||
```js
|
||||
{
|
||||
logo: 'OωO表情', // OwO button text, default: `OωO表情`
|
||||
container: document.getElementsByClassName('OwO')[0], // OwO container, default: `document.getElementsByClassName('OwO')[0]`
|
||||
target: document.getElementsByClassName('OwO-textarea')[0], // OwO target input or textarea, default: `document.getElementsByTagName('textarea')[0]`
|
||||
api: './OwO.json', // OwO Emoticon data api, default: `https://api.anotherhome.net/OwO/OwO.json`
|
||||
position: 'down', // OwO body position, default: `down`
|
||||
width: '100%', // OwO body width, default: `100%`
|
||||
maxHeight: '250px' // OwO body max-height, default: `250px`
|
||||
}
|
||||
```
|
||||
|
||||
#### Work with module bundler
|
||||
|
||||
```js
|
||||
var OwO = require('owo');
|
||||
var OwO_demo = new OwO({
|
||||
// ...
|
||||
});
|
||||
```
|
||||
|
||||
### Data API
|
||||
|
||||
Provide emoticon data for OwO.
|
||||
|
||||
[Example](https://api.anotherhome.net/OwO/OwO.json)
|
||||
|
||||
## Run in development
|
||||
|
||||
```js
|
||||
$ npm install
|
||||
$ npm run dev
|
||||
```
|
||||
|
||||
## Make a release
|
||||
|
||||
```js
|
||||
$ npm install
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
## LICENSE
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
{
|
||||
"颜文字": {
|
||||
"type": "emoticon",
|
||||
"container": [
|
||||
{
|
||||
"icon": "OωO",
|
||||
|
|
@ -92,10 +93,27 @@
|
|||
{
|
||||
"icon": "( ,,´･ω･)ﾉ\"(´っω･｀｡)",
|
||||
"text": "摸摸头"
|
||||
},
|
||||
{
|
||||
"icon": "╮(╯▽╰)╭ ",
|
||||
"text": "无奈"
|
||||
},
|
||||
{
|
||||
"icon": "o(*////▽////*)q ",
|
||||
"text": "脸红"
|
||||
},
|
||||
{
|
||||
"icon": "＞﹏＜",
|
||||
"text": ""
|
||||
},
|
||||
{
|
||||
"icon": "( ๑´•ω•) \"(ㆆᴗㆆ)",
|
||||
"text": ""
|
||||
}
|
||||
]
|
||||
},
|
||||
"Emoji": {
|
||||
"type": "emoji",
|
||||
"container": [
|
||||
{
|
||||
"icon": "😂",
|
||||
|
|
@ -216,10 +234,39 @@
|
|||
{
|
||||
"icon": "🌝",
|
||||
"text": ""
|
||||
},
|
||||
{
|
||||
"icon": "🙈",
|
||||
"text": ""
|
||||
},
|
||||
{
|
||||
"icon": "💊",
|
||||
"text": ""
|
||||
},
|
||||
{
|
||||
"icon": "😶",
|
||||
"text": ""
|
||||
},
|
||||
{
|
||||
"icon": "🙏",
|
||||
"text": ""
|
||||
},
|
||||
{
|
||||
"icon": "🍦",
|
||||
"text": ""
|
||||
},
|
||||
{
|
||||
"icon": "🍉",
|
||||
"text": ""
|
||||
},
|
||||
{
|
||||
"icon": "😣",
|
||||
"text": ""
|
||||
}
|
||||
]
|
||||
},
|
||||
"图片表情": {
|
||||
"type": "image",
|
||||
"container": [
|
||||
{
|
||||
"icon": "<img src=\"http://o5mvhz1ad.qnssl.com/face1.jpg\">",
|
||||
|
|
@ -238,11 +285,44 @@
|
|||
"text": "face4"
|
||||
},
|
||||
{
|
||||
"icon": "<img src=\"http://o5mvhz1ad.qnssl.com/face5.gif\">",
|
||||
"text": "face5"
|
||||
"icon": "<img src=\"http://o5mvhz1ad.qnssl.com/face5.jpg\">",
|
||||
"text": "face3"
|
||||
},
|
||||
{
|
||||
"icon": "<img src=\"http://o5mvhz1ad.qnssl.com/face6.jpg\">",
|
||||
"text": "face3"
|
||||
}
|
||||
]
|
||||
},
|
||||
"岁纳京子": {
|
||||
"type": "image",
|
||||
"container": [
|
||||
{
|
||||
"icon": "<img src=\"http://o5mvhz1ad.qnssl.com/jz1.jpg\">",
|
||||
"text": "face1"
|
||||
},
|
||||
{
|
||||
"icon": "<img src=\"http://o5mvhz1ad.qnssl.com/jz2.gif\">",
|
||||
"text": "face2"
|
||||
},
|
||||
{
|
||||
"icon": "<img src=\"http://o5mvhz1ad.qnssl.com/jz3.gif\">",
|
||||
"text": "face3"
|
||||
},
|
||||
{
|
||||
"icon": "<img src=\"http://o5mvhz1ad.qnssl.com/jz4.gif\">",
|
||||
"text": "face4"
|
||||
},
|
||||
{
|
||||
"icon": "<img src=\"http://o5mvhz1ad.qnssl.com/jz5.jpg\">",
|
||||
"text": "face5"
|
||||
},
|
||||
{
|
||||
"icon": "<img src=\"http://o5mvhz1ad.qnssl.com/jz6.gif\">",
|
||||
"text": "face6"
|
||||
},
|
||||
{
|
||||
"icon": "<img src=\"http://o5mvhz1ad.qnssl.com/jz7.jpg\">",
|
||||
"text": "face6"
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -52,18 +52,18 @@
|
|||
<h2>Lovely Emoticon and Emoji Keyboard for textarea or input</h2>
|
||||
<p>Made by <a href="https://www.anotherhome.net/" target="_blank">DIYgod</a>. Available on <a href="https://github.com/DIYgod/OwO" target="_blank">GitHub</a>. Licensed MIT.</p>
|
||||
<hr>
|
||||
<textarea class="OwO-textarea" style="width: 100%; height: 100px; margin-bottom: 10px; padding: 10px;"></textarea>
|
||||
<textarea class="OwO-textarea" style="width: 100%; height: 50px; margin-bottom: 10px; padding: 10px;"></textarea>
|
||||
<div class="OwO"></div>
|
||||
</div>
|
||||
<script src="../dist/OwO.min.js"></script>
|
||||
<script>
|
||||
var OwO_demo = new OwO({
|
||||
logo: 'OωO颜文字',
|
||||
logo: 'OωO表情',
|
||||
container: document.getElementsByClassName('OwO')[0],
|
||||
target: document.getElementsByClassName('OwO-textarea')[0],
|
||||
dataURL: './OwO.json',
|
||||
api: './OwO.json',
|
||||
position: 'down',
|
||||
width: '500px',
|
||||
width: '100%',
|
||||
maxHeight: '250px'
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function e(e,t){for(var a=0;a<t.length;a++){var s=t[a];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(e,s.key,s)}}return function(t,a,s){return a&&e(t.prototype,a),s&&e(t,s),t}}();!function(){var e=function(){function e(t){var a=this;_classCallCheck(this,e);var s={container:document.getElementsByClassName("OwO")[0],target:document.getElementsByTagName("textarea")[0],dataURL:"https://api.anotherhome.net/OwO/OwO.json"};for(var n in s)s.hasOwnProperty(n)&&!t.hasOwnProperty(n)&&(t[n]=s[n]);this.container=t.container,this.target=t.target;var i=new XMLHttpRequest;i.onreadystatechange=function(){4===i.readyState&&(i.status>=200&&i.status<300||304===i.status?(a.odata=JSON.parse(i.responseText),a.init(t)):console.log("OwO data request was unsuccessful: "+i.status))},i.open("get",t.dataURL,!0),i.send(null)}return _createClass(e,[{key:"init",value:function(e){var t=this;this.area=e.target,this.packages=Object.keys(this.odata);for(var a='\n <div class="OwO-logo"><span>'+e.logo+'</span></div>\n <div class="OwO-body" style="width: '+e.width+'">',s=0;s<this.packages.length;s++){a+='\n <ul class="OwO-items" style="max-height: '+(parseInt(e.maxHeight)-53+"px")+';">';var n=this.odata[this.packages[s]].container;console.log(n);for(var i=0;i<n.length;i++)a+='\n <li class="OwO-item" title="'+n[i].text+'">'+n[i].icon+"</li>";a+="\n </ul>"}a+='\n <div class="OwO-bar">\n <ul class="OwO-packages">';for(var o=0;o<this.packages.length;o++)a+="\n <li><span>"+this.packages[o]+"</span></li>";a+="\n </ul>\n </div>\n </div>\n ",this.container.innerHTML=a,this.logo=this.container.getElementsByClassName("OwO-logo")[0],this.logo.addEventListener("click",function(){t.toggle()}),this.container.getElementsByClassName("OwO-body")[0].addEventListener("click",function(e){var a=null;if(e.target.classList.contains("OwO-item")?a=e.target:e.target.parentNode.classList.contains("OwO-item")&&(a=e.target.parentNode),a){var s=t.area.selectionEnd,n=t.area.value;t.area.value=n.slice(0,s)+a.innerHTML+n.slice(s),t.area.focus()}}),this.packagesEle=this.container.getElementsByClassName("OwO-packages")[0];for(var l=function(e){!function(a){t.packagesEle.children[e].addEventListener("click",function(){t.tab(a)})}(e)},c=0;c<this.packagesEle.children.length;c++)l(c);this.tab(0)}},{key:"toggle",value:function(){this.container.classList.contains("OwO-open")?this.container.classList.remove("OwO-open"):this.container.classList.add("OwO-open")}},{key:"tab",value:function(e){var t=this.container.getElementsByClassName("OwO-items-show")[0];t&&t.classList.remove("OwO-items-show"),this.container.getElementsByClassName("OwO-items")[e].classList.add("OwO-items-show");var a=this.container.getElementsByClassName("OwO-package-active")[0];a&&a.classList.remove("OwO-package-active"),this.packagesEle.getElementsByTagName("li")[e].classList.add("OwO-package-active")}}]),e}();"undefined"!=typeof module&&"undefined"!=typeof module.exports?module.exports=e:window.OwO=e}();
|
||||
"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function e(e,t){for(var a=0;a<t.length;a++){var s=t[a];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(e,s.key,s)}}return function(t,a,s){return a&&e(t.prototype,a),s&&e(t,s),t}}();!function(){var e=function(){function e(t){var a=this;_classCallCheck(this,e);var s={logo:"OwO表情",container:document.getElementsByClassName("OwO")[0],target:document.getElementsByTagName("textarea")[0],position:"down",width:"100%",maxHeight:"250px",api:"https://api.anotherhome.net/OwO/OwO.json"};for(var n in s)s.hasOwnProperty(n)&&!t.hasOwnProperty(n)&&(t[n]=s[n]);this.container=t.container,this.target=t.target,"up"===t.position&&this.container.classList.add("OwO-up");var i=new XMLHttpRequest;i.onreadystatechange=function(){4===i.readyState&&(i.status>=200&&i.status<300||304===i.status?(a.odata=JSON.parse(i.responseText),a.init(t)):console.log("OwO data request was unsuccessful: "+i.status))},i.open("get",t.api,!0),i.send(null)}return _createClass(e,[{key:"init",value:function(e){var t=this;this.area=e.target,this.packages=Object.keys(this.odata);for(var a='\n <div class="OwO-logo"><span>'+e.logo+'</span></div>\n <div class="OwO-body" style="width: '+e.width+'">',s=0;s<this.packages.length;s++){a+='\n <ul class="OwO-items OwO-items-'+this.odata[this.packages[s]].type+'" style="max-height: '+(parseInt(e.maxHeight)-53+"px")+';">';for(var n=this.odata[this.packages[s]].container,i=0;i<n.length;i++)a+='\n <li class="OwO-item" title="'+n[i].text+'">'+n[i].icon+"</li>";a+="\n </ul>"}a+='\n <div class="OwO-bar">\n <ul class="OwO-packages">';for(var o=0;o<this.packages.length;o++)a+="\n <li><span>"+this.packages[o]+"</span></li>";a+="\n </ul>\n </div>\n </div>\n ",this.container.innerHTML=a,this.logo=this.container.getElementsByClassName("OwO-logo")[0],this.logo.addEventListener("click",function(){t.toggle()}),this.container.getElementsByClassName("OwO-body")[0].addEventListener("click",function(e){var a=null;if(e.target.classList.contains("OwO-item")?a=e.target:e.target.parentNode.classList.contains("OwO-item")&&(a=e.target.parentNode),a){var s=t.area.selectionEnd,n=t.area.value;t.area.value=n.slice(0,s)+a.innerHTML+n.slice(s),t.area.focus()}}),this.packagesEle=this.container.getElementsByClassName("OwO-packages")[0];for(var c=function(e){!function(a){t.packagesEle.children[e].addEventListener("click",function(){t.tab(a)})}(e)},l=0;l<this.packagesEle.children.length;l++)c(l);this.tab(0)}},{key:"toggle",value:function(){this.container.classList.contains("OwO-open")?this.container.classList.remove("OwO-open"):this.container.classList.add("OwO-open")}},{key:"tab",value:function(e){var t=this.container.getElementsByClassName("OwO-items-show")[0];t&&t.classList.remove("OwO-items-show"),this.container.getElementsByClassName("OwO-items")[e].classList.add("OwO-items-show");var a=this.container.getElementsByClassName("OwO-package-active")[0];a&&a.classList.remove("OwO-package-active"),this.packagesEle.getElementsByTagName("li")[e].classList.add("OwO-package-active")}}]),e}();"undefined"!=typeof module&&"undefined"!=typeof module.exports?module.exports=e:window.OwO=e}();
|
||||
//# sourceMappingURL=OwO.min.js.map
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
14
src/OwO.js
14
src/OwO.js
|
|
@ -2,9 +2,13 @@
|
|||
class OwO {
|
||||
constructor(option) {
|
||||
const defaultOption = {
|
||||
logo: 'OwO表情',
|
||||
container: document.getElementsByClassName('OwO')[0],
|
||||
target: document.getElementsByTagName('textarea')[0],
|
||||
dataURL: 'https://api.anotherhome.net/OwO/OwO.json'
|
||||
position: 'down',
|
||||
width: '100%',
|
||||
maxHeight: '250px',
|
||||
api: 'https://api.anotherhome.net/OwO/OwO.json'
|
||||
};
|
||||
for (let defaultKey in defaultOption) {
|
||||
if (defaultOption.hasOwnProperty(defaultKey) && !option.hasOwnProperty(defaultKey)) {
|
||||
|
|
@ -13,6 +17,9 @@
|
|||
}
|
||||
this.container = option.container;
|
||||
this.target = option.target;
|
||||
if (option.position === 'up') {
|
||||
this.container.classList.add('OwO-up');
|
||||
}
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.onreadystatechange = () => {
|
||||
|
|
@ -26,7 +33,7 @@
|
|||
}
|
||||
}
|
||||
};
|
||||
xhr.open('get', option.dataURL, true);
|
||||
xhr.open('get', option.api, true);
|
||||
xhr.send(null);
|
||||
}
|
||||
|
||||
|
|
@ -42,10 +49,9 @@
|
|||
for (let i = 0; i < this.packages.length; i++) {
|
||||
|
||||
html += `
|
||||
<ul class="OwO-items" style="max-height: ${parseInt(option.maxHeight) - 53 + 'px'};">`;
|
||||
<ul class="OwO-items OwO-items-${this.odata[this.packages[i]].type}" style="max-height: ${parseInt(option.maxHeight) - 53 + 'px'};">`;
|
||||
|
||||
let opackage = this.odata[this.packages[i]].container;
|
||||
console.log(opackage);
|
||||
for (let i = 0; i < opackage.length; i++) {
|
||||
|
||||
html += `
|
||||
|
|
|
|||
40
src/OwO.scss
40
src/OwO.scss
|
|
@ -18,6 +18,23 @@
|
|||
display: block;
|
||||
}
|
||||
}
|
||||
&.OwO-up {
|
||||
.OwO-body {
|
||||
top: inherit;
|
||||
bottom: 21px;
|
||||
border-radius: 4px 4px 4px 0;
|
||||
|
||||
.OwO-bar .OwO-packages li:nth-child(1) {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.OwO-open .OwO-logo {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 0 0 4px 4px;
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
.OwO-logo {
|
||||
position: relative;
|
||||
|
|
@ -59,7 +76,7 @@
|
|||
overflow: scroll;
|
||||
font-size: 0;
|
||||
|
||||
li {
|
||||
.OwO-item {
|
||||
list-style-type: none;
|
||||
background: #f7f7f7;
|
||||
padding: 5px 10px;
|
||||
|
|
@ -76,9 +93,23 @@
|
|||
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
|
||||
animation: my-face 5s infinite ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.OwO-items-emoji {
|
||||
.OwO-item {
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.OwO-items-image {
|
||||
.OwO-item {
|
||||
max-width: calc(25% - 10px);
|
||||
box-sizing: border-box;
|
||||
|
||||
img {
|
||||
max-width: 100px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -107,9 +138,12 @@
|
|||
font-size: 14px;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 0 0 4px 4px;
|
||||
margin-right: 3px;
|
||||
|
||||
&:nth-child(1) {
|
||||
border-radius: 0 0 0 3px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #eee;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue