From 20f98f729ecd262fdce0f849c274c7e7fd7d2fda Mon Sep 17 00:00:00 2001 From: DIYgod Date: Sat, 16 Apr 2016 04:14:45 +0800 Subject: [PATCH] new version --- README.md | 81 +++++++++++++++++++++++++++++++++++++++++-- demo/OwO.json | 84 +++++++++++++++++++++++++++++++++++++++++++-- demo/index.html | 8 ++--- dist/OwO.min.css | 2 +- dist/OwO.min.js | 2 +- dist/OwO.min.js.map | 2 +- src/OwO.js | 14 +++++--- src/OwO.scss | 40 +++++++++++++++++++-- 8 files changed, 215 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index bec38e4..9a2c409 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# OwO +# OωO [![npm](https://img.shields.io/npm/v/owo.svg?style=flat-square)](https://www.npmjs.com/package/owo) [![npm](https://img.shields.io/npm/l/owo.svg?style=flat-square)](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 + +![OwO](http://i.imgur.com/eRSh95i.jpg) + +## Install + +`$ npm install owo` + +## Usage + +### HTML + +```html + + +
+ + +``` + +### 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 diff --git a/demo/OwO.json b/demo/OwO.json index 3920c01..fa31746 100644 --- a/demo/OwO.json +++ b/demo/OwO.json @@ -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": "", @@ -238,11 +285,44 @@ "text": "face4" }, { - "icon": "", - "text": "face5" + "icon": "", + "text": "face3" }, { "icon": "", + "text": "face3" + } + ] + }, + "岁纳京子": { + "type": "image", + "container": [ + { + "icon": "", + "text": "face1" + }, + { + "icon": "", + "text": "face2" + }, + { + "icon": "", + "text": "face3" + }, + { + "icon": "", + "text": "face4" + }, + { + "icon": "", + "text": "face5" + }, + { + "icon": "", + "text": "face6" + }, + { + "icon": "", "text": "face6" } ] diff --git a/demo/index.html b/demo/index.html index c656701..ccb2874 100644 --- a/demo/index.html +++ b/demo/index.html @@ -52,18 +52,18 @@

Lovely Emoticon and Emoji Keyboard for textarea or input

Made by DIYgod. Available on GitHub. Licensed MIT.

- +
diff --git a/dist/OwO.min.css b/dist/OwO.min.css index f2273a3..7999bf7 100644 --- a/dist/OwO.min.css +++ b/dist/OwO.min.css @@ -1 +1 @@ -.OwO{position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.OwO:hover .OwO-logo{color:#444}.OwO.OwO-open .OwO-logo{border-radius:4px 4px 0 0;border-bottom:none;color:#444}.OwO.OwO-open .OwO-body{display:block}.OwO .OwO-logo{position:relative;display:inline-block;color:#888;background:#fff;border:1px solid #ddd;border-radius:4px;font-size:13px;padding:2px 5px;cursor:pointer;height:22px;box-sizing:border-box;z-index:2}.OwO .OwO-logo:hover span{display:inline-block;-webkit-animation:a 5s infinite ease-in-out;animation:a 5s infinite ease-in-out}.OwO .OwO-body{display:none;position:absolute;width:400px;background:#fff;border:1px solid #ddd;z-index:1;top:21px;border-radius:0 4px 4px 4px}.OwO .OwO-body .OwO-items{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:none;padding:10px;margin:0;overflow:scroll;font-size:0}.OwO .OwO-body .OwO-items li{list-style-type:none;background:#f7f7f7;padding:5px 10px;border-radius:5px;display:inline-block;font-size:12px;line-height:14px;margin:0 10px 12px 0;cursor:pointer;-webkit-transition:.3s;transition:.3s}.OwO .OwO-body .OwO-items li:hover{background:#eee;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);-webkit-animation:a 5s infinite ease-in-out;animation:a 5s infinite ease-in-out}.OwO .OwO-body .OwO-items li img{max-width:100px}.OwO .OwO-body .OwO-items-show{display:block}.OwO .OwO-body .OwO-bar{width:100%;height:30px;border-top:1px solid #ddd;background:#fff;border-radius:0 0 4px 4px;color:#444}.OwO .OwO-body .OwO-bar .OwO-packages{margin:0;padding:0;font-size:0}.OwO .OwO-body .OwO-bar .OwO-packages li{list-style-type:none;display:inline-block;line-height:30px;font-size:14px;padding:0 10px;cursor:pointer;border-radius:0 0 4px 4px;margin-right:3px}.OwO .OwO-body .OwO-bar .OwO-packages li:hover{background:#eee}.OwO .OwO-body .OwO-bar .OwO-packages .OwO-package-active{background:#eee;-webkit-transition:.3s;transition:.3s}@-webkit-keyframes a{2%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}4%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}6%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}8%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}10%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}12%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}14%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}16%{-webkit-transform:translateY(-.5px) rotate(-1.5deg);transform:translateY(-.5px) rotate(-1.5deg)}18%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}20%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}22%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}24%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}26%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}28%{-webkit-transform:translateY(.5px) rotate(1.5deg);transform:translateY(.5px) rotate(1.5deg)}30%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}32%,34%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}36%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}38%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}40%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}42%{-webkit-transform:translateY(2.5px) rotate(-1.5deg);transform:translateY(2.5px) rotate(-1.5deg)}44%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}46%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}48%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}50%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}52%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}54%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}56%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}58%{-webkit-transform:translateY(.5px) rotate(2.5deg);transform:translateY(.5px) rotate(2.5deg)}60%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}62%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}64%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}66%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}68%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}70%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}72%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}74%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}76%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}78%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}80%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}82%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}84%{-webkit-transform:translateY(1.5px) rotate(2.5deg);transform:translateY(1.5px) rotate(2.5deg)}86%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}88%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}90%{-webkit-transform:translateY(2.5px) rotate(-.5deg);transform:translateY(2.5px) rotate(-.5deg)}92%{-webkit-transform:translateY(.5px) rotate(-.5deg);transform:translateY(.5px) rotate(-.5deg)}94%{-webkit-transform:translateY(2.5px) rotate(.5deg);transform:translateY(2.5px) rotate(.5deg)}96%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}98%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}0%,to{-webkit-transform:translate(0) rotate(0deg);transform:translate(0) rotate(0deg)}}@keyframes a{2%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}4%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}6%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}8%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}10%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}12%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}14%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}16%{-webkit-transform:translateY(-.5px) rotate(-1.5deg);transform:translateY(-.5px) rotate(-1.5deg)}18%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}20%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}22%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}24%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}26%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}28%{-webkit-transform:translateY(.5px) rotate(1.5deg);transform:translateY(.5px) rotate(1.5deg)}30%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}32%,34%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}36%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}38%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}40%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}42%{-webkit-transform:translateY(2.5px) rotate(-1.5deg);transform:translateY(2.5px) rotate(-1.5deg)}44%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}46%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}48%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}50%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}52%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}54%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}56%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}58%{-webkit-transform:translateY(.5px) rotate(2.5deg);transform:translateY(.5px) rotate(2.5deg)}60%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}62%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}64%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}66%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}68%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}70%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}72%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}74%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}76%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}78%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}80%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}82%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}84%{-webkit-transform:translateY(1.5px) rotate(2.5deg);transform:translateY(1.5px) rotate(2.5deg)}86%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}88%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}90%{-webkit-transform:translateY(2.5px) rotate(-.5deg);transform:translateY(2.5px) rotate(-.5deg)}92%{-webkit-transform:translateY(.5px) rotate(-.5deg);transform:translateY(.5px) rotate(-.5deg)}94%{-webkit-transform:translateY(2.5px) rotate(.5deg);transform:translateY(2.5px) rotate(.5deg)}96%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}98%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}0%,to{-webkit-transform:translate(0) rotate(0deg);transform:translate(0) rotate(0deg)}} \ No newline at end of file +.OwO{position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.OwO:hover .OwO-logo{color:#444}.OwO.OwO-open .OwO-logo{border-radius:4px 4px 0 0;border-bottom:none;color:#444}.OwO.OwO-open .OwO-body{display:block}.OwO.OwO-up .OwO-body{top:inherit;bottom:21px;border-radius:4px 4px 4px 0}.OwO.OwO-up .OwO-body .OwO-bar .OwO-packages li:nth-child(1){border-radius:0}.OwO.OwO-up.OwO-open .OwO-logo{border:1px solid #ddd;border-radius:0 0 4px 4px;border-top:none}.OwO .OwO-logo{position:relative;display:inline-block;color:#888;background:#fff;border:1px solid #ddd;border-radius:4px;font-size:13px;padding:2px 5px;cursor:pointer;height:22px;box-sizing:border-box;z-index:2}.OwO .OwO-logo:hover span{display:inline-block;-webkit-animation:a 5s infinite ease-in-out;animation:a 5s infinite ease-in-out}.OwO .OwO-body{display:none;position:absolute;width:400px;background:#fff;border:1px solid #ddd;z-index:1;top:21px;border-radius:0 4px 4px 4px}.OwO .OwO-body .OwO-items{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:none;padding:10px;margin:0;overflow:scroll;font-size:0}.OwO .OwO-body .OwO-items .OwO-item{list-style-type:none;background:#f7f7f7;padding:5px 10px;border-radius:5px;display:inline-block;font-size:12px;line-height:14px;margin:0 10px 12px 0;cursor:pointer;-webkit-transition:.3s;transition:.3s}.OwO .OwO-body .OwO-items .OwO-item:hover{background:#eee;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);-webkit-animation:a 5s infinite ease-in-out;animation:a 5s infinite ease-in-out}.OwO .OwO-body .OwO-items-emoji .OwO-item{font-size:20px;line-height:20px}.OwO .OwO-body .OwO-items-image .OwO-item{max-width:calc(25% - 10px);box-sizing:border-box}.OwO .OwO-body .OwO-items-image .OwO-item img{max-width:100%}.OwO .OwO-body .OwO-items-show{display:block}.OwO .OwO-body .OwO-bar{width:100%;height:30px;border-top:1px solid #ddd;background:#fff;border-radius:0 0 4px 4px;color:#444}.OwO .OwO-body .OwO-bar .OwO-packages{margin:0;padding:0;font-size:0}.OwO .OwO-body .OwO-bar .OwO-packages li{list-style-type:none;display:inline-block;line-height:30px;font-size:14px;padding:0 10px;cursor:pointer;margin-right:3px}.OwO .OwO-body .OwO-bar .OwO-packages li:nth-child(1){border-radius:0 0 0 3px}.OwO .OwO-body .OwO-bar .OwO-packages li:hover{background:#eee}.OwO .OwO-body .OwO-bar .OwO-packages .OwO-package-active{background:#eee;-webkit-transition:.3s;transition:.3s}@-webkit-keyframes a{2%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}4%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}6%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}8%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}10%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}12%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}14%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}16%{-webkit-transform:translateY(-.5px) rotate(-1.5deg);transform:translateY(-.5px) rotate(-1.5deg)}18%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}20%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}22%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}24%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}26%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}28%{-webkit-transform:translateY(.5px) rotate(1.5deg);transform:translateY(.5px) rotate(1.5deg)}30%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}32%,34%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}36%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}38%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}40%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}42%{-webkit-transform:translateY(2.5px) rotate(-1.5deg);transform:translateY(2.5px) rotate(-1.5deg)}44%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}46%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}48%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}50%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}52%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}54%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}56%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}58%{-webkit-transform:translateY(.5px) rotate(2.5deg);transform:translateY(.5px) rotate(2.5deg)}60%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}62%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}64%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}66%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}68%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}70%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}72%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}74%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}76%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}78%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}80%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}82%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}84%{-webkit-transform:translateY(1.5px) rotate(2.5deg);transform:translateY(1.5px) rotate(2.5deg)}86%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}88%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}90%{-webkit-transform:translateY(2.5px) rotate(-.5deg);transform:translateY(2.5px) rotate(-.5deg)}92%{-webkit-transform:translateY(.5px) rotate(-.5deg);transform:translateY(.5px) rotate(-.5deg)}94%{-webkit-transform:translateY(2.5px) rotate(.5deg);transform:translateY(2.5px) rotate(.5deg)}96%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}98%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}0%,to{-webkit-transform:translate(0) rotate(0deg);transform:translate(0) rotate(0deg)}}@keyframes a{2%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}4%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}6%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}8%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}10%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}12%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}14%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}16%{-webkit-transform:translateY(-.5px) rotate(-1.5deg);transform:translateY(-.5px) rotate(-1.5deg)}18%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}20%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}22%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}24%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}26%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}28%{-webkit-transform:translateY(.5px) rotate(1.5deg);transform:translateY(.5px) rotate(1.5deg)}30%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}32%,34%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}36%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}38%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}40%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}42%{-webkit-transform:translateY(2.5px) rotate(-1.5deg);transform:translateY(2.5px) rotate(-1.5deg)}44%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}46%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}48%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}50%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}52%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}54%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}56%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}58%{-webkit-transform:translateY(.5px) rotate(2.5deg);transform:translateY(.5px) rotate(2.5deg)}60%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}62%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}64%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}66%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}68%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}70%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}72%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}74%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}76%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}78%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}80%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}82%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}84%{-webkit-transform:translateY(1.5px) rotate(2.5deg);transform:translateY(1.5px) rotate(2.5deg)}86%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}88%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}90%{-webkit-transform:translateY(2.5px) rotate(-.5deg);transform:translateY(2.5px) rotate(-.5deg)}92%{-webkit-transform:translateY(.5px) rotate(-.5deg);transform:translateY(.5px) rotate(-.5deg)}94%{-webkit-transform:translateY(2.5px) rotate(.5deg);transform:translateY(2.5px) rotate(.5deg)}96%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}98%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}0%,to{-webkit-transform:translate(0) rotate(0deg);transform:translate(0) rotate(0deg)}} \ No newline at end of file diff --git a/dist/OwO.min.js b/dist/OwO.min.js index f9bb11d..9e62f8f 100644 --- a/dist/OwO.min.js +++ b/dist/OwO.min.js @@ -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=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 \n
',s=0;s';var n=this.odata[this.packages[s]].container;console.log(n);for(var i=0;i'+n[i].icon+"";a+="\n "}a+='\n
\n
    ';for(var o=0;o"+this.packages[o]+"";a+="\n
\n
\n
\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=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 \n
',s=0;s';for(var n=this.odata[this.packages[s]].container,i=0;i'+n[i].icon+"";a+="\n "}a+='\n
\n
    ';for(var o=0;o"+this.packages[o]+"";a+="\n
\n
\n
\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 {\n class OwO {\n constructor(option) {\n const defaultOption = {\n container: document.getElementsByClassName('OwO')[0],\n target: document.getElementsByTagName('textarea')[0],\n dataURL: 'https://api.anotherhome.net/OwO/OwO.json'\n };\n for (let defaultKey in defaultOption) {\n if (defaultOption.hasOwnProperty(defaultKey) && !option.hasOwnProperty(defaultKey)) {\n option[defaultKey] = defaultOption[defaultKey];\n }\n }\n this.container = option.container;\n this.target = option.target;\n\n const xhr = new XMLHttpRequest();\n xhr.onreadystatechange = () => {\n if (xhr.readyState === 4) {\n if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {\n this.odata = JSON.parse(xhr.responseText);\n this.init(option);\n }\n else {\n console.log('OwO data request was unsuccessful: ' + xhr.status);\n }\n }\n };\n xhr.open('get', option.dataURL, true);\n xhr.send(null);\n }\n\n init(option) {\n this.area = option.target;\n this.packages = Object.keys(this.odata);\n\n // fill in HTML\n let html = `\n
${option.logo}
\n
`;\n \n for (let i = 0; i < this.packages.length; i++) {\n\n html += `\n
    `;\n\n let opackage = this.odata[this.packages[i]].container;\n console.log(opackage);\n for (let i = 0; i < opackage.length; i++) {\n\n html += `\n
  • ${opackage[i].icon}
    • `;\n\n }\n\n html += `\n
