├── .travis.yml
├── API.md
├── LICENSE
├── README.md
├── bower.json
├── deploy.sh
├── dist
    ├── ax5picker.css
    ├── ax5picker.js
    ├── ax5picker.min.js
    └── ax5picker.min.js.map
├── karma.conf.js
├── package.json
├── src
    ├── ax5picker.js
    ├── ax5picker.scss
    ├── modules
    │   ├── ax5ui-picker-tmpl.js
    │   └── jQuery-extender.js
    └── scss
    │   ├── _ax5picker.scss
    │   └── _ax5picker_variables.scss
└── test
    ├── bower.json
    ├── index.html
    ├── picker-color.html
    ├── test.picker.html
    └── test.picker.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 | > picker will be able to enter a value for the input element through the other UI.
  3 | 
  4 | ## bind()
  5 | `bind(Options)`
  6 | 
  7 | ```js
  8 | var picker = new ax5.ui.picker();
  9 | 
 10 | picker.bind({
 11 |     target: $("#input"),
 12 |     direction: "top",
 13 |     contentWidth: 200,
 14 |     content: function (callback) {
 15 |         var html = ''
 16 |                 + 'HTML CONTENT'
 17 |             ;
 18 |         callback(html);
 19 |     }
 20 | );
 21 | 
 22 | picker.bind({
 23 |     zIndex: 5000,
 24 |     id: "my-picker-01",
 25 |     target: $("#input"),
 26 |     direction: "top",
 27 |     contentWidth: 200,
 28 |     content: {
 29 |         width: 270,
 30 |         margin: 10,
 31 |         type: 'date',
 32 |         config: {
 33 |             // calendar UI config
 34 |         },
 35 |         formatter: {
 36 |             pattern: 'date'
 37 |         }
 38 |     },
 39 |     btns: {
 40 |         ok: {label: "확인", theme: "default"}
 41 |     }
 42 | );
 43 | ```
 44 | 
 45 | ### zIndex
 46 | Type: `Number`
 47 | 
 48 | ### id
 49 | 
 50 | Type: `String` 
 51 | 
 52 | picker unique id
 53 | 
 54 | ### target
 55 | 
 56 | Type: `Dom Element | jQuery Object`
 57 | 
 58 | ".input-Group" elements that are the target of the picker
 59 | 
 60 | ### direction
 61 | 
 62 | Type: `String` "top|left|right|bottom|auto"
 63 | 
 64 | ### content
 65 | 
 66 | Type: `Function|Object`
 67 | 
 68 | - **Function**
 69 | ```js
 70 | function (callback) {
 71 |     var html = 'HTML CONTENT';
 72 |     callback(html);
 73 | }
 74 | ```
 75 | - **Object**
 76 | ```js
 77 | {
 78 |     width: 270,
 79 |     margin: 10,
 80 |     type: 'date',
 81 |     config: {
 82 |         // calendar UI config
 83 |     },
 84 |     formatter: {
 85 |         // formatter UI config
 86 |     }
 87 | }
 88 | ```
 89 | - **width** `Number`
 90 | - **margin** `Number`
 91 | - **type** `String`
 92 |   - date
 93 |   - secure-num
 94 | 
 95 | - **config** `Object`
 96 | - **formatter** `Object`
 97 | 
 98 | #### contentType : 'date'
 99 | ```js
100 | {
101 |     width: 270,
102 |     margin: 10,
103 |     type: 'date',
104 |     config: {
105 |         control: {
106 |             left: '<i class="fa fa-chevron-left"></i>',
107 |             yearTmpl: '%s',
108 |             monthTmpl: '%s',
109 |             right: '<i class="fa fa-chevron-right"></i>'
110 |         },
111 |         lang: {
112 |             yearTmpl: "%s년",
113 |             months: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
114 |             dayTmpl: "%s"
115 |         }
116 |     },
117 |     formatter: {
118 |         pattern: 'date'
119 |     }
120 | }
121 | ```
122 | 
123 | #### contentType : 'secure-num'
124 | ```js
125 | {
126 |     width: 200,
127 |     margin: 10,
128 |     type: 'secure-num',
129 |     config: {
130 |         btnWrapStyle: "padding:3px;width:25%;",
131 |         btnStyle: "width:100%",
132 |         btnTheme: "info btn-sm",
133 |         specialBtnTheme: " btn-sm"
134 |     },
135 |     formatter: {
136 |         pattern: 'number'
137 |     }
138 | }
139 | ```
140 | 
141 | ### contentWidth
142 | 
143 | Type: `Number`
144 | 
145 | If the content type of the function, recommended to set this value.
146 | 
147 | ### btns
148 | 
149 | Type: `Object`
150 | 
151 | ```js
152 | {
153 |     ok: {label: "확인", theme: "default"}
154 | }
155 | ```
156 | 
157 | - - -
158 | 
159 | ## onStateChanged
160 | 
161 | Type: `Function`
162 | 
163 | `onStateChanged` function can be defined in setConfig method or new ax5.ui.picker initialization method.
164 | However, you can us to define an event function after initialization, if necessary
165 | 
166 | ```js
167 | var picker = new ax5.ui.picker({
168 |     onStateChanged: function(){
169 |         console.log(this);
170 |     }
171 | });
172 | 
173 | picker.onStateChanged = function(){
174 |     console.log(this);
175 | }
176 | ```
177 | 
178 | - - -
179 | 
180 | ## setContentValue()
181 | 
182 | `setContentValue(boundObjectId, inputSeq, value)`
183 | 
184 | ### boundObjectId
185 | 
186 | Type: `String`
187 | 
188 | picker unique id
189 | 
190 | ### inputSeq
191 | 
192 | .input-group's input seq
193 | 
194 | - - -
195 | 
196 | ## open()
197 | 
198 | `open(boundObjectId)`
199 | 
200 | ### boundObjectId
201 | 
202 | Type: `String`
203 | 
204 | picker unique id
205 | 
206 | - - -
207 | 
208 | ## close()
209 | 
210 | `close()`
211 | 
212 | ***
213 | 
214 | # jQuery extends
215 | 
216 | ## ax5picker
217 | `ax5picker({bindConfigs})`
218 | ```js
219 | $('[data-ax5picker="date"]').ax5picker({
220 |     direction: "top",
221 |     content: {
222 |         width: 270,
223 |         margin: 10,
224 |         type: 'date'
225 |     }
226 | });
227 | ```
228 | 
229 | ### open
230 | `ax5picker("open")`
231 | ```js
232 | $('[data-ax5picker]').ax5picker("open");
233 | ```
234 | 
235 | ### close
236 | `ax5picker("close")`
237 | ```js
238 | $('[data-ax5picker]').ax5picker("close");
239 | ```
240 | 
241 | ### setValue
242 | `ax5select("setValue", inputSeq, value)`
243 | ```js
244 | $('[data-ax5picker]').ax5picker("setValue", 0, "optionValue2");
245 | ```
246 | 
247 | 


