Merge pull request #6 from myhirra/master

format 增加折叠所有

chrome/static/css/fe-jsonformat.css

@@ -1,11 +1,11 @@
 #jfContent{-webkit-user-select:text;margin:0;}
 #optionBar{-webkit-user-select:none;display:block;position:absolute;top:0px;right:0px}
-#buttonFormatted,#buttonPlain,#btnDownload{-webkit-border-radius:2px;-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.1);
-	-webkit-user-select:none;background:-webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
-	border:1px solid #aaa;color:#444;font-size:12px;margin-bottom:0px;min-width:4em;padding:3px 0;
-	position:relative;z-index:10;display:inline-block;width:80px;
-	text-shadow:1px 1px rgba(255,255,255,0.3)}
-#buttonFormatted{margin-left:0;border-top-left-radius:0;border-bottom-left-radius:0}
+#buttonFormatted,#buttonPlain,#btnDownload,#buttonCollapseAll{-webkit-border-radius:2px;-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.1);
+    -webkit-user-select:none;background:-webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
+    border:1px solid #aaa;color:#444;font-size:12px;margin-bottom:0px;min-width:4em;padding:3px 0;
+    position:relative;z-index:10;display:inline-block;width:80px;
+    text-shadow:1px 1px rgba(255,255,255,0.3)}
+#buttonFormatted,#buttonCollapseAll{margin-left:0;border-top-left-radius:0;border-bottom-left-radius:0}
 #buttonPlain{margin-right:0;border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}
 #btnDownload {
     padding: 4px 10px;
@@ -15,11 +15,11 @@
     display: inline-block;
 }
 #buttonFormatted:hover,#buttonPlain:hover,#btnDownload:hover{-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
-	background:#ebebeb -webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);border-color:#999;color:#222}
+    background:#ebebeb -webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);border-color:#999;color:#222}
 #buttonFormatted:active,#buttonPlain:active{-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.2);
-	background:#ebebeb -webkit-linear-gradient(#f4f4f4, #efefef 40%, #dcdcdc);color:#333}
+    background:#ebebeb -webkit-linear-gradient(#f4f4f4, #efefef 40%, #dcdcdc);color:#333}
 #buttonFormatted.selected,#buttonPlain.selected{-webkit-box-shadow:inset 0px 1px 5px rgba(0,0,0,0.2);
-	background:#ebebeb -webkit-linear-gradient(#e4e4e4, #dfdfdf 40%, #dcdcdc);color:#333}
+    background:#ebebeb -webkit-linear-gradient(#e4e4e4, #dfdfdf 40%, #dcdcdc);color:#333}
 #jsonpOpener,#jsonpCloser{padding:4px 0 0 8px;color:black;margin-bottom:-6px}
 #jsonpCloser{margin-top:0}
 #formattedJson{padding-left:28px;padding-top:6px}pre{padding:36px 5px 5px 5px}
@@ -35,8 +35,8 @@
 .collapsed>.ell{margin:0 4px;color:#888}
 .collapsed .kvov{display:inline}
 .e{width:20px;height:18px;display:block;position:absolute;left:-2px;top:1px;z-index:5;
-	background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAD1JREFUeNpiYGBgOADE%2F3Hgw0DM4IRHgSsDFOzFInmMAQnY49ONzZRjDFiADT7dMLALiE8y4AGW6LoBAgwAuIkf%2F%2FB7O9sAAAAASUVORK5CYII%3D");
-	background-repeat:no-repeat;background-position:center center;display:block;opacity:0.15}
+    background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAD1JREFUeNpiYGBgOADE%2F3Hgw0DM4IRHgSsDFOzFInmMAQnY49ONzZRjDFiADT7dMLALiE8y4AGW6LoBAgwAuIkf%2F%2FB7O9sAAAAASUVORK5CYII%3D");
+    background-repeat:no-repeat;background-position:center center;display:block;opacity:0.15}
 .collapsed>.e{-webkit-transform:rotate(-90deg);width:18px;height:20px;left:0px;top:0px}
 .e:hover{opacity:0.35}.e:active{opacity:0.5}.collapsed .kvov .e{display:none}
 .blockInner{display:block;padding-left:24px;border-left:1px dotted #bbb;margin-left:2px}
@@ -52,16 +52,16 @@
 @-webkit-keyframes spin{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}
 #spinner{-webkit-animation:spin 1s 0 infinite}*{-webkit-font-smoothing:antialiased}
 #jfContent .x-json-tips {
-	color:red;
+    color:red;
 }
 #jfContent_pre {padding:0;margin:0;
