add open with encode

app/package.json

@@ -1,9 +1,13 @@
 {
   "name": "subTrans",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "An electron-vue project",
   "main": "./dist/main.js",
   "dependencies": {
+    "detect-character-encoding": "^0.4.0",
+    "iconv-lite": "^0.4.18",
+    "install": "^0.10.1",
+    "npm": "^5.0.4",
     "opencc": "=1.0.4",
     "vue": "^2.1.10",
     "vue-blu": "^0.1.9",

app/src/renderer/components/LandingPageView/Contentvue.vue

@@ -36,7 +36,7 @@ import OpenCC from 'opencc'
 			},
 			validate(){
 				try{
-					getFileName
+					this.getFileName
 				}catch(err){
 					console.log(err)
 				}

app/src/renderer/components/Toolbar.vue

@@ -1,33 +1,42 @@
 <template lang="pug">
 	header.toolbar.toolbar-header
 		h1.title subTrans 批次轉換
-		.toolbar-actions.flex-sapce-between
-			.btn-group
-				button.btn.btn-default.btn-large.nocursor
-					.nocursor 簡
-				button.btn.btn-default.btn-large
-					.icon.icon-right-bold.pointercursor(
-						v-if="getMode==='s2tw'",
+		div.toolbar-actions.flex-sapce-between
+			dropdown.btn.btn-default.btn-dropdown.absolute-left
+				div.icon.icon-login 
+				|  開啟編碼
+				div(slot="content")
+					menus
+						//- it seems :click can passing function without parameter, caused by vue-blu
+						//- https://github.com/vuejs/vue-touch/issues/16#issuecomment-252348624
+						menu-item(:click="setEncodeUTF8",:is-active="getEncode==='UTF-8'") UTF-8
+						menu-item(:click="setEncodeBIG5",:is-active="getEncode==='BIG5'") BIG5
+						menu-item(:click="setEncodeGB2312",:is-active="getEncode==='GB2312'") GB2312
+			div.btn-group
+				button.btn.btn-large.nocursor(style='background-color:gainsboro') 簡
+				button.btn.btn-default.btn-large.pointercursor(
+						v-show="getMode==='s2tw'",
 						@click="change_mode"
 					)
-					.icon.icon-left-bold.pointercursor(
-						v-if="getMode==='tw2s'",
+					div.icon.icon-right-bold.pointercursor
+				button.btn.btn-default.btn-large.pointercursor(
+						v-show="getMode==='tw2s'",
 						@click="change_mode"
 					)
-				button.btn.btn-default.btn-large.nocursor
-					.nocursor 繁
+					div.icon.icon-left-bold.pointercursor
+				button.btn.btn-large.nocursor(style='background-color:gainsboro') 繁
 
 			button.btn.btn-default.btn-large.pointercursor(
 				:class="{ active: getpflag }",
 				@click="toggle_pflag"
 			)
 				|激光
 				|
-				.icon.icon-arrows-ccw.icon-text.pointercursor
+				div.icon.icon-arrows-ccw.icon-text.pointercursor
 				|雷射
 
 			button.btn.btn-default.btn-dropdown.absolute-right
-				.icon.icon-megaphone
+				div.icon.icon-megaphone
 
 </template>
 
@@ -42,23 +51,36 @@ export default{
 		'getFiles',
 		'getFileName',
 		'getMode',
+		'getEncode',
 		'getpflag',
 		'getshowmodal',
 		'getFileAmount',
 		'getFiles',
 		'getContent'
 		]),
-	methods: mapMutations({
-		decrement_main_counter:'DECREMENT_MAIN_COUNTER',
-		increment_main_counter:'INCREMENT_MAIN_COUNTER',
-		change_mode           :'CHANGE_MODE',
-		toggle_pflag          :'TOGGLE_PFLAG',
-		add_file              :'ADD_FILE',
-		change_selected       :'CHANGE_SELECTED',
-		remove_file           :'REMOVE_FILE',
-		remove_all_file       :'REMOVE_ALL_FILE',
-		update_content        :'UPDATE_CONTENT',
-	})
+	methods: {
+		...mapMutations({
+			decrement_main_counter:'DECREMENT_MAIN_COUNTER',
+			increment_main_counter:'INCREMENT_MAIN_COUNTER',
+			change_mode           :'CHANGE_MODE',
+			set_encode            :'SET_ENCODE',
+			toggle_pflag          :'TOGGLE_PFLAG',
+			add_file              :'ADD_FILE',
+			change_selected       :'CHANGE_SELECTED',
+			remove_file           :'REMOVE_FILE',
+			remove_all_file       :'REMOVE_ALL_FILE',
+			update_content        :'UPDATE_CONTENT',
+		}),
+		setEncodeUTF8: function(){
+			this.set_encode('UTF-8')
+		},
+		setEncodeBIG5: function(){
+			this.set_encode('BIG5')
+		},
+		setEncodeGB2312: function(){
+			this.set_encode('GB2312')
+		},
+	}
 }
 </script>
 
@@ -78,9 +100,6 @@ export default{
 	justify-content: space-between;
 
 }
-.pointercursor{
-  cursor: pointer;
-}
 .title
 	font-size: 16px
 	-webkit-app-region: drag
@@ -93,8 +112,10 @@ export default{
 	& .icon
 		color: #fff
 		
-.nocursor{cursor: not-allowed!important;}
-
+.pointercursor
+	cursor: pointer
+.nocursor
+	cursor: not-allowed!important
 .btn 
 	font-size: 14px
 	& .icon

app/src/renderer/dragNdrop.js

@@ -1,5 +1,6 @@
 import {mapGetters, mapState, mapMutations} from 'vuex'
 import store from 'renderer/vuex/store'
+import detectCharacterEncoding from 'detect-character-encoding'
 mapMutations([
 	'DECREMENT_MAIN_COUNTER',
 	'INCREMENT_MAIN_COUNTER',
@@ -16,6 +17,7 @@ mapGetters([
 	'getFileName',
 	'mainCounter',
 	'getMode',
+	'getEncode',
 	'getpflag',
 	'getFileAmount',
 	'getFiles',
@@ -55,8 +57,8 @@ document.ondragleave = (ev) =>{
 }
 
 function getAsText(readFile) {
-	var filebuffer = new FileReader()
-	filebuffer.readAsText(readFile)
+	let filebuffer = new FileReader()
+	filebuffer.readAsText(readFile, store.getters.getEncode)
 
 	// Handle progress, success, and errors
 	filebuffer.onprogress = updateProgress
@@ -67,7 +69,7 @@ function getAsText(readFile) {
 function updateProgress(evt) {
 	if (evt.lengthComputable) {
 		// evt.loaded and evt.total are ProgressEvent properties
-		var loaded = (evt.loaded / evt.total)
+		let loaded = (evt.loaded / evt.total)
 		if (loaded < 1) {
 			// Increase the prog bar length
 			style.width = (loaded * 200) + "px"
@@ -78,7 +80,7 @@ function updateProgress(evt) {
 function loaded(evt) {
 	store.commit('INCREMENT_MAIN_COUNTER')
 	store.commit('UPDATE_CONTENT',evt.currentTarget.result)
-	console.debug(store.getters.mainCounter)
+	console.log(store.getters.mainCounter)
 }
 
 function errorHandler(evt) {

app/src/renderer/vuex/getters.js

@@ -1,5 +1,6 @@
 export const mainCounter		= state => state.counters.main
 export const getMode				= state => state.counters.mode
+export const getEncode			= state => state.counters.encode
 export const getpflag				= state => state.counters.pflag
 export const getshowmodal		= state => state.counters.showmodal
 export const getSelected		= state => state.counters.selected

app/src/renderer/vuex/modules/counters.js

@@ -6,6 +6,7 @@ const state = {
   main: -1,
   selected: 0,
   mode: 's2tw',
+  encode: 'UTF-8',
   pflag: false,
   showmodal: false,
   files: [
@@ -24,6 +25,9 @@ const mutations = {
   [types.CHANGE_MODE] (state) {
     state.mode = (state.mode==='s2tw') ? 'tw2s':'s2tw'
   },
+  [types.SET_ENCODE] (state, encode) {
+    state.encode = encode
+  },
   [types.TOGGLE_PFLAG] (state) {
     state.pflag = !state.pflag
   },

app/src/renderer/vuex/mutation-types.js

@@ -1,6 +1,7 @@
 export const DECREMENT_MAIN_COUNTER = 'DECREMENT_MAIN_COUNTER'
 export const INCREMENT_MAIN_COUNTER = 'INCREMENT_MAIN_COUNTER'
 export const CHANGE_MODE 				= 'CHANGE_MODE'
+export const SET_ENCODE 				= 'SET_ENCODE'
 export const TOGGLE_PFLAG				= 'TOGGLE_PFLAG'
 export const TOGGLE_SHOWMODAL		= 'TOGGLE_SHOWMODAL'
 export const ADD_FILE 					= 'ADD_FILE'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "subTrans",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "An electron-vue project",
   "scripts": {
     "build": "node tasks/release.js",
@@ -15,7 +15,7 @@
     "pack:renderer": "cross-env NODE_ENV=production webpack -p --progress --colors --config webpack.renderer.config.js",
     "postinstall": "cd app && npm install && ./node_modules/.bin/electron-rebuild"
   },
-  "author": "Greg Holguin <simulatedgreg@gmail.com>",
+  "author": "Henapi Hsu <dreamfliper@gmail.com>",
   "license": "MIT",
   "devDependencies": {
     "babel-core": "^6.8.0",
@@ -51,5 +51,6 @@
     "vue-template-compiler": "^2.1.10",
     "webpack": "^2.2.1",
     "webpack-dev-server": "^2.3.0"
-  }
+  },
+  "dependencies": {}
 }