--------------------------------------------------------------------------------
/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-picker.svg?branch=master)](https://travis-ci.org/ax5ui/ax5ui-picker)
  2 | [![npm version](https://badge.fury.io/js/ax5ui-picker.svg)](https://badge.fury.io/js/ax5ui-picker)
  3 | [![](https://img.shields.io/npm/dm/ax5ui-picker.svg)](https://www.npmjs.com/package/ax5ui-picker)
  4 | 
  5 | # ax5ui-picker
  6 | "picker" provides users a simple way to select a single value from a pre-determined set of values.
  7 | 
  8 | > *Dependencies*
  9 | > * _[jQuery 1.X+](http://jquery.com/)_
 10 | > * _[ax5core](http://ax5.io/ax5core)_
 11 | > * _[bootstrap](http://getbootstrap.com/)_
 12 | > * _[ax5calendar](http://ax5.io/ax5calendar)_
 13 | > * _[ax5formatter](http://ax5.io/ax5formatter)_
 14 | 
 15 | 
 16 | ### Install with bower
 17 | ```sh
 18 | bower install ax5ui-picker
 19 | ```
 20 | [bower](http://bower.io/#install-bower) is web front-end package manager.
 21 | When you install `bower`, it will be installed under the `bower_components` folder to resolve the plug-in dependencies.  
 22 | (You can change the folder location. [.bowerrc](http://bower.io/docs/config/#bowerrc-specification) )
 23 | 
 24 | It is recommended that you install by using `bower`. 
 25 | If you've never used bower, please refer to [http://bower.io/#install-bower](http://bower.io/#install-bower).
 26 | 
 27 | ### Install with npm
 28 | If you do not use bower, it also can be installed by using npm as an alternative.
 29 | In case of npm, which is the package manager for the front end, you need to solve the problem of plug-in dependencies.
 30 | 
 31 | ```sh
 32 | npm install jquery
 33 | npm install ax5core
 34 | npm install ax5ui-calendar
 35 | npm install ax5ui-formatter
 36 | npm install ax5ui-picker
 37 | ```
 38 | 
 39 | 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.
 40 | If the copy process is inconvenient, it also can be done easily by using `gulp` or `grunt`.
 41 | 
 42 | ### Download code
 43 | - [ax5core Github releases](https://github.com/ax5ui/ax5core/releases)
 44 | - [ax5ui-picker Github releases](https://github.com/ax5ui/ax5ui-picker/releases)
 45 | 
 46 | 
 47 | ### Insert "ax5picker" in HTML HEAD.
 48 | Folder location can be any for your project. However, please be sure to assign the right path in the project.
 49 | 
 50 | ```html
 51 | <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/ax5ui/ax5ui-picker/master/dist/ax5picker.css" />
 52 | <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 53 | <script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5core/master/dist/ax5core.min.js"></script>
 54 | <script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5ui-calendar/master/dist/ax5calendar.min.js"></script>
 55 | <script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5ui-formatter/master/dist/ax5formatter.min.js"></script>
 56 | <script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5ui-picker/master/dist/ax5picker.min.js"></script>
 57 | ```
 58 | 
 59 | **CDN urls**
 60 | This is a list of CDN urls for ax5ui-picker. ax5ui offers the CDN services through rawgit.
 61 | ```
 62 | https://cdn.rawgit.com/ax5ui/ax5ui-picker/master/dist/ax5picker.css
 63 | https://cdn.rawgit.com/ax5ui/ax5ui-picker/master/dist/ax5picker.js
 64 | https://cdn.rawgit.com/ax5ui/ax5ui-picker/master/dist/ax5picker.min.js
 65 | ```
 66 | 
 67 | ### Basic Usage
 68 | ```html
 69 | <div class="input-group" id="pickerTarget">
 70 |     <input type="text" class="form-control" placeholder="" />
 71 |     <span class="input-group-addon"><i class="fa fa-calendar-o"></i></span>
 72 | </div>
 73 | ```
 74 | 
 75 | ```js
 76 | var picker = new ax5.ui.picker();
 77 | picker.bind({
 78 |     target: $("#pickerTarget"),
 79 |     direction: "top",
 80 |     contentWidth: 200,
 81 |     content: function (callback) {
 82 |         var html = ''
 83 |                 + 'picker contents'
 84 |                 + '<div style="padding: 10px;">'
 85 |                 + '<button class="btn btn-default">FN 1</button>'
 86 |                 + '</div>'
 87 |             ;
 88 |         callback(html);
 89 |     }
 90 | });
 91 | ```
 92 | 
 93 | ***
 94 | 
 95 | ### Preview
 96 | - [See Demonstration](http://ax5.io/ax5ui-picker/demo/index.html)
 97 | 
 98 | If you have any questions, please refer to the following [gitHub](https://github.com/ax5ui/ax5ui-kernel)
 99 | 
100 | ## Question
101 | - https://jsdev.kr/c/axisj/ax5ui
102 | - https://github.com/ax5ui/ax5ui-kernel/issues
103 | 
104 | [![axisj-contributed](https://img.shields.io/badge/AXISJ.com-Contributed-green.svg)](https://github.com/axisj)
105 | ![](https://img.shields.io/badge/Seowoo-Mondo&Thomas-red.svg)
106 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "ax5ui-picker",
 3 | 	"version": "1.4.131",
 4 | 	"description": "A picker plugin that works with Bootstrap & jQuery",
 5 | 	"authors": [
 6 | 		"ThomasJ <tom@axisj.com>"
 7 | 	],
 8 | 	"main": "dist/ax5picker.js",
 9 | 	"keywords": [
10 | 		"bootstrap",
11 | 		"jquery",
12 | 		"ax5ui",
13 | 		"plugin",
14 | 		"bootstrap jQuery plugins",
15 | 		"picker",
16 | 		"ax5ui-picker",
17 | 		"javascript ui"
18 | 	],
19 | 	"dependencies": {
20 | 		"jquery": "",
21 | 		"ax5core": ">=1.4.115",
22 | 		"ax5ui-calendar": "",
23 | 		"ax5ui-formatter": "",
24 | 		"ax5ui-palette": ""
25 | 	},
26 | 	"license": "MIT",
27 | 	"homepage": "ax5.io"
28 | }


--------------------------------------------------------------------------------
/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/ax5picker.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-picker{0%{opacity:0.0;-webkit-transform:translate(0, -10%)}100%{opacity:1.0;-webkit-transform:translate(0, 0)}}@-moz-keyframes ax-picker{0%{opacity:0.0;-moz-transform:translate(0, -10%)}100%{opacity:1.0;-moz-transform:translate(0, 0)}}@keyframes ax-picker{0%{opacity:0.0;-webkit-transform:translate(0, -10%);-moz-transform:translate(0, -10%);-ms-transform:translate(0, -10%);-o-transform:translate(0, -10%);transform:translate(0, -10%)}100%{opacity:1.0;-webkit-transform:translate(0, 0);-moz-transform:translate(0, 0);-ms-transform:translate(0, 0);-o-transform:translate(0, 0);transform:translate(0, 0)}}@-webkit-keyframes ax-picker-destroy{from{opacity:1.0;-webkit-transform:translate(0, 0)}to{opacity:0.0;-webkit-transform:translate(0, -10%)}}@-moz-keyframes ax-picker-destroy{from{opacity:1.0;-moz-transform:translate(0, 0)}to{opacity:0.0;-moz-transform:translate(0, -10%)}}@keyframes ax-picker-destroy{from{opacity:1.0;-webkit-transform:translate(0, 0);-moz-transform:translate(0, 0);-ms-transform:translate(0, 0);-o-transform:translate(0, 0);transform:translate(0, 0)}to{opacity:0.0;-webkit-transform:translate(0, -10%);-moz-transform:translate(0, -10%);-ms-transform:translate(0, -10%);-o-transform:translate(0, -10%);transform:translate(0, -10%)}}.ax5-ui-picker{box-sizing:border-box;z-index:2000;position:absolute;left:0px;top:0px;-webkit-perspective:1000px;-moz-perspective:1000px;perspective:1000px;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-animation:ax-picker .1s;-o-animation:ax-picker .1s;animation:ax-picker .1s;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-transform-origin:center top;-moz-transform-origin:center top;-ms-transform-origin:center top;transform-origin:center top;background-color:#fff;background-image:-webkit-linear-gradient(bottom, #fff);background-image:linear-gradient(to top,#fff);border:1px solid;border-color:#ddd;border-radius:5px;box-shadow:0px 0px 3px 0px rgba(0,0,0,0.175)}.ax5-ui-picker *,.ax5-ui-picker *:before,.ax5-ui-picker *:after{box-sizing:border-box}.ax5-ui-picker .ax-picker-heading{font-weight:600;padding:10px 15px;border-bottom:1px solid transparent;border-top-right-radius:4px;border-top-left-radius:4px;color:#333;background-color:#f5f5f5;background-image:-webkit-linear-gradient(bottom, #f5f5f5);background-image:linear-gradient(to top,#f5f5f5)}.ax5-ui-picker .ax-picker-heading .badge{font-size:0.8em;color:#f5f5f5;background-color:#333;background-image:-webkit-linear-gradient(bottom, #333);background-image:linear-gradient(to top,#333)}.ax5-ui-picker .ax-picker-body{padding:5px;text-align:center}.ax5-ui-picker .ax-picker-body .ax-picker-content{min-width:50px}.ax5-ui-picker .ax-picker-body .ax-picker-content .ax-picker-content-box{border:0px solid;border-color:none;border-radius:0px;padding:0px;overflow:hidden}.ax5-ui-picker .ax-picker-body .ax-picker-buttons{padding:10px 0px 5px 0px}.ax5-ui-picker .ax-picker-body .ax-picker-buttons button:not(:last-child){margin-right:3px}.ax5-ui-picker.direction-top .ax-picker-arrow{position:absolute;width:0;height:0;left:50%;top:0px}.ax5-ui-picker.direction-top .ax-picker-arrow:before{content:' ';position:absolute;width:0;height:0;left:-10px;top:-20px;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:20px solid #ddd}.ax5-ui-picker.direction-top .ax-picker-arrow:after{content:' ';position:absolute;width:0;height:0;left:-10px;top:-18px;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:20px solid #fff}.ax5-ui-picker.direction-right .ax-picker-arrow{position:absolute;width:0;height:0;right:0px;top:50%}.ax5-ui-picker.direction-right .ax-picker-arrow:before{content:' ';position:absolute;width:0;height:0;right:-20px;top:-10px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:20px solid #ddd}.ax5-ui-picker.direction-right .ax-picker-arrow:after{content:' ';position:absolute;width:0;height:0;right:-18px;top:-10px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:20px solid #fff}.ax5-ui-picker.direction-bottom .ax-picker-arrow{position:absolute;width:0;height:0;left:50%;bottom:0px}.ax5-ui-picker.direction-bottom .ax-picker-arrow:before{content:' ';position:absolute;width:0;height:0;left:-10px;bottom:-20px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:20px solid #ddd}.ax5-ui-picker.direction-bottom .ax-picker-arrow:after{content:' ';position:absolute;width:0;height:0;left:-10px;bottom:-18px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:20px solid #fff}.ax5-ui-picker.direction-left .ax-picker-arrow{position:absolute;width:0;height:0;left:0px;top:50%}.ax5-ui-picker.direction-left .ax-picker-arrow:before{content:' ';position:absolute;width:0;height:0;left:-20px;top:-10px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:20px solid #ddd}.ax5-ui-picker.direction-left .ax-picker-arrow:after{content:' ';position:absolute;width:0;height:0;left:-18px;top:-10px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:20px solid #fff}.ax5-ui-picker.primary{background-color:#fff;background-image:-webkit-linear-gradient(bottom, #fff);background-image:linear-gradient(to top,#fff);border:1px solid;border-color:#337ab7;border-radius:5px;box-shadow:0px 0px 3px 0px rgba(0,0,0,0.175)}.ax5-ui-picker.primary .ax-picker-heading{font-weight:600;padding:10px 15px;border-bottom:1px solid transparent;border-top-right-radius:4px;border-top-left-radius:4px;color:#fff;background-color:#337ab7;background-image:-webkit-linear-gradient(bottom, #337ab7);background-image:linear-gradient(to top,#337ab7)}.ax5-ui-picker.primary .ax-picker-heading .badge{font-size:0.8em;color:#337ab7;background-color:#fff;background-image:-webkit-linear-gradient(bottom, #fff);background-image:linear-gradient(to top,#fff)}.ax5-ui-picker.primary .ax-picker-body{padding:5px;text-align:center}.ax5-ui-picker.primary .ax-picker-body .ax-picker-content{min-width:50px}.ax5-ui-picker.primary .ax-picker-body .ax-picker-content .ax-picker-content-box{border:0px solid;border-color:none;border-radius:0px;padding:0px;overflow:hidden}.ax5-ui-picker.primary .ax-picker-body .ax-picker-buttons{padding:10px 0px 5px 0px}.ax5-ui-picker.primary .ax-picker-body .ax-picker-buttons button:not(:last-child){margin-right:3px}.ax5-ui-picker.primary.direction-top .ax-picker-arrow{position:absolute;width:0;height:0;left:50%;top:0px}.ax5-ui-picker.primary.direction-top .ax-picker-arrow:before{content:' ';position:absolute;width:0;height:0;left:-10px;top:-20px;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:20px solid #337ab7}.ax5-ui-picker.primary.direction-top .ax-picker-arrow:after{content:' ';position:absolute;width:0;height:0;left:-10px;top:-18px;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:20px solid #fff}.ax5-ui-picker.primary.direction-right .ax-picker-arrow{position:absolute;width:0;height:0;right:0px;top:50%}.ax5-ui-picker.primary.direction-right .ax-picker-arrow:before{content:' ';position:absolute;width:0;height:0;right:-20px;top:-10px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:20px solid #337ab7}.ax5-ui-picker.primary.direction-right .ax-picker-arrow:after{content:' ';position:absolute;width:0;height:0;right:-18px;top:-10px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:20px solid #fff}.ax5-ui-picker.primary.direction-bottom .ax-picker-arrow{position:absolute;width:0;height:0;left:50%;bottom:0px}.ax5-ui-picker.primary.direction-bottom .ax-picker-arrow:before{content:' ';position:absolute;width:0;height:0;left:-10px;bottom:-20px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:20px solid #337ab7}.ax5-ui-picker.primary.direction-bottom .ax-picker-arrow:after{content:' ';position:absolute;width:0;height:0;left:-10px;bottom:-18px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:20px solid #fff}.ax5-ui-picker.primary.direction-left .ax-picker-arrow{position:absolute;width:0;height:0;left:0px;top:50%}.ax5-ui-picker.primary.direction-left .ax-picker-arrow:before{content:' ';position:absolute;width:0;height:0;left:-20px;top:-10px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:20px solid #337ab7}.ax5-ui-picker.primary.direction-left .ax-picker-arrow:after{content:' ';position:absolute;width:0;height:0;left:-18px;top:-10px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:20px solid #fff}.ax5-ui-picker.success{background-color:#fff;background-image:-webkit-linear-gradient(bottom, #fff);background-image:linear-gradient(to top,#fff);border:1px solid;border-color:#d6e9c6;border-radius:5px;box-shadow:0px 0px 3px 0px rgba(0,0,0,0.175)}.ax5-ui-picker.success .ax-picker-heading{font-weight:600;padding:10px 15px;border-bottom:1px solid transparent;border-top-right-radius:4px;border-top-left-radius:4px;color:#3c763d;background-color:#dff0d8;background-image:-webkit-linear-gradient(bottom, #dff0d8);background-image:linear-gradient(to top,#dff0d8)}.ax5-ui-picker.success .ax-picker-heading .badge{font-size:0.8em;color:#dff0d8;background-color:#3c763d;background-image:-webkit-linear-gradient(bottom, #3c763d);background-image:linear-gradient(to top,#3c763d)}.ax5-ui-picker.success .ax-picker-body{padding:5px;text-align:center}.ax5-ui-picker.success .ax-picker-body .ax-picker-content{min-width:50px}.ax5-ui-picker.success .ax-picker-body .ax-picker-content .ax-picker-content-box{border:0px solid;border-color:none;border-radius:0px;padding:0px;overflow:hidden}.ax5-ui-picker.success .ax-picker-body .ax-picker-buttons{padding:10px 0px 5px 0px}.ax5-ui-picker.success .ax-picker-body .ax-picker-buttons button:not(:last-child){margin-right:3px}.ax5-ui-picker.success.direction-top .ax-picker-arrow{position:absolute;width:0;height:0;left:50%;top:0px}.ax5-ui-picker.success.direction-top .ax-picker-arrow:before{content:' ';position:absolute;width:0;height:0;left:-10px;top:-20px;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:20px solid #d6e9c6}.ax5-ui-picker.success.direction-top .ax-picker-arrow:after{content:' ';position:absolute;width:0;height:0;left:-10px;top:-18px;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:20px solid #fff}.ax5-ui-picker.success.direction-right .ax-picker-arrow{position:absolute;width:0;height:0;right:0px;top:50%}.ax5-ui-picker.success.direction-right .ax-picker-arrow:before{content:' ';position:absolute;width:0;height:0;right:-20px;top:-10px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:20px solid #d6e9c6}.ax5-ui-picker.success.direction-right .ax-picker-arrow:after{content:' ';position:absolute;width:0;height:0;right:-18px;top:-10px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:20px solid #fff}.ax5-ui-picker.success.direction-bottom .ax-picker-arrow{position:absolute;width:0;height:0;left:50%;bottom:0px}.ax5-ui-picker.success.direction-bottom .ax-picker-arrow:before{content:' ';position:absolute;width:0;height:0;left:-10px;bottom:-20px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:20px solid #d6e9c6}.ax5-ui-picker.success.direction-bottom .ax-picker-arrow:after{content:' ';position:absolute;width:0;height:0;left:-10px;bottom:-18px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:20px solid #fff}.ax5-ui-picker.success.direction-left .ax-picker-arrow{position:absolute;width:0;height:0;left:0px;top:50%}.ax5-ui-picker.success.direction-left .ax-picker-arrow:before{content:' ';position:absolute;width:0;height:0;left:-20px;top:-10px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:20px solid #d6e9c6}.ax5-ui-picker.success.direction-left .ax-picker-arrow:after{content:' ';position:absolute;width:0;height:0;left:-18px;top:-10px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:20px solid #fff}.ax5-ui-picker.info{background-color:#fff;background-image:-webkit-linear-gradient(bottom, #fff);background-image:linear-gradient(to top,#fff);border:1px solid;border-color:#bce8f1;border-radius:5px;box-shadow:0px 0px 3px 0px rgba(0,0,0,0.175)}.ax5-ui-picker.info .ax-picker-heading{font-weight:600;padding:10px 15px;border-bottom:1px solid transparent;border-top-right-radius:4px;border-top-left-radius:4px;color:#31708f;background-color:#d9edf7;background-image:-webkit-linear-gradient(bottom, #d9edf7);background-image:linear-gradient(to top,#d9edf7)}.ax5-ui-picker.info .ax-picker-heading .badge{font-size:0.8em;color:#d9edf7;background-color:#31708f;background-image:-webkit-linear-gradient(bottom, #31708f);background-image:linear-gradient(to top,#31708f)}.ax5-ui-picker.info .ax-picker-body{padding:5px;text-align:center}.ax5-ui-picker.info .ax-picker-body .ax-picker-content{min-width:50px}.ax5-ui-picker.info .ax-picker-body .ax-picker-content .ax-picker-content-box{border:0px solid;border-color:none;border-radius:0px;padding:0px;overflow:hidden}.ax5-ui-picker.info .ax-picker-body .ax-picker-buttons{padding:10px 0px 5px 0px}.ax5-ui-picker.info .ax-picker-body .ax-picker-buttons button:not(:last-child){margin-right:3px}.ax5-ui-picker.info.direction-top .ax-picker-arrow{position:absolute;width:0;height:0;left:50%;top:0px}.ax5-ui-picker.info.direction-top .ax-picker-arrow:before{content:' ';position:absolute;width:0;height:0;left:-10px;top:-20px;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:20px solid #bce8f1}.ax5-ui-picker.info.direction-top .ax-picker-arrow:after{content:' ';position:absolute;width:0;height:0;left:-10px;top:-18px;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:20px solid #fff}.ax5-ui-picker.info.direction-right .ax-picker-arrow{position:absolute;width:0;height:0;right:0px;top:50%}.ax5-ui-picker.info.direction-right .ax-picker-arrow:before{content:' ';position:absolute;width:0;height:0;right:-20px;top:-10px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:20px solid #bce8f1}.ax5-ui-picker.info.direction-right .ax-picker-arrow:after{content:' ';position:absolute;width:0;height:0;right:-18px;top:-10px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:20px solid #fff}.ax5-ui-picker.info.direction-bottom .ax-picker-arrow{position:absolute;width:0;height:0;left:50%;bottom:0px}.ax5-ui-picker.info.direction-bottom .ax-picker-arrow:before{content:' ';position:absolute;width:0;height:0;left:-10px;bottom:-20px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:20px solid #bce8f1}.ax5-ui-picker.info.direction-bottom .ax-picker-arrow:after{content:' ';position:absolute;width:0;height:0;left:-10px;bottom:-18px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:20px solid #fff}.ax5-ui-picker.info.direction-left .ax-picker-arrow{position:absolute;width:0;height:0;left:0px;top:50%}.ax5-ui-picker.info.direction-left .ax-picker-arrow:before{content:' ';position:absolute;width:0;height:0;left:-20px;top:-10px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:20px solid #bce8f1}.ax5-ui-picker.info.direction-left .ax-picker-arrow:after{content:' ';position:absolute;width:0;height:0;left:-18px;top:-10px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:20px solid #fff}.ax5-ui-picker.warning{background-color:#fff;background-image:-webkit-linear-gradient(bottom, #fff);background-image:linear-gradient(to top,#fff);border:1px solid;border-color:#faebcc;border-radius:5px;box-shadow:0px 0px 3px 0px rgba(0,0,0,0.175)}.ax5-ui-picker.warning .ax-picker-heading{font-weight:600;padding:10px 15px;border-bottom:1px solid transparent;border-top-right-radius:4px;border-top-left-radius:4px;color:#8a6d3b;background-color:#fcf8e3;background-image:-webkit-linear-gradient(bottom, #fcf8e3);background-image:linear-gradient(to top,#fcf8e3)}.ax5-ui-picker.warning .ax-picker-heading .badge{font-size:0.8em;color:#fcf8e3;background-color:#8a6d3b;background-image:-webkit-linear-gradient(bottom, #8a6d3b);background-image:linear-gradient(to top,#8a6d3b)}.ax5-ui-picker.warning .ax-picker-body{padding:5px;text-align:center}.ax5-ui-picker.warning .ax-picker-body .ax-picker-content{min-width:50px}.ax5-ui-picker.warning .ax-picker-body .ax-picker-content .ax-picker-content-box{border:0px solid;border-color:none;border-radius:0px;padding:0px;overflow:hidden}.ax5-ui-picker.warning .ax-picker-body .ax-picker-buttons{padding:10px 0px 5px 0px}.ax5-ui-picker.warning .ax-picker-body .ax-picker-buttons button:not(:last-child){margin-right:3px}.ax5-ui-picker.warning.direction-top .ax-picker-arrow{position:absolute;width:0;height:0;left:50%;top:0px}.ax5-ui-picker.warning.direction-top .ax-picker-arrow:before{content:' ';position:absolute;width:0;height:0;left:-10px;top:-20px;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:20px solid #faebcc}.ax5-ui-picker.warning.direction-top .ax-picker-arrow:after{content:' ';position:absolute;width:0;height:0;left:-10px;top:-18px;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:20px solid #fff}.ax5-ui-picker.warning.direction-right .ax-picker-arrow{position:absolute;width:0;height:0;right:0px;top:50%}.ax5-ui-picker.warning.direction-right .ax-picker-arrow:before{content:' ';position:absolute;width:0;height:0;right:-20px;top:-10px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:20px solid #faebcc}.ax5-ui-picker.warning.direction-right .ax-picker-arrow:after{content:' ';position:absolute;width:0;height:0;right:-18px;top:-10px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:20px solid #fff}.ax5-ui-picker.warning.direction-bottom .ax-picker-arrow{position:absolute;width:0;height:0;left:50%;bottom:0px}.ax5-ui-picker.warning.direction-bottom .ax-picker-arrow:before{content:' ';position:absolute;width:0;height:0;left:-10px;bottom:-20px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:20px solid #faebcc}.ax5-ui-picker.warning.direction-bottom .ax-picker-arrow:after{content:' ';position:absolute;width:0;height:0;left:-10px;bottom:-18px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:20px solid #fff}.ax5-ui-picker.warning.direction-left .ax-picker-arrow{position:absolute;width:0;height:0;left:0px;top:50%}.ax5-ui-picker.warning.direction-left .ax-picker-arrow:before{content:' ';position:absolute;width:0;height:0;left:-20px;top:-10px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:20px solid #faebcc}.ax5-ui-picker.warning.direction-left .ax-picker-arrow:after{content:' ';position:absolute;width:0;height:0;left:-18px;top:-10px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:20px solid #fff}.ax5-ui-picker.danger{background-color:#fff;background-image:-webkit-linear-gradient(bottom, #fff);background-image:linear-gradient(to top,#fff);border:1px solid;border-color:#ebccd1;border-radius:5px;box-shadow:0px 0px 3px 0px rgba(0,0,0,0.175)}.ax5-ui-picker.danger .ax-picker-heading{font-weight:600;padding:10px 15px;border-bottom:1px solid transparent;border-top-right-radius:4px;border-top-left-radius:4px;color:#a94442;background-color:#f2dede;background-image:-webkit-linear-gradient(bottom, #f2dede);background-image:linear-gradient(to top,#f2dede)}.ax5-ui-picker.danger .ax-picker-heading .badge{font-size:0.8em;color:#f2dede;background-color:#a94442;background-image:-webkit-linear-gradient(bottom, #a94442);background-image:linear-gradient(to top,#a94442)}.ax5-ui-picker.danger .ax-picker-body{padding:5px;text-align:center}.ax5-ui-picker.danger .ax-picker-body .ax-picker-content{min-width:50px}.ax5-ui-picker.danger .ax-picker-body .ax-picker-content .ax-picker-content-box{border:0px solid;border-color:none;border-radius:0px;padding:0px;overflow:hidden}.ax5-ui-picker.danger .ax-picker-body .ax-picker-buttons{padding:10px 0px 5px 0px}.ax5-ui-picker.danger .ax-picker-body .ax-picker-buttons button:not(:last-child){margin-right:3px}.ax5-ui-picker.danger.direction-top .ax-picker-arrow{position:absolute;width:0;height:0;left:50%;top:0px}.ax5-ui-picker.danger.direction-top .ax-picker-arrow:before{content:' ';position:absolute;width:0;height:0;left:-10px;top:-20px;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:20px solid #ebccd1}.ax5-ui-picker.danger.direction-top .ax-picker-arrow:after{content:' ';position:absolute;width:0;height:0;left:-10px;top:-18px;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:20px solid #fff}.ax5-ui-picker.danger.direction-right .ax-picker-arrow{position:absolute;width:0;height:0;right:0px;top:50%}.ax5-ui-picker.danger.direction-right .ax-picker-arrow:before{content:' ';position:absolute;width:0;height:0;right:-20px;top:-10px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:20px solid #ebccd1}.ax5-ui-picker.danger.direction-right .ax-picker-arrow:after{content:' ';position:absolute;width:0;height:0;right:-18px;top:-10px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:20px solid #fff}.ax5-ui-picker.danger.direction-bottom .ax-picker-arrow{position:absolute;width:0;height:0;left:50%;bottom:0px}.ax5-ui-picker.danger.direction-bottom .ax-picker-arrow:before{content:' ';position:absolute;width:0;height:0;left:-10px;bottom:-20px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:20px solid #ebccd1}.ax5-ui-picker.danger.direction-bottom .ax-picker-arrow:after{content:' ';position:absolute;width:0;height:0;left:-10px;bottom:-18px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:20px solid #fff}.ax5-ui-picker.danger.direction-left .ax-picker-arrow{position:absolute;width:0;height:0;left:0px;top:50%}.ax5-ui-picker.danger.direction-left .ax-picker-arrow:before{content:' ';position:absolute;width:0;height:0;left:-20px;top:-10px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:20px solid #ebccd1}.ax5-ui-picker.danger.direction-left .ax-picker-arrow:after{content:' ';position:absolute;width:0;height:0;left:-18px;top:-10px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:20px solid #fff}.ax5-ui-picker.destroy{-webkit-animation:ax-picker-destroy .1s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;-o-animation:ax-picker-destroy .1s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;animation:ax-picker-destroy .1s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards}.ax5-ui-picker.direction-top{-webkit-transform-origin:center top;-moz-transform-origin:center top;-ms-transform-origin:center top;transform-origin:center top}.ax5-ui-picker.direction-right{-webkit-transform-origin:right center;-moz-transform-origin:right center;-ms-transform-origin:right center;transform-origin:right center}.ax5-ui-picker.direction-bottom{-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom}.ax5-ui-picker.direction-left{-webkit-transform-origin:left center;-moz-transform-origin:left center;-ms-transform-origin:left center;transform-origin:left center}.input-group[data-ax5picker] .input-group-addon{cursor:pointer}.input-group[data-ax5picker] .input-group-addon:not(:last-child){border-left:0 none;border-right:0 none}.input-group[data-ax5picker] .input-group-addon.color-preview{padding:0}.input-group[data-ax5picker] .input-group-addon [data-ax5picker-color="preview"]{display:block}.form-group[data-ax5picker] .input-group-addon{cursor:pointer}.form-group[data-ax5picker] .input-group-addon:not(:last-child){border-left:0 none;border-right:0 none}.form-group[data-ax5picker] .input-group-addon.color-preview{padding:0}.form-group[data-ax5picker] .input-group-addon [data-ax5picker-color="preview"]{display:block}
10 | 


--------------------------------------------------------------------------------
/dist/ax5picker.js:
--------------------------------------------------------------------------------
   1 | "use strict";
   2 | 
   3 | // ax5.ui.picker
   4 | (function () {
   5 | 
   6 |     var UI = ax5.ui;
   7 |     var U = ax5.util;
   8 |     var PICKER = void 0;
   9 | 
  10 |     UI.addClass({
  11 |         className: "picker"
  12 |     }, function () {
  13 |         /**
  14 |          * @class ax5picker
  15 |          * @classdesc
  16 |          * @author tom@axisj.com
  17 |          * @example
  18 |          * ```js
  19 |          * ax5.def.picker.date_leftArrow = '<i class="fa fa-chevron-left"></i>';
  20 |          * ax5.def.picker.date_yearTmpl = '%s';
  21 |          * ax5.def.picker.date_monthTmpl = '%s';
  22 |          * def.picker.date_rightArrow = '<i class="fa fa-chevron-right"></i>';
  23 |          *
  24 |          * var picker = new ax5.ui.picker({
  25 |          *     onStateChanged: function () {
  26 |          *         console.log(this);
  27 |          *     }
  28 |          * });
  29 |          *
  30 |          * picker.bind({
  31 |          *     target: $('[data-picker-date]'),
  32 |          *     direction: "auto",
  33 |          *     content: {
  34 |          *         type: 'date',
  35 |          *         formatter: {
  36 |          *             pattern: 'date'
  37 |          *         }
  38 |          *     }
  39 |          * });
  40 |          * ```
  41 |          */
  42 |         return function () {
  43 |             var self = this,
  44 |                 cfg = void 0;
  45 | 
  46 |             this.instanceId = ax5.getGuid();
  47 |             this.config = {
  48 |                 clickEventName: "click", //(('ontouchstart' in document.documentElement) ? "touchend" : "click"),
  49 |                 theme: 'default',
  50 |                 title: '',
  51 |                 lang: {
  52 |                     "ok": "ok",
  53 |                     "cancel": "cancel"
  54 |                 },
  55 |                 animateTime: 100,
  56 |                 calendar: {
  57 |                     multipleSelect: false,
  58 |                     control: {
  59 |                         left: ax5.def.picker.date_leftArrow || '&#x02190',
  60 |                         yearTmpl: ax5.def.picker.date_yearTmpl || '%s',
  61 |                         monthTmpl: ax5.def.picker.date_monthTmpl || '%s',
  62 |                         right: ax5.def.picker.date_rightArrow || '&#x02192',
  63 |                         yearFirst: true
  64 |                     }
  65 |                 },
  66 |                 palette: {}
  67 |             };
  68 |             this.queue = [];
  69 |             this.activePicker = null;
  70 |             this.activePickerQueueIndex = -1;
  71 |             this.openTimer = null;
  72 |             this.closeTimer = null;
  73 | 
  74 |             cfg = this.config;
  75 | 
  76 |             var onStateChanged = function onStateChanged(item, that) {
  77 |                 if (item && item.onStateChanged) {
  78 |                     item.onStateChanged.call(that, that);
  79 |                 } else if (this.onStateChanged) {
  80 |                     this.onStateChanged.call(that, that);
  81 |                 }
  82 |                 return true;
  83 |             };
  84 |             var bindPickerTarget = function () {
  85 | 
  86 |                 var pickerEvent = {
  87 |                     'focus': function focus(queIdx, e) {
  88 |                         this.open(queIdx);
  89 |                     },
  90 |                     'click': function click(queIdx, e) {
  91 |                         this.open(queIdx);
  92 |                     }
  93 |                 };
  94 | 
  95 |                 var pickerType = {
  96 |                     '@fn': function fn(queIdx, _input) {
  97 |                         var item = this.queue[queIdx],
  98 |                             inputLength = _input.length,
  99 |                             config = {
 100 |                             inputLength: inputLength || 1
 101 |                         };
 102 | 
 103 |                         if (inputLength > 1) {
 104 |                             config.btns = {
 105 |                                 ok: { label: cfg.lang["ok"], theme: cfg.theme }
 106 |                             };
 107 |                         }
 108 | 
 109 |                         this.queue[queIdx] = jQuery.extend(true, config, item);
 110 | 
 111 |                         config = null;
 112 |                         inputLength = null;
 113 |                     },
 114 |                     'date': function date(queIdx, _input) {
 115 |                         var item = this.queue[queIdx],
 116 |                             contentWidth = item.content ? item.content.width || 270 : 270,
 117 |                             contentMargin = item.content ? item.content.margin || 5 : 5,
 118 |                             inputLength = _input.length,
 119 |                             config = {
 120 |                             contentWidth: contentWidth * inputLength + (inputLength - 1) * contentMargin,
 121 |                             content: { width: contentWidth, margin: contentMargin },
 122 |                             inputLength: inputLength || 1
 123 |                         };
 124 | 
 125 |                         if (inputLength > 1 && !item.btns) {
 126 |                             config.btns = {
 127 |                                 ok: { label: cfg.lang["ok"], theme: cfg.theme }
 128 |                             };
 129 |                         }
 130 | 
 131 |                         this.queue[queIdx] = jQuery.extend(true, config, item);
 132 | 
 133 |                         contentWidth = null;
 134 |                         contentMargin = null;
 135 |                         config = null;
 136 |                         inputLength = null;
 137 |                     },
 138 |                     'secure-num': function secureNum(queIdx, _input) {
 139 |                         var item = this.queue[queIdx],
 140 |                             inputLength = _input.length,
 141 |                             config = {
 142 |                             inputLength: inputLength || 1
 143 |                         };
 144 | 
 145 |                         this.queue[queIdx] = jQuery.extend(true, config, item);
 146 | 
 147 |                         config = null;
 148 |                         inputLength = null;
 149 |                     },
 150 |                     'keyboard': function keyboard(queIdx, _input) {
 151 |                         var item = this.queue[queIdx],
 152 |                             inputLength = _input.length,
 153 |                             config = {
 154 |                             inputLength: inputLength || 1
 155 |                         };
 156 | 
 157 |                         this.queue[queIdx] = jQuery.extend(true, config, item);
 158 | 
 159 |                         config = null;
 160 |                         inputLength = null;
 161 |                     },
 162 |                     'numpad': function numpad(queIdx, _input) {
 163 |                         var item = this.queue[queIdx],
 164 |                             inputLength = _input.length,
 165 |                             config = {
 166 |                             inputLength: inputLength || 1
 167 |                         };
 168 | 
 169 |                         this.queue[queIdx] = jQuery.extend(true, config, item);
 170 | 
 171 |                         config = null;
 172 |                         inputLength = null;
 173 |                     },
 174 |                     'color': function color(queIdx, _input) {
 175 |                         var item = this.queue[queIdx],
 176 |                             contentWidth = item.content ? item.content.width || 270 : 270,
 177 |                             contentMargin = item.content ? item.content.margin || 5 : 5,
 178 |                             inputLength = _input.length,
 179 |                             config = {
 180 |                             contentWidth: contentWidth * inputLength + (inputLength - 1) * contentMargin,
 181 |                             content: { width: contentWidth, margin: contentMargin },
 182 |                             inputLength: inputLength || 1
 183 |                         },
 184 |                             $colorPreview = item.$target.find('[data-ax5picker-color="preview"]');
 185 | 
 186 |                         if ($colorPreview.get(0)) {
 187 |                             $colorPreview.css({ "background-color": "#" + U.color(_input.val() || "#000000").getHexValue() });
 188 |                             // 컬러 피커인 경우 input의 값이 변경되면 preview를 수정
 189 |                             _input.on("change", function () {
 190 |                                 $colorPreview.css({ "background-color": "#" + U.color(this.value || "#000000").getHexValue() });
 191 |                             });
 192 |                         }
 193 | 
 194 |                         if (inputLength > 1 && !item.btns) {
 195 |                             config.btns = {
 196 |                                 ok: { label: cfg.lang["ok"], theme: cfg.theme }
 197 |                             };
 198 |                         }
 199 | 
 200 |                         this.queue[queIdx] = jQuery.extend(true, config, item);
 201 | 
 202 |                         contentWidth = null;
 203 |                         contentMargin = null;
 204 |                         config = null;
 205 |                         inputLength = null;
 206 |                     }
 207 |                 };
 208 | 
 209 |                 return function (queIdx) {
 210 |                     var item = this.queue[queIdx],
 211 |                         input = void 0;
 212 | 
 213 |                     if (!item.content) {
 214 |                         console.log(ax5.info.getError("ax5picker", "501", "bind"));
 215 |                         return this;
 216 |                     }
 217 | 
 218 |                     input = item.$target.get(0).tagName.toUpperCase() == "INPUT" ? item.$target : item.$target.find('input[type]');
 219 | 
 220 |                     // 함수타입
 221 |                     if (U.isFunction(item.content)) {
 222 |                         pickerType["@fn"].call(this, queIdx, input);
 223 |                     } else {
 224 |                         for (var key in pickerType) {
 225 |                             if (item.content.type == key) {
 226 |                                 pickerType[key].call(this, queIdx, input);
 227 |                                 break;
 228 |                             }
 229 |                         }
 230 |                     }
 231 | 
 232 |                     input.unbind('focus.ax5picker').unbind('click.ax5picker').bind('focus.ax5picker', pickerEvent.focus.bind(this, queIdx)).bind('click.ax5picker', pickerEvent.click.bind(this, queIdx));
 233 | 
 234 |                     item.$target.find('.input-group-addon').unbind('click.ax5picker').bind('click.ax5picker', pickerEvent.click.bind(this, queIdx));
 235 | 
 236 |                     if (item.content.formatter && ax5.ui.formatter) {
 237 |                         input.ax5formatter(item.content.formatter);
 238 |                     }
 239 | 
 240 |                     input = null;
 241 |                     item = null;
 242 |                     queIdx = null;
 243 |                     return this;
 244 |                 };
 245 |             }();
 246 |             var alignPicker = function alignPicker(append) {
 247 |                 if (!this.activePicker) return this;
 248 | 
 249 |                 var _alignPicker = function _alignPicker(item) {
 250 |                     var $window = jQuery(window),
 251 |                         $body = jQuery(document.body);
 252 |                     var pos = {},
 253 |                         positionMargin = 12,
 254 |                         dim = {},
 255 |                         pickerDim = {},
 256 |                         pickerDirection;
 257 | 
 258 |                     pos = item.$target.offset();
 259 |                     dim = {
 260 |                         width: item.$target.outerWidth(),
 261 |                         height: item.$target.outerHeight()
 262 |                     };
 263 |                     pickerDim = {
 264 |                         winWidth: Math.max($window.width(), $body.width()),
 265 |                         winHeight: Math.max($window.height(), $body.height()),
 266 |                         width: this.activePicker.outerWidth(),
 267 |                         height: this.activePicker.outerHeight()
 268 |                     };
 269 | 
 270 |                     // picker css(width, left, top) & direction 결정
 271 | 
 272 |                     if (!item.direction || item.direction === "" || item.direction === "auto") {
 273 |                         // set direction
 274 |                         pickerDirection = "top";
 275 |                         if (pos.top - pickerDim.height - positionMargin < 0) {
 276 |                             pickerDirection = "top";
 277 |                         } else if (pos.top + dim.height + pickerDim.height + positionMargin > pickerDim.winHeight) {
 278 |                             pickerDirection = "bottom";
 279 |                         }
 280 |                     } else {
 281 |                         pickerDirection = item.direction;
 282 |                     }
 283 | 
 284 |                     if (append) {
 285 |                         this.activePicker.addClass("direction-" + pickerDirection);
 286 |                     }
 287 | 
 288 |                     var positionCSS = function () {
 289 |                         var css = { left: 0, top: 0 };
 290 |                         switch (pickerDirection) {
 291 |                             case "top":
 292 |                                 css.left = pos.left + dim.width / 2 - pickerDim.width / 2;
 293 |                                 css.top = pos.top + dim.height + positionMargin;
 294 |                                 break;
 295 |                             case "bottom":
 296 |                                 css.left = pos.left + dim.width / 2 - pickerDim.width / 2;
 297 |                                 css.top = pos.top - pickerDim.height - positionMargin;
 298 |                                 break;
 299 |                             case "left":
 300 |                                 css.left = pos.left + dim.width + positionMargin;
 301 |                                 css.top = pos.top - pickerDim.height / 2 + dim.height / 2;
 302 |                                 break;
 303 |                             case "right":
 304 |                                 css.left = pos.left - pickerDim.width - positionMargin;
 305 |                                 css.top = pos.top - pickerDim.height / 2 + dim.height / 2;
 306 |                                 break;
 307 |                         }
 308 |                         return css;
 309 |                     }();
 310 | 
 311 |                     (function () {
 312 |                         if (pickerDirection == "top" || pickerDirection == "bottom") {
 313 |                             if (positionCSS.left < 0) {
 314 |                                 positionCSS.left = positionMargin;
 315 |                                 this.activePickerArrow.css({ left: pos.left + dim.width / 2 - positionCSS.left });
 316 |                             } else if (positionCSS.left + pickerDim.width > pickerDim.winWidth) {
 317 |                                 positionCSS.left = pickerDim.winWidth - pickerDim.width - positionMargin;
 318 |                                 this.activePickerArrow.css({ left: pos.left + dim.width / 2 - positionCSS.left });
 319 |                             }
 320 |                         }
 321 |                     }).call(this);
 322 | 
 323 |                     this.activePicker.css(positionCSS);
 324 |                 };
 325 |                 var item = this.queue[this.activePickerQueueIndex];
 326 | 
 327 |                 if (append) {
 328 |                     this.activePicker.css({ top: -999 });
 329 |                     jQuery(document.body).append(this.activePicker);
 330 |                 }
 331 | 
 332 |                 setTimeout(function () {
 333 |                     _alignPicker.call(this, item);
 334 |                 }.bind(this));
 335 |             };
 336 |             var onBodyClick = function onBodyClick(e, target) {
 337 |                 if (!this.activePicker) return this;
 338 | 
 339 |                 var item = this.queue[this.activePickerQueueIndex];
 340 | 
 341 |                 target = U.findParentNode(e.target, function (target) {
 342 |                     if (target.getAttribute("data-picker-els")) {
 343 |                         return true;
 344 |                     } else if (item.$target.get(0) == target) {
 345 |                         return true;
 346 |                     }
 347 |                 });
 348 |                 if (!target) {
 349 |                     this.close();
 350 |                     return this;
 351 |                 }
 352 |                 //console.log("i'm picker");
 353 |                 return this;
 354 |             };
 355 |             var onBtnClick = function onBtnClick(e, target) {
 356 |                 // console.log('btn click');
 357 |                 if (e.srcElement) e.target = e.srcElement;
 358 | 
 359 |                 target = U.findParentNode(e.target, function (target) {
 360 |                     if (target.getAttribute("data-picker-btn")) {
 361 |                         return true;
 362 |                     }
 363 |                 });
 364 | 
 365 |                 if (target) {
 366 |                     var item = this.queue[this.activePickerQueueIndex],
 367 |                         k = target.getAttribute("data-picker-btn");
 368 | 
 369 |                     if (item.btns && item.btns[k].onClick) {
 370 |                         var that = {
 371 |                             key: k,
 372 |                             value: item.btns[k],
 373 |                             self: this,
 374 |                             item: item
 375 |                         };
 376 |                         item.btns[k].onClick.call(that, k);
 377 |                     } else {
 378 |                         this.close();
 379 |                     }
 380 |                 }
 381 |             };
 382 |             var onBodyKeyup = function onBodyKeyup(e) {
 383 |                 if (e.keyCode == ax5.info.eventKeys.ESC) {
 384 |                     this.close();
 385 |                 }
 386 |             };
 387 |             var getQueIdx = function getQueIdx(boundID) {
 388 |                 if (!U.isString(boundID)) {
 389 |                     boundID = jQuery(boundID).data("data-axpicker-id");
 390 |                 }
 391 |                 if (!U.isString(boundID)) {
 392 |                     console.log(ax5.info.getError("ax5picker", "402", "getQueIdx"));
 393 |                     return;
 394 |                 }
 395 |                 return U.search(this.queue, function () {
 396 |                     return this.id == boundID;
 397 |                 });
 398 |             };
 399 |             /// private end
 400 | 
 401 |             /**
 402 |              * Preferences of picker UI
 403 |              * @method ax5picker.setConfig
 404 |              * @param {Object} config - 클래스 속성값
 405 |              * @returns {ax5picker}
 406 |              * @example
 407 |              * ```
 408 |              * ```
 409 |              */
 410 |             this.init = function () {
 411 |                 this.onStateChanged = cfg.onStateChanged;
 412 |             };
 413 | 
 414 |             /**
 415 |              * bind picker UI
 416 |              * @method ax5picker.bind
 417 |              * @param {Object} item
 418 |              * @param {Element} item.target
 419 |              * @param {String} item.direction - top|left|right|bottom|auto
 420 |              * @param {Number} item.contentWidth
 421 |              * @param {Boolean} item.disableChangeTrigger
 422 |              * @param {Function} item.onStateChanged
 423 |              * @param {Object} item.btns
 424 |              * @param {Object} item.content
 425 |              * @param {Number} item.content.width
 426 |              * @param {Number} item.content.margin
 427 |              * @param {String} item.content.type
 428 |              * @param {Object} item.content.config - binded UI config
 429 |              * @param {Object} item.content.formatter
 430 |              * @param {String} item.content.formatter.pattern
 431 |              * @returns {ax5picker}
 432 |              * @example
 433 |              * ```js
 434 |              * var picker = new ax5.ui.picker();
 435 |              * $(document.body).ready(function () {
 436 |              *   picker.bind({
 437 |              *       target: $('[data-ax5picker="basic"]'),
 438 |              *       direction: "top",
 439 |              *       content: {
 440 |              *           width: 270,
 441 |              *           margin: 10,
 442 |              *           type: 'date',
 443 |              *           config: {
 444 |              *               control: {
 445 |              *                   left: '<i class="fa fa-chevron-left"></i>',
 446 |              *                   yearTmpl: '%s',
 447 |              *                   monthTmpl: '%s',
 448 |              *                   right: '<i class="fa fa-chevron-right"></i>'
 449 |              *               },
 450 |              *               lang: {
 451 |              *                   yearTmpl: "%s년",
 452 |              *                   months: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
 453 |              *                   dayTmpl: "%s"
 454 |              *               }
 455 |              *           },
 456 |              *           formatter: {
 457 |              *               pattern: 'date'
 458 |              *           }
 459 |              *       },
 460 |              *       onStateChanged: function () {
 461 |              *
 462 |              *       }
 463 |              *   });
 464 |              * });
 465 |              * ```
 466 |              */
 467 |             this.bind = function (item) {
 468 |                 var pickerConfig = {},
 469 |                     queIdx = void 0;
 470 | 
 471 |                 item = jQuery.extend(true, pickerConfig, cfg, item);
 472 | 
 473 |                 if (!item.target) {
 474 |                     console.log(ax5.info.getError("ax5picker", "401", "bind"));
 475 |                     return this;
 476 |                 }
 477 |                 item.$target = jQuery(item.target);
 478 | 
 479 |                 if (!item.$target.get(0)) {
 480 |                     console.log(ax5.info.getError("ax5picker", "401", "bind"));
 481 |                     return this;
 482 |                 }
 483 | 
 484 |                 if (!item.id) item.id = item.$target.data("data-axpicker-id");
 485 | 
 486 |                 if (!item.id) {
 487 |                     item.id = 'ax5-picker-' + ax5.getGuid();
 488 |                     item.$target.data("data-axpicker-id", item.id);
 489 |                 }
 490 |                 queIdx = U.search(this.queue, function () {
 491 |                     return this.id == item.id;
 492 |                 });
 493 | 
 494 |                 if (queIdx === -1) {
 495 |                     this.queue.push(item);
 496 |                     bindPickerTarget.call(this, this.queue.length - 1);
 497 |                 } else {
 498 |                     this.queue[queIdx] = jQuery.extend(true, {}, this.queue[queIdx], item);
 499 |                     bindPickerTarget.call(this, queIdx);
 500 |                 }
 501 | 
 502 |                 pickerConfig = null;
 503 |                 queIdx = null;
 504 |                 return this;
 505 |             };
 506 | 
 507 |             /**
 508 |              * @method ax5picker.setContentValue
 509 |              * @param {String} boundID
 510 |              * @param {Number} inputIndex
 511 |              * @param {String} val
 512 |              * @returns {ax5picker} this
 513 |              */
 514 |             this.setContentValue = function () {
 515 | 
 516 |                 var multipleInputProcessor = {
 517 |                     "date": function date(_item, _inputIndex, _val) {
 518 |                         var values = [],
 519 |                             diffDay,
 520 |                             prevInputValue,
 521 |                             nextInputValue;
 522 | 
 523 |                         if (_item.$target.get(0).tagName.toUpperCase() !== "INPUT") {
 524 |                             _item.$target.find('input[type]').each(function () {
 525 |                                 values.push(this.value);
 526 |                             });
 527 |                         }
 528 | 
 529 |                         if (_inputIndex == 0) {
 530 |                             if (values.length > 1 && values[1] !== "") {
 531 |                                 // 값 검증
 532 |                                 diffDay = ax5.util.dday(values[1], { today: values[0] });
 533 |                                 if (diffDay < 0) {
 534 |                                     // 다음날짜 달력을 변경합니다.
 535 |                                     nextInputValue = _val;
 536 |                                 } else {}
 537 |                             } else {
 538 |                                 nextInputValue = _val;
 539 |                             }
 540 | 
 541 |                             if (nextInputValue) {
 542 |                                 _item.pickerCalendar[1].ax5uiInstance.setSelection([nextInputValue], false).changeMode("d", nextInputValue);
 543 |                                 this.setContentValue(_item.id, 1, nextInputValue);
 544 |                             }
 545 | 
 546 |                             return _val;
 547 |                         } else if (_inputIndex == 1) {
 548 | 
 549 |                             if (values.length > 1) {
 550 |                                 // 값 검증
 551 |                                 diffDay = ax5.util.dday(values[1], { today: values[0] });
 552 |                                 if (diffDay < 0) {
 553 |                                     // 다음날짜 달력을 변경합니다.
 554 |                                     prevInputValue = values[1];
 555 |                                 }
 556 |                             }
 557 | 
 558 |                             if (prevInputValue) {
 559 |                                 _item.pickerCalendar[0].ax5uiInstance.setSelection([prevInputValue], false).changeMode("d", prevInputValue);
 560 |                                 this.setContentValue(_item.id, 0, prevInputValue);
 561 |                             }
 562 | 
 563 |                             return _val;
 564 |                         }
 565 |                     }
 566 |                 };
 567 | 
 568 |                 return function (boundID, inputIndex, val, _option) {
 569 | 
 570 |                     var queIdx = U.isNumber(boundID) ? boundID : getQueIdx.call(this, boundID),
 571 |                         item = this.queue[queIdx],
 572 |                         _input = void 0;
 573 | 
 574 |                     if (!_option) _option = {};
 575 | 
 576 |                     if (item) {
 577 | 
 578 |                         _input = item.$target.get(0).tagName.toUpperCase() == "INPUT" ? item.$target : jQuery(item.$target.find('input[type]').get(inputIndex));
 579 |                         _input.val(val);
 580 | 
 581 |                         if (!item.disableChangeTrigger) {
 582 |                             _input.trigger("change");
 583 |                         } else {
 584 |                             var $colorPreview = item.$target.find('[data-ax5picker-color="preview"]');
 585 |                             if ($colorPreview.get(0)) {
 586 |                                 $colorPreview.css({ "background-color": val });
 587 |                             }
 588 |                         }
 589 | 
 590 |                         // picker의 입력이 2개이상인 경우
 591 |                         //console.log(item.inputLength);
 592 |                         if (item.inputLength > 1) {
 593 |                             // 경우에 따라 첫번 선택에 따라 해야할 일들 처리
 594 |                             if (multipleInputProcessor[item.content.type]) {
 595 |                                 val = multipleInputProcessor[item.content.type].call(this, item, inputIndex, val);
 596 |                             }
 597 |                         }
 598 | 
 599 |                         var that = {
 600 |                             self: self,
 601 |                             state: "changeValue",
 602 |                             item: item,
 603 |                             inputIndex: inputIndex,
 604 |                             value: val,
 605 |                             values: [val]
 606 |                         };
 607 |                         if (item.$target.get(0).tagName.toUpperCase() !== "INPUT") {
 608 |                             that.values = [];
 609 |                             item.$target.find('input[type]').each(function () {
 610 |                                 that.values.push(this.value);
 611 |                             });
 612 |                         }
 613 | 
 614 |                         onStateChanged.call(this, item, that);
 615 | 
 616 |                         if (item.inputLength == 1 && !_option.doNotClose) {
 617 |                             this.close();
 618 |                         }
 619 |                     }
 620 | 
 621 |                     item = null;
 622 |                     boundID = null;
 623 |                     inputIndex = null;
 624 |                     val = null;
 625 |                     return this;
 626 |                 };
 627 |             }();
 628 | 
 629 |             /**
 630 |              * @method ax5picker.getContentValue
 631 |              * @param {String} boundID
 632 |              * @param {Number} inputIndex
 633 |              * @returns {ax5picker} this
 634 |              */
 635 |             this.getContentValue = function () {
 636 |                 return function (boundID, inputIndex) {
 637 |                     var queIdx = U.isNumber(boundID) ? boundID : getQueIdx.call(this, boundID),
 638 |                         item = this.queue[queIdx],
 639 |                         _input = void 0;
 640 | 
 641 |                     if (item) {
 642 |                         _input = item.$target.get(0).tagName.toUpperCase() == "INPUT" ? item.$target : jQuery(item.$target.find('input[type]').get(inputIndex));
 643 |                         return _input.val();
 644 |                     }
 645 | 
 646 |                     item = null;
 647 |                     boundID = null;
 648 |                     inputIndex = null;
 649 |                     return this;
 650 |                 };
 651 |             }();
 652 | 
 653 |             /**
 654 |              * @method ax5picker.open
 655 |              * @param {String} boundObjectId
 656 |              * @returns {ax5picker} this
 657 |              */
 658 |             this.open = function () {
 659 | 
 660 |                 var pickerContent = {
 661 |                     '@fn': function fn(queIdx, callback) {
 662 |                         var item = this.queue[queIdx];
 663 |                         item.content.call(item, function (html) {
 664 |                             callback(html);
 665 |                         });
 666 |                         return true;
 667 |                     },
 668 |                     'date': function date(queIdx) {
 669 |                         var item = this.queue[queIdx],
 670 |                             html = [],
 671 |                             calendarConfig = jQuery.extend({}, cfg.calendar, { displayDate: new Date() }),
 672 |                             input = item.$target.get(0).tagName.toUpperCase() == "INPUT" ? item.$target : item.$target.find('input[type]');
 673 | 
 674 |                         for (var i = 0; i < item.inputLength; i++) {
 675 |                             html.push('<div ' + 'style="width:' + U.cssNumber(item.content.width) + ';float:left;" ' + 'class="ax-picker-content-box" ' + 'data-calendar-target="' + i + '"></div>');
 676 |                             if (i < item.inputLength - 1) html.push('<div style="width:' + item.content.margin + 'px;float:left;height: 5px;"></div>');
 677 |                         }
 678 |                         html.push('<div style="clear:both;"></div>');
 679 |                         item.pickerContent.html(html.join(''));
 680 | 
 681 |                         // calendar bind
 682 |                         item.pickerCalendar = [];
 683 |                         item.pickerContent.find('[data-calendar-target]').each(function () {
 684 | 
 685 |                             // calendarConfig extend ~
 686 |                             var idx = this.getAttribute("data-calendar-target"),
 687 |                                 dValue = input.get(idx).value,
 688 |                                 d = ax5.util.date(dValue),
 689 |                                 dateConvert = {
 690 |                                 "year": function year(_d) {
 691 |                                     return ax5.util.date(_d, { "return": "yyyy" });
 692 |                                 },
 693 |                                 "month": function month(_d) {
 694 |                                     return ax5.util.date(_d, { "return": "yyyy-MM" });
 695 |                                 },
 696 |                                 "day": function day(_d) {
 697 |                                     return _d;
 698 |                                 }
 699 |                             };
 700 | 
 701 |                             calendarConfig.displayDate = d;
 702 | 
 703 |                             if (dValue) calendarConfig.selection = [d];
 704 | 
 705 |                             calendarConfig = jQuery.extend(true, calendarConfig, item.content.config || {});
 706 |                             calendarConfig.target = this;
 707 |                             calendarConfig.onClick = function () {
 708 |                                 self.setContentValue(item.id, idx, dateConvert[calendarConfig.selectMode || "day"](this.date));
 709 |                             };
 710 | 
 711 |                             item.pickerCalendar.push({
 712 |                                 itemId: item.id,
 713 |                                 inputIndex: idx,
 714 |                                 ax5uiInstance: new ax5.ui.calendar(calendarConfig)
 715 |                             });
 716 |                         });
 717 |                     },
 718 |                     'secure-num': function secureNum(queIdx) {
 719 |                         var item = this.queue[queIdx],
 720 |                             html = [];
 721 |                         for (var i = 0; i < item.inputLength; i++) {
 722 |                             html.push('<div ' + 'style="width:' + U.cssNumber(item.content.width) + ';float:left;" ' + 'class="ax-picker-content-box" ' + 'data-secure-num-target="' + i + '"></div>');
 723 |                             if (i < item.inputLength - 1) html.push('<div style="width:' + item.content.margin + 'px;float:left;height: 5px;"></div>');
 724 |                         }
 725 |                         html.push('<div style="clear:both;"></div>');
 726 |                         item.pickerContent.html(html.join(''));
 727 | 
 728 |                         // secure-num bind
 729 |                         item.pickerContent.find('[data-secure-num-target]').each(function () {
 730 |                             var idx = this.getAttribute("data-secure-num-target"),
 731 |                                 po = [];
 732 | 
 733 |                             var numArray = function (a) {
 734 |                                 var j, x, i;
 735 |                                 for (i = a.length; i; i -= 1) {
 736 |                                     j = Math.floor(Math.random() * i);
 737 |                                     x = a[i - 1];
 738 |                                     a[i - 1] = a[j];
 739 |                                     a[j] = x;
 740 |                                 }
 741 |                                 return a;
 742 |                             }([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
 743 | 
 744 |                             var specialArray = [{ label: "&#x02190", fn: "back" }, { label: "C", fn: "clear" }];
 745 | 
 746 |                             numArray.forEach(function (n) {
 747 |                                 po.push('<div style="float:left;' + item.content.config.btnWrapStyle + '">');
 748 |                                 po.push('<button class="btn btn-default btn-' + item.content.config.btnTheme + '" ' + 'style="' + item.content.config.btnStyle + '" data-secure-num-value="' + n + '">' + n + '</button>');
 749 |                                 po.push('</div>');
 750 |                             });
 751 |                             specialArray.forEach(function (n) {
 752 |                                 po.push('<div style="float:left;' + item.content.config.btnWrapStyle + '">');
 753 |                                 po.push('<button class="btn btn-default btn-' + item.content.config.specialBtnTheme + '" ' + 'style="' + item.content.config.btnStyle + '" data-secure-num-value="' + n.fn + '">' + n.label + '</button>');
 754 |                                 po.push('</div>');
 755 |                             });
 756 | 
 757 |                             po.push('<div style="clear:both;"></div>');
 758 | 
 759 |                             $(this).html(po.join('')).on("click", '[data-secure-num-value]', function () {
 760 |                                 var act = this.getAttribute("data-secure-num-value");
 761 |                                 var _input = item.$target.get(0).tagName.toUpperCase() == "INPUT" ? item.$target : jQuery(item.$target.find('input[type]').get(idx));
 762 |                                 var val = _input.val();
 763 | 
 764 |                                 if (act == "back") {
 765 |                                     _input.val(val.substring(0, val.length - 1));
 766 |                                 } else if (act == "clear") {
 767 |                                     _input.val('');
 768 |                                 } else {
 769 |                                     _input.val(val + act);
 770 |                                 }
 771 | 
 772 |                                 onStateChanged.call(this, item, {
 773 |                                     self: self,
 774 |                                     state: "changeValue",
 775 |                                     item: item,
 776 |                                     value: _input.val()
 777 |                                 });
 778 |                             });
 779 |                         });
 780 |                     },
 781 |                     'keyboard': function keyboard(queIdx) {
 782 |                         var item = this.queue[queIdx];
 783 |                         var html = [];
 784 |                         for (var i = 0; i < item.inputLength; i++) {
 785 |                             html.push('<div ' + 'style="width:' + U.cssNumber(item.content.width) + ';float:left;" ' + 'class="ax-picker-content-box" ' + 'data-keyboard-target="' + i + '"></div>');
 786 |                             if (i < item.inputLength - 1) html.push('<div style="width:' + item.content.margin + 'px;float:left;height: 5px;"></div>');
 787 |                         }
 788 |                         html.push('<div style="clear:both;"></div>');
 789 |                         item.pickerContent.html(html.join(''));
 790 | 
 791 |                         var keyArray = [[{ value: "`", shiftValue: "~" }, { value: "1", shiftValue: "!" }, { value: "2", shiftValue: "@" }, { value: "3", shiftValue: "#" }, { value: "4", shiftValue: "$" }, { value: "5", shiftValue: "%" }, { value: "6", shiftValue: "^" }, { value: "7", shiftValue: "&" }, { value: "8", shiftValue: "*" }, { value: "9", shiftValue: "(" }, { value: "0", shiftValue: ")" }, { value: "-", shiftValue: "_" }, { value: "=", shiftValue: "+" }, { label: "&#x02190", fn: "back" }], [{ value: "q", shiftValue: "Q" }, { value: "w", shiftValue: "W" }, { value: "e", shiftValue: "E" }, { value: "r", shiftValue: "R" }, { value: "t", shiftValue: "T" }, { value: "y", shiftValue: "Y" }, { value: "u", shiftValue: "U" }, { value: "i", shiftValue: "I" }, { value: "o", shiftValue: "O" }, { value: "p", shiftValue: "P" }, { value: "[", shiftValue: "{" }, { value: "]", shiftValue: "}" }, { value: "\\", shiftValue: "|" }], [{ label: "Clear", fn: "clear" }, { value: "a", shiftValue: "A" }, { value: "s", shiftValue: "S" }, { value: "d", shiftValue: "D" }, { value: "f", shiftValue: "F" }, { value: "g", shiftValue: "G" }, { value: "h", shiftValue: "H" }, { value: "j", shiftValue: "J" }, { value: "k", shiftValue: "K" }, { value: "l", shiftValue: "L" }, { value: ";", shiftValue: ":" }, { value: "'", shiftValue: "\"" }], [{ label: "Shift", fn: "shift" }, { value: "z", shiftValue: "Z" }, { value: "x", shiftValue: "X" }, { value: "c", shiftValue: "C" }, { value: "v", shiftValue: "V" }, { value: "b", shiftValue: "B" }, { value: "n", shiftValue: "N" }, { value: "m", shiftValue: "M" }, { value: ",", shiftValue: "<" }, { value: ".", shiftValue: ">" }, { value: "/", shiftValue: "?" }, { label: "Close", fn: "close" }]];
 792 |                         var specialArray = [{ label: "&#x02190", fn: "back" }, { label: "C", fn: "clear" }];
 793 | 
 794 |                         var getKeyBoard = function getKeyBoard(isShiftKey) {
 795 |                             var po = [];
 796 |                             keyArray.forEach(function (row) {
 797 |                                 po.push('<div style="display: table;margin:0 auto;">');
 798 |                                 row.forEach(function (n) {
 799 | 
 800 |                                     var keyValue, keyLabel, btnWrapStyle, btnTheme, btnStyle;
 801 |                                     if (n.fn) {
 802 |                                         keyValue = n.fn;
 803 |                                         keyLabel = n.label;
 804 |                                         btnWrapStyle = item.content.config.specialBtnWrapStyle;
 805 |                                         btnTheme = item.content.config.specialBtnTheme;
 806 |                                         btnStyle = item.content.config.specialBtnStyle;
 807 |                                     } else {
 808 |                                         keyLabel = keyValue = isShiftKey ? n.shiftValue : n.value;
 809 |                                         btnWrapStyle = item.content.config.btnWrapStyle;
 810 |                                         btnTheme = item.content.config.btnTheme;
 811 |                                         btnStyle = item.content.config.btnStyle;
 812 |                                     }
 813 | 
 814 |                                     po.push('<div style="display: table-cell;' + btnWrapStyle + '">');
 815 |                                     po.push('<button class="btn btn-default btn-' + btnTheme + '" ' + 'style="' + btnStyle + '" data-keyboard-value="' + keyValue + '">' + keyLabel + '</button>');
 816 |                                     po.push('</div>');
 817 |                                 });
 818 |                                 po.push('</div>');
 819 |                             });
 820 |                             return po.join('');
 821 |                         };
 822 | 
 823 |                         // secure-num bind
 824 |                         item.pickerContent.find('[data-keyboard-target]').each(function () {
 825 |                             var idx = this.getAttribute("data-keyboard-target"),
 826 |                                 $this = $(this),
 827 |                                 isShiftKey = false,
 828 |                                 toggleShift = function toggleShift() {
 829 |                                 isShiftKey = !isShiftKey;
 830 |                                 $this.html(getKeyBoard(isShiftKey));
 831 |                             };
 832 | 
 833 |                             $this.html(getKeyBoard(isShiftKey)).on("mousedown", '[data-keyboard-value]', function () {
 834 |                                 var act = this.getAttribute("data-keyboard-value"),
 835 |                                     _input = item.$target.get(0).tagName.toUpperCase() == "INPUT" ? item.$target : jQuery(item.$target.find('input[type]').get(idx)),
 836 |                                     val = _input.val();
 837 | 
 838 |                                 switch (act) {
 839 |                                     case "back":
 840 |                                         _input.val(val.substring(0, val.length - 1));
 841 |                                         break;
 842 |                                     case "clear":
 843 |                                         _input.val('');
 844 |                                         break;
 845 |                                     case "shift":
 846 |                                         toggleShift();
 847 |                                         return false;
 848 |                                         break;
 849 |                                     case "close":
 850 |                                         self.close();
 851 |                                         return false;
 852 |                                         break;
 853 |                                     default:
 854 |                                         _input.val(val + act);
 855 |                                 }
 856 | 
 857 |                                 onStateChanged.call(this, item, {
 858 |                                     self: self,
 859 |                                     state: "changeValue",
 860 |                                     item: item,
 861 |                                     value: _input.val()
 862 |                                 });
 863 |                             });
 864 |                         });
 865 |                     },
 866 |                     'numpad': function numpad(queIdx) {
 867 |                         var item = this.queue[queIdx],
 868 |                             html = [];
 869 |                         for (var i = 0; i < item.inputLength; i++) {
 870 |                             html.push('<div ' + 'style="width:' + U.cssNumber(item.content.width) + ';float:left;" ' + 'class="ax-picker-content-box" ' + 'data-numpad-target="' + i + '"></div>');
 871 |                             if (i < item.inputLength - 1) html.push('<div style="width:' + item.content.margin + 'px;float:left;height: 5px;"></div>');
 872 |                         }
 873 |                         html.push('<div style="clear:both;"></div>');
 874 |                         item.pickerContent.html(html.join(''));
 875 | 
 876 |                         // secure-num bind
 877 |                         item.pickerContent.find('[data-numpad-target]').each(function () {
 878 |                             var idx = this.getAttribute("data-numpad-target"),
 879 |                                 po = [],
 880 |                                 keyArray = item.content.config.keyArray || [{ value: "7" }, { value: "8" }, { value: "9" }, { label: "BS", fn: "back" }, { value: "4" }, { value: "5" }, { value: "6" }, { label: "CLS", fn: "clear" }, { value: "1" }, { value: "2" }, { value: "3" }, { value: "" }, { value: "." }, { value: "0" }, { value: "" }, { label: "OK", fn: "enter" }];
 881 | 
 882 |                             keyArray.forEach(function (n) {
 883 |                                 var keyValue = void 0,
 884 |                                     keyLabel = void 0,
 885 |                                     btnWrapStyle = void 0,
 886 |                                     btnTheme = void 0,
 887 |                                     btnStyle = void 0;
 888 | 
 889 |                                 if (n.fn) {
 890 |                                     keyValue = n.fn;
 891 |                                     keyLabel = n.label;
 892 |                                     btnTheme = item.content.config.specialBtnTheme;
 893 |                                     btnWrapStyle = item.content.config.specialBtnWrapStyle;
 894 |                                     btnStyle = item.content.config.specialBtnStyle;
 895 |                                 } else {
 896 |                                     keyLabel = keyValue = n.value;
 897 |                                     btnTheme = keyValue ? item.content.config.btnTheme : "";
 898 |                                     btnWrapStyle = item.content.config.btnWrapStyle;
 899 |                                     btnStyle = item.content.config.btnStyle;
 900 |                                 }
 901 | 
 902 |                                 po.push('<div style="float:left;' + btnWrapStyle + '">');
 903 |                                 po.push('<button class="btn btn-default btn-' + btnTheme + '" ' + 'style="' + btnStyle + '" data-numpad-value="' + keyValue + '">' + (keyLabel || "&nbsp;") + '</button>');
 904 |                                 po.push('</div>');
 905 |                             });
 906 | 
 907 |                             po.push('<div style="clear:both;"></div>');
 908 | 
 909 |                             $(this).html(po.join('')).on("mousedown", '[data-numpad-value]', function () {
 910 |                                 var act = this.getAttribute("data-numpad-value"),
 911 |                                     _input = item.$target.get(0).tagName.toUpperCase() == "INPUT" ? item.$target : jQuery(item.$target.find('input[type]').get(idx)),
 912 |                                     val = _input.val(),
 913 |                                     state = "";
 914 | 
 915 |                                 switch (act) {
 916 |                                     case "back":
 917 |                                         state = "changeValue";
 918 |                                         _input.val(val.substring(0, val.length - 1));
 919 |                                         break;
 920 |                                     case "clear":
 921 |                                         state = "changeValue";
 922 |                                         _input.val('');
 923 |                                         break;
 924 |                                     case "enter":
 925 |                                         self.close(item, "enter");
 926 |                                         return false;
 927 |                                         break;
 928 |                                     case "close":
 929 |                                         self.close();
 930 |                                         return false;
 931 |                                         break;
 932 |                                     default:
 933 |                                         state = "changeValue";
 934 |                                         _input.val(val + act);
 935 |                                 }
 936 | 
 937 |                                 onStateChanged.call(this, item, {
 938 |                                     self: self,
 939 |                                     state: state,
 940 |                                     item: item,
 941 |                                     value: _input.val()
 942 |                                 });
 943 |                             });
 944 |                         });
 945 |                     },
 946 |                     'color': function color(queIdx) {
 947 |                         var item = this.queue[queIdx],
 948 |                             html = [],
 949 |                             paletteConfig = jQuery.extend({}, cfg.palette),
 950 |                             input = item.$target.get(0).tagName.toUpperCase() == "INPUT" ? item.$target : item.$target.find('input[type]');
 951 | 
 952 |                         for (var i = 0; i < item.inputLength; i++) {
 953 |                             html.push('<div ' + 'style="padding: 5px;width:' + U.cssNumber(item.content.width) + ';float:left;" ' + 'class="ax-picker-content-box" ' + 'data-palette-target="' + i + '" data-ax5palette="ax5picker-' + item.id + '"></div>');
 954 |                             if (i < item.inputLength - 1) html.push('<div style="width:' + item.content.margin + 'px;float:left;height: 5px;"></div>');
 955 |                         }
 956 |                         html.push('<div style="clear:both;"></div>');
 957 |                         item.pickerContent.html(html.join(''));
 958 | 
 959 |                         // calendar bind
 960 |                         item.pickerPalette = [];
 961 | 
 962 |                         item.pickerContent.find('[data-palette-target]').each(function () {
 963 |                             // calendarConfig extend ~
 964 |                             var idx = this.getAttribute("data-palette-target"),
 965 |                                 dColor = input.get(idx).value;
 966 | 
 967 |                             paletteConfig.selectedColor = dColor;
 968 |                             paletteConfig = jQuery.extend(true, paletteConfig, item.content.config || {});
 969 |                             paletteConfig.target = this;
 970 |                             paletteConfig.onClick = function (color) {
 971 |                                 self.setContentValue(item.id, idx, color);
 972 |                             };
 973 |                             paletteConfig.onUpdateColor = function (color) {
 974 |                                 self.setContentValue(item.id, idx, color, { doNotClose: true });
 975 |                             };
 976 | 
 977 |                             item.pickerPalette.push({
 978 |                                 itemId: item.id,
 979 |                                 inputIndex: idx,
 980 |                                 ax5uiInstance: new ax5.ui.palette(paletteConfig)
 981 |                             });
 982 |                         });
 983 |                     }
 984 |                 };
 985 | 
 986 |                 return function (boundID, tryCount) {
 987 |                     var queIdx = U.isNumber(boundID) ? boundID : getQueIdx.call(this, boundID),
 988 |                         item = this.queue[queIdx];
 989 | 
 990 |                     var disabled = item.$target.get(0).getAttribute("disabled");
 991 |                     if (disabled && disabled !== "false") {
 992 |                         return false;
 993 |                     }
 994 | 
 995 |                     /**
 996 |                      다른 피커가 있는 경우와 다른 피커를 닫고 다시 오픈 명령이 내려진 경우에 대한 예외 처리 구문
 997 |                      */
 998 |                     if (this.openTimer) clearTimeout(this.openTimer);
 999 |                     if (this.activePicker) {
1000 |                         if (this.activePickerQueueIndex == queIdx) {
1001 |                             return this;
1002 |                         }
1003 | 
1004 |                         if (tryCount > 2) return this;
1005 |                         this.close();
1006 |                         this.openTimer = setTimeout(function () {
1007 |                             this.open(queIdx, (tryCount || 0) + 1);
1008 |                         }.bind(this), cfg.animateTime);
1009 |                         return this;
1010 |                     }
1011 | 
1012 |                     this.activePicker = jQuery(PICKER.tmpl.get.call(this, "pickerTmpl", item));
1013 |                     this.activePickerArrow = this.activePicker.find(".ax-picker-arrow");
1014 |                     this.activePickerQueueIndex = queIdx;
1015 |                     item.pickerContent = this.activePicker.find('[data-picker-els="content"]');
1016 | 
1017 |                     if (U.isFunction(item.content)) {
1018 |                         // 함수타입
1019 |                         item.pickerContent.html("Loading..");
1020 |                         pickerContent["@fn"].call(this, queIdx, function (html) {
1021 |                             item.pickerContent.html(html);
1022 |                         });
1023 |                     } else {
1024 |                         if (item.content.type in pickerContent) {
1025 |                             pickerContent[item.content.type].call(this, queIdx);
1026 |                         }
1027 |                     }
1028 | 
1029 |                     // bind event picker btns
1030 |                     this.activePicker.find("[data-picker-btn]").on(cfg.clickEventName, function (e) {
1031 |                         onBtnClick.call(this, e || window.event, queIdx);
1032 |                     }.bind(this));
1033 | 
1034 |                     alignPicker.call(this, "append");
1035 | 
1036 |                     jQuery(window).bind("resize.ax5picker", function () {
1037 |                         alignPicker.call(this);
1038 |                     }.bind(this));
1039 | 
1040 |                     // bind key event
1041 |                     jQuery(window).bind("keyup.ax5picker", function (e) {
1042 |                         e = e || window.event;
1043 |                         onBodyKeyup.call(this, e);
1044 |                         U.stopEvent(e);
1045 |                     }.bind(this));
1046 | 
1047 |                     jQuery(window).bind("click.ax5picker", function (e) {
1048 |                         e = e || window.event;
1049 |                         onBodyClick.call(this, e);
1050 |                         U.stopEvent(e);
1051 |                     }.bind(this));
1052 | 
1053 |                     onStateChanged.call(this, item, {
1054 |                         self: this,
1055 |                         state: "open",
1056 |                         item: item
1057 |                     });
1058 | 
1059 |                     return this;
1060 |                 };
1061 |             }();
1062 | 
1063 |             /**
1064 |              * @method ax5picker.close
1065 |              * @returns {ax5picker} this
1066 |              */
1067 |             this.close = function (item, state) {
1068 |                 if (this.closeTimer) clearTimeout(this.closeTimer);
1069 |                 if (!this.activePicker) return this;
1070 | 
1071 |                 item = this.queue[this.activePickerQueueIndex];
1072 | 
1073 |                 this.activePicker.addClass("destroy");
1074 |                 jQuery(window).unbind("resize.ax5picker");
1075 |                 jQuery(window).unbind("click.ax5picker");
1076 |                 jQuery(window).unbind("keyup.ax5picker");
1077 | 
1078 |                 this.closeTimer = setTimeout(function () {
1079 |                     if (this.activePicker) this.activePicker.remove();
1080 |                     this.activePicker = null;
1081 |                     this.activePickerQueueIndex = -1;
1082 | 
1083 |                     onStateChanged.call(this, item, {
1084 |                         self: this,
1085 |                         state: state || "close"
1086 |                     });
1087 |                 }.bind(this), cfg.animateTime);
1088 | 
1089 |                 return this;
1090 |             };
1091 | 
1092 |             // 클래스 생성자
1093 |             this.main = function () {
1094 |                 if (arguments && U.isObject(arguments[0])) {
1095 |                     this.setConfig(arguments[0]);
1096 |                 }
1097 |             }.apply(this, arguments);
1098 |         };
1099 |     }());
1100 | 
1101 |     PICKER = ax5.ui.picker;
1102 | })();
1103 | 
1104 | // ax5.ui.picker.tmpl
1105 | (function () {
1106 | 
1107 |     var PICKER = ax5.ui.picker;
1108 |     var U = ax5.util;
1109 | 
1110 |     var pickerTmpl = function pickerTmpl() {
1111 |         return "\n<div class=\"ax5-ui-picker {{theme}}\" id=\"{{id}}\" data-picker-els=\"root\" {{#zIndex}}style=\"z-index:{{zIndex}};\"{{/zIndex}}>\n    {{#title}}\n        <div class=\"ax-picker-heading\">{{title}}</div>\n    {{/title}}\n    <div class=\"ax-picker-body\">\n        <div class=\"ax-picker-content\" data-picker-els=\"content\" style=\"width:{{contentWidth}}px;\"></div>\n        {{#btns}}\n            <div class=\"ax-picker-buttons\">\n            {{#btns}}\n                {{#@each}}\n                <button data-picker-btn=\"{{@key}}\" class=\"btn btn-default {{@value.theme}}\">{{@value.label}}</button>\n                {{/@each}}\n            {{/btns}}\n            </div>\n        {{/btns}}\n    </div>\n    <div class=\"ax-picker-arrow\"></div>\n</div>\n";
1112 |     };
1113 | 
1114 |     PICKER.tmpl = {
1115 |         "pickerTmpl": pickerTmpl,
1116 | 
1117 |         get: function get(tmplName, data, columnKeys) {
1118 |             return ax5.mustache.render(PICKER.tmpl[tmplName].call(this, columnKeys), data);
1119 |         }
1120 |     };
1121 | })();
1122 | /**
1123 |  * ax5.ui.picker_instance
1124 |  * @type {ax5picker}
1125 |  * @example
1126 |  * ```js
1127 |  * // picker 기본 속성을 변경해야 한다면
1128 |  * ax5.ui.picker_instance.setConfig({
1129 |  * });
1130 |  *
1131 |  * ```
1132 |  */
1133 | if (ax5 && ax5.ui && ax5.ui.picker) {
1134 |     ax5.ui.picker_instance = new ax5.ui.picker();
1135 | 
1136 |     jQuery.fn.ax5picker = function () {
1137 |         return function (config) {
1138 |             if (ax5.util.isString(arguments[0])) {
1139 |                 var methodName = arguments[0];
1140 | 
1141 |                 switch (methodName) {
1142 |                     case "open":
1143 |                         return ax5.ui.picker_instance.open(this);
1144 |                         break;
1145 |                     case "close":
1146 |                         return ax5.ui.picker_instance.close(this);
1147 |                         break;
1148 |                     case "setValue":
1149 |                         return ax5.ui.picker_instance.setContentValue(this, arguments[1], arguments[2]);
1150 |                         break;
1151 |                     default:
1152 |                         return this;
1153 |                 }
1154 |             } else {
1155 |                 if (typeof config == "undefined") config = {};
1156 |                 jQuery.each(this, function () {
1157 |                     var defaultConfig = {
1158 |                         target: this
1159 |                     };
1160 |                     config = jQuery.extend(true, config, defaultConfig);
1161 |                     ax5.ui.picker_instance.bind(config);
1162 |                 });
1163 |             }
1164 |             return this;
1165 |         };
1166 |     }();
1167 | }


--------------------------------------------------------------------------------
/dist/ax5picker.min.js:
--------------------------------------------------------------------------------
1 | "use strict";!function(){var t=ax5.ui,e=ax5.util,i=void 0;t.addClass({className:"picker"},function(){return function(){var t=this,n=void 0;this.instanceId=ax5.getGuid(),this.config={clickEventName:"click",theme:"default",title:"",lang:{ok:"ok",cancel:"cancel"},animateTime:100,calendar:{multipleSelect:!1,control:{left:ax5.def.picker.date_leftArrow||"&#x02190",yearTmpl:ax5.def.picker.date_yearTmpl||"%s",monthTmpl:ax5.def.picker.date_monthTmpl||"%s",right:ax5.def.picker.date_rightArrow||"&#x02192",yearFirst:!0}},palette:{}},this.queue=[],this.activePicker=null,this.activePickerQueueIndex=-1,this.openTimer=null,this.closeTimer=null,n=this.config;var a=function(t,e){return t&&t.onStateChanged?t.onStateChanged.call(e,e):this.onStateChanged&&this.onStateChanged.call(e,e),!0},l=function(){var t={focus:function(t,e){this.open(t)},click:function(t,e){this.open(t)}},i={"@fn":function(t,e){var i=this.queue[t],a=e.length,l={inputLength:a||1};a>1&&(l.btns={ok:{label:n.lang.ok,theme:n.theme}}),this.queue[t]=jQuery.extend(!0,l,i),l=null,a=null},date:function(t,e){var i=this.queue[t],a=i.content?i.content.width||270:270,l=i.content?i.content.margin||5:5,u=e.length,c={contentWidth:a*u+(u-1)*l,content:{width:a,margin:l},inputLength:u||1};u>1&&!i.btns&&(c.btns={ok:{label:n.lang.ok,theme:n.theme}}),this.queue[t]=jQuery.extend(!0,c,i),a=null,l=null,c=null,u=null},"secure-num":function(t,e){var i=this.queue[t],n=e.length,a={inputLength:n||1};this.queue[t]=jQuery.extend(!0,a,i),a=null,n=null},keyboard:function(t,e){var i=this.queue[t],n=e.length,a={inputLength:n||1};this.queue[t]=jQuery.extend(!0,a,i),a=null,n=null},numpad:function(t,e){var i=this.queue[t],n=e.length,a={inputLength:n||1};this.queue[t]=jQuery.extend(!0,a,i),a=null,n=null},color:function(t,i){var a=this.queue[t],l=a.content?a.content.width||270:270,u=a.content?a.content.margin||5:5,c=i.length,r={contentWidth:l*c+(c-1)*u,content:{width:l,margin:u},inputLength:c||1},s=a.$target.find('[data-ax5picker-color="preview"]');s.get(0)&&(s.css({"background-color":"#"+e.color(i.val()||"#000000").getHexValue()}),i.on("change",function(){s.css({"background-color":"#"+e.color(this.value||"#000000").getHexValue()})})),c>1&&!a.btns&&(r.btns={ok:{label:n.lang.ok,theme:n.theme}}),this.queue[t]=jQuery.extend(!0,r,a),l=null,u=null,r=null,c=null}};return function(n){var a=this.queue[n],l=void 0;if(!a.content)return console.log(ax5.info.getError("ax5picker","501","bind")),this;if(l="INPUT"==a.$target.get(0).tagName.toUpperCase()?a.$target:a.$target.find("input[type]"),e.isFunction(a.content))i["@fn"].call(this,n,l);else for(var u in i)if(a.content.type==u){i[u].call(this,n,l);break}return l.unbind("focus.ax5picker").unbind("click.ax5picker").bind("focus.ax5picker",t.focus.bind(this,n)).bind("click.ax5picker",t.click.bind(this,n)),a.$target.find(".input-group-addon").unbind("click.ax5picker").bind("click.ax5picker",t.click.bind(this,n)),a.content.formatter&&ax5.ui.formatter&&l.ax5formatter(a.content.formatter),l=null,a=null,n=null,this}}(),u=function(t){if(!this.activePicker)return this;var e=function(e){var i,n=jQuery(window),a=jQuery(document.body),l={},u=12,c={},r={};l=e.$target.offset(),c={width:e.$target.outerWidth(),height:e.$target.outerHeight()},r={winWidth:Math.max(n.width(),a.width()),winHeight:Math.max(n.height(),a.height()),width:this.activePicker.outerWidth(),height:this.activePicker.outerHeight()},e.direction&&""!==e.direction&&"auto"!==e.direction?i=e.direction:(i="top",l.top-r.height-u<0?i="top":l.top+c.height+r.height+u>r.winHeight&&(i="bottom")),t&&this.activePicker.addClass("direction-"+i);var s=function(){var t={left:0,top:0};switch(i){case"top":t.left=l.left+c.width/2-r.width/2,t.top=l.top+c.height+u;break;case"bottom":t.left=l.left+c.width/2-r.width/2,t.top=l.top-r.height-u;break;case"left":t.left=l.left+c.width+u,t.top=l.top-r.height/2+c.height/2;break;case"right":t.left=l.left-r.width-u,t.top=l.top-r.height/2+c.height/2}return t}();(function(){"top"!=i&&"bottom"!=i||(s.left<0?(s.left=u,this.activePickerArrow.css({left:l.left+c.width/2-s.left})):s.left+r.width>r.winWidth&&(s.left=r.winWidth-r.width-u,this.activePickerArrow.css({left:l.left+c.width/2-s.left})))}).call(this),this.activePicker.css(s)},i=this.queue[this.activePickerQueueIndex];t&&(this.activePicker.css({top:-999}),jQuery(document.body).append(this.activePicker)),setTimeout(function(){e.call(this,i)}.bind(this))},c=function(t,i){if(!this.activePicker)return this;var n=this.queue[this.activePickerQueueIndex];return i=e.findParentNode(t.target,function(t){return!!t.getAttribute("data-picker-els")||(n.$target.get(0)==t||void 0)}),i?this:(this.close(),this)},r=function(t,i){if(t.srcElement&&(t.target=t.srcElement),i=e.findParentNode(t.target,function(t){if(t.getAttribute("data-picker-btn"))return!0})){var n=this.queue[this.activePickerQueueIndex],a=i.getAttribute("data-picker-btn");if(n.btns&&n.btns[a].onClick){var l={key:a,value:n.btns[a],self:this,item:n};n.btns[a].onClick.call(l,a)}else this.close()}},s=function(t){t.keyCode==ax5.info.eventKeys.ESC&&this.close()},o=function(t){return e.isString(t)||(t=jQuery(t).data("data-axpicker-id")),e.isString(t)?e.search(this.queue,function(){return this.id==t}):void console.log(ax5.info.getError("ax5picker","402","getQueIdx"))};this.init=function(){this.onStateChanged=n.onStateChanged},this.bind=function(t){var i={},a=void 0;return t=jQuery.extend(!0,i,n,t),t.target?(t.$target=jQuery(t.target),t.$target.get(0)?(t.id||(t.id=t.$target.data("data-axpicker-id")),t.id||(t.id="ax5-picker-"+ax5.getGuid(),t.$target.data("data-axpicker-id",t.id)),a=e.search(this.queue,function(){return this.id==t.id}),a===-1?(this.queue.push(t),l.call(this,this.queue.length-1)):(this.queue[a]=jQuery.extend(!0,{},this.queue[a],t),l.call(this,a)),i=null,a=null,this):(console.log(ax5.info.getError("ax5picker","401","bind")),this)):(console.log(ax5.info.getError("ax5picker","401","bind")),this)},this.setContentValue=function(){var i={date:function(t,e,i){var n,a,l,u=[];return"INPUT"!==t.$target.get(0).tagName.toUpperCase()&&t.$target.find("input[type]").each(function(){u.push(this.value)}),0==e?(u.length>1&&""!==u[1]?(n=ax5.util.dday(u[1],{today:u[0]}),n<0&&(l=i)):l=i,l&&(t.pickerCalendar[1].ax5uiInstance.setSelection([l],!1).changeMode("d",l),this.setContentValue(t.id,1,l)),i):1==e?(u.length>1&&(n=ax5.util.dday(u[1],{today:u[0]}),n<0&&(a=u[1])),a&&(t.pickerCalendar[0].ax5uiInstance.setSelection([a],!1).changeMode("d",a),this.setContentValue(t.id,0,a)),i):void 0}};return function(n,l,u,c){var r=e.isNumber(n)?n:o.call(this,n),s=this.queue[r],h=void 0;if(c||(c={}),s){if(h="INPUT"==s.$target.get(0).tagName.toUpperCase()?s.$target:jQuery(s.$target.find("input[type]").get(l)),h.val(u),s.disableChangeTrigger){var d=s.$target.find('[data-ax5picker-color="preview"]');d.get(0)&&d.css({"background-color":u})}else h.trigger("change");s.inputLength>1&&i[s.content.type]&&(u=i[s.content.type].call(this,s,l,u));var f={self:t,state:"changeValue",item:s,inputIndex:l,value:u,values:[u]};"INPUT"!==s.$target.get(0).tagName.toUpperCase()&&(f.values=[],s.$target.find("input[type]").each(function(){f.values.push(this.value)})),a.call(this,s,f),1!=s.inputLength||c.doNotClose||this.close()}return s=null,n=null,l=null,u=null,this}}(),this.getContentValue=function(){return function(t,i){var n=e.isNumber(t)?t:o.call(this,t),a=this.queue[n],l=void 0;return a?(l="INPUT"==a.$target.get(0).tagName.toUpperCase()?a.$target:jQuery(a.$target.find("input[type]").get(i)),l.val()):(a=null,t=null,i=null,this)}}(),this.open=function(){var l={"@fn":function(t,e){var i=this.queue[t];return i.content.call(i,function(t){e(t)}),!0},date:function(i){for(var a=this.queue[i],l=[],u=jQuery.extend({},n.calendar,{displayDate:new Date}),c="INPUT"==a.$target.get(0).tagName.toUpperCase()?a.$target:a.$target.find("input[type]"),r=0;r<a.inputLength;r++)l.push('<div style="width:'+e.cssNumber(a.content.width)+';float:left;" class="ax-picker-content-box" data-calendar-target="'+r+'"></div>'),r<a.inputLength-1&&l.push('<div style="width:'+a.content.margin+'px;float:left;height: 5px;"></div>');l.push('<div style="clear:both;"></div>'),a.pickerContent.html(l.join("")),a.pickerCalendar=[],a.pickerContent.find("[data-calendar-target]").each(function(){var e=this.getAttribute("data-calendar-target"),i=c.get(e).value,n=ax5.util.date(i),l={year:function(t){return ax5.util.date(t,{"return":"yyyy"})},month:function(t){return ax5.util.date(t,{"return":"yyyy-MM"})},day:function(t){return t}};u.displayDate=n,i&&(u.selection=[n]),u=jQuery.extend(!0,u,a.content.config||{}),u.target=this,u.onClick=function(){t.setContentValue(a.id,e,l[u.selectMode||"day"](this.date))},a.pickerCalendar.push({itemId:a.id,inputIndex:e,ax5uiInstance:new ax5.ui.calendar(u)})})},"secure-num":function(i){for(var n=this.queue[i],l=[],u=0;u<n.inputLength;u++)l.push('<div style="width:'+e.cssNumber(n.content.width)+';float:left;" class="ax-picker-content-box" data-secure-num-target="'+u+'"></div>'),u<n.inputLength-1&&l.push('<div style="width:'+n.content.margin+'px;float:left;height: 5px;"></div>');l.push('<div style="clear:both;"></div>'),n.pickerContent.html(l.join("")),n.pickerContent.find("[data-secure-num-target]").each(function(){var e=this.getAttribute("data-secure-num-target"),i=[],l=function(t){var e,i,n;for(n=t.length;n;n-=1)e=Math.floor(Math.random()*n),i=t[n-1],t[n-1]=t[e],t[e]=i;return t}([0,1,2,3,4,5,6,7,8,9]),u=[{label:"&#x02190",fn:"back"},{label:"C",fn:"clear"}];l.forEach(function(t){i.push('<div style="float:left;'+n.content.config.btnWrapStyle+'">'),i.push('<button class="btn btn-default btn-'+n.content.config.btnTheme+'" style="'+n.content.config.btnStyle+'" data-secure-num-value="'+t+'">'+t+"</button>"),i.push("</div>")}),u.forEach(function(t){i.push('<div style="float:left;'+n.content.config.btnWrapStyle+'">'),i.push('<button class="btn btn-default btn-'+n.content.config.specialBtnTheme+'" style="'+n.content.config.btnStyle+'" data-secure-num-value="'+t.fn+'">'+t.label+"</button>"),i.push("</div>")}),i.push('<div style="clear:both;"></div>'),$(this).html(i.join("")).on("click","[data-secure-num-value]",function(){var i=this.getAttribute("data-secure-num-value"),l="INPUT"==n.$target.get(0).tagName.toUpperCase()?n.$target:jQuery(n.$target.find("input[type]").get(e)),u=l.val();"back"==i?l.val(u.substring(0,u.length-1)):"clear"==i?l.val(""):l.val(u+i),a.call(this,n,{self:t,state:"changeValue",item:n,value:l.val()})})})},keyboard:function(i){for(var n=this.queue[i],l=[],u=0;u<n.inputLength;u++)l.push('<div style="width:'+e.cssNumber(n.content.width)+';float:left;" class="ax-picker-content-box" data-keyboard-target="'+u+'"></div>'),u<n.inputLength-1&&l.push('<div style="width:'+n.content.margin+'px;float:left;height: 5px;"></div>');l.push('<div style="clear:both;"></div>'),n.pickerContent.html(l.join(""));var c=[[{value:"`",shiftValue:"~"},{value:"1",shiftValue:"!"},{value:"2",shiftValue:"@"},{value:"3",shiftValue:"#"},{value:"4",shiftValue:"$"},{value:"5",shiftValue:"%"},{value:"6",shiftValue:"^"},{value:"7",shiftValue:"&"},{value:"8",shiftValue:"*"},{value:"9",shiftValue:"("},{value:"0",shiftValue:")"},{value:"-",shiftValue:"_"},{value:"=",shiftValue:"+"},{label:"&#x02190",fn:"back"}],[{value:"q",shiftValue:"Q"},{value:"w",shiftValue:"W"},{value:"e",shiftValue:"E"},{value:"r",shiftValue:"R"},{value:"t",shiftValue:"T"},{value:"y",shiftValue:"Y"},{value:"u",shiftValue:"U"},{value:"i",shiftValue:"I"},{value:"o",shiftValue:"O"},{value:"p",shiftValue:"P"},{value:"[",shiftValue:"{"},{value:"]",shiftValue:"}"},{value:"\\",shiftValue:"|"}],[{label:"Clear",fn:"clear"},{value:"a",shiftValue:"A"},{value:"s",shiftValue:"S"},{value:"d",shiftValue:"D"},{value:"f",shiftValue:"F"},{value:"g",shiftValue:"G"},{value:"h",shiftValue:"H"},{value:"j",shiftValue:"J"},{value:"k",shiftValue:"K"},{value:"l",shiftValue:"L"},{value:";",shiftValue:":"},{value:"'",shiftValue:'"'}],[{label:"Shift",fn:"shift"},{value:"z",shiftValue:"Z"},{value:"x",shiftValue:"X"},{value:"c",shiftValue:"C"},{value:"v",shiftValue:"V"},{value:"b",shiftValue:"B"},{value:"n",shiftValue:"N"},{value:"m",shiftValue:"M"},{value:",",shiftValue:"<"},{value:".",shiftValue:">"},{value:"/",shiftValue:"?"},{label:"Close",fn:"close"}]],r=function(t){var e=[];return c.forEach(function(i){e.push('<div style="display: table;margin:0 auto;">'),i.forEach(function(i){var a,l,u,c,r;i.fn?(a=i.fn,l=i.label,u=n.content.config.specialBtnWrapStyle,c=n.content.config.specialBtnTheme,r=n.content.config.specialBtnStyle):(l=a=t?i.shiftValue:i.value,u=n.content.config.btnWrapStyle,c=n.content.config.btnTheme,r=n.content.config.btnStyle),e.push('<div style="display: table-cell;'+u+'">'),e.push('<button class="btn btn-default btn-'+c+'" style="'+r+'" data-keyboard-value="'+a+'">'+l+"</button>"),e.push("</div>")}),e.push("</div>")}),e.join("")};n.pickerContent.find("[data-keyboard-target]").each(function(){var e=this.getAttribute("data-keyboard-target"),i=$(this),l=!1,u=function(){l=!l,i.html(r(l))};i.html(r(l)).on("mousedown","[data-keyboard-value]",function(){var i=this.getAttribute("data-keyboard-value"),l="INPUT"==n.$target.get(0).tagName.toUpperCase()?n.$target:jQuery(n.$target.find("input[type]").get(e)),c=l.val();switch(i){case"back":l.val(c.substring(0,c.length-1));break;case"clear":l.val("");break;case"shift":return u(),!1;case"close":return t.close(),!1;default:l.val(c+i)}a.call(this,n,{self:t,state:"changeValue",item:n,value:l.val()})})})},numpad:function(i){for(var n=this.queue[i],l=[],u=0;u<n.inputLength;u++)l.push('<div style="width:'+e.cssNumber(n.content.width)+';float:left;" class="ax-picker-content-box" data-numpad-target="'+u+'"></div>'),u<n.inputLength-1&&l.push('<div style="width:'+n.content.margin+'px;float:left;height: 5px;"></div>');l.push('<div style="clear:both;"></div>'),n.pickerContent.html(l.join("")),n.pickerContent.find("[data-numpad-target]").each(function(){var e=this.getAttribute("data-numpad-target"),i=[],l=n.content.config.keyArray||[{value:"7"},{value:"8"},{value:"9"},{label:"BS",fn:"back"},{value:"4"},{value:"5"},{value:"6"},{label:"CLS",fn:"clear"},{value:"1"},{value:"2"},{value:"3"},{value:""},{value:"."},{value:"0"},{value:""},{label:"OK",fn:"enter"}];l.forEach(function(t){var e=void 0,a=void 0,l=void 0,u=void 0,c=void 0;t.fn?(e=t.fn,a=t.label,u=n.content.config.specialBtnTheme,l=n.content.config.specialBtnWrapStyle,c=n.content.config.specialBtnStyle):(a=e=t.value,u=e?n.content.config.btnTheme:"",l=n.content.config.btnWrapStyle,c=n.content.config.btnStyle),i.push('<div style="float:left;'+l+'">'),i.push('<button class="btn btn-default btn-'+u+'" style="'+c+'" data-numpad-value="'+e+'">'+(a||"&nbsp;")+"</button>"),i.push("</div>")}),i.push('<div style="clear:both;"></div>'),$(this).html(i.join("")).on("mousedown","[data-numpad-value]",function(){var i=this.getAttribute("data-numpad-value"),l="INPUT"==n.$target.get(0).tagName.toUpperCase()?n.$target:jQuery(n.$target.find("input[type]").get(e)),u=l.val(),c="";switch(i){case"back":c="changeValue",l.val(u.substring(0,u.length-1));break;case"clear":c="changeValue",l.val("");break;case"enter":return t.close(n,"enter"),!1;case"close":return t.close(),!1;default:c="changeValue",l.val(u+i)}a.call(this,n,{self:t,state:c,item:n,value:l.val()})})})},color:function(i){for(var a=this.queue[i],l=[],u=jQuery.extend({},n.palette),c="INPUT"==a.$target.get(0).tagName.toUpperCase()?a.$target:a.$target.find("input[type]"),r=0;r<a.inputLength;r++)l.push('<div style="padding: 5px;width:'+e.cssNumber(a.content.width)+';float:left;" class="ax-picker-content-box" data-palette-target="'+r+'" data-ax5palette="ax5picker-'+a.id+'"></div>'),r<a.inputLength-1&&l.push('<div style="width:'+a.content.margin+'px;float:left;height: 5px;"></div>');l.push('<div style="clear:both;"></div>'),a.pickerContent.html(l.join("")),a.pickerPalette=[],a.pickerContent.find("[data-palette-target]").each(function(){var e=this.getAttribute("data-palette-target"),i=c.get(e).value;u.selectedColor=i,u=jQuery.extend(!0,u,a.content.config||{}),u.target=this,u.onClick=function(i){t.setContentValue(a.id,e,i)},u.onUpdateColor=function(i){t.setContentValue(a.id,e,i,{doNotClose:!0})},a.pickerPalette.push({itemId:a.id,inputIndex:e,ax5uiInstance:new ax5.ui.palette(u)})})}};return function(t,h){var d=e.isNumber(t)?t:o.call(this,t),f=this.queue[d],p=f.$target.get(0).getAttribute("disabled");return(!p||"false"===p)&&(this.openTimer&&clearTimeout(this.openTimer),this.activePicker?this.activePickerQueueIndex==d?this:h>2?this:(this.close(),this.openTimer=setTimeout(function(){this.open(d,(h||0)+1)}.bind(this),n.animateTime),this):(this.activePicker=jQuery(i.tmpl.get.call(this,"pickerTmpl",f)),this.activePickerArrow=this.activePicker.find(".ax-picker-arrow"),this.activePickerQueueIndex=d,f.pickerContent=this.activePicker.find('[data-picker-els="content"]'),e.isFunction(f.content)?(f.pickerContent.html("Loading.."),l["@fn"].call(this,d,function(t){f.pickerContent.html(t)})):f.content.type in l&&l[f.content.type].call(this,d),this.activePicker.find("[data-picker-btn]").on(n.clickEventName,function(t){r.call(this,t||window.event,d)}.bind(this)),u.call(this,"append"),jQuery(window).bind("resize.ax5picker",function(){u.call(this)}.bind(this)),jQuery(window).bind("keyup.ax5picker",function(t){t=t||window.event,s.call(this,t),e.stopEvent(t)}.bind(this)),jQuery(window).bind("click.ax5picker",function(t){t=t||window.event,c.call(this,t),e.stopEvent(t)}.bind(this)),a.call(this,f,{self:this,state:"open",item:f}),this))}}(),this.close=function(t,e){return this.closeTimer&&clearTimeout(this.closeTimer),this.activePicker?(t=this.queue[this.activePickerQueueIndex],this.activePicker.addClass("destroy"),jQuery(window).unbind("resize.ax5picker"),jQuery(window).unbind("click.ax5picker"),jQuery(window).unbind("keyup.ax5picker"),this.closeTimer=setTimeout(function(){this.activePicker&&this.activePicker.remove(),this.activePicker=null,this.activePickerQueueIndex=-1,a.call(this,t,{self:this,state:e||"close"})}.bind(this),n.animateTime),this):this},this.main=function(){arguments&&e.isObject(arguments[0])&&this.setConfig(arguments[0])}.apply(this,arguments)}}()),i=ax5.ui.picker}(),function(){var t=ax5.ui.picker,e=(ax5.util,function(){return'\n<div class="ax5-ui-picker {{theme}}" id="{{id}}" data-picker-els="root" {{#zIndex}}style="z-index:{{zIndex}};"{{/zIndex}}>\n    {{#title}}\n        <div class="ax-picker-heading">{{title}}</div>\n    {{/title}}\n    <div class="ax-picker-body">\n        <div class="ax-picker-content" data-picker-els="content" style="width:{{contentWidth}}px;"></div>\n        {{#btns}}\n            <div class="ax-picker-buttons">\n            {{#btns}}\n                {{#@each}}\n                <button data-picker-btn="{{@key}}" class="btn btn-default {{@value.theme}}">{{@value.label}}</button>\n                {{/@each}}\n            {{/btns}}\n            </div>\n        {{/btns}}\n    </div>\n    <div class="ax-picker-arrow"></div>\n</div>\n'});t.tmpl={pickerTmpl:e,get:function(e,i,n){return ax5.mustache.render(t.tmpl[e].call(this,n),i)}}}(),ax5&&ax5.ui&&ax5.ui.picker&&(ax5.ui.picker_instance=new ax5.ui.picker,jQuery.fn.ax5picker=function(){return function(t){if(ax5.util.isString(arguments[0])){var e=arguments[0];switch(e){case"open":return ax5.ui.picker_instance.open(this);case"close":return ax5.ui.picker_instance.close(this);case"setValue":return ax5.ui.picker_instance.setContentValue(this,arguments[1],arguments[2]);default:return this}}else"undefined"==typeof t&&(t={}),jQuery.each(this,function(){var e={target:this};t=jQuery.extend(!0,t,e),ax5.ui.picker_instance.bind(t)});return this}}());
2 | //# sourceMappingURL=ax5picker.min.js.map
3 | 


--------------------------------------------------------------------------------
/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/ax5picker.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-picker",
 3 | 	"version": "1.4.131",
 4 | 	"description": "A picker plugin that works with Bootstrap & jQuery",
 5 | 	"license": "MIT",
 6 | 	"repository": {
 7 | 		"type": "git",
 8 | 		"url": "git+https://github.com/ax5ui/ax5ui-picker"
 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 | 		"picker",
22 | 		"ax5ui-picker",
23 | 		"javascript ui"
24 | 	],
25 | 	"scripts": {
26 | 		"test": "karma start karma.conf.js"
27 | 	},
28 | 	"dependencies": {
29 | 		"jquery": "",
30 | 		"ax5core": ">=1.4.115",
31 | 		"ax5ui-calendar": "",
32 | 		"ax5ui-formatter": "",
33 | 		"ax5ui-palette": ""
34 | 	},
35 | 	"devDependencies": {
36 | 		"karma": "^1.3.0",
37 | 		"karma-mocha": "^1.2.0",
38 | 		"karma-phantomjs-launcher": "^1.0.2",
39 | 		"mocha": "^3.1.0",
40 | 		"phantomjs-prebuilt": "^2.1.13",
41 | 		"webdriverio": "^4.6.1"
42 | 	}
43 | }


--------------------------------------------------------------------------------
/src/ax5picker.scss:
--------------------------------------------------------------------------------
1 | @import "node_modules/ax5core/src/_ax5.scss";
2 | 
3 | @import "scss/ax5picker_variables";
4 | @import "scss/ax5picker";


--------------------------------------------------------------------------------
/src/modules/ax5ui-picker-tmpl.js:
--------------------------------------------------------------------------------
 1 | 
 2 | // ax5.ui.picker.tmpl
 3 | (function () {
 4 | 
 5 |     let PICKER = ax5.ui.picker;
 6 |     const U = ax5.util;
 7 | 
 8 |     const pickerTmpl = function () {
 9 |         return `
10 | <div class="ax5-ui-picker {{theme}}" id="{{id}}" data-picker-els="root" {{#zIndex}}style="z-index:{{zIndex}};"{{/zIndex}}>
11 |     {{#title}}
12 |         <div class="ax-picker-heading">{{title}}</div>
13 |     {{/title}}
14 |     <div class="ax-picker-body">
15 |         <div class="ax-picker-content" data-picker-els="content" style="width:{{contentWidth}}px;"></div>
16 |         {{#btns}}
17 |             <div class="ax-picker-buttons">
18 |             {{#btns}}
19 |                 {{#@each}}
20 |                 <button data-picker-btn="{{@key}}" class="btn btn-default {{@value.theme}}">{{@value.label}}</button>
21 |                 {{/@each}}
22 |             {{/btns}}
23 |             </div>
24 |         {{/btns}}
25 |     </div>
26 |     <div class="ax-picker-arrow"></div>
27 | </div>
28 | `;
29 |     };
30 | 
31 |     PICKER.tmpl = {
32 |         "pickerTmpl": pickerTmpl,
33 | 
34 |         get: function (tmplName, data, columnKeys) {
35 |             return ax5.mustache.render(PICKER.tmpl[tmplName].call(this, columnKeys), data);
36 |         }
37 |     };
38 | 
39 | })();


--------------------------------------------------------------------------------
/src/modules/jQuery-extender.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * ax5.ui.picker_instance
 3 |  * @type {ax5picker}
 4 |  * @example
 5 |  * ```js
 6 |  * // picker 기본 속성을 변경해야 한다면
 7 |  * ax5.ui.picker_instance.setConfig({
 8 |  * });
 9 |  *
10 |  * ```
11 |  */
12 | if (ax5 && ax5.ui && ax5.ui.picker) {
13 |     ax5.ui.picker_instance = new ax5.ui.picker();
14 | 
15 |     jQuery.fn.ax5picker = (function () {
16 |         return function (config) {
17 |             if (ax5.util.isString(arguments[0])) {
18 |                 var methodName = arguments[0];
19 | 
20 |                 switch (methodName) {
21 |                     case "open":
22 |                         return ax5.ui.picker_instance.open(this);
23 |                         break;
24 |                     case "close":
25 |                         return ax5.ui.picker_instance.close(this);
26 |                         break;
27 |                     case "setValue":
28 |                         return ax5.ui.picker_instance.setContentValue(this, arguments[1], arguments[2]);
29 |                         break;
30 |                     default:
31 |                         return this;
32 |                 }
33 |             }
34 |             else {
35 |                 if (typeof config == "undefined") config = {};
36 |                 jQuery.each(this, function () {
37 |                     var defaultConfig = {
38 |                         target: this
39 |                     };
40 |                     config = jQuery.extend(true, config, defaultConfig);
41 |                     ax5.ui.picker_instance.bind(config);
42 |                 });
43 |             }
44 |             return this;
45 |         };
46 |     })();
47 | }
48 | 


--------------------------------------------------------------------------------
/src/scss/_ax5picker.scss:
--------------------------------------------------------------------------------
  1 | @mixin ax-picker() {
  2 | 	box-sizing: border-box;
  3 | 	*,
  4 | 	*:before,
  5 | 	*:after {
  6 | 		box-sizing: border-box;
  7 | 	}
  8 | 
  9 | 	z-index: $ax5picker-z-index;
 10 | 	position: absolute;
 11 | 	left: 0px;
 12 | 	top: 0px;
 13 | 	//overflow: hidden;
 14 | }
 15 | 
 16 | @mixin picker-variant($text-color, $border-color, $heading-bg-color) {
 17 | 
 18 | 	@include ax-background($ax5picker-bg);
 19 | 	border: $ax5picker-inner-border;
 20 | 	border-color: $border-color;
 21 | 	border-radius: $ax5picker-border-radius;
 22 | 	box-shadow: $ax5picker-box-shadow;
 23 | 
 24 | 	.ax-picker-heading {
 25 | 		font-weight: 600;
 26 | 		padding: $ax5picker-heading-padding;
 27 | 		border-bottom: 1px solid transparent;
 28 | 		@include border-top-radius($ax5picker-border-radius - 1);
 29 | 
 30 | 		color: $text-color;
 31 | 		@include ax-background($heading-bg-color);
 32 | 		.badge {
 33 | 			font-size: 0.8em;
 34 | 			color: $heading-bg-color;
 35 | 			@include ax-background($text-color);
 36 | 		}
 37 | 	}
 38 | 	.ax-picker-body {
 39 | 		padding: $ax5picker-body-padding;
 40 | 		text-align: center;
 41 | 		.ax-picker-content {
 42 | 			min-width: 50px;
 43 | 
 44 | 			.ax-picker-content-box {
 45 | 				border: $ax5picker-content-border;
 46 | 				border-color: $ax5picker-content-border-color;
 47 | 				border-radius: $ax5picker-content-border-radius;
 48 | 				padding: $ax5picker-content-padding;
 49 | 				overflow: hidden;
 50 | 			}
 51 | 		}
 52 | 		.ax-picker-buttons {
 53 | 			padding: $ax5picker-buttons-padding;
 54 | 			button {
 55 | 				&:not(:last-child) {
 56 | 					margin-right: 3px;
 57 | 				}
 58 | 			}
 59 | 		}
 60 | 	}
 61 | 
 62 | 	&.direction-top {
 63 | 		.ax-picker-arrow {
 64 | 			@include picker-arrow($ax5picker-arrow-size, $ax5picker-arrow-border-width, $border-color, top);
 65 | 		}
 66 | 	}
 67 | 	&.direction-right {
 68 | 		.ax-picker-arrow {
 69 | 			@include picker-arrow($ax5picker-arrow-size, $ax5picker-arrow-border-width, $border-color, right);
 70 | 		}
 71 | 	}
 72 | 	&.direction-bottom {
 73 | 		.ax-picker-arrow {
 74 | 			@include picker-arrow($ax5picker-arrow-size, $ax5picker-arrow-border-width, $border-color, bottom);
 75 | 		}
 76 | 	}
 77 | 	&.direction-left {
 78 | 		.ax-picker-arrow {
 79 | 			@include picker-arrow($ax5picker-arrow-size, $ax5picker-arrow-border-width, $border-color, left);
 80 | 		}
 81 | 	}
 82 | 
 83 | }
 84 | 
 85 | @mixin picker-arrow($arrow-size, $arrow-border-width, $border-color, $arrow-direction) {
 86 | 
 87 | 	//
 88 | 	//@debug( nth($ax5picker-inner-border, 3) );
 89 | 	$arrow-bg: nth($ax5picker-bg, 1);
 90 | 	$arrow-border-color: $border-color;
 91 | 
 92 | 	position: absolute;
 93 | 	width: 0;
 94 | 	height: 0;
 95 | 
 96 | 	@if ($arrow-direction == top) {
 97 | 		left: 50%;
 98 | 		top: 0px;
 99 | 	} @else if ($arrow-direction == right) {
100 | 		right: 0px;
101 | 		top: 50%;
102 | 	} @else if ($arrow-direction == bottom) {
103 | 		left: 50%;
104 | 		bottom: 0px;
105 | 	} @else if ($arrow-direction == left) {
106 | 		left: 0px;
107 | 		top: 50%;
108 | 	}
109 | 
110 | 	&:before {
111 | 		content: ' ';
112 | 		position: absolute;
113 | 		width: 0;
114 | 		height: 0;
115 | 
116 | 		@if ($arrow-direction == top) {
117 | 			left: - ($arrow-size);
118 | 			top: - ($arrow-size * 2);
119 | 			border-left: $arrow-size solid transparent;
120 | 			border-right: $arrow-size solid transparent;
121 | 			border-bottom: ($arrow-size * 2) solid $arrow-border-color;
122 | 		} @else if ($arrow-direction == right) {
123 | 			right: - ($arrow-size * 2);
124 | 			top: - ($arrow-size);
125 | 			border-top: $arrow-size solid transparent;
126 | 			border-bottom: $arrow-size solid transparent;
127 | 			border-left: ($arrow-size * 2) solid $arrow-border-color;
128 | 		} @else if ($arrow-direction == bottom) {
129 | 			left: - ($arrow-size);
130 | 			bottom: - ($arrow-size * 2);
131 | 			border-left: $arrow-size solid transparent;
132 | 			border-right: $arrow-size solid transparent;
133 | 			border-top: ($arrow-size * 2) solid $arrow-border-color;
134 | 		} @else if ($arrow-direction == left) {
135 | 			left: - ($arrow-size * 2);
136 | 			top: - ($arrow-size);
137 | 			border-top: $arrow-size solid transparent;
138 | 			border-bottom: $arrow-size solid transparent;
139 | 			border-right: ($arrow-size * 2) solid $arrow-border-color;
140 | 		}
141 | 	}
142 | 
143 | 	&:after {
144 | 		content: ' ';
145 | 		position: absolute;
146 | 		width: 0;
147 | 		height: 0;
148 | 
149 | 		@if ($arrow-direction == top) {
150 | 			left: - ($arrow-size);
151 | 			top: - ($arrow-size * 2) + ($arrow-border-width * 2);
152 | 			border-left: ($arrow-size) solid transparent;
153 | 			border-right: ($arrow-size) solid transparent;
154 | 			border-bottom: ($arrow-size * 2) solid $arrow-bg;
155 | 		} @else if ($arrow-direction == right) {
156 | 			right: - ($arrow-size * 2) + ($arrow-border-width * 2);
157 | 			top: - ($arrow-size);
158 | 			border-top: ($arrow-size) solid transparent;
159 | 			border-bottom: ($arrow-size) solid transparent;
160 | 			border-left: ($arrow-size * 2) solid $arrow-bg;
161 | 		} @else if ($arrow-direction == bottom) {
162 | 			left: - ($arrow-size);
163 | 			bottom: - ($arrow-size * 2) + ($arrow-border-width * 2);
164 | 			border-left: ($arrow-size) solid transparent;
165 | 			border-right: ($arrow-size) solid transparent;
166 | 			border-top: ($arrow-size * 2) solid $arrow-bg;
167 | 		} @else if ($arrow-direction == left) {
168 | 			left: - ($arrow-size * 2) + ($arrow-border-width * 2);
169 | 			top: - ($arrow-size);
170 | 			border-top: ($arrow-size) solid transparent;
171 | 			border-bottom: ($arrow-size) solid transparent;
172 | 			border-right: ($arrow-size * 2) solid $arrow-bg;
173 | 		}
174 | 	}
175 | }
176 | 
177 | @include keyframes(ax-picker) {
178 | 
179 | 	0% {
180 | 		opacity: 0.0;
181 | 		//@include transform(scale(0));
182 | 		@include transform(translate(0, -10%));
183 | 	}
184 | 
185 | 	100% {
186 | 		opacity: 1.0;
187 | 		//@include transform(scale(1));
188 | 		@include transform(translate(0, 0));
189 | 	}
190 | }
191 | 
192 | @include keyframes(ax-picker-destroy) {
193 | 	from {
194 | 		//@include transform(scale(1));
195 | 		opacity: 1.0;
196 | 		@include transform(translate(0, 0));
197 | 	}
198 | 	to {
199 | 		//@include transform(scale(0.95));
200 | 		opacity: 0.0;
201 | 		@include transform(translate(0, -10%));
202 | 	}
203 | }
204 | 
205 | // mixins --------------------------------------------- end
206 | 
207 | .ax5-ui-picker {
208 | 
209 | 	@include ax-picker();
210 | 
211 | 	@include perspective(1000px);
212 | 	@include transform-style(preserve-3d);
213 | 
214 | 	@include animation(ax-picker $ax5picker-easing-time-open);
215 | 	@include transform(translateZ(0));
216 | 	@include transform-origin(center top);
217 | 	/* flip type
218 | 	@include backface-visibility(visible);
219 | 	@include transform(translateY(0%) rotateX(0deg));
220 | 	*/
221 | 
222 | 	@include picker-variant($ax5picker-default-text, $ax5picker-default-border-color, $ax5picker-default-heading-bg);
223 | 
224 | 	&.primary {
225 | 		@include picker-variant($ax5picker-primary-text, $ax5picker-primary-border-color, $ax5picker-primary-heading-bg);
226 | 	}
227 | 	&.success {
228 | 		@include picker-variant($ax5picker-success-text, $ax5picker-success-border-color, $ax5picker-success-heading-bg);
229 | 	}
230 | 	&.info {
231 | 		@include picker-variant($ax5picker-info-text, $ax5picker-info-border-color, $ax5picker-info-heading-bg);
232 | 	}
233 | 	&.warning {
234 | 		@include picker-variant($ax5picker-warning-text, $ax5picker-warning-border-color, $ax5picker-warning-heading-bg);
235 | 	}
236 | 	&.danger {
237 | 		@include picker-variant($ax5picker-danger-text, $ax5picker-danger-border-color, $ax5picker-danger-heading-bg);
238 | 	}
239 | 
240 | 	&.destroy {
241 | 		@include animation(ax-picker-destroy $ax5picker-easing-time-close $ease-in-back forwards);
242 | 	}
243 | 
244 | 	&.direction-top {
245 | 		@include transform-origin(center top);
246 | 	}
247 | 	&.direction-right {
248 | 		@include transform-origin(right center);
249 | 	}
250 | 	&.direction-bottom {
251 | 		@include transform-origin(center bottom);
252 | 
253 | 	}
254 | 	&.direction-left {
255 | 		@include transform-origin(left center);
256 | 	}
257 | }
258 | 
259 | // picker handle
260 | 
261 | @mixin ax5picker-handle(){
262 | 	&[data-ax5picker] {
263 | 		.input-group-addon {
264 | 			cursor: pointer;
265 | 
266 | 			&:not(:last-child) {
267 | 				border-left: 0 none;
268 | 				border-right: 0 none;
269 | 			}
270 | 
271 | 			&.color-preview{
272 | 				padding: 0;
273 | 			}
274 | 			[data-ax5picker-color="preview"]{
275 | 				display: block;
276 | 			}
277 | 		}
278 | 	}
279 | }
280 | 
281 | .input-group {
282 | 	@include ax5picker-handle();
283 | }
284 | .form-group {
285 | 	@include ax5picker-handle();
286 | }


--------------------------------------------------------------------------------
/src/scss/_ax5picker_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 | //============== ax5picker
 81 | $ax5picker-z-index: 2000 !default;
 82 | $ax5picker-box-model: border-box !default;
 83 | $ax5picker-bg: $panel-bg !default;
 84 | $ax5picker-inner-border: 1px solid !default;
 85 | $ax5picker-inner-border-color: $panel-inner-border !default;
 86 | 
 87 | $ax5picker-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.175) !default;
 88 | $ax5picker-border-radius: 5px !default;
 89 | 
 90 | $ax5picker-body-padding: 5px !default;
 91 | $ax5picker-heading-padding: $panel-heading-padding !default;
 92 | $ax5picker-buttons-padding: 10px 0px 5px 0px !default;
 93 | 
 94 | $ax5picker-content-border: 0px solid !default;
 95 | $ax5picker-content-border-color: none !default;
 96 | $ax5picker-content-border-radius: 0px !default;
 97 | $ax5picker-content-padding: 0px !default;
 98 | 
 99 | $ax5picker-easing-time-open: 0.1s !default;
100 | $ax5picker-easing-time-close: 0.1s !default;
101 | $ax5picker-arrow-size: 10px !default;
102 | $ax5picker-arrow-border-width: 1px !default;
103 | 
104 | //** Border color for elements within dialog
105 | $ax5picker-default-text: $panel-default-text !default;
106 | $ax5picker-default-border-color: $panel-default-border !default;
107 | $ax5picker-default-heading-bg: $panel-default-heading-bg !default;
108 | 
109 | $ax5picker-primary-text: $panel-primary-text !default;
110 | $ax5picker-primary-border-color: $panel-primary-border !default;
111 | $ax5picker-primary-heading-bg: $panel-primary-heading-bg !default;
112 | 
113 | $ax5picker-success-text: $panel-success-text !default;
114 | $ax5picker-success-border-color: $panel-success-border !default;
115 | $ax5picker-success-heading-bg: $panel-success-heading-bg !default;
116 | 
117 | $ax5picker-info-text: $panel-info-text !default;
118 | $ax5picker-info-border-color: $panel-info-border !default;
119 | $ax5picker-info-heading-bg: $panel-info-heading-bg !default;
120 | 
121 | $ax5picker-warning-text: $panel-warning-text !default;
122 | $ax5picker-warning-border-color: $panel-warning-border !default;
123 | $ax5picker-warning-heading-bg: $panel-warning-heading-bg !default;
124 | 
125 | $ax5picker-danger-text: $panel-danger-text !default;
126 | $ax5picker-danger-border-color: $panel-danger-border !default;
127 | $ax5picker-danger-heading-bg: $panel-danger-heading-bg !default;


--------------------------------------------------------------------------------
/test/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "ax5ui-picker-tester",
 3 | 	"dependencies": {
 4 | 		"jquery": "^1.11.0",
 5 | 		"ax5core": ">=1.4.115",
 6 | 		"ax5ui-mask": ">=1.3.0",
 7 | 		"ax5ui-calendar": ">=1.3.0",
 8 | 		"ax5ui-formatter": ">=1.3.0",
 9 | 		"bootstrap": "^3.3.6",
10 | 		"font-awesome": ""
11 | 	}
12 | }
13 | 


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>Title</title>
  6 | 
  7 |     <!--link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/-->
  8 | 
  9 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
 10 | 
 11 |     <link rel="stylesheet" type="text/css" href="../../ax5ui-mask/dist/ax5mask.css"/>
 12 |     <link rel="stylesheet" type="text/css" href="../../ax5ui-calendar/dist/ax5calendar.css"/>
 13 |     <link rel="stylesheet" type="text/css" href="../../ax5ui-palette/dist/ax5palette.css"/>
 14 |     <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
 15 |     <link rel="stylesheet" type="text/css" href="../dist/ax5picker.css"/>
 16 | 
 17 |     <script src="bower_components/jquery/dist/jquery.min.js"></script>
 18 |     <script src="../../ax5core/dist/ax5core.js"></script>
 19 |     <script src="../../ax5ui-mask/dist/ax5mask.min.js"></script>
 20 |     <script src="../../ax5ui-calendar/dist/ax5calendar.js"></script>
 21 |     <script src="../../ax5ui-palette/dist/ax5palette.js"></script>
 22 |     <script src="../../ax5ui-formatter/dist/ax5formatter.js"></script>
 23 |     <script src="../dist/ax5picker.js"></script>
 24 | </head>
 25 | <body style="padding: 10px;">
 26 | 
 27 | <!--http://bootstrap-datepicker.readthedocs.org/en/latest/-->
 28 | <!--http://www.sitepoint.com/pure-css3-speech-bubbles/-->
 29 | <!--https://css-tricks.com/examples/ShapesOfCSS/-->
 30 | <!--https://css-tricks.com/clipping-masking-css/-->
 31 | 
 32 | <h1>Date</h1>
 33 | 
 34 | <input type="text" class="form-control" data-picker-date="" placeholder="yyyy/mm/dd"/>
 35 | 
 36 | <div class="form-group" data-ax5picker="date" style="">
 37 |     <div class="input-group">
 38 |         <input type="text" class="form-control" placeholder="yyyy/mm/dd"/>
 39 |         <span class="input-group-addon">~</span>
 40 |         <input type="text" class="form-control" placeholder="yyyy/mm/dd"/>
 41 |         <span class="input-group-addon"><i class="fa fa-calendar-o"></i></span>
 42 |     </div>
 43 | </div>
 44 | 
 45 | <div class="form-group">
 46 |     <div class="input-group" data-ax5picker="date" disabled="true">
 47 |         <input type="text" class="form-control" placeholder="yyyy/mm/dd" />
 48 |         <span class="input-group-addon" disabled="true"><i class="fa fa-calendar-o"></i></span>
 49 |     </div>
 50 | </div>
 51 | 
 52 | <h1>Secure-num</h1>
 53 | <div class="form-group">
 54 |     <input type="password" data-ax-path="secure-num" class="form-control" maxlength="4" placeholder="" readonly="readonly"/>
 55 | </div>
 56 | 
 57 | <h1>Keyboard</h1>
 58 | <div class="form-group">
 59 |     <input type="text" class="form-control" data-ax5picker="keyboard" placeholder="">
 60 | 
 61 | </div>
 62 | <div class="form-group">
 63 |     <input type="text" data-ax-path="keyboard" class="form-control" placeholder="" readonly="readonly"/>
 64 | </div>
 65 | 
 66 | <h1>Numpad</h1>
 67 | <div class="form-group">
 68 |     <input type="text" data-ax-path="numpad" class="form-control" placeholder=""/>
 69 | </div>
 70 | 
 71 | <h1>Custom</h1>
 72 | <div class="form-group">
 73 |     <input type="text" data-ax5picker="custom" class="form-control" placeholder=""/>
 74 | </div>
 75 | 
 76 | 
 77 | <h1>Color</h1>
 78 | <div class="form-group">
 79 |     <input type="text" data-ax5picker="color" class="form-control" placeholder=""/>
 80 | </div>
 81 | 
 82 | <script>
 83 |     // todo : picker align 기능 추가
 84 | 
 85 |     ax5.def.picker.date_leftArrow = '<i class="fa fa-chevron-left"></i>';
 86 |     ax5.def.picker.date_yearTmpl = '%s';
 87 |     ax5.def.picker.date_monthTmpl = '%s';
 88 |     ax5.def.picker.date_rightArrow = '<i class="fa fa-chevron-right"></i>';
 89 | 
 90 |     $(document.body).ready(function () {
 91 | 
 92 |         var picker = new ax5.ui.picker({});
 93 | 
 94 |         $('[data-picker-date]').on("change", function () {
 95 |             console.log("change");
 96 |         });
 97 | 
 98 |         picker.bind({
 99 |             zIndex: 4000,
100 |             target: $('[data-picker-date]'),
101 |             direction: "auto",
102 |             disableChangeTrigger: false,
103 |             content: {
104 |                 type: 'date',
105 |                 config: {
106 |                     mode: "month",
107 |                     selectMode: "day"
108 |                 },
109 |                 formatter: {
110 |                     pattern: 'date(month)'
111 |                 }
112 |             },
113 |             onStateChanged: function () {
114 |                 // console.log(this.values);
115 |             }
116 |         });
117 | 
118 |         $('[data-ax5picker]').each(function (idx) {
119 | 
120 |             if (this.getAttribute("data-ax5picker") == "date") {
121 |                 picker.bind({
122 |                     id: "my-picker-" + idx,
123 |                     target: this,
124 |                     content: {
125 |                         width: 270,
126 |                         margin: 10,
127 |                         type: 'date',
128 |                         config: {
129 |                             control: {
130 |                                 left: '<i class="fa fa-chevron-left"></i>',
131 |                                 yearTmpl: '%s',
132 |                                 monthTmpl: '%s',
133 |                                 right: '<i class="fa fa-chevron-right"></i>'
134 |                             },
135 |                             lang: {
136 |                                 yearTmpl: "%s년",
137 |                                 months: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
138 |                                 dayTmpl: "%s"
139 |                             },
140 |                             mode: "month"
141 |                         },
142 |                         formatter: {
143 |                             pattern: 'date'
144 |                         }
145 |                     },
146 |                     btns: {
147 |                         today: {
148 |                             label: "오늘", onClick: function () {
149 |                                 if (this.item.inputLength == 1) {
150 |                                     this.self.setContentValue(this.item.id, 0, ax5.util.date(new Date(), {"return": "yyyy-MM-dd"}));
151 |                                 }
152 |                                 else {
153 |                                     this.self.setContentValue(this.item.id, 0, ax5.util.date(new Date(), {"return": "yyyy-MM-dd"}));
154 |                                     this.self.setContentValue(this.item.id, 1, ax5.util.date(new Date(), {"return": "yyyy-MM-dd"}));
155 |                                     this.self.close();
156 |                                 }
157 |                             }
158 |                         },
159 |                         thisMonth: {
160 |                             label: "이번달 1일", onClick: function () {
161 |                                 var today = new Date();
162 |                                 if (this.item.inputLength == 1) {
163 |                                     this.self.setContentValue(this.item.id, 0, ax5.util.date(today, {"return": "yyyy-MM-01"}));
164 |                                 }
165 |                                 else {
166 |                                     this.self.setContentValue(this.item.id, 0, ax5.util.date(today, {"return": "yyyy-MM-01"}));
167 |                                     this.self.setContentValue(this.item.id, 1, ax5.util.date(today, {"return": "yyyy-MM"}) + '-' + ax5.util.daysOfMonth(today.getFullYear(), today.getMonth()));
168 |                                     this.self.close();
169 |                                 }
170 |                             }
171 |                         },
172 |                         ok: {label: "확인", theme: "default"}
173 |                     },
174 |                     onStateChanged: function (a) {
175 |                         if(this.state == "open"){
176 |                             if(this.item && this.item.calendar){
177 |                                 var today = new Date();
178 |                                 this.item.pickerCalendar[0].ax5uiInstance.setSelection([ax5.util.date(today, {'add': {d: 0}})]);
179 |                                 if(this.item.pickerCalendar[1]) this.item.pickerCalendar[1].ax5uiInstance.setSelection([ax5.util.date(today, {'add': {d: 0}})]);
180 |                             }
181 |                         }
182 |                         else if (this.state == "changeValue") {
183 |                             if (this.item.content.type == "date" && this.values.length > 1) {
184 |                                 if (this.inputIndex == 0) {
185 | 
186 |                                 }
187 |                             }
188 |                         }
189 |                     }
190 |                 });
191 |             }
192 |             else if (this.getAttribute("data-ax5picker") == "custom") {
193 |                 picker.bind({
194 |                     target: this,
195 |                     direction: "top",
196 |                     contentWidth: 200,
197 |                     content: function (callback) {
198 |                         var html = ''
199 |                                         + '가나다라마바사'
200 |                                         + '<div style="padding: 10px;">'
201 |                                         + '<button class="btn btn-default">기능 1</button>'
202 |                                         + '</div>'
203 |                                 ;
204 |                         callback(html);
205 |                     }
206 |                 });
207 |             }
208 |             else if (this.getAttribute("data-ax5picker") == "secure-num") {
209 | 
210 |             }
211 |             else if (this.getAttribute("data-ax5picker") == "keyboard") {
212 |                 picker.bind({
213 |                     target: this,
214 |                     direction: "auto",
215 |                     content: {
216 |                         width: 550,
217 |                         margin: 10,
218 |                         type: 'keyboard',
219 |                         config: {
220 |                             btnWrapStyle: "padding:2px;",
221 |                             btnStyle: "width: 35px;",
222 |                             btnTheme: "primary",
223 |                             specialBtnWrapStyle: "padding:2px;",
224 |                             specialBtnStyle: "",
225 |                             specialBtnTheme: " "
226 |                         }
227 |                     },
228 |                     onStateChanged: function () {
229 |                         //console.log(this);
230 |                         //if (this.value && this.value.length > 3) {
231 |                         //    picker.close();
232 |                         //}
233 |                     }
234 |                 });
235 |             }
236 |             else if (this.getAttribute("data-ax5picker") == "color") {
237 |                 picker.bind({
238 |                     target: this,
239 |                     direction: "auto",
240 |                     content: {
241 |                         width: 250,
242 |                         margin: 10,
243 |                         type: 'color',
244 |                         config: {
245 | 
246 |                         }
247 |                     },
248 |                     onStateChanged: function () {
249 |                         //console.log(this);
250 |                         //if (this.value && this.value.length > 3) {
251 |                         //    picker.close();
252 |                         //}
253 |                     }
254 |                 });
255 |             }
256 | 
257 |         });
258 | 
259 | 
260 |         picker.bind({
261 |             target: $('[data-ax-path="secure-num"]'),
262 |             direction: "top",
263 |             content: {
264 |                 width: 200,
265 |                 margin: 10,
266 |                 type: 'secure-num',
267 |                 config: {
268 |                     btnWrapStyle: "padding:3px;width:25%;",
269 |                     btnStyle: "width:100%",
270 |                     btnTheme: "info btn-sm",
271 |                     specialBtnTheme: " btn-sm"
272 |                 },
273 |                 formatter: {
274 |                     pattern: 'number'
275 |                 }
276 |             },
277 |             btns: {
278 |                 today: {
279 |                     label: "오늘", onClick: function () {
280 |                         if (this.item.inputLength == 1) {
281 |                             this.self.setContentValue(this.item.id, 0, ax5.util.date(new Date(), {"return": "yyyy-MM-dd"}));
282 |                         }
283 |                         else {
284 |                             this.self.setContentValue(this.item.id, 0, ax5.util.date(new Date(), {"return": "yyyy-MM-dd"}));
285 |                             this.self.setContentValue(this.item.id, 1, ax5.util.date(new Date(), {"return": "yyyy-MM-dd"}));
286 |                             this.self.close();
287 |                         }
288 |                     }
289 |                 },
290 |                 thisMonth: {
291 |                     label: "이번달 1일", onClick: function () {
292 |                         var today = new Date();
293 |                         if (this.item.inputLength == 1) {
294 |                             this.self.setContentValue(this.item.id, 0, ax5.util.date(today, {"return": "yyyy-MM-01"}));
295 |                         }
296 |                         else {
297 |                             this.self.setContentValue(this.item.id, 0, ax5.util.date(today, {"return": "yyyy-MM-01"}));
298 |                             this.self.setContentValue(this.item.id, 1, ax5.util.date(today, {"return": "yyyy-MM"}) + '-' + ax5.util.daysOfMonth(today.getFullYear(), today.getMonth()));
299 |                             this.self.close();
300 |                         }
301 |                     }
302 |                 },
303 |                 ok: {label: "확인", theme: "default"}
304 |             },
305 |             onStateChanged: function () {
306 |                 console.log(this);
307 |                 if (this.value && this.value.length > 3) {
308 |                     picker.close();
309 |                 }
310 |             }
311 |         });
312 | 
313 |         picker.bind({
314 |             target: $('[data-ax-path="keyboard"]'),
315 |             direction: "auto",
316 |             content: {
317 |                 width: 550,
318 |                 margin: 10,
319 |                 type: 'keyboard',
320 |                 config: {
321 |                     btnWrapStyle: "padding:2px;",
322 |                     btnStyle: "width: 35px;",
323 |                     btnTheme: "primary",
324 |                     specialBtnWrapStyle: "padding:2px;",
325 |                     specialBtnStyle: "",
326 |                     specialBtnTheme: " "
327 |                 }
328 |             },
329 |             onStateChanged: function () {
330 |                 //console.log(this);
331 |                 //if (this.value && this.value.length > 3) {
332 |                 //    picker.close();
333 |                 //}
334 |             }
335 |         });
336 | 
337 |         picker.bind({
338 |             target: $('[data-ax-path="numpad"]'),
339 |             direction: "auto",
340 |             content: {
341 |                 width: 200,
342 |                 margin: 10,
343 |                 type: 'numpad',
344 |                 config: {
345 |                     btnWrapStyle: "padding:3px;width:25%;",
346 |                     btnStyle: "width:100%",
347 |                     btnTheme: "primary",
348 |                     specialBtnWrapStyle: "padding:3px;width:25%;",
349 |                     specialBtnStyle: "width:100%;padding-left:0px;padding-right:0px;",
350 |                     specialBtnTheme: ""
351 |                     /*
352 |                      keyArray: [
353 |                      {value: "7"},
354 |                      {value: "8"},
355 |                      {value: "9"},
356 |                      {label: "BS", fn: "back"},
357 |                      {value: "4"},
358 |                      {value: "5"},
359 |                      {value: "6"},
360 |                      {value: "-"},
361 |                      {value: "1"},
362 |                      {value: "2"},
363 |                      {value: "3"},
364 |                      {value: ""},
365 |                      {value: "."},
366 |                      {value: "0"},
367 |                      {value: ""},
368 |                      {label: "OK", fn: "close"}
369 |                      ]
370 |                      */
371 |                 },
372 |                 formatter: {
373 |                     pattern: 'number'
374 |                 }
375 |             },
376 |             onStateChanged: function () {
377 |                 console.log(this);
378 |             }
379 |         });
380 |     });
381 | </script>
382 | 
383 | </body>
384 | </html>


--------------------------------------------------------------------------------
/test/picker-color.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <!--
 3 |   ~ Copyright (c) 2017. tom@axisj.com
 4 |   ~ - github.com/thomasjang
 5 |   ~ - www.axisj.com
 6 |   -->
 7 | 
 8 | <html lang="en">
 9 | <head>
10 |     <meta charset="UTF-8">
11 |     <title>Title</title>
12 | 
13 |     <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>
14 |     <link rel="stylesheet" type="text/css" href="../../ax5ui-mask/dist/ax5mask.css"/>
15 |     <link rel="stylesheet" type="text/css" href="../../ax5ui-calendar/dist/ax5calendar.css"/>
16 |     <link rel="stylesheet" type="text/css" href="../../ax5ui-palette/dist/ax5palette.css"/>
17 |     <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
18 |     <link rel="stylesheet" type="text/css" href="../dist/ax5picker.css"/>
19 | 
20 |     <script src="bower_components/jquery/dist/jquery.min.js"></script>
21 |     <script src="../../ax5core/dist/ax5core.js"></script>
22 |     <script src="../../ax5ui-mask/dist/ax5mask.min.js"></script>
23 |     <script src="../../ax5ui-calendar/dist/ax5calendar.js"></script>
24 |     <script src="../../ax5ui-palette/dist/ax5palette.js"></script>
25 |     <script src="../../ax5ui-formatter/dist/ax5formatter.js"></script>
26 |     <script src="../dist/ax5picker.js"></script>
27 | </head>
28 | <body style="padding: 10px;">
29 | 
30 | <!--http://bootstrap-datepicker.readthedocs.org/en/latest/-->
31 | <!--http://www.sitepoint.com/pure-css3-speech-bubbles/-->
32 | <!--https://css-tricks.com/examples/ShapesOfCSS/-->
33 | <!--https://css-tricks.com/clipping-masking-css/-->
34 | 
35 | <h1>Color</h1>
36 | 
37 | <div class="form-group">
38 |     <input type="text" class="form-control" data-ax5picker="color" placeholder=""/>
39 | </div>
40 | 
41 | <div class="form-group" data-ax5picker="color" style="">
42 |     <div class="input-group">
43 |         <input type="text" class="form-control" id="test-inp" placeholder="" value="#AF0000"/>
44 |         <span class="input-group-addon color-preview">
45 |             <span data-ax5picker-color="preview" style="background: #000;width: 20px;height:20px;margin:5px;border: 1px solid #000;border-radius: 3px;"></span>
46 |         </span>
47 |     </div>
48 | </div>
49 | 
50 | 
51 | <script>
52 |     // todo : picker align 기능 추가
53 |     $(document.body).ready(function () {
54 | 
55 |         $('[data-ax5picker="color"]').ax5picker({
56 |             direction: "auto",
57 |             content: {
58 |                 width: 250,
59 |                 margin: 10,
60 |                 type: 'color',
61 |                 config: {}
62 |             }
63 |         });
64 | 
65 |     });
66 | </script>
67 | 
68 | </body>
69 | </html>


--------------------------------------------------------------------------------
/test/test.picker.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <!--
 3 |   ~ Copyright (c) 2017. tom@axisj.com
 4 |   ~ - github.com/thomasjang
 5 |   ~ - www.axisj.com
 6 |   -->
 7 | 
 8 | <html lang="en">
 9 | <head>
10 |     <meta charset="UTF-8">
11 |     <title>ax5ui testing</title>
12 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.min.css" />
13 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.min.js"></script>
14 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
15 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/should.js/11.1.2/should.min.js"></script>
16 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
17 |     <script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5core/master/dist/ax5core.min.js"></script>
18 |     <script type="text/javascript" src="../dist/ax5picker.min.js"></script>
19 |     <script type="text/javascript" src="https://rawgit.com/aeei/aejs/master/dist/ae.min.js"></script>
20 | </head>
21 | <body>
22 | <div id="mocha"></div>
23 | 
24 | <script>mocha.setup('bdd')</script>
25 | <script type="text/javascript" src="test.picker.js"></script>
26 | <script>mocha.run();</script>
27 | </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/test/test.picker.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * Copyright (c) 2017. tom@axisj.com
  3 |  * - github.com/thomasjang
  4 |  * - www.axisj.com
  5 |  */
  6 | 
  7 | describe('ax5picker TEST', function () {
  8 |     var myUI;
  9 |     var tmpl;
 10 | 
 11 |     beforeEach(function () {
 12 |         tmpl = '<div class="input-group" data-ax5picker="basic">' +
 13 |             '<input type="text" class="form-control" placeholder>' +
 14 |             '<span class="input-group-addon"><i class="fa fa-calculator"></i></span>' +
 15 |             '</div>';
 16 |         $(document.body).append(tmpl);
 17 |     });
 18 | 
 19 |     afterEach(function () {
 20 |         $('[data-ax5picker="basic"]').remove();
 21 |     });
 22 | 
 23 |     ///
 24 |     it('new ax5picker', function (done) {
 25 |         try {
 26 |             myUI = new ax5.ui.picker();
 27 |             done();
 28 |         } catch (e) {
 29 |             done(e);
 30 |         }
 31 |     });
 32 | 
 33 |     it('bind select', function (done) {
 34 |         myUI.bind({
 35 |             target: $('[data-ax5picker="basic"]'),
 36 |             direction: "top",
 37 |             contentWidth: 280,
 38 |             content: function (callBack) {
 39 |                 var html = ''
 40 |                         + '<form style="padding:0 5px;">'
 41 |                         + '<div class="form-group">'
 42 |                         + '<label for="exampleInputWidth">Width</label>'
 43 |                         + '<input type="number" class="form-control" id="exampleInputWidth" placeholder="width" value="10">'
 44 |                         + '</div>'
 45 |                         + '<div class="form-group">'
 46 |                         + '<label for="exampleInputHeight">Height</label>'
 47 |                         + '<input type="number" class="form-control" id="exampleInputHeight" placeholder="height" value="10">'
 48 |                         + '</div>'
 49 |                         + '</form>'
 50 |                     ;
 51 |                 callBack(html);
 52 |             },
 53 |             onStateChanged: function () {
 54 |                 if (this.state == "open") {
 55 |                     // ..
 56 |                     console.log(this);
 57 |                 }
 58 |             },
 59 |             btns: {
 60 |                 ok: {
 61 |                     label: "Calculate", theme: "btn-primary", onClick: function () {
 62 |                         //console.log(this);
 63 |                         var w = this.item.pickerContent.find("#exampleInputWidth").val() || 1;
 64 |                         var h = this.item.pickerContent.find("#exampleInputHeight").val() || 1;
 65 |                         this.self.setContentValue(this.item.id, 0, w * h);
 66 |                         this.self.close();
 67 | 
 68 |                     }
 69 |                 }
 70 |             }
 71 |         });
 72 |         done();
 73 |     });
 74 | 
 75 |     it('bind select type [date]', function (done) {
 76 |         myUI.bind({
 77 |             target: $('[data-ax5picker="basic"]'),
 78 |             direction: "top",
 79 |             content: {
 80 |                 width: 270,
 81 |                 margin: 10,
 82 |                 type: 'date',
 83 |                 config: {
 84 |                     control: {
 85 |                         left: '<i class="fa fa-chevron-left"></i>',
 86 |                         yearTmpl: '%s',
 87 |                         monthTmpl: '%s',
 88 |                         right: '<i class="fa fa-chevron-right"></i>'
 89 |                     },
 90 |                     lang: {
 91 |                         yearTmpl: "%s년",
 92 |                         months: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
 93 |                         dayTmpl: "%s"
 94 |                     }
 95 |                 },
 96 |                 formatter: {
 97 |                     pattern: 'date'
 98 |                 }
 99 |             },
100 |             onStateChanged: function () {
101 | 
102 |             }
103 |         });
104 |         done(ae.equalAll("date", myUI.queue[1].content.type));
105 |     });
106 | 
107 |     it('bind select type [secure-num]', function (done) {
108 |         myUI.bind({
109 |             target: $('[data-ax5picker="basic"]'),
110 |             direction: "top",
111 |             content: {
112 |                 width: 200,
113 |                 margin: 10,
114 |                 type: 'secure-num',
115 |                 config: {
116 |                     btnWrapStyle: "padding:3px;width:25%;",
117 |                     btnStyle: "width:100%",
118 |                     btnTheme: "info btn-sm",
119 |                     specialBtnTheme: " btn-sm"
120 |                 },
121 |                 formatter: {
122 |                     pattern: 'number'
123 |                 }
124 |             },
125 |             onStateChanged: function () {
126 |                 if (this.state == "open") {
127 |                     this.item.target.val('');
128 |                 }
129 |                 else {
130 |                     if (this.value && this.value.length > 3) {
131 |                         picker.close();
132 |                     }
133 |                 }
134 |             }
135 |         });
136 |         done(ae.equalAll("secure-num", myUI.queue[2].content.type));
137 |     });
138 | 
139 |     it('bind select type [keyboard]', function (done) {
140 |         myUI.bind({
141 |             target: $('[data-ax5picker="basic"]'),
142 |             direction: "auto",
143 |             content: {
144 |                 width: 550,
145 |                 margin: 10,
146 |                 type: 'keyboard',
147 |                 config: {
148 |                     btnWrapStyle: "padding:2px;",
149 |                     btnStyle: "width: 35px;",
150 |                     btnTheme: "primary",
151 |                     specialBtnWrapStyle: "padding:2px;",
152 |                     specialBtnStyle: "",
153 |                     specialBtnTheme: " "
154 |                 }
155 |             },
156 |             onStateChanged: function () {
157 |             }
158 |         });
159 |         done(ae.equalAll('keyboard', myUI.queue[3].content.type));
160 |     });
161 | 
162 |     it('bind select type [numpad]', function (done) {
163 |         myUI.bind({
164 |             target: $('[data-ax5picker="basic"]'),
165 |             direction: "auto",
166 |             content: {
167 |                 width: 200,
168 |                 margin: 10,
169 |                 type: 'numpad',
170 |                 config: {
171 |                     btnWrapStyle: "padding:3px;width:25%;",
172 |                     btnStyle: "width:100%",
173 |                     btnTheme: "primary",
174 |                     specialBtnWrapStyle: "padding:3px;width:25%;",
175 |                     specialBtnStyle: "width:100%;padding-left:0px;padding-right:0px;",
176 |                     specialBtnTheme: ""
177 |                 },
178 |                 formatter: {
179 |                     pattern: 'number'
180 |                 }
181 |             },
182 |             onStateChanged: function () {
183 |             }
184 |         });
185 |         done(ae.equalAll('numpad', myUI.queue[4].content.type));
186 |     });
187 | 
188 |     it('bind select type [color]', function(done){
189 |         myUI.bind({
190 |             target: $('[data-ax5picker="basic"]'),
191 |             direction: "top",
192 |             content: {
193 |                 width: 300,
194 |                 margin: 10,
195 |                 type: 'color'
196 |             }
197 |         });
198 |         done(ae.equalAll('color', myUI.queue[5].content.type));
199 |     });
200 | });
201 | 
202 | describe('ax5picker method TEST', function () {
203 |     var myUI;
204 |     var tmpl;
205 |     var that;
206 | 
207 |     before(function () {
208 |         myUI = new ax5.ui.picker();
209 |         tmpl = '<div class="input-group" data-ax5picker="basic2">' +
210 |             '<input type="text" class="form-control" placeholder>' +
211 |             '<span class="input-group-addon"><i class="fa fa-calculator"></i></span>' +
212 |             '</div>';
213 | 
214 |         $(document.body).append(tmpl);
215 | 
216 |         myUI.bind({
217 |             target: $('[data-ax5picker="basic2"]'),
218 |             theme: 'default',
219 |             direction: "auto",
220 |             content: {
221 |                 width: 200,
222 |                 margin: 10,
223 |                 type: 'numpad',
224 |                 config: {
225 |                     btnWrapStyle: "padding:3px;width:25%;",
226 |                     btnStyle: "width:100%",
227 |                     btnTheme: "primary",
228 |                     specialBtnWrapStyle: "padding:3px;width:25%;",
229 |                     specialBtnStyle: "width:100%;padding-left:0px;padding-right:0px;",
230 |                     specialBtnTheme: ""
231 |                 },
232 |                 formatter: {
233 |                     pattern: 'number'
234 |                 }
235 |             },
236 |             onStateChanged: function () {
237 |                 that = this;
238 |             }
239 |         });
240 |     });
241 | 
242 |     it('picker open test', function (done) {
243 |         myUI.open($('[data-ax5picker="basic2"]'));
244 |         done(ae.equalAll("open", that.state));
245 |     });
246 | 
247 |     it('picker close test', function (done) {
248 |         myUI.close($('[data-ax5picker="basic2"]'));
249 |         setTimeout(function () {
250 |             done(ae.equalAll("close", that.state));
251 |         }, myUI.config.animateTime);
252 |     });
253 | 
254 |     it('picker setContentValue', function (done) {
255 |         myUI.setContentValue($('[data-ax5picker="basic2"]'), 0, 10);
256 |         done(
257 |             ae.equalAll("changeValue", that.state)
258 |             || ae.equalAll(10, that.value)
259 |             || ae.equalAll(0, that.inputIndex)
260 |         );
261 |     });
262 | 
263 |     after(function () {
264 |         $('[data-ax5picker="basic2"]').remove();
265 |     });
266 | });


--------------------------------------------------------------------------------