-	word-break:break-word;
+    word-break:break-word;
 }
 
 html {
-	background:url(../img/baidufe_bj.gif);
-	font-size: 14px;
-	color:#333;
+    background:url(../img/baidufe_bj.gif);
+    font-size: 14px;
+    color:#333;
     direction: ltr;
 }
 html body {
@@ -69,36 +69,36 @@ html body {
     direction: inherit;
 }
 .mod-json {
-	width:980px;
-	margin:0 auto;
-	position: relative;
+    width:980px;
+    margin:0 auto;
+    position: relative;
 }
 .mod-json fieldset {
-	border : 1px solid #bbb;
-	margin:0 0 10px;
+    border : 1px solid #bbb;
+    margin:0 0 10px;
 }
 .mod-json fieldset legend {
-	padding:0 5px;
-	color:red;
+    padding:0 5px;
+    color:red;
 }
 .mod-json .format-item {
-	line-height: 16px;
+    line-height: 16px;
 }
 .mod-json .format-item textarea{
-	width:945px;
-	height:120px;
-	padding:2px 5px;
-	margin:0 auto;
-	resize:none;
+    width:945px;
+    height:120px;
+    padding:2px 5px;
+    margin:0 auto;
+    resize:none;
 }
 .mod-json .format-item button{
-	width:80px;
-	height:30px;
-	float: right;
+    width:80px;
+    height:30px;
+    float: right;
 }
 .mod-json .rst-item {
-	position: relative;
-	padding-top:30px;
+    position: relative;
+    padding-top:30px;
 }
 .mod-contentscript {
     width: auto;

chrome/static/js/jsonformat/json-format-ent.js

@@ -80,12 +80,15 @@ var JsonFormatEntrance = (function () {
 
                 // Create toggleFormat button
                 var buttonPlain = document.createElement('button'),
-                    buttonFormatted = document.createElement('button');
+                    buttonFormatted = document.createElement('button'),
+                    buttonCollapseAll = document.createElement('button');
                 buttonPlain.id = 'buttonPlain';
                 buttonPlain.innerText = '元数据';
                 buttonFormatted.id = 'buttonFormatted';
                 buttonFormatted.innerText = '格式化';
                 buttonFormatted.classList.add('selected');
+                buttonCollapseAll.id = 'buttonCollapseAll';
+                buttonCollapseAll.innerText = '折叠所有'
 
                 var plainOn = false;
                 buttonPlain.addEventListener('click', function () {
@@ -112,9 +115,23 @@ var JsonFormatEntrance = (function () {
                     }
                 }, false);
 
+                buttonCollapseAll.addEventListener('click', function () {
+                    // When collapaseAll button clicked...
+                    if (!plainOn) {
+                        if(buttonCollapseAll.innerText == '折叠所有'){
+                            buttonCollapseAll.innerText = '展开所有';
+                            collapse(document.getElementsByClassName('objProp'));
+                        }else{
+                            buttonCollapseAll.innerText = '折叠所有';
+                            expand(document.getElementsByClassName('objProp'));
+                        }
+                    }
+                }, false);
+
                 // Put it in optionBar
                 optionBar.appendChild(buttonPlain);
                 optionBar.appendChild(buttonFormatted);
+                optionBar.appendChild(buttonCollapseAll);
 
                 // Attach event handlers
                 document.addEventListener('click', generalClick, false);
@@ -144,7 +161,7 @@ var JsonFormatEntrance = (function () {
     var lastKvovIdGiven = 0;
 
     function collapse(elements) {
-        // console.log('elements', elements) ;
+        console.log('elements', elements) ;
 
         var el, i, blockInner, count;