From ba217e6a0a6ef576b3dfb4342e79aa6751c6e58a Mon Sep 17 00:00:00 2001 From: ThomasJ Date: Mon, 7 Mar 2016 13:48:13 +0900 Subject: [PATCH] reset --- API.md | 140 ++++++++++++++ LICENSE.txt | 21 +++ README.md | 77 ++++++++ bower.json | 26 +++ dist/ax5modal.css | 1 + dist/ax5modal.js | 304 ++++++++++++++++++++++++++++++ dist/ax5modal.min.js | 1 + package.json | 28 +++ src/ax5modal.js | 304 ++++++++++++++++++++++++++++++ src/ax5modal.scss | 6 + src/scss/_ax5modal.scss | 176 +++++++++++++++++ src/scss/_ax5modal_variables.scss | 10 + test/README.md | 25 +++ test/bower.json | 10 + test/index.html | 52 +++++ 15 files changed, 1181 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/ax5modal.css create mode 100755 dist/ax5modal.js create mode 100755 dist/ax5modal.min.js create mode 100644 package.json create mode 100755 src/ax5modal.js create mode 100644 src/ax5modal.scss create mode 100644 src/scss/_ax5modal.scss create mode 100644 src/scss/_ax5modal_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..fb90f56 --- /dev/null +++ b/API.md @@ -0,0 +1,140 @@ +# Basic Usage +> Modal UI, hold does not exceed the current page, you can use in order to process a simple user input and information. In some cases, by the other page so as to output in the modal, it can also handle the task of more diverse forms. + +## setConfig() +`setConfig([options])` +You define the default settings for the modal. Create a ax5.ui.modal instance, using the setConfig method in that instance, you can define a default value. + +```js +var myModal = new ax5.ui.modal(); +myModal.set_config({ + width: "Number", + height: "Number", + position: { + left: "left|center|right|Number", + top: "top|middle|bottom|Number", + margin: "Number" + }, + iframe: { + method: "get|post", + url: "String", + param: "paramString|Object" + }, + closeToEsc: "Boolean", + onStateChanged: "Function", + animateTime: "Number", + zIndex: "Number", + fullScreen: "Boolean" +}); +``` + +### width + +Type: `Number` [default: 300] + +Modal width + +### height + +Type: `Number` [default: 400] + +Modal height + +### position + +Type: `Object` + +**default** +```json +{ + left: "center", // left|center|right|Number + top: "middle", // top|middle|bottom|Number + margin: 10 +} +``` + +### iframe + +Type: `Object` + +**default** +```json +{ + method: "get", // get|post + url: "", // iframe src url + param: "" // parameter +} +``` + +### closeToEsc + +Type: `Boolean` + +### onStateChanged + +Type: `Function` + +onStateChanged function is executed when the modal of the state is changed, +this.state state value is passed to this time onStateChanged function. + +### animateTime + +Type: `Number` [default : 300] + +### zIndex + +Type: `Number` + + +### fullScreen + +Type: `Boolean` + +```json +fullScreen : true +``` + +- - - + +## open() +`open(Options[, callBack])` + +it is possible to redefine all of the options that can be used in setConfig. + +```js +modal.open(); +modal.open({ + width: 500, + height: 500 +}); +modal.open({}, function(){ + console.log(this); +}); +``` + +- - - + +## css() +`css(Object)` + +```js +modal.css({ + width: 400, + height: 600 +}); +``` + +- - - + +## align() +`align(Object)` + +```js +modal.align({left:"center", top:"middle"}); +modal.align({left:"left", top:"top", margin: 20}); +``` + +- - - + +## 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..c9d290c --- /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-modal + +> *Dependencies* +> * _[jQuery 1.X+](http://jquery.com/)_ +> * _[ax5core](http://ax5.io/ax5core)_ +> * _[bootstrap](http://getbootstrap.com/)_ + + +### Install by bower +```sh +bower install ax5ui-modal +``` +[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-modal Github releases](https://github.com/ax5ui/ax5ui-modal/releases) + + +### Insert the "ax5modal" 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 modal = new ax5.ui.modal(); +modal.setConfig({ + onStateChanged: function(){ + console.log(this); + } +}); +modal.open(); +``` + +- - - + +### 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-modal +``` + +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-modal/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..6b655c8 --- /dev/null +++ b/bower.json @@ -0,0 +1,26 @@ +{ + "name": "ax5ui-modal", + "version": "0.5.0", + "authors": [ + "ThomasJ " + ], + "description": "", + "main": "dist/ax5modal.js", + "keywords": [ + "bootstrap", + "jquery", + "ax5ui", + "plugin", + "bootstrap jQuery plugins", + "modal", + "ax5ui-modal", + "javascript ui" + ], + "dependencies": { + "jquery": "^1.11.0", + "ax5core": ">=0.4.0", + "bootstrap": "^3.3.6" + }, + "license": "MIT", + "homepage": "ax5.io" +} diff --git a/dist/ax5modal.css b/dist/ax5modal.css new file mode 100644 index 0000000..39f68d3 --- /dev/null +++ b/dist/ax5modal.css @@ -0,0 +1 @@ +@-webkit-keyframes ax-modal{0%{opacity:0.0;-webkit-transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}0.1%{opacity:1.0;-webkit-transform:matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}5.9%{-webkit-transform:matrix3d(0.711, 0, 0, 0, 0, 0.742, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.711, 0, 0, 0, 0, 0.742, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}7.7%{-webkit-transform:matrix3d(0.768, 0, 0, 0, 0, 0.812, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.768, 0, 0, 0, 0, 0.812, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}11.5%{-webkit-transform:matrix3d(0.869, 0, 0, 0, 0, 0.935, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.869, 0, 0, 0, 0, 0.935, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}11.7%{-webkit-transform:matrix3d(0.873, 0, 0, 0, 0, 0.94, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.873, 0, 0, 0, 0, 0.94, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}15.2%{-webkit-transform:matrix3d(0.941, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.941, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}17.5%{-webkit-transform:matrix3d(0.973, 0, 0, 0, 0, 1.045, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.973, 0, 0, 0, 0, 1.045, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}19%{-webkit-transform:matrix3d(0.99, 0, 0, 0, 0, 1.058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.99, 0, 0, 0, 0, 1.058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}22.8%{-webkit-transform:matrix3d(1.019, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.019, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}23.2%{-webkit-transform:matrix3d(1.021, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.021, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}30.3%{-webkit-transform:matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}30.4%{-webkit-transform:matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}37.5%{-webkit-transform:matrix3d(1.028, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.028, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}44.6%{-webkit-transform:matrix3d(1.016, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.016, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}50.3%{-webkit-transform:matrix3d(1.008, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.008, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}51.7%{-webkit-transform:matrix3d(1.006, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.006, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}70.3%{-webkit-transform:matrix3d(0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}80.3%{-webkit-transform:matrix3d(0.999, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.999, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}100%{-webkit-transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}}@-moz-keyframes ax-modal{0%{opacity:0.0;-webkit-transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}0.1%{opacity:1.0;-webkit-transform:matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}5.9%{-webkit-transform:matrix3d(0.711, 0, 0, 0, 0, 0.742, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.711, 0, 0, 0, 0, 0.742, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}7.7%{-webkit-transform:matrix3d(0.768, 0, 0, 0, 0, 0.812, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.768, 0, 0, 0, 0, 0.812, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}11.5%{-webkit-transform:matrix3d(0.869, 0, 0, 0, 0, 0.935, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.869, 0, 0, 0, 0, 0.935, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}11.7%{-webkit-transform:matrix3d(0.873, 0, 0, 0, 0, 0.94, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.873, 0, 0, 0, 0, 0.94, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}15.2%{-webkit-transform:matrix3d(0.941, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.941, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}17.5%{-webkit-transform:matrix3d(0.973, 0, 0, 0, 0, 1.045, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.973, 0, 0, 0, 0, 1.045, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}19%{-webkit-transform:matrix3d(0.99, 0, 0, 0, 0, 1.058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.99, 0, 0, 0, 0, 1.058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}22.8%{-webkit-transform:matrix3d(1.019, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.019, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}23.2%{-webkit-transform:matrix3d(1.021, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.021, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}30.3%{-webkit-transform:matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}30.4%{-webkit-transform:matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}37.5%{-webkit-transform:matrix3d(1.028, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.028, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}44.6%{-webkit-transform:matrix3d(1.016, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.016, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}50.3%{-webkit-transform:matrix3d(1.008, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.008, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}51.7%{-webkit-transform:matrix3d(1.006, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.006, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}70.3%{-webkit-transform:matrix3d(0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}80.3%{-webkit-transform:matrix3d(0.999, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.999, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}100%{-webkit-transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}}@keyframes ax-modal{0%{opacity:0.0;-webkit-transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}0.1%{opacity:1.0;-webkit-transform:matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}5.9%{-webkit-transform:matrix3d(0.711, 0, 0, 0, 0, 0.742, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.711, 0, 0, 0, 0, 0.742, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}7.7%{-webkit-transform:matrix3d(0.768, 0, 0, 0, 0, 0.812, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.768, 0, 0, 0, 0, 0.812, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}11.5%{-webkit-transform:matrix3d(0.869, 0, 0, 0, 0, 0.935, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.869, 0, 0, 0, 0, 0.935, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}11.7%{-webkit-transform:matrix3d(0.873, 0, 0, 0, 0, 0.94, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.873, 0, 0, 0, 0, 0.94, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}15.2%{-webkit-transform:matrix3d(0.941, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.941, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}17.5%{-webkit-transform:matrix3d(0.973, 0, 0, 0, 0, 1.045, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.973, 0, 0, 0, 0, 1.045, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}19%{-webkit-transform:matrix3d(0.99, 0, 0, 0, 0, 1.058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.99, 0, 0, 0, 0, 1.058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}22.8%{-webkit-transform:matrix3d(1.019, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.019, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}23.2%{-webkit-transform:matrix3d(1.021, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.021, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}30.3%{-webkit-transform:matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}30.4%{-webkit-transform:matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}37.5%{-webkit-transform:matrix3d(1.028, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.028, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}44.6%{-webkit-transform:matrix3d(1.016, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.016, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}50.3%{-webkit-transform:matrix3d(1.008, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.008, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}51.7%{-webkit-transform:matrix3d(1.006, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.006, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}70.3%{-webkit-transform:matrix3d(0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}80.3%{-webkit-transform:matrix3d(0.999, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.999, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}100%{-webkit-transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}}@-webkit-keyframes ax-modal-destroy{from{-webkit-transform:scale(1);opacity:1.0}to{-webkit-transform:scale(0.5);opacity:0.0}}@-moz-keyframes ax-modal-destroy{from{-moz-transform:scale(1);opacity:1.0}to{-moz-transform:scale(0.5);opacity:0.0}}@keyframes ax-modal-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(0.5);-moz-transform:scale(0.5);-ms-transform:scale(0.5);-o-transform:scale(0.5);transform:scale(0.5);opacity:0.0}}@-webkit-keyframes ax-modal-fullscreen{0%{-webkit-transform:translateY(100%)}100%{-webkit-transform:translateY(0)}}@-moz-keyframes ax-modal-fullscreen{0%{-moz-transform:translateY(100%)}100%{-moz-transform:translateY(0)}}@keyframes ax-modal-fullscreen{0%{-webkit-transform:translateY(100%);-moz-transform:translateY(100%);-ms-transform:translateY(100%);-o-transform:translateY(100%);transform:translateY(100%)}100%{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes ax-modal-fullscreen-destroy{0%{-webkit-transform:translateY(0)}100%{-webkit-transform:translateY(100%)}}@-moz-keyframes ax-modal-fullscreen-destroy{0%{-moz-transform:translateY(0)}100%{-moz-transform:translateY(100%)}}@keyframes ax-modal-fullscreen-destroy{0%{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}100%{-webkit-transform:translateY(100%);-moz-transform:translateY(100%);-ms-transform:translateY(100%);-o-transform:translateY(100%);transform:translateY(100%)}}.ax5-ui-modal{-webkit-animation:ax-modal 0.7s linear both;-moz-animation:ax-modal 0.7s linear both;animation:ax-modal 0.7s linear both;-webkit-transform:translateZ(0px);-moz-transform:translateZ(0px);-ms-transform:translateZ(0px);-o-transform:translateZ(0px);transform:translateZ(0px);box-sizing:border-box;background-color:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0px 0px 5px 0px rgba(0,0,0,0.6);z-index:2000;position:fixed;left:0px;top:0px;overflow:hidden}.ax5-ui-modal .ax-modal-body{padding:0px;text-align:center;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;-webkit-flex:1;-moz-flex:1;-ms-flex:1;flex:1;position:relative}.ax5-ui-modal .ax-modal-body iframe{border:0px none}.ax5-ui-modal.destroy{-webkit-animation:ax-modal-destroy 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;-moz-animation:ax-modal-destroy 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;animation:ax-modal-destroy 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards}.ax5-ui-modal.fullscreen{border:0px none;border-radius:0px;box-shadow:none;-webkit-animation:ax-modal-fullscreen 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;-moz-animation:ax-modal-fullscreen 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;animation:ax-modal-fullscreen 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards}.ax5-ui-modal.fullscreen.destroy{-webkit-animation:ax-modal-fullscreen-destroy 0.3s cubic-bezier(0.19, 1, 0.22, 1) forwards;-moz-animation:ax-modal-fullscreen-destroy 0.3s cubic-bezier(0.19, 1, 0.22, 1) forwards;animation:ax-modal-fullscreen-destroy 0.3s cubic-bezier(0.19, 1, 0.22, 1) forwards} diff --git a/dist/ax5modal.js b/dist/ax5modal.js new file mode 100755 index 0000000..241d001 --- /dev/null +++ b/dist/ax5modal.js @@ -0,0 +1,304 @@ +// ax5.ui.modal +(function (root, _SUPER_) { + + /** + * @class ax5.ui.modal + * @classdesc + * @version v0.0.1 + * @author tom@axisj.com + * @logs + * 2014-06-23 tom : 시작 + * @example + * ``` + * var my_modal = new ax5.ui.modal(); + * ``` + */ + + var U = ax5.util; + + //== UI Class + var axClass = function () { + var + self = this, + cfg; + + if (_SUPER_) _SUPER_.call(this); // 부모호출 + this.activeModal = null; + this.$ = {}; // UI inside of the jQuery object store + this.config = { + position: { + left: "center", + top: "middle", + margin: 10 + }, + clickEventName: "click", //(('ontouchstart' in document.documentElement) ? "touchstart" : "click"), + theme: 'default', + width: 300, + height: 400, + closeToEsc: true, + animateTime: 250 + }; + cfg = this.config; // extended config copy cfg + cfg.id = 'ax5-modal-' + ax5.getGuid(); // instance id + + /** + * Preferences of modal UI + * @method ax5.ui.modal.setConfig + * @param {Object} config - 클래스 속성값 + * @returns {ax5.ui.modal} + * @example + * ``` + * ``` + */ + //== class body start + this.init = function () { + + }; + + this.getContent = function (modalId, opts) { + var + po = [], + styles = []; + + if(opts.zIndex){ + styles.push("z-index:" + opts.zIndex); + } + + po.push('
'); + po.push('
'); + // use iframe + if (opts.iframe) { + po.push('
'); + po.push(''); + po.push('
'); + po.push('
'); + po.push(''); + if(typeof opts.iframe.param === "string"){ + opts.iframe.param = ax5.util.param(opts.iframe.param); + } + for (var p in opts.iframe.param) { + po.push(''); + } + po.push('
'); + } + po.push('
'); + po.push('
'); + return po.join(''); + }; + + this.open = function (opts, callBack) { + if (U.isString(opts)) { + opts = { + title: cfg.title, + msg: opts + } + } + + self.modalConfig = {}; + jQuery.extend(true, self.modalConfig, cfg); + jQuery.extend(true, self.modalConfig, opts); + opts = self.modalConfig; + + this._open(opts, callBack); + return this; + }; + + this._open = function (opts, callBack) { + var + that; + + jQuery(document.body).append(this.getContent(opts.id, opts)); + + this.activeModal = jQuery('#' + opts.id); + + // 파트수집 + this.$ = { + "root": this.activeModal.find('[data-modal-els="root"]'), + "body": this.activeModal.find('[data-modal-els="body"]') + }; + + if (opts.iframe) { + this.$["iframe-wrap"] = this.activeModal.find('[data-modal-els="iframe-wrap"]'); + this.$["iframe"] = this.activeModal.find('[data-modal-els="iframe"]'); + this.$["iframe-form"] = this.activeModal.find('[data-modal-els="iframe-form"]'); + } + + //- position 정렬 + this.align(); + + that = { + id: opts.id, + theme: opts.theme, + width: opts.width, + height: opts.height, + state: "open", + $: this.$ + }; + + if (opts.iframe) { + + console.log(); + + this.$["iframe-wrap"].css({height: opts.height}); + this.$["iframe"].css({height: opts.height}); + + // iframe content load + this.$["iframe-form"].attr({"method": opts.iframe.method}); + this.$["iframe-form"].attr({"target": opts.id + "-frame"}); + this.$["iframe-form"].attr({"action": opts.iframe.url}); + this.$["iframe"].on("load", (function () { + if (opts && opts.onStateChanged) { + that.state = "load"; + opts.onStateChanged.call(that, that); + } + }).bind(this)); + this.$["iframe-form"].submit(); + } + + if (callBack) callBack.call(that); + if (opts && opts.onStateChanged) { + opts.onStateChanged.call(that, that); + } + + // bind key event + if (opts.closeToEsc) { + jQuery(window).bind("keydown.ax-modal", (function (e) { + this.onkeyup(e || window.event); + }).bind(this)); + } + jQuery(window).bind("resize.ax-modal", (function (e) { + this.align(null, e || window.event); + }).bind(this)); + }; + + this.align = function (position, e) { + if (!this.activeModal) return this; + var opts = self.modalConfig, + box = { + width: opts.width, + height: opts.height + }; + + if(opts.fullScreen){ + box.width = jQuery(window).width(); + box.height = jQuery(window).height(); + box.left = 0; + box.top = 0; + + if (opts.iframe) { + this.$["iframe-wrap"].css({height: box.height}); + this.$["iframe"].css({height: box.height}); + } + } + else{ + if (position) { + jQuery.extend(true, opts.position, position); + } + + //- position 정렬 + if (opts.position.left == "left") { + box.left = (opts.position.margin || 0); + } + else if (opts.position.left == "right") { + // window.innerWidth; + box.left = jQuery(window).width() - box.width - (opts.position.margin || 0); + } + else if (opts.position.left == "center") { + box.left = jQuery(window).width() / 2 - box.width / 2; + } + else { + box.left = opts.position.left || 0; + } + + if (opts.position.top == "top") { + box.top = (opts.position.margin || 0); + } + else if (opts.position.top == "bottom") { + box.top = jQuery(window).height() - box.height - (opts.position.margin || 0); + } + else if (opts.position.top == "middle") { + box.top = jQuery(window).height() / 2 - box.height / 2; + } + else { + box.top = opts.position.top || 0; + } + } + + this.activeModal.css(box); + return this; + }; + + this.onkeyup = function (e) { + if (e.keyCode == ax5.info.eventKeys.ESC) { + this.close(); + } + }; + + /** + * close the modal + * @method ax5.ui.modal.close + * @returns {ax5.ui.modal} + * @example + * ``` + * my_modal.close(); + * ``` + */ + this.close = function (opts, that) { + if (this.activeModal) { + opts = self.modalConfig; + this.activeModal.addClass("destroy"); + jQuery(window).unbind("keydown.ax-modal"); + jQuery(window).unbind("resize.ax-modal"); + + setTimeout((function () { + this.activeModal.remove(); + this.activeModal = null; + if (opts && opts.onStateChanged) { + that = { + state: "close" + }; + opts.onStateChanged.call(that, that); + } + }).bind(this), cfg.animateTime); + } + return this; + }; + + /** + * setCSS + * @method ax5.ui.modal.css + * @param {Object} css - + * @returns {ax5.ui.modal} + */ + this.css = function (css) { + if (this.activeModal && !self.fullScreen) { + this.activeModal.css(css); + if (css.width) { + self.modalConfig.width = this.activeModal.width(); + } + if (css.height) { + self.modalConfig.height = this.activeModal.height(); + if(this.$["iframe"]) { + this.$["iframe-wrap"].css({height: self.modalConfig.height}); + this.$["iframe"].css({height: self.modalConfig.height}); + } + } + } + return this; + }; + + // 클래스 생성자 + this.main = (function () { + if(arguments && U.isObject(arguments[0])) { + this.setConfig(arguments[0]); + } + }).apply(this, arguments); + }; + //== UI Class + + root.modal = (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/ax5modal.min.js b/dist/ax5modal.min.js new file mode 100755 index 0000000..41e2825 --- /dev/null +++ b/dist/ax5modal.min.js @@ -0,0 +1 @@ +!function(i,t){var e=ax5.util,a=function(){var i,a=this;t&&t.call(this),this.activeModal=null,this.$={},this.config={position:{left:"center",top:"middle",margin:10},clickEventName:"click",theme:"default",width:300,height:400,closeToEsc:!0,animateTime:250},i=this.config,i.id="ax5-modal-"+ax5.getGuid(),this.init=function(){},this.getContent=function(i,t){var e=[],a=[];if(t.zIndex&&a.push("z-index:"+t.zIndex),e.push('
'),e.push('
'),t.iframe){e.push('
'),e.push(''),e.push("
"),e.push('
'),e.push(''),"string"==typeof t.iframe.param&&(t.iframe.param=ax5.util.param(t.iframe.param));for(var o in t.iframe.param)e.push('');e.push("
")}return e.push("
"),e.push("
"),e.join("")},this.open=function(t,o){return e.isString(t)&&(t={title:i.title,msg:t}),a.modalConfig={},jQuery.extend(!0,a.modalConfig,i),jQuery.extend(!0,a.modalConfig,t),t=a.modalConfig,this._open(t,o),this},this._open=function(i,t){var e;jQuery(document.body).append(this.getContent(i.id,i)),this.activeModal=jQuery("#"+i.id),this.$={root:this.activeModal.find('[data-modal-els="root"]'),body:this.activeModal.find('[data-modal-els="body"]')},i.iframe&&(this.$["iframe-wrap"]=this.activeModal.find('[data-modal-els="iframe-wrap"]'),this.$.iframe=this.activeModal.find('[data-modal-els="iframe"]'),this.$["iframe-form"]=this.activeModal.find('[data-modal-els="iframe-form"]')),this.align(),e={id:i.id,theme:i.theme,width:i.width,height:i.height,state:"open",$:this.$},i.iframe&&(console.log(),this.$["iframe-wrap"].css({height:i.height}),this.$.iframe.css({height:i.height}),this.$["iframe-form"].attr({method:i.iframe.method}),this.$["iframe-form"].attr({target:i.id+"-frame"}),this.$["iframe-form"].attr({action:i.iframe.url}),this.$.iframe.on("load",function(){i&&i.onStateChanged&&(e.state="load",i.onStateChanged.call(e,e))}.bind(this)),this.$["iframe-form"].submit()),t&&t.call(e),i&&i.onStateChanged&&i.onStateChanged.call(e,e),i.closeToEsc&&jQuery(window).bind("keydown.ax-modal",function(i){this.onkeyup(i||window.event)}.bind(this)),jQuery(window).bind("resize.ax-modal",function(i){this.align(null,i||window.event)}.bind(this))},this.align=function(i,t){if(!this.activeModal)return this;var e=a.modalConfig,o={width:e.width,height:e.height};return e.fullScreen?(o.width=jQuery(window).width(),o.height=jQuery(window).height(),o.left=0,o.top=0,e.iframe&&(this.$["iframe-wrap"].css({height:o.height}),this.$.iframe.css({height:o.height}))):(i&&jQuery.extend(!0,e.position,i),"left"==e.position.left?o.left=e.position.margin||0:"right"==e.position.left?o.left=jQuery(window).width()-o.width-(e.position.margin||0):"center"==e.position.left?o.left=jQuery(window).width()/2-o.width/2:o.left=e.position.left||0,"top"==e.position.top?o.top=e.position.margin||0:"bottom"==e.position.top?o.top=jQuery(window).height()-o.height-(e.position.margin||0):"middle"==e.position.top?o.top=jQuery(window).height()/2-o.height/2:o.top=e.position.top||0),this.activeModal.css(o),this},this.onkeyup=function(i){i.keyCode==ax5.info.eventKeys.ESC&&this.close()},this.close=function(t,e){return this.activeModal&&(t=a.modalConfig,this.activeModal.addClass("destroy"),jQuery(window).unbind("keydown.ax-modal"),jQuery(window).unbind("resize.ax-modal"),setTimeout(function(){this.activeModal.remove(),this.activeModal=null,t&&t.onStateChanged&&(e={state:"close"},t.onStateChanged.call(e,e))}.bind(this),i.animateTime)),this},this.css=function(i){return this.activeModal&&!a.fullScreen&&(this.activeModal.css(i),i.width&&(a.modalConfig.width=this.activeModal.width()),i.height&&(a.modalConfig.height=this.activeModal.height(),this.$.iframe&&(this.$["iframe-wrap"].css({height:a.modalConfig.height}),this.$.iframe.css({height:a.modalConfig.height})))),this},this.main=function(){arguments&&e.isObject(arguments[0])&&this.setConfig(arguments[0])}.apply(this,arguments)};i.modal=function(){return e.isFunction(t)&&(a.prototype=new t),a}()}(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..bd88bff --- /dev/null +++ b/package.json @@ -0,0 +1,28 @@ +{ + "name": "ax5ui-modal", + "version": "0.5.0", + "description": "A modal plugin that works with Bootstrap & jQuery", + "license": "MIT", + "repository": { + "type": "git", + "url": "git+https://github.com/ax5ui/ax5ui-modal" + }, + "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/ax5modal.js b/src/ax5modal.js new file mode 100755 index 0000000..241d001 --- /dev/null +++ b/src/ax5modal.js @@ -0,0 +1,304 @@ +// ax5.ui.modal +(function (root, _SUPER_) { + + /** + * @class ax5.ui.modal + * @classdesc + * @version v0.0.1 + * @author tom@axisj.com + * @logs + * 2014-06-23 tom : 시작 + * @example + * ``` + * var my_modal = new ax5.ui.modal(); + * ``` + */ + + var U = ax5.util; + + //== UI Class + var axClass = function () { + var + self = this, + cfg; + + if (_SUPER_) _SUPER_.call(this); // 부모호출 + this.activeModal = null; + this.$ = {}; // UI inside of the jQuery object store + this.config = { + position: { + left: "center", + top: "middle", + margin: 10 + }, + clickEventName: "click", //(('ontouchstart' in document.documentElement) ? "touchstart" : "click"), + theme: 'default', + width: 300, + height: 400, + closeToEsc: true, + animateTime: 250 + }; + cfg = this.config; // extended config copy cfg + cfg.id = 'ax5-modal-' + ax5.getGuid(); // instance id + + /** + * Preferences of modal UI + * @method ax5.ui.modal.setConfig + * @param {Object} config - 클래스 속성값 + * @returns {ax5.ui.modal} + * @example + * ``` + * ``` + */ + //== class body start + this.init = function () { + + }; + + this.getContent = function (modalId, opts) { + var + po = [], + styles = []; + + if(opts.zIndex){ + styles.push("z-index:" + opts.zIndex); + } + + po.push('
'); + po.push('
'); + // use iframe + if (opts.iframe) { + po.push('
'); + po.push(''); + po.push('
'); + po.push('
'); + po.push(''); + if(typeof opts.iframe.param === "string"){ + opts.iframe.param = ax5.util.param(opts.iframe.param); + } + for (var p in opts.iframe.param) { + po.push(''); + } + po.push('
'); + } + po.push('
'); + po.push('
'); + return po.join(''); + }; + + this.open = function (opts, callBack) { + if (U.isString(opts)) { + opts = { + title: cfg.title, + msg: opts + } + } + + self.modalConfig = {}; + jQuery.extend(true, self.modalConfig, cfg); + jQuery.extend(true, self.modalConfig, opts); + opts = self.modalConfig; + + this._open(opts, callBack); + return this; + }; + + this._open = function (opts, callBack) { + var + that; + + jQuery(document.body).append(this.getContent(opts.id, opts)); + + this.activeModal = jQuery('#' + opts.id); + + // 파트수집 + this.$ = { + "root": this.activeModal.find('[data-modal-els="root"]'), + "body": this.activeModal.find('[data-modal-els="body"]') + }; + + if (opts.iframe) { + this.$["iframe-wrap"] = this.activeModal.find('[data-modal-els="iframe-wrap"]'); + this.$["iframe"] = this.activeModal.find('[data-modal-els="iframe"]'); + this.$["iframe-form"] = this.activeModal.find('[data-modal-els="iframe-form"]'); + } + + //- position 정렬 + this.align(); + + that = { + id: opts.id, + theme: opts.theme, + width: opts.width, + height: opts.height, + state: "open", + $: this.$ + }; + + if (opts.iframe) { + + console.log(); + + this.$["iframe-wrap"].css({height: opts.height}); + this.$["iframe"].css({height: opts.height}); + + // iframe content load + this.$["iframe-form"].attr({"method": opts.iframe.method}); + this.$["iframe-form"].attr({"target": opts.id + "-frame"}); + this.$["iframe-form"].attr({"action": opts.iframe.url}); + this.$["iframe"].on("load", (function () { + if (opts && opts.onStateChanged) { + that.state = "load"; + opts.onStateChanged.call(that, that); + } + }).bind(this)); + this.$["iframe-form"].submit(); + } + + if (callBack) callBack.call(that); + if (opts && opts.onStateChanged) { + opts.onStateChanged.call(that, that); + } + + // bind key event + if (opts.closeToEsc) { + jQuery(window).bind("keydown.ax-modal", (function (e) { + this.onkeyup(e || window.event); + }).bind(this)); + } + jQuery(window).bind("resize.ax-modal", (function (e) { + this.align(null, e || window.event); + }).bind(this)); + }; + + this.align = function (position, e) { + if (!this.activeModal) return this; + var opts = self.modalConfig, + box = { + width: opts.width, + height: opts.height + }; + + if(opts.fullScreen){ + box.width = jQuery(window).width(); + box.height = jQuery(window).height(); + box.left = 0; + box.top = 0; + + if (opts.iframe) { + this.$["iframe-wrap"].css({height: box.height}); + this.$["iframe"].css({height: box.height}); + } + } + else{ + if (position) { + jQuery.extend(true, opts.position, position); + } + + //- position 정렬 + if (opts.position.left == "left") { + box.left = (opts.position.margin || 0); + } + else if (opts.position.left == "right") { + // window.innerWidth; + box.left = jQuery(window).width() - box.width - (opts.position.margin || 0); + } + else if (opts.position.left == "center") { + box.left = jQuery(window).width() / 2 - box.width / 2; + } + else { + box.left = opts.position.left || 0; + } + + if (opts.position.top == "top") { + box.top = (opts.position.margin || 0); + } + else if (opts.position.top == "bottom") { + box.top = jQuery(window).height() - box.height - (opts.position.margin || 0); + } + else if (opts.position.top == "middle") { + box.top = jQuery(window).height() / 2 - box.height / 2; + } + else { + box.top = opts.position.top || 0; + } + } + + this.activeModal.css(box); + return this; + }; + + this.onkeyup = function (e) { + if (e.keyCode == ax5.info.eventKeys.ESC) { + this.close(); + } + }; + + /** + * close the modal + * @method ax5.ui.modal.close + * @returns {ax5.ui.modal} + * @example + * ``` + * my_modal.close(); + * ``` + */ + this.close = function (opts, that) { + if (this.activeModal) { + opts = self.modalConfig; + this.activeModal.addClass("destroy"); + jQuery(window).unbind("keydown.ax-modal"); + jQuery(window).unbind("resize.ax-modal"); + + setTimeout((function () { + this.activeModal.remove(); + this.activeModal = null; + if (opts && opts.onStateChanged) { + that = { + state: "close" + }; + opts.onStateChanged.call(that, that); + } + }).bind(this), cfg.animateTime); + } + return this; + }; + + /** + * setCSS + * @method ax5.ui.modal.css + * @param {Object} css - + * @returns {ax5.ui.modal} + */ + this.css = function (css) { + if (this.activeModal && !self.fullScreen) { + this.activeModal.css(css); + if (css.width) { + self.modalConfig.width = this.activeModal.width(); + } + if (css.height) { + self.modalConfig.height = this.activeModal.height(); + if(this.$["iframe"]) { + this.$["iframe-wrap"].css({height: self.modalConfig.height}); + this.$["iframe"].css({height: self.modalConfig.height}); + } + } + } + return this; + }; + + // 클래스 생성자 + this.main = (function () { + if(arguments && U.isObject(arguments[0])) { + this.setConfig(arguments[0]); + } + }).apply(this, arguments); + }; + //== UI Class + + root.modal = (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/ax5modal.scss b/src/ax5modal.scss new file mode 100644 index 0000000..370315a --- /dev/null +++ b/src/ax5modal.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/ax5modal_variables"; +@import "scss/ax5modal"; diff --git a/src/scss/_ax5modal.scss b/src/scss/_ax5modal.scss new file mode 100644 index 0000000..a6e75c3 --- /dev/null +++ b/src/scss/_ax5modal.scss @@ -0,0 +1,176 @@ +@mixin ax-modal() { + box-sizing: $ax5modal-box-model; + background-color: $ax5modal-bg; + border: $ax5modal-border; + + @include ax-border-radius($ax5modal-border-radius); + @include box-shadow($ax5modal-box-shaodw); + + z-index: $ax5modal-z-index; + position: fixed; + left: 0px; + top: 0px; + overflow: hidden; +} + +@mixin ax-modal-section() { + .ax-modal-body { + padding: $ax5modal-body-padding; + text-align: center; + @include flex(1); + position: relative; + iframe { + border: 0px none; + } + } +} + +@mixin modal-variant() { + .ax-modal-body { + + } +} + +@include keyframes(ax-modal) { + 0% { + opacity: 0.0; + -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 0.1% { + opacity: 1.0; + -webkit-transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 5.9% { + -webkit-transform: matrix3d(0.711, 0, 0, 0, 0, 0.742, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(0.711, 0, 0, 0, 0, 0.742, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 7.7% { + -webkit-transform: matrix3d(0.768, 0, 0, 0, 0, 0.812, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(0.768, 0, 0, 0, 0, 0.812, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 11.5% { + -webkit-transform: matrix3d(0.869, 0, 0, 0, 0, 0.935, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(0.869, 0, 0, 0, 0, 0.935, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 11.7% { + -webkit-transform: matrix3d(0.873, 0, 0, 0, 0, 0.94, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(0.873, 0, 0, 0, 0, 0.94, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 15.2% { + -webkit-transform: matrix3d(0.941, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(0.941, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 17.5% { + -webkit-transform: matrix3d(0.973, 0, 0, 0, 0, 1.045, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(0.973, 0, 0, 0, 0, 1.045, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 19% { + -webkit-transform: matrix3d(0.99, 0, 0, 0, 0, 1.058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(0.99, 0, 0, 0, 0, 1.058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 22.8% { + -webkit-transform: matrix3d(1.019, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(1.019, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 23.2% { + -webkit-transform: matrix3d(1.021, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(1.021, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 30.3% { + -webkit-transform: matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 30.4% { + -webkit-transform: matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 37.5% { + -webkit-transform: matrix3d(1.028, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(1.028, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 44.6% { + -webkit-transform: matrix3d(1.016, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(1.016, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 50.3% { + -webkit-transform: matrix3d(1.008, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(1.008, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 51.7% { + -webkit-transform: matrix3d(1.006, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(1.006, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 70.3% { + -webkit-transform: matrix3d(0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 80.3% { + -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(0.999, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 100% { + -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + +} + +@include keyframes(ax-modal-destroy) { + from { + @include transform(scale(1)); + opacity: 1.0; + } + to { + @include transform(scale(0.5)); + opacity: 0.0; + } +} + +@include keyframes(ax-modal-fullscreen) { + 0% { + @include transform(translateY(100%)); + } + 100% { + @include transform(translateY(0)); + } +} + +@include keyframes(ax-modal-fullscreen-destroy) { + 0% { + @include transform(translateY(0)); + } + 100% { + @include transform(translateY(100%)); + } +} + +// mixins --------------------------------------------- end + +.ax5-ui-modal { + @include animation(ax-modal 0.7s linear both); + @include transform(translateZ(0px)); + //@include transition(all $ax5modal-easing-time-open linear); + + @include ax-modal(); + @include ax-modal-section(); + @include modal-variant(); + + &.destroy { + @include animation(ax-modal-destroy $ax5modal-easing-time-close $ease-in-back forwards); + } + + + &.fullscreen{ + border: 0px none; + @include ax-border-radius(0px); + @include box-shadow(none); + @include animation(ax-modal-fullscreen 0.3s $ease-in-back forwards); + + &.destroy { + @include animation(ax-modal-fullscreen-destroy $ax5modal-easing-time-close $ease-out-expo forwards); + } + } + +} \ No newline at end of file diff --git a/src/scss/_ax5modal_variables.scss b/src/scss/_ax5modal_variables.scss new file mode 100644 index 0000000..0b11cd1 --- /dev/null +++ b/src/scss/_ax5modal_variables.scss @@ -0,0 +1,10 @@ +//== modal +$ax5modal-z-index: 2000 !default; +$ax5modal-box-model: border-box !default; +$ax5modal-bg: $panel-bg !default; +$ax5modal-border: 1px solid $panel-inner-border !default; +$ax5modal-box-shaodw: 0px 0px 5px 0px rgba(0, 0, 0, 0.60) !default; +$ax5modal-body-padding: 0px !default; +$ax5modal-border-radius: $panel-border-radius !default; +$ax5modal-easing-time-open: 0.3s !default; +$ax5modal-easing-time-close: 0.3s !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..5bd35ca --- /dev/null +++ b/test/index.html @@ -0,0 +1,52 @@ + + + + + Title + + + + + + + + + + + + + + + + + + + + \ No newline at end of file