naver / jindojs-jindo Goto Github PK

Jindo JavaScript Framework

JavaScript 70.75% CSS 0.81% HTML 28.24% PHP 0.04% ActionScript 0.16%

jindojs-jindo's Introduction

This project is no longer maintained since 2017. Please use alternatives libraries as 'jQuery' and 'egjs' instead of Jindo and JC/JMC. If you need to migrate, check out migration documents(jQuery/JMC) listed as below.

Jindo JavaScript Framework - Do more, easier and faster

Jindo is open source JavaScript framework developed by NAVER Corp. since 2010 (originally the project was started since 2007, but has been redeveloped completely from that year), providing a lot of useful methods in a way of wrapping native object and extending it.

Jindo is the main JavaScript framework used for developing most of NAVER's web products.

Jindo is part of JindoJS family product

JindoJS consists with : Jindo, Jindo Component and Jindo Mobile Component

Official website : http://jindo.dev.naver.com/

Online API Documentation :

English : http://jindo.dev.naver.com/docs/jindo/latest/desktop/en/

Korean : http://jindo.dev.naver.com/docs/jindo/latest/desktop/ko/

Download

You can download customized version at Jindo download page :

Or download with Bower :

$ bower install jindojs-jindo

Modules

$ : Select DOM elements by id or create new one.
$Jindo : Provide information about Jindo and utility methods.
$Class : Provide methods to make object oriented programming style code.
$$(cssquery) : CSS selector engine.
$Agent : Provide information about browser, operating systems and user's system.
$A : Utility methods handling Array.
$H : Make enumerated key/value pair object hash, and provide utility methods to handle.
$Fn : Wrap native Function object and extend it providing utility methods.
$Event : Wrap native Event object and extend it providing utility methods.
$Element : Wrap native HTML element and provide useful utility methods.
$ElementList : Provide methods to handle more than one DOM elements at same time.
$Form : Provide utility methods to handle <form> element and its child elements.
$Document : Provide information about document element.
$Window : Wrap window object and provide useful methods.
$S : Wrap native String object and extend it providing utility methods.
$Json : Provide utility methods to handle JSON(JavaScript Object Notation).
$Ajax : Utility methods handling AJAX request and response.
$Date : Wrap native Date object and extend it providing utility methods.
$Cookie : Utility methods handling Cookie.
$Template : Template engine.

How to build your own version of Jindo

First, make directory where you want have the source of Jindo, then get the source from repo.

# make directory and enter
$ mkdir jindo && cd jindo

# get the clone from the repo
$ git clone https://github.com/naver/jindojs-jindo.git

# install dependency modules for build and build!
$ npm install && grunt

All of the build information like version, namespace setting, license, etc., can be found on 'package.json' file.
Build files can be found at './dist' directory and the structure will be like :

depth1	depth2	Explanation
./dist
	desktop	desktop version object files, which each object files merged with comments
	doc	API documentaion
	merged	Files which are merged and minified for distribution
	meta	meta files (dependencies info and changelog)
	mobile	mobile version object files, which each object files merged with comments

Running the Unit Test & Code Quality Tool

Jindo use QUnit for unit test and JSHint for code quality, so make sure you have all the necessary dependencies installed.

Running on command line

Running test on command line require Grunt installed on your machine.

# to install dependencies modules
$ npm install

# run JSHInt & QUnit test together
$ grunt qp

# run JSHInt only
$ grunt jshint

# run QUnit test for deskop and mobile version
$ grunt qunit

# run QUnit test for desktop version only
$ grunt qunit:desktop

# run QUnit test for mobile version only
$ grunt qunit:mobile

Running on browser

To run the test on your browser, you need to have a web server(like Apache) installed on your local machine.

# Test can be runned using via 1)runner file or 2)module file.

# 1) Runner file provide easy way for test modules separately or all test together.
http://localhost/jindo/test/[desktop|mobile]/runner.html?[all | module]

ex)
http://localhost/jindo/test/desktop/runner.html?all  # run all the desktop tests
http://localhost/jindo/test/mobile/runner.html?jindo.$Ajax  # run jindo.$Ajax mobile module test only


# 2) Module runner file
http://localhost/jindo/test/[desktop|mobile]/{$MODULE_NAME}.html

