add themeChanged func & add a theme

SJTU-UMJI-Tech · Apr 21, 2019 · 8ab882d · 8ab882d
1 parent 9a2961b
commit 8ab882d
Show file tree

Hide file tree

Showing 5 changed files with 146 additions and 5 deletions.
diff --git a/src/assets/scripts/editor.js b/src/assets/scripts/editor.js
@@ -20,6 +20,15 @@ var app = new Vue({
         { label: '17px', value: '17px', desc: '正常' },
         { label: '18px', value: '18px', desc: '稍大' }
       ],
+      currentTheme: 'default',
+      themeOption: [
+        { label: 'default', value: 'default', author: 'Lyric'},
+        { label: 'lupeng', value: 'lupeng', author: '鲁鹏'}
+      ],
+      styleThemes: {
+        default: defaultTheme,
+        lupeng: lupengTheme
+      },
       aboutDialogVisible: false
     }
   },
@@ -37,7 +46,7 @@ var app = new Vue({
     })
     // this.currentFont = this.builtinFonts[0],
     this.wxRenderer = new WxRenderer({
-      theme: defaultTheme,
+      theme: this.styleThemes.default,
       fonts: this.currentFont,
       size: this.currentSize
     })
@@ -56,7 +65,7 @@ var app = new Vue({
       }
       return output
     },
-    themeChanged: function () {
+    editorThemeChanged: function () {
       this.editor.setOption('theme', this.currentEditorTheme)
     },
     fontChanged: function (fonts) {
@@ -71,6 +80,14 @@ var app = new Vue({
       })
       this.refresh()
     },
+    themeChanged: function(themeName){
+      var themeName = themeName;
+      var themeObject = this.styleThemes[themeName];
+      this.wxRenderer.setOptions({
+        theme: themeObject
+      })
+      this.refresh()
+    },
     refresh: function () {
       this.output = this.renderWeChat(this.editor.getValue())
     },

diff --git a/src/assets/scripts/renderers/wx-renderer.js b/src/assets/scripts/renderers/wx-renderer.js
@@ -137,7 +137,9 @@ var WxRenderer = function (opts) {
     }
     renderer.link = function (href, title, text) {
       if (href.indexOf('https://mp.weixin.qq.com') === 0) {
-        return '<a href="' + href +'" title="' + (title || text) + '">' + text + '</a>'; 
+        return '<a href="' + href +'" title="' + (title || text) + '" ' + S('wx_link') +'>' + text + '</a>'; 
+      }else if( href === text){
+        return ;
       } else {
         if (ENV_USE_REFERENCES) {
           var ref = addFootnote(title || text, href)

diff --git a/src/assets/scripts/themes/default.js b/src/assets/scripts/themes/default.js
@@ -88,11 +88,11 @@ var defaultTheme = {
       'color': '#ff3502'
     },
     table: {
-      'border-collapse': 'collapse',  
+      'border-collapse': 'collapse',
       'margin': '20px 0',
     },
     thead: {
-      'background': 'rgba(0,0,0,0.05)',      
+      'background': 'rgba(0,0,0,0.05)',
     },
     td: {
       'font-size': '80%',

diff --git a/src/assets/scripts/themes/lupeng.js b/src/assets/scripts/themes/lupeng.js
@@ -0,0 +1,113 @@
+var lupengTheme = {
+    BASE: {
+        'text-align': 'left',
+        'color': '#595959',
+        'line-height': '1.55em',
+        'letter-spacing': '0.06em'
+    },
+    BASE_BLOCK: defaultTheme.BASE_BLOCK,
+    block: {
+        h2: {
+            'font-size': '140%',
+            'text-align': 'center',
+            'font-weight': 'normal',
+            'text-align': 'center',
+            'margin': '80px 10px 40px 10px'
+        },
+        h3: {
+            'font-weight': 'bold',
+            'font-size': '120%',
+            'margin': '40px 10px 20px 10px'
+        },
+        p: {
+            'margin': '10px 10px',
+            'line-height': '1.6'
+        },
+        blockquote: {
+            'color': '#9a9a9a',
+            'padding-left': '10px',
+            // 'padding-top': '0.05px',
+            'background-color': '#fefefe',
+            'line-height': '1.6',
+            'border-left': '3px solid #dbdbdb',
+            'font-size': '15px',
+            'margin': '1em 0'
+        },
+        code: {
+            'font-size': '80%',
+            'overflow': 'auto',
+            'color': '#333',
+            'background': 'rgb(247, 247, 247)',
+            'border-radius': '2px',
+            'padding': '10px',
+            'line-height': '1.3',
+            'border': '1px solid rgb(236,236,236)',
+            'margin': '20px 0',
+        },
+        image: {
+            'border-radius': '4px',
+            'display': 'block',
+            'margin': '20px auto',
+            'width': '100%',
+        },
+        image_org: {
+            'border-radius': '4px',
+            'display': 'block',
+        },
+        ol: {
+            'margin-left': '0',
+            'padding-left': '20px'
+        },
+        ul: {
+            'margin-left': '0',
+            'padding-left': '20px',
+            'list-style': 'circle',
+        },
+        footnotes: {
+            'margin': '10px 10px',
+            'font-size': '14px'
+        }
+    },
+    inline: {
+        // inline element
+        listitem: {
+            'text-indent': '-20px',
+            'display': 'block',
+            'margin': '10px 10px',
+        },
+        codespan: {
+            'font-size': '0.9em',
+            'color': '#d14',
+            'background': '#fefefe',
+            'padding': '0px 5px',
+            'margin': '0px 2px',
+            'border': '1px solid #ddd',
+            'border-radius': '3px',
+        },
+        link: {
+            'color': '#ff3502'
+        },
+        wx_link: {
+            'color': '#576b95',
+            'text-decoration': 'none'
+        },
+        strong: {
+            'font-weight': 'bold',
+        },
+        table: {
+            'border-collapse': 'collapse',
+            'margin': '20px 0',
+        },
+        thead: {
+            'background': 'rgba(0,0,0,0.05)',
+        },
+        td: {
+            'font-size': '80%',
+            'border': '1px solid #dfdfdf',
+            'padding': '4px 8px',
+        },
+        footnote: {
+            'font-size': '12px',
+        }
+    }
+}
diff --git a/src/index.html b/src/index.html
@@ -59,6 +59,14 @@
               </el-option>
             </el-select>
           </el-form-item>
+          <el-form-item label="Themes">
+            <el-select v-model="currentTheme" size="mini" placeholder="选择主题样式" @change="themeChanged">
+              <el-option v-for="theme in themeOption" :key="theme.value" :label="theme.label" :value="theme.value">
+                <span style="float: left">{{ theme.label }}</span>
+                <span style="float: right; color: #8492a6; font-size: 13px">{{ theme.author }}</span>
+              </el-option>
+            </el-select>
+          </el-form-item>
         </el-form>
         <el-button class="about" @click="aboutDialogVisible = true">关于</el-button>
       </el-header>
@@ -107,6 +115,7 @@ <h3>关于我</h3>
   </div>
 
   <script src="assets/scripts/themes/default.js"></script>
+  <script src="assets/scripts/themes/lupeng.js"></script>
   <script src="assets/scripts/renderers/wx-renderer.js"></script>
   <script src="assets/scripts/editor.js"></script>