//*******************************
// 事例検索
//*******************************
'use strict';
//デフォルトサムネイルファイル
var NoImageSrc = '/jp/group/fjj/imagesgig5/thumb-common_tcm283-5251091_tcm283-2750236-32.jpg';
//
//findのPolyfill
if (!Array.prototype.find) {
Array.prototype.find = function(predicate) {
if (this === null) {
throw new TypeError('Array.prototype.find called on null or undefined');
}
if (typeof predicate !== 'function') {
throw new TypeError('predicate must be a function');
}
var list = Object(this);
var length = list.length >>> 0;
var thisArg = arguments[1];
var value;
for (var i = 0; i < length; i++) {
value = list[i];
if (predicate.call(thisArg, value, i, list)) {
return value;
}
}
return undefined;
};
}
//名前空間定義
var FUJITSU_CASESTUDY = FUJITSU_CASESTUDY || {};
//設定
FUJITSU_CASESTUDY.SETTINGS = {
breakpoint: '767px',
generator: {
pageId: 'casestudy',
featureAreaId: 'casestudy-feature',
searchResultAreaId: 'casestudy-searchresult',
rifineCategoryAreaId: 'searcharea-refine',
categoryDataProp: null,
caseDataProp: null,
maxlengthText: 48
},
modal: {
modalCname: 'js-modal',
openCname: 'js-modal-opener',
closeCname: 'js-modal-close',
dataTargetProp: 'data-target-modal',
},
morelist: {
listCname: 'js-morelist',
listBodyCname: 'js-morelist-body',
switchCname: 'js-morelist-switch',
refreshCname: 'js-morelist-refresh',
dataTargetProp: 'data-target-morelist',
toggleCname: 'is-noremainder',
notch: { pc: 12, sp: 5 },
col: { pc: 4, sp: 1 }
},
searcharea: {
searchAreaCname: 'js-searcharea',
checkboxCname: 'js-searcharea-checkbox',
hitsCname: 'js-searcharea-hits',
totalHitsCname: 'js-searcharea-total',
disabledCname: 'is-disabled',
switchCname: 'js-searcharea-exec',
clearCname: 'js-searcharea-clear',
resultAreaId: 'casestudy-searchresult',
keywordsAreaId: 'list-keywords',
refineAreaId: 'searcharea-refine'
}
};
//フラグ:ページ生成済か
FUJITSU_CASESTUDY.generated = false;
//ブレイクポイント判定
FUJITSU_CASESTUDY.isSP = function() {
return window.matchMedia('screen and (max-width: ' + FUJITSU_CASESTUDY.SETTINGS.breakpoint + ')').matches;
};
//iOS判定
FUJITSU_CASESTUDY.isIOS = /[ \(]iP/.test(window.navigator.userAgent);
//iOS用スクロール無効
FUJITSU_CASESTUDY.winPos = 0;
FUJITSU_CASESTUDY.scrollOff = function(evt) {
if (evt.target === document) window.scroll(0, FUJITSU_CASESTUDY.winPos);
};
//要素群を配列に変換して返す
FUJITSU_CASESTUDY.DOMtoArray = function(dom) {
return [].map.call(dom, function(d) {
return d;
});
};
//display:blockの要素のみ抽出
FUJITSU_CASESTUDY.getBlockItem = function(items) {
return FUJITSU_CASESTUDY.DOMtoArray(items).filter(function(el) {
return window.getComputedStyle(el, null).getPropertyValue('display') === 'block';
});
};
//各スイッチ用イベント割り当て
FUJITSU_CASESTUDY.switchEvent = function(switches, func) {
switches.forEach(function(sw) {
sw.addEventListener('click', func, false);
});
};
//ページ生成
FUJITSU_CASESTUDY.generetaPage = function(settings) { //ページ生成
var CASESTUDY = document.getElementById(settings.pageId);
//CSV読み込み
var csvLoader = function(data, keys, func) {
var dataStore = function(ary) { //データ格納
var data = [];
var key = ary;
return function(d, idx) {
data[key[idx]] = d.split('\n');
return data;
};
};
var responseData = dataStore(keys);
//pathで渡されたファイルを非同期読込み
//読込むファイルが全てロードされたら、func実行
var loader = function(path, idx) {
var xhr = new XMLHttpRequest();
var data = [];
xhr.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
data = responseData(xhr.responseText, idx);
if (Object.keys(data).length === 2) func(data);
}
};
xhr.open('GET', path + '?' + new Date().getFullYear());
xhr.send();
};
//読込むファイル数分ループ
data.forEach(loader);
};
//コード生成
var generate = function(option, data) {
//文字数計算(実体参照や代替文字、htmlタグは文字数にカウントしない
var truncateStrings = function(txt, MAXLEN) {
var baseTexts = function(t) {
var REGX = /&[\w#]+;|<[\s\w\/\-"#]+>/g;
return {
splitText: t.split(REGX), //txtを実体参照や代替文字、htmlタグの箇所で分割したテキストの配列
hitStrings: t.match(REGX) //txtに含まれていた実体参照や代替文字、htmlタグの配列
};
};
var format = function(target, strlen) { //文字列を整形
var str = '';
var cnt = 0;
var countUp = function(strCode) { //半角:0.5、全角:1
return (strCode >= 0x00 && strCode < 0x81) || (strCode === 0xf8f0) || (strCode >= 0xff61 && strCode < 0xffa0) || (strCode >= 0xf8f1 && strCode < 0xf8f4) ? 0.5 : 1;
};
var getStrings = function(t, idx) { //最大文字数MAXLENまでのテキストを返す
var i = 0;
while (i < t.length) {
str += t.charAt(i);
if ((cnt += countUp(t.charCodeAt(i))) >= strlen) {
if (idx === target.splitText.length - 1 && t.charAt(i + 1) !== '') str += '…';
break;
}
i += 1;
}
if (target.hitStrings != null && target.hitStrings[idx] != null) str += target.hitStrings[idx];
};
target.splitText.forEach(getStrings);
return str;
};
return format(baseTexts(txt), MAXLEN);
};
//小カテゴリリストの生成
var generateCodeTagList = function(belongsData, key, orgCatData) {
if (document.getElementById('casestudy-feature') != null) { //TOPの場合
var REGX_KEY = new RegExp('^' + key + '-');
//記事が属する小カテゴリからmainCategoryに属するものを抽出
var extTagIds = belongsData.filter(function(cat) {
return cat.match(REGX_KEY) != null;
});
//カテゴリデータからmainCategoryに属する行のみ抽出
var extMainCategoryData = orgCatData.filter(function(d) {
return d[2].match(REGX_KEY) !== null;
});
//idに応じた小カテゴリテキストの取得
var extTagLabels = function(ids, cats) {
//最初のIDだけにする
if (ids.length > 0) {
ids = [ids[0]];
}
return ids.map(function(id) {
var REGX_NUM = new RegExp(/\d{1,2}$/);
return cats.find(function(cat) {
return cat[2] === id;
})[3];
});
};
return extTagLabels(extTagIds, extMainCategoryData).map(function(txt) {
return '
' + txt + '';
}).join('');
} else { //AI等のカテゴリページの場合
var REGX_KEY = new RegExp('^1-|^2-'); //特定のカテゴリIDから抽出する
//記事が属する小カテゴリからmainCategoryに属するものを抽出
var extTagIds = belongsData.filter(function(cat) {
return cat.match(REGX_KEY) != null;
});
//抽出したIDから該当するデータのみを取得する
var REGX_KEY_ID = '^' + extTagIds.join('$|^') + '$';
var extMainCategoryData = orgCatData.filter(function(d) {
return d[2].match(REGX_KEY_ID) !== null;
});
//idで絞り込んであるので全てのタグを表示
var extTagLabels = function(ids, cats) {
return cats.map(function(cat) {
return cat[3];
});
};
return extTagLabels(extTagIds, extMainCategoryData).map(function(txt) {
return '' + txt + '';
}).join('');
}
};
//代替画像を生成する処理
var generateAlterImageSrc = function(belongsData, key, orgCatData) {
var REGX_KEY = new RegExp('^5-'); //特定のカテゴリIDから抽出する
//記事が属する小カテゴリからmainCategoryに属するものを抽出
var extTagIds = belongsData.filter(function(cat) {
return cat.match(REGX_KEY) != null;
});
//カテゴリデータからmainCategoryに属する行のみ抽出
var extMainCategoryData = orgCatData.filter(function(d) {
return d[2].match(REGX_KEY) !== null;
});
//idに応じた小カテゴリテキストの取得
var alterImage = function(ids, cats) {
//一番小さいIDだけにする
var minId = null;
if (ids.length > 0) {
var minChildId = null;
ids.map(function(id) {
var childId = Number(id.substring(id.indexOf("-") + 1, id.length));
if (!minChildId || minChildId > childId) {
minChildId = childId;
minId = id;
}
});
}
if (minId) {
return NoImageSrc;
//return "https://www.fujitsu.com/downloads/JP/about/resources/case-studies/images/img_category_" + minId + ".jpg";
} else {
//お客様の業種が登録されていない場合、「その他」の画像を表示する
var maxChildId = null,
maxId;
cats.map(function(cat) {
//その他の画像は5のカテゴリ内の最大ID
var childId = Number(cat[2].substring(cat[2].indexOf("-") + 1, cat[2].length));
if (!maxChildId || maxChildId < childId) {
maxChildId = childId;
maxId = cat[2];
}
});
return NoImageSrc;
//return "https://www.fujitsu.com/downloads/JP/about/resources/case-studies/images/img_category_" + maxId + ".jpg";
}
};
return alterImage(extTagIds, extMainCategoryData);
};
//記事が属するカテゴリデータの配列化(「;」で分割
var getCategories = function(d) {
return d.split(';');
};
//記事データから記事が属するカテゴリ一覧の取得
var getExistCategoryList = function(caseData) {
var categories = [];
caseData.map(function(d) {
return getCategories(d[6]);
}).forEach(function(cats) {
cats.forEach(function(cat) {
if (categories.indexOf(cat) < 0) categories.push(cat);
});
});
return categories;
};
//idからレコードを抽出
var serachCaseById = function(id, catData) {
var hit = catData.filter(function(d) {
return d[2] == id;
});
return hit[0];
}
//絞り込みエリア出力
var generateRefineCategoryArea = function(catData, existList) {
var generateCode = function(data, idx) {
var code = '';
if (data[1] !== '') {
if (idx !== 0) code += '';
var addStyle = '';
if (data[2].split('-')[0] >= 7) {
addStyle = ' customer-background';
}
if (data[0] !== '') {
code += '' + data[0] + '';
}
code += '' + data[1] + '';
};
//検索結果出力
var generateSearchResultArea = function(caseData, catData) {
var generateCode = function(data) {
var belongs = getCategories(data[6]); //記事が属する小カテゴリID
var getCategoryClass = function(d) { //小カテゴリ用クラス生成
return d.map(function(cat) {
return 'c' + cat;
}).join(' ');
};
var traget = data[8] ? ' target="' + data[8] + '"' : '';
return '' + getTagList(catData, data) + '' + data[2] + '
' + truncateStrings(data[3], settings.maxlengthText) + '
';
};
return caseData.map(generateCode).join('');
};
//----------------------------------------------------- ↓表示するタグリストを作成 2019.07.26
var getTagList = function(catData, data) {
var cats = data[6].split(';');
var themes = [];
var types = [];
cats.forEach(function(id, index) {
var ids = id.split('-');
if (ids[0] == 8) { //タイプ検索
var theme = serachCaseById(id, catData);
if (theme) themes.push(theme[3]);
}
if (ids[0] <= 6) { //業種検索
var type = serachCaseById(id, catData);
var typeParent = serachCaseById(ids[0] + '-1', catData);
if (type && typeParent) types.push(typeParent[1] + ' - ' + type[3]);
}
});
return '' + themes.slice(0, 2).join(' / ') + '
' + types.slice(0, 2).join(' / ') + '
'
};
//----------------------------------------------------- ↑
//おすすめ記事の中からランダムで1記事のデータを取得
var selectArticle = function(caseData) {
var recommended = caseData.filter(function(d) {
return d[0] === 'TRUE';
});
return recommended[Math.floor(Math.random() * recommended.length)];
};
//おすすめ記事エリア出力
var generateFeatureArea = function(data, catData) {
var belongs = getCategories(data[6]);
return '' + data[2] + '
' + data[3] + '
';
};
//データの配列化
var setData = function(orgData) {
var csvToArray = function(d) { //csvデータを配列に変換
//データの中にカンマがある場合のエスケープ処理
var matches = d.replace(/\r|\n/g, '').match(/(\s*"[^"]+"\s*|\s*[^,]+|,)(?=,|$)/g);
for (var n = 0; n < matches.length; ++n) {
matches[n] = matches[n].trim().replace(/"/g, "");
if (matches[n] == ',') matches[n] = '';
}
if (d.replace(/\r|\n/g, '')[0] == ',') matches.unshift("");
return matches;
};
return orgData.map(csvToArray);
};
var CASELIST_DATA = setData(data.caseData); //事例データ
var CATEGORY_DATA = setData(data.categoryData); //カテゴリデータ
//各エリアのコード生成
document.getElementById(option.searchResultAreaId).insertAdjacentHTML('beforeend', generateSearchResultArea(CASELIST_DATA, CATEGORY_DATA));
if (document.getElementById(option.rifineCategoryAreaId) != null) {
document.getElementById(option.rifineCategoryAreaId).insertAdjacentHTML('beforeend', generateRefineCategoryArea(CATEGORY_DATA, getExistCategoryList(CASELIST_DATA)));
}
if (document.getElementById(option.featureAreaId) != null && selectArticle(CASELIST_DATA) != null) { //おすすめが一件もない場合は当該エリアを生成しない
document.getElementById(option.featureAreaId).insertAdjacentHTML('beforeend', generateFeatureArea(selectArticle(CASELIST_DATA), CATEGORY_DATA));
}
//ページ生成進捗確認用フラグをtrueに
FUJITSU_CASESTUDY.generated = true;
};
if (CASESTUDY) {
csvLoader(
[CASESTUDY.getAttribute(settings.categoryDataProp || 'data-categories'), CASESTUDY.getAttribute(settings.caseDataProp || 'data-case')], //データファイルパス
['categoryData', 'caseData'], //データ格納配列の添字
function(data) { //全データ取得後に実行される関数
generate(settings, data);
}
);
}
};
/* 汎用スイッチ要素の取得
要素群elems中、data属性dataPropの値がtargetIdと同一の要素のみ抽出して返す */
FUJITSU_CASESTUDY.getSwitch = function(elems, targetId, dataProp) {
var getTarget = function(el) {
return el.getAttribute(dataProp);
};
return FUJITSU_CASESTUDY.DOMtoArray(elems).filter(function(sw) {
return targetId === getTarget(sw);
});
};
//モーダルウィンドウ
FUJITSU_CASESTUDY.initModal = function(settings) {
var Modal = function(modal) {
this.MODAL = modal; //モーダル表示要素
this.ON_CLASS = 'is-on'; //モーダル表示時用クラス名
this.TRANSITION_CLASS = 'is-transition'; //モーダル非表示から表示まで用クラス名
};
Modal.prototype = {
setOpenSwitch: function(elems, id, dataProp) { //モーダルを開く要素を取得
this.OPEN_SWITCH = FUJITSU_CASESTUDY.getSwitch(elems, id, dataProp);
return this;
},
setCloseSwitch: function(elems, id, dataProp) { //モーダルを閉じる要素を取得
this.CLOSE_SWITCH = FUJITSU_CASESTUDY.getSwitch(elems, id, dataProp);
return this;
},
toggleClass: function() { //表示・非表示用クラス付け替え
var _this = this;
var html = document.getElementsByTagName('html')[0];
var animeEnd = function() { //アニメーション後の処理
_this.MODAL.removeEventListener('transitionend', animeEnd, false);
_this.MODAL.classList.remove(_this.TRANSITION_CLASS);
if (!_this.MODAL.classList.contains(_this.ON_CLASS)) _this.MODAL.removeAttribute('style');
};
var adjustDisplayPosition = function(flg) { //モーダルを閉じた際の表示位置調整
var winp = window.pageYOffset;
if (flg) {
html.removeAttribute('style');
window.scroll(0, winp);
}
};
var forIOS = function() {
FUJITSU_CASESTUDY.winPos = window.pageYOffset;
if (html.classList.contains(_this.ON_CLASS)) {
window.addEventListener('scroll', FUJITSU_CASESTUDY.scrollOff, false);
} else {
window.removeEventListener('scroll', FUJITSU_CASESTUDY.scrollOff, false);
}
};
html.classList.toggle(_this.ON_CLASS);
//iOS用の処理
if (FUJITSU_CASESTUDY.isIOS) forIOS();
adjustDisplayPosition(!html.classList.contains(_this.ON_CLASS));
_this.MODAL.classList.add(_this.TRANSITION_CLASS);
_this.MODAL.classList.toggle(_this.ON_CLASS);
//アニメーション後の処理を登録
_this.MODAL.addEventListener('transitionend', animeEnd, false);
return this;
},
open: function(e) { //開く
e.preventDefault();
this.toggleClass();
// this.MODAL.style.top = window.pageYOffset + 'px';
return this;
},
close: function(e) { //閉じる
var isCloseTrigger = function(thisObj, target) {
var isCloseButton = function(buttons, tgt) {
return buttons.some(function(button) {
return button == tgt;
});
};
return target == thisObj.MODAL || isCloseButton(thisObj.CLOSE_SWITCH, target);
};
if (isCloseTrigger(this, e.target)) {
e.preventDefault();
this.toggleClass();
}
return this;
},
init: function(option) { //初期化
var _this = this;
var id = _this.MODAL.getAttribute('id');
var toggleModal = function(e) {
_this.MODAL.classList.contains(_this.ON_CLASS) ? _this.close(e) : _this.open(e);
};
_this.setOpenSwitch(document.getElementsByClassName(option.openCname), id, option.dataTargetProp).setCloseSwitch(document.getElementsByClassName(option.closeCname), id, option.dataTargetProp);
FUJITSU_CASESTUDY.switchEvent(_this.OPEN_SWITCH, toggleModal);
_this.MODAL.addEventListener('click', toggleModal, false);
return _this;
}
};
[].forEach.call(document.getElementsByClassName(settings.modalCname), function(el) {
new Modal(el).init(settings);
});
};
//「もっと表示」リストエリア
FUJITSU_CASESTUDY.initMoreList = function(settings) {
var MoreList = function(elem) {
this.MORELIST = elem;
this.displayedResults = 0;
this.isSP = FUJITSU_CASESTUDY.isSP();
};
MoreList.prototype = {
setProp: function(option) { //各プロパティの設定
this.MORELIST_BODY = this.MORELIST.getElementsByClassName(option.listBodyCname)[0];
this.MORELIST_SWITCH = FUJITSU_CASESTUDY.getSwitch(document.getElementsByClassName(option.switchCname), this.MORELIST.getAttribute('id'), option.dataTargetProp);
this.MORELIST_REFRESH = FUJITSU_CASESTUDY.getSwitch(document.getElementsByClassName(option.refreshCname), this.MORELIST.getAttribute('id'), option.dataTargetProp);
this.NOTCH = option.notch;
this.COL = option.col;
this.REMAIND_CLASS = option.toggleCname;
return this;
},
setHeightOption: function() { //一度に表示する件数と一行の件数を取得
this.heightOption = this.isSP ? { notch: this.NOTCH.sp, col: this.COL.sp } : { notch: this.NOTCH.pc, col: this.COL.pc };
return this;
},
updateIsSp: function(flg) { //SP表示||PC表示判定後、プロパティ更新
if (this.isSP !== flg) {
this.isSP = flg;
this.resetDisplay()
.setDisplayedResults()
.setHeightOption()
.updateDisplay();
}
return this;
},
loadImage: function(listItems, old, current) {
var dataProp = 'data-lazyload';
var getImageElement = function(item) { //listItemsの子要素imgのみ抽出
return item.getElementsByClassName('img')[0];
};
var getLazyLoadImage = function(img) { //lazyload用の属性を持っている要素のみ抽出
return img.hasAttribute(dataProp);
};
var setImageSrc = function(img) { //lazyload用属性をsrc属性に代入
img.setAttribute('src', img.getAttribute(dataProp));
img.removeAttribute(dataProp);
};
listItems.slice(old, current)
.map(getImageElement)
.filter(getLazyLoadImage)
.forEach(setImageSrc);
return this;
},
setDisplayedResults: function(n) { //表示件数の更新もしくは0リセット
this.displayedResults = n != null ? this.displayedResults + n : 0;
return this;
},
getDisplayRange: function(len, notch) { //リスト中から新たに表示する件数を取得
this.setDisplayedResults(this.displayedResults + notch > len ? len - this.displayedResults : notch);
return this;
},
adjustHeight: function(cols) { //リストのmax-heightの設定
var _this = this;
var LIST = this.MORELIST;
var TRANSITION_CLASS = 'is-transition';
//新たに表示する分の高さの取得
var getHeight = function(listItems, lines, col) {
var h = 0;
var i = 0;
var mgn = parseInt(window.getComputedStyle(listItems[0], null).getPropertyValue('margin-top')) || 0;
h += lines * mgn; //行ごとのマージン分を加算
while (i < lines) {
h += listItems[i * col].clientHeight; //行ごとの要素の高さを加算
i += 1;
}
return h;
};
//transition用
var isTransition = function() {
LIST.removeEventListener('transitionend', isTransition, false);
LIST.classList.remove(TRANSITION_CLASS);
};
LIST.addEventListener('transitionend', isTransition, false);
LIST.classList.add(TRANSITION_CLASS);
LIST.style.maxHeight = getHeight(FUJITSU_CASESTUDY.getBlockItem(_this.MORELIST_BODY.childNodes), Math.ceil(_this.displayedResults / cols), cols) + 27 + 'px';
return this;
},
isShowAll: function(len) { //全件表示済みか
var _this = this;
var hasRemainderClass = function() {
return _this.MORELIST.classList.contains(_this.REMAIND_CLASS)
};
if (this.displayedResults === len && !hasRemainderClass()) {
this.MORELIST.classList.add(this.REMAIND_CLASS);
} else if (this.displayedResults !== len && hasRemainderClass()) {
this.MORELIST.classList.remove(this.REMAIND_CLASS);
}
return this;
},
updateDisplay: function() { //表示の更新
var listItems = FUJITSU_CASESTUDY.getBlockItem(this.MORELIST_BODY.childNodes);
var len = listItems.length;
var resultsOld = this.displayedResults;
var timing = function(_this, item) {
var isComplete = function(checkHeight) {
var tid;
var itemHeight = item.clientHeight;
if (checkHeight !== itemHeight) {
tid = window.setTimeout(function() {
window.clearTimeout(tid);
isComplete(itemHeight);
}, 100);
} else {
_this.adjustHeight(_this.heightOption.col)
.isShowAll(len);
}
};
isComplete(0);
};
this.getDisplayRange(len, this.heightOption.notch)
.loadImage(listItems, resultsOld, this.displayedResults);
timing(this, listItems[0]);
return this;
},
resetDisplay: function() { //max-heightを0リセット
this.MORELIST.style.maxHeight = 0;
return this;
},
init: function(option) { //初期化
var _this = this;
//「もっと表示」ボタンを押下時の処理
var switchOn = function(e) {
e.preventDefault();
_this.updateDisplay();
};
//リストの内容が一新された時
var refresh = function(e) {
e.preventDefault();
_this.resetDisplay()
.setDisplayedResults()
.setHeightOption()
.updateDisplay();
};
//ウィンドウ幅の変化時
var resized = function() {
_this.updateIsSp(FUJITSU_CASESTUDY.isSP())
.adjustHeight(_this.heightOption.col);
};
_this.setProp(option)
.setHeightOption()
.updateDisplay()
FUJITSU_CASESTUDY.switchEvent(_this.MORELIST_SWITCH, switchOn);
FUJITSU_CASESTUDY.switchEvent(_this.MORELIST_REFRESH, refresh);
window.addEventListener('resize', resized, false);
return this;
}
};
[].forEach.call(document.getElementsByClassName(settings.listCname), function(list) {
new MoreList(list).init(settings);
});
};
//検索エリア
FUJITSU_CASESTUDY.initSearchArea = function(settings) {
var SearchArea = function(elem) {
this.SEARCH_AREA = elem;
this.refineCategories = [];
this.totalHits = 0;
};
SearchArea.prototype = {
setProps: function(option) { //各プロパティの設定
this.CATEGORIES = FUJITSU_CASESTUDY.DOMtoArray(this.SEARCH_AREA.getElementsByClassName(option.checkboxCname));
this.HITS_CLASS = option.hitsCname;
this.TOTALHITS_CLASS = option.totalHitsCname;
this.DISABLED_CLASS = option.disabledCname;
this.RESULT_AREA = document.getElementById(option.resultAreaId);
this.REFINE_AREA = document.getElementById(option.refineAreaId);
this.KEYWORDS_AREA = document.getElementById(option.keywordsAreaId);
return this;
},
setRefineCategory: function(cat) { //絞り込みキーワードの追加・リセット
cat == null ? this.refineCategories = [] : this.refineCategories.push(cat);
return this;
},
abledItem: function(cb) { //絞り込みカテゴリ要素のdisabledを解除
cb.disabled = false;
cb.parentNode.classList.remove(this.DISABLED_CLASS);
return this;
},
disabledItem: function(cb) { //絞り込みカテゴリ要素のdisabledに設定
cb.disabled = true;
cb.parentNode.classList.add(this.DISABLED_CLASS);
return this;
},
adjustRefineAreaHeight: function() { //絞り込みカテゴリ選択エリアの高さ調整
var target = this.REFINE_AREA;
//「2」はボーダー分
target.style.maxHeight = target.parentNode.clientHeight - (target.previousElementSibling.clientHeight + target.nextElementSibling.clientHeight + 2) + 'px';
return this;
},
addRefineCategory: function(txt, val) { //絞り込みキーワードの追加
this.setRefineCategory(val)
.KEYWORDS_AREA.insertAdjacentHTML('beforeend', '' + txt + '');
return this;
},
removeRefineCategory: function(val) { //絞り込みキーワードの削除
var n = this.refineCategories.indexOf(val);
if (n > -1) {
this.refineCategories.splice(n, 1);
this.KEYWORDS_AREA.removeChild(this.KEYWORDS_AREA.childNodes[n]);
}
return this;
},
updateArticleNumber: function() { //カテゴリ別検索ヒット記事数の更新
var _this = this;
//disaledではない要素の抽出
var getAbledItem = function(cb) {
return !cb.disabled;
};
//記事数の更新
var modifiNumber = function(cb) {
var n = FUJITSU_CASESTUDY.getBlockItem(_this.RESULT_AREA.getElementsByClassName('c' + cb.value)).length;
cb.parentNode.getElementsByClassName(_this.HITS_CLASS)[0].textContent = n;
if (n === 0) {
_this.disabledItem(cb).removeRefineCategory(cb);
} else {
_this.abledItem(cb);
}
};
_this.CATEGORIES.forEach(modifiNumber);
return this;
},
setTotalHits: function() { //総ヒット数の取得
this.totalHits = FUJITSU_CASESTUDY.getBlockItem(this.RESULT_AREA.childNodes).length;
return this;
},
updateAllHits: function(targets) { //target要素内の総ヒット数の書き換え
var _this = this;
targets.forEach(function(t) {
t.textContent = _this.totalHits;
});
return this;
},
updateResultAreaClasses: function() { //検索結果リスト要素のクラスを更新
var _this = this;
var classes = _this.RESULT_AREA.className;
var ALL_CLASS = ' is-all';
//絞込み用カテゴリクラスの削除
var resetRefineClasses = function(cname) {
var reg = /\sc\d{1,2}-[0-9\-]+/g;
return cname.replace(reg, '');
};
//絞込み用カテゴリクラスの生成
var generateRefineClasses = function(cname) {
return _this.refineCategories.map(function(cat) {
return ' c' + cat;
}).join('');
};
if (classes.indexOf(ALL_CLASS) > -1) classes = classes.replace(ALL_CLASS, '');
_this.RESULT_AREA.className = resetRefineClasses(classes) + (_this.refineCategories.length > 0 ? generateRefineClasses(classes) : ALL_CLASS);
//絞り込んだ内容でdisplayをblockにする
var generateRefineClassName = function() {
return _this.refineCategories.map(function(cat) {
return '.c' + cat;
}).join('');
};
var stylesheet = _this.getDynamicStyleSheet();
if (stylesheet.cssRules.length > 0) {
stylesheet.deleteRule(0);
}
if (_this.refineCategories.length > 0) {
stylesheet.insertRule(generateRefineClassName() + " .list-casestudies__item" + generateRefineClassName() + " { display:block; }", 0);
}
return _this;
},
getDynamicStyleSheet: function() { //検索用のStyleSheetを取得
var stylesheets = document.styleSheets;
for (var i = 0; i < stylesheets.length; i++) {
if (stylesheets.item(i).ownerNode.id === "dynamic_style") {
return stylesheets.item(i);
}
}
},
init: function(option) { //初期化
var _this = this;
//検索結果のクリア
var resetRefine = function(e) {
var isChecked = function(cb) { //checkedな要素を抽出
return cb.checked;
};
var isDisabled = function(cb) { //disabledな要素を抽出
return cb.disabled;
};
var resetChecked = function(cb) { //チェックを外す
cb.checked = false;
};
var resetDisabled = function(cb) { //disabled解除
_this.abledItem(cb);
};
var resetKeyWordsArea = function() { //絞り込みキーワードを空にする
while (_this.KEYWORDS_AREA.firstChild) {
_this.KEYWORDS_AREA.removeChild(_this.KEYWORDS_AREA.firstChild);
}
};
var tmpCnames = _this.RESULT_AREA.className;
var stylesheet = _this.getDynamicStyleSheet();
var rule = "";
if (stylesheet.cssRules.length > 0) {
rule = stylesheet.cssRules.item(0).cssText;
}
e.preventDefault();
_this.CATEGORIES.filter(isChecked).forEach(resetChecked);
_this.CATEGORIES.filter(isDisabled).forEach(resetDisabled);
//adjustRefineAreaHeightで付加されたstyle属性が有れば、削除
if (_this.REFINE_AREA.hasAttribute('style')) _this.REFINE_AREA.removeAttribute('style');
_this.setRefineCategory()
.updateResultAreaClasses()
.updateArticleNumber()
.setTotalHits()
.updateAllHits(FUJITSU_CASESTUDY.DOMtoArray(_this.SEARCH_AREA.getElementsByClassName(_this.TOTALHITS_CLASS)))
.RESULT_AREA.className = tmpCnames;
resetKeyWordsArea();
if (rule != "") {
if (stylesheet.cssRules.length > 0) {
stylesheet.deleteRule(0);
}
stylesheet.insertRule(rule, 0);
}
};
//検索実行
var searchExec = function(e) {
e.preventDefault();
_this.updateAllHits(FUJITSU_CASESTUDY.DOMtoArray(document.getElementsByClassName(_this.TOTALHITS_CLASS)))
.updateResultAreaClasses();
var selectedKeywords = document.getElementById("list-selected-keywords");
selectedKeywords.textContent = '';
selectedKeywords.insertAdjacentHTML('beforeend', _this.KEYWORDS_AREA.innerHTML);
if (_this.KEYWORDS_AREA.innerHTML.length > 0) {
document.getElementById("selected-keywords-area").style.display = "block";
document.getElementById("search-result-area").style.display = "block";
} else {
document.getElementById("selected-keywords-area").style.display = "none";
document.getElementById("search-result-area").style.display = "none";
}
};
//絞り込み処理
var refine = function() {
var cb = this;
var tmpCnames = _this.RESULT_AREA.className;
var stylesheet = _this.getDynamicStyleSheet();
var rule = "";
if (stylesheet.cssRules.length > 0) {
rule = stylesheet.cssRules.item(0).cssText;
}
var getCategoryName = function(txt) { //(数字)の削除
return txt.slice(0, txt.indexOf('('));
};
var parentCat = cb.parentNode.parentNode.parentNode.parentNode.previousElementSibling.textContent;
this.checked ? _this.addRefineCategory(getCategoryName(parentCat + ' - ' + cb.parentNode.textContent), cb.value) : _this.removeRefineCategory(cb.value);
_this.adjustRefineAreaHeight()
.updateResultAreaClasses()
.updateArticleNumber()
.setTotalHits()
.updateAllHits(FUJITSU_CASESTUDY.DOMtoArray(_this.SEARCH_AREA.getElementsByClassName(_this.TOTALHITS_CLASS)))
.RESULT_AREA.className = tmpCnames;
if (rule != "") {
if (stylesheet.cssRules.length > 0) {
stylesheet.deleteRule(0);
}
stylesheet.insertRule(rule, 0);
}
};
//ウィンドウリサイズ
var resized = function() {
if (_this.KEYWORDS_AREA.childNodes.length) _this.adjustRefineAreaHeight();
};
_this.setProps(option).updateArticleNumber().setTotalHits().updateAllHits(FUJITSU_CASESTUDY.DOMtoArray(document.getElementsByClassName(_this.TOTALHITS_CLASS)));
//イベント登録
_this.SEARCH_AREA.getElementsByClassName(option.switchCname)[0].addEventListener('click', searchExec, false);
_this.SEARCH_AREA.getElementsByClassName(option.clearCname)[0].addEventListener('click', resetRefine, false);
_this.CATEGORIES.forEach(function(cat) {
cat.addEventListener('change', refine, false);
});
window.addEventListener('resize', resized, false);
return this;
}
};
[].forEach.call(document.getElementsByClassName(settings.searchAreaCname), function(area) {
new SearchArea(area).init(settings);
});
};
//main処理
FUJITSU_CASESTUDY.main = (function() {
//ページ生成後の処理
var afterGenerate = function() {
if (document.getElementById('casestudy-feature') != null) {
document.getElementById('casestudy-feature').classList.remove('is-hidden');
}
FUJITSU_CASESTUDY.initSearchArea(FUJITSU_CASESTUDY.SETTINGS.searcharea);
FUJITSU_CASESTUDY.initMoreList(FUJITSU_CASESTUDY.SETTINGS.morelist);
FUJITSU_CASESTUDY.initModal(FUJITSU_CASESTUDY.SETTINGS.modal);
};
//ページ生成済みかチェック
var isGenerated = function(flg) {
var tid = window.setTimeout(function() {
window.clearTimeout(tid);
flg ? afterGenerate() : isGenerated(FUJITSU_CASESTUDY.generated);
}, 200);
};
FUJITSU_CASESTUDY.generetaPage(FUJITSU_CASESTUDY.SETTINGS.generator);
isGenerated(FUJITSU_CASESTUDY.generated);
}());