Merge pull request #9 from RedgooseDev/dev-0.2

version 0.2
redgoose-dev · Jul 7, 2014 · 660275d · 660275d
2 parents d9c8c85 + 3f276c7
commit 660275d
Show file tree

Hide file tree

Showing 8 changed files with 685 additions and 674 deletions.
diff --git a/README.md b/README.md
@@ -9,24 +9,25 @@ json 데이터 import로 데이터를 에디터로 가져올 수 있고, export
 데모페이지 : (준비중입니다.)
 
 
-##사용방법
-다운받아서 index페이지를 열어보면 샘플 데이터가 불러와져있고, "export JSON"버튼을 누르면 그 아래에 json데이터 결과물을 확인할 수 있습니다.
-
-먼저 `<head/>` 엘리먼트에서 아래와 같이 jsonEditor.css 파일을 로드합니다.
+##Installation
+###Step 1. 파일링크
+먼저 JSONEditor를 사용하기 위하여 jQuery라이브러리와 드래그 jQuery 플러그인, JSONEditor js와 css파일을 먼저 불러들여서 사용할 준비를 해야합니다.
 ```
 <link rel="stylesheet" href="./css/jsonEditor.css" />
+<script src="./js/jquery-2.1.1.min.js"></script>
+<script src="./js/jquery-sortable.js"></script>
+<script src="./js/JSONEditor.class.js"></script>
 ```
 
-그리고 중간에 `<div class="jsonEditor"> ... </div>` 엘리먼트 부분을 때내어 작업할 곳에다 붙여넣습니다.
-
-그 다음은 아래 소스와 같이 제이쿼리와 관련 자바스크립트 소스를 로드합니다.
+###Step 2. 출력할 위치에 엘리먼트 삽입
+에디터가 만들어지는 위치에서 아래와 같은 엘리먼트를 넣어줍니다.  
+css의 class이름이 "JSONEditor"으로 되어있는데 이름을 수정하려면 css에 있는 class이름도 수정해야합니다.
 ```
-<script src="./js/jquery-2.1.1.min.js"></script>
-<script src="./js/jquery-sortable.js"></script>
-<script src="./js/jsonEditor.js"></script>
+<div class="JSONEditor"></div>
 ```
 
