/**
* @fileoverview ログインモーダルウィンドウを管理するオブジェクトを定義している
* jsファイルです。この機能を利用するには、HTMLデータとして、
* 「app/views/template/shared/v2/pc/_login_modal_window.phtml」、または
* 「app/views/template/shared/v2/sp/_login_modal_window.phtml」が読み込まれている
* 必要があります。
* また、ログインモーダルウィンドウを使用するには、"data-osccid"属性"と
* "data-login-modal-window-params"属性/"data-no-handle-login-modal-window-params"属性の
* いずれかにcreate_login_modal_window()関数で生成した、データを設定しておく必要があります。
* "data-login-modal-window-params"属性を定義すると、
* そのタグに対してclickイベントをハンドリングして、ログインモーダルウィンドウを表示します。
* "data-no-handle-login-modal-window-params"属性に対して、
* ログインモーダルウィンドウは表示されませんので、ユーザがハンドリングを行う必要があります。
* このデータはログイン状態により以下の二つのデータフォーマットとなります。
*
* ・ログイン済みの場合
*
* urls
* - logged_in ログイン済みの場合に遷移するURL
*
*
*
* ・未ログインの場合
*
* urls
* - yahoo yahooアカウントを利用したログインへのURL
*
- google googleアカウントを利用したログインへのURL
*
- twitter twitterアカウントを利用したログインへのURL
*
- facebook facebookアカウントを利用したログインへのURL
*
- docomo dアカウントを利用したログインへのURL
*
- goo_register gooのアカウント登録画面へのURL
*
- goo_login gooアカウントによるログイン画面へのURL
*
*
*
*/
window.loginModalWindow = {
modalContentSelector : null,
/**
* デバイス(PC/SP)別のハンドラ
*
* @private
*
*/
deviceAdapter: (function(){
if (runtimeData.getDevice() === 'pc') {
return {
onShow: function(){
if (window.pcLayoutHeader) {
// ヘッダメニューが表示されていれば非表示にする
window.pcLayoutHeader.non_display_menu();
window.pcLayoutHeader.non_display_notification();
}
},
};
} else {
return {
onShow: function(){
},
};
}
}()),
/**
* ログインモーダルウィンドウが読み込まれているか調べる
* 読み込まれていない状態とは、HTML構築時点でログイン済みの場合である
* 出力されたHTMLがログイン済み状態でサーバー側が未ログインの場合、
* ログインモーダルウィンドウが表示できないため、その条件を調べるために
* この関数を使用する
*
* @return {boolean} ログインモーダルウィンドウが読み込まれているならばtrueを返す
*
*/
isLoaded: function(){
return !!$(this.modalContentSelector).length;
},
/**
* ログインモーダルウィンドウを表示する
*
*/
show: function() {
this.deviceAdapter.onShow();
// ヘッダ検索ボックスのinput要素や
// QA詳細ページ回答エリア、ウォッチページコメントエリア等のtextarea要素に
// フォーカスがあたっているとログインモーダルウィンドウ表示中でも、
// 入力ができるので、フォーカスをはずす
$('input, textarea').blur();
$(this.modalContentSelector + ', #modalOverLay_Login').fadeIn('fast');
},
/**
* ログインモーダルウィンドウを非表示にする
*
*/
hide: function() {
$(this.modalContentSelector + ', #modalOverLay_Login').fadeOut('fast');
},
/**
* ログインモーダルウィンドウの各リンクボタンの移動先URL/ccidを変更する
*
* @param {string} triggerCcId ログインモーダルウィンドウ表示のトリガーとなったボタンのccid
* @param {object} params ログインモーダルウィンドウ表示に必要なパラメータ情報
* @private
*
*/
setupLinks: function(triggerCcId, params){
var dialogElem = $(this.modalContentSelector);
this.setupLink(dialogElem.find('.yahoo a'), triggerCcId, params.urls['yahoo']);
this.setupLink(dialogElem.find('.google a'), triggerCcId, params.urls['google']);
this.setupLink(dialogElem.find('.twitter a'), triggerCcId, params.urls['twitter']);
this.setupLink(dialogElem.find('.facebook a'), triggerCcId, params.urls['facebook']);
this.setupLink(dialogElem.find('#docomo a'), triggerCcId, params.urls['docomo']);
this.setupLink(dialogElem.find('#signup a'), triggerCcId, params.urls['goo_register']);
this.setupLink(dialogElem.find('#user a'), triggerCcId, params.urls['goo_login']);
},
/**
* リンクボタンの移動先URL/ccidを変更する
*
* @param {jQuery} linkElem リンク要素を保持しているjQueryオブジェクト
* @param {string} triggerCcId ログインモーダルウィンドウ表示のトリガーとなったボタンのccid
* @param {string} url リンクに設定するURL
* @private
*
*/
setupLink: function(linkElem, triggerCcId, url){
linkElem.attr('href', url);
linkElem.attr('data-osccid', (linkElem.attr('data-osccid-base') + '_' + triggerCcId));
},
/**
* ユーザのログイン状態により、指定の画面への遷移か、
* ログインモーダルウィンドウを表示を行います。
*
* @param {string} triggerCcId ログインモーダルウィンドウ表示のトリガーとなったボタンのccid
* @param {object} params ログインモーダルウィンドウ表示に必要なパラメータ情報
*
*/
run: function(triggerCcId, params){
this.modalContentSelector = params.is_idc_logged_in ? "#modalContent_Login_ForIdcUser" : "#modalContent_Login";
if (runtimeData.isLoggedIn()) {
location.href = params.urls['logged_in'];
} else {
this.setupLinks(triggerCcId, params);
this.show();
}
},
};
// 実行速度を優先するため、DOMContetLoaded/onloadイベントは待たない
(function(){
// ログインモーダルウィンドウを表示させるボタンのハンドラ
// イベントはバブリングで取得する
$(document).on('click', '[data-login-modal-window-params]', function(event){
event.preventDefault();
loginModalWindow.run(
$(this).attr('data-osccid'),
JSON.parse($(this).attr('data-login-modal-window-params'))
);
});
// ログインモーダルウィンドウの[x]ボタンかウィンドウ外を押下した場合、ログインモーダルウィンドウを非表示にする
$('#modalContent_Login .modal_close, #modalContent_Login_ForIdcUser .modal_close, #modalOverLay_Login').on('click', function(){
loginModalWindow.hide();
});
}());