/** * stepの数と、実際の表示するステップ番号とは違いがあります!! * 途中でステップが増える処理があるため。 * resmapを参照! * 2つのresmapは、長さを合わせておきます。 */ var PRTCL = document.location.protocol; if (PRTCL == 'file:') PRTCL = 'http:'; var DEFAULT_FACEBOOK_PAGE_URL = new Array( 'https://www.facebook.com/bindforweblife' ,'https://www.facebook.com/FacebookJapan' ); var step = 0; var resmap = { 1: '1', 2: '2', 3: '3' }; // Facebook 制限値 var MIN_WIDTH = 180, MAX_WIDTH = 500, MIN_HEIGHT = 70; //Facebook オプション設定 //var COLOR_LIGHT = 'light'; //var COLOR_FARK = 'dark'; var defConfig = { facebookPageUrl: 'https://www.facebook.com/bindforweblife', boxHeight: 556, boxWidth: 300, // colorType: COLOR_LIGHT, dispFace: true, dispUpdate: true, dispHeader: true, wUnit: 'px', hUnit: 'px' }; var followConfig = defConfig; jQuery.fn.checked = function(){ return jQuery(this).attr('checked') == undefined ? false:true; } //レスポンシブ形式フラグ var rspsvFlg; Ext.onReady(function(){ rspsvFlg = getResponsive(); if (rspsvFlg.rspsv == 1) { defConfig.boxWidth = 100; defConfig.wUnit = '%'; } if (oemFlg.oem.length>0 && oemFlg.oem == '1') defConfig.facebookPageUrl = 'https://www.facebook.com/FacebookJapan'; var args = location.search; if (args.length > 0) { // get initial data var params = parseParam(args); // 復元 var opt = eval('(' + decodeURIComponent(params.o) + ')'); if (DEFAULT_FACEBOOK_PAGE_URL.indexOf(opt.facebookPageUrl) > -1){ gotoStep(1); } else { //facebook followConfig = opt; if (typeof(opt.wUnit) == 'undefined') followConfig.wUnit = 'px'; if (typeof(opt.hUnit) == 'undefined') followConfig.hUnit = 'px'; step=2; gotoStep(3); } } else { gotoStep(1); } jQuery('#btn-prev').click(function(e) { if (step == 1) { location.href = '/main/'; return; } gotoStep(step-1); }); jQuery('#btn-next').click(function(e) { // FacebookページのURLの選択 if (step == 1) { followConfig.facebookPageUrl = jQuery('#facebookPageUrl').val(); if (followConfig.facebookPageUrl.trim().length == 0) { msgBox(i18n.t("alert.error"), i18n.t("likebox.contents.error.required-pageurl")); jQuery('#facebookPageUrl')[0].setfocus(); return false; } // オプションの設定 } else if (step == 2) { followConfig.boxHeight = jQuery('#boxHeight').val().trim(); if(followConfig.boxHeight == '' || !followConfig.boxHeight.match(/^[0-9]{1,4}$/i) || followConfig.boxHeight == '0'){ msgBox(i18n.t("alert.error"), i18n.t("likebox.contents.error.check-height")); return false; } followConfig.boxWidth = jQuery('#boxWidth').val().trim(); if(followConfig.boxWidth == '' || !followConfig.boxWidth.match(/^[0-9]{1,4}$/i) || followConfig.boxWidth == '0'){ msgBox(i18n.t("alert.error"), i18n.t("likebox.contents.error.check-width")); return false; } if (rspsvFlg.rspsv != 1) { if (followConfig.boxHeight < MIN_HEIGHT) followConfig.boxHeight = MIN_HEIGHT; if (followConfig.boxWidth < MIN_WIDTH) followConfig.boxWidth = MIN_WIDTH; if (followConfig.boxWidth > MAX_WIDTH) followConfig.boxWidth = MAX_WIDTH; } // followConfig.colorType = jQuery('#colorType option:selected').val(); followConfig.dispFace = jQuery("#dispFace").checked(); followConfig.dispUpdate = jQuery("#dispUpdate").checked(); followConfig.dispHeader = jQuery("#dispHeader").checked(); if (rspsvFlg.rspsv == 1) { //followConfig.wUnit = jQuery('#w-unit option:selected').val(); followConfig.wUnit = jQuery('#w-unit').val(); //followConfig.hUnit = jQuery('#h-unit option:selected').val(); } // 設定の確認 } else if (step == 3) { if (checkDouble()) { msgBox(i18n.t("alert.request-error"), i18n.t("alert.request-error-msg")); return false; }; loadTag('likebox', '', 'facebook', '', encodeURIComponent(jQuery.toJSON(followConfig))); return; } gotoStep(step+1); }); setupCommon(); jQuery(window).bind('resize', resizeHandler); }); function gotoStep(nextstep) { if (nextstep == step) return; var fn = (nextstep > step) ? nextHandler:prevHandler; var nm = resmap[nextstep]; var tm = new Date().getTime(); var dir = 'likebox'; jQuery('#contents_body').load('/_modules/html/' + dir + '/step' + nm + '.html?tm=' + tm, fn); } function nextHandler(text, status) { if (status == 'success') { step++; setStepCss(); onLoadComplete(); } } function prevHandler(text, status) { if (status == 'success') { step--; setStepCss(); onLoadComplete(); } } function onLoadComplete() { var ua = navigator.userAgent.toLowerCase(); if (step == 1) { if (ua.indexOf('mac') > -1 && (ua.indexOf('firefox') > -1 || ua.indexOf('safari') > -1)) jQuery('#facebookPageUrl').attr("size","60"); //if (window.devicePixelRatio == 2) jQuery('#facebookPageUrl').css('width', '300px'); if (window.navigator.platform.indexOf('Win') < 0) jQuery('#facebookPageUrl').css('width', '600px'); jQuery('#facebookPageUrl').val(followConfig.facebookPageUrl); jQuery("form#form-facebook").submit(function() { return false; }); } else if (step == 2) { var likeBox = document.getElementById("like-box"); //デフォルト値の設定 jQuery('#boxHeight').val(followConfig.boxHeight); jQuery('#boxWidth').val(followConfig.boxWidth); // jQuery('#colorType').val(followConfig.colorType); if(followConfig.dispFace) jQuery("#dispFace").attr({checked:"checked"}); if(followConfig.dispUpdate) jQuery("#dispUpdate").attr({checked:"checked"}); if(followConfig.dispHeader) jQuery("#dispHeader").attr({checked:"checked"}); //高さの調整 var height = parseInt(followConfig.boxHeight)+10; if (height < 150) height = 150; jQuery("#facebook-option").css('height',height+'px'); jQuery('#rspsv-w-txt').text(i18n.t("likebox.contents.step2.width-range")); if (rspsvFlg.rspsv == 1) { jQuery('#rspsv-txt').text(i18n.t("likebox.contents.rspsv-txt")); //jQuery('#rspsv-h-txt').text('(表示時:最小値70px)'); jQuery('#rspsv-w-txt').text(i18n.t("likebox.contents.step2.rspsv-width-range")); var selWUnit = ''; jQuery('#w-unit-div').text(''); jQuery('#w-unit-div').html(selWUnit); jQuery('#w-unit').val(followConfig.wUnit); var wu = new Ext.form.ComboBox({ typeAhead: true, editable: false, triggerAction: 'all', transform:'w-unit', width:45, forceSelection: true }); /*jQuery('#w-unit').change(function(){ followConfig.wUnit = jQuery(this).val(); new LikeboxLoader(likeBox, followConfig).start(); setDispWidth('#sample_area', '#facebook-option', step); });*/ wu.on('select', function(){ var wUnit = jQuery('#w-unit').val(); if (followConfig.wUnit == wUnit) return; followConfig.wUnit = wUnit; new LikeboxLoader(likeBox, followConfig).start(); setDispWidth('#sample_area', '#facebook-option', step); }); /* var selHUnit = ''; jQuery('#h-unit-div').text(''); jQuery('#h-unit-div').html(selHUnit); jQuery('#h-unit').val(followConfig.hUnit); jQuery('#h-unit').change(function(){ followConfig.hUnit = jQuery(this).val(); new LikeboxLoader(likeBox, followConfig).start(); //高さの調整 setDispHeight(); }); */ jQuery('#sample_area').css({'width': '300px', 'height': '556px'}); jQuery('.hw-rspsv').css('width', '180px'); } //LikeBoxの表示 new LikeboxLoader(likeBox, followConfig).start(); //高さの調整 setDispHeight(); //幅の調整 setDispWidth('#sample_area', '#facebook-option', step); //LikeBoxの高さの調整 jQuery("#boxHeight").change(function(){ if(jQuery("#boxHeight").val().trim().length > 3)return false; followConfig.boxHeight = jQuery("#boxHeight").val().trim(); var likeBox = document.getElementById("like-box"); new LikeboxLoader(likeBox, followConfig).start(); setDispHeight(); }); jQuery("#boxWidth").change(function(){ if(jQuery("#boxWidth").val().trim().length > 3)return false; followConfig.boxWidth = jQuery("#boxWidth").val().trim(); if ((rspsvFlg.rspsv != 1) || (followConfig.wUnit != '%')) { if (followConfig.boxWidth < MIN_WIDTH) followConfig.boxWidth = MIN_WIDTH; if (followConfig.boxWidth > MAX_WIDTH) followConfig.boxWidth = MAX_WIDTH; } var likeBox = document.getElementById("like-box"); new LikeboxLoader(likeBox, followConfig).start(); setDispWidth('#sample_area', '#facebook-option', step); }); /* jQuery("#colorType").change(function(){ followConfig.colorType = jQuery('#colorType option:selected').val(); var likeBox = document.getElementById("like-box"); new LikeboxLoader(likeBox, followConfig).start(); }); */ jQuery("#dispFace").change(function(){ followConfig.dispFace = jQuery("#dispFace").checked(); var likeBox = document.getElementById("like-box"); new LikeboxLoader(likeBox, followConfig).start(); //高さの調整 setDispHeight(); }); jQuery("#dispUpdate").change(function(){ followConfig.dispUpdate = jQuery("#dispUpdate").checked(); var likeBox = document.getElementById("like-box"); new LikeboxLoader(likeBox, followConfig).start(); //高さの調整 setDispHeight(); }); jQuery("#dispHeader").change(function(){ followConfig.dispHeader = jQuery("#dispHeader").checked(); var likeBox = document.getElementById("like-box"); new LikeboxLoader(likeBox, followConfig).start(); //高さの調整 setDispHeight(); }); } else if (step == 3) { //確認表示用 jQuery('#facebookPageUrl').html(followConfig.facebookPageUrl); if ((typeof(followConfig.boxHeight) == 'undefined')) { followConfig.boxHeight = getDefaultHeight(followConfig.dispFace, followConfig.dispUpdate, followConfig.dispHeader); } if (rspsvFlg.rspsv != 1) { if (followConfig.boxHeight < MIN_HEIGHT) followConfig.boxHeight = MIN_HEIGHT; if (followConfig.boxWidth > MAX_WIDTH) followConfig.boxWidth = MAX_WIDTH; } jQuery('#boxHeight').html(followConfig.boxHeight); jQuery('#boxWidth').html(followConfig.boxWidth); if (rspsvFlg.rspsv == 1) jQuery('#rspsv-txt').text(i18n.t("likebox.contents.rspsv-txt")); /* if(followConfig.colorType == 'light'){ jQuery('#colorName').html("明るめ"); }else if(followConfig.colorType == 'dark'){ jQuery('#colorName').html("暗め"); } */ jQuery('#dispFace').html(followConfig.dispFace?i18n.t("likebox.contents.step3.disp"):i18n.t("likebox.contents.step3.nodisp")); jQuery('#dispUpdate').html(followConfig.dispUpdate?i18n.t("likebox.contents.step3.disp"):i18n.t("likebox.contents.step3.nodisp")); jQuery('#dispHeader').html(followConfig.dispHeader?i18n.t("likebox.contents.step3.disp"):i18n.t("likebox.contents.step3.nodisp")); jQuery('#h-unit-sp').text(followConfig.hUnit); jQuery('#w-unit-sp').text(followConfig.wUnit); //LikeBoxの表示 var likeBox = document.getElementById("like-box"); new LikeboxLoader(likeBox, followConfig).start(); //高さの調整 setDispHeight(); //表示ボックスの高さの最低値を設定(URLが長文の可能性を考慮) if (jQuery("#facebook-table").height() > height) jQuery(".attention-box").css('min-height',jQuery("#facebook-table").height()+10+'px'); //幅の調整 setDispWidth('#sample-area', '.attention-box', step); } loaded(); } // 表示枠の幅調整 function setDispWidth(target, parent, step) { //幅マージンの調整 var margin = (500>followConfig.boxWidth) ? (500-followConfig.boxWidth)/2 : 0; if (followConfig.wUnit == '%') { var w = Math.ceil(300 * followConfig.boxWidth / 100); if (w > MAX_WIDTH) w = MAX_WIDTH; jQuery(target).css('width', w+'px'); margin = (470>w) ? (470-w)/2 : 0; } else { jQuery(target).css('width', followConfig.boxWidth+'px'); } jQuery(target).css('margin-right',margin+"px"); //親枠の調整 var pWidth = 602; if (followConfig.boxWidth > MIN_WIDTH) pWidth += (followConfig.boxWidth - MIN_WIDTH); if (followConfig.wUnit == '%') { var w = Math.ceil(300 * followConfig.boxWidth / 100); if (w > MIN_WIDTH) pWidth += (w - MIN_WIDTH); } if (step == 2) { if (rspsvFlg.rspsv == 1) { if (pWidth > 930) pWidth = 930; } else { if (pWidth > 750) pWidth = 750; } } else if (step == 3) { if (pWidth > 850) pWidth = 830; } jQuery(parent).css('width',pWidth+'px'); } // 表示枠の高さ調整 function setDispHeight() { if (rspsvFlg.rspsv == 1 && followConfig.hUnit == '%') { var h = Math.ceil(556 * followConfig.boxHeight / 100); if (h < MIN_HEIGHT) h = MIN_HEIGHT; var height = h+10; if (height < 150) height = 150; jQuery("#facebook-option").css('height',height+'px'); } else { if (followConfig.boxHeight < MIN_HEIGHT) followConfig.boxHeight = MIN_HEIGHT; var height = parseInt(followConfig.boxHeight)+10; if (height < 150) height = 150; jQuery("#facebook-option").css('height',height+'px'); } } function setStepCss() { var nm = resmap[step]; var dir = 'likebox'; jQuery('#sub_title').css('background-image', 'url(/_modules/images/' + dir + '/subtitle0' + nm + '.png)'); for (var i=1; i<=3; i++) { nm = resmap[i]; var src = '/_modules/images/' + dir + '/step0' + nm; if (i == step) { src += '_on'; } jQuery('#step' + nm).css('background-image', 'url(' + src + '.png)'); } /* sumit button */ btn = document.getElementById('btn-next'); if (step == 3) { btn.className = 'btn-submit'; } else { btn.className = 'btn-next'; } // resize resizeHandler(); } var defaultHeight = { 1: '571',//full 2: '541',//face+update 3: '427',//update+header 4: '271',//face+header 5: '241',//face 6: '395',//update 7: '70'//header }; function getDefaultHeight(dispFace,dispUpdate,dispHeader){ if(dispFace && dispUpdate && dispHeader){ return defaultHeight[1]; }else if(dispFace && dispUpdate){ return defaultHeight[2]; }else if(dispUpdate && dispHeader){ return defaultHeight[3]; }else if(dispFace && dispHeader){ return defaultHeight[4]; }else if(dispFace){ return defaultHeight[5]; }else if(dispUpdate){ return defaultHeight[6]; }else{ return defaultHeight[7]; } } function LikeboxLoader(likeBox,followConfig) { this.initialize.apply(this,arguments); } LikeboxLoader.prototype = { initialize: function(c,followConfig) { c.innerHTML = ''; this.facebookPageUrl = followConfig.facebookPageUrl; this.boxHeight = followConfig.boxHeight; this.boxWidth = followConfig.boxWidth; this.hUnit = followConfig.hUnit; this.wUnit = followConfig.wUnit; // this.colorType = followConfig.colorType; this.dispFace = followConfig.dispFace; this.dispUpdate = followConfig.dispUpdate; this.dispHeader = followConfig.dispHeader; //必要なタグ jQuery("
").appendTo(c); this.tw = jQuery('