ex)
http://localhost/jindo/test/desktop/jindo.$Element.html  # run jindo.$Element desktop module test

i18n

For now, Jindo support Korean(ko) and English(en) as well.

Issues

When you find a bug, please report us via the GitHub issues page.

License

Who uses Jindo?

Important numbers of companies has been chosen JindoJS to build their web products. A few of them are listed below.

NAVER, LINE Q, CJMall, YES24, CGV, MBC, hangame, FOOTBALL DAY, U+, pxd, Kumkang, Chosun Ilbo, OhmyNews, FUNSHOP, SMBA, KTX

jindojs-jindo's People

Contributors

Stargazers

Watchers

Forkers

laziel moonpalace shallaa pakimchy wjdwithyou deepscanuser1 leedongjoon121 ham2sik bnasoft

jindojs-jindo's Issues

m.CubeReveal shows slides effect when closed on Galaxy S7 SBrowser.

m.CubeReveal shows slides effect when closed on Galaxy S7 SBrowser

Description

On Galaxy S7 SBrowser

Result

Expected

Steps to check or reproduce

http://jindo.nhncorp.com/docs/jindo-mobile/archive/1.17.1/demo/jindo.m.CubeReveal/3.%20leftCube.html
Click 'Hamburger' button --> Show menu
Click 'Hamburger' button --> Hide menu

It reproduce on step3

Duplicate parameter name