`;\n }\n \n html += `\n
\n
    `;\n\n for (let i = 0; i < this.packages.length; i++) {\n\n html += `\n
  • ${this.packages[i]}
    • `\n\n }\n\n html += `\n
\n
\n
\n `;\n this.container.innerHTML = html;\n\n // bind event\n this.logo = this.container.getElementsByClassName('OwO-logo')[0];\n this.logo.addEventListener('click', () => {\n this.toggle();\n });\n\n this.container.getElementsByClassName('OwO-body')[0].addEventListener('click', (e)=> {\n let target = null;\n if (e.target.classList.contains('OwO-item')) {\n target = e.target;\n }\n else if (e.target.parentNode.classList.contains('OwO-item')) {\n target = e.target.parentNode;\n }\n if (target) {\n const cursorPos = this.area.selectionEnd;\n let areaValue = this.area.value;\n this.area.value = areaValue.slice(0, cursorPos) + target.innerHTML + areaValue.slice(cursorPos);\n this.area.focus();\n }\n });\n\n this.packagesEle = this.container.getElementsByClassName('OwO-packages')[0];\n for (let i = 0; i < this.packagesEle.children.length; i++) {\n ((index) =>{\n this.packagesEle.children[i].addEventListener('click', () => {\n this.tab(index);\n });\n })(i);\n }\n\n this.tab(0);\n }\n\n toggle() {\n if (this.container.classList.contains('OwO-open')) {\n this.container.classList.remove('OwO-open');\n }\n else {\n this.container.classList.add('OwO-open');\n }\n }\n\n tab(index) {\n const itemsShow = this.container.getElementsByClassName('OwO-items-show')[0];\n if (itemsShow) {\n itemsShow.classList.remove('OwO-items-show');\n }\n this.container.getElementsByClassName('OwO-items')[index].classList.add('OwO-items-show');\n\n const packageActive = this.container.getElementsByClassName('OwO-package-active')[0];\n if (packageActive) {\n packageActive.classList.remove('OwO-package-active');\n }\n this.packagesEle.getElementsByTagName('li')[index].classList.add('OwO-package-active');\n }\n }\n if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {\n module.exports = OwO;\n }\n else {\n window.OwO = OwO;\n }\n})();"],"sourceRoot":"/source/"} \ No newline at end of file +{"version":3,"sources":["OwO.js"],"names":["_classCallCheck","instance","Constructor","TypeError","_createClass","defineProperties","target","props","i","length","descriptor","enumerable","configurable","writable","Object","defineProperty","key","protoProps","staticProps","prototype","OwO","option","_this","this","defaultOption","logo","container","document","getElementsByClassName","getElementsByTagName","position","width","maxHeight","api","defaultKey","hasOwnProperty","classList","add","xhr","XMLHttpRequest","onreadystatechange","readyState","status","odata","JSON","parse","responseText","init","console","log","open","send","value","_this2","area","packages","keys","html","type","parseInt","opackage","_i","text","icon","_i2","innerHTML","addEventListener","toggle","e","contains","parentNode","cursorPos","selectionEnd","areaValue","slice","focus","packagesEle","_loop","_i3","index","children","tab","remove","itemsShow","packageActive","module","exports","window"],"mappings":"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","file":"OwO.min.js","sourcesContent":["(() => {\n class OwO {\n constructor(option) {\n const defaultOption = {\n logo: 'OwO表情',\n container: document.getElementsByClassName('OwO')[0],\n target: document.getElementsByTagName('textarea')[0],\n position: 'down',\n width: '100%',\n maxHeight: '250px',\n api: 'https://api.anotherhome.net/OwO/OwO.json'\n };\n for (let defaultKey in defaultOption) {\n if (defaultOption.hasOwnProperty(defaultKey) && !option.hasOwnProperty(defaultKey)) {\n option[defaultKey] = defaultOption[defaultKey];\n }\n }\n this.container = option.container;\n this.target = option.target;\n if (option.position === 'up') {\n this.container.classList.add('OwO-up');\n }\n\n const xhr = new XMLHttpRequest();\n xhr.onreadystatechange = () => {\n if (xhr.readyState === 4) {\n if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {\n this.odata = JSON.parse(xhr.responseText);\n this.init(option);\n }\n else {\n console.log('OwO data request was unsuccessful: ' + xhr.status);\n }\n }\n };\n xhr.open('get', option.api, true);\n xhr.send(null);\n }\n\n init(option) {\n this.area = option.target;\n this.packages = Object.keys(this.odata);\n\n // fill in HTML\n let html = `\n
${option.logo}
\n
`;\n \n for (let i = 0; i < this.packages.length; i++) {\n\n html += `\n
    `;\n\n let opackage = this.odata[this.packages[i]].container;\n for (let i = 0; i < opackage.length; i++) {\n\n html += `\n
  • ${opackage[i].icon}
    • `;\n\n }\n\n html += `\n
