From 1bea8851d019eba050b4b28b03d20824f6b9bfe6 Mon Sep 17 00:00:00 2001 From: kusa-mochi Date: Mon, 18 Sep 2017 19:11:36 +0900 Subject: [PATCH] =?UTF-8?q?=E5=90=84=E9=87=91=E9=A1=8D=E5=85=A5=E5=8A=9B?= =?UTF-8?q?=E6=AC=84=E3=81=AE=E6=9B=B8=E5=BC=8F=E3=82=92=E3=82=AB=E3=83=B3?= =?UTF-8?q?=E3=83=9E=E5=8C=BA=E5=88=87=E3=82=8A=E3=81=AB=E5=A4=89=E6=9B=B4?= =?UTF-8?q?=E3=80=82=20=E8=A9=B3=E7=B4=B0=E8=A1=A8=E7=A4=BA=E9=A0=98?= =?UTF-8?q?=E5=9F=9F=E3=81=AE=E7=9B=B4=E6=9B=B8=E3=81=8DjQuery=E3=82=BB?= =?UTF-8?q?=E3=83=AC=E3=82=AF=E3=82=BF=E3=82=92=E5=A4=89=E6=95=B0=E5=8C=96?= =?UTF-8?q?=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- gulpfile.js | 1 + package.json | 1 + src/ts/interfaces.d.ts | 6 ++++++ src/ts/item-detail-area.ts | 44 +++++++++++++++++++++++++++++++------- src/ts/params.ts | 7 ++++++ src/ts/setting-modal.ts | 44 ++++++++++++++++++++++++++------------ src/ts/utilities.ts | 14 ++++++------ src/views/_scripts.html | 1 + 8 files changed, 89 insertions(+), 29 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 6c60a96..5a00324 100644 --- a/gulpfile.js +++ b/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 = [ diff --git a/package.json b/package.json index 63c6f53..b971e55 100644 --- a/package.json +++ b/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", diff --git a/src/ts/interfaces.d.ts b/src/ts/interfaces.d.ts index 9829886..cbe3147 100644 --- a/src/ts/interfaces.d.ts +++ b/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 +} diff --git a/src/ts/item-detail-area.ts b/src/ts/item-detail-area.ts index bd17f3a..076cb77 100644 --- a/src/ts/item-detail-area.ts +++ b/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(); diff --git a/src/ts/params.ts b/src/ts/params.ts index 2a02c02..4105fa9 100644 --- a/src/ts/params.ts +++ b/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 + } } } diff --git a/src/ts/setting-modal.ts b/src/ts/setting-modal.ts index 351f516..3dc08f5 100644 --- a/src/ts/setting-modal.ts +++ b/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(); } } diff --git a/src/ts/utilities.ts b/src/ts/utilities.ts index 424663f..d477b24 100644 --- a/src/ts/utilities.ts +++ b/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 { diff --git a/src/views/_scripts.html b/src/views/_scripts.html index 754cdf4..61d121c 100644 --- a/src/views/_scripts.html +++ b/src/views/_scripts.html @@ -11,5 +11,6 @@ +