From 5601119d87bb84371d069630a8757ca48c715505 Mon Sep 17 00:00:00 2001 From: ThomasJ Date: Mon, 7 Mar 2016 13:48:13 +0900 Subject: [PATCH] reset --- API.md | 144 +++++++++++++++ LICENSE.txt | 21 +++ README.md | 77 +++++++++ bower.json | 26 +++ dist/ax5toast.css | 1 + dist/ax5toast.js | 279 ++++++++++++++++++++++++++++++ dist/ax5toast.min.js | 1 + package.json | 28 +++ src/ax5toast.js | 279 ++++++++++++++++++++++++++++++ src/ax5toast.scss | 6 + src/scss/_ax5toast.scss | 206 ++++++++++++++++++++++ src/scss/_ax5toast_variables.scss | 40 +++++ test/README.md | 25 +++ test/bower.json | 10 ++ test/index.html | 112 ++++++++++++ 15 files changed, 1255 insertions(+) create mode 100644 API.md create mode 100644 LICENSE.txt create mode 100755 README.md create mode 100644 bower.json create mode 100644 dist/ax5toast.css create mode 100755 dist/ax5toast.js create mode 100755 dist/ax5toast.min.js create mode 100644 package.json create mode 100755 src/ax5toast.js create mode 100644 src/ax5toast.scss create mode 100644 src/scss/_ax5toast.scss create mode 100644 src/scss/_ax5toast_variables.scss create mode 100644 test/README.md create mode 100644 test/bower.json create mode 100644 test/index.html diff --git a/API.md b/API.md new file mode 100644 index 0000000..0696cd8 --- /dev/null +++ b/API.md @@ -0,0 +1,144 @@ +# Basic Usage +> toast is a UI that can be used as an alternative means of window.alert, window.confirm and window.prompt + +## setConfig() +`setConfig([options])` +You define the default settings for the toast. Create a ax5.ui.toast instance, using the setConfig method in that instance, you can define a default value. + +```js +var myToast = new ax5.ui.toast(); +myToast.set_config({ + msg: "String", + theme: "String", + width: "Number", + icon: "String", + closeIcon: "String", + onStateChanged: "Function", + displayTime: "Number", + animateTime: "Number", + containerPosition: "String", + lang: "Object" +}); +``` +**Easy Way - without setConfig** +```js +var myToast = new ax5.ui.toast({ + msg: "String", + theme: "String", + width: "Number", + icon: "String", + closeIcon: "String", + onStateChanged: "Function", + displayTime: "Number", + animateTime: "Number", + containerPosition: "String", + lang: "Object" +}); +``` + +### msg + +Type: `String` + +Title of toast. + + +### theme + +Type: `String` [default: default] + +Theme of toast, ax5toast themes using six colors defined by the bootstrap is provided. + + +### width + +Type: `Number` [default: 300] + +Toast width + + +### icon + +Type: `String` + + +### closeIcon + +Type: `String` + + +### onStateChanged + +Type: `Function` + +onStateChanged function is executed when the toast of the state is changed, +this.state state value is passed to this time onStateChanged function. + + +### displayTime + +Type: `Number` [default : 3000] + + + +### animateTime + +Type: `Number` [default : 300] + + + +### containerPosition + +Type: `String` [top-left|top-right|bottom-left|bottom-right] + + + +### lang + +Type: `Object` + +```js +myToast.setConfig({ + lang: { + "ok": "확인" + } +}); +``` + + +- - - + +## push() +`push(String|Options[, callBack])` + +If this is String in the first argument and recognizes the first argument to `msg`. +it is possible to redefine all of the options that can be used in setConfig. + +```js +toast.push('Toast message', function () { + console.log(this); +}); + +toast.push({ + theme: 'danger', + msg:'Toast message' +}, function () { + console.log(this); +}); +``` + +- - - + +## confirm() +`confirm(String|Options[, callBack])` + +```js +confirmToast.confirm({ + msg: 'Confirm message' +}, function(){ + +}); +``` + +## close() +`close()` \ No newline at end of file diff --git a/LICENSE.txt b/LICENSE.txt new file mode 100644 index 0000000..d821016 --- /dev/null +++ b/LICENSE.txt @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) AXISJ + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. diff --git a/README.md b/README.md new file mode 100755 index 0000000..3a75f9c --- /dev/null +++ b/README.md @@ -0,0 +1,77 @@ +[![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) + +# ax5ui-toast + +> *Dependencies* +> * _[jQuery 1.X+](http://jquery.com/)_ +> * _[ax5core](http://ax5.io/ax5core)_ +> * _[bootstrap](http://getbootstrap.com/)_ + + +### Install by bower +```sh +bower install ax5ui-toast +``` +[bower](http://bower.io/#install-bower) is web front-end package manager. +using the `bower`, when you install the plug-in is installed to resolve the plug-in dependencies under the `bower_components` folder. +(You can change the folder location. [.bowerrc](http://bower.io/docs/config/#bowerrc-specification) ) + +It is recommended that you install by using the `bower`. +If you've never used a bower is, you will be able to be used for [http://bower.io/#install-bower](http://bower.io/#install-bower). + +### Download code +- [ax5core Github releases](https://github.com/ax5ui/ax5core/releases) +- [ax5ui-toast Github releases](https://github.com/ax5ui/ax5ui-toast/releases) + + +### Insert the "ax5toast" in the HTML HEAD. + +Location of the folder can be determined freely in your project. But be careful not to accidentally caused +exactly the path. +```html + + + + + + + + +.... + + +``` + +### Basic Usages +```js +var myToast = new ax5.ui.toast({ + icon: '', + containerPosition: "bottom-right", + closeIcon: '' +}); + +myToast.push('Toast message'); +``` + +- - - + +### Install by npm +If you do not use the bower, it can be downloaded by using the npm as second best. +In npm, so pile on the package manager for the front end, you need to solve the problem of plug-in dependencies. + +```sh +npm install jquery +npm install ax5core +npm install ax5ui-toast +``` + +After you download the file in npm install, you will need to copy to the location where you want to use as a resource for the project. +If the inconvenience in the process that you want to copy the file and can be easily copied by using a `gulp` or `grunt`. + +- - - + + +### Preview +- [See Demostration](http://ax5.io/ax5ui-toast/demo/index.html) + +If you have any questions, please refer to the following [gitHub](https://github.com/ax5ui/ax5ui-kernel) \ No newline at end of file diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..b139e83 --- /dev/null +++ b/bower.json @@ -0,0 +1,26 @@ +{ + "name": "ax5ui-toast", + "version": "0.2.0", + "authors": [ + "ThomasJ " + ], + "description": "", + "main": "dist/ax5toast.js", + "keywords": [ + "bootstrap", + "jquery", + "ax5ui", + "plugin", + "bootstrap jQuery plugins", + "toast", + "ax5ui-toast", + "javascript ui" + ], + "dependencies": { + "jquery": "^1.11.0", + "ax5core": ">=0.4.0", + "bootstrap": "^3.3.6" + }, + "license": "MIT", + "homepage": "ax5.io" +} diff --git a/dist/ax5toast.css b/dist/ax5toast.css new file mode 100644 index 0000000..54792ce --- /dev/null +++ b/dist/ax5toast.css @@ -0,0 +1 @@ +@-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)}to{-webkit-transform:translateY(10px) scale(0.7)}}@-moz-keyframes ax-toast-removed-bottom{from{-moz-transform:translateY(0px)}to{-moz-transform:translateY(10px) scale(0.7)}}@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)}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)}}@-webkit-keyframes ax-toast-removed-top{from{-webkit-transform:translateY(0px)}to{-webkit-transform:translateY(-10px) scale(0.7)}}@-moz-keyframes ax-toast-removed-top{from{-moz-transform:translateY(0px)}to{-moz-transform:translateY(-10px) scale(0.7)}}@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)}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)}}@-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}.ax5-ui-toast-container .ax5-ui-toast{box-sizing:border-box;border:1px solid gray;opacity:0.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 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;transition:all 0.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 0.3s cubic-bezier(0.86, 0, 0.07, 1);-moz-animation:ax-toast-top 0.3s cubic-bezier(0.86, 0, 0.07, 1);animation:ax-toast-top 0.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 0.3s cubic-bezier(0.86, 0, 0.07, 1) forwards;-moz-animation:ax-toast-removed-bottom 0.3s cubic-bezier(0.86, 0, 0.07, 1) forwards;animation:ax-toast-removed-bottom 0.3s cubic-bezier(0.86, 0, 0.07, 1) forwards}.ax5-ui-toast-container.bottom-left .ax5-ui-toast.destroy{-webkit-animation:ax-toast-destroy 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;-moz-animation:ax-toast-destroy 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;animation:ax-toast-destroy 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) 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 0.3s cubic-bezier(0.86, 0, 0.07, 1);-moz-animation:ax-toast-top 0.3s cubic-bezier(0.86, 0, 0.07, 1);animation:ax-toast-top 0.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 0.3s cubic-bezier(0.86, 0, 0.07, 1) forwards;-moz-animation:ax-toast-removed-bottom 0.3s cubic-bezier(0.86, 0, 0.07, 1) forwards;animation:ax-toast-removed-bottom 0.3s cubic-bezier(0.86, 0, 0.07, 1) forwards}.ax5-ui-toast-container.bottom-right .ax5-ui-toast.destroy{-webkit-animation:ax-toast-destroy 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;-moz-animation:ax-toast-destroy 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;animation:ax-toast-destroy 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) 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 0.3s cubic-bezier(0.86, 0, 0.07, 1);-moz-animation:ax-toast-bottom 0.3s cubic-bezier(0.86, 0, 0.07, 1);animation:ax-toast-bottom 0.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 0.3s cubic-bezier(0.86, 0, 0.07, 1) forwards;-moz-animation:ax-toast-removed-top 0.3s cubic-bezier(0.86, 0, 0.07, 1) forwards;animation:ax-toast-removed-top 0.3s cubic-bezier(0.86, 0, 0.07, 1) forwards}.ax5-ui-toast-container.top-left .ax5-ui-toast.destroy{-webkit-animation:ax-toast-destroy 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;-moz-animation:ax-toast-destroy 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;animation:ax-toast-destroy 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) 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 0.3s cubic-bezier(0.86, 0, 0.07, 1);-moz-animation:ax-toast-bottom 0.3s cubic-bezier(0.86, 0, 0.07, 1);animation:ax-toast-bottom 0.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 0.3s cubic-bezier(0.86, 0, 0.07, 1) forwards;-moz-animation:ax-toast-removed-top 0.3s cubic-bezier(0.86, 0, 0.07, 1) forwards;animation:ax-toast-removed-top 0.3s cubic-bezier(0.86, 0, 0.07, 1) forwards}.ax5-ui-toast-container.top-right .ax5-ui-toast.destroy{-webkit-animation:ax-toast-destroy 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;-moz-animation:ax-toast-destroy 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;animation:ax-toast-destroy 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards} diff --git a/dist/ax5toast.js b/dist/ax5toast.js new file mode 100755 index 0000000..e929408 --- /dev/null +++ b/dist/ax5toast.js @@ -0,0 +1,279 @@ +// ax5.ui.toast +(function (root, _SUPER_) { + + /** + * @class ax5.ui.toast + * @classdesc + * @version v0.0.1 + * @author tom@axisj.com + * @logs + * 2014-06-17 tom : 시작 + * @example + * ``` + * var my_toast = new ax5.ui.toast(); + * ``` + */ + + var U = ax5.util; + + //== UI Class + var axClass = function () { + var + self = this, + cfg; + + if (_SUPER_) _SUPER_.call(this); // 부모호출 + this.toastContainer = null; + this.queue = []; + this.config = { + clickEventName: "click", //(('ontouchstart' in document.documentElement) ? "touchstart" : "click"), + theme: 'default', + width: 300, + icon: '', + closeIcon: '', + msg: '', + lang: { + "ok": "ok", "cancel": "cancel" + }, + displayTime: 3000, + animateTime: 250, + containerPosition: "bottom-left" + }; + cfg = this.config; + + /** + * Preferences of toast UI + * @method ax5.ui.toast.set_config + * @param {Object} config - 클래스 속성값 + * @returns {ax5.ui.toast} + * @example + * ``` + * ``` + */ + //== class body start + this.init = function () { + // after set_config(); + self.containerId = ax5.getGuid(); + var styles = []; + if(cfg.zIndex){ + styles.push("z-index:" + cfg.zIndex); + } + jQuery(document.body).append('
'); + this.toastContainer = jQuery('[data-toast-container="' + self.containerId + '"]'); + }; + + this.push = function (opts, callBack) { + if (!self.containerId) { + this.init(); + } + if (U.isString(opts)) { + opts = { + title: cfg.title, + msg: opts + } + } + opts.toastType = "push"; + + self.dialogConfig = {}; + jQuery.extend(true, self.dialogConfig, cfg); + jQuery.extend(true, self.dialogConfig, opts); + opts = self.dialogConfig; + + this.open(opts, callBack); + return this; + }; + + this.confirm = function (opts, callBack) { + if (!self.containerId) { + this.init(); + } + if (U.isString(opts)) { + opts = { + title: cfg.title, + msg: opts + } + } + opts.toastType = "confirm"; + + self.dialogConfig = {}; + jQuery.extend(true, self.dialogConfig, cfg); + jQuery.extend(true, self.dialogConfig, opts); + opts = self.dialogConfig; + + if (typeof opts.btns === "undefined") { + opts.btns = { + ok: {label: cfg.lang["ok"], theme: opts.theme} + }; + } + this.open(opts, callBack); + return this; + }; + + this.getContent = function (toastId, opts) { + var po = []; + po.push('
'); + if (opts.icon) { + po.push('
'); + po.push((opts.icon || "")); + po.push('
'); + } + po.push('
'); + po.push((opts.msg || "").replace(/\n/g, "
")); + po.push('
'); + + if (opts.btns) { + po.push('
'); + po.push('
'); + U.each(opts.btns, function (k, v) { + po.push(''); + }); + po.push('
'); + po.push('
'); + } + else { + po.push('' + (opts.closeIcon || '') + ''); + } + + po.push('
'); + po.push('
'); + return po.join(''); + }; + + this.open = function (opts, callBack) { + var + toastBox; + + opts.id = 'ax5-toast-' + self.containerId + '-' + this.queue.length; + box = { + width: opts.width + }; + + if (U.left(cfg.containerPosition, '-') == 'bottom') { + this.toastContainer.append(this.getContent(opts.id, opts)); + } + else { + this.toastContainer.prepend(this.getContent(opts.id, opts)); + } + + toastBox = jQuery('#' + opts.id); + toastBox.css({width: box.width}); + opts.toastBox = toastBox; + this.queue.push(opts); + + if (opts && opts.onStateChanged) { + var that = { + state: "open", + toastId: opts.id + }; + opts.onStateChanged.call(that, that); + } + + if (opts.toastType === "push") { + // 자동 제거 타이머 시작 + setTimeout((function () { + this.close(opts, toastBox, callBack); + }).bind(this), cfg.displayTime); + + toastBox.find("[data-ax-toast-btn]").on(cfg.clickEventName, (function (e) { + this.btnOnClick(e || window.event, opts, toastBox, callBack); + }).bind(this)); + } + else if (opts.toastType === "confirm") { + toastBox.find("[data-ax-toast-btn]").on(cfg.clickEventName, (function (e) { + this.btnOnClick(e || window.event, opts, toastBox, callBack); + }).bind(this)); + } + + }; + + this.btnOnClick = function (e, opts, toastBox, callBack, target, k) { + + target = U.findParentNode(e.target, function (target) { + if (target.getAttribute("data-ax-toast-btn")) { + return true; + } + }); + + if (target) { + k = target.getAttribute("data-ax-toast-btn"); + + var that = { + key: k, value: (opts.btns) ? opts.btns[k] : k, + toastId: opts.id, + btn_target: target + }; + + if (opts.btns && opts.btns[k].onClick) { + opts.btns[k].onClick.call(that, k); + } + else if (opts.toastType === "push") { + if (callBack) callBack.call(that, k); + this.close(opts, toastBox); + } + else if (opts.toastType === "confirm") { + if (callBack) callBack.call(that, k); + this.close(opts, toastBox); + } + } + }; + + this.onKeyup = function (e, opts, callBack, target, k) { + if (e.keyCode == ax5.info.eventKeys.ESC) { + if (this.queue.length > 0) this.close(); + } + }; + + /** + * close the toast + * @method ax5.ui.toast.close + * @returns {ax5.ui.toast} + * @example + * ``` + * my_toast.close(); + * ``` + */ + this.close = function (opts, toastBox, callBack) { + if (typeof toastBox === "undefined") { + opts = U.last(this.queue); + toastBox = opts.toastBox; + } + + toastBox.addClass((opts.toastType == "push") ? "removed" : "destroy"); + this.queue = U.filter(this.queue, function () { + return opts.id != this.id; + }); + setTimeout(function () { + var that = { + toastId: opts.id + }; + + toastBox.remove(); + if (callBack) callBack.call(that); + + if (opts && opts.onStateChanged) { + that = { + state: "close", + toastId: opts.id + }; + opts.onStateChanged.call(that, that); + } + }, cfg.animateTime); + return this; + }; + + // 클래스 생성자 + this.main = (function () { + if(arguments && U.isObject(arguments[0])) { + this.setConfig(arguments[0]); + } + }).apply(this, arguments); + }; + //== UI Class + + root.toast = (function(){ + if (U.isFunction(_SUPER_)) axClass.prototype = new _SUPER_(); // 상속 + return axClass; + })(); // ax5.ui에 연결 + +})(ax5.ui, ax5.ui.root); \ No newline at end of file diff --git a/dist/ax5toast.min.js b/dist/ax5toast.min.js new file mode 100755 index 0000000..143e190 --- /dev/null +++ b/dist/ax5toast.min.js @@ -0,0 +1 @@ +!function(t,i){var n=ax5.util,e=function(){var t,e=this;i&&i.call(this),this.toastContainer=null,this.queue=[],this.config={clickEventName:"click",theme:"default",width:300,icon:"",closeIcon:"",msg:"",lang:{ok:"ok",cancel:"cancel"},displayTime:3e3,animateTime:250,containerPosition:"bottom-left"},t=this.config,this.init=function(){e.containerId=ax5.getGuid();var i=[];t.zIndex&&i.push("z-index:"+t.zIndex),jQuery(document.body).append('
'),this.toastContainer=jQuery('[data-toast-container="'+e.containerId+'"]')},this.push=function(i,o){return e.containerId||this.init(),n.isString(i)&&(i={title:t.title,msg:i}),i.toastType="push",e.dialogConfig={},jQuery.extend(!0,e.dialogConfig,t),jQuery.extend(!0,e.dialogConfig,i),i=e.dialogConfig,this.open(i,o),this},this.confirm=function(i,o){return e.containerId||this.init(),n.isString(i)&&(i={title:t.title,msg:i}),i.toastType="confirm",e.dialogConfig={},jQuery.extend(!0,e.dialogConfig,t),jQuery.extend(!0,e.dialogConfig,i),i=e.dialogConfig,"undefined"==typeof i.btns&&(i.btns={ok:{label:t.lang.ok,theme:i.theme}}),this.open(i,o),this},this.getContent=function(t,i){var e=[];return e.push('
'),i.icon&&(e.push('
'),e.push(i.icon||""),e.push("
")),e.push('
'),e.push((i.msg||"").replace(/\n/g,"
")),e.push("
"),i.btns?(e.push('
'),e.push('
'),n.each(i.btns,function(t,i){e.push('")}),e.push("
"),e.push("
")):e.push(''+(i.closeIcon||"")+""),e.push('
'),e.push("
"),e.join("")},this.open=function(i,o){var s;if(i.id="ax5-toast-"+e.containerId+"-"+this.queue.length,box={width:i.width},"bottom"==n.left(t.containerPosition,"-")?this.toastContainer.append(this.getContent(i.id,i)):this.toastContainer.prepend(this.getContent(i.id,i)),s=jQuery("#"+i.id),s.css({width:box.width}),i.toastBox=s,this.queue.push(i),i&&i.onStateChanged){var a={state:"open",toastId:i.id};i.onStateChanged.call(a,a)}"push"===i.toastType?(setTimeout(function(){this.close(i,s,o)}.bind(this),t.displayTime),s.find("[data-ax-toast-btn]").on(t.clickEventName,function(t){this.btnOnClick(t||window.event,i,s,o)}.bind(this))):"confirm"===i.toastType&&s.find("[data-ax-toast-btn]").on(t.clickEventName,function(t){this.btnOnClick(t||window.event,i,s,o)}.bind(this))},this.btnOnClick=function(t,i,e,o,s,a){if(s=n.findParentNode(t.target,function(t){return t.getAttribute("data-ax-toast-btn")?!0:void 0})){a=s.getAttribute("data-ax-toast-btn");var d={key:a,value:i.btns?i.btns[a]:a,toastId:i.id,btn_target:s};i.btns&&i.btns[a].onClick?i.btns[a].onClick.call(d,a):"push"===i.toastType?(o&&o.call(d,a),this.close(i,e)):"confirm"===i.toastType&&(o&&o.call(d,a),this.close(i,e))}},this.onKeyup=function(t,i,n,e,o){t.keyCode==ax5.info.eventKeys.ESC&&this.queue.length>0&&this.close()},this.close=function(i,e,o){return"undefined"==typeof e&&(i=n.last(this.queue),e=i.toastBox),e.addClass("push"==i.toastType?"removed":"destroy"),this.queue=n.filter(this.queue,function(){return i.id!=this.id}),setTimeout(function(){var t={toastId:i.id};e.remove(),o&&o.call(t),i&&i.onStateChanged&&(t={state:"close",toastId:i.id},i.onStateChanged.call(t,t))},t.animateTime),this},this.main=function(){arguments&&n.isObject(arguments[0])&&this.setConfig(arguments[0])}.apply(this,arguments)};t.toast=function(){return n.isFunction(i)&&(e.prototype=new i),e}()}(ax5.ui,ax5.ui.root); \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..1013df1 --- /dev/null +++ b/package.json @@ -0,0 +1,28 @@ +{ + "name": "ax5ui-toast", + "version": "0.2.0", + "description": "A toast plugin that works with Bootstrap & jQuery", + "license": "MIT", + "repository": { + "type": "git", + "url": "git+https://github.com/ax5ui/ax5ui-toast" + }, + "author": { + "name": "Thomas Jang", + "email": "tom@axisj.com", + "url": "ax5.io" + }, + "keywords": [ + "bootstrap", + "jquery", + "ax5ui", + "plugin", + "bootstrap jQuery plugins", + "dialog", + "ax5ui-dialog", + "javascript ui" + ], + "dependencies": { + "ax5core": ">=0.4.0" + } +} \ No newline at end of file diff --git a/src/ax5toast.js b/src/ax5toast.js new file mode 100755 index 0000000..e929408 --- /dev/null +++ b/src/ax5toast.js @@ -0,0 +1,279 @@ +// ax5.ui.toast +(function (root, _SUPER_) { + + /** + * @class ax5.ui.toast + * @classdesc + * @version v0.0.1 + * @author tom@axisj.com + * @logs + * 2014-06-17 tom : 시작 + * @example + * ``` + * var my_toast = new ax5.ui.toast(); + * ``` + */ + + var U = ax5.util; + + //== UI Class + var axClass = function () { + var + self = this, + cfg; + + if (_SUPER_) _SUPER_.call(this); // 부모호출 + this.toastContainer = null; + this.queue = []; + this.config = { + clickEventName: "click", //(('ontouchstart' in document.documentElement) ? "touchstart" : "click"), + theme: 'default', + width: 300, + icon: '', + closeIcon: '', + msg: '', + lang: { + "ok": "ok", "cancel": "cancel" + }, + displayTime: 3000, + animateTime: 250, + containerPosition: "bottom-left" + }; + cfg = this.config; + + /** + * Preferences of toast UI + * @method ax5.ui.toast.set_config + * @param {Object} config - 클래스 속성값 + * @returns {ax5.ui.toast} + * @example + * ``` + * ``` + */ + //== class body start + this.init = function () { + // after set_config(); + self.containerId = ax5.getGuid(); + var styles = []; + if(cfg.zIndex){ + styles.push("z-index:" + cfg.zIndex); + } + jQuery(document.body).append('
'); + this.toastContainer = jQuery('[data-toast-container="' + self.containerId + '"]'); + }; + + this.push = function (opts, callBack) { + if (!self.containerId) { + this.init(); + } + if (U.isString(opts)) { + opts = { + title: cfg.title, + msg: opts + } + } + opts.toastType = "push"; + + self.dialogConfig = {}; + jQuery.extend(true, self.dialogConfig, cfg); + jQuery.extend(true, self.dialogConfig, opts); + opts = self.dialogConfig; + + this.open(opts, callBack); + return this; + }; + + this.confirm = function (opts, callBack) { + if (!self.containerId) { + this.init(); + } + if (U.isString(opts)) { + opts = { + title: cfg.title, + msg: opts + } + } + opts.toastType = "confirm"; + + self.dialogConfig = {}; + jQuery.extend(true, self.dialogConfig, cfg); + jQuery.extend(true, self.dialogConfig, opts); + opts = self.dialogConfig; + + if (typeof opts.btns === "undefined") { + opts.btns = { + ok: {label: cfg.lang["ok"], theme: opts.theme} + }; + } + this.open(opts, callBack); + return this; + }; + + this.getContent = function (toastId, opts) { + var po = []; + po.push('
'); + if (opts.icon) { + po.push('
'); + po.push((opts.icon || "")); + po.push('
'); + } + po.push('
'); + po.push((opts.msg || "").replace(/\n/g, "
")); + po.push('
'); + + if (opts.btns) { + po.push('
'); + po.push('
'); + U.each(opts.btns, function (k, v) { + po.push(''); + }); + po.push('
'); + po.push('
'); + } + else { + po.push('' + (opts.closeIcon || '') + ''); + } + + po.push('
'); + po.push('
'); + return po.join(''); + }; + + this.open = function (opts, callBack) { + var + toastBox; + + opts.id = 'ax5-toast-' + self.containerId + '-' + this.queue.length; + box = { + width: opts.width + }; + + if (U.left(cfg.containerPosition, '-') == 'bottom') { + this.toastContainer.append(this.getContent(opts.id, opts)); + } + else { + this.toastContainer.prepend(this.getContent(opts.id, opts)); + } + + toastBox = jQuery('#' + opts.id); + toastBox.css({width: box.width}); + opts.toastBox = toastBox; + this.queue.push(opts); + + if (opts && opts.onStateChanged) { + var that = { + state: "open", + toastId: opts.id + }; + opts.onStateChanged.call(that, that); + } + + if (opts.toastType === "push") { + // 자동 제거 타이머 시작 + setTimeout((function () { + this.close(opts, toastBox, callBack); + }).bind(this), cfg.displayTime); + + toastBox.find("[data-ax-toast-btn]").on(cfg.clickEventName, (function (e) { + this.btnOnClick(e || window.event, opts, toastBox, callBack); + }).bind(this)); + } + else if (opts.toastType === "confirm") { + toastBox.find("[data-ax-toast-btn]").on(cfg.clickEventName, (function (e) { + this.btnOnClick(e || window.event, opts, toastBox, callBack); + }).bind(this)); + } + + }; + + this.btnOnClick = function (e, opts, toastBox, callBack, target, k) { + + target = U.findParentNode(e.target, function (target) { + if (target.getAttribute("data-ax-toast-btn")) { + return true; + } + }); + + if (target) { + k = target.getAttribute("data-ax-toast-btn"); + + var that = { + key: k, value: (opts.btns) ? opts.btns[k] : k, + toastId: opts.id, + btn_target: target + }; + + if (opts.btns && opts.btns[k].onClick) { + opts.btns[k].onClick.call(that, k); + } + else if (opts.toastType === "push") { + if (callBack) callBack.call(that, k); + this.close(opts, toastBox); + } + else if (opts.toastType === "confirm") { + if (callBack) callBack.call(that, k); + this.close(opts, toastBox); + } + } + }; + + this.onKeyup = function (e, opts, callBack, target, k) { + if (e.keyCode == ax5.info.eventKeys.ESC) { + if (this.queue.length > 0) this.close(); + } + }; + + /** + * close the toast + * @method ax5.ui.toast.close + * @returns {ax5.ui.toast} + * @example + * ``` + * my_toast.close(); + * ``` + */ + this.close = function (opts, toastBox, callBack) { + if (typeof toastBox === "undefined") { + opts = U.last(this.queue); + toastBox = opts.toastBox; + } + + toastBox.addClass((opts.toastType == "push") ? "removed" : "destroy"); + this.queue = U.filter(this.queue, function () { + return opts.id != this.id; + }); + setTimeout(function () { + var that = { + toastId: opts.id + }; + + toastBox.remove(); + if (callBack) callBack.call(that); + + if (opts && opts.onStateChanged) { + that = { + state: "close", + toastId: opts.id + }; + opts.onStateChanged.call(that, that); + } + }, cfg.animateTime); + return this; + }; + + // 클래스 생성자 + this.main = (function () { + if(arguments && U.isObject(arguments[0])) { + this.setConfig(arguments[0]); + } + }).apply(this, arguments); + }; + //== UI Class + + root.toast = (function(){ + if (U.isFunction(_SUPER_)) axClass.prototype = new _SUPER_(); // 상속 + return axClass; + })(); // ax5.ui에 연결 + +})(ax5.ui, ax5.ui.root); \ No newline at end of file diff --git a/src/ax5toast.scss b/src/ax5toast.scss new file mode 100644 index 0000000..9dd0931 --- /dev/null +++ b/src/ax5toast.scss @@ -0,0 +1,6 @@ +@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss"; +@import "node_modules/bourbon/app/assets/stylesheets/_bourbon.scss"; +@import "node_modules/ax5core/src/_ax5-ui-mixin.scss"; + +@import "scss/ax5toast_variables"; +@import "scss/ax5toast"; \ No newline at end of file diff --git a/src/scss/_ax5toast.scss b/src/scss/_ax5toast.scss new file mode 100644 index 0000000..dfc837c --- /dev/null +++ b/src/scss/_ax5toast.scss @@ -0,0 +1,206 @@ +@mixin ax-toast() { + box-sizing: $ax5toast-box-model; + border: $ax5toast-border; + opacity: $ax5toast-opacity; + + @include ax-border-radius($ax5toast-border-radius); + box-shadow: $ax5toast-box-shadow; + position: relative; + margin: $ax5toast-box-margin; +} + +@mixin ax-toast-section() { + display: table; + padding: $ax5toast-body-padding; + .ax-toast-icon { + display: table-cell; + padding: $ax5toast-body-padding; + text-align: left; + font-size: $ax5toast-icon-size; + width: $ax5toast-icon-size; + vertical-align: middle; + } + .ax-toast-body { + display: table-cell; + padding: $ax5toast-body-padding; + text-align: left; + vertical-align: middle; + } + .ax-toast-buttons { + display: table-cell; + padding: $ax5toast-body-padding; + text-align: right; + vertical-align: middle; + button { + &:not(:last-child) { + margin-right: 3px; + } + } + } + .ax-toast-close { + display: table-cell; + padding: $ax5toast-body-padding; + text-align: right; + vertical-align: top; + text-decoration: none; + cursor: pointer; + } +} + +@mixin toast-variant($text-color, $bg-color, $color) { + background: $bg-color; + color: $text-color; + .ax-toast-icon { + color: $color; + } + .ax-toast-close { + color: $text-color; + } +} + +@include keyframes(ax-toast-bottom) { + from { + @include transform(translateY(-100px) scale(0.7)); + } + to { + //@include opacity($mask-bg-opacity); + @include transform(translateY(0px) scale(1)) + } +} + +@include keyframes(ax-toast-top) { + from { + @include transform(translateY(100px) scale(0.7)); + } + to { + //@include opacity($mask-bg-opacity); + @include transform(translateY(0px) scale(1)) + } +} + +@include keyframes(ax-toast-removed-bottom) { + from { + @include transform(translateY(0px)); + } + to { + @include transform(translateY(10px) scale(0.7)); + } +} + +@include keyframes(ax-toast-removed-top) { + from { + @include transform(translateY(0px)); + } + to { + @include transform(translateY(-10px) scale(0.7)); + } +} + +@include keyframes(ax-toast-destroy) { + from { + @include transform(scale(1)); + opacity: 1.0; + } + to { + @include transform(scale(1.5)); + opacity: 0.0; + } +} + +// mixins --------------------------------------------- end + +.ax5-ui-toast-container { + z-index: $ax5toast-z-index; + position: fixed; + width: $ax5toast-container-width; + padding: $ax5toast-container-padding; + + .ax5-ui-toast { + @include ax-toast(); + @include ax-toast-section(); + @include transition(all $ax5toast-easing-time ease-in-out); + + @include toast-variant($ax5toast-default-text, $ax5toast-default-bg, $ax5toast-default-color); + + &.primary { + @include toast-variant($ax5toast-primary-text, $ax5toast-primary-bg, $ax5toast-primary-color); + } + &.success { + @include toast-variant($ax5toast-success-text, $ax5toast-success-bg, $ax5toast-success-color); + } + &.info { + @include toast-variant($ax5toast-info-text, $ax5toast-info-bg, $ax5toast-info-color); + } + &.warning { + @include toast-variant($ax5toast-warning-text, $ax5toast-warning-bg, $ax5toast-warning-color); + } + &.danger { + @include toast-variant($ax5toast-danger-text, $ax5toast-danger-bg, $ax5toast-danger-color); + } + } + + &.bottom-left { + left: 0; + bottom: 0; + + .ax5-ui-toast { + @include animation(ax-toast-top $ax5toast-easing-time $ax5toast-easing); + &.removed { + @include animation(ax-toast-removed-bottom $ax5toast-easing-time $ax5toast-easing forwards); + } + &.destroy { + @include animation(ax-toast-destroy $ax5toast-easing-time $ease-in-back forwards); + } + } + } + &.bottom-right { + right: 0; + bottom: 0; + + .ax5-ui-toast { + @include animation(ax-toast-top $ax5toast-easing-time $ax5toast-easing); + &.removed { + @include animation(ax-toast-removed-bottom $ax5toast-easing-time $ax5toast-easing forwards); + } + &.destroy { + @include animation(ax-toast-destroy $ax5toast-easing-time $ease-in-back forwards); + } + } + + } + + + &.top-left { + left: 0; + top: 0; + + .ax5-ui-toast { + @include animation(ax-toast-bottom $ax5toast-easing-time $ax5toast-easing); + + &.removed { + @include animation(ax-toast-removed-top $ax5toast-easing-time $ax5toast-easing forwards); + } + &.destroy { + @include animation(ax-toast-destroy $ax5toast-easing-time $ease-in-back forwards); + } + } + } + + &.top-right { + right: 0; + top: 0; + + .ax5-ui-toast { + @include animation(ax-toast-bottom $ax5toast-easing-time $ax5toast-easing); + &.removed { + @include animation(ax-toast-removed-top $ax5toast-easing-time $ax5toast-easing forwards); + } + &.destroy { + @include animation(ax-toast-destroy $ax5toast-easing-time $ease-in-back forwards); + } + } + } + + +} + diff --git a/src/scss/_ax5toast_variables.scss b/src/scss/_ax5toast_variables.scss new file mode 100644 index 0000000..c823bca --- /dev/null +++ b/src/scss/_ax5toast_variables.scss @@ -0,0 +1,40 @@ +//== toast +$ax5toast-z-index: 2000; +// 0:left,top / 1:right,top / 2:right,bottom / 3:left,bottom +$ax5toast-container-width: auto !default; +$ax5toast-container-padding: 10px !default; +$ax5toast-box-model: border-box !default; +$ax5toast-border: 1px solid rgb(255/2, 255/2, 255/2) !default; +$ax5toast-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.175) !default; +$ax5toast-body-padding: 6px !default; +$ax5toast-border-radius: 8px !default; +$ax5toast-opacity: 0.9 !default; +$ax5toast-box-margin: 5px 0px 5px 0px !default; +$ax5toast-icon-size: 24px; +$ax5toast-easing: $ease-in-out-quint; +$ax5toast-easing-time: 0.3s; + +//** Border color for elements within toast +$ax5toast-default-text: $panel-default-text !default; +$ax5toast-default-bg: $panel-bg !default; +$ax5toast-default-color: $text-color !default; + +$ax5toast-primary-text: $brand-primary !default; +$ax5toast-primary-bg: $panel-bg !default; +$ax5toast-primary-color: $brand-primary !default; + +$ax5toast-success-text: $brand-success !default; +$ax5toast-success-bg: $panel-bg !default; +$ax5toast-success-color: $brand-success !default; + +$ax5toast-info-text: $brand-info !default; +$ax5toast-info-bg: $panel-bg !default; +$ax5toast-info-color: $brand-info !default; + +$ax5toast-warning-text: $brand-warning !default; +$ax5toast-warning-bg: $panel-bg !default; +$ax5toast-warning-color: $brand-warning !default; + +$ax5toast-danger-text: $brand-danger !default; +$ax5toast-danger-bg: $panel-bg !default; +$ax5toast-danger-color: $brand-danger !default; \ No newline at end of file diff --git a/test/README.md b/test/README.md new file mode 100644 index 0000000..f0359a9 --- /dev/null +++ b/test/README.md @@ -0,0 +1,25 @@ +# STEP 01 +``` +$ bower install +``` +`test/bower_components` folder is created, plug-ins required will be downloaded. + +# STEP 02 +It'll add the plugin resources to html> head. +```html + + + + + Title + + + + + + + + + +``` + diff --git a/test/bower.json b/test/bower.json new file mode 100644 index 0000000..ca2bc15 --- /dev/null +++ b/test/bower.json @@ -0,0 +1,10 @@ +{ + "name": "ax5ui-dialog-tester", + "dependencies": { + "jquery": "^1.11.0", + "ax5core": "", + "ax5ui-mask": "", + "bootstrap": "^3.3.6", + "font-awesome": "" + } +} diff --git a/test/index.html b/test/index.html new file mode 100644 index 0000000..5111952 --- /dev/null +++ b/test/index.html @@ -0,0 +1,112 @@ + + + + + Title + + + + + + + + + + + + + + + + +
+ + + + + + + + + +
+ + + + + + + + + + + + + \ No newline at end of file