If jindo don`t use parameter that use "_". So The clouser complier notify of below message.

[jindo.desktop.ns.js]9922
Parse error. Duplicate parameter name "_".

[jindo.desktop.ns.js]19068
Parse error. Duplicate parameter name "_".

I think that If "_" name is duplicated that add squence postfix like "_1, _2".

$Template throws error when template variable isn't given.

var oTemplate = jindo.$Template("a:{=a}, b:{=b}");

oTemplate.process({a:"A",b:"B"});  // result: 'a:A,b:B'
oTemplate.process({a:"A"});  // Throws error. Result should be 'a:A,b:'

$Date constructor arguments set to 1 by default, when arguments are not given

When instantiating Date object parameters are optional.
new Date(yr_num,mo_num,day_num[,hr_num,min_num,sec_num]);

When omit some parameters the date values are set by default, but in $Date object values are set 1 by default which not coinciding with native Date object value.

new Date(2010,6);  // Thu Jul 01 2010 00:00:00 GMT+0900
jindo.$Date(2010,6)._date;  // Thu Jul 01 2010 01:01:01 GMT+0900, the result should be as above

$Template parse wrongly if contains escaped bracket character.

var oTemplate = jindo.$Template('<button type="button" onclick="(function(el, obj) \{obj.stop();\}(this, obj)"><span>{=name}</span></button>');

// returns '<button type="button" onclick="(function(el, obj) \'
// the result shoud be '<button type="button" onclick="(function(el, obj) {obj.stop();}(this, obj)"><span>data</span></button>'
oTemplate.process({ name: "data" });

Function.protype.bind error when binding native function

Function.prototype.call.bind(toString)()

When execute above code, it throws SCRIPT5023 error.
https://msdn.microsoft.com/query/dev12.query?appId=Dev12IDEF1&l=EN-US&k=k(VS.WebClient.Help.SCRIPT5023)

Add condition for function which don't have prototype.

When extend using $Class, the child object not return own $static value

var Parent = $Class({
    $static : {
        VERSION : 1
    },
    $init : function() {}
})

var Child = $Class({
    $static : {
        VERSION : 2
    },
    $init : function() {}
}).extend(Parent);

Parent.VERSION; // 1
Child.VERSION;  // 1 - should be 2

When child object has own static value, should return own value not the parent.

Remove use of RegExp.$n property value

The RegExp.$n property can be modified by RegExp matching execution. In some cases before accessing the matching value, could be executed another RegExp execution which will alter RegExp.$n value.

For ambiguity reasons, use of RegExp.$n should be removed.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#RegExp_Properties

g_checkVarType() conflict when using various version of Jindo in same page context

Parameter type checker function is assigned in global context and this cause conflict when different Jindo version are used in same page context.

var g_checkVarType = jindo.$Jindo.checkVarType;

Use of global context should be replaced to be each version's context.

Support $Agent#navigator in IE Edge.

Translate README.md to english

Translate current korean README.md to english and organize korean.

Ajax Parameter is disappeared.

When Ajax type is flash and some parameter value is multiple, parameter is wrong

ex)
-INPUT

imageListPath=some1.png&imageListPath=some2.png

OUTPUT

imageListPath=some1.png

$Ajax.SWFRequest : can't parse param data with escaped string values

    var oAjax = new $Ajax('http://some.com', {
        type : 'flash',
        method : 'POST',
        sendheader : false,
        onload : function(res){
            console.log(res);
        },
    });

    // throws error because of escaped param string
    // currently return " \\" ", should be " \\\" "
    oAjax.request({"input":" \\\" "});

$Template can't parse for statement when includes space after index variable

var template = "{for index : item in aItems}<span>{=item.text}</span>{/for}";
var oData = { aItems : [ text : 1, text : 2, text : 3 ] };

// expected result : <span>1</span><span>2</span><span>3</span>
// current result : ""
jindo.$Template(template).process(oData);

DOM based XSS on jindo.dev.naver.com

http://jindo.dev.naver.com/docs/jindo/2.12.1/desktop/en/classes/jindo.html#<img src=x onerror=alert(1)>

http://jindo.dev.naver.com/docs/jindo/2.12.1/desktop/en/assets/api-list.js
https://github.com/naver/jindojs-jindo/blob/master/build/api/theme/assets/api-list.js#L16-L18

http://jindo.dev.naver.com/docs/jindo/2.12.1/desktop/en/classes/jindo.$Element.html#constructor_jindo.%24Element

Should work even template variable isn't given.

// should return '<b></b>', but currently throws error
jindo.$Template('<b>{if sample}some{/if}</b>').process({});

jindo._p_.trim() slows down processing when string contains ideographic space.

When target string values contains ideographic space in the begining and end, process normally, but when it contains within string values it takes too long to process.

The slow down comes up when ideographic space are up to 25 characers.

    var ideographicSpace = Array(31).join(String.fromCharCode(12288));
    var text1 = ideographicSpace +'Hello world'+ ideographicSpace ;
    var text2 = ideographicSpace +'Hello'+ ideographicSpace  +'world'+ ideographicSpace ;

    jindo._p_.trim(text1);  // ok
    jindo._p_.trim(text2);  // takes more than 30sec to process

$Element.attach() when bind input event, fires more than once in IE8

IE8 doesn't support 'oninput' event. Internally applied a fallback of oninput event attaching 'onpropertychange' event.

When non-english value are set, onpropertychange event fires more than once when the value is in composition mode.

jindo.$Element("some").attach("input", function(e) {
    // fires more than once on non-english value
});

onpropertychange(oninput fallback) will be replaced to onkeyup event to avoid this issue.

Sanitize query param values

var oAjax = new $Ajax('server.php', {
    type : 'iframe',
    proxy : 'http://yourdomain/ajax_local_callback.html'
    ...
});

In case of using 'iframe' as a AJAX proxy, it usually used in conjunction with ajax_local_callback.html file as a proxy.

ajax_local_callback.html param values must be checked more strictly to avoid some security issues.

$Template can't parse nested variable value output syntax.

        var sResult = jindo.$Template("{set sShopListClass = (=htShopListClass[=item.aShop.length])} {=sShopListClass}")
            .process({
                htShopListClass: [ "a", "b", "c", "d" ],
                item : {
                    aShop: [1,2,3]
                }
            });

        // expected to print out 'd', but throws error, because of  (=htShopListClass[=item.aShop.length]) syntax
        console.log(sResult);

Add condition of jindo._p_._JINDO_IS_MO

jindo._p_._JINDO_IS_MO = /(iPhone|iPod|Mobile|Tizen|Android|Nokia|webOS|BlackBerry|Opera Mobi|Opera Mini)/.test(jindo._p_._j_ag);

jindo._p_._JINDO_IS_MO check agent. And $Event use jindo._p_._JINDO_IS_MO for touch event.
So When Touchable device and not jindo._p_._JINDO_IS_MO (like TV platform) that Jindo have been not worked some properties, methods(like pos..)