各金額入力欄の書式をカンマ区切りに変更。

詳細表示領域の直書きjQueryセレクタを変数化。

gulpfile.js

@@ -30,6 +30,7 @@ var jsLibraries = [
 	'./node_modules/chart.js/dist/Chart.bundle.min.js',
 	'./node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js',
 	'./node_modules/bootstrap-datepicker/dist/locales/bootstrap-datepicker.ja.min.js',
+	'./node_modules/autonumeric/dist/autoNumeric.min.js',
 	path.join(sourceDirName, 'lib/bootstrap-number-input/bootstrap-number-input.js')
 ];
 var cssLibraries = [

package.json

@@ -23,6 +23,7 @@
     "@types/jquery": "^3.2.8",
     "@types/jqueryui": "^1.11.35",
     "asar": "^0.13.0",
+    "autonumeric": "^4.1.0-beta.8",
     "bootstrap": "^3.3.7",
     "bootstrap-datepicker": "^1.7.1",
     "chart.js": "^2.6.0",

src/ts/interfaces.d.ts

@@ -52,3 +52,9 @@ interface Window {
 	FileReader,
 	FileList
 }
+
+declare class AutoNumeric {
+	constructor(selector: string, options: object);
+	getNumber(): number;
+	set(n: number, options?: object): void
+}

src/ts/item-detail-area.ts

@@ -1,10 +1,28 @@
 module App.ItemDetailArea {
+	export var ItemNameTextbox: JQuery = null;
+	var FrequencyAmountTextbox: JQuery = null;
+	export var FrequencyAmountNumeric: AutoNumeric = null;
+	var ZogenAmountTextbox: JQuery = null;
+	export var ZogenAmountNumeric: AutoNumeric = null;
+
 	export var FrequencyDatePicker: JQuery = null;
 	export var ZogenDatePicker: JQuery = null;
 	export var TermFromDatePicker: JQuery = null;
 	export var TermToDatePicker: JQuery = null;
 
 	export function SetupItemDetailArea(): void {
+		ItemNameTextbox = $('.item-detail-area .item-name .form-control');
+		FrequencyAmountTextbox = $('.item-detail-area .item-frequency .amount .form-control');
+		FrequencyAmountNumeric = new AutoNumeric(
+			'.item-detail-area .item-frequency .amount .form-control',
+			App.Params.amountTextboxOptions
+		);
+		ZogenAmountTextbox = $('.item-detail-area .item-zogen .amount .form-control');
+		ZogenAmountNumeric = new AutoNumeric(
+			'.item-detail-area .item-zogen .amount .form-control',
+			App.Params.amountTextboxOptions
+		);
+
 		FrequencyDatePicker = $(".item-detail-area .item-frequency .frequency-one-time .input-append");
 		ZogenDatePicker = $(".item-detail-area .item-zogen .frequency-one-time .input-append");
 		TermFromDatePicker = $(".item-detail-area .item-term .term-from .input-append");
@@ -14,8 +32,8 @@ module App.ItemDetailArea {
 		$('.item-detail-area .frequency-one-time').css('display', 'none');
 
 		// 項目名が変更された場合の処理
-		$('.item-detail-area .item-name .form-control').keyup((e) => {
-			App.Params.items[App.Params.selectedItemIndex].name = '' + $('.item-detail-area .item-name .form-control').val();
+		ItemNameTextbox.keyup((e) => {
+			App.Params.items[App.Params.selectedItemIndex].name = '' + ItemNameTextbox.val();
 
 			App.Utilities.DataToGUI();
 			App.FileManager.UpdateDownloadData();
@@ -120,14 +138,19 @@ module App.ItemDetailArea {
 		});
 
 		// 頻度：金額が変更された場合の処理
-		$('.item-detail-area .item-frequency .amount .form-control').keyup((e) => {
-			App.Params.items[App.Params.selectedItemIndex].frequency.amount = +$('.item-detail-area .item-frequency .amount .form-control').val();
+		var onFrequencyAmountChanged = (e) => {
+			App.Params.items[App.Params.selectedItemIndex].frequency.amount = FrequencyAmountNumeric.getNumber();
 
 			// グラフを更新する。
 			App.GraphArea.Data2Graph();
 
 			App.FileManager.UpdateDownloadData();
-		});
+		};
+		FrequencyAmountTextbox.keyup(onFrequencyAmountChanged);
+		FrequencyAmountTextbox.change(onFrequencyAmountChanged);
+		FrequencyAmountTextbox.on('mousewheel', onFrequencyAmountChanged);
+		FrequencyAmountTextbox.on('DOMMouseScroll', onFrequencyAmountChanged);
+		FrequencyAmountTextbox.on('onmousewheel', onFrequencyAmountChanged);
 
 		// 増減：毎月・毎年・一度だけ　が変更された場合の処理
 		$('.item-detail-area .item-zogen input[type=radio][name=zogen]').change(function () {
@@ -156,14 +179,19 @@ module App.ItemDetailArea {
 		});
 
 		// 増減：金額が変更された場合の処理
-		$('.item-detail-area .item-zogen .amount .form-control').keyup((e) => {
-			App.Params.items[App.Params.selectedItemIndex].zogen.amount = +$('.item-detail-area .item-zogen .amount .form-control').val();
+		var onZogenAmountChanged = (e) => {
+			App.Params.items[App.Params.selectedItemIndex].zogen.amount = ZogenAmountNumeric.getNumber();
 
 			// グラフを更新する。
 			App.GraphArea.Data2Graph();
 
 			App.FileManager.UpdateDownloadData();
-		});
+		};
+		ZogenAmountTextbox.keyup(onZogenAmountChanged);
+		ZogenAmountTextbox.change(onZogenAmountChanged);
+		ZogenAmountTextbox.on('mousewheel', onZogenAmountChanged);
+		ZogenAmountTextbox.on('DOMMouseScroll', onZogenAmountChanged);
+		ZogenAmountTextbox.on('onmousewheel', onZogenAmountChanged);
 
 		// カレンダーコントロールの初期設定を行う。
 		SetupDatePickers();

src/ts/params.ts

@@ -9,6 +9,8 @@ module App.Params {
 	};
 	export var selectedItemIndex = -1;
 	export var currentFilePath = null;
+	export var amountTextboxOptions = null;
+
 	export function SetupNewData() {
 		App.Utilities.PushItem({
 			selected: true,
@@ -82,5 +84,10 @@ module App.Params {
 
 		selectedItemIndex = 0;
 		currentFilePath = undefined;
+		amountTextboxOptions = {
+			decimalCharacter : '.',
+			digitGroupSeparator : ',',
+			decimalPlaces: 0
+		}
 	}
 }

src/ts/setting-modal.ts

@@ -1,18 +1,28 @@
 module App.SettingModal {
-	var GraphYMaxInput: JQuery = null;
-	var GraphYMinInput: JQuery = null;
+	var GraphYMaxTextbox: JQuery = null;
+	export var GraphYMaxNumeric: AutoNumeric = null;
+	var GraphYMinTextbox: JQuery = null;
+	export var GraphYMinNumeric: AutoNumeric = null;
 	var GraphYMaxAutoCheckbox: JQuery = null;
 	var GraphYMinAutoCheckbox: JQuery = null;
 
 	export function SetupSettingModal(): void {
-		GraphYMaxInput = $('#graph-setting-tab input[name=graph-setting-y-max]');
-		GraphYMinInput = $('#graph-setting-tab input[name=graph-setting-y-min]');
+		GraphYMaxTextbox = $('#graph-setting-tab input[name=graph-setting-y-max]');
+		GraphYMaxNumeric = new AutoNumeric(
+			'#graph-setting-tab input[name=graph-setting-y-max]',
+			App.Params.amountTextboxOptions
+		);
+		GraphYMinTextbox = $('#graph-setting-tab input[name=graph-setting-y-min]');
+		GraphYMinNumeric = new AutoNumeric(
+			'#graph-setting-tab input[name=graph-setting-y-min]',
+			App.Params.amountTextboxOptions
+		);
 		GraphYMaxAutoCheckbox = $('#graph-setting-tab input[name=graph-setting-y-max__auto-checkbox]');
 		GraphYMinAutoCheckbox = $('#graph-setting-tab input[name=graph-setting-y-min__auto-checkbox]');
 		$('#setting-modal .nav-tabs a[href="#graph-setting-tab"]').tab('show');
 
-		GraphYMaxInput.prop('disabled', true);
-		GraphYMinInput.prop('disabled', true);
+		GraphYMaxTextbox.prop('disabled', true);
+		GraphYMinTextbox.prop('disabled', true);
 		GraphYMaxAutoCheckbox.prop('checked', true);
 		GraphYMinAutoCheckbox.prop('checked', true);
 
@@ -23,24 +33,30 @@ module App.SettingModal {
 			// 縦軸最大値
 			auto = App.Params.settings.graphSetting.vMax == undefined;
 			GraphYMaxAutoCheckbox.prop('checked', auto);
-			GraphYMaxInput.prop('disabled', auto);
-			GraphYMaxInput.val(auto ? '' : App.Params.settings.graphSetting.vMax);
+			GraphYMaxTextbox.prop('disabled', auto);
+			GraphYMaxNumeric.set(
+				auto ? undefined : App.Params.settings.graphSetting.vMax,
+				App.Params.amountTextboxOptions
+			);
 
 			// 縦軸最小値
 			auto = App.Params.settings.graphSetting.vMin == undefined;
 			GraphYMinAutoCheckbox.prop('checked', auto);
-			GraphYMinInput.prop('disabled', auto);
-			GraphYMinInput.val(auto ? '' : App.Params.settings.graphSetting.vMin);
+			GraphYMinTextbox.prop('disabled', auto);
+			GraphYMinNumeric.set(
+				auto ? undefined : App.Params.settings.graphSetting.vMin,
+				App.Params.amountTextboxOptions
+			);
 		});
 
 		// 縦軸最大値の「自動」チェックボックスの状態が変化した場合の処理
 		GraphYMaxAutoCheckbox.on('change', function (e) {
-			GraphYMaxInput.prop('disabled', GraphYMaxAutoCheckbox.prop('checked'));
+			GraphYMaxTextbox.prop('disabled', GraphYMaxAutoCheckbox.prop('checked'));
 		});
 
 		// 縦軸最小値の「自動」チェックボックスの状態が変化した場合の処理
 		GraphYMinAutoCheckbox.on('change', function (e) {
-			GraphYMinInput.prop('disabled', GraphYMinAutoCheckbox.prop('checked'));
+			GraphYMinTextbox.prop('disabled', GraphYMinAutoCheckbox.prop('checked'));
 		});
 
 		// OKボタンが押された場合の処理
@@ -62,10 +78,10 @@ module App.SettingModal {
 	}
 
 	function GetYMaxValue(): number {
-		return GraphYMaxAutoCheckbox.prop('checked') ? undefined : +GraphYMaxInput.val();
+		return GraphYMaxAutoCheckbox.prop('checked') ? undefined : +GraphYMaxNumeric.getNumber();
 	}
 
 	function GetYMinValue(): number {
-		return GraphYMinAutoCheckbox.prop('checked') ? undefined : +GraphYMinInput.val();
+		return GraphYMinAutoCheckbox.prop('checked') ? undefined : +GraphYMinNumeric.getNumber();
 	}
 }

src/ts/utilities.ts

@@ -171,7 +171,7 @@ module App.Utilities {
 		var item = App.Params.items[itemIdx];
 
 		// 費用項目名
-		$('.item-detail-area .item-name input[name=item-name]').val(item.name);
+		App.ItemDetailArea.ItemNameTextbox.val(item.name);
 
 		// 支出／収入
 		$(item.spendingIncome ? 'input[name=spending-income]:nth(0)' : 'input[name=spending-income]:nth(1)').prop('checked', true);
@@ -201,7 +201,7 @@ module App.Utilities {
 				$('input[name=frequency]:nth(2)').prop('checked', true);
 				App.Utilities.ChangeFrequencyMode('frequency', false, false, true);
 				// カレンダーの表示を更新する。
-				$('.item-detail-area .item-frequency .frequency-one-time .input-append').datepicker(
+				App.ItemDetailArea.FrequencyDatePicker.datepicker(
 					'setDate', item.frequency.date.getFullYear() + '年' + (item.frequency.date.getMonth() + 1) + '月'
 				);
 				App.ItemDetailArea.TermFromDatePicker.children('input').prop('disabled', true);
@@ -211,17 +211,17 @@ module App.Utilities {
 		}
 
 		// 頻度：金額
-		$('.item-detail-area .item-frequency .amount input[name=amount]').val(item.frequency.amount);
+		App.ItemDetailArea.FrequencyAmountNumeric.set(item.frequency.amount, App.Params.amountTextboxOptions);
 
 		// 期間：開始
 		var dateFrom = App.Params.items[itemIdx].term.from;
-		$(".item-detail-area .item-term .term-from .input-append").datepicker(
+		App.ItemDetailArea.TermFromDatePicker.datepicker(
 			'setDate', dateFrom.getFullYear() + '年' + (dateFrom.getMonth() + 1) + '月'
 		);
 
 		// 期間：終了
 		var dateTo: Date = App.Params.items[itemIdx].term.to;
-		$(".item-detail-area .item-term .term-to .input-append").datepicker(
+		App.ItemDetailArea.TermToDatePicker.datepicker(
 			'setDate', dateTo.getFullYear() + '年' + (dateTo.getMonth() + 1) + '月'
 		);
 
@@ -243,14 +243,14 @@ module App.Utilities {
 				$('input[name=zogen]:nth(2)').prop('checked', true);
 				App.Utilities.ChangeFrequencyMode('zogen', false, false, true);
 				// カレンダーの表示を更新する。
-				$('.item-detail-area .item-zogen .frequency-one-time .input-append').datepicker(
+				App.ItemDetailArea.ZogenDatePicker.datepicker(
 					'setDate', item.zogen.date.getFullYear() + '年' + (item.zogen.date.getMonth() + 1) + '月'
 				);
 				break;
 		}
 
 		// 金額の増減：金額
-		$('.item-detail-area .item-zogen .amount input[name=amount]').val(item.zogen.amount);
+		App.ItemDetailArea.ZogenAmountNumeric.set(item.zogen.amount, App.Params.amountTextboxOptions);
 	}
 
 	export function IsIncludedInItems(itemName: string): boolean {

src/views/_scripts.html

@@ -11,5 +11,6 @@
 <script src="./js/bootstrap-datepicker.min.js"></script>
 <script src="./js/bootstrap-datepicker.ja.min.js"></script>
 <script src="./js/Chart.bundle.min.js"></script>
+<script src="./js/autoNumeric.min.js"></script>
 <script src="./js/bootstrap-number-input.js"></script>
 <script src="./js/account-book-simulator-2.js"></script>