Merge pull request #36 from doxiaodong/develop

develop -> master
doxiaodong · Jan 26, 2017 · 9db3630 · 9db3630
2 parents e759c0a + 353104b
commit 9db3630
Show file tree

Hide file tree

Showing 16 changed files with 169 additions and 42 deletions.
diff --git a/Makefile b/Makefile
@@ -3,6 +3,9 @@ SHELL := /bin/bash
 dev:
 	npm run start:hmr
 
+dev-prod:
+	npm run server:dev:hmr:proxy-prod
+
 build:
 	npm run build:prod
 

diff --git a/config/helpers.js b/config/helpers.js
@@ -5,8 +5,6 @@ const EVENT = process.env.npm_lifecycle_event || ''
 // Helper functions
 const ROOT = path.resolve(__dirname, '..')
 
-console.log('root directory:', root() + '\n')
-
 function hasProcessFlag(flag) {
   return process.argv.join('').indexOf(flag) > -1
 }
@@ -15,10 +13,8 @@ function hasNpmFlag(flag) {
   return EVENT.includes(flag);
 }
 
-function root(args) {
-  args = Array.prototype.slice.call(arguments, 0)
-  return path.join.apply(path, [ROOT].concat(args))
-}
+const root = path.join.bind(path, ROOT)
+console.log('root directory:', root() + '\n')
 
 exports.hasProcessFlag = hasProcessFlag
 exports.hasNpmFlag = hasNpmFlag

diff --git a/config/webpack.common.js b/config/webpack.common.js
@@ -1,5 +1,6 @@
 const webpack = require('webpack')
 const helpers = require('./helpers')
+const chalk = require('chalk')
 
 /**
  * Webpack Plugins
@@ -11,7 +12,7 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const ngcWebpack = require('ngc-webpack')
 
 const AOT = helpers.hasNpmFlag('aot')
-console.log('is aot?:', AOT)
+console.log(chalk.green('is aot?'), AOT ? chalk.green('true') : chalk.red('false'))
 
 /**
  * Webpack configuration
@@ -60,16 +61,16 @@ module.exports = function(option) {
         test: /\.ts$/,
         use: [
           '@angularclass/hmr-loader?pretty=' + !isProd + '&prod=' + isProd,
-          'ts-loader?{configFileName: "tsconfig' + (AOT ? '.aot' : '') + '.json"}',
-          'angular2-template-loader',
           {
             loader: 'ng-router-loader',
             options: {
-              loader: 'async-system',
+              loader: 'async-import',
               genDir: 'compiled',
               aot: AOT
             }
-          }
+          },
+          'ts-loader?{configFileName: "tsconfig' + (AOT ? '.aot' : '') + '.json"}',
+          'angular2-template-loader'
         ],
         exclude: [/\.(spec|e2e)\.ts$/]
       },

diff --git a/config/webpack.dev.js b/config/webpack.dev.js
@@ -3,12 +3,16 @@ const helpers = require('./helpers')
 const webpackMerge = require('webpack-merge') // Used to merge webpack configs
 const commonConfig = require('./webpack.common.js') // The settings that are common to prod and dev
 const autoprefixer = require('autoprefixer')
+const chalk = require('chalk')
 
 /**
  * Webpack Plugins
  */
 const DefinePlugin = require('webpack/lib/DefinePlugin')
 
+const isProxyProd = helpers.hasNpmFlag('proxy-prod')
+console.log(chalk.green('is proxy prod?'), isProxyProd ? chalk.green('true') : chalk.red('false'))
+
 /**
  * Webpack Constants
  */
