├── .travis.yml ├── API.md ├── LICENSE ├── README.md ├── bower.json ├── deploy.sh ├── dist ├── ax5toast.css ├── ax5toast.js ├── ax5toast.min.js └── ax5toast.min.js.map ├── karma.conf.js ├── package.json ├── src ├── ax5toast.js ├── ax5toast.scss ├── modules │ └── ax5toast-tmpl.js └── scss │ ├── _ax5toast.scss │ └── _ax5toast_variables.scss └── test ├── README.md ├── bower.json ├── index.html ├── test.toast.html └── test.toast.js /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "4" 4 | before_script: 5 | - export CHROME_BIN=chromium-browser 6 | - export DISPLAY=:99.0 7 | - sh -e /etc/init.d/xvfb start -------------------------------------------------------------------------------- /API.md: -------------------------------------------------------------------------------- 1 | # Basic Usage 2 | > toast is a UI that can be used as an alternative means of window.alert, window.confirm and window.prompt 3 | 4 | How to initialize the properties of the UI, there are two. 5 | You can pass the property values of the UI to `setConfig`. 6 | Using the `new` you can pass when you initialize the UI. 7 | 8 | 9 | ## setConfig() 10 | `setConfig([options, callInit=true])` 11 | 12 | ```js 13 | var myToast = new ax5.ui.toast(); 14 | myToast.set_config({ 15 | msg: "String", 16 | theme: "String", 17 | width: "Number", 18 | icon: "String", 19 | closeIcon: "String", 20 | onStateChanged: "Function", 21 | displayTime: "Number", 22 | animateTime: "Number", 23 | containerPosition: "String", 24 | lang: "Object" 25 | }); 26 | ``` 27 | **Easy Way - without setConfig** 28 | ```js 29 | var myToast = new ax5.ui.toast({ 30 | msg: "String", 31 | theme: "String", 32 | width: "Number", 33 | icon: "String", 34 | closeIcon: "String", 35 | onStateChanged: "Function", 36 | displayTime: "Number", 37 | animateTime: "Number", 38 | containerPosition: "String", 39 | lang: "Object" 40 | }); 41 | ``` 42 | 43 | ### msg 44 | 45 | Type: `String` 46 | 47 | Title of toast. 48 | 49 | 50 | ### theme 51 | 52 | Type: `String` [default: default] 53 | 54 | Theme of toast, ax5toast themes using six colors defined by the bootstrap is provided. 55 | 56 | 57 | ### width 58 | 59 | Type: `Number` [default: 300] 60 | 61 | Toast width 62 | 63 | 64 | ### icon 65 | 66 | Type: `String` 67 | 68 | 69 | ### closeIcon 70 | 71 | Type: `String` 72 | 73 | 74 | ### onStateChanged 75 | 76 | Type: `Function` 77 | 78 | onStateChanged function is executed when the toast of the state is changed, 79 | this.state state value is passed to this time onStateChanged function. 80 | 81 | 82 | ### displayTime 83 | 84 | Type: `Number` [default : 3000] 85 | 86 | 87 | 88 | ### animateTime 89 | 90 | Type: `Number` [default : 300] 91 | 92 | 93 | 94 | ### containerPosition 95 | 96 | Type: `String` [top-left|top-right|bottom-left|bottom-right] 97 | 98 | 99 | 100 | ### lang 101 | 102 | Type: `Object` 103 | 104 | ```js 105 | myToast.setConfig({ 106 | lang: { 107 | "ok": "확인" 108 | } 109 | }); 110 | ``` 111 | 112 | 113 | - - - 114 | 115 | ## push() 116 | `push(String|Options[, callback])` 117 | 118 | If this is String in the first argument and recognizes the first argument to `msg`. 119 | it is possible to redefine all of the options that can be used in setConfig. 120 | 121 | ```js 122 | toast.push('Toast message', function () { 123 | console.log(this); 124 | }); 125 | 126 | toast.push({ 127 | theme: 'danger', 128 | msg:'Toast message' 129 | }, function () { 130 | console.log(this); 131 | }); 132 | ``` 133 | 134 | - - - 135 | 136 | ## confirm() 137 | `confirm(String|Options[, callback])` 138 | 139 | ```js 140 | confirmToast.confirm({ 141 | msg: 'Confirm message' 142 | }, function(){ 143 | 144 | }); 145 | ``` 146 | 147 | ## close() 148 | `close()` -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2013-2016 Thomas Jang, Brant and Team AXISJ 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 13 | all 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 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Build Status](https://travis-ci.org/ax5ui/ax5ui-toast.svg?branch=master)](https://travis-ci.org/ax5ui/ax5ui-toast) 2 | [![npm version](https://badge.fury.io/js/ax5ui-toast.svg)](https://badge.fury.io/js/ax5ui-toast) 3 | [![](https://img.shields.io/npm/dm/ax5ui-toast.svg)](https://www.npmjs.com/package/ax5ui-toast) 4 | 5 | # ax5ui-toast 6 | "toast" provides feedbacks about an operation in a temporary popup. 7 | 8 | > *Dependencies* 9 | > * _[jQuery 1.X+](http://jquery.com/)_ 10 | > * _[ax5core](http://ax5.io/ax5core)_ 11 | > * _[bootstrap](http://getbootstrap.com/)_ 12 | 13 | 14 | ### Install by bower 15 | ```sh 16 | bower install ax5ui-toast 17 | ``` 18 | [bower](http://bower.io/#install-bower) is web front-end package manager. 19 | When you install `bower`, it will be installed under the `bower_components` folder to resolve the plug-in dependencies. 20 | (You can change the folder location. [.bowerrc](http://bower.io/docs/config/#bowerrc-specification) ) 21 | 22 | It is recommended that you install by using `bower`. 23 | If you've never used bower, please refer to [http://bower.io/#install-bower](http://bower.io/#install-bower). 24 | 25 | ### Install with npm 26 | If you do not use bower, it also can be installed by using npm as an alternative. 27 | In case of npm, which is the package manager for the front end, you need to solve the problem of plug-in dependencies. 28 | 29 | ```sh 30 | npm install jquery 31 | npm install ax5core 32 | npm install ax5ui-toast 33 | ``` 34 | 35 | After downloading the install file of npm, you will need to copy it to the location where you want to use as a resource for the project. 36 | If the copy process is inconvenient, it also can be done easily by using `gulp` or `grunt`. 37 | 38 | ### Download code 39 | - [ax5core Github releases](https://github.com/ax5ui/ax5core/releases) 40 | - [ax5ui-toast Github releases](https://github.com/ax5ui/ax5ui-toast/releases) 41 | 42 | 43 | ### Insert "ax5toast" in HTML HEAD. 44 | 45 | Folder location can be any for your project. However, please be sure to assign the right path in the project. 46 | 47 | ```html 48 | 49 | 50 | 51 | 52 | ``` 53 | 54 | **CDN urls** 55 | This is a list of CDN urls for ax5ui-toast. ax5ui offers the CDN services through rawgit. 56 | ``` 57 | https://cdn.rawgit.com/ax5ui/ax5ui-toast/master/dist/ax5toast.css 58 | https://cdn.rawgit.com/ax5ui/ax5ui-toast/master/dist/ax5toast.js 59 | https://cdn.rawgit.com/ax5ui/ax5ui-toast/master/dist/ax5toast.min.js 60 | ``` 61 | 62 | ### Basic Usage 63 | ```js 64 | var myToast = new ax5.ui.toast({ 65 | icon: '', 66 | containerPosition: "bottom-right", 67 | closeIcon: '' 68 | }); 69 | 70 | myToast.push('Toast message'); 71 | ``` 72 | 73 | - - - 74 | 75 | ### Preview 76 | - [See Demonstration](http://ax5.io/ax5ui-toast/demo/index.html) 77 | 78 | If you have any questions, please refer to the following [gitHub](https://github.com/ax5ui/ax5ui-kernel) 79 | 80 | ## Question 81 | - https://jsdev.kr/c/axisj/ax5ui 82 | - https://github.com/ax5ui/ax5ui-kernel/issues 83 | 84 | [![axisj-contributed](https://img.shields.io/badge/AXISJ.com-Contributed-green.svg)](https://github.com/axisj) ![](https://img.shields.io/badge/Seowoo-Mondo&Thomas-red.svg) 85 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ax5ui-toast", 3 | "version": "1.4.131", 4 | "authors": [ 5 | "ThomasJ " 6 | ], 7 | "description": "", 8 | "main": "dist/ax5toast.js", 9 | "keywords": [ 10 | "bootstrap", 11 | "jquery", 12 | "ax5ui", 13 | "plugin", 14 | "bootstrap jQuery plugins", 15 | "toast", 16 | "ax5ui-toast", 17 | "javascript ui" 18 | ], 19 | "dependencies": { 20 | "jquery": "", 21 | "ax5core": ">=1.4.115" 22 | }, 23 | "license": "MIT", 24 | "homepage": "ax5.io" 25 | } -------------------------------------------------------------------------------- /deploy.sh: -------------------------------------------------------------------------------- 1 | VERSION=`jq '.version' package.json | sed -e 's/^"//' -e 's/"$//'` 2 | 3 | git tag -a $VERSION -m $VERSION || true 4 | 5 | git push origin HEAD:master --follow-tags --force || true 6 | 7 | npm publish || true 8 | -------------------------------------------------------------------------------- /dist/ax5toast.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright (c) 2017. tom@axisj.com 3 | * - github.com/thomasjang 4 | * - www.axisj.com 5 | *//*! 6 | * Copyright (c) 2017. tom@axisj.com 7 | * - github.com/thomasjang 8 | * - www.axisj.com 9 | */fieldset{padding:0;margin:0;border:0;min-width:0}legend{display:block;width:100%;padding:0;margin-bottom:20px;font-size:21px;line-height:inherit;color:#333;border:0;border-bottom:1px solid #e5e5e5}label{display:inline-block;max-width:100%;margin-bottom:5px;font-weight:bold}input[type="search"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}input[type="radio"],input[type="checkbox"]{margin:4px 0 0;margin-top:1px \9;line-height:normal}input[type="file"]{display:block}input[type="range"]{display:block;width:100%}select[multiple],select[size]{height:auto}input[type="file"]:focus,input[type="radio"]:focus,input[type="checkbox"]:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}output{display:block;padding-top:7px;font-size:14px;line-height:1.42857;color:#555}.form-control{box-sizing:border-box;display:block;width:100%;height:34px;padding:6px 12px;font-size:14px;line-height:1.42857;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-webkit-transition:border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;-o-transition:border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;transition:border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s}.form-control:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6)}.form-control::-moz-placeholder{color:#999;opacity:1}.form-control:-ms-input-placeholder{color:#999}.form-control::-webkit-input-placeholder{color:#999}.form-control::-ms-expand{border:0;background-color:transparent}.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control{background-color:#eee;opacity:1}.form-control[disabled],fieldset[disabled] .form-control{cursor:not-allowed}textarea.form-control{height:auto}input[type="search"]{-webkit-appearance:none}@media screen and (-webkit-min-device-pixel-ratio: 0){input[type="date"].form-control,input[type="time"].form-control,input[type="datetime-local"].form-control,input[type="month"].form-control{line-height:34px}input[type="date"].input-sm,.input-group-sm>input[type="date"].form-control,.input-group-sm>input[type="date"].input-group-addon,.input-group-sm>.input-group-btn>input[type="date"].btn,.input-group-sm input[type="date"],input[type="time"].input-sm,.input-group-sm>input[type="time"].form-control,.input-group-sm>input[type="time"].input-group-addon,.input-group-sm>.input-group-btn>input[type="time"].btn,.input-group-sm input[type="time"],input[type="datetime-local"].input-sm,.input-group-sm>input[type="datetime-local"].form-control,.input-group-sm>input[type="datetime-local"].input-group-addon,.input-group-sm>.input-group-btn>input[type="datetime-local"].btn,.input-group-sm input[type="datetime-local"],input[type="month"].input-sm,.input-group-sm>input[type="month"].form-control,.input-group-sm>input[type="month"].input-group-addon,.input-group-sm>.input-group-btn>input[type="month"].btn,.input-group-sm input[type="month"]{line-height:30px}input[type="date"].input-lg,.input-group-lg>input[type="date"].form-control,.input-group-lg>input[type="date"].input-group-addon,.input-group-lg>.input-group-btn>input[type="date"].btn,.input-group-lg input[type="date"],input[type="time"].input-lg,.input-group-lg>input[type="time"].form-control,.input-group-lg>input[type="time"].input-group-addon,.input-group-lg>.input-group-btn>input[type="time"].btn,.input-group-lg input[type="time"],input[type="datetime-local"].input-lg,.input-group-lg>input[type="datetime-local"].form-control,.input-group-lg>input[type="datetime-local"].input-group-addon,.input-group-lg>.input-group-btn>input[type="datetime-local"].btn,.input-group-lg input[type="datetime-local"],input[type="month"].input-lg,.input-group-lg>input[type="month"].form-control,.input-group-lg>input[type="month"].input-group-addon,.input-group-lg>.input-group-btn>input[type="month"].btn,.input-group-lg input[type="month"]{line-height:46px}}.form-group{margin-bottom:15px}.radio,.checkbox{position:relative;display:block;margin-top:10px;margin-bottom:10px}.radio label,.checkbox label{min-height:20px;padding-left:20px;margin-bottom:0;font-weight:normal;cursor:pointer}.radio input[type="radio"],.radio-inline input[type="radio"],.checkbox input[type="checkbox"],.checkbox-inline input[type="checkbox"]{position:absolute;margin-left:-20px;margin-top:4px \9}.radio+.radio,.checkbox+.checkbox{margin-top:-5px}.radio-inline,.checkbox-inline{position:relative;display:inline-block;padding-left:20px;margin-bottom:0;vertical-align:middle;font-weight:normal;cursor:pointer}.radio-inline+.radio-inline,.checkbox-inline+.checkbox-inline{margin-top:0;margin-left:10px}input[type="radio"][disabled],input[type="radio"].disabled,fieldset[disabled] input[type="radio"],input[type="checkbox"][disabled],input[type="checkbox"].disabled,fieldset[disabled] input[type="checkbox"]{cursor:not-allowed}.radio-inline.disabled,fieldset[disabled] .radio-inline,.checkbox-inline.disabled,fieldset[disabled] .checkbox-inline{cursor:not-allowed}.radio.disabled label,fieldset[disabled] .radio label,.checkbox.disabled label,fieldset[disabled] .checkbox label{cursor:not-allowed}.form-control-static{padding-top:7px;padding-bottom:7px;margin-bottom:0;min-height:34px}.form-control-static.input-lg,.input-group-lg>.form-control-static.form-control,.input-group-lg>.form-control-static.input-group-addon,.input-group-lg>.input-group-btn>.form-control-static.btn,.form-control-static.input-sm,.input-group-sm>.form-control-static.form-control,.input-group-sm>.form-control-static.input-group-addon,.input-group-sm>.input-group-btn>.form-control-static.btn{padding-left:0;padding-right:0}.input-sm,.input-group-sm>.form-control,.input-group-sm>.input-group-addon,.input-group-sm>.input-group-btn>.btn{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}select.input-sm,.input-group-sm>select.form-control,.input-group-sm>select.input-group-addon,.input-group-sm>.input-group-btn>select.btn{height:30px;line-height:30px}textarea.input-sm,.input-group-sm>textarea.form-control,.input-group-sm>textarea.input-group-addon,.input-group-sm>.input-group-btn>textarea.btn,select[multiple].input-sm,.input-group-sm>select[multiple].form-control,.input-group-sm>select[multiple].input-group-addon,.input-group-sm>.input-group-btn>select[multiple].btn{height:auto}.form-group-sm .form-control{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}.form-group-sm select.form-control{height:30px;line-height:30px}.form-group-sm textarea.form-control,.form-group-sm select[multiple].form-control{height:auto}.form-group-sm .form-control-static{height:30px;min-height:32px;padding:6px 10px;font-size:12px;line-height:1.5}.input-lg,.input-group-lg>.form-control,.input-group-lg>.input-group-addon,.input-group-lg>.input-group-btn>.btn{height:46px;padding:10px 16px;font-size:18px;line-height:1.33333;border-radius:6px}select.input-lg,.input-group-lg>select.form-control,.input-group-lg>select.input-group-addon,.input-group-lg>.input-group-btn>select.btn{height:46px;line-height:46px}textarea.input-lg,.input-group-lg>textarea.form-control,.input-group-lg>textarea.input-group-addon,.input-group-lg>.input-group-btn>textarea.btn,select[multiple].input-lg,.input-group-lg>select[multiple].form-control,.input-group-lg>select[multiple].input-group-addon,.input-group-lg>.input-group-btn>select[multiple].btn{height:auto}.form-group-lg .form-control{height:46px;padding:10px 16px;font-size:18px;line-height:1.33333;border-radius:6px}.form-group-lg select.form-control{height:46px;line-height:46px}.form-group-lg textarea.form-control,.form-group-lg select[multiple].form-control{height:auto}.form-group-lg .form-control-static{height:46px;min-height:38px;padding:11px 16px;font-size:18px;line-height:1.33333}.has-feedback{position:relative}.has-feedback .form-control{padding-right:42.5px}.form-control-feedback{position:absolute;top:0;right:0;z-index:2;display:block;width:34px;height:34px;line-height:34px;text-align:center;pointer-events:none}.input-lg+.form-control-feedback,.input-group-lg>.form-control+.form-control-feedback,.input-group-lg>.input-group-addon+.form-control-feedback,.input-group-lg>.input-group-btn>.btn+.form-control-feedback,.input-group-lg+.form-control-feedback,.form-group-lg .form-control+.form-control-feedback{width:46px;height:46px;line-height:46px}.input-sm+.form-control-feedback,.input-group-sm>.form-control+.form-control-feedback,.input-group-sm>.input-group-addon+.form-control-feedback,.input-group-sm>.input-group-btn>.btn+.form-control-feedback,.input-group-sm+.form-control-feedback,.form-group-sm .form-control+.form-control-feedback{width:30px;height:30px;line-height:30px}.has-success .help-block,.has-success .control-label,.has-success .radio,.has-success .checkbox,.has-success .radio-inline,.has-success .checkbox-inline,.has-success.radio label,.has-success.checkbox label,.has-success.radio-inline label,.has-success.checkbox-inline label{color:#3c763d}.has-success .form-control{border-color:#3c763d;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)}.has-success .form-control:focus{border-color:#2b542c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #67b168;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #67b168}.has-success .input-group-addon{color:#3c763d;border-color:#3c763d;background-color:#dff0d8}.has-success .form-control-feedback{color:#3c763d}.has-warning .help-block,.has-warning .control-label,.has-warning .radio,.has-warning .checkbox,.has-warning .radio-inline,.has-warning .checkbox-inline,.has-warning.radio label,.has-warning.checkbox label,.has-warning.radio-inline label,.has-warning.checkbox-inline label{color:#8a6d3b}.has-warning .form-control{border-color:#8a6d3b;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)}.has-warning .form-control:focus{border-color:#66512c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #c0a16b;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #c0a16b}.has-warning .input-group-addon{color:#8a6d3b;border-color:#8a6d3b;background-color:#fcf8e3}.has-warning .form-control-feedback{color:#8a6d3b}.has-error .help-block,.has-error .control-label,.has-error .radio,.has-error .checkbox,.has-error .radio-inline,.has-error .checkbox-inline,.has-error.radio label,.has-error.checkbox label,.has-error.radio-inline label,.has-error.checkbox-inline label{color:#a94442}.has-error .form-control{border-color:#a94442;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)}.has-error .form-control:focus{border-color:#843534;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #ce8483;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #ce8483}.has-error .input-group-addon{color:#a94442;border-color:#a94442;background-color:#f2dede}.has-error .form-control-feedback{color:#a94442}.has-feedback label ~ .form-control-feedback{top:25px}.has-feedback label.sr-only ~ .form-control-feedback{top:0}.help-block{display:block;margin-top:5px;margin-bottom:10px;color:#737373}@media (min-width: 768px){.form-inline .form-group{display:inline-block;margin-bottom:0;vertical-align:middle}.form-inline .form-control{display:inline-block;width:auto;vertical-align:middle}.form-inline .form-control-static{display:inline-block}.form-inline .input-group{display:inline-table;vertical-align:middle}.form-inline .input-group .input-group-addon,.form-inline .input-group .input-group-btn,.form-inline .input-group .form-control{width:auto}.form-inline .input-group>.form-control{width:100%}.form-inline .control-label{margin-bottom:0;vertical-align:middle}.form-inline .radio,.form-inline .checkbox{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.form-inline .radio label,.form-inline .checkbox label{padding-left:0}.form-inline .radio input[type="radio"],.form-inline .checkbox input[type="checkbox"]{position:relative;margin-left:0}.form-inline .has-feedback .form-control-feedback{top:0}}.form-horizontal .radio,.form-horizontal .checkbox,.form-horizontal .radio-inline,.form-horizontal .checkbox-inline{margin-top:0;margin-bottom:0;padding-top:7px}.form-horizontal .radio,.form-horizontal .checkbox{min-height:27px}.form-horizontal .form-group{margin-left:-15px;margin-right:-15px}.form-horizontal .form-group:before,.form-horizontal .form-group:after{content:" ";display:table}.form-horizontal .form-group:after{clear:both}@media (min-width: 768px){.form-horizontal .control-label{text-align:right;margin-bottom:0;padding-top:7px}}.form-horizontal .has-feedback .form-control-feedback{right:15px}@media (min-width: 768px){.form-horizontal .form-group-lg .control-label{padding-top:11px;font-size:18px}}@media (min-width: 768px){.form-horizontal .form-group-sm .control-label{padding-top:6px;font-size:12px}}.input-group{position:relative;display:table;border-collapse:separate}.input-group[class*="col-"]{float:none;padding-left:0;padding-right:0}.input-group .form-control{position:relative;z-index:2;float:left;width:100%;margin-bottom:0}.input-group .form-control:focus{z-index:3}.input-group-addon,.input-group-btn,.input-group .form-control{display:table-cell}.input-group-addon:not(:first-child):not(:last-child),.input-group-btn:not(:first-child):not(:last-child),.input-group .form-control:not(:first-child):not(:last-child){border-radius:0}.input-group-addon,.input-group-btn{width:1%;white-space:nowrap;vertical-align:middle}.input-group-addon{padding:6px 12px;font-size:14px;font-weight:normal;line-height:1;color:#555;text-align:center;background-color:#eee;border:1px solid #ccc;border-radius:4px}.input-group-addon.input-sm,.input-group-sm>.input-group-addon,.input-group-sm>.input-group-btn>.input-group-addon.btn{padding:5px 10px;font-size:12px;border-radius:3px}.input-group-addon.input-lg,.input-group-lg>.input-group-addon,.input-group-lg>.input-group-btn>.input-group-addon.btn{padding:10px 16px;font-size:18px;border-radius:6px}.input-group-addon input[type="radio"],.input-group-addon input[type="checkbox"]{margin-top:0}.input-group .form-control:first-child,.input-group-addon:first-child,.input-group-btn:first-child>.btn,.input-group-btn:first-child>.btn-group>.btn,.input-group-btn:first-child>.dropdown-toggle,.input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle),.input-group-btn:last-child>.btn-group:not(:last-child)>.btn{border-bottom-right-radius:0;border-top-right-radius:0}.input-group-addon:first-child{border-right:0}.input-group .form-control:last-child,.input-group-addon:last-child,.input-group-btn:last-child>.btn,.input-group-btn:last-child>.btn-group>.btn,.input-group-btn:last-child>.dropdown-toggle,.input-group-btn:first-child>.btn:not(:first-child),.input-group-btn:first-child>.btn-group:not(:first-child)>.btn{border-bottom-left-radius:0;border-top-left-radius:0}.input-group-addon:last-child{border-left:0}.input-group-btn{position:relative;font-size:0;white-space:nowrap}.input-group-btn>.btn{position:relative}.input-group-btn>.btn+.btn{margin-left:-1px}.input-group-btn>.btn:hover,.input-group-btn>.btn:focus,.input-group-btn>.btn:active{z-index:2}.input-group-btn:first-child>.btn,.input-group-btn:first-child>.btn-group{margin-right:-1px}.input-group-btn:last-child>.btn,.input-group-btn:last-child>.btn-group{z-index:2;margin-left:-1px}@-webkit-keyframes ax-toast-bottom{from{-webkit-transform:translateY(-100px) scale(0.7)}to{-webkit-transform:translateY(0px) scale(1)}}@-moz-keyframes ax-toast-bottom{from{-moz-transform:translateY(-100px) scale(0.7)}to{-moz-transform:translateY(0px) scale(1)}}@keyframes ax-toast-bottom{from{-webkit-transform:translateY(-100px) scale(0.7);-moz-transform:translateY(-100px) scale(0.7);-ms-transform:translateY(-100px) scale(0.7);-o-transform:translateY(-100px) scale(0.7);transform:translateY(-100px) scale(0.7)}to{-webkit-transform:translateY(0px) scale(1);-moz-transform:translateY(0px) scale(1);-ms-transform:translateY(0px) scale(1);-o-transform:translateY(0px) scale(1);transform:translateY(0px) scale(1)}}@-webkit-keyframes ax-toast-top{from{-webkit-transform:translateY(100px) scale(0.7)}to{-webkit-transform:translateY(0px) scale(1)}}@-moz-keyframes ax-toast-top{from{-moz-transform:translateY(100px) scale(0.7)}to{-moz-transform:translateY(0px) scale(1)}}@keyframes ax-toast-top{from{-webkit-transform:translateY(100px) scale(0.7);-moz-transform:translateY(100px) scale(0.7);-ms-transform:translateY(100px) scale(0.7);-o-transform:translateY(100px) scale(0.7);transform:translateY(100px) scale(0.7)}to{-webkit-transform:translateY(0px) scale(1);-moz-transform:translateY(0px) scale(1);-ms-transform:translateY(0px) scale(1);-o-transform:translateY(0px) scale(1);transform:translateY(0px) scale(1)}}@-webkit-keyframes ax-toast-removed-bottom{from{-webkit-transform:translateY(0px);opacity:1.0}to{-webkit-transform:translateY(10px) scale(0.7);opacity:0.0}}@-moz-keyframes ax-toast-removed-bottom{from{-moz-transform:translateY(0px);opacity:1.0}to{-moz-transform:translateY(10px) scale(0.7);opacity:0.0}}@keyframes ax-toast-removed-bottom{from{-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);-o-transform:translateY(0px);transform:translateY(0px);opacity:1.0}to{-webkit-transform:translateY(10px) scale(0.7);-moz-transform:translateY(10px) scale(0.7);-ms-transform:translateY(10px) scale(0.7);-o-transform:translateY(10px) scale(0.7);transform:translateY(10px) scale(0.7);opacity:0.0}}@-webkit-keyframes ax-toast-removed-top{from{-webkit-transform:translateY(0px);opacity:1.0}to{-webkit-transform:translateY(-10px) scale(0.7);opacity:0.0}}@-moz-keyframes ax-toast-removed-top{from{-moz-transform:translateY(0px);opacity:1.0}to{-moz-transform:translateY(-10px) scale(0.7);opacity:0.0}}@keyframes ax-toast-removed-top{from{-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);-o-transform:translateY(0px);transform:translateY(0px);opacity:1.0}to{-webkit-transform:translateY(-10px) scale(0.7);-moz-transform:translateY(-10px) scale(0.7);-ms-transform:translateY(-10px) scale(0.7);-o-transform:translateY(-10px) scale(0.7);transform:translateY(-10px) scale(0.7);opacity:0.0}}@-webkit-keyframes ax-toast-destroy{from{-webkit-transform:scale(1);opacity:1.0}to{-webkit-transform:scale(1.5);opacity:0.0}}@-moz-keyframes ax-toast-destroy{from{-moz-transform:scale(1);opacity:1.0}to{-moz-transform:scale(1.5);opacity:0.0}}@keyframes ax-toast-destroy{from{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);opacity:1.0}to{-webkit-transform:scale(1.5);-moz-transform:scale(1.5);-ms-transform:scale(1.5);-o-transform:scale(1.5);transform:scale(1.5);opacity:0.0}}.ax5-ui-toast-container{z-index:2000;position:fixed;width:auto;padding:10px;box-sizing:border-box}.ax5-ui-toast-container *,.ax5-ui-toast-container *:before,.ax5-ui-toast-container *:after{box-sizing:border-box}.ax5-ui-toast-container .ax5-ui-toast{box-sizing:border-box;border:1px solid gray;opacity:.9;border-radius:8px;box-shadow:0px 0px 5px 0px rgba(0,0,0,0.175);position:relative;margin:5px 0px 5px 0px;display:table;padding:6px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;background:#fff;color:#333}.ax5-ui-toast-container .ax5-ui-toast .ax-toast-icon{display:table-cell;padding:6px;text-align:left;font-size:24px;width:24px;vertical-align:middle}.ax5-ui-toast-container .ax5-ui-toast .ax-toast-body{display:table-cell;padding:6px;text-align:left;vertical-align:middle}.ax5-ui-toast-container .ax5-ui-toast .ax-toast-buttons{display:table-cell;padding:6px;text-align:right;vertical-align:middle}.ax5-ui-toast-container .ax5-ui-toast .ax-toast-buttons button:not(:last-child){margin-right:3px}.ax5-ui-toast-container .ax5-ui-toast .ax-toast-close{display:table-cell;padding:6px;text-align:right;vertical-align:top;text-decoration:none;cursor:pointer}.ax5-ui-toast-container .ax5-ui-toast .ax-toast-icon{color:#333}.ax5-ui-toast-container .ax5-ui-toast .ax-toast-close{color:#333}.ax5-ui-toast-container .ax5-ui-toast.primary{background:#fff;color:#337ab7}.ax5-ui-toast-container .ax5-ui-toast.primary .ax-toast-icon{color:#337ab7}.ax5-ui-toast-container .ax5-ui-toast.primary .ax-toast-close{color:#337ab7}.ax5-ui-toast-container .ax5-ui-toast.success{background:#fff;color:#5cb85c}.ax5-ui-toast-container .ax5-ui-toast.success .ax-toast-icon{color:#5cb85c}.ax5-ui-toast-container .ax5-ui-toast.success .ax-toast-close{color:#5cb85c}.ax5-ui-toast-container .ax5-ui-toast.info{background:#fff;color:#5bc0de}.ax5-ui-toast-container .ax5-ui-toast.info .ax-toast-icon{color:#5bc0de}.ax5-ui-toast-container .ax5-ui-toast.info .ax-toast-close{color:#5bc0de}.ax5-ui-toast-container .ax5-ui-toast.warning{background:#fff;color:#f0ad4e}.ax5-ui-toast-container .ax5-ui-toast.warning .ax-toast-icon{color:#f0ad4e}.ax5-ui-toast-container .ax5-ui-toast.warning .ax-toast-close{color:#f0ad4e}.ax5-ui-toast-container .ax5-ui-toast.danger{background:#fff;color:#d9534f}.ax5-ui-toast-container .ax5-ui-toast.danger .ax-toast-icon{color:#d9534f}.ax5-ui-toast-container .ax5-ui-toast.danger .ax-toast-close{color:#d9534f}.ax5-ui-toast-container.bottom-left{left:0;bottom:0}.ax5-ui-toast-container.bottom-left .ax5-ui-toast{-webkit-animation:ax-toast-top .3s cubic-bezier(0.86, 0, 0.07, 1);-o-animation:ax-toast-top .3s cubic-bezier(0.86, 0, 0.07, 1);animation:ax-toast-top .3s cubic-bezier(0.86, 0, 0.07, 1)}.ax5-ui-toast-container.bottom-left .ax5-ui-toast.removed{-webkit-animation:ax-toast-removed-bottom .3s ease forwards;-o-animation:ax-toast-removed-bottom .3s ease forwards;animation:ax-toast-removed-bottom .3s ease forwards}.ax5-ui-toast-container.bottom-left .ax5-ui-toast.destroy{-webkit-animation:ax-toast-destroy .3s ease forwards;-o-animation:ax-toast-destroy .3s ease forwards;animation:ax-toast-destroy .3s ease forwards}.ax5-ui-toast-container.bottom-right{right:0;bottom:0}.ax5-ui-toast-container.bottom-right .ax5-ui-toast{-webkit-animation:ax-toast-top .3s cubic-bezier(0.86, 0, 0.07, 1);-o-animation:ax-toast-top .3s cubic-bezier(0.86, 0, 0.07, 1);animation:ax-toast-top .3s cubic-bezier(0.86, 0, 0.07, 1)}.ax5-ui-toast-container.bottom-right .ax5-ui-toast.removed{-webkit-animation:ax-toast-removed-bottom .3s ease forwards;-o-animation:ax-toast-removed-bottom .3s ease forwards;animation:ax-toast-removed-bottom .3s ease forwards}.ax5-ui-toast-container.bottom-right .ax5-ui-toast.destroy{-webkit-animation:ax-toast-destroy .3s ease forwards;-o-animation:ax-toast-destroy .3s ease forwards;animation:ax-toast-destroy .3s ease forwards}.ax5-ui-toast-container.top-left{left:0;top:0}.ax5-ui-toast-container.top-left .ax5-ui-toast{-webkit-animation:ax-toast-bottom .3s cubic-bezier(0.86, 0, 0.07, 1);-o-animation:ax-toast-bottom .3s cubic-bezier(0.86, 0, 0.07, 1);animation:ax-toast-bottom .3s cubic-bezier(0.86, 0, 0.07, 1)}.ax5-ui-toast-container.top-left .ax5-ui-toast.removed{-webkit-animation:ax-toast-removed-top .3s ease forwards;-o-animation:ax-toast-removed-top .3s ease forwards;animation:ax-toast-removed-top .3s ease forwards}.ax5-ui-toast-container.top-left .ax5-ui-toast.destroy{-webkit-animation:ax-toast-destroy .3s ease forwards;-o-animation:ax-toast-destroy .3s ease forwards;animation:ax-toast-destroy .3s ease forwards}.ax5-ui-toast-container.top-right{right:0;top:0}.ax5-ui-toast-container.top-right .ax5-ui-toast{-webkit-animation:ax-toast-bottom .3s cubic-bezier(0.86, 0, 0.07, 1);-o-animation:ax-toast-bottom .3s cubic-bezier(0.86, 0, 0.07, 1);animation:ax-toast-bottom .3s cubic-bezier(0.86, 0, 0.07, 1)}.ax5-ui-toast-container.top-right .ax5-ui-toast.removed{-webkit-animation:ax-toast-removed-top .3s ease forwards;-o-animation:ax-toast-removed-top .3s ease forwards;animation:ax-toast-removed-top .3s ease forwards}.ax5-ui-toast-container.top-right .ax5-ui-toast.destroy{-webkit-animation:ax-toast-destroy .3s ease forwards;-o-animation:ax-toast-destroy .3s ease forwards;animation:ax-toast-destroy .3s ease forwards} 10 | -------------------------------------------------------------------------------- /dist/ax5toast.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // ax5.ui.toast 4 | (function () { 5 | 6 | var UI = ax5.ui; 7 | var U = ax5.util; 8 | var TOAST; 9 | 10 | UI.addClass({ 11 | className: "toast" 12 | }, function () { 13 | /** 14 | * @class ax5toast 15 | * @classdesc 16 | * @author tom@axisj.com 17 | * @example 18 | * ``` 19 | * ```js 20 | * var toast = new ax5.ui.toast(); 21 | * toast.setConfig({ 22 | * icon: '', 23 | * containerPosition: "bottom-right", 24 | * closeIcon: '' 25 | * }); 26 | * 27 | * toast.onStateChanged = function(){ 28 | * console.log(this); 29 | * }; 30 | * 31 | * toast.push({ 32 | * icon: '', 33 | * msg:"999999" 34 | * }); 35 | * 36 | * toast.push({ 37 | * theme: theme, 38 | * msg: 'toast message' 39 | * }); 40 | * ``` 41 | */ 42 | var ax5toast = function ax5toast() { 43 | var self = this, 44 | cfg, 45 | toastSeq = 0, 46 | toastSeqClear = null; 47 | 48 | this.instanceId = ax5.getGuid(); 49 | this.config = { 50 | clickEventName: "click", //(('ontouchstart' in document.documentElement) ? "touchstart" : "click"), 51 | theme: 'default', 52 | width: 300, 53 | icon: '', 54 | closeIcon: '', 55 | msg: '', 56 | lang: { 57 | "ok": "ok", "cancel": "cancel" 58 | }, 59 | displayTime: 3000, 60 | animateTime: 250, 61 | containerPosition: "bottom-left" 62 | }; 63 | this.toastContainer = null; 64 | this.queue = []; 65 | 66 | cfg = this.config; 67 | 68 | var onStateChanged = function onStateChanged(opts, that) { 69 | if (opts && opts.onStateChanged) { 70 | opts.onStateChanged.call(that, that); 71 | } else if (this.onStateChanged) { 72 | this.onStateChanged.call(that, that); 73 | } 74 | 75 | opts = null; 76 | that = null; 77 | return true; 78 | }, 79 | 80 | /** 81 | * @method ax5toast.getContent 82 | * @param {String} toastId 83 | * @param {Object} opts 84 | * @returns toastDisplay 85 | * @example 86 | * ```js 87 | * ax5toast.getContent('ax5-toast-3-1', opts); 88 | * ``` 89 | */ 90 | getContent = function getContent(toastId, opts) { 91 | 92 | var data = { 93 | toastId: toastId, 94 | theme: opts.theme, 95 | icon: opts.icon, 96 | msg: (opts.msg || "").replace(/\n/g, "
"), 97 | btns: opts.btns, 98 | closeIcon: opts.closeIcon 99 | }; 100 | 101 | try { 102 | return TOAST.tmpl.get.call(this, "toastDisplay", data); 103 | } finally { 104 | toastId = null; 105 | data = null; 106 | } 107 | }, 108 | 109 | /** 110 | * @method ax5toast.open 111 | * @param opts 112 | * @param callBack 113 | * @returns {ax5toast} 114 | */ 115 | open = function open(opts, callBack) { 116 | if (toastSeqClear) clearTimeout(toastSeqClear); 117 | 118 | var toastBox, 119 | box = { 120 | width: opts.width 121 | }; 122 | 123 | opts.id = 'ax5-toast-' + self.containerId + '-' + ++toastSeq; 124 | if (jQuery('#' + opts.id).get(0)) return this; 125 | 126 | if (U.left(cfg.containerPosition, '-') == 'bottom') { 127 | this.toastContainer.append(getContent(opts.id, opts)); 128 | } else { 129 | this.toastContainer.prepend(getContent(opts.id, opts)); 130 | } 131 | 132 | toastBox = jQuery('#' + opts.id); 133 | toastBox.css({ width: box.width }); 134 | opts.toastBox = toastBox; 135 | this.queue.push(opts); 136 | 137 | onStateChanged.call(this, opts, { 138 | self: this, 139 | state: "open", 140 | toastId: opts.id 141 | }); 142 | 143 | if (opts.toastType === "push") { 144 | // 자동 제거 타이머 시작 145 | setTimeout(function () { 146 | this.close(opts, callBack); 147 | }.bind(this), cfg.displayTime); 148 | 149 | toastBox.find("[data-ax-toast-btn]").on(cfg.clickEventName, function (e) { 150 | btnOnClick.call(this, e || window.event, opts, toastBox, callBack); 151 | }.bind(this)); 152 | } else if (opts.toastType === "confirm") { 153 | toastBox.find("[data-ax-toast-btn]").on(cfg.clickEventName, function (e) { 154 | btnOnClick.call(this, e || window.event, opts, toastBox, callBack); 155 | }.bind(this)); 156 | } 157 | 158 | box = null; 159 | }, 160 | btnOnClick = function btnOnClick(e, opts, toastBox, callBack, target, k) { 161 | target = U.findParentNode(e.target, function (target) { 162 | if (target.getAttribute("data-ax-toast-btn")) { 163 | return true; 164 | } 165 | }); 166 | 167 | if (target) { 168 | k = target.getAttribute("data-ax-toast-btn"); 169 | 170 | var that = { 171 | key: k, value: opts.btns ? opts.btns[k] : k, 172 | toastId: opts.id, 173 | btn_target: target 174 | }; 175 | 176 | if (opts.btns && opts.btns[k].onClick) { 177 | opts.btns[k].onClick.call(that, k); 178 | } else if (opts.toastType === "push") { 179 | if (callBack) callBack.call(that, k); 180 | this.close(opts, callBack); 181 | } else if (opts.toastType === "confirm") { 182 | if (callBack) callBack.call(that, k); 183 | this.close(opts, callBack); 184 | } 185 | } 186 | 187 | e = null; 188 | opts = null; 189 | toastBox = null; 190 | callBack = null; 191 | target = null; 192 | k = null; 193 | }; 194 | 195 | /** 196 | * Preferences of toast UI 197 | * @method ax5toast.set_config 198 | * @param {Object} config - 클래스 속성값 199 | * @returns {ax5toast} 200 | * @example 201 | * ``` 202 | * ``` 203 | */ 204 | //== class body start 205 | this.init = function () { 206 | this.onStateChanged = cfg.onStateChanged; 207 | // after set_config(); 208 | self.containerId = ax5.getGuid(); 209 | var styles = []; 210 | if (cfg.zIndex) { 211 | styles.push("z-index:" + cfg.zIndex); 212 | } 213 | jQuery(document.body).append('
'); 214 | this.toastContainer = jQuery('[data-toast-container="' + self.containerId + '"]'); 215 | }; 216 | 217 | /** 218 | * @method ax5toast.push 219 | * @param opts 220 | * @param callBack 221 | * @returns {ax5toast} 222 | */ 223 | this.push = function (opts, callBack) { 224 | if (!self.containerId) { 225 | this.init(); 226 | } 227 | if (U.isString(opts)) { 228 | opts = { 229 | title: cfg.title, 230 | msg: opts 231 | }; 232 | } 233 | opts.toastType = "push"; 234 | 235 | self.dialogConfig = {}; 236 | jQuery.extend(true, self.dialogConfig, cfg, opts); 237 | opts = self.dialogConfig; 238 | 239 | open.call(this, opts, callBack); 240 | 241 | opts = null; 242 | callBack = null; 243 | return this; 244 | }; 245 | 246 | /** 247 | * @method ax5toast.confirm 248 | * @param opts 249 | * @param callBack 250 | * @returns {ax5toast} 251 | */ 252 | this.confirm = function (opts, callBack) { 253 | if (!self.containerId) { 254 | this.init(); 255 | } 256 | if (U.isString(opts)) { 257 | opts = { 258 | title: cfg.title, 259 | msg: opts 260 | }; 261 | } 262 | opts.toastType = "confirm"; 263 | 264 | self.dialogConfig = {}; 265 | jQuery.extend(true, self.dialogConfig, cfg, opts); 266 | opts = self.dialogConfig; 267 | 268 | if (typeof opts.btns === "undefined") { 269 | opts.btns = { 270 | ok: { label: cfg.lang["ok"], theme: opts.theme } 271 | }; 272 | } 273 | open.call(this, opts, callBack); 274 | 275 | opts = null; 276 | callBack = null; 277 | return this; 278 | }; 279 | 280 | /** 281 | * close the toast 282 | * @method ax5toast.close 283 | * @returns {ax5toast} 284 | * @example 285 | * ``` 286 | * my_toast.close(); 287 | * ``` 288 | */ 289 | this.close = function (opts, callBack) { 290 | if (typeof opts === "undefined") { 291 | opts = U.last(this.queue); 292 | } 293 | 294 | var toastBox = opts.toastBox; 295 | toastBox.addClass(opts.toastType == "push" ? "removed" : "destroy"); 296 | this.queue = U.filter(this.queue, function () { 297 | return opts.id != this.id; 298 | }); 299 | setTimeout(function () { 300 | var that = { 301 | toastId: opts.id 302 | }; 303 | 304 | toastBox.remove(); 305 | if (callBack) callBack.call(that); 306 | 307 | that = { 308 | self: this, 309 | state: "close", 310 | toastId: opts.id 311 | }; 312 | onStateChanged.call(this, opts, that); 313 | 314 | // 3초후에도 아무 일이 없다면 완전히 제거 315 | if (this.queue.length === 0) { 316 | if (toastSeqClear) clearTimeout(toastSeqClear); 317 | toastSeqClear = setTimeout(function () { 318 | /// console.log("try clear seq"); 319 | if (this.queue.length === 0) toastSeq = 0; 320 | }.bind(this), 3000); 321 | } 322 | 323 | that = null; 324 | opts = null; 325 | callBack = null; 326 | toastBox = null; 327 | }.bind(this), cfg.animateTime); 328 | 329 | return this; 330 | }; 331 | 332 | // 클래스 생성자 333 | this.main = function () { 334 | 335 | UI.toast_instance = UI.toast_instance || []; 336 | UI.toast_instance.push(this); 337 | 338 | if (arguments && U.isObject(arguments[0])) { 339 | this.setConfig(arguments[0]); 340 | } 341 | }.apply(this, arguments); 342 | }; 343 | return ax5toast; 344 | }()); 345 | TOAST = ax5.ui.toast; 346 | })(); 347 | // ax5.ui.toast.tmpl 348 | (function () { 349 | 350 | var TOAST = ax5.ui.toast; 351 | 352 | var toastDisplay = function toastDisplay(columnKeys) { 353 | return "\n
\n {{#icon}}\n
{{{.}}}
\n {{/icon}}\n
{{{msg}}}
\n {{#btns}}\n
\n
\n {{#@each}}\n \n {{/@each}}\n
\n
\n {{/btns}}\n {{^btns}}\n {{{closeIcon}}}\n {{/btns}}\n
\n
"; 354 | }; 355 | 356 | TOAST.tmpl = { 357 | "toastDisplay": toastDisplay, 358 | 359 | get: function get(tmplName, data, columnKeys) { 360 | return ax5.mustache.render(TOAST.tmpl[tmplName].call(this, columnKeys), data); 361 | } 362 | }; 363 | })(); -------------------------------------------------------------------------------- /dist/ax5toast.min.js: -------------------------------------------------------------------------------- 1 | "use strict";!function(){var t,n=ax5.ui,i=ax5.util;n.addClass({className:"toast"},function(){var a=function(){var a,e=this,s=0,o=null;this.instanceId=ax5.getGuid(),this.config={clickEventName:"click",theme:"default",width:300,icon:"",closeIcon:"",msg:"",lang:{ok:"ok",cancel:"cancel"},displayTime:3e3,animateTime:250,containerPosition:"bottom-left"},this.toastContainer=null,this.queue=[],a=this.config;var l=function(t,n){return t&&t.onStateChanged?t.onStateChanged.call(n,n):this.onStateChanged&&this.onStateChanged.call(n,n),t=null,n=null,!0},c=function(n,i){var a={toastId:n,theme:i.theme,icon:i.icon,msg:(i.msg||"").replace(/\n/g,"
"),btns:i.btns,closeIcon:i.closeIcon};try{return t.tmpl.get.call(this,"toastDisplay",a)}finally{n=null,a=null}},u=function(t,n){o&&clearTimeout(o);var u,h={width:t.width};return t.id="ax5-toast-"+e.containerId+"-"+ ++s,jQuery("#"+t.id).get(0)?this:("bottom"==i.left(a.containerPosition,"-")?this.toastContainer.append(c(t.id,t)):this.toastContainer.prepend(c(t.id,t)),u=jQuery("#"+t.id),u.css({width:h.width}),t.toastBox=u,this.queue.push(t),l.call(this,t,{self:this,state:"open",toastId:t.id}),"push"===t.toastType?(setTimeout(function(){this.close(t,n)}.bind(this),a.displayTime),u.find("[data-ax-toast-btn]").on(a.clickEventName,function(i){d.call(this,i||window.event,t,u,n)}.bind(this))):"confirm"===t.toastType&&u.find("[data-ax-toast-btn]").on(a.clickEventName,function(i){d.call(this,i||window.event,t,u,n)}.bind(this)),void(h=null))},d=function(t,n,a,e,s,o){if(s=i.findParentNode(t.target,function(t){if(t.getAttribute("data-ax-toast-btn"))return!0})){o=s.getAttribute("data-ax-toast-btn");var l={key:o,value:n.btns?n.btns[o]:o,toastId:n.id,btn_target:s};n.btns&&n.btns[o].onClick?n.btns[o].onClick.call(l,o):"push"===n.toastType?(e&&e.call(l,o),this.close(n,e)):"confirm"===n.toastType&&(e&&e.call(l,o),this.close(n,e))}t=null,n=null,a=null,e=null,s=null,o=null};this.init=function(){this.onStateChanged=a.onStateChanged,e.containerId=ax5.getGuid();var t=[];a.zIndex&&t.push("z-index:"+a.zIndex),jQuery(document.body).append('
'),this.toastContainer=jQuery('[data-toast-container="'+e.containerId+'"]')},this.push=function(t,n){return e.containerId||this.init(),i.isString(t)&&(t={title:a.title,msg:t}),t.toastType="push",e.dialogConfig={},jQuery.extend(!0,e.dialogConfig,a,t),t=e.dialogConfig,u.call(this,t,n),t=null,n=null,this},this.confirm=function(t,n){return e.containerId||this.init(),i.isString(t)&&(t={title:a.title,msg:t}),t.toastType="confirm",e.dialogConfig={},jQuery.extend(!0,e.dialogConfig,a,t),t=e.dialogConfig,"undefined"==typeof t.btns&&(t.btns={ok:{label:a.lang.ok,theme:t.theme}}),u.call(this,t,n),t=null,n=null,this},this.close=function(t,n){"undefined"==typeof t&&(t=i.last(this.queue));var e=t.toastBox;return e.addClass("push"==t.toastType?"removed":"destroy"),this.queue=i.filter(this.queue,function(){return t.id!=this.id}),setTimeout(function(){var i={toastId:t.id};e.remove(),n&&n.call(i),i={self:this,state:"close",toastId:t.id},l.call(this,t,i),0===this.queue.length&&(o&&clearTimeout(o),o=setTimeout(function(){0===this.queue.length&&(s=0)}.bind(this),3e3)),i=null,t=null,n=null,e=null}.bind(this),a.animateTime),this},this.main=function(){n.toast_instance=n.toast_instance||[],n.toast_instance.push(this),arguments&&i.isObject(arguments[0])&&this.setConfig(arguments[0])}.apply(this,arguments)};return a}()),t=ax5.ui.toast}(),function(){var t=ax5.ui.toast,n=function(t){return'\n
\n {{#icon}}\n
{{{.}}}
\n {{/icon}}\n
{{{msg}}}
\n {{#btns}}\n
\n
\n {{#@each}}\n \n {{/@each}}\n
\n
\n {{/btns}}\n {{^btns}}\n {{{closeIcon}}}\n {{/btns}}\n
\n
'};t.tmpl={toastDisplay:n,get:function(n,i,a){return ax5.mustache.render(t.tmpl[n].call(this,a),i)}}}(); 2 | //# sourceMappingURL=ax5toast.min.js.map 3 | -------------------------------------------------------------------------------- /dist/ax5toast.min.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["ax5toast.js","ax5toast-tmpl.js"],"names":["TOAST","UI","ax5","ui","U","util","addClass","className","ax5toast","cfg","self","this","toastSeq","toastSeqClear","instanceId","getGuid","config","clickEventName","theme","width","icon","closeIcon","msg","lang","ok","cancel","displayTime","animateTime","containerPosition","toastContainer","queue","onStateChanged","opts","that","call","getContent","toastId","data","replace","btns","tmpl","get","open","callBack","clearTimeout","toastBox","box","id","containerId","jQuery","left","append","prepend","css","push","state","toastType","setTimeout","close","bind","find","on","e","btnOnClick","window","event","target","k","findParentNode","getAttribute","key","value","btn_target","onClick","init","styles","zIndex","document","body","join","isString","title","dialogConfig","extend","confirm","label","last","filter","remove","length","main","toast_instance","arguments","isObject","setConfig","apply","toast","toastDisplay","columnKeys","tmplName","mustache","render"],"mappings":"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","file":"ax5toast.min.js","sourcesContent":["// ax5.ui.toast\n(function () {\n\n var UI = ax5.ui;\n var U = ax5.util;\n var TOAST;\n\n UI.addClass({\n className: \"toast\"\n }, (function () {\n /**\n * @class ax5toast\n * @classdesc\n * @author tom@axisj.com\n * @example\n * ```\n * ```js\n * var toast = new ax5.ui.toast();\n * toast.setConfig({\n * icon: '',\n * containerPosition: \"bottom-right\",\n * closeIcon: ''\n * });\n *\n * toast.onStateChanged = function(){\n * console.log(this);\n * };\n *\n * toast.push({\n * icon: '',\n * msg:\"999999\"\n * });\n *\n * toast.push({\n * theme: theme,\n * msg: 'toast message'\n * });\n * ```\n */\n var ax5toast = function () {\n var\n self = this,\n cfg,\n toastSeq = 0, toastSeqClear = null;\n\n this.instanceId = ax5.getGuid();\n this.config = {\n clickEventName: \"click\", //(('ontouchstart' in document.documentElement) ? \"touchstart\" : \"click\"),\n theme: 'default',\n width: 300,\n icon: '',\n closeIcon: '',\n msg: '',\n lang: {\n \"ok\": \"ok\", \"cancel\": \"cancel\"\n },\n displayTime: 3000,\n animateTime: 250,\n containerPosition: \"bottom-left\"\n };\n this.toastContainer = null;\n this.queue = [];\n\n cfg = this.config;\n\n var\n onStateChanged = function (opts, that) {\n if (opts && opts.onStateChanged) {\n opts.onStateChanged.call(that, that);\n }\n else if (this.onStateChanged) {\n this.onStateChanged.call(that, that);\n }\n\n opts = null;\n that = null;\n return true;\n },\n /**\n * @method ax5toast.getContent\n * @param {String} toastId\n * @param {Object} opts\n * @returns toastDisplay\n * @example\n * ```js\n * ax5toast.getContent('ax5-toast-3-1', opts);\n * ```\n */\n getContent = function (toastId, opts) {\n\n var\n data = {\n toastId: toastId,\n theme: opts.theme,\n icon: opts.icon,\n msg: (opts.msg || \"\").replace(/\\n/g, \"
\"),\n btns: opts.btns,\n closeIcon: opts.closeIcon\n };\n\n try {\n return TOAST.tmpl.get.call(this, \"toastDisplay\", data);\n }\n finally {\n toastId = null;\n data = null;\n }\n },\n /**\n * @method ax5toast.open\n * @param opts\n * @param callBack\n * @returns {ax5toast}\n */\n open = function (opts, callBack) {\n if (toastSeqClear) clearTimeout(toastSeqClear);\n\n var\n toastBox,\n box = {\n width: opts.width\n };\n\n opts.id = 'ax5-toast-' + self.containerId + '-' + (++toastSeq);\n if (jQuery('#' + opts.id).get(0)) return this;\n\n if (U.left(cfg.containerPosition, '-') == 'bottom') {\n this.toastContainer.append(getContent(opts.id, opts));\n }\n else {\n this.toastContainer.prepend(getContent(opts.id, opts));\n }\n\n toastBox = jQuery('#' + opts.id);\n toastBox.css({width: box.width});\n opts.toastBox = toastBox;\n this.queue.push(opts);\n\n onStateChanged.call(this, opts, {\n self: this,\n state: \"open\",\n toastId: opts.id\n });\n\n if (opts.toastType === \"push\") {\n // 자동 제거 타이머 시작\n setTimeout((function () {\n this.close(opts, callBack);\n }).bind(this), cfg.displayTime);\n\n toastBox.find(\"[data-ax-toast-btn]\").on(cfg.clickEventName, (function (e) {\n btnOnClick.call(this, e || window.event, opts, toastBox, callBack);\n }).bind(this));\n }\n else if (opts.toastType === \"confirm\") {\n toastBox.find(\"[data-ax-toast-btn]\").on(cfg.clickEventName, (function (e) {\n btnOnClick.call(this, e || window.event, opts, toastBox, callBack);\n }).bind(this));\n }\n\n box = null;\n },\n btnOnClick = function (e, opts, toastBox, callBack, target, k) {\n target = U.findParentNode(e.target, function (target) {\n if (target.getAttribute(\"data-ax-toast-btn\")) {\n return true;\n }\n });\n\n if (target) {\n k = target.getAttribute(\"data-ax-toast-btn\");\n\n var that = {\n key: k, value: (opts.btns) ? opts.btns[k] : k,\n toastId: opts.id,\n btn_target: target\n };\n\n if (opts.btns && opts.btns[k].onClick) {\n opts.btns[k].onClick.call(that, k);\n }\n else if (opts.toastType === \"push\") {\n if (callBack) callBack.call(that, k);\n this.close(opts, callBack);\n }\n else if (opts.toastType === \"confirm\") {\n if (callBack) callBack.call(that, k);\n this.close(opts, callBack);\n }\n }\n\n e = null;\n opts = null;\n toastBox = null;\n callBack = null;\n target = null;\n k = null;\n };\n\n /**\n * Preferences of toast UI\n * @method ax5toast.set_config\n * @param {Object} config - 클래스 속성값\n * @returns {ax5toast}\n * @example\n * ```\n * ```\n */\n //== class body start\n this.init = function () {\n this.onStateChanged = cfg.onStateChanged;\n // after set_config();\n self.containerId = ax5.getGuid();\n var styles = [];\n if (cfg.zIndex) {\n styles.push(\"z-index:\" + cfg.zIndex);\n }\n jQuery(document.body).append('
');\n this.toastContainer = jQuery('[data-toast-container=\"' + self.containerId + '\"]');\n };\n\n /**\n * @method ax5toast.push\n * @param opts\n * @param callBack\n * @returns {ax5toast}\n */\n this.push = function (opts, callBack) {\n if (!self.containerId) {\n this.init();\n }\n if (U.isString(opts)) {\n opts = {\n title: cfg.title,\n msg: opts\n }\n }\n opts.toastType = \"push\";\n\n self.dialogConfig = {};\n jQuery.extend(true, self.dialogConfig, cfg, opts);\n opts = self.dialogConfig;\n\n open.call(this, opts, callBack);\n\n opts = null;\n callBack = null;\n return this;\n };\n\n /**\n * @method ax5toast.confirm\n * @param opts\n * @param callBack\n * @returns {ax5toast}\n */\n this.confirm = function (opts, callBack) {\n if (!self.containerId) {\n this.init();\n }\n if (U.isString(opts)) {\n opts = {\n title: cfg.title,\n msg: opts\n }\n }\n opts.toastType = \"confirm\";\n\n self.dialogConfig = {};\n jQuery.extend(true, self.dialogConfig, cfg, opts);\n opts = self.dialogConfig;\n\n if (typeof opts.btns === \"undefined\") {\n opts.btns = {\n ok: {label: cfg.lang[\"ok\"], theme: opts.theme}\n };\n }\n open.call(this, opts, callBack);\n\n opts = null;\n callBack = null;\n return this;\n };\n\n /**\n * close the toast\n * @method ax5toast.close\n * @returns {ax5toast}\n * @example\n * ```\n * my_toast.close();\n * ```\n */\n this.close = function (opts, callBack) {\n if (typeof opts === \"undefined\") {\n opts = U.last(this.queue);\n }\n\n var toastBox = opts.toastBox;\n toastBox.addClass((opts.toastType == \"push\") ? \"removed\" : \"destroy\");\n this.queue = U.filter(this.queue, function () {\n return opts.id != this.id;\n });\n setTimeout((function () {\n var that = {\n toastId: opts.id\n };\n\n toastBox.remove();\n if (callBack) callBack.call(that);\n\n that = {\n self: this,\n state: \"close\",\n toastId: opts.id\n };\n onStateChanged.call(this, opts, that);\n\n // 3초후에도 아무 일이 없다면 완전히 제거\n if (this.queue.length === 0) {\n if (toastSeqClear) clearTimeout(toastSeqClear);\n toastSeqClear = setTimeout((function () {\n /// console.log(\"try clear seq\");\n if (this.queue.length === 0) toastSeq = 0;\n }).bind(this), 3000);\n }\n\n that = null;\n opts = null;\n callBack = null;\n toastBox = null;\n }).bind(this), cfg.animateTime);\n\n return this;\n };\n\n // 클래스 생성자\n this.main = (function () {\n\n UI.toast_instance = UI.toast_instance || [];\n UI.toast_instance.push(this);\n\n if (arguments && U.isObject(arguments[0])) {\n this.setConfig(arguments[0]);\n }\n }).apply(this, arguments);\n };\n return ax5toast;\n })());\n TOAST = ax5.ui.toast;\n})();","// ax5.ui.toast.tmpl\n(function () {\n\n var TOAST = ax5.ui.toast;\n\n var toastDisplay = function(columnKeys) {\n return `\n
\n {{#icon}}\n
{{{.}}}
\n {{/icon}}\n
{{{msg}}}
\n {{#btns}}\n
\n
\n {{#@each}}\n \n {{/@each}}\n
\n
\n {{/btns}}\n {{^btns}}\n {{{closeIcon}}}\n {{/btns}}\n
\n
`;\n };\n\n TOAST.tmpl = {\n \"toastDisplay\": toastDisplay,\n\n get: function (tmplName, data, columnKeys) {\n return ax5.mustache.render(TOAST.tmpl[tmplName].call(this, columnKeys), data);\n }\n };\n\n})();"]} -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2017. tom@axisj.com 3 | * - github.com/thomasjang 4 | * - www.axisj.com 5 | */ 6 | 7 | // Karma configuration 8 | // Generated on Wed Sep 21 2016 00:37:04 GMT+0900 (KST) 9 | 10 | module.exports = function (config) { 11 | var configuration = { 12 | // base path that will be used to resolve all patterns (eg. files, exclude) 13 | basePath: '', 14 | 15 | // frameworks to use 16 | // available frameworks: https://npmjs.org/browse/keyword/karma-adapter 17 | frameworks: ['mocha'], 18 | 19 | // list of files / patterns to load in the browser 20 | files: [ 21 | 'https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js', 22 | 'https://cdnjs.cloudflare.com/ajax/libs/should.js/11.1.2/should.min.js', 23 | 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js', 24 | 'https://cdn.rawgit.com/ax5ui/ax5core/master/dist/ax5core.min.js', 25 | 'dist/ax5toast.min.js', 26 | 'https://rawgit.com/aeei/aejs/master/dist/ae.min.js', 27 | 'test/test.*.js' 28 | ], 29 | // list of files to exclude 30 | exclude: [], 31 | // preprocess matching files before serving them to the browser 32 | // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor 33 | preprocessors: {}, 34 | // test results reporter to use 35 | // possible values: 'dots', 'progress' 36 | // available reporters: https://npmjs.org/browse/keyword/karma-reporter 37 | reporters: ['progress'], 38 | // web server port 39 | port: 9876, 40 | // enable / disable colors in the output (reporters and logs) 41 | colors: true, 42 | // level of logging 43 | // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG 44 | logLevel: config.LOG_INFO, 45 | // enable / disable watching file and executing tests whenever any file changes 46 | autoWatch: true, 47 | // start these browsers 48 | // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher 49 | //browsers: ['PhantomJS'], 50 | browsers: ['Chrome', 'Firefox'], 51 | customLaunchers: { 52 | Chrome_travis_ci: { 53 | base: 'Chrome', 54 | flags: ['--no-sandbox'] 55 | } 56 | }, 57 | singleRun: true, 58 | concurrency: Infinity 59 | }; 60 | 61 | if (process.env.TRAVIS) { 62 | configuration.browsers = ['PhantomJS']; 63 | } 64 | 65 | config.set(configuration); 66 | } 67 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ax5ui-toast", 3 | "version": "1.4.131", 4 | "description": "A toast plugin that works with Bootstrap & jQuery", 5 | "license": "MIT", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/ax5ui/ax5ui-toast" 9 | }, 10 | "author": { 11 | "name": "Thomas Jang", 12 | "email": "tom@axisj.com", 13 | "url": "ax5.io" 14 | }, 15 | "keywords": [ 16 | "bootstrap", 17 | "jquery", 18 | "ax5ui", 19 | "plugin", 20 | "bootstrap jQuery plugins", 21 | "dialog", 22 | "ax5ui-dialog", 23 | "javascript ui" 24 | ], 25 | "scripts": { 26 | "test": "karma start karma.conf.js" 27 | }, 28 | "dependencies": { 29 | "jquery": "", 30 | "ax5core": ">=1.4.115" 31 | }, 32 | "devDependencies": { 33 | "karma": "^1.3.0", 34 | "karma-mocha": "^1.2.0", 35 | "karma-phantomjs-launcher": "^1.0.2", 36 | "mocha": "^3.1.0", 37 | "phantomjs-prebuilt": "^2.1.13", 38 | "webdriverio": "^4.6.1" 39 | } 40 | } -------------------------------------------------------------------------------- /src/ax5toast.js: -------------------------------------------------------------------------------- 1 | // ax5.ui.toast 2 | (function () { 3 | 4 | var UI = ax5.ui; 5 | var U = ax5.util; 6 | var TOAST; 7 | 8 | UI.addClass({ 9 | className: "toast" 10 | }, (function () { 11 | /** 12 | * @class ax5toast 13 | * @classdesc 14 | * @author tom@axisj.com 15 | * @example 16 | * ``` 17 | * ```js 18 | * var toast = new ax5.ui.toast(); 19 | * toast.setConfig({ 20 | * icon: '', 21 | * containerPosition: "bottom-right", 22 | * closeIcon: '' 23 | * }); 24 | * 25 | * toast.onStateChanged = function(){ 26 | * console.log(this); 27 | * }; 28 | * 29 | * toast.push({ 30 | * icon: '', 31 | * msg:"999999" 32 | * }); 33 | * 34 | * toast.push({ 35 | * theme: theme, 36 | * msg: 'toast message' 37 | * }); 38 | * ``` 39 | */ 40 | var ax5toast = function () { 41 | var 42 | self = this, 43 | cfg, 44 | toastSeq = 0, toastSeqClear = null; 45 | 46 | this.instanceId = ax5.getGuid(); 47 | this.config = { 48 | clickEventName: "click", //(('ontouchstart' in document.documentElement) ? "touchstart" : "click"), 49 | theme: 'default', 50 | width: 300, 51 | icon: '', 52 | closeIcon: '', 53 | msg: '', 54 | lang: { 55 | "ok": "ok", "cancel": "cancel" 56 | }, 57 | displayTime: 3000, 58 | animateTime: 250, 59 | containerPosition: "bottom-left" 60 | }; 61 | this.toastContainer = null; 62 | this.queue = []; 63 | 64 | cfg = this.config; 65 | 66 | var 67 | onStateChanged = function (opts, that) { 68 | if (opts && opts.onStateChanged) { 69 | opts.onStateChanged.call(that, that); 70 | } 71 | else if (this.onStateChanged) { 72 | this.onStateChanged.call(that, that); 73 | } 74 | 75 | opts = null; 76 | that = null; 77 | return true; 78 | }, 79 | /** 80 | * @method ax5toast.getContent 81 | * @param {String} toastId 82 | * @param {Object} opts 83 | * @returns toastDisplay 84 | * @example 85 | * ```js 86 | * ax5toast.getContent('ax5-toast-3-1', opts); 87 | * ``` 88 | */ 89 | getContent = function (toastId, opts) { 90 | 91 | var 92 | data = { 93 | toastId: toastId, 94 | theme: opts.theme, 95 | icon: opts.icon, 96 | msg: (opts.msg || "").replace(/\n/g, "
"), 97 | btns: opts.btns, 98 | closeIcon: opts.closeIcon 99 | }; 100 | 101 | try { 102 | return TOAST.tmpl.get.call(this, "toastDisplay", data); 103 | } 104 | finally { 105 | toastId = null; 106 | data = null; 107 | } 108 | }, 109 | /** 110 | * @method ax5toast.open 111 | * @param opts 112 | * @param callBack 113 | * @returns {ax5toast} 114 | */ 115 | open = function (opts, callBack) { 116 | if (toastSeqClear) clearTimeout(toastSeqClear); 117 | 118 | var 119 | toastBox, 120 | box = { 121 | width: opts.width 122 | }; 123 | 124 | opts.id = 'ax5-toast-' + self.containerId + '-' + (++toastSeq); 125 | if (jQuery('#' + opts.id).get(0)) return this; 126 | 127 | if (U.left(cfg.containerPosition, '-') == 'bottom') { 128 | this.toastContainer.append(getContent(opts.id, opts)); 129 | } 130 | else { 131 | this.toastContainer.prepend(getContent(opts.id, opts)); 132 | } 133 | 134 | toastBox = jQuery('#' + opts.id); 135 | toastBox.css({width: box.width}); 136 | opts.toastBox = toastBox; 137 | this.queue.push(opts); 138 | 139 | onStateChanged.call(this, opts, { 140 | self: this, 141 | state: "open", 142 | toastId: opts.id 143 | }); 144 | 145 | if (opts.toastType === "push") { 146 | // 자동 제거 타이머 시작 147 | setTimeout((function () { 148 | this.close(opts, callBack); 149 | }).bind(this), cfg.displayTime); 150 | 151 | toastBox.find("[data-ax-toast-btn]").on(cfg.clickEventName, (function (e) { 152 | btnOnClick.call(this, e || window.event, opts, toastBox, callBack); 153 | }).bind(this)); 154 | } 155 | else if (opts.toastType === "confirm") { 156 | toastBox.find("[data-ax-toast-btn]").on(cfg.clickEventName, (function (e) { 157 | btnOnClick.call(this, e || window.event, opts, toastBox, callBack); 158 | }).bind(this)); 159 | } 160 | 161 | box = null; 162 | }, 163 | btnOnClick = function (e, opts, toastBox, callBack, target, k) { 164 | target = U.findParentNode(e.target, function (target) { 165 | if (target.getAttribute("data-ax-toast-btn")) { 166 | return true; 167 | } 168 | }); 169 | 170 | if (target) { 171 | k = target.getAttribute("data-ax-toast-btn"); 172 | 173 | var that = { 174 | key: k, value: (opts.btns) ? opts.btns[k] : k, 175 | toastId: opts.id, 176 | btn_target: target 177 | }; 178 | 179 | if (opts.btns && opts.btns[k].onClick) { 180 | opts.btns[k].onClick.call(that, k); 181 | } 182 | else if (opts.toastType === "push") { 183 | if (callBack) callBack.call(that, k); 184 | this.close(opts, callBack); 185 | } 186 | else if (opts.toastType === "confirm") { 187 | if (callBack) callBack.call(that, k); 188 | this.close(opts, callBack); 189 | } 190 | } 191 | 192 | e = null; 193 | opts = null; 194 | toastBox = null; 195 | callBack = null; 196 | target = null; 197 | k = null; 198 | }; 199 | 200 | /** 201 | * Preferences of toast UI 202 | * @method ax5toast.set_config 203 | * @param {Object} config - 클래스 속성값 204 | * @returns {ax5toast} 205 | * @example 206 | * ``` 207 | * ``` 208 | */ 209 | //== class body start 210 | this.init = function () { 211 | this.onStateChanged = cfg.onStateChanged; 212 | // after set_config(); 213 | self.containerId = ax5.getGuid(); 214 | var styles = []; 215 | if (cfg.zIndex) { 216 | styles.push("z-index:" + cfg.zIndex); 217 | } 218 | jQuery(document.body).append('
'); 220 | this.toastContainer = jQuery('[data-toast-container="' + self.containerId + '"]'); 221 | }; 222 | 223 | /** 224 | * @method ax5toast.push 225 | * @param opts 226 | * @param callBack 227 | * @returns {ax5toast} 228 | */ 229 | this.push = function (opts, callBack) { 230 | if (!self.containerId) { 231 | this.init(); 232 | } 233 | if (U.isString(opts)) { 234 | opts = { 235 | title: cfg.title, 236 | msg: opts 237 | } 238 | } 239 | opts.toastType = "push"; 240 | 241 | self.dialogConfig = {}; 242 | jQuery.extend(true, self.dialogConfig, cfg, opts); 243 | opts = self.dialogConfig; 244 | 245 | open.call(this, opts, callBack); 246 | 247 | opts = null; 248 | callBack = null; 249 | return this; 250 | }; 251 | 252 | /** 253 | * @method ax5toast.confirm 254 | * @param opts 255 | * @param callBack 256 | * @returns {ax5toast} 257 | */ 258 | this.confirm = function (opts, callBack) { 259 | if (!self.containerId) { 260 | this.init(); 261 | } 262 | if (U.isString(opts)) { 263 | opts = { 264 | title: cfg.title, 265 | msg: opts 266 | } 267 | } 268 | opts.toastType = "confirm"; 269 | 270 | self.dialogConfig = {}; 271 | jQuery.extend(true, self.dialogConfig, cfg, opts); 272 | opts = self.dialogConfig; 273 | 274 | if (typeof opts.btns === "undefined") { 275 | opts.btns = { 276 | ok: {label: cfg.lang["ok"], theme: opts.theme} 277 | }; 278 | } 279 | open.call(this, opts, callBack); 280 | 281 | opts = null; 282 | callBack = null; 283 | return this; 284 | }; 285 | 286 | /** 287 | * close the toast 288 | * @method ax5toast.close 289 | * @returns {ax5toast} 290 | * @example 291 | * ``` 292 | * my_toast.close(); 293 | * ``` 294 | */ 295 | this.close = function (opts, callBack) { 296 | if (typeof opts === "undefined") { 297 | opts = U.last(this.queue); 298 | } 299 | 300 | var toastBox = opts.toastBox; 301 | toastBox.addClass((opts.toastType == "push") ? "removed" : "destroy"); 302 | this.queue = U.filter(this.queue, function () { 303 | return opts.id != this.id; 304 | }); 305 | setTimeout((function () { 306 | var that = { 307 | toastId: opts.id 308 | }; 309 | 310 | toastBox.remove(); 311 | if (callBack) callBack.call(that); 312 | 313 | that = { 314 | self: this, 315 | state: "close", 316 | toastId: opts.id 317 | }; 318 | onStateChanged.call(this, opts, that); 319 | 320 | // 3초후에도 아무 일이 없다면 완전히 제거 321 | if (this.queue.length === 0) { 322 | if (toastSeqClear) clearTimeout(toastSeqClear); 323 | toastSeqClear = setTimeout((function () { 324 | /// console.log("try clear seq"); 325 | if (this.queue.length === 0) toastSeq = 0; 326 | }).bind(this), 3000); 327 | } 328 | 329 | that = null; 330 | opts = null; 331 | callBack = null; 332 | toastBox = null; 333 | }).bind(this), cfg.animateTime); 334 | 335 | return this; 336 | }; 337 | 338 | // 클래스 생성자 339 | this.main = (function () { 340 | 341 | UI.toast_instance = UI.toast_instance || []; 342 | UI.toast_instance.push(this); 343 | 344 | if (arguments && U.isObject(arguments[0])) { 345 | this.setConfig(arguments[0]); 346 | } 347 | }).apply(this, arguments); 348 | }; 349 | return ax5toast; 350 | })()); 351 | TOAST = ax5.ui.toast; 352 | })(); -------------------------------------------------------------------------------- /src/ax5toast.scss: -------------------------------------------------------------------------------- 1 | @import "node_modules/ax5core/src/_ax5.scss"; 2 | 3 | @import "scss/ax5toast_variables"; 4 | @import "scss/ax5toast"; -------------------------------------------------------------------------------- /src/modules/ax5toast-tmpl.js: -------------------------------------------------------------------------------- 1 | // ax5.ui.toast.tmpl 2 | (function () { 3 | 4 | var TOAST = ax5.ui.toast; 5 | 6 | var toastDisplay = function(columnKeys) { 7 | return ` 8 |
9 | {{#icon}} 10 |
{{{.}}}
11 | {{/icon}} 12 |
{{{msg}}}
13 | {{#btns}} 14 |
15 |
16 | {{#@each}} 17 | 18 | {{/@each}} 19 |
20 |
21 | {{/btns}} 22 | {{^btns}} 23 | {{{closeIcon}}} 24 | {{/btns}} 25 |
26 |
`; 27 | }; 28 | 29 | TOAST.tmpl = { 30 | "toastDisplay": toastDisplay, 31 | 32 | get: function (tmplName, data, columnKeys) { 33 | return ax5.mustache.render(TOAST.tmpl[tmplName].call(this, columnKeys), data); 34 | } 35 | }; 36 | 37 | })(); -------------------------------------------------------------------------------- /src/scss/_ax5toast.scss: -------------------------------------------------------------------------------- 1 | @mixin ax-toast() { 2 | box-sizing: $ax5toast-box-model; 3 | border: $ax5toast-border; 4 | opacity: $ax5toast-opacity; 5 | 6 | @include ax-border-radius($ax5toast-border-radius); 7 | box-shadow: $ax5toast-box-shadow; 8 | position: relative; 9 | margin: $ax5toast-box-margin; 10 | } 11 | 12 | @mixin ax-toast-section() { 13 | display: table; 14 | padding: $ax5toast-body-padding; 15 | .ax-toast-icon { 16 | display: table-cell; 17 | padding: $ax5toast-body-padding; 18 | text-align: left; 19 | font-size: $ax5toast-icon-size; 20 | width: $ax5toast-icon-size; 21 | vertical-align: middle; 22 | } 23 | .ax-toast-body { 24 | display: table-cell; 25 | padding: $ax5toast-body-padding; 26 | text-align: left; 27 | vertical-align: middle; 28 | } 29 | .ax-toast-buttons { 30 | display: table-cell; 31 | padding: $ax5toast-body-padding; 32 | text-align: right; 33 | vertical-align: middle; 34 | button { 35 | &:not(:last-child) { 36 | margin-right: 3px; 37 | } 38 | } 39 | } 40 | .ax-toast-close { 41 | display: table-cell; 42 | padding: $ax5toast-body-padding; 43 | text-align: right; 44 | vertical-align: top; 45 | text-decoration: none; 46 | cursor: pointer; 47 | } 48 | } 49 | 50 | @mixin toast-variant($text-color, $bg-color, $color) { 51 | background: $bg-color; 52 | color: $text-color; 53 | .ax-toast-icon { 54 | color: $color; 55 | } 56 | .ax-toast-close { 57 | color: $text-color; 58 | } 59 | } 60 | 61 | @include keyframes(ax-toast-bottom) { 62 | from { 63 | @include transform(translateY(-100px) scale(0.7)); 64 | } 65 | to { 66 | //@include opacity($mask-bg-opacity); 67 | @include transform(translateY(0px) scale(1)) 68 | } 69 | } 70 | 71 | @include keyframes(ax-toast-top) { 72 | from { 73 | @include transform(translateY(100px) scale(0.7)); 74 | } 75 | to { 76 | //@include opacity($mask-bg-opacity); 77 | @include transform(translateY(0px) scale(1)) 78 | } 79 | } 80 | 81 | @include keyframes(ax-toast-removed-bottom) { 82 | from { 83 | @include transform(translateY(0px)); 84 | opacity: 1.0; 85 | } 86 | to { 87 | @include transform(translateY(10px) scale(0.7)); 88 | opacity: 0.0; 89 | } 90 | } 91 | 92 | @include keyframes(ax-toast-removed-top) { 93 | from { 94 | @include transform(translateY(0px)); 95 | opacity: 1.0; 96 | } 97 | to { 98 | @include transform(translateY(-10px) scale(0.7)); 99 | opacity: 0.0; 100 | } 101 | } 102 | 103 | @include keyframes(ax-toast-destroy) { 104 | from { 105 | @include transform(scale(1)); 106 | opacity: 1.0; 107 | } 108 | to { 109 | @include transform(scale(1.5)); 110 | opacity: 0.0; 111 | } 112 | } 113 | 114 | // mixins --------------------------------------------- end 115 | 116 | .ax5-ui-toast-container { 117 | z-index: $ax5toast-z-index; 118 | position: fixed; 119 | width: $ax5toast-container-width; 120 | padding: $ax5toast-container-padding; 121 | 122 | box-sizing: border-box; 123 | *, 124 | *:before, 125 | *:after { 126 | box-sizing: border-box; 127 | } 128 | 129 | .ax5-ui-toast { 130 | @include ax-toast(); 131 | @include ax-toast-section(); 132 | @include transition(all $ax5toast-easing-time ease-in-out); 133 | 134 | @include toast-variant($ax5toast-default-text, $ax5toast-default-bg, $ax5toast-default-color); 135 | 136 | &.primary { 137 | @include toast-variant($ax5toast-primary-text, $ax5toast-primary-bg, $ax5toast-primary-color); 138 | } 139 | &.success { 140 | @include toast-variant($ax5toast-success-text, $ax5toast-success-bg, $ax5toast-success-color); 141 | } 142 | &.info { 143 | @include toast-variant($ax5toast-info-text, $ax5toast-info-bg, $ax5toast-info-color); 144 | } 145 | &.warning { 146 | @include toast-variant($ax5toast-warning-text, $ax5toast-warning-bg, $ax5toast-warning-color); 147 | } 148 | &.danger { 149 | @include toast-variant($ax5toast-danger-text, $ax5toast-danger-bg, $ax5toast-danger-color); 150 | } 151 | } 152 | 153 | &.bottom-left { 154 | left: 0; 155 | bottom: 0; 156 | 157 | .ax5-ui-toast { 158 | @include animation(ax-toast-top $ax5toast-easing-time $ax5toast-easing); 159 | &.removed { 160 | @include animation(ax-toast-removed-bottom $ax5toast-easing-time ease forwards); 161 | } 162 | &.destroy { 163 | @include animation(ax-toast-destroy $ax5toast-easing-time ease forwards); 164 | } 165 | } 166 | } 167 | &.bottom-right { 168 | right: 0; 169 | bottom: 0; 170 | 171 | .ax5-ui-toast { 172 | @include animation(ax-toast-top $ax5toast-easing-time $ax5toast-easing); 173 | &.removed { 174 | @include animation(ax-toast-removed-bottom $ax5toast-easing-time ease forwards); 175 | } 176 | &.destroy { 177 | @include animation(ax-toast-destroy $ax5toast-easing-time ease forwards); 178 | } 179 | } 180 | 181 | } 182 | 183 | &.top-left { 184 | left: 0; 185 | top: 0; 186 | 187 | .ax5-ui-toast { 188 | @include animation(ax-toast-bottom $ax5toast-easing-time $ax5toast-easing); 189 | 190 | &.removed { 191 | @include animation(ax-toast-removed-top $ax5toast-easing-time ease forwards); 192 | } 193 | &.destroy { 194 | @include animation(ax-toast-destroy $ax5toast-easing-time ease forwards); 195 | } 196 | } 197 | } 198 | 199 | &.top-right { 200 | right: 0; 201 | top: 0; 202 | 203 | .ax5-ui-toast { 204 | @include animation(ax-toast-bottom $ax5toast-easing-time $ax5toast-easing); 205 | &.removed { 206 | @include animation(ax-toast-removed-top $ax5toast-easing-time ease forwards); 207 | } 208 | &.destroy { 209 | @include animation(ax-toast-destroy $ax5toast-easing-time ease forwards); 210 | } 211 | } 212 | } 213 | 214 | } 215 | 216 | -------------------------------------------------------------------------------- /src/scss/_ax5toast_variables.scss: -------------------------------------------------------------------------------- 1 | $gray-base: #000 !default; 2 | $gray-darker: lighten($gray-base, 13.5%) !default; // #222 3 | $gray-dark: lighten($gray-base, 20%) !default; // #333 4 | $gray: lighten($gray-base, 33.5%) !default; // #555 5 | $gray-light: lighten($gray-base, 46.7%) !default; // #777 6 | $gray-lighter: lighten($gray-base, 93.5%) !default; // #eee 7 | 8 | $brand-primary: #616161 !default; // #337ab7 9 | $brand-success: #00C6AE !default; 10 | $brand-info: #44ADF9 !default; 11 | $brand-fn1: #6977CF !default; 12 | $brand-fn2: #485398 !default; 13 | $brand-warning: #FFB802 !default; 14 | $brand-danger: #E97426 !default; 15 | 16 | $border-radius-base: 3px !default; 17 | $border-radius-large: 5px !default; 18 | $border-radius-small: 2px !default; 19 | 20 | 21 | //== Form states and alerts 22 | // 23 | //## Define colors for form feedback states and, by default, alerts. 24 | 25 | $state-success-text: #3c763d !default; 26 | $state-success-bg: #dff0d8 !default; 27 | $state-success-border: darken(adjust-hue($state-success-bg, -10), 5%) !default; 28 | 29 | $state-info-text: #31708f !default; 30 | $state-info-bg: #d9edf7 !default; 31 | $state-info-border: darken(adjust-hue($state-info-bg, -10), 7%) !default; 32 | 33 | $state-warning-text: #8a6d3b !default; 34 | $state-warning-bg: #fcf8e3 !default; 35 | $state-warning-border: darken(adjust-hue($state-warning-bg, -10), 5%) !default; 36 | 37 | $state-danger-text: #a94442 !default; 38 | $state-danger-bg: #f2dede !default; 39 | $state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%) !default; 40 | 41 | //== Panels 42 | // 43 | //## 44 | 45 | $panel-bg: #fff !default; 46 | $panel-body-padding: 15px !default; 47 | $panel-heading-padding: 10px 15px !default; 48 | $panel-footer-padding: $panel-heading-padding !default; 49 | $panel-border-radius: $border-radius-base !default; 50 | 51 | //** Border color for elements within panels 52 | $panel-inner-border: #ddd !default; 53 | $panel-footer-bg: #f5f5f5 !default; 54 | 55 | $panel-default-text: $gray-dark !default; 56 | $panel-default-border: #ddd !default; 57 | $panel-default-heading-bg: #f5f5f5 !default; 58 | 59 | $panel-primary-text: #fff !default; 60 | $panel-primary-border: $brand-primary !default; 61 | $panel-primary-heading-bg: $brand-primary !default; 62 | 63 | $panel-success-text: $state-success-text !default; 64 | $panel-success-border: $state-success-border !default; 65 | $panel-success-heading-bg: $state-success-bg !default; 66 | 67 | $panel-info-text: $state-info-text !default; 68 | $panel-info-border: $state-info-border !default; 69 | $panel-info-heading-bg: $state-info-bg !default; 70 | 71 | $panel-warning-text: $state-warning-text !default; 72 | $panel-warning-border: $state-warning-border !default; 73 | $panel-warning-heading-bg: $state-warning-bg !default; 74 | 75 | $panel-danger-text: $state-danger-text !default; 76 | $panel-danger-border: $state-danger-border !default; 77 | $panel-danger-heading-bg: $state-danger-bg !default; 78 | 79 | 80 | //============== toast 81 | $ax5toast-z-index: 2000; 82 | // 0:left,top / 1:right,top / 2:right,bottom / 3:left,bottom 83 | $ax5toast-container-width: auto !default; 84 | $ax5toast-container-padding: 10px !default; 85 | $ax5toast-box-model: border-box !default; 86 | $ax5toast-border: 1px solid rgb(255/2, 255/2, 255/2) !default; 87 | $ax5toast-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.175) !default; 88 | $ax5toast-body-padding: 6px !default; 89 | $ax5toast-border-radius: 8px !default; 90 | $ax5toast-opacity: 0.9 !default; 91 | $ax5toast-box-margin: 5px 0px 5px 0px !default; 92 | $ax5toast-icon-size: 24px; 93 | $ax5toast-easing: $ease-in-out-quint; 94 | $ax5toast-easing-time: 0.3s; 95 | 96 | //** Border color for elements within toast 97 | $ax5toast-default-text: $panel-default-text !default; 98 | $ax5toast-default-bg: $panel-bg !default; 99 | $ax5toast-default-color: $text-color !default; 100 | 101 | $ax5toast-primary-text: $brand-primary !default; 102 | $ax5toast-primary-bg: $panel-bg !default; 103 | $ax5toast-primary-color: $brand-primary !default; 104 | 105 | $ax5toast-success-text: $brand-success !default; 106 | $ax5toast-success-bg: $panel-bg !default; 107 | $ax5toast-success-color: $brand-success !default; 108 | 109 | $ax5toast-info-text: $brand-info !default; 110 | $ax5toast-info-bg: $panel-bg !default; 111 | $ax5toast-info-color: $brand-info !default; 112 | 113 | $ax5toast-warning-text: $brand-warning !default; 114 | $ax5toast-warning-bg: $panel-bg !default; 115 | $ax5toast-warning-color: $brand-warning !default; 116 | 117 | $ax5toast-danger-text: $brand-danger !default; 118 | $ax5toast-danger-bg: $panel-bg !default; 119 | $ax5toast-danger-color: $brand-danger !default; -------------------------------------------------------------------------------- /test/README.md: -------------------------------------------------------------------------------- 1 | # STEP 01 2 | ``` 3 | $ bower install 4 | ``` 5 | `test/bower_components` folder is created, plug-ins required will be downloaded. 6 | 7 | # STEP 02 8 | It'll add the plugin resources to html> head. 9 | ```html 10 | 11 | 12 | 13 | 14 | Title 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | ``` 25 | 26 | -------------------------------------------------------------------------------- /test/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ax5ui-tester", 3 | "dependencies": { 4 | "jquery": "^1.11.0", 5 | "ax5core": ">=1.4.115", 6 | "ax5ui-mask": ">=1.3.0", 7 | "bootstrap": "^3.3.6", 8 | "font-awesome": "" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 21 | 22 | 25 | 26 |
27 | 28 | 31 | 34 | 37 | 40 | 43 | 46 | 47 | 48 |
49 | 50 | 51 | 54 | 57 | 60 | 63 | 66 | 69 | 70 | 118 | 119 | 120 | -------------------------------------------------------------------------------- /test/test.toast.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ax5.toast testing 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /test/test.toast.js: -------------------------------------------------------------------------------- 1 | describe('ax5.ui.toast TEST', function () { 2 | it('toast.push("message", callback)', function (done) { 3 | var message = 'Toast message'; 4 | var toast = new ax5.ui.toast({ 5 | containerPosition: 'top-right', 6 | displayTime: 0, 7 | animateTime: 0, 8 | onStateChanged: function () { 9 | var $toastEl = $('#' + this.toastId); 10 | if (this.state == 'open') { 11 | $toastEl.find('.ax-toast-body').text().should.equal(message); 12 | } else if (this.state == 'close') { 13 | should($toastEl.get(0)).undefined(); 14 | done(); 15 | } 16 | } 17 | }); 18 | 19 | toast.push(message, function () { 20 | should(this.toastId).String(); 21 | }); 22 | }); 23 | 24 | it('toast.confirm("message", callback)', function (done) { 25 | var message = 'Toast message'; 26 | var toast = new ax5.ui.toast({ 27 | containerPosition: 'top-right', 28 | displayTime: 0, 29 | animateTime: 0, 30 | onStateChanged: function () { 31 | var $toastEl = $('#' + this.toastId); 32 | if (this.state == 'open') { 33 | $toastEl.find('.ax-toast-body').text().should.equal(message); 34 | } else if (this.state == 'close') { 35 | should($toastEl.get(0)).undefined(); 36 | done(); 37 | } 38 | } 39 | }); 40 | 41 | toast.confirm(message, function () { 42 | should(this.toastId).String(); 43 | }); 44 | 45 | setTimeout(function () { 46 | $('[data-ax-toast-btn="ok"]').click(); 47 | }, 20); 48 | }); 49 | }); 50 | 51 | describe('ax5toast method TEST', function () { 52 | var that; 53 | var myUI; 54 | 55 | beforeEach(function () { 56 | myUI = new ax5.ui.toast({ 57 | displayTime: 100, 58 | animateTime: 100, 59 | onStateChanged: function () { 60 | that = this; 61 | } 62 | }); 63 | }); 64 | 65 | afterEach(function () { 66 | myUI = null; 67 | }); 68 | 69 | it('toast push open test', function (done) { 70 | myUI.push('message'); 71 | done( 72 | ae.equalAll('message', that.self.queue[0].msg) 73 | || ae.equalAll('open', that.state) 74 | ); 75 | }); 76 | 77 | it('toast push close test', function (done) { 78 | myUI.push('message'); 79 | setTimeout(function () { 80 | done( 81 | ae.equalAll(0, that.self.queue.length) 82 | || ae.equalAll('close', that.state) 83 | ); 84 | }, myUI.config.animateTime + myUI.config.displayTime + 50); 85 | }); 86 | 87 | it('toast confirm open test', function (done) { 88 | myUI.confirm('message'); 89 | done( 90 | ae.equalAll('message', that.self.queue[0].msg) 91 | || ae.equalAll('open', that.state) 92 | ); 93 | }); 94 | 95 | it('toast confirm close test', function (done) { 96 | myUI.confirm('message'); 97 | $('[data-ax-toast-btn="ok"]').click(); 98 | setTimeout(function () { 99 | done( 100 | ae.equalAll(0, that.self.queue.length) 101 | || ae.equalAll('close', that.state) 102 | ); 103 | }, myUI.config.animateTime + myUI.config.displayTime + 50); 104 | }); 105 | 106 | it('toast close test', function (done) { 107 | myUI.confirm('message'); 108 | myUI.close(); 109 | setTimeout(function () { 110 | done( 111 | ae.equalAll(0, that.self.queue.length) 112 | || ae.equalAll('close', that.state) 113 | ); 114 | }, myUI.config.animateTime + myUI.config.displayTime + 50); 115 | }); 116 | }); --------------------------------------------------------------------------------