egjs
egjs is a jQuery-based JavaScript library consisting of UI interactions, effects, and utilities, which brings easiest and fastest way to build a web application in your way.
Components
The following is a list of egjs components.
- eg: As a default namespace, it is a collection of base utilities for egjs, which is used in diverse components.
- eg.Class: A module that enables developing classes in object-oriented programming style.
- eg.Component: A base class utility that manages events and options in modules.
- eg.MovableCoord: A module that transforms user coordinates into logical coordinates in a virtual coordinate system.
- eg.Flicking: A module that implements flicking.
- eg.Visible: A module that checks if an element is visible in the base element or viewport.
- eg.infiniteGrid: A module that arranges infinite card elements including content on a grid.
jQuery Extensions
egjs provides methods and events extended from jQuery.
Methods
The following is a list of methods extended from jQuery.
- persist() method: Stores the current state of a webpage into a key in JSON.
- prefixCss() method: Enables to add CSS vendor prefixes when you use some jQuery version(1.4.3 ~ 1.8.x) that does not support them.
- animate() method: A method extended from the jQuery animate() method. It supports CSS transform property and 3D acceleration.
- pause() and resume() methods: Pauses and resumes animation executed by the jQuery animate() method.
Events
The following is a list of events extended from jQuery.
- rotate: An event that detects the orientation of the mobile device.
- scrollend: An event that detects the scrolling to bottom of the page.
Downloads and Installation
In order to use egjs, you should download the JavaScript files or install it using Bower or npm.
For development (Uncompressed)
You can download the uncompressed files for development version from the following locations:
For production (Compressed)
You can download the compressed files for production version from the following locations:
Using CDN
To create a link to a file provided over CDN, you must check the file URL in the CDN service.
Installation with Bower
If you do not have Bower installed, install it using npm as follows:
$ npm install bower -g
The following code shows how to install egjs using Bower.
$ bower install egjs
Installation with npm
The following code shows how to install egjs using npm.
$ npm install egjs
Supported Browsers
The following table shows browsers supported by egjs.
Internet Explorer | Chrome | Firefox | Safari | iOS | Android |
---|
7+ | Latest | Latest | Latest | 7+ | 2.3+(except 3.x) |
Supported browser types and versions may vary depending on modules. For more information, see API documentation.
Dependency
egjs has the dependencies for the following libraries:
Except jQuery, library dependencies may vary depending on modules. For more information, see API documentation.
Let egjs load after jQuery loads.
...
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="bower_components/egjs/dist/pkgd/eg.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/egjs/1.3.0/pkgd/eg.pkgd.min.js"></script>
...
Note
For more information on loading dependency files except jQuery, see the "Download and Using egjs" page on GitHub Wikis.
You need to add the namespace, "eg", to use the egjs components as shown in the example below.
var Klass = eg.Class({
"construct" : function(){}
});
var Komponent = eg.Class.extend(eg.Component,{
"construct" : function(){}
});
egjs Development
For anyone interested to develop egjs, follow the instructions below.
Development Environment
1. Install grunt-cli
Install grunt-cli globally.
$ npm install grunt-cli -g
2. Clone the repository
Clone the egjs depository and install the Bower and npm dependency modules.
$ mkdir egjs && cd egjs
$ git clone https://github.com/naver/egjs.git
3. Install dependencies
Support npm and yarn.
# Install the dependencies modules.
$ npm install
# or
$ yarn
When add dependency library have to use yarn
.
4. Build
Use Grunt to build egjs.
$ grunt build
Two folders will be created after complete build is completed.
- dist folder: Includes the eg.js and eg.min.js files.
- doc folder: Includes API documentation. The home page for the documentation is doc/index.html.
Test
Once you create a branch and done with development, you must perform a test using the "grunt test" command before you push code to a remote repository.
$ grunt test
Running a "grunt test" command will start JShint, JSCS, QUnit, and istanbul.
- JShint and JSCS: Performs static checking and code style checking.
- QUnit: Performs unit tests of egjs.
- istanbul: Measures test coverage. The test results can be verified once the Grunt task is completed. Or you can use the ./report/index.html file to verify them.
Bug Report
If you find a bug, please report it to us using the Issues page on GitHub.
License
egjs is released under the MIT license.
Copyright (c) 2015 NAVER Corp.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.