/** * stepの数と、実際の表示するステップ番号とは違いがあります!! * 途中でステップが増える処理があるため。 * resmapを参照! */ var INSTAGRAM_LOGOUT_URL = 'https://www.instagram.com/accounts/logout/'; var ua = navigator.userAgent.toLowerCase(); var DEFAULT_INSTAGRAM_ID = 'dsCrew_jp'; var DEFAULT_INSTAGRAM_DB_ID = new Array( '4', '641', '642', '643', '662', '679', '2297', '3806', '8303', '8641', '8654' ); // TEST環境 //var DEFAULT_INSTAGRAM_DB_ID = 401; var step = 0; var curRow = null; var resmap = { 1: '1', 2: '2', 3: '3' }; /* ステップメッセージとサブタイトル */ var stepMsg = { 1: { msg : i18n.t("instagram.step-side.1st"), subTitle : i18n.t("instagram.step-title.1st") }, 2: { msg : i18n.t("instagram.step-side.2nd"), subTitle : i18n.t("instagram.step-title.2nd") }, 3: { msg : i18n.t("instagram.step-side.3rd"), subTitle : i18n.t("instagram.step-title.3rd") } }; var prevDisabled = false; var nextDisabled = false; var hasToken = false; var instaInfo; var defConfig = { instagramId: 0, widgetType: 'grid', thumbSize: 300, thumbUnit: 'px', layoutX: 3, layoutY: 3, borderSize: 0, shadow: 'none', thumbPadding: 3, effectType: 'none', shareButton: 'none', //dispWidgetType: i18n.t("instagram.contents.grid"), //dispShadow: i18n.t("common.off"), //dispEffectType: i18n.t("common.off"), //dispShareButton: i18n.t("common.off"), likes: 'show', comments: 'show', caption: 'show', hoverCol: '#000000', borderCol: '#ffffff', imgNum: 20, flow: 'left', dispHeight: 500, textCol: '#000000' }; var serviceConfig = defConfig; // dispWidgetType:表示名 var dispWidgetTypeSelect = { 'grid': i18n.t("instagram.contents.grid"), 'board': i18n.t("instagram.contents.board"), 'slideshow': i18n.t("instagram.contents.slideshow"), 'float': i18n.t("instagram.contents.float"), 'carousel': i18n.t("instagram.contents.carousel"), 'scrap': i18n.t("instagram.contents.scrap") }; var dispEffectTypeSelect = { 'none': i18n.t("common.off"), 'fadeIn': i18n.t("instagram.contents.image-effect-fadein"), 'fadeOut': i18n.t("instagram.contents.image-effect-fadeout") }; /* 画面表示インスタンス */ var pageObj = new PageCommon(i18n.t("instagram.title"),'icon-instagram',resmap,stepMsg); // レスポンシブ形式フラグ var rspsvFlg; Ext.onReady(function(){ setupCommon(); /* 画面初期表示処理 */ pageObj.initPageDisplay(); var args = location.search; rspsvFlg = getResponsive(); /*if (rspsvFlg.rspsv == 1) { defConfig.thumbSize = 100; defConfig.thumbUnit = '%'; }*/ if (args.length > 0) { // get initial data var params = parseParam(args); // OAuth2からの戻り if (params.auth_return) { serviceConfig.instagramId = params.instaid; if (params.bindcld) { if (window.opener && !window.opener.closed){ var cldlocurl = window.location.href.replace("&bindcld=true",""); if (window.opener.location == null || window.opener.location.href == null) { window.opener.postMessage(cldlocurl, '*'); } else { window.opener.location.href = cldlocurl; } window.close(); return; } } if (params.error) { gotoStep(1); } else { step = 1; gotoStep(2); } // 復元 } else { var opt; if (params.o) opt = eval('(' + decodeURIComponent(params.o) + ')'); if (opt) { serviceConfig = jQuery.extend(defConfig, opt); //if (typeof(opt.thumbUnit) == 'undefined') serviceConfig.thumbUnit = 'px'; } // Block Templates if (DEFAULT_INSTAGRAM_DB_ID.indexOf(serviceConfig.instagramId+'') > -1) { serviceConfig = defConfig; gotoStep(1); } else { // get instagram info var url = './json/?instaid=' + serviceConfig.instagramId; jQuery.getJSON(url, function(json) { instaInfo = json.instagram; step = 2; gotoStep(3); }); } } } else { gotoStep(1); } jQuery('#btn-prev').click(function(e) { if (prevDisabled) return; nextDisabled = false; jQuery('#btn-next').removeClass('disabled'); if (step == 1) { location.href = '/main/'; } else if (step == 2) { jQuery.get('./hastoken', function(data, status) { if (data == 'True') { hasToken = true; } gotoStep(step - 1); }); } else { gotoStep(step-1); } }); jQuery('#btn-next').click(function(e) { if (nextDisabled) return; // オプション選択 if (step == 2) { // option set // 表示スタイル serviceConfig.widgetType = jQuery('.selected-style-item').children('.design-text').attr('id'); // サムネール サイズ(一辺の長さ) serviceConfig.thumbSize = jQuery('#thumbSize').val().trim(); if(serviceConfig.thumbSize == '' || !serviceConfig.thumbSize.match(/^[0-9]{1,4}$/i)) { pageObj.displayModalPropaty( 360, 120, i18n.t("alert.error"), "
" + i18n.t("instagram.contents.error.check-num-thumb-size") + "
"); return false; } if(serviceConfig.thumbSize <= 0) { pageObj.displayModalPropaty( 360, 120, i18n.t("alert.error"), "" + i18n.t("instagram.contents.error.check-range-thumb-size") + "
"); return false; } // サムネール 単位 if (rspsvFlg.rspsv == 1 && serviceConfig.widgetType == 'slideshow') { serviceConfig.thumbUnit = jQuery('#thumb-unit').val(); } if (serviceConfig.widgetType == 'float' || serviceConfig.widgetType == 'carousel' || serviceConfig.widgetType == 'scrap') { serviceConfig.thumbUnit = 'px'; } // レイアウト(横) serviceConfig.layoutX = jQuery('#layoutX').val().trim(); if(serviceConfig.layoutX == '' || !serviceConfig.layoutX.match(/^[0-9]{1,4}$/i)) { pageObj.displayModalPropaty( 360, 120, i18n.t("alert.error"), "" + i18n.t("instagram.contents.error.check-num-thumb-size") + "
"); return false; } if(serviceConfig.layoutX <= 0) { pageObj.displayModalPropaty( 360, 120, i18n.t("alert.error"), "" + i18n.t("instagram.contents.error.check-range-thumb-size") + "
"); return false; } // レイアウト(縦) serviceConfig.layoutY = jQuery('#layoutY').val().trim(); if(serviceConfig.layoutY == '' || !serviceConfig.layoutY.match(/^[0-9]{1,4}$/i)){ pageObj.displayModalPropaty( 360, 120, i18n.t("alert.error"), "" + i18n.t("instagram.contents.error.check-num-layout") + "
"); return false; } if(serviceConfig.layoutY <= 0){ pageObj.displayModalPropaty( 360, 120, i18n.t("alert.error"), "" + i18n.t("instagram.contents.error.check-range-layout") + "
"); return false; } if (rspsvFlg.rspsv == 1) { if (serviceConfig.layoutY > 10) { pageObj.displayModalPropaty( 360, 120, i18n.t("alert.error"), "" + i18n.t("instagram.contents.error.check-max-layout-y") + "
"); return false; } } // レイアウト最大数チェック if ((serviceConfig.layoutX * serviceConfig.layoutY) > 20) { pageObj.displayModalPropaty( 360, 120, i18n.t("alert.error"), "" + i18n.t("instagram.contents.error.check-max-layout-xy") + "
"); return false; } // 枠線の幅 serviceConfig.borderSize = jQuery('#borderSize').val().trim(); if(serviceConfig.borderSize == '' || !serviceConfig.borderSize.match(/^[0-9]{1,4}$/i)){ pageObj.displayModalPropaty( 360, 120, i18n.t("alert.error"), "" + i18n.t("instagram.contents.error.check-num-border-width") + "
"); return false; } // 枠線の色 serviceConfig.borderCol = jQuery('#borderCol').val(); // シャドウ //serviceConfig.shadow = jQuery('#shadow option:selected').val(); serviceConfig.shadow = jQuery('#shadow').val(); // 画像間隔 serviceConfig.thumbPadding = jQuery("#thumbPadding").val().trim(); if(serviceConfig.thumbPadding == '' || !serviceConfig.thumbPadding.match(/^[0-9]{1,4}$/i)) { pageObj.displayModalPropaty( 360, 120, i18n.t("alert.error"), "" + i18n.t("instagram.contents.error.check-num-image-space") + "
"); return false; } // 画像効果 //serviceConfig.effectType = jQuery('#effectType option:selected').val(); serviceConfig.effectType = jQuery('#effectType').val(); // シェアボタン //serviceConfig.shareButton = jQuery('#shareButton option:selected').val(); serviceConfig.shareButton = jQuery('#shareButton').val(); // 確認画面表示用 //serviceConfig.dispWidgetType = dispWidgetTypeSelect[serviceConfig.widgetType]; //serviceConfig.dispshadow = jQuery('#shadow option:selected').text(); //serviceConfig.dispshadow = jQuery('input#shadow + input')[0].value; //serviceConfig.dispEffectType = jQuery('input#effectType + input')[0].value; //serviceConfig.dispShareButton = jQuery('input#shareButton + input')[0].value; // add BiND10:imgNum, likes, comments, caption, hoverCol, flow, dispHeight, textCol serviceConfig.imgNum = jQuery('#imgNum').val(); serviceConfig.likes = jQuery('#likes').val(); serviceConfig.comments = jQuery('#comments').val(); serviceConfig.caption = jQuery('#caption').val(); serviceConfig.hoverCol = jQuery('#hoverCol').val(); serviceConfig.flow = jQuery('#flow').val(); serviceConfig.dispHeight = jQuery('#dispHeight').val(); serviceConfig.textCol = jQuery('#textCol').val(); if(serviceConfig.imgNum == '' || !serviceConfig.imgNum.match(/^[0-9]{1,4}$/i)){ pageObj.displayModalPropaty( 360, 120, i18n.t("alert.error"), "" + i18n.t("instagram.contents.error.cechk-num-imgages-max") + "
"); return false; } if(serviceConfig.dispHeight == '' || !serviceConfig.dispHeight.match(/^[0-9]{1,4}$/i)){ pageObj.displayModalPropaty( 360, 120, i18n.t("alert.error"), "" + i18n.t("instagram.contents.error.cechk-num-disp-height") + "
"); return false; } } else if (step == 3) { if (checkDouble()) { pageObj.displayModalPropaty( 360, 120, i18n.t("alert.error"), "" + i18n.t("alert.request-error-msg") + "
"); return false; } loadTag('instagramw', '', '', '', jQuery.toJSON(serviceConfig)); return; } gotoStep(step+1); }); // jQuery(window).bind('resize', resizeHandler); }); function gotoStep(nextstep) { if (nextstep == step) return; var fn = (nextstep > step) ? nextHandler:prevHandler; var nm = resmap[nextstep]; if (nextstep == 1 && hasToken) nm = '1-1'; var tm = new Date().getTime(); jQuery('#contents_body').load('/_modules/html/instagram/step' + nm + '.html?tm=' + tm, fn); } function nextHandler(text, status) { if (status == 'success') { step++; /* ステップ番号変更後の画面表示処理 */ pageObj.changeStepPage(step); if (step == 1 && hasToken) jQuery('#sub_title').text(i18n.t("instagram.contents.step1-1.title")); onLoadComplete(); } } function prevHandler(text, status) { if (status == 'success') { step--; /* ステップ番号変更後の画面表示処理 */ pageObj.changeStepPage(step); if (step == 1 && hasToken) jQuery('#sub_title').text(i18n.t("instagram.contents.step1-1.title")); onLoadComplete(); } } function onLoadComplete() { // Instagramアカウント if (step == 1) { jQuery('#btn-reconnect').click(function(e){ var url = oauth2Url.replace(/&/g, '&'); var cbres = getCallBackURL(); if (cbres.callback.length>0) { var oauthWindow; if (jQuery(this).hasClass('btn-insta-reaccess')) { oauthWindow = window.open(INSTAGRAM_LOGOUT_URL, 'instagramOAuthWindow', '_blank, width=900, height=600, menubar=no, scrollbars=yes, resizable=yes'); setTimeout(function(){ if (oauthWindow) { oauthWindow.location.href = url; } else { window.close(); window.open(url, 'instagramOAuthWindow', '_blank, width=900, height=600, location=no, menubar=no, scrollbars=yes, resizable=yes'); } },800); } else { oauthWindow = window.open(url, 'instagramOAuthWindow', '_blank, width=900, height=600, location=no, menubar=no, scrollbars=yes, resizable=yes'); } } else{ location.href = url; } return false; }); if (hasToken == false) { nextDisabled = true; jQuery('#btn-next').addClass('disabled'); } } else if (step == 2) { if (!_syncUtil.rspsv) jQuery('.rspsv').remove(); jQuery('.colorpicker').remove(); // option settings jQuery('#' + serviceConfig.widgetType) .parent('.style-item') .addClass('selected-style-item'); jQuery('#thumbSize').val(serviceConfig.thumbSize); jQuery('#layoutX').val(serviceConfig.layoutX); jQuery('#layoutY').val(serviceConfig.layoutY); jQuery('#borderSize').val(serviceConfig.borderSize); jQuery('#shadow').val(serviceConfig.shadow); jQuery('#thumbPadding').val(serviceConfig.thumbPadding); jQuery('#effectType').val(serviceConfig.effectType); jQuery('#shareButton').val(serviceConfig.shareButton); jQuery('#imgNum').val(serviceConfig.imgNum); jQuery('#likes').val(serviceConfig.likes); jQuery('#comments').val(serviceConfig.comments); jQuery('#caption').val(serviceConfig.caption); jQuery('#flow').val(serviceConfig.flow); jQuery('#dispHeight').val(serviceConfig.dispHeight); setColorPicker(jQuery('#borderCol'), jQuery('#borderCol-selector'), serviceConfig.borderCol); setColorPicker(jQuery('#hoverCol'), jQuery('#hoverCol-selector'), serviceConfig.hoverCol); setColorPicker(jQuery('#textCol'), jQuery('#textCol-selector'), serviceConfig.textCol); // 各表示スタイルによって設定をハンドリング selectOptionSet(); // 表示スタイル jQuery('.style-item').on('click', function() { jQuery('.style-row') .find('.style-item') .removeClass('selected-style-item'); jQuery(this).addClass('selected-style-item'); serviceConfig.widgetType = jQuery(this).children('.design-text').attr('id'); selectOptionSet(); }); // サムネール サイズ jQuery('#thumbSize').change(function(){ serviceConfig.thumbSize = jQuery("#thumbSize").val().trim(); }); // サムネール サイズ if (rspsvFlg.rspsv == 1 && serviceConfig.widgetType == 'slideshow') { /*jQuery('#thumb-unit').val(serviceConfig.thumbUnit); new Ext.form.ComboBox({ typeAhead: true, editable: false, triggerAction: 'all', transform:'thumb-unit', width:45, forceSelection:true });*/ jQuery('#thumb-unit').change(function(){ //serviceConfig.thumbUnit = jQuery('#thumb-unit option:selected').val(); serviceConfig.thumbUnit = jQuery('#thumb-unit').val(); }); } // レイアウト(横) jQuery('#layoutX').change(function(){ serviceConfig.layoutX = jQuery("#layoutX").val().trim(); }); // レイアウト(縦) jQuery('#layoutY').change(function(){ serviceConfig.layoutY = jQuery("#layoutY").val().trim(); }); // 枠線の幅 jQuery('#borderSize').change(function(){ serviceConfig.borderSize = jQuery('#borderSize').val().trim(); }); // 枠線の色 jQuery('#borderCol').change(function(){ serviceConfig.borderCol = jQuery(this).val(); jQuery('#borderCol').css('background-color', serviceConfig.borderCol); jQuery('#borderCol').css('color', checkTxtColor(hexToRGB(serviceConfig.borderCol))); }); // シャドウ jQuery('#shadow').change(function(){ //serviceConfig.shadow = jQuery('#shadow option:selected').val(); serviceConfig.shadow = jQuery('#shadow').val(); }); // 画像間隔 jQuery('#thumbPadding').change(function(){ serviceConfig.thumbPadding = jQuery("#thumbPadding").val().trim(); }); // 画像効果 jQuery('#effectType').change(function(){ //serviceConfig.effectType = jQuery('#effectType option:selected').val(); serviceConfig.effectType = jQuery('#effectType').val(); }); // シェアボタン jQuery('#shareButton').change(function(){ //serviceConfig.shareButton = jQuery('#shareButton option:selected').val(); serviceConfig.shareButton = jQuery('#shareButton').val(); }); // imgNum jQuery('#imgNum').change(function(){ serviceConfig.imgNum = jQuery('#imgNum').val(); }); // likes jQuery('#likes').change(function(){ serviceConfig.likes = jQuery('#likes').val(); }); // comments jQuery('#comments').change(function(){ serviceConfig.comments = jQuery('#comments').val(); }); // caption jQuery('#caption').change(function(){ serviceConfig.likes = jQuery('#caption').val(); }); // hoverCol jQuery('#hoverCol').change(function(){ serviceConfig.hoverCol = jQuery(this).val(); jQuery('#hoverCol').css('background-color', serviceConfig.hoverCol); jQuery('#hoverCol').css('color', checkTxtColor(hexToRGB(serviceConfig.hoverCol))); }); // flow jQuery('#flow').change(function(){ serviceConfig.flow = jQuery('#flow').val(); }); // dispHeight jQuery('#dispHeight').change(function(){ serviceConfig.dispHeight = jQuery("#dispHeight").val().trim(); }); // textCol jQuery('#textCol').change(function(){ serviceConfig.textCol = jQuery(this).val(); jQuery('#textCol').css('background-color', serviceConfig.textCol); jQuery('#textCol').css('color', checkTxtColor(hexToRGB(serviceConfig.textCol))); }); } else if (step == 3) { // 数値化 serviceConfig.thumbSize = serviceConfig.thumbSize-0; serviceConfig.thumbPadding = serviceConfig.thumbPadding-0; serviceConfig.borderSize = serviceConfig.borderSize-0; serviceConfig.layoutX = serviceConfig.layoutX-0; serviceConfig.layoutY = serviceConfig.layoutY-0; serviceConfig.dispHeight = serviceConfig.dispHeight-0; // option // 表示スタイル jQuery('#widgetType').html(dispWidgetTypeSelect[serviceConfig.widgetType]); // サムネール サイズ jQuery('#thumbSize').html(serviceConfig.thumbSize); jQuery('#thumb-size-td-2').hide(); if (rspsvFlg.rspsv == 1 && (serviceConfig.widgetType == 'slideshow' || serviceConfig.widgetType == 'float' || serviceConfig.widgetType == 'scrap')) jQuery('#thumb-th').text(i18n.t("instagram.contents.step2.thumb-size-slide")); if (rspsvFlg.rspsv == 1 && (serviceConfig.widgetType == 'grid' || serviceConfig.widgetType == 'board')) { jQuery('#thumb-size-td').hide(); jQuery('#thumb-size-td-2').show().css('display', 'inline-block'); } // サムネール 単位 jQuery('#thumb-unit').html(serviceConfig.thumbUnit); // レイアウト(横) jQuery('#layoutX').html(serviceConfig.layoutX); // レイアウト(縦) jQuery('#layoutY').html(serviceConfig.layoutY); // 枠線の幅 jQuery('#borderSize').html(serviceConfig.borderSize); // borderCol jQuery('#borderCol').html(serviceConfig.borderCol); // シャドウ jQuery('#shadow').html((serviceConfig.shadow == "disp")?i18n.t("common.on"):i18n.t("common.off")); // 画像間隔 jQuery('#thumbPadding').html(serviceConfig.thumbPadding); // 画像効果 jQuery('#effectType').html(dispEffectTypeSelect[serviceConfig.effectType]); // シェアボタン jQuery('#shareButton').html((serviceConfig.shareButton == "share")?i18n.t("common.on"):i18n.t("common.off")); // imgNum jQuery('#imgNum').html(serviceConfig.imgNum); // likes jQuery('#likes').html((serviceConfig.likes == "show")?i18n.t("common.on"):i18n.t("common.off")); // comments jQuery('#comments').html((serviceConfig.comments == "show")?i18n.t("common.on"):i18n.t("common.off")); // caption jQuery('#caption').html((serviceConfig.caption == "show")?i18n.t("common.on"):i18n.t("common.off")); // hoverCol jQuery('#hoverCol').html(serviceConfig.hoverCol); // flow jQuery('#flow').html((serviceConfig.flow == "left")?i18n.t("instagram.contents.step3.flow-left"):i18n.t("instagram.contents.step3.flow-right")); // dispHeight jQuery('#dispHeight').html(serviceConfig.dispHeight); // textCol jQuery('#textCol').html(serviceConfig.textCol); jQuery('.option-box .row:not(.'+serviceConfig.widgetType+')').hide(); jQuery('.option-box .row.'+serviceConfig.widgetType).show(); // レスポンシブ形式注記 if (rspsvFlg.rspsv == 1) jQuery('#rspsv-sample-txt').text(i18n.t("instagram.contents.rspsv-txt")); if (serviceConfig.widgetType == 'float' || serviceConfig.widgetType == 'carousel') jQuery('#font-size-txt').text(i18n.t("instagram.contents.font-size-txt")); else jQuery('#font-size-txt').text(''); var instaWidget = jQuery('#sample_area'); if (serviceConfig.widgetType == 'float' || serviceConfig.widgetType == 'scrap' || serviceConfig.widgetType == 'carousel') { instaWidget = jQuery('#sample_area2'); jQuery('#rspsv-sample-txt').text(i18n.t("instagram.contents.sample-txt")); } // // get instagram info // if (instaInfo) { // // disp Widget // dispWidget(instaWidget); // } // else { var url = './json/?instaid=' + serviceConfig.instagramId; jQuery.getJSON(url, function(json) { serviceConfig.instagramId = json.instagram_id; instaInfo = json.instagram; // disp Widget dispWidget(instaWidget); }); // } } loaded(); /* 画面読込後の表示処理 */ pageObj.loadedPageDisplay(); } function selectOptionSet() { if (serviceConfig.widgetType == null || typeof(serviceConfig.widgetType) == 'undefined') return; if (rspsvFlg.rspsv == 1) { jQuery('#thumb-size-txt').show(); } jQuery('.row.borderCol').hide(); switch (serviceConfig.widgetType) { case 'board': jQuery('.row:not(.board)').hide(); jQuery('.row.board').show(); jQuery('.row.borderCol').hide(); jQuery('#thumbPadding').removeAttr('disabled'); jQuery('#layoutX').removeAttr('disabled'); jQuery('#layoutY').removeAttr('disabled'); if (rspsvFlg.rspsv == 1) { jQuery("#thumb-size-th").text(i18n.t("instagram.contents.step2.thumb-size")); jQuery('#thumbSize').attr('disabled','disabled'); jQuery('#thumb-unit-div').html(''); jQuery('#thumb-unit-div').text('px'); //jQuery('#thumb-txt').text('※レスポンシブ形式:指定不可'); jQuery('#thumb-size-td').hide(); jQuery('#thumb-size-td-2').show().css('display', 'inline-block'); jQuery('#layout-txt').text(i18n.t("instagram.contents.step2.layout-rspsv-txt")); jQuery('.row.borderCol').show(); } break; case 'slideshow': jQuery('.row:not(.slideshow)').hide(); jQuery('.row.slideshow').show(); jQuery('.row.borderCol').hide(); if (rspsvFlg.rspsv == 1) { jQuery("#thumb-size-th").text(i18n.t("instagram.contents.step2.thumb-size-slide")); jQuery('#thumbSize').removeAttr('disabled'); jQuery('#thumb-unit-div').text(''); var selThumUnit = '