├── .npmignore ├── .gitignore ├── src ├── sass │ ├── _overlay.scss │ ├── style.scss │ ├── _window.scss │ ├── _content.scss │ ├── _input.scss │ ├── _topbar.scss │ ├── _progress.scss │ ├── _base.scss │ ├── _push.scss │ ├── _notification.scss │ └── _modal.scss ├── js │ ├── button.js │ ├── index.js │ ├── progress.js │ ├── animation.js │ ├── notification.js │ ├── input.js │ ├── frames.js │ ├── modal.js │ ├── push.js │ ├── utility.js │ └── window.js └── svg │ └── sprite.svg ├── LICENSE ├── package.json ├── gulpfile.js ├── README.md ├── webpack.config.js └── dist ├── windowise.min.css └── windowise.min.js /.npmignore: -------------------------------------------------------------------------------- 1 | *.map 2 | test/ -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *.map 3 | node_modules/ 4 | test/ 5 | dist/windowise.css 6 | dist/windowise.js -------------------------------------------------------------------------------- /src/sass/_overlay.scss: -------------------------------------------------------------------------------- 1 | .wwise-overlay { 2 | position: fixed; 3 | left: 0; 4 | top: 0; 5 | width: 100vw; 6 | height: 100vh; 7 | background: rgba(50,50,50,.5); 8 | } -------------------------------------------------------------------------------- /src/sass/style.scss: -------------------------------------------------------------------------------- 1 | @import 'base'; 2 | @import 'overlay'; 3 | @import 'window'; 4 | @import 'topbar'; 5 | @import 'content'; 6 | @import 'modal'; 7 | @import 'notification'; 8 | @import 'push'; 9 | @import 'progress'; 10 | @import 'input'; -------------------------------------------------------------------------------- /src/js/button.js: -------------------------------------------------------------------------------- 1 | import Utility from './utility'; 2 | 3 | let Button = {}; 4 | 5 | Button.create = (options) => { 6 | let className = 'button' + (options.type ? (' ' + options.type) : ''); 7 | let button = Utility.createDiv(className, options.text); 8 | button.addEventListener('click', options.onClick); 9 | return button; 10 | }; 11 | 12 | export default Button; -------------------------------------------------------------------------------- /src/sass/_window.scss: -------------------------------------------------------------------------------- 1 | .wwise { 2 | position: absolute; 3 | left: 0; 4 | top: 0; 5 | display: flex; 6 | flex-direction: column; 7 | border-radius: 5px; 8 | box-shadow: 1px 1px 10px rgba(150,150,150,.5); 9 | box-sizing: border-box; 10 | 11 | &.no-radius { 12 | border-radius: 0; 13 | } 14 | 15 | * { 16 | box-sizing: border-box; 17 | } 18 | 19 | .clear { 20 | clear: both; 21 | } 22 | } -------------------------------------------------------------------------------- /src/sass/_content.scss: -------------------------------------------------------------------------------- 1 | .wwise { 2 | > .content { 3 | padding: 0; 4 | margin: 0; 5 | flex-grow: 1; 6 | border-radius: 0 0 4px 4px; 7 | background: white; 8 | color: #333; 9 | box-shadow: 0 1px 3px rgba(200,200,200,.5) inset; 10 | 11 | &.no-topbar { 12 | border-radius: 4px; 13 | box-shadow: none; 14 | } 15 | } 16 | 17 | &.no-radius > .content, 18 | &.no-radius > .content.no-topbar { 19 | border-radius: 0; 20 | } 21 | } -------------------------------------------------------------------------------- /src/sass/_input.scss: -------------------------------------------------------------------------------- 1 | .wwise { 2 | .input-wrapper { 3 | margin: 15px auto -15px auto; 4 | 5 | .input { 6 | display: block; 7 | margin: 0 auto; 8 | width: 95%; 9 | max-width: 300px; 10 | outline: none; 11 | border: none; 12 | background: #f3f3f3; 13 | padding: 15px; 14 | font-size: 16px; 15 | border-radius: 5px; 16 | } 17 | 18 | .error { 19 | width: 95%; 20 | text-align: center; 21 | margin-top: 10px; 22 | color: red; 23 | } 24 | } 25 | } -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | import Window from './window'; 2 | import Modal from './modal'; 3 | import Nft from './notification'; 4 | import Push from './push'; 5 | import Progress from './progress'; 6 | import Input from './input'; 7 | import Utility from './utility'; 8 | import SVG from 'svg/sprite.svg'; 9 | 10 | // Add icons 11 | window.addEventListener('load', () => { 12 | let dom = document.createElement('div'); 13 | 14 | dom.setAttribute('hidden', ''); 15 | dom.innerHTML = SVG; 16 | document.body.insertBefore(dom, document.body.firstChild); 17 | }); 18 | 19 | export { Window, Modal, Nft, Push, Progress, Input, Utility }; -------------------------------------------------------------------------------- /src/sass/_topbar.scss: -------------------------------------------------------------------------------- 1 | .wwise { 2 | .topbar { 3 | flex-grow: 0; 4 | width: 100%; 5 | border-radius: 4px 4px 0 0; 6 | background: rgba($color-info, .95); 7 | 8 | .control { 9 | float: right; 10 | height: 40px; 11 | padding: 10px 10px 0 0; 12 | 13 | > * { 14 | display: inline-block; 15 | margin: 0 3px; 16 | } 17 | 18 | .icon { 19 | width: 13px; 20 | height: 13px; 21 | margin: 0 3px; 22 | fill: rgba(#ccc, .8); 23 | transition: fill ease .2s; 24 | 25 | &:hover { 26 | cursor: pointer; 27 | fill: #eee; 28 | } 29 | } 30 | } 31 | 32 | .title { 33 | padding: 10px 60px 10px 15px; 34 | font-size: 15px; 35 | user-select: none; 36 | cursor: default; 37 | font-weight: bold; 38 | color: #fff; 39 | } 40 | } 41 | 42 | &.no-radius .topbar { 43 | border-radius: 0; 44 | } 45 | } -------------------------------------------------------------------------------- /src/sass/_progress.scss: -------------------------------------------------------------------------------- 1 | .wwise-progress { 2 | position: relative; 3 | margin: 10px auto; 4 | width: 95%; 5 | max-width: 300px; 6 | height: 3px; 7 | background: rgba(#ddd, .8); 8 | border-radius: 3px; 9 | overflow: hidden; 10 | 11 | .wait { 12 | position: absolute; 13 | top: 0; 14 | width: 30px; 15 | height: 3px; 16 | background: #eee; 17 | background: linear-gradient(to right, rgba(#ddd, 0), rgba(#fff, .8), rgba(#ddd, 0)); 18 | animation-name: wwise-progress; 19 | animation-iteration-count: infinite; 20 | animation-duration: 2s; 21 | } 22 | 23 | .bar { 24 | position: absolute; 25 | left: 0; 26 | top: 0; 27 | width: 0; 28 | height: 3px; 29 | border-radius: 3px; 30 | background: #fff; 31 | transition: width linear .2s; 32 | } 33 | } 34 | 35 | @keyframes wwise-progress { 36 | from { 37 | left: -30px; 38 | } 39 | 40 | to { 41 | left: calc(100% + 30px); 42 | } 43 | } -------------------------------------------------------------------------------- /src/js/progress.js: -------------------------------------------------------------------------------- 1 | import Utility from './utility'; 2 | 3 | class Progress { 4 | constructor(options) { 5 | (options === undefined) && (options = {}); 6 | 7 | let background = null; 8 | 9 | if(options.percentage) { 10 | (options.color) && (background = options.color); 11 | 12 | this.bar = Utility.createDiv('bar'); 13 | this.dom = Utility.createDomTree({ 14 | dom: Utility.createDiv('wwise-progress'), 15 | children: [ this.bar ] 16 | }); 17 | } else { 18 | (options.color) && (background = 'linear-gradient(to right, rgba(221, 221, 221, 0), ' + options.color + ', rgba(221, 221, 221, 0))'); 19 | 20 | this.bar = Utility.createDiv('wait'); 21 | this.dom = Utility.createDomTree({ 22 | dom: Utility.createDiv('wwise-progress'), 23 | children: [ this.bar ] 24 | }); 25 | } 26 | 27 | this.bar.style.background = background; 28 | } 29 | 30 | set(value) { 31 | (value > 100) && (value = 100); 32 | this.bar.style.width = value + '%'; 33 | } 34 | 35 | } 36 | 37 | export default Progress; -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/sass/_base.scss: -------------------------------------------------------------------------------- 1 | $color-ok: #2dc150; 2 | $color-error: #BE1133; 3 | $color-info: #2A80FF; 4 | $color-caution: #EF8000; 5 | $color-nft-ok: darken($color-ok, 5%); 6 | 7 | .wwise-perspective { 8 | perspective: 1000px; 9 | position: fixed; 10 | left: 0; 11 | top: 0; 12 | width: 100vw; 13 | height: 100vh; 14 | } 15 | 16 | .wwise-wrapper { 17 | position: fixed; 18 | width: 0; 19 | height: 0; 20 | font-weight: 400; 21 | 22 | &.v-center { 23 | top: 50%; 24 | } 25 | 26 | &.h-center { 27 | left: 50%; 28 | } 29 | 30 | &.left { 31 | left: 0; 32 | } 33 | 34 | &.right { 35 | right: 0; 36 | } 37 | 38 | &.top { 39 | top: 0; 40 | } 41 | 42 | &.bottom { 43 | bottom: 0; 44 | } 45 | } 46 | 47 | .wwise { 48 | *.preset { 49 | color: #fafafa; 50 | 51 | &.ok { 52 | background: rgba($color-ok, .95); 53 | } 54 | 55 | &.error { 56 | background: rgba($color-error, .95); 57 | } 58 | 59 | &.info { 60 | background: rgba($color-info, .95); 61 | } 62 | 63 | &.caution { 64 | background: rgba($color-caution, .95); 65 | } 66 | } 67 | } 68 | 69 | .wwise-no-scroll { 70 | position: relative; 71 | overflow: hidden; 72 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "windowise", 3 | "version": "1.0.6", 4 | "description": "Wisely create window/modal/notification/push in webpages.", 5 | "main": "dist/windowise.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/gao-sun/windowise.git" 12 | }, 13 | "keywords": [ 14 | "js", 15 | "css", 16 | "modal", 17 | "dialog", 18 | "window", 19 | "notification", 20 | "popup", 21 | "push" 22 | ], 23 | "author": "Gao Sun", 24 | "license": "MIT", 25 | "bugs": { 26 | "url": "https://github.com/gao-sun/windowise/issues" 27 | }, 28 | "homepage": "https://gao-sun.github.io/windowise/", 29 | "devDependencies": { 30 | "babel-core": "^6.23.1", 31 | "babel-loader": "^6.4.0", 32 | "babel-preset-es2015": "^6.22.0", 33 | "gulp": "^3.9.1", 34 | "gulp-autoprefixer": "^3.1.1", 35 | "gulp-clean-css": "^3.0.3", 36 | "gulp-rename": "^1.2.2", 37 | "gulp-sass": "^3.1.0", 38 | "raw-loader": "^0.5.1", 39 | "webpack": "^2.2.1", 40 | "webpack-stream": "^3.2.0" 41 | }, 42 | "dependencies": { 43 | "animatorjs": "^1.0.0" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/sass/_push.scss: -------------------------------------------------------------------------------- 1 | .wwise { 2 | .push { 3 | width: 100vw; 4 | background: rgba(250,250,250,.95); 5 | cursor: default; 6 | padding: 5px 0; 7 | 8 | .content { 9 | padding: 10px; 10 | margin: 0; 11 | font-size: 17px; 12 | 13 | > * { 14 | display: inline-block; 15 | vertical-align: top; 16 | } 17 | 18 | .icon { 19 | margin-top: 2px; 20 | margin-right: 10px; 21 | width: 18px; 22 | height: 18px; 23 | fill: #f8f8f8; 24 | } 25 | } 26 | 27 | .button-wrapper { 28 | display: flex; 29 | flex-wrap: wrap; 30 | justify-content: center; 31 | 32 | > * { 33 | flex-shrink: 0; 34 | max-width: 300px; 35 | width: 100%; 36 | margin: 10px; 37 | } 38 | 39 | .button { 40 | border: 1px solid rgba(#eee, .9); 41 | border-radius: 4px; 42 | padding: 5px 0; 43 | font-size: 14px; 44 | color: #eee; 45 | transition: all ease .2s; 46 | 47 | &:hover { 48 | cursor: pointer; 49 | border-color: #d5d5d5; 50 | color: #d5d5d5; 51 | } 52 | 53 | &.main { 54 | background: rgba(#f8f8f8, .9); 55 | color: rgba(#555, .8); 56 | 57 | &:hover { 58 | background: rgba(#e8e8e8, .9); 59 | } 60 | } 61 | } 62 | } 63 | } 64 | } -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const minifyCss = require('gulp-clean-css'); 3 | const sass = require('gulp-sass'); 4 | const rename = require('gulp-rename'); 5 | const autoprefixer = require('gulp-autoprefixer'); 6 | const webpack2 = require('webpack'); 7 | const webpackStream = require('webpack-stream'); 8 | const webpackConfig = require('./webpack.config'); 9 | 10 | const paths = { 11 | sass: 'src/sass/**/*.scss' 12 | }; 13 | 14 | const getSass = () => { 15 | return gulp.src(paths.sass) 16 | .pipe(sass()) 17 | .pipe(autoprefixer({ 18 | browsers: ['last 10 versions'], 19 | cascade: false 20 | })); 21 | }; 22 | 23 | gulp.task('sass', function() { 24 | getSass() 25 | .pipe(rename('windowise.css')) 26 | .pipe(gulp.dest('dist/')); 27 | 28 | return getSass() 29 | .pipe(minifyCss()) 30 | .pipe(rename('windowise.min.css')) 31 | .pipe(gulp.dest('dist/')); 32 | }); 33 | 34 | 35 | gulp.task('app', function() { 36 | return gulp.src('') 37 | .pipe(webpackStream(webpackConfig, webpack2)) 38 | .pipe(gulp.dest('dist/')); 39 | }); 40 | 41 | // Whole build 42 | gulp.task('build', ['sass', 'app']); 43 | 44 | gulp.task('watch', function() { 45 | return gulp.watch(paths.sass, ['sass']); 46 | }); 47 | 48 | gulp.task('default', ['build', 'watch']); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Windowise 2 | 3 | ## Live Demos & Docs 4 | [https://gao-sun.github.io/windowise](https://gao-sun.github.io/windowise) 5 | 6 | ## Unified 7 | 8 | We have different kinds of windows in our webpage. Windowise helps you to have unified UI style and manage them in an easy way! 9 | 10 | ## Promise-based 11 | 12 | Windowise is a Promise-based library, and Promise has been supported by [all modern browsers](http://caniuse.com/#feat=promises). It helps you to avoid callback hells and write more readable codes. 13 | 14 | ## Get Started 15 | 16 | 1.Install via npm 17 | ```bash 18 | npm install windowise 19 | ``` 20 | 21 | ```js 22 | // In JavaScript 23 | import { Window, Modal, Nft, Push, Progress, Input } from 'windowise'; 24 | import Style from 'windowise/dist/windowise.css'; 25 | ``` 26 | 27 | 2.CDN 28 | 29 | ```html 30 | 31 | 32 | ``` 33 | 34 | 3.Download from dist/ in Github repository 35 | 36 | ## Contributing 37 | 38 | Please leave an issue if you find any bugs, I will fix it ASAP. 39 | 40 | Please read the simple [guideline](https://gao-sun.github.io/windowise/#guideline) before you develop your own component which is based on Windowise. -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | const path = require('path'); 3 | const src = path.resolve('./src/'); 4 | const dist = path.resolve('./dist/'); 5 | const PACKAGE = require('./package.json'); 6 | 7 | const banner = 8 | 'Windowise' + ' - v' + PACKAGE.version + ' | ' + 9 | PACKAGE.author + ' | ' + 10 | PACKAGE.license + ' | ' + 11 | PACKAGE.homepage; 12 | 13 | module.exports = { 14 | watch: true, 15 | // devtool: 'source-map', 16 | context: src, 17 | entry: { 18 | 'windowise': './js/index', 19 | 'windowise.min': './js/index', 20 | }, 21 | resolve: { 22 | alias: { 23 | svg: path.resolve('./src/svg/') 24 | } 25 | }, 26 | output: { 27 | filename: '[name].js', 28 | path: dist, 29 | library: ['Windowise'], 30 | libraryTarget: 'umd' 31 | }, 32 | module: { 33 | rules: [ 34 | { 35 | test: /\.js$/, 36 | exclude: /node_modules/, 37 | use: [ 38 | { 39 | loader: 'babel-loader', 40 | query: { 41 | presets: [ 'es2015' ] 42 | } 43 | } 44 | ] 45 | }, 46 | { 47 | test: /\.svg$/, 48 | exclude: /node_modules/, 49 | use: 'raw-loader' 50 | } 51 | ] 52 | }, 53 | plugins: [ 54 | new webpack.optimize.UglifyJsPlugin({ 55 | include: /\.min\.js$/, 56 | minimize: true 57 | }), 58 | new webpack.BannerPlugin(banner) 59 | ] 60 | }; -------------------------------------------------------------------------------- /src/js/animation.js: -------------------------------------------------------------------------------- 1 | import { Frame } from 'animatorjs'; 2 | import frames from './frames'; 3 | 4 | let Animation = {}; 5 | 6 | Animation.overlay_in = [ 7 | new Frame(frames['wwise-overlay-in-1'], 0), 8 | new Frame(frames['wwise-overlay-in-2'], 400) 9 | ]; 10 | 11 | Animation.overlay_out = [ 12 | new Frame(frames['wwise-overlay-out-1'], 300) 13 | ]; 14 | 15 | Animation.pop_in = [ 16 | new Frame(frames['wwise-pop-in-1'], 0), 17 | new Frame(frames['wwise-pop-in-2'], { duration: 200, 'timing-function': 'ease-in' }), 18 | new Frame(frames['wwise-pop-in-3'], { duration: 100, 'timing-function': 'linear' }), 19 | new Frame(frames['wwise-pop-in-4'], { duration: 100, 'timing-function': 'linear' }) 20 | ]; 21 | 22 | Animation.pop_out = [ 23 | new Frame(frames['wwise-pop-out-1'], { duration: 250, 'timing-function': 'ease-in' }) 24 | ]; 25 | 26 | Animation.flip_in = [ 27 | new Frame(frames['wwise-flip-in-1'], 0), 28 | new Frame(frames['wwise-flip-in-2'], 500) 29 | ]; 30 | 31 | Animation.flip_out = [ 32 | new Frame(frames['wwise-flip-out-1'], 400) 33 | ]; 34 | 35 | Animation.min_in = [ 36 | new Frame(frames['wwise-min-in-1'], 0), 37 | new Frame(frames['wwise-min-in-2'], 350) 38 | ]; 39 | 40 | Animation.min_out = [ 41 | new Frame(frames['wwise-min-out-1'], 400) 42 | ]; 43 | 44 | let dirs = ['top', 'bottom', 'left', 'right']; 45 | for(let i in dirs) { 46 | let key = dirs[i]; 47 | 48 | Animation[key + '_in'] = [ 49 | new Frame(frames['wwise-' + key + '-in-1'], 0), 50 | new Frame(frames['wwise-' + key + '-in-2'], { duration: 400, 'timing-function': 'ease-out' }), 51 | ]; 52 | 53 | Animation[key + '_out'] = [ 54 | new Frame(frames['wwise-' + key + '-out-1'], { duration: 400, 'timing-function': 'ease-in' }) 55 | ]; 56 | } 57 | 58 | export default Animation; -------------------------------------------------------------------------------- /src/sass/_notification.scss: -------------------------------------------------------------------------------- 1 | .wwise { 2 | .nft { 3 | border-radius: 4px; 4 | height: 60px; 5 | display: flex; 6 | background: rgba(255,255,255,.95); 7 | cursor: default; 8 | 9 | &.preset { 10 | > .close { 11 | border-color: rgba(#eee, .6); 12 | 13 | &:hover { 14 | border-color: rgba(#fafafa, .8); 15 | } 16 | 17 | .icon { 18 | fill: rgba(#eee,.6); 19 | } 20 | 21 | &:hover { 22 | .icon { 23 | fill: #fafafa; 24 | } 25 | } 26 | } 27 | } 28 | 29 | .content { 30 | padding: 0; 31 | margin: 0; 32 | flex-grow: 1; 33 | display: flex; 34 | 35 | &.text { 36 | padding-left: 20px; 37 | } 38 | 39 | .state { 40 | position: relative; 41 | width: 60px; 42 | flex-shrink: 0; 43 | 44 | .icon { 45 | position: absolute; 46 | left: 50%; 47 | top: 50%; 48 | width: 24px; 49 | height: 24px; 50 | fill: #fafafa; 51 | transform: translate(-50%, -50%); 52 | } 53 | } 54 | 55 | .inner-content { 56 | flex-grow: 1; 57 | padding: 20px 20px 20px 0; 58 | white-space: nowrap; 59 | } 60 | } 61 | 62 | > .close { 63 | flex-shrink: 0; 64 | width: 45px; 65 | height: 100%; 66 | border-left: 1px solid #ccc; 67 | border-radius: 0 4px 4px 0; 68 | position: relative; 69 | transition: all ease .2s; 70 | 71 | .icon { 72 | position: absolute; 73 | left: 50%; 74 | top: 50%; 75 | width: 10px; 76 | height: 10px; 77 | fill: rgba(180,180,180,.8); 78 | transform: translate(-50%, -50%); 79 | transition: all ease .2s; 80 | } 81 | 82 | &:hover { 83 | border-color: #bbb; 84 | cursor: pointer; 85 | 86 | .icon { 87 | fill: #aaa; 88 | } 89 | } 90 | } 91 | } 92 | } -------------------------------------------------------------------------------- /src/sass/_modal.scss: -------------------------------------------------------------------------------- 1 | .wwise { 2 | .modal { 3 | > .main { 4 | width: 90vw; 5 | max-width: 400px; 6 | border-radius: 4px 4px 0 0; 7 | text-align: center; 8 | padding-bottom: 10px; 9 | color: white; 10 | 11 | .icon { 12 | display: block; 13 | margin: 0 auto; 14 | fill: white; 15 | width: 100px; 16 | } 17 | 18 | .title { 19 | font-size: 30px; 20 | } 21 | 22 | .text { 23 | margin: 10px 0; 24 | font-weight: 300; 25 | font-size: 16px; 26 | } 27 | 28 | &.no-op { 29 | border-radius: 4px; 30 | } 31 | 32 | &.ok { 33 | background: $color-ok; 34 | } 35 | 36 | &.error { 37 | background: $color-error; 38 | } 39 | 40 | &.info { 41 | background: $color-info; 42 | } 43 | 44 | &.caution { 45 | background: $color-caution; 46 | } 47 | } 48 | 49 | > .operation { 50 | .button-wrapper { 51 | text-align: center; 52 | margin: 30px 0 20px 0; 53 | } 54 | 55 | .button { 56 | display: inline-block; 57 | line-height: 18px; 58 | padding: 8px 10px; 59 | margin: 0 15px; 60 | line-height: 18px; 61 | width: 100px; 62 | border-radius: 4px; 63 | border: 1px solid #eee; 64 | box-shadow: 1px 1px 3px rgba(220,220,220,.8); 65 | color: #555; 66 | transition: all ease .2s; 67 | 68 | &:hover { 69 | background: #f5f5f5; 70 | cursor: pointer; 71 | } 72 | 73 | &.main { 74 | color: white; 75 | } 76 | } 77 | 78 | &.ok { 79 | .main { 80 | background: $color-ok; 81 | 82 | &:hover { 83 | background: darken($color-ok, 10%); 84 | } 85 | } 86 | } 87 | 88 | &.error { 89 | .main { 90 | background: $color-error; 91 | 92 | &:hover { 93 | background: darken($color-error, 10%); 94 | } 95 | } 96 | } 97 | 98 | &.info { 99 | .main { 100 | background: $color-info; 101 | 102 | &:hover { 103 | background: darken($color-info, 10%); 104 | } 105 | } 106 | } 107 | 108 | &.caution { 109 | .main { 110 | background: $color-caution; 111 | 112 | &:hover { 113 | background: darken($color-caution, 10%); 114 | } 115 | } 116 | } 117 | } 118 | } 119 | } -------------------------------------------------------------------------------- /src/js/notification.js: -------------------------------------------------------------------------------- 1 | import Utility from './utility'; 2 | import Window from './window'; 3 | 4 | let defaultOptions = { 5 | type: null, 6 | animation: 'right', 7 | position: 'right top', 8 | showClose: true, 9 | clickToClose: false, 10 | closeAfter: null 11 | }; 12 | 13 | class Nft { 14 | constructor(__options) { 15 | this.options = JSON.parse(JSON.stringify(defaultOptions)); 16 | for(let i in __options) { 17 | (__options[i] != undefined) && (this.options[i] = __options[i]); 18 | } 19 | 20 | this.closeHandler = this.close.bind(this); 21 | 22 | let options = this.options; 23 | let wwiseOptions = {}; 24 | 25 | wwiseOptions.topbar = false; 26 | wwiseOptions.content = this.constructContent(options); 27 | wwiseOptions.overlay = false; 28 | wwiseOptions.animation = options.animation; 29 | wwiseOptions.position = options.position; 30 | wwiseOptions.style = options.style; 31 | wwiseOptions.margin = '10px 15px'; 32 | wwiseOptions.removeBackground = true; 33 | wwiseOptions.zIndex = options.zIndex; 34 | 35 | this.wwise = new Window(wwiseOptions); 36 | } 37 | 38 | constructContent(options) { 39 | let dom = Utility.createDiv('nft' + ((options.type && options.type != 'text') ? (' preset ' + options.type) : '')); 40 | 41 | // Content 42 | let content = Utility.makeNftContent(options); 43 | 44 | let close = null; 45 | if(options.showClose) { 46 | close = Utility.createDomTree({ 47 | dom: Utility.createDiv('close'), 48 | children: [ Utility.createDiv(null, Utility.makeIconHTML('close')) ] 49 | }); 50 | 51 | close.addEventListener('click', this.closeHandler); 52 | } 53 | 54 | if(options.clickToClose) { 55 | dom.addEventListener('click', this.closeHandler); 56 | } 57 | 58 | return Utility.createDomTree({ 59 | dom: dom, 60 | children: [ content, close ] 61 | }); 62 | } 63 | 64 | open() { 65 | if(this.wwise.opened) { 66 | return; 67 | } 68 | 69 | let f = this.wwise.open(); 70 | 71 | this.promise = new Promise((resolve) => { this.promiseResolve = resolve; }); 72 | this.wwise.getPromise().then(this.promiseResolve); 73 | 74 | if(this.options.closeAfter) { 75 | window.setTimeout(() => { 76 | this.close(); 77 | }, this.options.closeAfter); 78 | } 79 | 80 | return f; 81 | } 82 | 83 | close() { 84 | if(!this.wwise.opened) { 85 | return; 86 | } 87 | 88 | return this.wwise.close(); 89 | } 90 | 91 | getPromise() { 92 | return this.promise; 93 | } 94 | } 95 | 96 | export default Nft; -------------------------------------------------------------------------------- /src/js/input.js: -------------------------------------------------------------------------------- 1 | import Utility from './utility'; 2 | import Modal from './modal'; 3 | 4 | let defaultOptions = { 5 | showCancel: false, 6 | okText: 'OK', 7 | cancelText: 'Cancel', 8 | placeholder: '', 9 | validator: null 10 | }; 11 | 12 | let defaultWwiseOptions = { 13 | type: 'info', 14 | keepOverlay: false, 15 | title: 'Input', 16 | text: '', 17 | zIndex: null, 18 | }; 19 | 20 | 21 | class Input { 22 | constructor(__options) { 23 | // Init options 24 | this.options = JSON.parse(JSON.stringify(defaultOptions)); 25 | for(let i in __options) { 26 | (__options[i] != undefined) && (this.options[i] = __options[i]); 27 | } 28 | 29 | let options = this.options; 30 | let wwiseOptions = JSON.parse(JSON.stringify(defaultWwiseOptions)); 31 | 32 | for(let i in wwiseOptions) { 33 | (options.hasOwnProperty(i)) && (wwiseOptions[i] = options[i]); 34 | } 35 | 36 | // Buttons 37 | let buttons = []; 38 | 39 | if(options.showCancel) { 40 | buttons.push({ key: 27, text: options.cancelText, normal: true, onClick: this.handleCancel.bind(this) }); 41 | } 42 | 43 | buttons.push({ key: 13, text: options.okText, onClick: this.handleOk.bind(this) }); 44 | wwiseOptions.buttons = buttons; 45 | 46 | // Input 47 | this.input = Utility.createElement('input', 'input', null, { placeholder: options.placeholder }); 48 | this.error = Utility.createDiv('error'); 49 | 50 | wwiseOptions.content = Utility.createDomTree({ 51 | dom: Utility.createDiv('input-wrapper'), 52 | children: [ this.input, this.error ] 53 | }); 54 | 55 | this.modal = new Modal(wwiseOptions); 56 | } 57 | 58 | handleCancel() { 59 | this.close().then(this.promiseReject.bind(this)); 60 | } 61 | 62 | handleOk() { 63 | if(this.options.validator) { 64 | this.options.validator(this.input.value).then( 65 | () => { this.close().then(this.promiseResolve.bind(this, this.input.value)); }, 66 | (msg) => { this.error.innerText = msg; } 67 | ); 68 | 69 | return; 70 | } 71 | 72 | this.close().then(this.promiseResolve.bind(this, this.input.value)); 73 | } 74 | 75 | open() { 76 | if(this.modal.wwise.opened) { 77 | return; 78 | } 79 | 80 | let f = this.modal.open(); 81 | this.input.value = ''; 82 | this.error.innerText = ''; 83 | this.input.focus(); 84 | this.promise = new Promise((resolve, reject) => { 85 | this.promiseResolve = resolve; 86 | this.promiseReject = reject; 87 | }); 88 | 89 | return f; 90 | } 91 | 92 | close() { 93 | if(!this.modal.wwise.opened) { 94 | return; 95 | } 96 | 97 | return this.modal.close(); 98 | } 99 | 100 | getPromise() { 101 | return this.promise; 102 | } 103 | } 104 | 105 | export default Input; -------------------------------------------------------------------------------- /src/js/frames.js: -------------------------------------------------------------------------------- 1 | let frames = {}; 2 | 3 | // Overlay 4 | frames['wwise-overlay-in-1'] = { 5 | opacity: '0', 6 | } 7 | 8 | frames['wwise-overlay-in-2'] = { 9 | opacity: '1', 10 | } 11 | 12 | frames['wwise-overlay-out-1'] = { 13 | opacity: '0', 14 | } 15 | 16 | // Pop 17 | frames['wwise-pop-in-1'] = { 18 | transform: 'scale(0.5, 0.5)', 19 | 'margin-top': '50px', 20 | opacity: '.5', 21 | } 22 | 23 | frames['wwise-pop-in-2'] = { 24 | transform: 'scale(1, 1)', 25 | 'margin-top': '0', 26 | opacity: '1', 27 | } 28 | 29 | frames['wwise-pop-in-3'] = { 30 | transform: 'scale(1.05, 1.05)', 31 | } 32 | 33 | frames['wwise-pop-in-4'] = { 34 | transform: 'scale(1, 1)', 35 | } 36 | 37 | frames['wwise-pop-out-1'] = { 38 | transform: 'scale(0.25, 0.25)', 39 | 'margin-top': '50px', 40 | opacity: '0', 41 | } 42 | 43 | // Flip 44 | 45 | frames['wwise-flip-in-1'] = { 46 | transform: 'rotateX(60deg) scaleX(.5)', 47 | opacity: '.2', 48 | } 49 | 50 | frames['wwise-flip-in-2'] = { 51 | transform: 'none', 52 | opacity: '1', 53 | } 54 | 55 | frames['wwise-flip-out-1'] = { 56 | transform: 'rotateX(60deg) scaleX(.5)', 57 | opacity: '0', 58 | } 59 | 60 | 61 | // Top 62 | frames['wwise-top-in-1'] = { 63 | transform: 'translateY(-30vh)', 64 | opacity: '.5', 65 | } 66 | 67 | frames['wwise-top-in-2'] = { 68 | transform: 'none', 69 | opacity: '1', 70 | } 71 | 72 | frames['wwise-top-out-1'] = { 73 | transform: 'translateY(-30vh)', 74 | opacity: '0', 75 | } 76 | 77 | // Bottom 78 | frames['wwise-bottom-in-1'] = { 79 | transform: 'translateY(30vh)', 80 | opacity: '.5', 81 | } 82 | 83 | frames['wwise-bottom-in-2'] = { 84 | transform: 'none', 85 | opacity: '1', 86 | } 87 | 88 | frames['wwise-bottom-out-1'] = { 89 | transform: 'translateY(30vh)', 90 | opacity: '0', 91 | } 92 | 93 | // Left 94 | frames['wwise-left-in-1'] = { 95 | transform: 'translateX(-30vw)', 96 | opacity: '.5', 97 | } 98 | 99 | frames['wwise-left-in-2'] = { 100 | transform: 'none', 101 | opacity: '1', 102 | } 103 | 104 | frames['wwise-left-out-1'] = { 105 | transform: 'translateX(-30vw)', 106 | opacity: '0', 107 | } 108 | 109 | // Right 110 | frames['wwise-right-in-1'] = { 111 | transform: 'translateX(30vw)', 112 | opacity: '.5', 113 | } 114 | 115 | frames['wwise-right-in-2'] = { 116 | transform: 'none', 117 | opacity: '1', 118 | } 119 | 120 | frames['wwise-right-out-1'] = { 121 | transform: 'translateX(30vw)', 122 | opacity: '0', 123 | } 124 | 125 | // Min 126 | frames['wwise-min-in-1'] = { 127 | 'margin-top': '0', 128 | transform: 'rotateX(-60deg) scale(0.2, 1.8) translateY(80vh)', 129 | opacity: '.2', 130 | } 131 | 132 | frames['wwise-min-in-2'] = { 133 | transform: 'none', 134 | opacity: '1', 135 | } 136 | 137 | frames['wwise-min-out-1'] = { 138 | 'margin-top': '30vh', 139 | transform: 'rotateX(-60deg) scale(0.05, 2) translateY(30vh)', 140 | opacity: '0', 141 | } 142 | 143 | export default frames; -------------------------------------------------------------------------------- /src/js/modal.js: -------------------------------------------------------------------------------- 1 | import Utility from './utility'; 2 | import Window from './window'; 3 | 4 | class Modal { 5 | constructor(__options) { 6 | let options = this.options = __options; 7 | 8 | (!options.type) && (options.type = 'ok'); 9 | 10 | let wwiseOptions = {}; 11 | 12 | wwiseOptions.topbar = false; 13 | wwiseOptions.content = this.constructContent({ 14 | type: options.type, 15 | title: options.title, 16 | text: options.text, 17 | content: options.content, 18 | buttons: options.buttons 19 | }); 20 | wwiseOptions.overlay = true; 21 | wwiseOptions.keepOverlay = options.keepOverlay; 22 | wwiseOptions.clickOverlayToClose = false; 23 | wwiseOptions.animation = options.animation; 24 | wwiseOptions.zIndex = options.zIndex; 25 | 26 | this.wwise = new Window(wwiseOptions); 27 | } 28 | 29 | constructContent(options) { 30 | let dom = Utility.createDiv('modal'); 31 | let main = Utility.createDomTree({ 32 | dom: Utility.createDiv('main ' + options.type), 33 | children: [ 34 | Utility.createDiv(null, Utility.makeIconHTML(options.type)), 35 | Utility.createDiv('title', options.title), 36 | Utility.createDiv('text', options.text) 37 | ] 38 | }); 39 | 40 | this.buttonArr = Utility.standardizeButtons(this, options); 41 | let buttons = Utility.makeButtons(this.buttonArr); 42 | 43 | // Content 44 | let content = null; 45 | if(options.content) { 46 | if(typeof options.content === 'string') { 47 | content = Utility.createDiv(null, options.content); 48 | } else { 49 | content = options.content; 50 | } 51 | } 52 | 53 | // Operations 54 | let operation = null; 55 | 56 | if(buttons.innerHTML) { 57 | operation = Utility.createDomTree({ 58 | dom: Utility.createDiv('operation ' + options.type), 59 | children: [ buttons ] 60 | }); 61 | } 62 | 63 | // Border radius 64 | if(!content && !operation) { 65 | main.classList.add('no-op'); 66 | } 67 | 68 | return Utility.createDomTree({ 69 | dom: dom, 70 | children: [ main, content, operation ] 71 | }); 72 | } 73 | 74 | open() { 75 | if(this.wwise.opened) { 76 | return; 77 | } 78 | 79 | let f = this.wwise.open(); 80 | 81 | this.value = undefined; 82 | this.promise = new Promise((resolve) => { this.promiseResolve = resolve; }); 83 | this.wwise.getPromise().then(this.handlePromiseResolve.bind(this)); 84 | this.keyHandler = Utility.bindButtonKeyEvents(this.buttonArr); 85 | 86 | if(this.options.closeAfter) { 87 | window.setTimeout(() => { 88 | this.close('timer'); 89 | }, this.options.closeAfter); 90 | } 91 | 92 | return f; 93 | } 94 | 95 | close(value) { 96 | if(!this.wwise.opened) { 97 | return; 98 | } 99 | 100 | this.value = value; 101 | Utility.unbindButtonKeyEvents(this.keyHandler); 102 | return this.wwise.close(); 103 | } 104 | 105 | getPromise() { 106 | return this.promise; 107 | } 108 | 109 | handlePromiseResolve() { 110 | this.promiseResolve(this.value); 111 | } 112 | } 113 | 114 | export default Modal; -------------------------------------------------------------------------------- /src/js/push.js: -------------------------------------------------------------------------------- 1 | import Utility from './utility'; 2 | import Window from './window'; 3 | 4 | let defaultOptions = { 5 | type: null, 6 | textAlign: 'center', 7 | clickToClose: false, 8 | closeAfter: null, 9 | buttons: undefined, 10 | }; 11 | 12 | let defaultWwiseOptions = { 13 | position: 'top', 14 | overlay: false, 15 | clickOverlayToClose: false, 16 | style: null, 17 | zIndex: null, 18 | }; 19 | 20 | class Push { 21 | constructor(__options) { 22 | this.options = JSON.parse(JSON.stringify(defaultOptions)); 23 | for(let i in __options) { 24 | (__options[i] != undefined) && (this.options[i] = __options[i]); 25 | } 26 | 27 | this.closeHandler = this.close.bind(this, 'click'); 28 | 29 | let options = this.options; 30 | let wwiseOptions = JSON.parse(JSON.stringify(defaultWwiseOptions)); 31 | 32 | (options.buttons === undefined) && (options.buttons = []); 33 | 34 | for(let i in wwiseOptions) { 35 | (options.hasOwnProperty(i)) && (wwiseOptions[i] = options[i]); 36 | } 37 | 38 | wwiseOptions.topbar = false; 39 | wwiseOptions.content = this.constructContent(options); 40 | wwiseOptions.animation = wwiseOptions.position; 41 | wwiseOptions.removeBackground = true; 42 | 43 | this.wwise = new Window(wwiseOptions); 44 | } 45 | 46 | constructContent(options) { 47 | let dom = Utility.createDiv('push' + ((options.type && options.type != 'text') ? (' preset ' + options.type) : '')); 48 | 49 | dom.style.textAlign = options.textAlign; 50 | 51 | // Content 52 | let content = Utility.makeNftContent(options); 53 | 54 | let append = (options.append) ? ( (typeof options.append === 'string') ? Utility.createDiv(null, options.append) : options.append ) : null; 55 | 56 | this.buttonArr = Utility.standardizeButtons(this, options); 57 | let buttons = Utility.makeButtons(this.buttonArr); 58 | 59 | (!buttons.innerHTML) && (buttons = null); 60 | 61 | if(options.clickToClose) { 62 | dom.addEventListener('click', this.closeHandler); 63 | } 64 | 65 | return Utility.createDomTree({ 66 | dom: dom, 67 | children: [ content, append, buttons ] 68 | }); 69 | } 70 | 71 | open() { 72 | if(this.wwise.opened) { 73 | return; 74 | } 75 | 76 | let f = this.wwise.open(); 77 | 78 | this.promise = new Promise((resolve) => { this.promiseResolve = resolve; }); 79 | this.wwise.getPromise().then(this.handlePromiseResolve.bind(this)); 80 | this.keyHandler = Utility.bindButtonKeyEvents(this.buttonArr); 81 | 82 | if(this.options.closeAfter) { 83 | window.setTimeout(() => { 84 | this.close('timer'); 85 | }, this.options.closeAfter); 86 | } 87 | 88 | return f; 89 | } 90 | 91 | close(value) { 92 | if(!this.wwise.opened) { 93 | return; 94 | } 95 | 96 | this.value = value; 97 | Utility.unbindButtonKeyEvents(this.keyHandler); 98 | return this.wwise.close(); 99 | } 100 | 101 | getPromise() { 102 | return this.promise; 103 | } 104 | 105 | handlePromiseResolve() { 106 | this.promiseResolve(this.value); 107 | } 108 | } 109 | 110 | export default Push; -------------------------------------------------------------------------------- /src/svg/sprite.svg: -------------------------------------------------------------------------------- 1 | linecancelclosetickdangerinfo-button -------------------------------------------------------------------------------- /src/js/utility.js: -------------------------------------------------------------------------------- 1 | import Button from './button'; 2 | 3 | let Utility = {}; 4 | 5 | Utility.createElement = (tag, className, innerHTML, attributes) => { 6 | let dom = document.createElement(tag); 7 | 8 | (className) && (dom.className = className); 9 | (innerHTML) && (dom.innerHTML = innerHTML); 10 | if(attributes) { 11 | for(let i in attributes) { 12 | dom.setAttribute(i, attributes[i]); 13 | } 14 | } 15 | 16 | return dom; 17 | }; 18 | 19 | Utility.createDiv = (className, innerHTML, attributes) => { 20 | return Utility.createElement('div', className, innerHTML, attributes); 21 | }; 22 | 23 | Utility.createDomTree = (tree) => { 24 | if(!tree || !tree.hasOwnProperty('dom')) { 25 | return tree; 26 | } 27 | 28 | let dom = tree.dom; 29 | 30 | if(tree.children) { 31 | for(let i in tree.children) { 32 | if(!tree.children[i]) { 33 | continue; 34 | } 35 | 36 | dom.appendChild(Utility.createDomTree(tree.children[i])); 37 | } 38 | } 39 | 40 | return dom; 41 | }; 42 | 43 | Utility.removeElement = (dom) => { 44 | (dom != null) && (dom.parentNode.removeChild(dom)); 45 | }; 46 | 47 | Utility.appendToBody = (dom) => { 48 | document.body.appendChild(dom); 49 | }; 50 | 51 | Utility.makeIconHTML = (type) => { 52 | let href = ''; 53 | 54 | (type == 'ok') && (href = '#tick'); 55 | (type == 'error') && (href = '#cancel'); 56 | (type == 'info') && (href = '#info-button'); 57 | (type == 'caution') && (href = '#danger'); 58 | (type == 'min') && (href = '#line'); 59 | (type == 'close') && (href = '#close'); 60 | 61 | return ``; 62 | }; 63 | 64 | Utility.makeNftContent = (options) => { 65 | let content = null; 66 | 67 | if(options.type) { 68 | let innerContent = null; 69 | 70 | if(typeof options.content === 'string') { 71 | innerContent = Utility.createDiv('inner-content', options.content); 72 | } else { 73 | innerContent = Utility.createDomTree({ 74 | dom: Utility.createDiv('inner-content'), 75 | children: [options.content] 76 | }); 77 | } 78 | 79 | if(options.type == 'text') { 80 | content = Utility.createDomTree({ 81 | dom: Utility.createDiv('content text'), 82 | children: [ innerContent ] 83 | }); 84 | } else { 85 | content = Utility.createDomTree({ 86 | dom: Utility.createDiv('content'), 87 | children: [ 88 | Utility.createDiv('state', Utility.makeIconHTML(options.type)), 89 | innerContent 90 | ] 91 | }); 92 | } 93 | } else if(typeof options.content === 'string') { 94 | content = Utility.createDiv('content', options.content); 95 | } 96 | 97 | return content; 98 | }; 99 | 100 | Utility.standardizeButtons = (modal, options) => { 101 | let buttons = []; 102 | 103 | if(options.buttons === undefined) { 104 | if(options.type == 'caution' || options.type == 'info') { 105 | buttons.push({ 106 | key: 27, 107 | text: 'Cancel', 108 | onClick: modal.close.bind(modal, 'cancel') 109 | }); 110 | } 111 | 112 | buttons.push({ 113 | key: 13, 114 | text: 'OK', 115 | type: 'main', 116 | onClick: modal.close.bind(modal, 'ok') 117 | }); 118 | 119 | return buttons; 120 | } 121 | 122 | buttons = options.buttons; 123 | 124 | if(!(buttons.constructor === Array)) { 125 | buttons = [buttons]; 126 | } 127 | 128 | for(let i in buttons) { 129 | (!buttons[i].onClick) && (buttons[i].onClick = modal.close.bind(modal, buttons[i].id)); 130 | } 131 | 132 | return buttons; 133 | }; 134 | 135 | Utility.makeButtons = (buttonArr) => { 136 | let buttons = []; 137 | 138 | if(buttonArr) { 139 | for(let i in buttonArr) { 140 | buttons.push(Button.create({ 141 | text: buttonArr[i].text ? buttonArr[i].text : 'OK', 142 | type: buttonArr[i].normal ? null : 'main', 143 | onClick: buttonArr[i].onClick 144 | })); 145 | } 146 | } 147 | 148 | return Utility.createDomTree({ 149 | dom: Utility.createDiv('button-wrapper'), 150 | children: buttons 151 | }); 152 | } 153 | 154 | Utility.bindButtonKeyEvents = (buttonArr) => { 155 | let handler = (event) => { 156 | for(let i in buttonArr) { 157 | if(buttonArr[i].key === event.keyCode) { 158 | buttonArr[i].onClick(); 159 | return; 160 | } 161 | } 162 | }; 163 | window.addEventListener('keydown', handler); 164 | return handler; 165 | }; 166 | 167 | Utility.unbindButtonKeyEvents = (handler) => { 168 | window.removeEventListener('keydown', handler); 169 | }; 170 | 171 | export default Utility; -------------------------------------------------------------------------------- /dist/windowise.min.css: -------------------------------------------------------------------------------- 1 | .wwise-perspective{-webkit-perspective:1000px;perspective:1000px;position:fixed;left:0;top:0;width:100vw;height:100vh}.wwise-wrapper{position:fixed;width:0;height:0;font-weight:400}.wwise-wrapper.v-center{top:50%}.wwise-wrapper.h-center{left:50%}.wwise-wrapper.left{left:0}.wwise-wrapper.right{right:0}.wwise-wrapper.top{top:0}.wwise-wrapper.bottom{bottom:0}.wwise .preset{color:#fafafa}.wwise .preset.ok{background:rgba(45,193,80,.95)}.wwise .preset.error{background:rgba(190,17,51,.95)}.wwise .preset.info{background:rgba(42,128,255,.95)}.wwise .preset.caution{background:rgba(239,128,0,.95)}.wwise-no-scroll{position:relative;overflow:hidden}.wwise-overlay{position:fixed;left:0;top:0;width:100vw;height:100vh;background:rgba(50,50,50,.5)}.wwise{position:absolute;left:0;top:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border-radius:5px;-webkit-box-shadow:1px 1px 10px rgba(150,150,150,.5);box-shadow:1px 1px 10px rgba(150,150,150,.5);-webkit-box-sizing:border-box;box-sizing:border-box}.wwise.no-radius{border-radius:0}.wwise *{-webkit-box-sizing:border-box;box-sizing:border-box}.wwise .clear{clear:both}.wwise .topbar{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;width:100%;border-radius:4px 4px 0 0;background:rgba(42,128,255,.95)}.wwise .topbar .control{float:right;height:40px;padding:10px 10px 0 0}.wwise .topbar .control>*{display:inline-block;margin:0 3px}.wwise .topbar .control .icon{width:13px;height:13px;margin:0 3px;fill:rgba(204,204,204,.8);-webkit-transition:fill ease .2s;transition:fill ease .2s}.wwise .topbar .control .icon:hover{cursor:pointer;fill:#eee}.wwise .topbar .title{padding:10px 60px 10px 15px;font-size:15px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;font-weight:700;color:#fff}.wwise.no-radius .topbar{border-radius:0}.wwise>.content{padding:0;margin:0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;border-radius:0 0 4px 4px;background:#fff;color:#333;-webkit-box-shadow:0 1px 3px rgba(200,200,200,.5) inset;box-shadow:0 1px 3px rgba(200,200,200,.5) inset}.wwise>.content.no-topbar{border-radius:4px;-webkit-box-shadow:none;box-shadow:none}.wwise.no-radius>.content,.wwise.no-radius>.content.no-topbar{border-radius:0}.wwise .modal>.main{width:90vw;max-width:400px;border-radius:4px 4px 0 0;text-align:center;padding-bottom:10px;color:#fff}.wwise .modal>.main .icon{display:block;margin:0 auto;fill:#fff;width:100px}.wwise .modal>.main .title{font-size:30px}.wwise .modal>.main .text{margin:10px 0;font-weight:300;font-size:16px}.wwise .modal>.main.no-op{border-radius:4px}.wwise .modal>.main.ok{background:#2dc150}.wwise .modal>.main.error{background:#be1133}.wwise .modal>.main.info{background:#2a80ff}.wwise .modal>.main.caution{background:#ef8000}.wwise .modal>.operation .button-wrapper{text-align:center;margin:30px 0 20px 0}.wwise .modal>.operation .button{display:inline-block;line-height:18px;padding:8px 10px;margin:0 15px;line-height:18px;width:100px;border-radius:4px;border:1px solid #eee;-webkit-box-shadow:1px 1px 3px rgba(220,220,220,.8);box-shadow:1px 1px 3px rgba(220,220,220,.8);color:#555;-webkit-transition:all ease .2s;transition:all ease .2s}.wwise .modal>.operation .button:hover{background:#f5f5f5;cursor:pointer}.wwise .modal>.operation .button.main{color:#fff}.wwise .modal>.operation.ok .main{background:#2dc150}.wwise .modal>.operation.ok .main:hover{background:#23983f}.wwise .modal>.operation.error .main{background:#be1133}.wwise .modal>.operation.error .main:hover{background:#8f0d26}.wwise .modal>.operation.info .main{background:#2a80ff}.wwise .modal>.operation.info .main:hover{background:#0063f6}.wwise .modal>.operation.caution .main{background:#ef8000}.wwise .modal>.operation.caution .main:hover{background:#bc6500}.wwise .nft{border-radius:4px;height:60px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:rgba(255,255,255,.95);cursor:default}.wwise .nft.preset>.close{border-color:rgba(238,238,238,.6)}.wwise .nft.preset>.close:hover{border-color:rgba(250,250,250,.8)}.wwise .nft.preset>.close .icon{fill:rgba(238,238,238,.6)}.wwise .nft.preset>.close:hover .icon{fill:#fafafa}.wwise .nft .content{padding:0;margin:0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.wwise .nft .content.text{padding-left:20px}.wwise .nft .content .state{position:relative;width:60px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}.wwise .nft .content .state .icon{position:absolute;left:50%;top:50%;width:24px;height:24px;fill:#fafafa;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.wwise .nft .content .inner-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:20px 20px 20px 0;white-space:nowrap}.wwise .nft>.close{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:45px;height:100%;border-left:1px solid #ccc;border-radius:0 4px 4px 0;position:relative;-webkit-transition:all ease .2s;transition:all ease .2s}.wwise .nft>.close .icon{position:absolute;left:50%;top:50%;width:10px;height:10px;fill:rgba(180,180,180,.8);-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition:all ease .2s;transition:all ease .2s}.wwise .nft>.close:hover{border-color:#bbb;cursor:pointer}.wwise .nft>.close:hover .icon{fill:#aaa}.wwise .push{width:100vw;background:rgba(250,250,250,.95);cursor:default;padding:5px 0}.wwise .push .content{padding:10px;margin:0;font-size:17px}.wwise .push .content>*{display:inline-block;vertical-align:top}.wwise .push .content .icon{margin-top:2px;margin-right:10px;width:18px;height:18px;fill:#f8f8f8}.wwise .push .button-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.wwise .push .button-wrapper>*{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;max-width:300px;width:100%;margin:10px}.wwise .push .button-wrapper .button{border:1px solid rgba(238,238,238,.9);border-radius:4px;padding:5px 0;font-size:14px;color:#eee;-webkit-transition:all ease .2s;transition:all ease .2s}.wwise .push .button-wrapper .button:hover{cursor:pointer;border-color:#d5d5d5;color:#d5d5d5}.wwise .push .button-wrapper .button.main{background:rgba(248,248,248,.9);color:rgba(85,85,85,.8)}.wwise .push .button-wrapper .button.main:hover{background:rgba(232,232,232,.9)}.wwise-progress{position:relative;margin:10px auto;width:95%;max-width:300px;height:3px;background:rgba(221,221,221,.8);border-radius:3px;overflow:hidden}.wwise-progress .wait{position:absolute;top:0;width:30px;height:3px;background:#eee;background:-webkit-gradient(linear,left top,right top,from(rgba(221,221,221,0)),color-stop(rgba(255,255,255,.8)),to(rgba(221,221,221,0)));background:-webkit-linear-gradient(left,rgba(221,221,221,0),rgba(255,255,255,.8),rgba(221,221,221,0));background:linear-gradient(to right,rgba(221,221,221,0),rgba(255,255,255,.8),rgba(221,221,221,0));-webkit-animation-name:wwise-progress;animation-name:wwise-progress;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-duration:2s;animation-duration:2s}.wwise-progress .bar{position:absolute;left:0;top:0;width:0;height:3px;border-radius:3px;background:#fff;-webkit-transition:width linear .2s;transition:width linear .2s}@-webkit-keyframes wwise-progress{from{left:-30px}to{left:-webkit-calc(100% + 30px);left:calc(100% + 30px)}}@keyframes wwise-progress{from{left:-30px}to{left:-webkit-calc(100% + 30px);left:calc(100% + 30px)}}.wwise .input-wrapper{margin:15px auto -15px auto}.wwise .input-wrapper .input{display:block;margin:0 auto;width:95%;max-width:300px;outline:0;border:none;background:#f3f3f3;padding:15px;font-size:16px;border-radius:5px}.wwise .input-wrapper .error{width:95%;text-align:center;margin-top:10px;color:red} -------------------------------------------------------------------------------- /src/js/window.js: -------------------------------------------------------------------------------- 1 | import { Queue } from 'animatorjs'; 2 | import Animation from './animation'; 3 | import Utility from './utility'; 4 | 5 | let defaultOptions = { 6 | animation: 'pop', 7 | topbar: { 8 | showClose: true, 9 | showMin: false 10 | }, 11 | keepOverlay: false, 12 | position: 'center', 13 | overlay: false, 14 | clickOverlayToClose: true, 15 | removeBackground: false, 16 | noRadius: false, 17 | zIndex: null 18 | }; 19 | 20 | class Window { 21 | static create(dom, options) { 22 | let title = dom.getElementsByClassName('title')[0]; 23 | (title) && (title = title.innerHTML); 24 | let content = dom.getElementsByClassName('content')[0]; 25 | (content) && (content = content.innerHTML); 26 | 27 | Utility.removeElement(dom); 28 | 29 | options.title = title; 30 | options.content = content; 31 | 32 | return new Window(options); 33 | } 34 | 35 | constructor(options) { 36 | // Init options 37 | this.options = JSON.parse(JSON.stringify(defaultOptions)); 38 | for(let i in options) { 39 | (options[i] != undefined) && (this.options[i] = options[i]); 40 | } 41 | 42 | let position = this.options.position; 43 | if(position.indexOf(' ') == -1) { 44 | if(position == 'left' || position == 'right') { 45 | position = position + ' center'; 46 | } else if(position == 'top' || position == 'bottom') { 47 | position = 'center ' + position; 48 | } else { 49 | position = position + ' ' + position; 50 | } 51 | } 52 | this.options.position = position; 53 | 54 | // Overlay 55 | if(this.options.overlay) { 56 | let cuurentOverlay = document.getElementsByClassName('wwise-overlay'); 57 | 58 | if(cuurentOverlay.length) { 59 | this.overlay = cuurentOverlay[0]; 60 | this.hasOverlay = true; 61 | } else { 62 | this.overlay = Utility.createDiv('wwise-overlay'); 63 | (this.options.zIndex) && (this.overlay.style.zIndex = this.options.zIndex); 64 | } 65 | 66 | this.overlayClickHandler = this.close.bind(this, undefined); 67 | } else { 68 | this.options.clickOverlayToClose = false; 69 | } 70 | 71 | // Topbar 72 | let contentClassName = 'content'; 73 | if(this.options.topbar) { 74 | // Topbar Controls 75 | let controls = []; 76 | 77 | if(this.options.topbar.showMin) { 78 | controls.push(Utility.createDiv(null, Utility.makeIconHTML('min'))); 79 | controls[controls.length - 1].addEventListener('click', this.min.bind(this)); 80 | } 81 | 82 | if(this.options.topbar.showClose) { 83 | controls.push(Utility.createDiv(null, Utility.makeIconHTML('close'))); 84 | controls[controls.length - 1].addEventListener('click', this.close.bind(this, undefined)); 85 | } 86 | 87 | let titleDom = null; 88 | 89 | if(typeof this.options.title === 'string') { 90 | titleDom = Utility.createDiv('title', this.options.title); 91 | } else { 92 | titleDom = Utility.createDomTree({ 93 | dom: Utility.createDiv('title'), 94 | children: [ this.options.title ] 95 | }); 96 | } 97 | 98 | this.topbar = Utility.createDomTree({ 99 | dom: Utility.createDiv('topbar'), 100 | children: [ 101 | { 102 | dom: Utility.createDiv('control'), 103 | children: controls.map(value => { return { dom: value }; }) 104 | }, 105 | { 106 | dom: titleDom 107 | }, 108 | { 109 | dom: Utility.createDiv('clear') 110 | } 111 | ] 112 | }); 113 | } else { 114 | contentClassName += ' no-topbar'; 115 | } 116 | 117 | // Content 118 | if(typeof this.options.content === 'string') { 119 | this.content = Utility.createDomTree({ 120 | dom: Utility.createDiv(contentClassName, this.options.content) 121 | }); 122 | } else { 123 | this.content = Utility.createDomTree({ 124 | dom: Utility.createDiv(contentClassName), 125 | children: [ this.options.content ] 126 | }); 127 | } 128 | (this.options.removeBackground) && (this.content.style.background = 'initial'); 129 | 130 | // Window 131 | this.window = Utility.createDomTree({ 132 | dom: Utility.createDiv('wwise' + (this.options.noRadius ? ' no-radius' : '')), 133 | children: [ 134 | this.topbar, 135 | this.content 136 | ] 137 | }); 138 | 139 | // Wrapper 140 | let wrapperDom = Utility.createDiv('wwise-wrapper'); 141 | 142 | (this.options.zIndex) && (wrapperDom.style.zIndex = this.options.zIndex); 143 | this.wrapper = Utility.createDomTree({ 144 | dom: wrapperDom, 145 | children: [ this.window ] 146 | }); 147 | 148 | // Whole DOM 149 | this.dom = Utility.createDomTree({ 150 | dom: Utility.createDiv(), 151 | children: [ this.wrapper ] 152 | }); 153 | 154 | // Position 155 | let positions = this.options.position.split(' '); 156 | let translateX = -50, translateY = -50; 157 | 158 | if(positions[0] == 'left') { 159 | translateX = 0; 160 | this.wrapper.classList.add('left'); 161 | } else if(positions[0] == 'right') { 162 | translateX = -100; 163 | this.wrapper.classList.add('right'); 164 | } else if(positions[0] == 'center') { 165 | this.wrapper.classList.add('h-center'); 166 | } else { 167 | this.wrapper.style.left = positions[0]; 168 | } 169 | 170 | if(positions[1] == 'top') { 171 | translateY = 0; 172 | this.wrapper.classList.add('top'); 173 | } else if(positions[1] == 'bottom') { 174 | translateY = -100; 175 | this.wrapper.classList.add('bottom'); 176 | } else if(positions[1] == 'center') { 177 | this.wrapper.classList.add('v-center'); 178 | } else { 179 | this.wrapper.style.top = position[1]; 180 | } 181 | 182 | this.window.style.transform = `translate(${ translateX }%, ${ translateY }%)`; 183 | 184 | if(this.options.style) { 185 | for(let i in this.options.style) { 186 | this.window.style[i] = this.options.style[i]; 187 | } 188 | } 189 | 190 | if(this.options.margin) { 191 | this.wrapper.style.margin = this.options.margin; 192 | } 193 | 194 | // Draggable 195 | if(this.options.draggable) { 196 | this.draggable(); 197 | } 198 | } 199 | 200 | open(fromMin) { 201 | if(this.opened) { 202 | return; 203 | } 204 | 205 | this.promise = new Promise((resolve) => { this.promiseResolve = resolve; }); 206 | this.appendDoms(); 207 | this.opened = true; 208 | 209 | if(this.options.clickOverlayToClose) { 210 | this.overlay.addEventListener('click', this.overlayClickHandler); 211 | this.overlay.addEventListener('touchstart', this.overlayClickHandler); 212 | } 213 | 214 | let animation = fromMin ? 'min' : this.options.animation; 215 | 216 | if(animation) { 217 | if(animation == 'min' || animation == 'flip') { 218 | this.dom.classList.add('wwise-perspective'); 219 | } 220 | 221 | let q = [ (new Queue(this.wrapper, Animation[animation + '_in'], { instant: true, applyOnEnd: true })).getPromise() ]; 222 | 223 | if(this.options.overlay && !this.hasOverlay) { 224 | q.push((new Queue(this.overlay, Animation.overlay_in, { instant: true, applyOnEnd: true })).getPromise()); 225 | } 226 | 227 | return Promise.all(q).then(() => { 228 | this.dom.classList.remove('wwise-perspective'); 229 | }); 230 | } 231 | 232 | return Promise.resolve(); 233 | } 234 | 235 | close(toMin) { 236 | if(!this.opened) { 237 | return; 238 | } 239 | 240 | this.opened = false; 241 | 242 | let animation = toMin ? 'min' : this.options.animation; 243 | 244 | if(this.overlay) { 245 | this.overlay.removeEventListener('click', this.overlayClickHandler); 246 | this.overlay.removeEventListener('touchstart', this.overlayClickHandler); 247 | } 248 | 249 | if(animation) { 250 | if(animation == 'min' || animation == 'flip') { 251 | this.dom.classList.add('wwise-perspective'); 252 | } 253 | 254 | let q = [ (new Queue(this.wrapper, Animation[animation + '_out'], { instant: true, applyOnEnd: true })).getPromise() ]; 255 | 256 | if(this.options.overlay && !this.options.keepOverlay) { 257 | q.push((new Queue(this.overlay, Animation.overlay_out, { instant: true, applyOnEnd: true })).getPromise()); 258 | } 259 | 260 | return Promise.all(q).then(() => { 261 | this.removeDoms(); 262 | this.dom.classList.remove('wwise-perspective'); 263 | this.promiseResolve(); 264 | }); 265 | } 266 | 267 | this.removeDoms(); 268 | this.promiseResolve(); 269 | return Promise.resolve(); 270 | } 271 | 272 | min() { 273 | return this.close(true); 274 | } 275 | 276 | resume() { 277 | return this.open(true); 278 | } 279 | 280 | getPromise() { 281 | return this.promise; 282 | } 283 | 284 | appendDoms() { 285 | if(this.options.overlay && !this.hasOverlay) { 286 | Utility.appendToBody(this.overlay); 287 | document.body.classList.add('wwise-no-scroll'); 288 | this.overlay.addEventListener('touchstart', (event) => { 289 | event.preventDefault(); 290 | }); 291 | } 292 | Utility.appendToBody(this.dom); 293 | } 294 | 295 | removeDoms() { 296 | Utility.removeElement(this.dom); 297 | if(!this.options.keepOverlay && this.overlay) { 298 | Utility.removeElement(this.overlay); 299 | document.body.classList.remove('wwise-no-scroll'); 300 | } 301 | } 302 | 303 | // Draggable functions 304 | draggable(enabled = true) { 305 | if(!this.topbar) { 306 | return; 307 | } 308 | 309 | if(enabled) { 310 | this.draggableMouseMoveHandler = this.handleDraggableMouseMove.bind(this); 311 | this.draggableMouseDownHandler = this.handleDraggableMouseDown.bind(this); 312 | this.draggableMouseUpHandler = this.handleDraggableMouseUp.bind(this); 313 | this.draggableMouseOutHandler = this.handleDraggableMouseOut.bind(this); 314 | 315 | window.addEventListener('mousemove', this.draggableMouseMoveHandler); 316 | window.addEventListener('mouseout', this.draggableMouseOutHandler); 317 | this.topbar.addEventListener('mousedown', this.draggableMouseDownHandler); 318 | window.addEventListener('mouseup', this.draggableMouseUpHandler); 319 | } else { 320 | window.removeEventListener('mousemove', this.draggableMouseMoveHandler); 321 | window.removeEventListener('mouseout', this.draggableMouseOutHandler); 322 | this.topbar.removeEventListener('mousedown', this.draggableMouseDownHandler); 323 | window.removeEventListener('mouseup', this.draggableMouseUpHandler); 324 | } 325 | } 326 | 327 | handleDraggableMouseMove(event) { 328 | if(this.inDragging) { 329 | let delta = { x: event.clientX - this.dragPrev.x, y: event.clientY - this.dragPrev.y }; 330 | let style = window.getComputedStyle(this.wrapper); 331 | let option = this.options.draggable; 332 | let left = parseFloat(style.left); 333 | let top = parseFloat(style.top); 334 | 335 | // Handle percentage for Safari 336 | // http://stackoverflow.com/questions/22034989/is-there-a-bug-in-safari-with-getcomputedstyle 337 | if(style.left.indexOf('%') != -1) { 338 | left = style.left; 339 | left = left.substr(0, left.length - 1); 340 | left = parseInt(left); 341 | 342 | let w = window, 343 | d = document, 344 | e = d.documentElement, 345 | g = d.getElementsByTagName('body')[0], 346 | width = w.innerWidth || e.clientWidth || g.clientWidth; 347 | 348 | left = (left * width) / 100; 349 | } 350 | 351 | if(style.top.indexOf('%') != -1) { 352 | top = style.top; 353 | top = top.substr(0, top.length - 1); 354 | top = parseInt(top); 355 | 356 | let w = window, 357 | d = document, 358 | e = d.documentElement, 359 | g = d.getElementsByTagName('body')[0], 360 | height = w.innerHeight || e.clientHeight || g.clientHeight; 361 | 362 | top = (top * height) / 100; 363 | } 364 | 365 | // Move 366 | if(option == true || option == 'horizontal') { 367 | this.wrapper.style.left = (left + delta.x) + 'px'; 368 | } 369 | 370 | if(option == true || option == 'vertical') { 371 | this.wrapper.style.top = (top + delta.y) + 'px'; 372 | } 373 | 374 | this.dragPrev = { x: event.clientX, y: event.clientY }; 375 | } 376 | } 377 | 378 | handleDraggableMouseDown(event) { 379 | this.inDragging = true; 380 | this.dragPrev = { x: event.clientX, y: event.clientY }; 381 | } 382 | 383 | handleDraggableMouseUp(event) { 384 | this.inDragging = false; 385 | } 386 | 387 | handleDraggableMouseOut(event) { 388 | let target = event.relatedTarget; 389 | 390 | if(!target || target.nodeName == 'HTML') { 391 | this.inDragging = false; 392 | } 393 | } 394 | } 395 | 396 | export default Window; -------------------------------------------------------------------------------- /dist/windowise.min.js: -------------------------------------------------------------------------------- 1 | /*! Windowise - v1.0.6 | Gao Sun | MIT | https://gao-sun.github.io/windowise/ */ 2 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Windowise=t():e.Windowise=t()}(this,function(){return function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=12)}([function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(10),r=i(o),s={};s.createElement=function(e,t,n,i){var o=document.createElement(e);if(t&&(o.className=t),n&&(o.innerHTML=n),i)for(var r in i)o.setAttribute(r,i[r]);return o},s.createDiv=function(e,t,n){return s.createElement("div",e,t,n)},s.createDomTree=function(e){if(!e||!e.hasOwnProperty("dom"))return e;var t=e.dom;if(e.children)for(var n in e.children)e.children[n]&&t.appendChild(s.createDomTree(e.children[n]));return t},s.removeElement=function(e){null!=e&&e.parentNode.removeChild(e)},s.appendToBody=function(e){document.body.appendChild(e)},s.makeIconHTML=function(e){var t="";return"ok"==e&&(t="#tick"),"error"==e&&(t="#cancel"),"info"==e&&(t="#info-button"),"caution"==e&&(t="#danger"),"min"==e&&(t="#line"),"close"==e&&(t="#close"),''},s.makeNftContent=function(e){var t=null;if(e.type){var n=null;n="string"==typeof e.content?s.createDiv("inner-content",e.content):s.createDomTree({dom:s.createDiv("inner-content"),children:[e.content]}),t="text"==e.type?s.createDomTree({dom:s.createDiv("content text"),children:[n]}):s.createDomTree({dom:s.createDiv("content"),children:[s.createDiv("state",s.makeIconHTML(e.type)),n]})}else"string"==typeof e.content&&(t=s.createDiv("content",e.content));return t},s.standardizeButtons=function(e,t){var n=[];if(void 0===t.buttons)return"caution"!=t.type&&"info"!=t.type||n.push({key:27,text:"Cancel",onClick:e.close.bind(e,"cancel")}),n.push({key:13,text:"OK",type:"main",onClick:e.close.bind(e,"ok")}),n;n=t.buttons,n.constructor!==Array&&(n=[n]);for(var i in n)!n[i].onClick&&(n[i].onClick=e.close.bind(e,n[i].id));return n},s.makeButtons=function(e){var t=[];if(e)for(var n in e)t.push(r.default.create({text:e[n].text?e[n].text:"OK",type:e[n].normal?null:"main",onClick:e[n].onClick}));return s.createDomTree({dom:s.createDiv("button-wrapper"),children:t})},s.bindButtonKeyEvents=function(e){var t=function(t){for(var n in e)if(e[n].key===t.keyCode)return void e[n].onClick()};return window.addEventListener("keydown",t),t},s.unbindButtonKeyEvents=function(e){window.removeEventListener("keydown",e)},t.default=s},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(e,t){for(var n=0;n0&&void 0!==arguments[0])||arguments[0];this.topbar&&(e?(this.draggableMouseMoveHandler=this.handleDraggableMouseMove.bind(this),this.draggableMouseDownHandler=this.handleDraggableMouseDown.bind(this),this.draggableMouseUpHandler=this.handleDraggableMouseUp.bind(this),this.draggableMouseOutHandler=this.handleDraggableMouseOut.bind(this),window.addEventListener("mousemove",this.draggableMouseMoveHandler),window.addEventListener("mouseout",this.draggableMouseOutHandler),this.topbar.addEventListener("mousedown",this.draggableMouseDownHandler),window.addEventListener("mouseup",this.draggableMouseUpHandler)):(window.removeEventListener("mousemove",this.draggableMouseMoveHandler),window.removeEventListener("mouseout",this.draggableMouseOutHandler),this.topbar.removeEventListener("mousedown",this.draggableMouseDownHandler),window.removeEventListener("mouseup",this.draggableMouseUpHandler)))}},{key:"handleDraggableMouseMove",value:function(e){if(this.inDragging){var t={x:e.clientX-this.dragPrev.x,y:e.clientY-this.dragPrev.y},n=window.getComputedStyle(this.wrapper),i=this.options.draggable,o=parseFloat(n.left),r=parseFloat(n.top);if(n.left.indexOf("%")!=-1){o=n.left,o=o.substr(0,o.length-1),o=parseInt(o);var s=window,a=document,l=a.documentElement,u=a.getElementsByTagName("body")[0];o=o*(s.innerWidth||l.clientWidth||u.clientWidth)/100}if(n.top.indexOf("%")!=-1){r=n.top,r=r.substr(0,r.length-1),r=parseInt(r);var c=window,d=document,f=d.documentElement,p=d.getElementsByTagName("body")[0];r=r*(c.innerHeight||f.clientHeight||p.clientHeight)/100}1!=i&&"horizontal"!=i||(this.wrapper.style.left=o+t.x+"px"),1!=i&&"vertical"!=i||(this.wrapper.style.top=r+t.y+"px"),this.dragPrev={x:e.clientX,y:e.clientY}}}},{key:"handleDraggableMouseDown",value:function(e){this.inDragging=!0,this.dragPrev={x:e.clientX,y:e.clientY}}},{key:"handleDraggableMouseUp",value:function(e){this.inDragging=!1}},{key:"handleDraggableMouseOut",value:function(e){var t=e.relatedTarget;t&&"HTML"!=t.nodeName||(this.inDragging=!1)}}]),e}();t.default=f},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(e,t){for(var n=0;n0?(this.countRemainder[e]--,this.replay(e)):(this.options.applyOnEnd&&this.applyOnEnd(e),++this.animationEnded==this.doms.length&&(this.promiseSupported&&this.promiseResolve(),this.options.clear&&this.clear())))}},{key:"pauseDom",value:function(e){for(var t in this.prefixes)e.style[this.prefixes[t]+"animation-play-state"]="paused"}},{key:"resumeDom",value:function(e){for(var t in this.prefixes)e.style[this.prefixes[t]+"animation-play-state"]="running"}},{key:"applyOnEnd",value:function(e){var t=this.newFrames[this.frames.length];for(var n in t)this.doms[e].style[n]=t[n]}},{key:"makeAnimation",value:function(e){var t={},n=[],i={};for(var o in this.frames){n.push(this.frames[o].styles);for(var r in n[o])i[r]=!0}var s=window.getComputedStyle(e);for(var l in i)t[l]=s[l];n.unshift(t);for(var u=[n[0]],c=1;c100&&(e=100),this.bar.style.width=e+"%"}}]),e}();t.default=l},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(e,t){for(var n=0;nlinecancelclosetickdangerinfo-button'},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(3),r=n(11),s=i(r),a={};a.overlay_in=[new o.Frame(s.default["wwise-overlay-in-1"],0),new o.Frame(s.default["wwise-overlay-in-2"],400)],a.overlay_out=[new o.Frame(s.default["wwise-overlay-out-1"],300)],a.pop_in=[new o.Frame(s.default["wwise-pop-in-1"],0),new o.Frame(s.default["wwise-pop-in-2"],{duration:200,"timing-function":"ease-in"}),new o.Frame(s.default["wwise-pop-in-3"],{duration:100,"timing-function":"linear"}),new o.Frame(s.default["wwise-pop-in-4"],{duration:100,"timing-function":"linear"})],a.pop_out=[new o.Frame(s.default["wwise-pop-out-1"],{duration:250,"timing-function":"ease-in"})],a.flip_in=[new o.Frame(s.default["wwise-flip-in-1"],0),new o.Frame(s.default["wwise-flip-in-2"],500)],a.flip_out=[new o.Frame(s.default["wwise-flip-out-1"],400)],a.min_in=[new o.Frame(s.default["wwise-min-in-1"],0),new o.Frame(s.default["wwise-min-in-2"],350)],a.min_out=[new o.Frame(s.default["wwise-min-out-1"],400)];var l=["top","bottom","left","right"];for(var u in l){var c=l[u];a[c+"_in"]=[new o.Frame(s.default["wwise-"+c+"-in-1"],0),new o.Frame(s.default["wwise-"+c+"-in-2"],{duration:400,"timing-function":"ease-out"})],a[c+"_out"]=[new o.Frame(s.default["wwise-"+c+"-out-1"],{duration:400,"timing-function":"ease-in"})]}t.default=a},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(0),r=i(o),s={};s.create=function(e){var t="button"+(e.type?" "+e.type:""),n=r.default.createDiv(t,e.text);return n.addEventListener("click",e.onClick),n},t.default=s},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i={};i["wwise-overlay-in-1"]={opacity:"0"},i["wwise-overlay-in-2"]={opacity:"1"},i["wwise-overlay-out-1"]={opacity:"0"},i["wwise-pop-in-1"]={transform:"scale(0.5, 0.5)","margin-top":"50px",opacity:".5"},i["wwise-pop-in-2"]={transform:"scale(1, 1)","margin-top":"0",opacity:"1"},i["wwise-pop-in-3"]={transform:"scale(1.05, 1.05)"},i["wwise-pop-in-4"]={transform:"scale(1, 1)"},i["wwise-pop-out-1"]={transform:"scale(0.25, 0.25)","margin-top":"50px",opacity:"0"},i["wwise-flip-in-1"]={transform:"rotateX(60deg) scaleX(.5)",opacity:".2"},i["wwise-flip-in-2"]={transform:"none",opacity:"1"},i["wwise-flip-out-1"]={transform:"rotateX(60deg) scaleX(.5)",opacity:"0"},i["wwise-top-in-1"]={transform:"translateY(-30vh)",opacity:".5"},i["wwise-top-in-2"]={transform:"none",opacity:"1"},i["wwise-top-out-1"]={transform:"translateY(-30vh)",opacity:"0"},i["wwise-bottom-in-1"]={transform:"translateY(30vh)",opacity:".5"},i["wwise-bottom-in-2"]={transform:"none",opacity:"1"},i["wwise-bottom-out-1"]={transform:"translateY(30vh)",opacity:"0"},i["wwise-left-in-1"]={transform:"translateX(-30vw)",opacity:".5"},i["wwise-left-in-2"]={transform:"none",opacity:"1"},i["wwise-left-out-1"]={transform:"translateX(-30vw)",opacity:"0"},i["wwise-right-in-1"]={transform:"translateX(30vw)",opacity:".5"},i["wwise-right-in-2"]={transform:"none",opacity:"1"},i["wwise-right-out-1"]={transform:"translateX(30vw)",opacity:"0"},i["wwise-min-in-1"]={"margin-top":"0",transform:"rotateX(-60deg) scale(0.2, 1.8) translateY(80vh)",opacity:".2"},i["wwise-min-in-2"]={transform:"none",opacity:"1"},i["wwise-min-out-1"]={"margin-top":"30vh",transform:"rotateX(-60deg) scale(0.05, 2) translateY(30vh)",opacity:"0"},t.default=i},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.Utility=t.Input=t.Progress=t.Push=t.Nft=t.Modal=t.Window=void 0;var o=n(1),r=i(o),s=n(2),a=i(s),l=n(5),u=i(l),c=n(7),d=i(c),f=n(6),p=i(f),h=n(4),v=i(h),m=n(0),y=i(m),w=n(8),g=i(w);window.addEventListener("load",function(){var e=document.createElement("div");e.setAttribute("hidden",""),e.innerHTML=g.default,document.body.insertBefore(e,document.body.firstChild)}),t.Window=r.default,t.Modal=a.default,t.Nft=u.default,t.Push=d.default,t.Progress=p.default,t.Input=v.default,t.Utility=y.default}])}); --------------------------------------------------------------------------------