`;\n }\n \n html += `\n
\n
    `;\n\n for (let i = 0; i < this.packages.length; i++) {\n\n html += `\n
  • ${this.packages[i]}
    • `\n\n }\n\n html += `\n
\n
\n
\n `;\n this.container.innerHTML = html;\n\n // bind event\n this.logo = this.container.getElementsByClassName('OwO-logo')[0];\n this.logo.addEventListener('click', () => {\n this.toggle();\n });\n\n this.container.getElementsByClassName('OwO-body')[0].addEventListener('click', (e)=> {\n let target = null;\n if (e.target.classList.contains('OwO-item')) {\n target = e.target;\n }\n else if (e.target.parentNode.classList.contains('OwO-item')) {\n target = e.target.parentNode;\n }\n if (target) {\n const cursorPos = this.area.selectionEnd;\n let areaValue = this.area.value;\n this.area.value = areaValue.slice(0, cursorPos) + target.innerHTML + areaValue.slice(cursorPos);\n this.area.focus();\n }\n });\n\n this.packagesEle = this.container.getElementsByClassName('OwO-packages')[0];\n for (let i = 0; i < this.packagesEle.children.length; i++) {\n ((index) =>{\n this.packagesEle.children[i].addEventListener('click', () => {\n this.tab(index);\n });\n })(i);\n }\n\n this.tab(0);\n }\n\n toggle() {\n if (this.container.classList.contains('OwO-open')) {\n this.container.classList.remove('OwO-open');\n }\n else {\n this.container.classList.add('OwO-open');\n }\n }\n\n tab(index) {\n const itemsShow = this.container.getElementsByClassName('OwO-items-show')[0];\n if (itemsShow) {\n itemsShow.classList.remove('OwO-items-show');\n }\n this.container.getElementsByClassName('OwO-items')[index].classList.add('OwO-items-show');\n\n const packageActive = this.container.getElementsByClassName('OwO-package-active')[0];\n if (packageActive) {\n packageActive.classList.remove('OwO-package-active');\n }\n this.packagesEle.getElementsByTagName('li')[index].classList.add('OwO-package-active');\n }\n }\n if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {\n module.exports = OwO;\n }\n else {\n window.OwO = OwO;\n }\n})();"],"sourceRoot":"/source/"} \ No newline at end of file diff --git a/src/OwO.js b/src/OwO.js index 6a9e72b..61fd5fa 100644 --- a/src/OwO.js +++ b/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 += ` -
    `; +
      `; let opackage = this.odata[this.packages[i]].container; - console.log(opackage); for (let i = 0; i < opackage.length; i++) { html += ` diff --git a/src/OwO.scss b/src/OwO.scss index f5d5633..04c919d 100644 --- a/src/OwO.scss +++ b/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; }