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.

• Usage Examples of egjs: http://codepen.io/egjs
• API Documentation
  • Latest: https://naver.github.io/egjs/latest/doc
  • Specific version: https://naver.github.io/egjs/[VERSION]/doc
• 한국어 readme

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.
  • API Documentation
  • Usage Examples
• eg.Class: A module that enables developing classes in object-oriented programming style.
  • API Documentation
  • Usage Examples
• eg.Component: A base class utility that manages events and options in modules.
  • API Documentation
  • Usage Examples
• eg.MovableCoord: A module that transforms user coordinates into logical coordinates in a virtual coordinate system.
  • API Documentation
  • Usage Examples, Usage Examples (CodePen)
• eg.Flicking: A module that implements flicking.
  • API Documentation
  • Usage Examples, Usage Examples (CodePen)
• eg.Visible: A module that checks if an element is visible in the base element or viewport.
  • API Documentation
  • Usage Examples, Usage Examples (CodePen)
• eg.infiniteGrid: A module that arranges infinite card elements including content on a grid.
  • API Documentation
  • Usage Examples, Usage Examples (CodePen)

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.
  • API Documentation
  • Usage Examples, Usage Examples (CodePen)
• 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.
  • API Documentation
  • Usage Examples
• animate() method: A method extended from the jQuery animate() method. It supports CSS transform property and 3D acceleration.
  • API Documentation
  • Usage Examples
• pause() and resume() methods: Pauses and resumes animation executed by the jQuery animate() method.
  • API Documentation
  • Usage Examples, Usage Examples (CodePen)

Events

The following is a list of events extended from jQuery.

• rotate: An event that detects the orientation of the mobile device.
  • API Documentation
  • Usage Examples, Usage Examples (CodePen)
• scrollend: An event that detects the scrolling to bottom of the page.
  • API Documtation
  • Usage Examples, Usage Examples (CodePen)

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:

• Latest: http://naver.github.io/egjs/latest/dist/eg.js
• Specific version: http://naver.github.io/egjs/[VERSION]/dist/eg.js

For production (Compressed)

You can download the compressed files for production version from the following locations:

• Latest: http://naver.github.io/egjs/latest/dist/eg.min.js
• Specific version: http://naver.github.io/egjs/[VERSION]/dist/eg.min.js

Using CDN

To create a link to a file provided over CDN, you must check the file URL in the CDN service.

• cdnjs: https://cdnjs.com/libraries/egjs
• jsDelivr: https://www.jsdelivr.com/projects/egjs

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.

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.

...
<!-- Load jQuery -->
<script src="node_modules/jquery/dist/jquery.js"></script>
 
<!-- Load egjs packaged with all dependencies (Hammer.js) -->
<!-- Load from your local installation -->
<script src="bower_components/egjs/dist/pkgd/eg.pkgd.min.js"></script>
 
<!-- Or load from CDN -->
<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  # Install grunt-cli

2. Clone the repository

Clone the egjs depository and install the Bower and npm dependency modules.

# Create and move a folder.
$ mkdir egjs && cd egjs
 
# Clone a repository.
$ 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.