element
*
* HTML: for IE 11
*/
if (window.HTMLPictureElement === undefined) {
(function() {
/**
* https://scottjehl.github.io/picturefill/
*/
var xhr = new XMLHttpRequest();
xhr.open('https://www.nipponsteel.com/en/product/GET', 'https://www.nipponsteel.com/product/js_v3/lib/picturefill.min.js', false);
xhr.send(null);
var xhrStatus = xhr.status;
if (xhrStatus === 200 || xhrStatus === 304) {
eval(xhr.responseText);
}
})();
}
var NSSMC = {
/**
* ãƒãƒ¼ãƒ‰ã‚¤ãƒ™ãƒ³ãƒˆã‚’登録ã™ã‚‹
*
* @param {function} func 実行ã•ã‚Œã‚‹é–¢æ•°
*
* @version 1.0.1 2015-06-25 Strictモード化
*/
addEventLoad: function(func) {
'use strict';
var load = false;
try {
document.addEventListener('DOMContentLoaded', function() {
func();
load = true;
}, false);
window.addEventListener('load', function() {
if (!load) {
func();
}
}, false);
} catch(e) {
window.attachEvent('onload', function(ev) {
func.call(this, ev);
});
}
},
/**
* アニメーションを行ãªã†
*
* @param {string} type `hide`, `show`
* @param {object} targetElement 対象è¦ç´
* @param {number} duration アニメーションã«æŽ›ã‹ã‚‹æ™‚間（秒）
*
* @version 2.0.0 2016-11-11 display: none è¨å®šã¯ transitionend イベントを検知ã—ã¦å®Ÿè¡Œã™ã‚‹ã‚ˆã†ã«å¤‰æ›´
*/
animationToggle: function(type, targetElement, duration) {
'use strict';
if (targetElement.dataset.toggle === undefined) {
/* åˆæœŸè¨å®š */
targetElement.style.overflow = 'hidden';
targetElement.style.transition = 'height ' + duration + 's';
targetElement.addEventListener('transitionend', function() {
var self = this;
if (self.dataset.toggle === 'hide') {
self.style.display = 'none';
}
});
}
targetElement.dataset.toggle = type;
switch (type) {
case 'hide':
targetElement.style.height = '0';
break;
case 'show':
targetElement.style.display = '';
targetElement.style.height = targetElement.scrollHeight + 'px';
break;
}
},
/**
* トグル
*
*
*
* toggleコンテンツエリア
*
*
*
* @param {string} toggleCtrlSelector トグルボタンè¦ç´ ã®ã‚»ãƒ¬ã‚¯ã‚¿ãƒ¼æ–‡å—列
* @param {string} toggleContentClassName トグルエリアè¦ç´ ã®ã‚¯ãƒ©ã‚¹å
* @param {number} animationDuration アニメーションã«æŽ›ã‹ã‚‹æ™‚間（秒）
* @param {string} toggleCloseButtonClassName トグルエリア内ã®é–‰ã˜ã‚‹ãƒœã‚¿ãƒ³ã®ã‚¯ãƒ©ã‚¹å（閉ã˜ã‚‹ãƒœã‚¿ãƒ³ãŒå˜åœ¨ã—ãªã„å ´åˆã¯æŒ‡å®šã—ãªã„）
*
* @version 3.1.1 2016-12-15 トグルãŒå…¥ã‚Œåã«ãªã£ã¦ã„ãŸã¨ãã®å‹•ä½œãƒã‚°ä¿®æ£
*/
setToggle: function(toggleCtrlSelector, toggleContentClassName, animationDuration, toggleCloseButtonClassName) {
'use strict';
var self = this;
// フォーカスå¯èƒ½ãªè¦ç´ ã®ã‚»ãƒ¬ã‚¯ã‚¿ãƒ¼æ–‡å—列
var FOCUSABLE_ELEMENT_SELECTORS = 'a[href], input:not([type="hidden"]), button, select, textarea';
/**
* ボタン内ã®è¡¨ç¤ºã‚’切り替ãˆã‚‹
*
* @param {object} toggleCtrlButtonElement トグルボタンè¦ç´
*/
var buttonSwich = function(toggleCtrlButtonElement) {
var buttonSwichValue = toggleCtrlButtonElement.dataset.buttonSwich;
if (buttonSwichValue !== undefined) {
var nowButtonHTML = toggleCtrlButtonElement.innerHTML;
toggleCtrlButtonElement.innerHTML = buttonSwichValue;
toggleCtrlButtonElement.dataset.buttonSwich = nowButtonHTML;
}
};
/**
* トグルを表示ã™ã‚‹
*
* @param {object} toggleCtrlButtonElement トグルボタンè¦ç´
* @param {object} toggleContentElement トグルエリアè¦ç´
*/
var show = function(toggleCtrlButtonElement, toggleContentElement) {
toggleCtrlButtonElement.setAttribute('aria-expanded', 'true');
toggleCtrlButtonElement.setAttribute('aria-pressed', 'true');
toggleContentElement.setAttribute('aria-expanded', 'true');
if (toggleContentElement.getElementsByClassName(toggleContentClassName).length === 0) {
self.animationToggle('show', toggleContentElement, animationDuration);
} else {
// トグルモジュールãŒå…¥ã‚Œåã«ãªã£ã¦ã„ã‚‹å ´åˆï¼ˆtransition: height ã«ã‚ˆã‚‹ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã¯åŠ¹ã‹ãªããªã‚‹ï¼‰
toggleContentElement.style.overflow = 'hidden';
toggleContentElement.style.height = 'auto';
}
var focusElements = toggleContentElement.querySelectorAll(FOCUSABLE_ELEMENT_SELECTORS); // フォーカスå¯èƒ½ãªè¦ç´
for (var j = 0, lenj = focusElements.length; j < lenj; j++) {
focusElements[j].tabIndex = 0;
}
};
/**
* トグルをéžè¡¨ç¤ºã«ã™ã‚‹
*
* @param {object} toggleCtrlButtonElement トグルボタンè¦ç´
* @param {object} toggleContentElement トグルエリアè¦ç´
*/
var hide = function(toggleCtrlButtonElement, toggleContentElement) {
toggleCtrlButtonElement.setAttribute('aria-expanded', 'false');
toggleCtrlButtonElement.setAttribute('aria-pressed', 'false');
toggleContentElement.setAttribute('aria-expanded', 'false');
if (toggleContentElement.getElementsByClassName(toggleContentClassName).length === 0) {
self.animationToggle('hide', toggleContentElement, animationDuration);
} else {
// トグルモジュールãŒå…¥ã‚Œåã«ãªã£ã¦ã„ã‚‹å ´åˆï¼ˆtransition: height ã«ã‚ˆã‚‹ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã¯åŠ¹ã‹ãªããªã‚‹ï¼‰
toggleContentElement.style.overflow = 'hidden';
toggleContentElement.style.height = '0';
}
var focusElements = toggleContentElement.querySelectorAll(FOCUSABLE_ELEMENT_SELECTORS); // フォーカスå¯èƒ½ãªè¦ç´
for (var i = 0, leni = focusElements.length; i < leni; i++) {
focusElements[i].tabIndex = -1;
}
};
/**
* トグルã®é–‹é–‰å‡¦ç†ã‚’実行ã™ã‚‹
*
* @param {object} toggleCtrlButton トグルボタンè¦ç´
*/
var exec = function(toggleCtrlButtonElement) {
var toggleContentElementId = toggleCtrlButtonElement.getAttribute('aria-controls');
var toggleContentElement = document.getElementById(toggleContentElementId);
if (toggleCtrlButtonElement.getAttribute('aria-expanded') === 'true') {
hide(toggleCtrlButtonElement, toggleContentElement);
} else {
show(toggleCtrlButtonElement, toggleContentElement);
}
buttonSwich(toggleCtrlButtonElement);
};
var searchToggleContentElement = function(toggleCtrlButtonElement) {
var toggleContentId = toggleCtrlButtonElement.getAttribute('aria-controls');
var toggleContentElement = document.getElementById(toggleContentId);
if (toggleContentElement === null) {
console.error('ID: ' + toggleContentId + ' is NULL.');
}
return toggleContentElement;
};
var toggleCtrlButtonElements = document.querySelectorAll(toggleCtrlSelector);
for (var i = 0, leni = toggleCtrlButtonElements.length; i < leni; i++) {
var toggleCtrlButtonElement = toggleCtrlButtonElements[i];
var toggleContentElement = searchToggleContentElement(toggleCtrlButtonElement);
if (toggleContentElement !== null) {
var toggleCtrlButtonEnterRecognition = true; // トグルボタン㌠Enter ã‚ーæ“作ã«ã‚ˆã‚‹ã‚¯ãƒªãƒƒã‚¯ã‚¤ãƒ™ãƒ³ãƒˆã‚’èªè˜ã™ã‚‹ã‹
if (toggleCtrlButtonElement.tagName.toLowerCase() === 'a' && toggleCtrlButtonElement.hasAttribute('href')) {
/* トグルボタン㌠a[href] ã ã£ãŸå ´åˆã¯ãƒœã‚¿ãƒ³æ‰±ã„ã«ã™ã‚‹ */
toggleCtrlButtonElement.removeAttribute('href');
toggleCtrlButtonElement.tabIndex = 0;
toggleCtrlButtonElement.setAttribute('role', 'button');
toggleCtrlButtonEnterRecognition = false;
}
if (toggleCtrlButtonElement.getAttribute('aria-expanded') === 'false') {
hide(toggleCtrlButtonElement, toggleContentElement);
} else {
show(toggleCtrlButtonElement, toggleContentElement);
}
toggleCtrlButtonElement.addEventListener('click', function() {
exec(this);
});
if (!toggleCtrlButtonEnterRecognition) {
toggleCtrlButtonElement.addEventListener('keydown', function(ev) {
if (ev.key === 'Enter' || ev.keyCode === 13) {
exec(this);
}
});
}
/* CSS Will Change */
toggleCtrlButtonElement.addEventListener('mouseover', function() {
searchToggleContentElement(this).style.willChange = 'height';
});
toggleCtrlButtonElement.addEventListener('mouseout', function() {
searchToggleContentElement(this).style.willChange = '';
});
}
}
/* トグルエリア内ã®é–‰ã˜ã‚‹ãƒœã‚¿ãƒ³ */
if (toggleCloseButtonClassName !== undefined) {
var toggleContentElements = document.getElementsByClassName(toggleContentClassName);
for (var j = 0, lenj = toggleContentElements.length; j < lenj; j++) {
var toggleContentCloseButtonElements = toggleContentElements[j].getElementsByClassName(toggleCloseButtonClassName);
for (var k = 0, lenk = toggleContentCloseButtonElements.length; k < lenk; k++) {
toggleContentCloseButtonElements[k].addEventListener('click', function() {
var toggleContentElement = searchToggleContentElement(this);
if (toggleContentElement !== null) {
var toggleCtrlButtonElement = document.querySelector('[aria-controls=' + toggleContentElement.id + ']');
hide(toggleCtrlButtonElement, toggleContentElement);
buttonSwich(toggleCtrlButtonElement);
toggleCtrlButtonElement.focus();
}
});
}
}
}
/* ウィンドウサイズを変更ã—ãŸæ™‚ */
window.addEventListener('resize', function() {
setTimeout(function() {
var toggleOpenContentElements = document.querySelectorAll('.' + toggleContentClassName + '[aria-expanded="true"]');
for (var i = 0, leni = toggleOpenContentElements.length; i < leni; i++) {
var toggleOpenContentElement = toggleOpenContentElements[i];
if (toggleOpenContentElement.getElementsByClassName(toggleContentClassName).length === 0) {
toggleOpenContentElement.style.height = toggleOpenContentElement.scrollHeight + 'px';
}
}
}, 100);
});
}
};
(function(window, document) {
"use strict";
if (!("querySelector" in document)) {
return;
}
NSSMC.addEventLoad(function() {
/* トグル */
NSSMC.setToggle('.js_toggle_ctrl', 'js_toggle_content', 0.25);
});
(function() {
/* position: sticky */
var stickyElements = document.querySelectorAll('.v3-position-sticky, .v3-nav-1');
for (var i = 0, leni = stickyElements.length; i < leni; i++) {
Stickyfill.add(stickyElements[i]);
}
})();
(function() {
var exec = function() {
var catalogCtrlElements = document.querySelectorAll('.v3-catalog-ctrl [type="button"]');
for (var i = 0, leni = catalogCtrlElements.length; i < leni; i++) {
var catalogCtrlElement = catalogCtrlElements[i];
document.getElementById(catalogCtrlElement.getAttribute('aria-controls')).querySelector('.v3-catalog-detail').style.width = document.defaultView.getComputedStyle(catalogCtrlElement, '').width;
}
};
exec();
window.addEventListener('resize', function() {
exec();
});
})();
(function() {
var INTERVAL = 5000;
var ANIMATION_DURATION = 600;
var HIDDEN_CLASS_NAME = 'news-list-hidden';
var newsListElements = document.querySelectorAll(".v3-news-list > li");
var newsListElementsLength = newsListElements.length;
if (newsListElementsLength > 1) {
for (var i = 1; i < newsListElementsLength; i++) {
var newsListElement = newsListElements[i];
newsListElement.classList.add(HIDDEN_CLASS_NAME);
newsListElement.style.display = 'none';
}
var execChange = function(nowDisplayedNo) {
newsListElements[nowDisplayedNo].classList.add(HIDDEN_CLASS_NAME);
var nextDisplayedNo;
if (nowDisplayedNo === newsListElementsLength - 1) {
nextDisplayedNo = 0;
} else {
nextDisplayedNo = nowDisplayedNo + 1;
}
setTimeout(function() {
newsListElements[nowDisplayedNo].style.display = 'none';
newsListElements[nextDisplayedNo].classList.remove(HIDDEN_CLASS_NAME);
newsListElements[nextDisplayedNo].style.display = '';
}, ANIMATION_DURATION);
return nextDisplayedNo;
};
/* 自動切り替㈠*/
setTimeout(function() {
var nowDisplayedNo = 0;
var autoChange = function() {
nowDisplayedNo = execChange(nowDisplayedNo);
setTimeout(autoChange, INTERVAL);
};
autoChange();
}, INTERVAL - ANIMATION_DURATION);
}
})();
})(this, document);
//ã‚«ã‚¿ãƒã‚°ãƒ€ã‚¦ãƒ³ãƒãƒ¼ãƒ‰ãƒšãƒ¼ã‚¸ã€ã‚½ãƒ¼ãƒˆæ©Ÿèƒ½
(function ($) {
'use strict';
if (!$) {
return;
}
if (!$('.v3-catalog-list-wrap')[0]) {
return;
}
var SORT = {
init: function () {
this.setParameters();
this.bineEvent();
},
setParameters: function () {
this.$typeListBtn = $('.type-kind').find('li').find('button');
this.$typeFiledList = $('.type-field').find('li');
this.$typeFiledBtn = this.$typeFiledList.find('button');
this.$productList = $('.v3-product-catalog-list').find('.catalog');
this.dataKind = ('data-kind');
this.dataTypes = ('data-types');
this.$dispCatalogLists = $('.v3-product-catalog-list').find('.catalog');
this.holdFlag = false;
},
bineEvent: function () {
var _self = this;
_self.$typeListBtn.on('click', function () {
var btn = $(this);
_self.$typeListBtn.prop('disabled', false);
btn.prop('disabled', true);
_self.$typeFiledBtn.prop('disabled', false);
_self.$typeFiledBtn.eq(0).prop('disabled', true);
btn.each(function () {
_self.$typeFiledList.css('display', 'none');
_self.$productList.css('display', 'none');
var selectType = $(this).attr('data-filter-kind');
_self.decisionVariety(selectType);
});
});
_self.$typeFiledBtn.on('click', function () {
var btn = $(this);
_self.$productList.css('display', 'none');
_self.$typeFiledBtn.prop('disabled', false);
btn.prop('disabled', true);
var selectField = $(this).attr('data-filter-field');
_self.decisionField(selectField);
});
},
requiredCleaning:function(){
this.catalogData = [];
this.catalogDisplayNumber = [];
},
decisionVariety: function (selectType) {
this.requiredCleaning();
this.fieldData = [];
this.fieldDisplayNumber = [];
if (selectType === undefined) {
for (var i = 0; i < this.$typeFiledList.length; i++) {
this.fieldDisplayNumber.push(i);
}
for (var i = 0; i < this.$productList.length; i++) {
this.catalogDisplayNumber.push(i);
}
}
this.splitWord(this.$typeFiledBtn, this.fieldData, this.dataKind);
this.splitWord(this.$productList, this.catalogData, this.dataKind);
this.comparison(this.$typeFiledList, this.fieldData, selectType, this.fieldDisplayNumber);
this.holdFlag = true;
this.comparison(this.$productList, this.catalogData, selectType, this.catalogDisplayNumber);
},
decisionField: function (selectField) {
this.requiredCleaning();
if (selectField === undefined) {
for (var i = 0; i < this.$dispCatalogLists.length; i++) {
this.catalogDisplayNumber.push(i);
}
this.dispList(this.$dispCatalogLists, this.catalogDisplayNumber)
} else {
this.splitWord(this.$dispCatalogLists, this.catalogData, this.dataTypes);
this.comparison(this.$dispCatalogLists, this.catalogData, selectField, this.catalogDisplayNumber)
}
},
splitWord: function (lengthandList, dataArray, checkDataType) {
for (var i = 0; i < lengthandList.length; i++) {
dataArray.push(lengthandList.eq(i).attr(checkDataType).split(' '));
}
},
comparison: function (lengthCheck, dataArray, userSelect, dispArray) {
for (var i = 0; i < lengthCheck.length; i++) {
for (var j = 0; j < dataArray[i].length; j++) {
if (userSelect === dataArray[i][j]) {
dispArray.push(i);
}
}
}
this.dispList(lengthCheck, dispArray)
},
dispList: function (list, dispNum) {
for (var i = 0; i < dispNum.length; i++) {
list.eq(dispNum[i]).css('display', 'block');
}
if (this.holdFlag === true) {
this.$dispCatalogLists = $('.v3-product-catalog-list').find('.catalog:visible');
}
this.holdFlag = false;
},
};
$(function () {
SORT.init();
});
}(window.jQuery));