https://www.p-portal.go.jp/pps-web-biz/resources/app/javascript/sc03/SC03.buttoncontrol.js?v=002

1/*
2* Copyright (c) 2017 Ministry of Internal Affairs and Communications
3* All rights reserved.
4*/
5
6/**
7 * SC03 ボタン制御部品
8 * 画面のボタン押下時の振る舞いを制御する部品
9 */
10
11/**
12 * コンテキストパス
13 * 
14 * @type {string}
15 */
16var contextPath = $("meta[name='contextPath']").attr("content");
17
18// var waitingMessageが必要となるが、官と民で切り替えるため、ここでは定義していない。
19// この機能を利用する場合は、このJSが読み込まれる前にvar waitingMessageを定義すること
20// 想定としては共通のヘッダファイルでこのJSの読み込み定義の直前でvar waitingMessageが定義される想定。
21
22/**
23 * イベントハンドラ呼び出し時に呼び出されるFunctionの順番を規定。
24 * 「original」は、イベントハンドラに元々登録されているFunctionが呼び出される。
25 * 
26 * @type {Array.<string>}
27 */
28var funcOrder = [ 'uploadCheck', 'first', 'applyFormat_unformat', 'before', 'original', 'after', 'last', 'applyFormat_format', 'focus_remove' ];
29
30/**
31 * イベントハンドラに登録されているFunctionの前後に別のFunctionを登録<br>
32 * 例えば、
33 * <p>
34 * funcOrder = ['first', 'original', 'last'];
35 * </p>
36 * と定義されているとする。この場合に、
37 * <p>
38 * interceptEventhandler('click', 'first', $('.target'), firstFunction)
39 * </p>
40 * と呼びだされた場合、スタイルクラスに「target」が指定された要素の「onclick」イベントハンドラ呼びだされた際に
41 * firstFunction、元々登録されているされていたFunctionの順でFunctionを実行する。
42 * 
43 * @param {string} pointcut
44 *            Functionを差し込む順番を指定。funcOrderで規定した順番の何れかを指定
45 * @param {Array.<obuject>} elements
46 *            Functionを差し込むjQueryオブジェクト
47 * @param {function} func
48 *            差し込むFunctionオブジェクトを指定
49 */
50function interceptEventhandler(pointcut, elements, func) {
51    "use strict";
52    readyIntercept(elements);
53    $(elements).each(function() {
54        $(this).data(pointcut, func);
55    });
56}
57
58/**
59 * interceptEventhandlerを有効状態にする。
60 * 
61 * @param {Array.<Object>} elements
62 *            Functionを差し込むjQueryオブジェクト
63 */
64function readyIntercept(elements) {
65    "use strict";
66    $(elements).each(function() {
67        var applyed = $(this).data('applyed');
68        if (applyed !== true) {
69            var original = this.onclick;
70            $(this).data('applyed', true);
71            $(this).data('original', original);
72            this.onclick = doExecute;
73        }
74    });
75}
76
77/**
78 * interceptEventhandlerで登録したFunctionを順に処理する
79 */
80function doExecute() {
81    "use strict";
82    var target = this;
83    $.each(funcOrder, function(index, value) {
84        var func = $(target).data(value);
85        var result = true;
86        if (typeof func === 'function') {
87            result = func.call(target, target);
88            return result;
89        }
90    });
91}
92
93/**
94 * 「Wait画面表示」を制御する
95 */
96function wait() {
97    "use strict";
98    $.blockUI({
99        fadeIn : 0,
100        fadeOut : 0,
101        overlayCSS : {
102            backgroundColor : '#000000',
103            opacity : 0.3
104        },
105        css : {
106            color      : '#FFFFFF',
107            height     : '200px',
108            width      : '200px',
109            left       : 'calc(50% - 100px)',
110            top        : '25%',
111            border     : '1px solid ' + waitingColor,
112            background : '#FFFFFF'
113        },
114        message : waitingMessage
115    });
116}
117
118/**
119 * ボタンを無効化する処理
120 * 
121 * @param {Object} element クリックされたボタンのDOM要素
122 */
123function disableButton(element) {
124    "use strict";
125    var hiddenElement;
126    if(element.tagName.toUpperCase() === 'INPUT') {
127        hiddenElement = $(element).clone().prop('type', 'hidden')[0];
128    }else{
129        hiddenElement = "<input type='hidden' name='" + element.name + "' value='" + element.value + "'>";
130    }
131    $(element).after($(hiddenElement));
132    $('input[type="button"], input[type="submit"], button[type="submit"]').prop("disabled", true);
133}
134
135/**
136 * フォーカスを外す処理
137 * 
138 * @param {Object} element フォーカスを外す対象の要素のDOM要素
139 */
140function focusRemove(element) {
141    $(element).blur();
142}
143
144/**
145 * 「ショートカットキー制御」を有効にする。
146 */
147function disableShortcut() {
148    "use strict";
149    $('input, textarea, select').addClass('mousetrap');
150    Mousetrap.bind([ "f5","ctrl+f5"], function(e) {
151        e.preventDefault();
152    });

153
154}
155
156/**
157 * ロード完了後のイベント設定処理を行う。
158 */
159$(document).ready(function() {
160    "use strict";  
161    disableShortcut();
162
163    var disabledButtonTarget = $('input[type="submit"], input[type="button"], button[type="submit"]').not('.nodisabled');
164    interceptEventhandler('after', disabledButtonTarget, disableButton);
165
166    var waitTarget = $('input[type="submit"], input[type="button"], button[type="submit"]').not('.nowait');
167    interceptEventhandler('last', waitTarget, wait);
168
169    // 画面が切り替わる際のイベント
170    $(window).on("beforeunload", function(e) {
171        $.unblockUI
172    });
173
174    var removeFocusInputTarget = $('input[type="submit"], input[type="button"], button[type="submit"]').filter('.nodisabled');
175    interceptEventhandler('focus_remove', removeFocusInputTarget, focusRemove);
176
177    var removeFocusAnchorTarget = $('a');
178    interceptEventhandler('focus_remove', removeFocusAnchorTarget, focusRemove);
179
180});