@@ -140,9 +144,16 @@ module.exports = webpackMerge(commonConfig({ env: ENV }), {
     },
     proxy: {
       "/api": {
-        target: 'http://0.0.0.0:9999',
+        target: isProxyProd ? 'https://api.darlin.me' : 'http://0.0.0.0:9999',
+        changeOrigin: isProxyProd,
+        secure: !isProxyProd,
         pathRewrite: {
           '^/api': ''
+        },
+        onProxyReq: function(proxyReq, req, res) {
+          if (isProxyProd) {
+            proxyReq.setHeader('referer', 'https://www.darlin.me')
+          }
         }
       }
     }

diff --git a/package.json b/package.json
@@ -38,7 +38,9 @@
     "build:prod": "webpack --config config/webpack.prod.js --progress --profile --bail",
     "server": "npm run server:dev",
     "server:dev": "npm run clean:aot && webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/",
+    "server:dev:proxy-prod": "npm run clean:aot && webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/",
     "server:dev:hmr": "npm run server:dev -- --inline --hot",
+    "server:dev:hmr:proxy-prod": "npm run server:dev:proxy-prod -- --inline --hot",
     "server:prod": "http-server dist --cors",
     "webdriver:update": "npm run webdriver-manager update",
     "webdriver:start": "npm run webdriver-manager start",
@@ -54,15 +56,15 @@
     "ngc": "./node_modules/.bin/ngc-w -p tsconfig.aot.json"
   },
   "dependencies": {
-    "@angular/common": "^2.4.3",
-    "@angular/compiler": "^2.4.3",
-    "@angular/core": "^2.4.3",
-    "@angular/forms": "^2.4.3",
-    "@angular/http": "^2.4.3",
+    "@angular/common": "^2.4.5",
+    "@angular/compiler": "^2.4.5",
+    "@angular/core": "^2.4.5",
+    "@angular/forms": "^2.4.5",
+    "@angular/http": "^2.4.5",
     "@angular/material": "^2.0.0-beta.1",
-    "@angular/platform-browser": "^2.4.3",
-    "@angular/platform-browser-dynamic": "^2.4.3",
-    "@angular/router": "^3.4.3",
+    "@angular/platform-browser": "^2.4.5",
+    "@angular/platform-browser-dynamic": "^2.4.5",
+    "@angular/router": "^3.4.5",
     "@angularclass/hmr": "^1.2.2",
     "@types/whatwg-fetch": "^0.0.33",
     "angular-sortablejs": "^1.3.1",
@@ -74,24 +76,26 @@
     "js-base64": "^2.1.9",
     "marked": "^0.3.6",
     "moment": "^2.17.1",
-    "ng2-clip": "1.0.0-beta.1",
+    "ng2-clip": "~1.0.0",
+    "ng2-simplemde": "^1.0.0-beta.3",
     "ng2-translate": "^5.0.0",
     "rxjs": "~5.0.3",
+    "simplemde": "^1.11.2",
     "zone.js": "~0.7.6"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "^2.4.3",
+    "@angular/compiler-cli": "^2.4.5",
     "@angularclass/hmr-loader": "^3.0.2",
     "@types/core-js": "^0.9.35",
     "@types/crypto-js": "^3.1.32",
     "@types/highlight.js": "^9.1.9",
     "@types/jasmine": "^2.5.41",
     "@types/marked": "0.0.28",
     "@types/mathjax": "0.0.31",
-    "@types/node": "^7.0.0",
-    "ng-router-loader": "^2.0.0",
+    "@types/node": "^7.0.4",
     "angular2-template-loader": "^0.6.0",
-    "autoprefixer": "^6.6.1",
+    "autoprefixer": "^6.7.0",
+    "chalk": "^1.1.3",
     "codelyzer": "2.0.0-beta.4",
     "copy-webpack-plugin": "^4.0.1",
     "css-loader": "^0.26.1",
@@ -112,13 +116,14 @@
     "karma-chrome-launcher": "^2.0.0",
     "karma-coverage": "^1.1.1",
     "karma-jasmine": "^1.1.0",
-    "karma-mocha-reporter": "^2.2.1",
+    "karma-mocha-reporter": "^2.2.2",
     "karma-remap-coverage": "^0.1.4",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "2.0.1",
     "less": "^2.7.2",
     "less-loader": "^2.2.3",
-    "ngc-webpack": "^1.1.2",
+    "ng-router-loader": "^2.1.0",
+    "ngc-webpack": "^1.1.3",
     "node-dir": "^0.1.16",
     "node-sass": "^4.3.0",
     "parse5": "^3.0.1",
@@ -129,11 +134,11 @@
     "sass-loader": "^4.1.1",
     "source-map-loader": "^0.1.6",
     "style-loader": "^0.13.1",
-    "svg-sprite-loader": "0.1.2",
+    "svg-sprite-loader": "0.2.0",
     "ts-helpers": "1.1.2",
-    "ts-loader": "^1.3.3",
+    "ts-loader": "^2.0.0",
     "ts-node": "^2.0.0",
-    "tslint": "^4.3.1",
+    "tslint": "^4.4.1",
     "tslint-loader": "^3.3.0",
     "typedoc": "^0.5.5",
     "typescript": "~2.1.5",

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -17,6 +17,10 @@ import {
   createNewHosts,
   createInputTransfer
 } from '@angularclass/hmr'
+import {
+  SimplemdeModule,
+  SIMPLEMDE_CONFIG
+} from 'ng2-simplemde'
 import { AppStore } from './app.store'
 
 import { ShareModule } from './share'
@@ -32,11 +36,42 @@ import {
   pipes,
   directives
 } from './declarations'
+import { toggleFullscreen } from 'app/base/utils/fullscreen'
 
 export function translateFactory(http: Http) {
   return new TranslateStaticLoader(http, '/assets/i18n', '.json')
 }
 
+export function fullscreenAction(editor) {
+  const dom = editor.element.parentNode
+  toggleFullscreen(dom)
+  editor.codemirror.focus()
+}
+
+export function simplemdeValue() {
+  return {
+    toolbar: [
+      'bold',
+      'italic',
+      'heading',
+      'quote',
+      'unordered-list',
+      'ordered-list',
+      '|',
+      'image',
+      'link',
+      'preview',
+      {
+        name: 'fullscreen',
+        action: fullscreenAction,
+        className: 'fa fa-arrows-alt no-disable no-mobile',
+        title: 'Toggle Fullscreen'
+      }
+    ],
+    status: false
+  }
+}
+
 @NgModule({
   bootstrap: [
     RootAppComponent
@@ -59,6 +94,10 @@ export function translateFactory(http: Http) {
       useFactory: translateFactory,
       deps: [Http]
     }),
+    SimplemdeModule.forRoot({
+      provide: SIMPLEMDE_CONFIG,
+      useValue: simplemdeValue()
+    }),
     MdButtonModule.forRoot()
   ],
   providers: [

diff --git a/src/app/article/declarations/comment/comment.component.ts b/src/app/article/declarations/comment/comment.component.ts
@@ -1,6 +1,7 @@
 import {
   Component,
   OnInit,
+  ViewEncapsulation,
   OnDestroy
 } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
@@ -21,12 +22,25 @@ const request: IRequestParams = {
 }
 
 @Component({
+  encapsulation: ViewEncapsulation.None,
   selector: 'comp-article-comments',
-  templateUrl: './comment.template.html'
+  templateUrl: './comment.template.html',
+  styles: [
+    `
+      .reply-floor .CodeMirror, .reply-floor .CodeMirror-scroll {
+        min-height: 100px;
+      }
+    `
+  ]
 })
 
 export class CommentComponent implements OnInit, OnDestroy {
 
+  commentMDEOption = {}
+  subCommentMDEOption = {
+    toolbar: false
+  }
+
   private sub: any
   public icon = {
     reply: Reply

diff --git a/src/app/article/declarations/comment/comment.template.html b/src/app/article/declarations/comment/comment.template.html
@@ -45,8 +45,9 @@
           <form class="form" #replyForm="ngForm" (ngSubmit)="reply(comment.url, {content: submitForm.replyContent, reply_object: comment.input.object}, comment.index)">
             <div class="form-group clearfix">
               <span>{{ 'pages.article.replyPlaceholder' | translate }}&nbsp;<a class="a">{{ comment.input.nickname }}</a>：</span>
-              <textarea [(ngModel)]="submitForm.replyContent" name="replyInput" #replyInput="ngModel" class="form-control reply-textarea"
-                [attr.placeholder]="'pages.article.commentPlaceholder' | translate" required></textarea>
+              <simplemde [options]="subCommentMDEOption" [(ngModel)]="submitForm.replyContent" name="replyInput" #replyInput="ngModel" required></simplemde>
+              <!--<textarea [(ngModel)]="submitForm.replyContent" name="replyInput" #replyInput="ngModel" class="form-control reply-textarea"
+                [attr.placeholder]="'pages.article.commentPlaceholder' | translate" required></textarea>-->
               <button md-raised-button color="primary" [disabled]="!replyInput.valid || requesting" class="reply-button" type="submit">{{ 'pages.article.reply' | translate }}</button>
             </div>
           </form>
@@ -62,8 +63,9 @@
   <form (ngSubmit)="comment(article, {content: submitForm.commentContent})" #commentForm="ngForm" class="form">
     <div class="form-group clearfix">
       <label for="add_content"></label>
-      <textarea [(ngModel)]="submitForm.commentContent" name="commentInput" #commentInput="ngModel" class="form-control reply-textarea"
-        type="text" id="add_content" [attr.placeholder]="'pages.article.commentPlaceholder' | translate" required></textarea>
+      <simplemde [options]="commentMDEOption" [(ngModel)]="submitForm.commentContent" name="commentInput" #commentInput="ngModel" required></simplemde>
+      <!--<textarea [(ngModel)]="submitForm.commentContent" name="commentInput" #commentInput="ngModel" class="form-control reply-textarea"
+        type="text" id="add_content" [attr.placeholder]="'pages.article.commentPlaceholder' | translate" required></textarea>-->
       <button md-raised-button color="primary" [disabled]="!commentInput.valid || requesting" class="reply-button" type="submit">{{ 'pages.article.comment' | translate }}</button>
 
     </div>

diff --git a/src/app/base/pic-url/pic-url.service.ts b/src/app/base/pic-url/pic-url.service.ts
@@ -2,7 +2,7 @@ import {
   HEAD_PIC_STYLE,
   THIRD_PIC_REG
 } from './picture.constant'
-const md5 = require('crypto-js/md5')
+import { MD5 as md5 } from 'crypto-js'
 
 export class PicUrl {
 

diff --git a/src/app/base/styles/global.less b/src/app/base/styles/global.less
@@ -137,3 +137,12 @@ comp-icon {
 a.badge:hover {
   color: darken(rgb(255, 255, 255), 10%);
 }
+
+simplemde {
+  display: block;
+  width: 100%;
+  height: 100%;
+  .CodeMirror {
+    height: 100%;
+  }
+}
diff --git a/src/app/base/utils/fullscreen.ts b/src/app/base/utils/fullscreen.ts
@@ -0,0 +1,44 @@
+function requestFullscreen(dom) {
+  if (dom.requestFullscreen) {
+    dom.requestFullscreen()
+  }
+  if (dom.webkitRequestFullscreen) {
+    dom.webkitRequestFullscreen()
+  }
+  if (dom.webkitRequestFullScreen) {
+    dom.webkitRequestFullScreen()
+  }
+  if (dom.mozRequestFullScreen) {
+    dom.mozRequestFullScreen()
+  }
+}
+
+function exitFullscreen() {
+  if (document.exitFullscreen) {
+    document.exitFullscreen()
+  }
+  if (document.webkitExitFullscreen) {
+    document.webkitExitFullscreen()
+  }
+  if (document['webkitExitFullscreen']) {
+    document['webkitExitFullscreen']()
+  }
+  if (document['webkitCancelFullScreen']) {
+    document['webkitCancelFullScreen']()
+  }
+  if (document['mozCancelFullScreen']) {
+    document['mozCancelFullScreen']()
+  }
+}
+
+function isDocumentInFullScreenMode() {
+  return document['fullscreen'] || document.webkitIsFullScreen || document['mozFullScreen']
+}
+
+export function toggleFullscreen(dom) {
+  if (isDocumentInFullScreenMode()) {
+    exitFullscreen()
+  } else {
+    requestFullscreen(dom)
+  }
+}
diff --git a/src/app/base/utils/get-aes-token.service.ts b/src/app/base/utils/get-aes-token.service.ts
@@ -1,5 +1,5 @@
 import { getCookie } from './get-cookie.service'
-const md5 = require('crypto-js/md5')
+import { MD5 as md5 } from 'crypto-js'
 
 export function getAESToken() {
   return md5(getCookie('csrftoken')).toString()