-마지막으로 아래 소스와 같이 JSONEditor 클래스를 초기화합니다.
+###Step 3. JSONEditor 인스턴스 객체 만들기
+이제 실질적으로 사용하기 위하여 인스턴스 객체를 만듭니다. 객체를 만들때 필요한 엘리먼트와 이벤트를 만들게 됩니다.
 ```
 <script>
 jQuery(function($){
@@ -39,7 +40,10 @@ jQuery(function($){
 
 
 ##브라우저 지원
-맥용 사파리에서 개발했으며, 크롬과 파이어폭스에서 정상작동하지만 IE에서 테스트해보지 않았습니다.
+맥용 사파리에서 개발했으며, 크롬과 파이어폭스에서 정상작동하지만 IE에서 테스트해보지 않았습니다.  
 구 브라우저를 지원하지 않는 속성들이 사용되어서 구버전의 브라우저에서 사용은 권장되지 않습니다.
 
-테스트 브라우저 : 사파리, 크롬, 파이어폭스
+###테스트 브라우저
+* 사파리
+* 크롬
+* 파이어폭스
diff --git a/css/extra.css b/css/extra.css
@@ -2,6 +2,8 @@
 
 body { margin: 0; padding: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.428571429; color: #333; background: #fff; }
 
+pre { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
+
 main { margin: 15px; position: relative; }
 main > header > h1 { margin: 0; padding: 0 0 5px; font-size: 24px; }
 main > header > h1 a { color: #111; text-decoration: none; }

diff --git a/css/extra.scss b/css/extra.scss
@@ -10,7 +10,7 @@ body {
 	font-size: 14px; line-height: 1.428571429; color: #333;
 	background: #fff;
 }
-
+pre {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}
 
 main {
 	margin: 15px; position: relative;

diff --git a/css/jsonEditor.css b/css/jsonEditor.css
@@ -1,70 +1,70 @@
 /* sprite images */
-.jsonEditor > .index li > dl > dt > button, .jsonEditor > .context li[role=Type]:after, .jsonEditor > .context li[role=Insert]:after { display: inline-block; background: url("../img/sp-icon@x1.png") 0 0 no-repeat; }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .jsonEditor > .index li > dl > dt > button, .jsonEditor > .context li[role=Type]:after, .jsonEditor > .context li[role=Insert]:after { background-image: url("../img/sp-icon@x2.png"); background-size: 100px 50px; } }
+.JSONEditor > .index li > dl > dt > button, .JSONEditor > .context li[role=Type]:after, .JSONEditor > .context li[role=Insert]:after { display: inline-block; background: url("../img/sp-icon@x1.png") 0 0 no-repeat; }
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .JSONEditor > .index li > dl > dt > button, .JSONEditor > .context li[role=Type]:after, .JSONEditor > .context li[role=Insert]:after { background-image: url("../img/sp-icon@x2.png"); background-size: 100px 50px; } }
 
 /* json editor */
-.jsonEditor { /* index */ /* Context */ }
-.jsonEditor > .index { border-width: 1px 0; border-style: solid; border-color: #ccc; font-size: 13px; }
-.jsonEditor > .index ul { margin: 0; padding: 0 0 0 22px; list-style: none; clear: both; }
-.jsonEditor > .index > ul { margin: 5px 0; padding-left: 0; }
-.jsonEditor > .index li { padding: 0; margin: 2px 0; }
-.jsonEditor > .index li > dl { margin: 0; display: table; width: 100%; }
-.jsonEditor > .index li > dl > dt, .jsonEditor > .index li > dl > dd { display: table-cell; vertical-align: top; padding: 3px 5px; }
-.jsonEditor > .index li > dl > dt { width: 30px; white-space: nowrap; padding-left: 0; padding-right: 8px; color: #333; }
-.jsonEditor > .index li > dl > dt em { display: inline-block; font-style: normal; color: #999; }
-.jsonEditor > .index li > dl > dt > em.no { margin: 0 3px 0 5px; display: none; }
-.jsonEditor > .index li > dl > dt > em.no:before { content: '['; }
-.jsonEditor > .index li > dl > dt > em.no:after { content: ']'; }
-.jsonEditor > .index li > dl > dt > strong { display: inline-block; font-weight: normal; min-width: 40px; }
-.jsonEditor > .index li > dl > dt > strong:empty:not(:focus):before { content: attr(data-ph); color: #aaa; }
-.jsonEditor > .index li > dl > dt > .type { display: none; color: #999; }
-.jsonEditor > .index li > dl > dt > em.count { margin: 0 0 0 4px; }
-.jsonEditor > .index li > dl > dt > button { display: inline-block; margin: -3px 0; cursor: pointer; text-indent: -9999px; width: 24px; height: 24px; border: none; }
-.jsonEditor > .index li > dl > dt > button.on { background-color: #eee; }
-.jsonEditor > .index li > dl > dt > button[role=toggle] { background-position: 9px -23px; }
-.jsonEditor > .index li > dl > dd { position: relative; padding-left: 12px; color: #666; }
-.jsonEditor > .index li > dl > dd:before { content: ':'; display: block; position: absolute; left: 0; top: 2px; }
-.jsonEditor > .index li > dl > dd > span { min-width: 40px; }
-.jsonEditor > .index li > dl > dd > span:empty:not(:focus):before { content: 'empty'; color: #aaa; }
-.jsonEditor > .index li > ul { display: none; }
-.jsonEditor > .index li.on > dl > dt > [role=toggle] { background-position: -8px -21px; }
-.jsonEditor > .index li.on > ul { display: block; }
-.jsonEditor > .index li[type=Object] > dl > dt > .count:before { content: '{'; }
-.jsonEditor > .index li[type=Object] > dl > dt > .count:after { content: '}'; }
-.jsonEditor > .index li[type=Object] > dl > dt > .type:before { content: 'Object'; }
-.jsonEditor > .index li[type=Object] > dl > dd { display: none; }
-.jsonEditor > .index li[type=Array] > dl > dt > .count:before { content: '['; }
-.jsonEditor > .index li[type=Array] > dl > dt > .count:after { content: ']'; }
-.jsonEditor > .index li[type=Array] > dl > dt > .type:before { content: 'Array'; }
-.jsonEditor > .index li[type=Array] > dl > dd { display: none; }
-.jsonEditor > .index li[type=Array] > ul > li > dl > dt > .no { display: inline-block; }
-.jsonEditor > .index li[type=Array] > ul > li[type=String] > dl > dt > strong { display: none; }
-.jsonEditor > .index li[type=Array] > ul > li[type=Object] > dl > dt > strong, .jsonEditor > .index li[type=Array] > ul > li[type=Array] > dl > dt > strong { display: none; }
-.jsonEditor > .index li[type=Array] > ul > li[type=Object] > dl > dt > .type, .jsonEditor > .index li[type=Array] > ul > li[type=Array] > dl > dt > .type { display: inline; }
-.jsonEditor > .index li[type=String] > dl > dt > strong { margin-left: 8px; }
-.jsonEditor > .index li[type=String] > dl > dt > .count { display: none; }
-.jsonEditor > .index li[type=String] > dl > dt > button[role=toggle] { display: none; }
-.jsonEditor > .index li[type=String] > dl > dt > .type:before { content: 'String'; }
-.jsonEditor > .index li[type=String] > ul { display: none; }
-.jsonEditor > .index li[loc=root] > dl > dt > strong { display: none; }
-.jsonEditor > .index li[loc=root] > dl > dt > .type { display: inline; }
-.jsonEditor > .index button[role=move] { background-position: -50px -26px; }
-.jsonEditor > .index button[role=control] { background-position: -73px -24px; }
-.jsonEditor > .index li.placeholder { position: relative; }
-.jsonEditor > .index li.placeholder:before { position: absolute; content: ''; left: 0; right: 0; top: -1px; height: 3px; background: #7a7c7d; }
-.jsonEditor > .context { position: absolute; left: 0; top: 0; min-width: 120px; display: none; }
-.jsonEditor > .context ul { margin: 0; padding: 0; list-style: none; border: 1px solid #ccc; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); background: #fff; }
-.jsonEditor > .context ul > li { position: relative; margin: 0; }
-.jsonEditor > .context ul > li > button { display: block; margin: 0; padding: 7px 8px; width: 100%; cursor: pointer; color: #333; font-size: 12px; border: none; background: none; text-align: left; }
-.jsonEditor > .context ul > li:hover > button { background: #eee; }
-.jsonEditor > .context > ul > li > div { position: relative; display: none; z-index: 2; }
-.jsonEditor > .context > ul > li > div > ul { position: absolute; left: 98%; top: -1px; min-width: 100px; }
-.jsonEditor > .context > ul > li:hover > div { display: block; }
-.jsonEditor > .context[type] { display: block; }
-.jsonEditor > .context[type=String] > ul > li[role=Insert] { display: none; }
-.jsonEditor > .context[loc=root] > ul > li[role=Duplicate], .jsonEditor > .context[loc=root] > ul > li[role=Remove] { display: none; }
-.jsonEditor > .context[loc=root] > ul > li[role=Type] li[role=String] { display: none; }
-.jsonEditor > .context li[role=Type]:after, .jsonEditor > .context li[role=Insert]:after { content: ''; display: block; z-index: 1; width: 5px; height: 8px; margin-top: -4px; position: absolute; right: 10px; top: 50%; background-position: 0 -30px; }
+.JSONEditor { /* index */ /* Context */ }
+.JSONEditor > .index { border-width: 1px 0; border-style: solid; border-color: #ccc; font-size: 13px; }
+.JSONEditor > .index ul { margin: 0; padding: 0 0 0 22px; list-style: none; clear: both; }
+.JSONEditor > .index > ul { margin: 5px 0; padding-left: 0; }
+.JSONEditor > .index li { padding: 0; margin: 2px 0; }
+.JSONEditor > .index li > dl { margin: 0; display: table; width: 100%; }
+.JSONEditor > .index li > dl > dt, .JSONEditor > .index li > dl > dd { display: table-cell; vertical-align: top; padding: 3px 5px; }
+.JSONEditor > .index li > dl > dt { width: 30px; white-space: nowrap; padding-left: 0; padding-right: 8px; color: #333; }
+.JSONEditor > .index li > dl > dt em { display: inline-block; font-style: normal; color: #999; }
+.JSONEditor > .index li > dl > dt > em.no { margin: 0 3px 0 5px; display: none; }
+.JSONEditor > .index li > dl > dt > em.no:before { content: '['; }
+.JSONEditor > .index li > dl > dt > em.no:after { content: ']'; }
+.JSONEditor > .index li > dl > dt > strong { display: inline-block; font-weight: normal; min-width: 40px; }
+.JSONEditor > .index li > dl > dt > strong:empty:not(:focus):before { content: attr(data-ph); color: #aaa; }
+.JSONEditor > .index li > dl > dt > .type { display: none; color: #999; }
+.JSONEditor > .index li > dl > dt > em.count { margin: 0 0 0 4px; }
+.JSONEditor > .index li > dl > dt > button { display: inline-block; margin: -3px 0; cursor: pointer; text-indent: -9999px; width: 24px; height: 24px; border: none; }
+.JSONEditor > .index li > dl > dt > button.on { background-color: #eee; }
+.JSONEditor > .index li > dl > dt > button[role=toggle] { background-position: 9px -23px; }
+.JSONEditor > .index li > dl > dd { position: relative; padding-left: 12px; color: #666; }
+.JSONEditor > .index li > dl > dd:before { content: ':'; display: block; position: absolute; left: 0; top: 2px; }
+.JSONEditor > .index li > dl > dd > span { min-width: 40px; }
+.JSONEditor > .index li > dl > dd > span:empty:not(:focus):before { content: 'empty'; color: #aaa; }
+.JSONEditor > .index li > ul { display: none; }
+.JSONEditor > .index li.on > dl > dt > [role=toggle] { background-position: -8px -21px; }
+.JSONEditor > .index li.on > ul { display: block; }
+.JSONEditor > .index li[type=Object] > dl > dt > .count:before { content: '{'; }
+.JSONEditor > .index li[type=Object] > dl > dt > .count:after { content: '}'; }
+.JSONEditor > .index li[type=Object] > dl > dt > .type:before { content: 'Object'; }
+.JSONEditor > .index li[type=Object] > dl > dd { display: none; }
+.JSONEditor > .index li[type=Array] > dl > dt > .count:before { content: '['; }
+.JSONEditor > .index li[type=Array] > dl > dt > .count:after { content: ']'; }
+.JSONEditor > .index li[type=Array] > dl > dt > .type:before { content: 'Array'; }
+.JSONEditor > .index li[type=Array] > dl > dd { display: none; }
+.JSONEditor > .index li[type=Array] > ul > li > dl > dt > .no { display: inline-block; }
+.JSONEditor > .index li[type=Array] > ul > li[type=String] > dl > dt > strong { display: none; }
+.JSONEditor > .index li[type=Array] > ul > li[type=Object] > dl > dt > strong, .JSONEditor > .index li[type=Array] > ul > li[type=Array] > dl > dt > strong { display: none; }
+.JSONEditor > .index li[type=Array] > ul > li[type=Object] > dl > dt > .type, .JSONEditor > .index li[type=Array] > ul > li[type=Array] > dl > dt > .type { display: inline; }
+.JSONEditor > .index li[type=String] > dl > dt > strong { margin-left: 8px; }
+.JSONEditor > .index li[type=String] > dl > dt > .count { display: none; }
+.JSONEditor > .index li[type=String] > dl > dt > button[role=toggle] { display: none; }
+.JSONEditor > .index li[type=String] > dl > dt > .type:before { content: 'String'; }
+.JSONEditor > .index li[type=String] > ul { display: none; }
+.JSONEditor > .index li[loc=root] > dl > dt > strong { display: none; }
+.JSONEditor > .index li[loc=root] > dl > dt > .type { display: inline; }
+.JSONEditor > .index button[role=move] { background-position: -50px -26px; }
+.JSONEditor > .index button[role=control] { background-position: -73px -24px; }
+.JSONEditor > .index li.placeholder { position: relative; }
+.JSONEditor > .index li.placeholder:before { position: absolute; content: ''; left: 0; right: 0; top: -1px; height: 3px; background: #7a7c7d; }
+.JSONEditor > .context { position: absolute; left: 0; top: 0; min-width: 120px; display: none; }
+.JSONEditor > .context ul { margin: 0; padding: 0; list-style: none; border: 1px solid #ccc; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); background: #fff; }
+.JSONEditor > .context ul > li { position: relative; margin: 0; }
+.JSONEditor > .context ul > li > button { display: block; margin: 0; padding: 7px 8px; width: 100%; cursor: pointer; color: #333; font-size: 12px; border: none; background: none; text-align: left; }
+.JSONEditor > .context ul > li:hover > button { background: #eee; }
+.JSONEditor > .context > ul > li > div { position: relative; display: none; z-index: 2; }
+.JSONEditor > .context > ul > li > div > ul { position: absolute; left: 98%; top: -1px; min-width: 100px; }
+.JSONEditor > .context > ul > li:hover > div { display: block; }
+.JSONEditor > .context[type] { display: block; }
+.JSONEditor > .context[type=String] > ul > li[role=Insert] { display: none; }
+.JSONEditor > .context[loc=root] > ul > li[role=Duplicate], .JSONEditor > .context[loc=root] > ul > li[role=Remove] { display: none; }
+.JSONEditor > .context[loc=root] > ul > li[role=Type] li[role=String] { display: none; }
+.JSONEditor > .context li[role=Type]:after, .JSONEditor > .context li[role=Insert]:after { content: ''; display: block; z-index: 1; width: 5px; height: 8px; margin-top: -4px; position: absolute; right: 10px; top: 50%; background-position: 0 -30px; }
 
 /* jQuery Sortable */
 body.dragging { width: 100%; overflow: hidden; }

diff --git a/css/jsonEditor.scss b/css/jsonEditor.scss
@@ -10,7 +10,7 @@
 
 
 /* json editor */
-.jsonEditor {
+.JSONEditor {
 	/* index */
 	> .index {
 		border-width: 1px 0; border-style: solid; border-color: #ccc;

diff --git a/index.html b/index.html
@@ -15,93 +15,27 @@ <h1><a href="./">JSON Manager</a></h1>
 	<!-- // Header -->
 
 	<!-- JSON editor -->
-	<div class="jsonEditor">
-		<!-- index -->
-		<div class="index">
-			<ul>
-				<li type="Object" loc="root" class="on">
-					<dl>
-						<dt>
-							<button type="button" role="control">control</button>
-							<button type="button" role="toggle">toggle</button>
-							<em class="no">0</em><strong data-ph="Object"></strong><span class="type"></span><em class="count">0</em>
-						</dt>
-					</dl>
-					<ul></ul>
-				</li>
-			</ul>
-		</div>
-		<!-- // index -->
-		<!-- context -->
-		<nav class="context">
-			<ul>
-				<li role="Type">
-					<div>
-						<ul>
-							<li role="Object">
-								<button type="button">Object</button>
-							</li>
-							<li role="Array">
-								<button type="button">Array</button>
-							</li>
-							<li role="String">
-								<button type="button">String</button>
-							</li>
-						</ul>
-					</div>
-					<button type="button">Type</button>
-				</li>
-				<li role="Insert">
-					<div>
-						<ul>
-							<li role="Object">
-								<button type="button">Object</button>
-							</li>
-							<li role="Array">
-								<button type="button">Array</button>
-							</li>
-							<li role="String">
-								<button type="button">String</button>
-							</li>
-						</ul>
-					</div>
-					<button type="button">Insert</button>
-				</li>
-				<li role="Duplicate">
-					<button type="button">Duplicate</button>
-				</li>
-				<li role="Remove">
-					<button type="button">Remove</button>
-				</li>
-			</ul>
-		</nav>
-		<!-- // context -->
-	</div>
-	<!-- // JSON editor index -->
+	<div class="JSONEditor"></div>
+	<!-- // JSON editor -->
 
-	<!-- JSON Result -->
+	<!-- result -->
 	<div id="jsonResult">
 		<nav class="btngroup">
 			<button type="button" role="btn_toJSON">Export JSON</button>
 		</nav>
 		<pre></pre>
 	</div>
-	<!-- // JSON Result -->
+	<!-- // result -->
 </main>
 
 <script src="./js/jquery-2.1.1.min.js"></script>
 <script src="./js/jquery-sortable.js"></script>
-<script src="./js/jsonEditor.js"></script>
+<script src="./js/JSONEditor.class.js"></script>
 <script>
 jQuery(function($){
-	var
-		$jsonEditor = $('div.jsonEditor'),
-		$index = $jsonEditor.children('div.index'),
-		jsonEditor = new JSONEditor($jsonEditor),
 
-		$jsonResult = $('#jsonResult')
-		$root = $index.find('li[loc=root]')
-	;
+	var $jsonEditor = $('div.JSONEditor');
+	var jsonEditor = new JSONEditor($jsonEditor);
 
 	// import json
 	try {
@@ -113,13 +47,14 @@ <h1><a href="./">JSON Manager</a></h1>
 	if (Array.isArray(json))
 	{
 		jsonEditor.typeItem({
-			active : $root,
+			active : $jsonEditor.find('li[loc=root]'),
 			type : 'Array'
 		});
 	}
-	jsonEditor.importJSON(json, $root);
+	jsonEditor.importJSON(json);
 
 	// Export json
+	var $jsonResult = $('#jsonResult');
 	$jsonResult.find('button[role=btn_toJSON]').on('click', function(){
 		$jsonResult.children('pre').text(jsonEditor.exportJSON(5));
 	});