/** * Article 에서 사용되는 Component 기능을 정의한다. */ (function ($, window, document) { var $leftSns = $('.share_article > dl'), ARTICLE_SIZE = { body: 580, topDuplicationMargin: 40 }, apiPath = utils.config('apiPath'), nowDate = new Date(); function getLeftSnsPosition() { var offsetTop = $leftSns.offset() ? $leftSns.offset().top : 0, h = $leftSns.height() + 20 || 0; return offsetTop + h; } // DESC : 컴포넌트가 상단에 위치하는 경우, 왼쪽 SNS 버튼과 겹치지 않도록 위치 조절 function setPosition($html) { var targetOffset = $html.offset(), css = { 'margin-left': 0 }, htmlMarginLeft = parseInt($html.css('margin-left').replace('px', ''), 10); if (targetOffset.top < getLeftSnsPosition()) { //css.width = ARTICLE_SIZE.body - ARTICLE_SIZE.topDuplicationMargin; if ($html.hasClass('ab_subtitle')) { css['margin-left'] = 0;//ARTICLE_SIZE.topDuplicationMargin + htmlMarginLeft; } else { css['margin-left'] = ARTICLE_SIZE.topDuplicationMargin + htmlMarginLeft; } $html.css(css); } } function setPictorialHtml(obj) { /*parent, src, count, type, items*/ var $t = obj.parent, src = utils.getPdsFullPath(obj.src), $html = $('
'), $btn = $(''); //$html.on('error', 'img', utils.imageErrorHandler); //var html = '' + obj.title + '
'); } $html.data('images', obj.items); $html.find('a').append($btn); $('a[data-viewer]', $html).imageViewer(obj.items); $t.replaceWith($html.css('width', ARTICLE_SIZE.body)); } function setPictorialGalleryHtml(obj) { /*parent, src, count, type, items*/ var html = ''; obj.items.forEach(function (v) { html += ''; }); $("#tempContent").remove(); $("#star_gallery").append(html); $("#content").show(); } $.fn.articleComponent = function (options) { //utils.log('## load articleComponent'); var $article = this; $article.articleGalleryTag(); // 갤러리Tag (old version) if (utils.config('articleType') == ARTICLE_TYPE.spGallery) { $('div.tag_photobundle', $article).articlePhotoBundleGallery(); // 사진묶음 $('div.ab_photo.photo_center', $article).articlePhotoBundleGallery(); // 사진묶음 } else { $('div.tag_photobundle', $article).articlePhotoBundle(); // 사진묶음 } $('div[data-type=sns], div.tag_sns', $article).articleSns(); // sns card $('.jtbc_vod, .tag_vod', $article).articleVod(); // legacy : .jtbc_vod, new : .tag_vod $('div.tag_pictorial', $article).articlePictorial(); // 화보 $('div.tag_poll', $article).articlePoll(); // 투표 $('div.tag_interview', $article).articleInterview(); // 인터뷰 $('div.tag_quotation', $article).articleQuotation(); // 인용구 $('div.tag_audio', $article).audioPlayer(); // 오디오 서비스 $('div.tag_jplus_link', $article).articleJplusLink(); $('div.jch_link', $article).articleJtbcLink(); // jtbc리포터박스 if ($('div.tag_chart', $article).length > 0) { $.getScript("https://www.gstatic.com/charts/loader.js").done(function () { $('div.tag_chart', $article).articleCharts(); // 챠트 }); } var photoIndex = 0; // 사진 크게보기 // jam에서 스타기자 타입은 와이드 사용 시 ab_full class가 적용되면서 크게 보기 적용 일반 타입은 원본 이미지가 580보다 클 경우 적용, 돋보기 사용 시는 모두 원본 이미지가 580보다 클 경우 적용. $('div.ab_photo.photo_center', $article).each(function (i) { var $photo = $(this), count = $photo.data('count'); var imageSize = $photo.width(); if (imageSize >= 580) { if (!$photo.data('type')) { $photo.data('type', 'cut'); if (!count) { $photo.data('count', 1); } $photo.find('.image').append(''); $photo.find('.image').wrapInner(''); $photo.find('a').imageViewer(); } else { $photo.find('a').data('index', photoIndex); } photoIndex += count || 1; } }); }; /** * 속보 */ $.fn.articleNewsflash = function (options) { var $articleBody = this; if ($articleBody.find('.ab_topnews').length == 0) { utils.getJsonp({ url: utils.config('apiPath') + '/static/breakingnews', success: render }); } function render(d) { var html = '', template = '', freshTitle = '
',
exculusiveTitle = '
',
data = {},
directives = { link: utils.decorators.link },
$target = getRenderTarget($articleBody, 4);
var $etcPhoto = $articleBody.find('div.html_photo_left, div.photo_left, div.html_photo_right, #criteo_network').first(),
$children = $articleBody.children(),
etcIndex = $children.index($etcPhoto),
brIndex = $children.index($target);
if ($etcPhoto.length > 0 && etcIndex == -1) {
if (brIndex < 0) {
$target = $etcPhoto;
}
} else {
if ($etcPhoto.length > 0) {
if (brIndex < 0) {
$target = $etcPhoto;
} else if (etcIndex < brIndex) {
$target = etcIndex == 0 ? $articleBody : $etcPhoto;
}
}
}
if (d && d.item && d.item.Title) {
data = { link: { href: d.item.Link, html: (d.item.IsFresh ? freshTitle + ' ' + d.item.Title : (d.item.IsExclusive ? exculusiveTitle + ' ' + d.item.Title : d.item.Title)) } };
html = $.renderTemplate({ template: template, data: data, directives: directives });
if ($target == $articleBody) {
$target.append(html);
} else {
if (etcIndex > -1 && etcIndex < brIndex) {
$target.before(html);
} else {
if (brIndex < 0) {
$target.before(html);
} else {
$target.after(html);
}
}
}
$(html).find('a').each(function () {
$(this).attr('href', utils.getClocUrl($(this).attr('href'), 'joongang|article|breaknews'));
});
utils.resetArticleSubWidget && utils.resetArticleSubWidget();
}
}
};
/*
' + subTitle + '
' + t + '
' + vodConfig.caption + '
' : ''; var $newDiv = $('' + config.caption + '
'); } szHtml.push('' + config.caption + '
'); } szHtml.push('
');
szHtml.push(' ');
szHtml.push(' ' + config.caption + '
'); } szHtml.push('' + config.caption + '
'); } szHtml.push('지원하지 않습니다.
'; $(v).browserNotice(); } $(v).replaceWith($contents); utils.resetArticleSubWidget && utils.resetArticleSubWidget(); }); }; $.fn.articleJtbcLink = function () { function setHtml($target, data) { var linkHtml = ''; if ($target.length == 0) { return; } linkHtml = getLinkHtml(data); function getLinkHtml(data) { var html = ''; if (data.href) { html = '보러가기'; } return html; } $(".docs_upper .jch_link").replaceWith(linkHtml); } return this.each(function (i, v) { var $c = $(v), data = $c.data(); setHtml($c, data); }); }; /** * 챠트 * @param options */ $.fn.articleCharts = function () { var chtItemHeight = 30, chtAreaCss = { top: 50, right: 50, bottom: 70, left: 50, width: "100%" }; return this.each(function (i, v) { var $ChartsWrap = $(v), jsonChartData = { "title": $ChartsWrap.attr("data-cht-title"), "copyright": $ChartsWrap.attr("data-cht-copy"), "max_value": 0, "wrap_height": 0, "wrap_width": "100%", "vote": [] }, tmpChtMaxVal = 0; jsonChartData.vote.push(["지역", "투표율", { role: "style" }, { role: "annotation" }]); $("div[data-cht-text]", $ChartsWrap).each(function (idx) { var chtItemText = $(this).attr("data-cht-text"); var chtItemValue = parseFloat($(this).attr("data-cht-value"), 10); var chtItemValueType = $ChartsWrap.attr("data-cht-vaue-type") || ""; var chtItemBarColor = $(this).attr("data-cht-color") || "#4285F4"; jsonChartData.vote.push([chtItemText, chtItemValue, chtItemBarColor, chtItemValue.toString() + chtItemValueType]); if (jsonChartData.max_value < chtItemValue) { jsonChartData.max_value = chtItemValue; } }); jsonChartData.wrap_height = chtAreaCss.top + chtAreaCss.bottom + ($ChartsWrap.children().length * chtItemHeight); google.charts.load("current", { "packages": ["corechart"] }); google.charts.setOnLoadCallback(function () { var cht_data = new google.visualization.arrayToDataTable(jsonChartData.vote); var cht_options = { title: jsonChartData.title, //chart: { title: jsonChartData.title, subtitle: jsonChartData.copyright }, fontSize: 14, //차트내 모든 텍스트의 크기 //width: "130%", //height: "100%", /*animation: { duration: 100, easing: "in", startup: true },*/ dataOpacity: 0.8, //막대 투명도 (기본1) //enableInteractivity: true, //막대셀렉트 (기본true) legend: { position: "none" }, titlePosition: "out", //제목 그래프 안에 넣기 in, out bars: "horizontal", //axes: { x: { 0: { side: "bottom", label: "투표율" } } }, bar: { groupWidth: "70%" }, isStacked: false, // 그래프 쌓기(스택), 기본값은 false, "percent" chartArea: chtAreaCss, titleTextStyle: { color: "#050505", fontSize: 18, bold: true, italic: false }, hAxis: { //title: "투표율", title: jsonChartData.copyright, textPosition: "out", //가로축 none, out //scaleType: true, viewWindowMode: "min", viewWindow: { max: jsonChartData.max_value } }, vAxis: { //title: "지역", textPosition: "out", //세로축 none, out scaleType: true } }; var chart = new google.visualization.BarChart($ChartsWrap[0]); chart.draw(cht_data, cht_options); }); $ChartsWrap.css({ width: jsonChartData.wrap_width, height: jsonChartData.wrap_height }); $ChartsWrap.children().remove(); $ChartsWrap.show(); }); }; })(jQuery, window, document);