참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
- 오페라: Ctrl-F5를 입력.
/* =========================================
COASTLINE: BLACK ICE - CategoryNav
대문 카테고리 SVG 네비 생성기
========================================= */
(function (window, document, mw) {
'use strict';
var XLINK_NS = 'http://www.w3.org/1999/xlink';
var ITEMS = [
{ key:'era', label:'시대', title:'시대' },
{ key:'settings', label:'설정', title:'설정' },
{ key:'project', label:'프로젝트', title:'프로젝트:소개' },
{ key:'corporations', label:'기업 및 공동체', title:'기업_및_공동체' },
{ key:'military', label:'군, 정치집단', title:'군_정치집단' }
];
var BOUNDARY_DIRS = [0, 1, 1, -1, -1, 0];
var renderTimer = 0;
function geometryApi() {
return window.CLBI && window.CLBI.frame;
}
function buildPath(title) {
if (typeof window.buildWikiPath === 'function') return window.buildWikiPath(title);
return '/index.php/' + encodeURI(String(title || '').replace(/ /g, '_'));
}
function clearNode(node) {
while (node && node.firstChild) node.removeChild(node.firstChild);
}
function calculateGeometry(width) {
var api = geometryApi();
var frame = api.FRAME;
var dimensions = api.DIMENSIONS;
var contentLeft = dimensions.WELL_TOP;
var contentWidth = Math.max(ITEMS.length, width - dimensions.WELL_TOP * 2);
var boundaries = [];
var segments = [];
var i;
for (i = 0; i <= ITEMS.length; i++) {
boundaries.push(contentLeft + Math.round(contentWidth * i / ITEMS.length));
}
for (i = 0; i < ITEMS.length; i++) {
var leftTopX = boundaries[i] + (i === 0 ? 0 : frame.GAP / 2);
var rightTopX = boundaries[i + 1] - (i === ITEMS.length - 1 ? 0 : frame.GAP / 2);
segments.push({
leftTopX:leftTopX,
rightTopX:rightTopX,
leftDir:BOUNDARY_DIRS[i],
rightDir:BOUNDARY_DIRS[i + 1],
points:api.segmentAt(
leftTopX,
rightTopX,
dimensions.BUTTON_TOP,
dimensions.BUTTON_BOTTOM,
BOUNDARY_DIRS[i],
BOUNDARY_DIRS[i + 1],
0,
0,
0
)
});
}
return {
width:width,
boundaries:boundaries,
segments:segments,
dimensions:dimensions
};
}
function appendFrame(svg, geometry) {
var api = geometryApi();
var frame = api.FRAME;
var d = geometry.dimensions;
var width = geometry.width;
var group = api.create('g', 'portal-category-frame');
var surfaceLastX = width - d.FRAME_SURFACE_TOP - 1;
var surfaceLastY = d.ROW_HEIGHT - d.FRAME_SURFACE_TOP - 1;
var wellLastX = width - d.WELL_TOP - 1;
var wellLastY = d.WELL2_BOTTOM - 1;
group.appendChild(api.rect('portal-category-frame-edge', 0, 0, width, d.ROW_HEIGHT));
group.appendChild(api.rect(
'portal-category-frame-surface',
d.FRAME_SURFACE_TOP,
d.FRAME_SURFACE_TOP,
width - d.FRAME_SURFACE_TOP * 2,
d.ROW_HEIGHT - d.FRAME_SURFACE_TOP * 2
));
group.appendChild(api.rect(
'portal-category-frame-well',
d.WELL_TOP,
d.WELL_TOP,
width - d.WELL_TOP * 2,
d.WELL2_BOTTOM - d.WELL_TOP
));
group.appendChild(api.line(
'portal-category-frame-highlight',
[d.FRAME_SURFACE_TOP, d.FRAME_SURFACE_TOP],
[surfaceLastX, d.FRAME_SURFACE_TOP]
));
group.appendChild(api.line(
'portal-category-frame-highlight',
[surfaceLastX, d.FRAME_SURFACE_TOP],
[surfaceLastX, surfaceLastY]
));
group.appendChild(api.line(
'portal-category-frame-shadow',
[d.FRAME_SURFACE_TOP, surfaceLastY],
[d.FRAME_SURFACE_TOP, d.FRAME_SURFACE_TOP]
));
group.appendChild(api.line(
'portal-category-frame-shadow',
[surfaceLastX, surfaceLastY],
[d.FRAME_SURFACE_TOP, surfaceLastY]
));
group.appendChild(api.line(
'portal-category-well-shadow',
[d.WELL_TOP, d.WELL_TOP],
[wellLastX, d.WELL_TOP]
));
group.appendChild(api.line(
'portal-category-well-shadow',
[wellLastX, d.WELL_TOP],
[wellLastX, wellLastY]
));
group.appendChild(api.line(
'portal-category-well-highlight',
[d.WELL_TOP, wellLastY],
[d.WELL_TOP, d.WELL_TOP]
));
group.appendChild(api.line(
'portal-category-well-highlight',
[wellLastX, wellLastY],
[d.WELL_TOP, wellLastY]
));
svg.appendChild(group);
}
function createSegment(item, index, geometry) {
var api = geometryApi();
var frame = api.FRAME;
var data = geometry.segments[index];
var d = geometry.dimensions;
var anchor = api.create('a', 'portal-cat-anchor');
var outer = api.polygon('portal-cat-edge', data.points);
var surfacePoints = api.segmentAt(
data.leftTopX,
data.rightTopX,
d.BUTTON_SURFACE_TOP,
d.BUTTON_SURFACE_BOTTOM,
data.leftDir,
data.rightDir,
0,
frame.BORDER,
frame.BORDER
);
var topInset = api.rowAt(
data.leftTopX,
data.rightTopX,
d.BUTTON_SURFACE_TOP,
data.leftDir,
data.rightDir,
0,
frame.BORDER,
frame.BORDER
);
var bottomInset = api.rowAt(
data.leftTopX,
data.rightTopX,
d.BUTTON_SURFACE_BOTTOM - frame.BEVEL,
data.leftDir,
data.rightDir,
0,
frame.BORDER,
frame.BORDER
);
var hit = api.polygon('portal-cat-hit', data.points);
var text = api.create('text', 'portal-cat-label');
var href = buildPath(item.title);
anchor.setAttribute('href', href);
anchor.setAttributeNS(XLINK_NS, 'xlink:href', href);
anchor.setAttribute('aria-label', item.label);
anchor.setAttribute('data-category-key', item.key);
anchor.appendChild(outer);
anchor.appendChild(api.polygon('portal-cat-surface', surfacePoints));
anchor.appendChild(api.line('portal-cat-inset portal-cat-inset-top', topInset[0], topInset[1]));
anchor.appendChild(api.line('portal-cat-inset portal-cat-inset-right', topInset[1], bottomInset[1]));
anchor.appendChild(api.line('portal-cat-inset portal-cat-inset-bottom', bottomInset[1], bottomInset[0]));
anchor.appendChild(api.line('portal-cat-inset portal-cat-inset-left', bottomInset[0], topInset[0]));
hit.setAttribute('pointer-events', 'all');
anchor.appendChild(hit);
text.setAttribute('x', api.centerX(surfacePoints));
text.setAttribute('y', Math.round((d.BUTTON_SURFACE_TOP + d.BUTTON_SURFACE_BOTTOM) / 2) + 1);
text.setAttribute('font-size', '12');
text.setAttribute('font-weight', '700');
text.setAttribute('text-anchor', 'middle');
text.setAttribute('dominant-baseline', 'middle');
text.setAttribute('pointer-events', 'none');
text.textContent = item.label;
anchor.appendChild(text);
return anchor;
}
function publishSeams(geometry) {
var api = geometryApi();
var segments = geometry.segments;
var d = geometry.dimensions;
api.setSeams({
width:geometry.width,
rowHeight:d.ROW_HEIGHT,
buttonTop:d.BUTTON_TOP,
buttonBottom:d.BUTTON_BOTTOM,
overlap:d.OVERLAP,
bottomStartAbsY:d.BOTTOM_START_ABS_Y,
settingsLeftTopX:segments[1].leftTopX,
settingsLeftDir:segments[1].leftDir,
corpRightTopX:segments[3].rightTopX,
corpRightDir:segments[3].rightDir,
projectLeftTopX:segments[2].leftTopX,
projectLeftDir:segments[2].leftDir,
projectRightTopX:segments[2].rightTopX,
projectRightDir:segments[2].rightDir
});
}
function buildSvg(width) {
var api = geometryApi();
var geometry = calculateGeometry(width);
var svg = api.create('svg', 'portal-category-svg');
svg.setAttribute('viewBox', '0 0 ' + geometry.width + ' ' + geometry.dimensions.ROW_HEIGHT);
svg.setAttribute('width', '100%');
svg.setAttribute('height', geometry.dimensions.ROW_HEIGHT);
svg.setAttribute('preserveAspectRatio', 'none');
svg.setAttribute('aria-hidden', 'false');
svg.setAttribute('data-frame-width', geometry.width);
appendFrame(svg, geometry);
ITEMS.forEach(function (item, index) {
svg.appendChild(createSegment(item, index, geometry));
});
return { svg:svg, geometry:geometry };
}
function renderMount(mount) {
var api = geometryApi();
var width;
var nav;
var result;
if (!mount || !api) return false;
width = api.readWidth(mount);
if (!width) {
if (!mount.__categoryNavRetry) {
mount.__categoryNavRetry = window.setTimeout(function () {
mount.__categoryNavRetry = 0;
renderMount(mount);
}, 60);
}
return false;
}
if (mount.__categoryNavRetry) {
window.clearTimeout(mount.__categoryNavRetry);
mount.__categoryNavRetry = 0;
}
nav = mount.querySelector('.portal-category-nav');
if (!nav) {
clearNode(mount);
nav = document.createElement('nav');
nav.className = 'portal-category-nav';
nav.setAttribute('aria-label', 'Main categories');
mount.appendChild(nav);
}
if (nav.__frameWidth === width && nav.querySelector('.portal-category-svg')) {
publishSeams(calculateGeometry(width));
return true;
}
result = buildSvg(width);
nav.__frameWidth = width;
clearNode(nav);
nav.appendChild(result.svg);
mount.setAttribute('data-category-nav-rendered', '1');
publishSeams(result.geometry);
if (window.ResizeObserver && !mount.__categoryNavObserver) {
mount.__categoryNavObserver = new window.ResizeObserver(function () {
schedule(mount);
});
mount.__categoryNavObserver.observe(mount);
}
return true;
}
function renderAll(root) {
var scope = root && root.querySelectorAll ? root : document;
var mounts = [];
var rendered = 0;
if (scope.matches && scope.matches('[data-component="category-nav"]')) mounts.push(scope);
Array.prototype.forEach.call(scope.querySelectorAll('[data-component="category-nav"]'), function (mount) {
if (mounts.indexOf(mount) === -1) mounts.push(mount);
});
mounts.forEach(function (mount) {
if (renderMount(mount)) rendered += 1;
});
return rendered;
}
function schedule(root) {
window.clearTimeout(renderTimer);
renderTimer = window.setTimeout(function () {
renderTimer = 0;
renderAll(root || document);
}, 0);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', function () { renderAll(document); });
} else {
renderAll(document);
}
if (mw && mw.hook) {
mw.hook('wikipage.content').add(function (content) {
schedule(content && content[0] ? content[0] : document);
});
}
window.addEventListener('resize', function () { schedule(document); });
window.CategoryNav = {
init:renderAll,
renderAll:renderAll,
renderMount:renderMount
};
window.CLBI = window.CLBI || {};
window.CLBI.categoryNav = {
init:renderAll,
renderMount:renderMount
};
}(window, document, window.mw));