https://council.chungbuk.kr/js/kr/main.js?v=1791490141675

1/**
2 * 충청북도의회 메인 스크립트
3 *
4 * @author WEB Publisher
5 * @since 2025.03.04
6 **/
7
8$(function () {
9	$("#visual .list_wrap").on("init afterChange", function (event, slick, currentSlide) {
10		$(".page_v").html('<span class="current">' + parseInt(slick.currentSlide + 1) + ' </span><span class="dash"></span><span>' + slick.slideCount + ' </span>');
11	});
12	$("#visual .list_wrap").slick({
13		dots: false,
14		infinite: true,
15		fade: true,
16		autoplay: true,
17		nextArrow: "#visual .btn_next",
18		prevArrow: "#visual .btn_prev",
19		cssEase: 'linear'
20	});
21
22	$("#visual .btn_stop").click(function () {
23		if ($(this).hasClass('on') == false) {
24			$(this).addClass('on');
25			$(this).text("비주얼 보기 재생");
26			$("#visual .list_wrap").slick('slickPause');
27		} else {
28			$(this).removeClass('on');
29			$(this).text("비주얼 보기 일시정지");
30			$("#visual .list_wrap").slick('slickPlay');
31		}
32		return false;
33	});
34
35	// 의사일정
36	// .day ul 안에서 .today가 몇 번째인지 찾기
37	var todayIndex = $("#agenda .day ul li").index($("#agenda .day ul li.today"));
38	var slidesToShow = 7;
39
40	// todayIndex가 중앙에 오도록 초기 인덱스 계산
41	// (음수 값이나 슬라이드 개수보다 커지면 보정)
42	var startIndex = todayIndex - Math.floor(slidesToShow / 2);
43	if (startIndex < 0) startIndex = 0;
44	var totalSlides = $("#agenda .day ul li").length;
45	if (startIndex > totalSlides - slidesToShow) {
46		startIndex = totalSlides - slidesToShow;
47	}
48
49	// 슬릭 초기화
50	$("#agenda .day ul").slick({
51		infinite: false,
52		slidesToShow: slidesToShow,
53		slidesToScroll: 1,
54		nextArrow: "#agenda .day .btn_next",
55		prevArrow: "#agenda .day .btn_prev",
56		initialSlide: startIndex
57	});
58
59	// 텍스트 슬릭 (그대로)
60	$("#agenda .txt_wrap .txt").slick({
61		vertical: true,
62		infinite: false,
63		autoplay: true,
64		slidesToShow: 1,
65		slidesToScroll: 1,
66		nextArrow: ".txt_wrap .btn_next",
67		prevArrow: ".txt_wrap .btn_prev",
68	});
69
70	// 일시정지/재생 버튼
71	$(".txt_wrap .btn_stop").click(function () {
72		if (!$(this).hasClass("on")) {
73			$(this).addClass("on");
74			$(this).text("의사일정 보기 재생");
75			$("#agenda .txt_wrap .txt").slick("slickPause");
76		} else {
77			$(this).removeClass("on");
78			$(this).text("의사일정 보기 일시정지");
79			$("#agenda .txt_wrap .txt").slick("slickPlay");
80		}
81		return false;
82	});
83
84
85	// 의회소식
86	var $tab_board = $("#board h4 a");
87	$("#board > ul > li:first").addClass("on");
88
89	$tab_board.on("click focus", function (e) {
90		e.preventDefault();
91		$("#board > ul > li").removeClass("on");
92		$(this).parent().parent("li").addClass("on");
93		$('#board > ul > li > .con .list_wrap').slick('setPosition');
94	});
95
96	$("#board > ul > li > .con").each(function () {
97		let count = $(this).find(".list").length;
98		if (count < 4) {
99			$(this).prev(".control").css("display", "none");
100		}
101
102		$(this).find(".list_wrap").slick({
103			dots: false,
104			infinite: true,
105			speed: 500,
106			autoplay: true,
107			slidesToShow: 3,
108			slidesToScroll: 1,
109			nextArrow: $(this).prev(".control").find(".btn_next"),
110			prevArrow: $(this).prev(".control").find(".btn_prev"),
111			responsive: [
112				{
113					breakpoint: 769,
114					settings: {
115						slidesToScroll: 1,
116						slidesToShow: 2,
117						variableWidth: false,
118					}
119				},
120			]
121		});
122		$(this).prev(".control").find(".btn_stop").click(function () {
123			if ($(this).hasClass('on') == false) {
124				$(this).addClass('on');
125				$(this).text("게시판 재생");
126				$(this).parent(".control").next(".con").find(".list_wrap").slick('slickPause');
127			} else {
128				$(this).removeClass('on');
129				$(this).text("게시판 일시정지");
130				$(this).parent(".control").next(".con").find(".list_wrap").slick('slickPlay');
131			}
132			return false;
133		});
134
135		$(this).find(".list_wrap").on("init afterChange", function (event, slick, currentSlide) {
136			$(this).parent(".con").prev(".control").find(".page").html('<span class="current">' + parseInt(slick.currentSlide + 1) + ' </span><span class="dash">/</span><span>' + slick.slideCount + ' </span>');
137		});
138	});
139
140
141	// 팝업존
142	$("#popup .list_wrap").slick({
143		dots: false,
144		infinite: true,
145		fade: true,
146		autoplay: true,
147		autoplaySpeed: 3000,
148		nextArrow: "#popup .btn_next",
149		prevArrow: "#popup .btn_prev"
150	});
151	$("#popup .btn_stop").click(function () {
152		if ($("#popup .btn_stop").hasClass('on') == false) {
153			$(this).addClass('on');
154			$(this).text("팝업 보기 재생");
155			$("#popup .list_wrap").slick('slickPause');
156		} else {
157			$(this).removeClass('on');
158			$(this).text("팝업 보기 일시정지");
159			$("#popup .list_wrap").slick('slickPlay');
160		}
161		return false;
162	});
163	$('#popup .list_wrap').on("init afterChange", function (event, slick, currentSlide) {
164		$(".page_p").html('<span class="current">' + parseInt(slick.currentSlide + 1) + ' </span><span class="dash">/</span><span>' + slick.slideCount + ' </span>');
165	});
166
167	// 현역의원
168	$("#member .big_list").each(function () {
169		$(this).find(".list_wrap").slick({
170			dots: false,
171			infinite: true,
172			speed: 500,
173			fade: true,
174			autoplay: true,
175			nextArrow: $(this).find(".btn_next"),
176			prevArrow: $(this).find(".btn_prev"),
177		});
178		$(this).find(".btn_stop").click(function () {
179			// 같은 big_list 안의 슬라이더 찾기
180			var $slider = $(this).closest(".big_list").find(".list_wrap");
181
182			if (!$(this).hasClass('on')) {
183				$(this).addClass('on');
184				$(this).text("의원보기 재생");
185				$slider.slick('slickPause');   // 여기 수정
186			} else {
187				$(this).removeClass('on');
188				$(this).text("의원보기 일시정지");
189				$slider.slick('slickPlay');    // 여기 수정
190			}
191			return false;
192		});
193		$("#member .small_list li").click(function (e) {
194			e.preventDefault();
195			var slideNo = $(this).index();
196			$("#member .big_list .list_wrap").slick("slickGoTo", slideNo);
197
198		});
199		$("#member .small_list li:first").addClass("active");
200		$(this).find(".list_wrap").on("afterChange", function (a, e, i, l) {
201			$("#member .small_list li").removeClass("active");
202			$("#member .small_list li:eq(" + i + ")").addClass("active");
203		});
204	});
205
206
207	// 갤러리
208	$("#gallery .list_wrap").slick({
209		dots: false,
210		autoplay: false,
211		slidesToScroll: 1,
212		slidesToShow: 4,
213		nextArrow: "#gallery .btn_next",
214		prevArrow: "#gallery .btn_prev",
215		responsive: [
216			{
217				breakpoint: 1231,
218				settings: {
219					slidesToScroll: 1,
220					slidesToShow: 4,
221				}
222			},
223			{
224				breakpoint: 1025,
225				settings: {
226					slidesToScroll: 3,
227					slidesToShow: 3,
228					variableWidth: false,
229				}
230			},
231			{
232				breakpoint: 569,
233				settings: {
234					slidesToScroll: 2,
235					slidesToShow: 2,
236					variableWidth: false,
237				}
238			},
239		]
240	});
241
242	// sns
243	$('.sns_wrap > li > .btn').on('click', function (e) {
244		e.preventDefault();
245
246		const $clickedLi = $(this).parent();
247
248		// 모든 li에서 on 클래스 제거, 내부 .list에서 active 클래스 제거
249		$('.sns_wrap > li').removeClass('on').find('.list').removeClass('active');
250
251		// 현재 클릭된 li에만 on 클래스 추가, 내부 .list에 active 클래스 추가
252		$clickedLi.addClass('on').find('.list').addClass('active');
253	});
254
255
256	// 배너
257	$("#banner .list_wrap").slick({
258		dots: false,
259		infinite: true,
260		slidesToScroll: 1,
261		autoplay: true,
262		variableWidth: true,
263		nextArrow: "#banner .btn_next",
264		prevArrow: "#banner .btn_prev",
265	});
266	$("#banner .btn_stop").click(function () {
267		if ($(this).hasClass('on') == false) {
268			$(this).addClass('on');
269			$(this).text("배너보기 재생");
270			$("#banner .list_wrap").slick('slickPause');
271		} else {
272			$(this).removeClass('on');
273			$(this).text("배너보기 일시정지");
274			$("#banner .list_wrap").slick('slickPlay');
275		}
276		return false;
277	});
278
279});
280
281
282
283
284$(function () {
285
286	var $member = $("#member");
287	var $map = $("map[name='image-map']");
288	var $areas = $map.find("area");
289
290	if (!$member.length || !$map.length) return;
291
292	$areas.each(function () {
293		var $area = $(this);
294		if (!$area.attr("data-origin-coords")) {
295			$area.attr("data-origin-coords", $area.attr("coords"));
296		}
297	});
298
299	function resizeMainMapCoords() {
300		var img = $member.find(".wrap:visible .map_img img[usemap='#image-map']")[0];
301		if (!img) return;
302
303		var baseW = 419;
304		var baseH = 485;
305
306		var targetW = img.clientWidth;
307		var targetH = img.clientHeight;
308
309		if (!targetW || !targetH) return;
310
311		var wRatio = targetW / baseW;
312		var hRatio = targetH / baseH;
313
314		$areas.each(function () {
315			var $area = $(this);
316			var origin = $area.attr("data-origin-coords");
317			if (!origin) return;
318
319			var shape = ($area.attr("shape") || "").toLowerCase();
320			var coords = origin.split(",");
321
322			var newCoords = coords.map(function (coord, i) {
323				coord = parseFloat(coord);
324
325				if (shape === "circle" && i === 2) {
326					return Math.round(coord * ((wRatio + hRatio) / 2));
327				}
328
329				return Math.round(coord * (i % 2 === 0 ? wRatio : hRatio));
330			});
331
332			$area.attr("coords", newCoords.join(","));
333		});
334	}
335
336	function moveBar() {
337		var bar = $("#board > ul").find(".bar");
338		var $active = $("#board > ul > li.on");
339
340		if (!$active.length) return;
341
342		var tabActive = $active.position().left;
343		var btnW = $active.width();
344

345		bar.css("transform", "translateX(" + tabActive + "px)")
346		   .css("width", btnW + "px");
347	}
348
349	window.viewMap = function (val) {
350		val = String(val);
351
352		for (var i = 1; i < 13; i++) {
353			if ($("#map" + i).length) {
354				$("#map" + i).css("display", "none");
355
356				if (val == i) {
357					$("#map" + i).css("display", "flex");
358
359					$('#member .big_list .list_wrap').slick('setPosition');
360
361					var distname = $("#member .big_list:eq(" + (i - 1) + ")")
362						.find("div.txt > ul.dash >li:eq(1)")
363						.text();
364
365					if (distname != "비례대표") {
366						distname = distname.substring(0, 3);
367					}
368
369					$("div.top > strong").text(distname);
370				}
371			}
372		}
373
374		setTimeout(resizeMainMapCoords, 80);
375	};
376
377	viewMap(1);
378	setTimeout(resizeMainMapCoords, 100);
379
380	$(window).on("load resize orientationchange", function () {
381		moveBar();
382		setTimeout(resizeMainMapCoords, 100);
383	});
384
385	$(window).on("scroll touchend", function () {
386		if (window.innerWidth <= 568) {
387			setTimeout(resizeMainMapCoords, 50);
388		}
389	});
390
391});
392
393
394
395
396
397
398//  퀵 메뉴
399$(function () {
400	let box = $('#container_main');
401	let boxHeight = box.height();
402	let boxOffsetTop = box.offset().top;
403	let quickMenu = $('#quickmenu');
404	let quickMenuHeight = quickMenu.height();
405	const DURATION = 700; // 퀵메뉴 따라다니는 애니메이션 시간
406
407	// 화면 리사이즈 시 값 다시 계산
408	$(window).resize(function () {
409		boxHeight = box.height();
410		boxOffsetTop = box.offset().top;
411		quickMenuHeight = quickMenu.height();
412	});
413
414	// 스크롤 시 퀵메뉴 위치를 자연스럽게 따라다니게 함
415	$(window).scroll(function () {
416		let scrollTop = $(this).scrollTop();
417		let point;
418		let endPoint = boxHeight - quickMenuHeight;
419
420		if (scrollTop < boxOffsetTop) {
421			point = 600; // 상단 고정 위치
422		} else if (scrollTop > endPoint) {
423			point = endPoint; // 하단 제한
424		} else {
425			point = scrollTop - boxOffsetTop + 200; // 일반 구간
426		}
427		quickMenu.stop().animate({ top: point }, DURATION);
428	});
429
430	// 퀵메뉴 클릭 이벤트
431	// HTML 구조 예시: <a href="#" data-target="#gallery">활동사진</a>
432	//  퀵메뉴 클릭/키보드 활성화 이벤트 (focus 바인딩 제거!)
433	let quick = $("#quickmenu li a");
434
435	// 클릭
436	quick.on("click", function (e) {
437		e.preventDefault();
438
439		const target = $(this).data("target");
440		if (!target || $(target).length === 0) return;
441
442		// 클릭 후 포커스 유지하면 탭 복귀 때 다시 focus될 수 있으니 포커스 제거
443		this.blur();
444
445		const targetPosition = $(target).offset().top;
446
447		// 클릭 시점에 현재 섹션 인덱스 미리 확정(안정성)
448		currentMainSection = $(target).index(
449			".section0, .section1, .section2, .section3, .section4, .section5, .section6, .section7"
450		);
451
452		isQuickScrolling = true;
453		$("html, body").stop().animate(
454			{ scrollTop: targetPosition },
455			800,
456			"swing",
457			function () {
458				isQuickScrolling = false;
459				if (typeof getCurrentSectionIndex === "function") {
460					currentMainSection = getCurrentSectionIndex();
461				}
462			}
463		);
464
465		$("#quickmenu > ul > li").removeClass("on");
466		$(this).parent("li").addClass("on");
467	});
468
469	// 키보드 접근(Enter/Space만 허용)
470	quick.on("keydown", function (e) {
471		// Enter(13), Space(32) 외에는 무시
472		if (e.key !== "Enter" && e.key !== " ") return;
473		$(this).trigger("click");
474	});
475
476
477	// 마우스로 스크롤/클릭하면 퀵메뉴 on 상태 해제
478	$(window).on("mousedown wheel", function () {
479		$("#quickmenu > ul > li").removeClass("on");
480	});
481
482	// 페이지 로드 완료 시 강제로 scroll 이벤트 실행 → 퀵메뉴 위치 초기화
483	$(window).on("load", function () {
484		$(this).trigger("scroll");
485	});
486});
487
488
489
490
491