https://daejungchem.co.kr/js/new/kai-jt-strap.js

1/*
2 * File       : js/jt-strap.js
3 * Author     : STUDIO-JT (KMS)
4 * Guideline  : JTstyle.1.0
5 *
6 * SUMMARY:
7 * 1) INIT
8 * 2) ON LOAD
9 * 3) ON RESIZE
10 * 4) FUNCTIONS
11 * 5) HELPERS
12 */
13
14
15(function($) {
16
17
18
19/* **************************************** *
20 * INIT
21 * **************************************** */
22media_image_popup();
23
24icheck_init();
25// selectric_init();
26//custom_input_file();
27
28// nicescroll_init();
29
30// daum_postcode();
31// jt_accordion();
32
33// jt_board_list_fullclick();
34
35
36
37/* **************************************** *
38 * ON LOAD
39 * **************************************** */
40$(window).load(function() {
41
42    // isotope_init();
43
44});
45
46
47
48/* **************************************** *
49 * ON RESIZE
50 * **************************************** */
51// INITIALIZE RESIZE
52function init_resize(){
53
54    // add more here
55
56}
57
58// Init resize on reisize or orientation change
59if('orientation' in window){
60    $(window).on('orientationchange',init_resize);
61}else{
62    $(window).on('resize',init_resize);
63}
64
65
66
67/* **************************************** *
68 * FUNCTIONS
69 * **************************************** */
70/**
71 * 본문에 삽입되어있는 이미지 미디어 파일을 클릭했을경우 원본사진을 팝업으로 오픈합니다.
72 * magnific-popup.js 플러그인 연동이 필요합니다.
73 *
74 * @version 1.0.0
75 * @since 2016-12-14
76 * @author STUDIO-JT (KMS)
77 * @see {@link http://asease2qw34123.cafe24.com/guide/page-guide/|데모 페이지(medipress, 이미지 파일 클릭시 확인이 가능합니다.)}
78 * @see {@link http://dimsemenov.com/plugins/magnific-popup/|magnific-popup API}
79 * @requires jquery.magnific-popup.js
80 */
81function media_image_popup() {
82
83    // 서포트 타겟 설정
84    var $popup_image_target = $("a:has(img)").filter( function() { return /\.(jpe?g|png|gif|bmp)$/i.test($(this).attr('href')); });
85    $popup_image_target.addClass("js_popup_media");
86
87    // 팝업 셋팅
88    $('a.js_popup_media').magnificPopup({
89        type            : 'image',
90        image           : {
91                            markup: '<div class="mfp-figure">'+
92                                    '<div class="mfp-img"></div>'+
93                                    '</div>', // '.mfp-img' div will be replaced with img tag
94                            cursor: 'mfp-zoom-out-cur',
95                            verticalFit: true,
96                            tError: '이미지를 불러오는데 실패했습니다.'
97                        },
98        mainClass       : 'mfp-with-zoom',
99        zoom            : {
100                            enabled: true,
101                            duration: 300,
102                            easing: 'ease-in-out'
103                        },
104        midClick        : true,
105        showCloseBtn    : false,
106        fixedContentPos : false,
107        autoFocusLast   : false,
108        callbacks       : {
109                            open: function() {
110                                $('html').addClass('js_popup_scroll_evnet');
111                            },
112                            afterClose: function() {
113                                $('html').removeClass('js_popup_scroll_evnet');
114                            }
115                        }
116    });
117
118    // 스크롤 이동시 팝업창 닫기
119    $(window).on('scroll',function(e){
120        if( $('html').hasClass('js_popup_scroll_evnet')) {
121            setTimeout(function(){
122                $('.mfp-wrap').css('z-index', '100');
123                $.magnificPopup.close();
124            }, 300);
125        }
126    });
127
128}
129
130
131
132/**
133 * icheck plugin init 함수
134 * checkbox와 radio 커스텀 스타일을 설정합니다.
135 *
136 * @version 1.0.0
137 * @since 2016-12-14
138 * @author STUDIO-JT (KMS, Jun)
139 * @see {@link http://asease2qw34123.cafe24.com/guide/form-guide/|데모 페이지(medipress)}
140 * @see {@link http://icheck.fronteed.com|icheck API}
141 * @requires icheck.js
142 *
143 * @example
144 * // markup sample
145 * <label><input class="jt_icheck" type="checkbox" /> <span>체크박스</span></label>
146 * <label><input class="jt_icheck" type="radio" id="radioid" /> <span>라디오</span></label>
147 */
148function icheck_init() {
149
150    $('.jt_icheck').iCheck({
151        checkboxClass: 'icheckbox_minimal',
152        radioClass: 'iradio_minimal'
153    });

154
155}
156
157
158
159/**
160 * selectbox custom plugin init 함수
161 * selectbox 커스텀 스타일을 설정합니다.
162 *
163 * @version 1.0.0
164 * @since 2016-12-14
165 * @author STUDIO-JT (KMS)
166 * @see {@link http://asease2qw34123.cafe24.com/guide/form-guide/|데모 페이지(medipress)}
167 * @see {@link http://selectric.js.org/|selectric API}
168 * @requires jquery.selectric.js
169 *
170 * @example
171 * markup sample
172 * <select class="jt_selectric">
173 *     <option value="op1">OP1</option>
174 *     <option value="op2">OP2</option>
175 *     <option value="op3">OP3</option>
176 * </select>
177 */
178function selectric_init() {
179
180    $('.jt_selectric').selectric({
181        disableOnMobile: false
182    });
183
184}
185
186
187
188/**
189 * input file custom plugin init 함수
190 * file타입 input 스타일을 설정합니다.
191 *
192 * @version 1.0.0
193 * @since 2016-12-14
194 * @author STUDIO-JT (KMS)
195 * @see {@link http://asease2qw34123.cafe24.com/guide/form-guide/|데모 페이지(medipress)}
196 * @requires jquery.customFile_jt-custom.js
197 *
198 * @example
199 * markup sample
200 * <input class="jt_custom_file" type="file" />
201 */
202function custom_input_file(){
203
204    $('.jt_custom_file').customFile({
205        input_class: 'jt_form_field', // input text에 추가할 class
206        // input_placeholder: '선택된 파일 없음', // input text placeholder
207        btn_text: '찾아보기', // btn에 들어갈 value
208        btn_class: 'customfile_btn' // btn에 추가할 class
209    });
210
211}
212
213
214
215/**
216 * nicescroll plugin init 함수
217 * 커스텀 스크롤바를 설정합니다.
218 *
219 * @version 1.0.0
220 * @since 2016-12-14
221 * @author STUDIO-JT (KMS)
222 * @see {@link http://asease2qw34123.cafe24.com/guide/form-guide/|데모 페이지(medipress), 약관동의부분 스크롤바}
223 * @see {@link https://github.com/inuyaksa/jquery.nicescroll|nicescroll API}
224 * @requires jquery.nicescroll.js
225 *
226 * @example
227 * // markup sample
228 * <div class="nicescroll_area"></div>
229 */
230function nicescroll_init() {
231
232    $('.nicescroll_area').niceScroll({
233        autohidemode       : false,
234        cursorborder       : "0px solid #fff",
235        cursorcolor        : "#ddd",
236        background         : "#fff",
237        cursorwidth        : 12,
238        cursorborderradius : "0px",
239        railoffset		   : {top: 0, left: 0}
240    });
241
242}
243
244
245
246/**
247 * isotope plugin init 함수
248 *
249 * @version 1.0.0
250 * @since 2016-12-14
251 * @author STUDIO-JT (KMS)
252 * @see {@link http://asease2qw34123.cafe24.com/guide/%EB%A6%AC%EC%8A%A4%ED%8A%B8-%EA%B2%8C%EC%8B%9C%ED%8C%90/%EC%A7%84%EB%A3%8C%ED%9B%84%EA%B8%B0/|데모 페이지(medipress)}
253 * @see {@link http://isotope.metafizzy.co/|isotope API}
254 * @requires isotope.pkgd.js
255 * @requires imagesloaded.pkgd.min.js
256 */
257function isotope_init() {
258
259    // init setting
260    var $container = $('.jt_isotope');
261	var $isotope_target = $container.isotope({
262		itemSelector: '.isotope_item',
263		masonry: {
264			columnWidth: '.isotope_grid_sizer',
265			gutter: '.isotope_gutter_sizer'
266		},
267		percentPosition : true
268	});
269
270	// layout Isotope after each image loads
271	$isotope_target.imagesLoaded(function(){
272		$isotope_target.isotope('layout');
273		// If hidden with css, display it
274		$container.css({'visibility': 'visible','opacity': 1})
275	});
276
277    // isotope loadmore
278	if($('.jt_isotope').length > 0){
279	    loadmore($isotope_target);
280	} else {
281        loadmore();
282    }
283}
284
285
286
287/**
288 * DAUM 우편번호 검색 연동 함수
289 *
290 * @version 1.0.0
291 * @since 2016-12-14
292 * @author STUDIO-JT (KMS)
293 * @see {@link http://asease2qw34123.cafe24.com/guide/form-guide/|데모 페이지(medipress), 주소필드 참고}
294 * @see {@link http://postcode.map.daum.net/guide|DAUM 우편번호 API}
295 * @requires daum postcode script file (CDN이 유동적임 API 참고)
296 */
297function daum_postcode() {
298
299    // daum api check
300    if( typeof daum == "object" && typeof daum.Postcode == "function" ){
301
302        $("#your_postcode, #js_post_code_find").click(function(){
303            daum_postcode_popup();
304        });
305
306    }
307
308    // daum post code popup
309    function daum_postcode_popup() {
310
311        new daum.Postcode({
312            oncomplete: function(data) {

313                $('#your_postcode').val(data.zonecode); // 신 우편번호
314
315                var addr;
316
317                // SelectedType (R = 도로명주소, J = 지번주소)
318                if(data.userSelectedType == 'R') {
319                    addr = data.roadAddress;
320                    if(data.buildingName != ''){
321                        addr += ' (' + data.buildingName + ')';
322                    }
323                } else {
324                    addr = data.jibunAddress;
325                }
326
327                $('#your_addr_01').val(addr); // 기본주소
328                $('#your_addr_02').focus(); // focus setting
329            }
330        }).open({
331            popupName: 'postcodePopup'
332        });
333
334    }
335
336}
337
338
339
340/**
341 * JT ACCORDION
342 *
343 * @version 1.0.0
344 * @since 2017-03-03
345 * @author STUDIO-JT (KMS,NICO)
346 * @requires jt-strap.css
347 *
348 * @example
349 * Markup sample
350 * <table class="jt_accordion">
351 * 	 <caption>목록</caption>
352 * 	 <thead>
353 * 		<tr>
354 * 		    <th scope="col" class="state">상태</th>
355 * 		    <th scope="col" class="title">제목</th>
356 * 		    <th scope="col" class="control">펼치기</th>
357 * 		</tr>
358 * 	 </thead>
359 * 	 <tbody>
360 * 		<tr class="jt_accordion_title">
361 * 			<td class="state"><span lang="en">Q</span></td>
362 * 			<td class="title"><p>TITLE</p></td>
363 * 			<td class="control"><i>펼치기/접기</i></td>
364 * 		</tr>
365 * 		<tr class="jt_accordion_content">
366 * 			<td class="state"><div class="jt_accordion_content_inner"><span lang="en">A</span></div></td>
367 * 			<td colspan="2" class="title"><div class="jt_accordion_content_inner">CONTENT</div></td>
368 * 		</tr>
369 * 		.....
370 *   </tbody>
371 * </table>
372 */
373function jt_accordion() {
374
375	// 첫 게시물에 active 클래스 추가
376	$('.jt_accordion_title').first().addClass('active');
377	$('.jt_accordion_content').first().addClass('active');
378
379	// Toggle the accordion
380	// Delegate click event to keep alive after adding content via ajax
381	$('.jt_accordion').on('click', '.jt_accordion_title', function(){
382
383		var $title = $('.jt_accordion_title');
384		var $content = $('.jt_accordion_content');
385		$title.not($(this)).removeClass('active');
386		$content.not($(this).next()).removeClass('active').find('.jt_accordion_content_inner').slideUp();
387		$(this).toggleClass('active').next().toggleClass('active').find('.jt_accordion_content_inner').slideToggle();
388
389		return false;
390
391	});
392
393}
394
395
396
397// LIST FULL CLICK
398function jt_board_list_fullclick() {
399
400    $('.jt_newsfeed_item').on('click', function(e){
401        e.stopPropagation();
402
403		var target = e.target;
404        // if($(target).hasClass('direct_link') || $(target).parent().hasClass('direct_link')){
405		//     return;
406		// }
407
408		var url = $(this).find('a:first').attr('href');
409		if(url != undefined){
410            if($('body').find('.jt_newsfeed_origin').length > 0) {
411                // 언론보도, IR자료실
412                var openNewWindow = window.open("about:blank");
413                openNewWindow.location.href = url;
414
415                return false;
416            } else {
417                window.location.href = url;
418            }
419		}
420	});
421
422}
423
424
425
426/* ********************************************* *
427 * HELPERS
428 * ********************************************* */
429// SIMPLE MOBILE CHECK
430function is_mobile(){
431    return (/Android|iPhone|iPad|iPod|BlackBerry|Windows Phone/i).test(navigator.userAgent || navigator.vendor || window.opera);
432}
433
434
435
436}(jQuery)); //End jQuery