1 | # egjs-axes [![npm version](https://badge.fury.io/js/%40egjs%2Faxes.svg)](https://badge.fury.io/js/%40egjs%2Faxes) [![Build Status](https://travis-ci.org/naver/egjs-axes.svg?branch=master)](https://travis-ci.org/naver/egjs-axes) [![Coverage Status](https://coveralls.io/repos/github/naver/egjs-axes/badge.svg?branch=master)](https://coveralls.io/github/naver/egjs-axes?branch=master)
|
2 |
|
3 | A module used to change the information of user action entered by various input devices such as touch screen or mouse into the logical virtual coordinates.
|
4 |
|
5 | <img src="https://github.com/naver/egjs-axes/raw/master/demo/assets/image/structure.png" style="width:100%">
|
6 |
|
7 | You can easily create a UI that responds to user actions.
|
8 |
|
9 | ![showcase using egjs-axes](https://github.com/naver/egjs-axes/raw/master/demo/assets/image/showcase.gif)
|
10 |
|
11 | ## Documents
|
12 | - [Get Started and Demos](https://naver.github.io/egjs-axes/)
|
13 | - [API documentation](https://naver.github.io/egjs-axes/release/latest/doc/)
|
14 | - [How to create an ui that responds to user actions using eg.axes](https://medium.com/@sculove/how-to-create-a-ui-that-responds-to-user-actions-using-eg-axes-5037d180d5ab)
|
15 | - [How to create a custom InputType](https://github.com/naver/egjs-axes/wiki/How-to-create-a-custom-InputType)
|
16 |
|
17 |
|
18 |
|
19 | ## Third party applications
|
20 | - [@egjs/react-axes](https://github.com/naver/egjs-axes/tree/master/packages/react): A react component that can easily use egjs-axes
|
21 |
|
22 | ## Download and Installation
|
23 |
|
24 | Download dist files from repo directly or install it via npm.
|
25 |
|
26 | ### For development (Uncompressed)
|
27 |
|
28 | You can download the uncompressed files for development
|
29 |
|
30 | - Latest : https://naver.github.io/egjs-axes/release/latest/dist/axes.js
|
31 | - Specific version : https://naver.github.io/egjs-axes/release/[VERSION]/dist/axes.js
|
32 |
|
33 | ### For production (Compressed)
|
34 |
|
35 | You can download the compressed files for production
|
36 |
|
37 | - Latest : https://naver.github.io/egjs-axes/release/latest/dist/axes.min.js
|
38 | - Specific version : https://naver.github.io/egjs-axes/release/[VERSION]/dist/axes.min.js
|
39 |
|
40 | ### Packaged version (with Dependencies)
|
41 | > Packaged version is not an official distribution.
|
42 | > Is just to provide for ease use of 'egjs-axes' with dependency.
|
43 |
|
44 | - **Latest**
|
45 | - https://naver.github.io/egjs-axes/release/latest/dist/axes.pkgd.js
|
46 | - https://naver.github.io/egjs-axes/release/latest/dist/axes.pkgd.min.js
|
47 |
|
48 | - **Specific version**
|
49 | - https://naver.github.io/egjs-axes/release/[VERSION]/dist/axes.pkgd.js
|
50 | - https://naver.github.io/egjs-axes/release/[VERSION]/dist/axes.pkgd.min.js
|
51 |
|
52 | ### Installation with npm
|
53 |
|
54 | The following command shows how to install egjs-axes using npm.
|
55 |
|
56 | ```bash
|
57 | $ npm install @egjs/axes
|
58 | ```
|
59 |
|
60 |
|
61 | ## Supported Browsers
|
62 | The following are the supported browsers.
|
63 |
|
64 | |Internet Explorer|Chrome|Firefox|Safari|iOS|Android|
|
65 | |---|---|---|---|---|---|
|
66 | |10+|Latest|Latest|Latest|7+|2.3+(except 3.x)|
|
67 |
|
68 | ## Dependency
|
69 |
|
70 | egjs-axes has the dependencies for the following libraries:
|
71 |
|
72 | |[egjs-component](http://github.com/naver/egjs-component)|[Hammer.JS](http://hammerjs.github.io/)|
|
73 | |----|----|
|
74 | |2.0.0+|2.0.4+|
|
75 |
|
76 |
|
77 |
|
78 | ## Edge swipe issue in iOS Safari
|
79 | When swipe on iOS safari edge, clientX bounces or stops the touch event.
|
80 |
|
81 | * When swiping from left to right, clientX is minus.
|
82 | * Swiping from right to left stops the touch event.
|
83 |
|
84 | In Axes, this was solved by forcing the `release` event in this problem.
|
85 |
|
86 | * hold -> change -> **release(forced release)**
|
87 |
|
88 |
|
89 |
|
90 | ## How to start developing egjs-axes?
|
91 |
|
92 | For anyone interested to develop egjs-axes, follow the instructions below.
|
93 |
|
94 | ### Development Environment
|
95 |
|
96 | #### 1. Clone the repository
|
97 |
|
98 | Clone the egjs-axes repository and install the dependency modules.
|
99 |
|
100 | ```bash
|
101 | # Clone the repository.
|
102 | $ git clone https://github.com/naver/egjs-axes.git
|
103 | ```
|
104 |
|
105 | #### 2. Install dependencies
|
106 | `npm` is supported.
|
107 |
|
108 | ```
|
109 | # Install the dependency modules.
|
110 | $ npm install
|
111 | ```
|
112 |
|
113 | #### 3. Build
|
114 |
|
115 | Use npm script to build eg.Axes
|
116 |
|
117 | ```bash
|
118 | # Run webpack-dev-server for development
|
119 | $ npm start
|
120 |
|
121 | # Build
|
122 | $ npm run build
|
123 |
|
124 | # Generate jsdoc
|
125 | $ npm run jsdoc
|
126 | ```
|
127 |
|
128 | Two folders will be created after complete build is completed.
|
129 |
|
130 | - **dist** folder: Includes the **axes.js** and **axes.min.js** files.
|
131 | - **doc** folder: Includes API documentation. The home page for the documentation is **doc/index.html**.
|
132 |
|
133 | ### Linting
|
134 |
|
135 | To keep the same code style, we adopted [TSLint](https://palantir.github.io/tslint/) to maintain our code quality.
|
136 |
|
137 | ```bash
|
138 | $ npm run lint
|
139 | ```
|
140 |
|
141 | ### Test
|
142 |
|
143 | Once you created a branch and done with development, you must perform a test running `npm run test` command before you push code to a remote repository.
|
144 |
|
145 | ```bash
|
146 | $ npm run test
|
147 | ```
|
148 | Running a `npm run test` command will start [Mocha](https://mochajs.org/) tests via [Karma-runner](https://karma-runner.github.io/).
|
149 |
|
150 |
|
151 | ## Bug Report
|
152 |
|
153 | If you find a bug, please report it to us using the [Issues](https://github.com/naver/egjs-axes/issues) page on GitHub.
|
154 |
|
155 |
|
156 | ## License
|
157 | egjs-axes is released under the [MIT license](https://github.com/naver/egjs-axes/blob/master/LICENSE).
|
158 |
|
159 |
|
160 | ```
|
161 | Copyright (c) 2017 NAVER Corp.
|
162 |
|
163 | Permission is hereby granted, free of charge, to any person obtaining a copy
|
164 | of this software and associated documentation files (the "Software"), to deal
|
165 | in the Software without restriction, including without limitation the rights
|
166 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
167 | copies of the Software, and to permit persons to whom the Software is
|
168 | furnished to do so, subject to the following conditions:
|
169 |
|
170 | The above copyright notice and this permission notice shall be included in
|
171 | all copies or substantial portions of the Software.
|
172 |
|
173 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
174 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
175 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
176 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
177 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
178 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
179 | THE SOFTWARE.
|
180 | ```
|