format data feature basic

ccjoe · Jan 22, 2017 · be417cb · be417cb
1 parent f7b6b89
commit be417cb
Show file tree

Hide file tree

Showing 5 changed files with 391 additions and 373 deletions.
diff --git a/app/src/components/Ace.vue b/app/src/components/Ace.vue
@@ -61,19 +61,20 @@ export default {
     editor.setValue(vm.content, 1);
     editor.setShowPrintMargin(false);
     editor.on('change', function () {
+      console.log(editor.getValue())
       vm.$parent.$emit('editor-update', editor.getValue());
     });
     // this.editor.resize(true)
   },
 
   watch: {
     content: function (newContent) {
+      console.log(newContent, 'newContent')
       if (this.sync) {
         this.editor.setValue(newContent, 1);
       }
     },
     theme: function (theme) {
-      console.log(theme, 'theme')
       var langMode = require('brace/theme/'+theme).Mode;
       // this.editor.setTheme('ace/theme/' + theme); //format none
       this.editor.setTheme(langMode);   //format

diff --git a/app/src/components/Format.vue b/app/src/components/Format.vue
@@ -20,7 +20,7 @@
         <md-menu>
           <md-button md-menu-trigger>lang</md-button>
           <md-menu-content>
-            <md-menu-item @click="changeLang(ilang)" v-for="ilang in ['json', 'xml', 'javascript', 'css', 'html', 'java', 'markdown']">{{ilang}}</md-menu-item>
+            <md-menu-item @click="switchLang(ilang)" v-for="ilang in ['json', 'xml', 'javascript', 'css', 'html', 'java', 'markdown', 'sql']">{{ilang}}</md-menu-item>
           </md-menu-content>
         </md-menu>
         <md-menu>
@@ -30,7 +30,7 @@
           </md-menu-content>
         </md-menu>
       </md-toolbar>
-      <aceEditor class="host-editor" ref="editor" :content.sync="content" :theme="theme" :lang="lang" :height="height" :sync="true"/>
+      <aceEditor class="host-editor" ref="editor" :content="content" :theme="theme" :lang="lang" :height="height" :sync="true"/>
   </div>
 </template>
 
@@ -49,24 +49,65 @@
     data(){
       return {
         lang: 'json',
-        content: 'Enter your code here',
+        content: 'Enter your code here, 点击lang查看支持的语言',
         theme: 'monokai',
         height: ''
       }
     },
     mounted(){
       setTimeout(() => window.dispatchEvent(new Event('resize')), 200);
-    }
-    /*,
+      this.$on('editor-update', function(val) {
+        this.content = val;
+      }.bind(this));
+    },
     methods:{
-      changeLang(selected){
-        require('brace/mode/'+selected);
-        this.lang = selected
-      },
-      changeTheme(selected){
-          require('brace/theme/'+selected);
-          this.theme = selected
+      switchLang(selected, min){
+        /*
+         * all ['json', 'xml', 'css', 'sql', || 'javascript', 'html', 'java', 'markdown']
+         * pd Supported ['xml', 'json', 'css', 'sql']
+         * pd Example
+          var bd = require('pretty-data').bd;
+          var xml_pp = bd.xml(data);
+          var xml_min = bd.xmlmin(data [,true]);
+          var json_pp = bd.json(data);
+          var json_min = bd.jsonmin(data);
+          var css_pp = bd.css(data);
+          var css_min = bd.cssmin(data [, true]);
+          var sql_pp = bd.sql(data);
+          var sql_min = bd.sqlmin(data);
+        */
+        var formatText = '';
+        if(~['xml', 'json', 'css', 'sql'].indexOf(selected)){
+          var bd = require('../utils/beautify/beautify-data.js').pd
+          try{
+            formatText = bd[selected + (min?'min':'')](this.content)
+          }catch(e){
+            formatText = this.content;
+            alert(JSON.stringify(e))
+            return;
+          }
+        }else if(selected === 'javascript'){
+          var jsBeautify = require('../utils/beautify/beautify').js_beautify;
+          console.log(jsBeautify, 'jsBeautify')
+          formatText = jsBeautify(this.content, {
+            'indent_size': 1,
+            'indent_char': '\t'
+          })
+        }else if(selected === 'html'){
+          var htmlBeautify = require('../utils/beautify/beautify-html').html_beautify;
+          formatText = htmlBeautify(this.content, {
+            'indent_size': 2,
+            'indent_char': ' ',
+            'max_char': 78,
+            'brace_style': 'expand',
+            'unformatted': ['a', 'sub', 'sup', 'b', 'i', 'u']
+          });
+        }else{
+          formatText = this.content;
+        }
+        this.content = formatText;
+        this.changeLang(selected);
       }
-    }*/
+    }
   }
 </script>