https://dongmanmanhua.cn/js/home.js

1/**
2 * 홈 요일 목록 처리
3 */
4var Home = jindo.$Class({
5	$autoBind : true,
6
7	$init : function() {
8		this._initVars();
9
10		// 오늘 요일 구해서 요일 타이틀과 요일 목록 노출
11		this._changeWeekday(this._getCurrentWeekdayIndex());
12		
13		// 선호장르 영역
14		this._initFavoriteGenre();
15		
16		// HOT&NEW
17		this._initHotAndNew();
18		
19		// 공지 보여줄지 여부 확인
20		this._checkNotice();
21		
22		var self = this; // 렌더링 속도 때문에 말줄임 못해서 한번 더 해줌
23		setTimeout(function() {
24			self._changeWeekday(self._getCurrentWeekdayIndex());
25		}, 150);
26		// 이벤트 핸들러 지정
27		this._welDailyTab.attach('[email protected]_daily', this._onClickWeekdayTab);
28		this._welWeekdayList.attach({
29			'[email protected]_front' : this._onMouseOverCard,
30			'[email protected]_more' : this._onClickMoreBtn
31		});
32	},
33
34	/**
35	 * 변수 초기화
36	 */
37	_initVars : function() {
38		this._welWeekdayList = jindo.$Element('weekdayList');
39		this._welDailyTab = jindo.$Element('dailyTab');
40		this._welBlind = this._welWeekdayList.query('h2.blind');
41		this._sBlindSurfix = this._welBlind.text().split(' ')[1];
42		this._welFavoriteGenreTitleList = jindo.$Element('favoriteGenreTitleList');
43		this._welHotAndNew = jindo.$Element('hotAndNew');
44	},
45
46	/**
47	 * 선호장르 영역 초기화
48	 */
49	_initFavoriteGenre : function() {
50		var MIN_TITLE_COUNT = 4;
51		// 선호 장르 추출
52		var aGenreList = this._extractFavoriteGenreList(4);
53		
54		// ajax로 데이터 로딩
55		var aHtml = [];
56		var bUnderCount = false;
57		for (var i = 0; i < aGenreList.length; i++) {
58			var sCurrentGenre = aGenreList[i];
59			new jindo.$Ajax('/getFavoriteGenreTitleList', {
60				type : 'xhr',
61				method : 'get',
62				async : false,
63				timeout : 5,
64				onload : function(oRes) {
65					var oJson = oRes.json();
66					bUnderCount = (oJson.length < MIN_TITLE_COUNT);
67					
68					var htParam = {
69						genre : sCurrentGenre,
70						genreName : ghtGenreList[sCurrentGenre].sName,
71						genreSeoCode : ghtGenreList[sCurrentGenre].sSeoCode,
72						genreInstruction : ghtGenreList[sCurrentGenre].sIntoduction,
73						titleList : oJson
74					};
75					var sHtml = jindo.$Template('tplFavoriteGenre').process(htParam);
76					aHtml.push(sHtml);
77				}
78			}).request({ genre : ghtGenreList[sCurrentGenre].nId });
79
80			// 장르에 표시할 개수가 모자라면 제거한다.
81			if (bUnderCount) {
82				aHtml.pop();
83				bUnderCount = false;
84			}
85			
86			// 2개 장르 채웠으면 끝

87			if (aHtml.length == 2) {
88				break;
89			}
90		}
91		
92		this._welFavoriteGenreTitleList.html(aHtml.join('\n'));
93		
94		this._welFavoriteGenreTitleList.attach({
95			'[email protected]_front' : this._onMouseOverCard
96		});
97	},
98	
99	/**
100	 * HOT&NEW 영역 초기화
101	 */
102	_initHotAndNew : function() {
103		if (!this._welHotAndNew) {
104			return;
105		}
106
107		var itemCount = 0; 
108		var itemPerPage = 4;
109		var oPagenation = null;
110
111		if (this._welHotAndNew.data("item-count") != null) {
112			itemCount = Number(this._welHotAndNew.data("item-count"));
113		} else {
114			// default
115			itemCount = 0;
116		}
117		
118		// 이벤트 지정
119		
120		this._welHotAndNew.attach({
121			'[email protected]_front' : this._onMouseOverCard,
122			'click@._prevBtn' : function(oEvent) {
123				oEvent.stopDefault();
124				oHotAndNewRolling.moveBy(-itemPerPage);
125				var nPage = getCurrentPage();
126				
127				oPagenation && oPagenation.movePageTo(nPage);
128			},
129			'click@._nextBtn' : function(oEvent) {
130				oEvent.stopDefault();
131				oHotAndNewRolling.moveBy(itemPerPage);
132				var nPage = getCurrentPage();
133				
134				oPagenation && oPagenation.movePageTo(nPage);
135			}
136		});
137		
138		// 롤링 & 페이징
139		var oHotAndNewRolling = new jindo.CircularRolling(jindo.$('rolling'), {
140			nDuration : 400
141		});
142		if (jindo.$('hotAndNewPagination')) {
143			oPagenation = new jindo.Pagination('hotAndNewPagination', {
144				nItem : itemCount,
145				nItemPerPage : itemPerPage,
146				sInsertTextNode : '\n',
147				sClassFirst : '',
148				sClassLast : '',
149				sPageTemplate : '<a data-buried-obj="1" data-sc-name="PC_home-page_new-point-btn" href="#" class="ico_pg N=a:hnn.page,g:' + sNclkLanguageCode + '">{=page}</a>',
150				sCurrentPageTemplate : '<strong class="ico_pg">{=page}</strong>'
151			}).attach({
152				click : function(oCustomEvent) {
153					var nMoveCount = this.getItemPerPage();
154					var current = getCurrentPage();
155					var maximum = Math.ceil(itemCount / itemPerPage);
156					var event = oCustomEvent.nPage;
157					// moveCount 방향을 수정. 
158					if (getRightMoving(current, event, maximum) > -getLeftMoving(current, event, maximum)) {
159						// 오른쪽 이동이 더 적게 움직이면 
160						nMoveCount *= getLeftMoving(current, event, maximum); 
161					} else if (getRightMoving(current, event, maximum) < -getLeftMoving(current, event, maximum)) {
162						// 왼쪽 이동이 더 적게 움직이면 
163						nMoveCount *= getRightMoving(current, event, maximum);
164					} else {
165						// 양 방향이 모두 같으면 
166						if (current < event) {
167							// 왼쪽에서 오른쪽걸 선택했을 때 
168							nMoveCount *= getRightMoving(current, event, maximum);	
169						} else {
170							// 오른쪽에서 왼쪽걸 선택했을 때
171							// 같은 이벤트는 막혀있음. 
172							nMoveCount *= getLeftMoving(current, event, maximum);
173						}
174					}					
175					oHotAndNewRolling.moveBy(nMoveCount);
176				}
177			});
178		}
179		
180		// 와이드 썸네일 카드 앞면 말줄임
181		/*var welMultiSummary = this._welHotAndNew.query('li.card_multi p.summary');
182		Util.ellipsis(welMultiSummary, 'div.ellipsis_wrap');*/
183		
184		function getCurrentPage() {
185			return (oHotAndNewRolling.getIndex() % itemCount) / itemPerPage + 1;
186		}
187		
188		function getRightMoving(current, event, max) {
189			if (event < current) {
190				event += max;
191			}
192			return event - current;
193		}
194		function getLeftMoving(current, event, max) {
195			if (current < event) {
196				current += max;
197			}
198			return event - current;
199		}
200	},
201	
202	/**
203	 * 오늘 요일 인덱스 계산
204	 * 
205	 * @return {Number} 요일 인덱스(0~6, 월~일)
206	 */
207	_getCurrentWeekdayIndex : function() {
208		var oDate = jindo.$Date();
209		var nDay = oDate.day() - 1 < 0 ? 6 : oDate.day() - 1; // 월요일이 맨 앞에 나와서
210																// 추가 처리
211		return nDay;
212	},
213
214	/**
215	 * 선택 요일탭 변경
216	 * 
217	 * @param nIndex {Number} 선택한 요일 인덱스
218	 */
219	_changeWeekday : function(nIndex) {
220		var aDailyTab = this._welDailyTab.queryAll('li');
221		for (var i = 0, n = aDailyTab.length; i < n; i++) {
222			var welDailyTab = aDailyTab[i];
223			// 기존 선택 해제
224			if (welDailyTab.hasClass('on')) {
225				welDailyTab.removeClass('on');
226			}
227			// 신규 선택
228			if (i == nIndex) {
229				welDailyTab.addClass('on');
230			}
231		}
232
233		var aWeekdayList = this._welWeekdayList.queryAll('ul.card_lst');
234		for (var i = 0, n = aWeekdayList.length; i < n; i++) {
235			var welWeekdayList = aWeekdayList[i];
236			// 기존 선택 해제
237			if (welWeekdayList.visible() == true) {
238				welWeekdayList.hide();
239			}
240			// 신규 선택
241			if (i == nIndex) {
242				welWeekdayList.show();
243				
244
245				// 와이드 썸네일 카드 앞면 말줄임
246				/*var welMultiSummary = welWeekdayList.query('li.card_multi p.summary');
247				Util.ellipsis(welMultiSummary, 'div.ellipsis_wrap');*/
248			}
249		}
250
251		// blind 텍스트 변경
252		this._changeBlindText();
253
254	},
255
256	/**
257	 * blind 텍스트 변경
258	 */
259	_changeBlindText : function() {
260		var sWeekdayName = this._welDailyTab.query('li.on a').text();
261		this._welBlind.text(sWeekdayName + ' ' + this._sBlindSurfix);
262	},
263
264	/**
265	 * 요일 클릭 이벤트 처리
266	 * 
267	 * @param oEvent
268	 *            {Wrapping Event} jindo Event 객체
269	 */
270	_onClickWeekdayTab : function(oEvent) {
271		oEvent.stopDefault();
272
273		var nIndex = jindo.$Element('dailyTab').indexOf(oEvent.element.parentNode);
274		this._changeWeekday(nIndex);
275	},
276
277	/**
278	 * 카드에 마우스 오버 할 때 이벤트 처리 - 카드 뒷면 줄거리를 말줄임 처리한다.
279	 * 
280	 * @param oEvent {Wrapping Event} jindo Event 객체
281	 */
282	_onMouseOverCard : function(oEvent) {
283		return;
284		var elSummary = jindo.$$.getSingle('+ div.card_back div.info p.summary', oEvent.element);
285		var welSummary = jindo.$Element(elSummary);
286		if (welSummary.data('ellipsised') && welSummary.data('ellipsised') == true) {
287			return;
288		}
289		Util.ellipsis(welSummary, 'div.info');
290		welSummary.data('ellipsised', true);
291	},
292	
293	/**
294	 * MORE 버튼 클릭 이벤트 처리
295	 * 
296	 * @param oEvent {Wrapping Event} jindo Event 객체
297	 */
298	_onClickMoreBtn : function(oEvent) {
299		oEvent.stopDefault();
300		
301		var sWeekday = this._welDailyTab.query('li.on').data('weekday');
302		//clickcr(this, 'hdy.more', '', '', oEvent, sNclkLanguageCode);

303		location.href = oEvent.element.href + '?weekday=' + sWeekday;
304	},
305	
306	_extractFavoriteGenreList : function(nExtractCount) {
307		// 최근 본 웹툰에서 장르 통계 추출
308		var oRecentWebtoon = new RecentWebtoon();
309		aRecentWebtoon = oRecentWebtoon.get(gsContentLanguage) || [];
310		for (var i = 0; i < aRecentWebtoon.length; i++) {
311			var oRecentWebtoon = aRecentWebtoon[i];
312			if (oRecentWebtoon.bChallenge == true) {
313				continue;
314			}
315			
316			var sGenre = oRecentWebtoon.genreCode;
317			if (!sGenre) {
318				continue;
319			}
320			// 잘못된 데이터 걸러내기
321			// 2015.03.06 배포에서 sGenre에 장르이름이 들어가야 하는데, true값이 들어가는 문제가 발생 하였음
322			// 이것 때문에, 홈에서 genre가 나오지 않는 문제가 발생하여, 해당 문제를 해결하기 위한 코드
323			// TODO: 시간이 많이 지나면 삭제되어야 할 코드
324			if(sGenre == true) {
325				continue;
326			}
327			
328			// 자기가 봤던 장르의 웹툰이 변경되어서 해당 장르 웹툰이 더이상 존재하지 않을 때
329			if (ghtGenreList[sGenre] == undefined) {
330				continue;
331			}
332			ghtGenreList[sGenre].nCount++;
333		}
334		
335		// 많이 본 장르 순으로 정렬
336		var whtGenreList = jindo.$H(ghtGenreList);
337		whtGenreList.sort(function(val1, val2) {
338			var nCount1 = val1.nCount;
339			var nCount2 = val2.nCount;
340			
341			return nCount2 - nCount1;	// 내림차순 정렬
342		});
343		
344		// 선호 장르 선정(개수 모자라면 나머지 장르에서 랜덤 추출)
345		var aFavoriteGenreList = [];
346		var aNotFavoriteGenreList = [];
347		whtGenreList.forEach(function(v, k, o) {
348			if (v.nCount > 0) {
349				aFavoriteGenreList.push(k);
350			} else {
351				aNotFavoriteGenreList.push(k);
352			}
353		});
354		var waFavoriteGenreList = jindo.$A(aFavoriteGenreList).concat(jindo.$A(aNotFavoriteGenreList).shuffle().slice(0, nExtractCount));	// 안 본 장르에서 랜덤 2개 뽑아서 본 장르에 추가
355		
356		return waFavoriteGenreList.slice(0, nExtractCount).$value();
357	},
358	
359	/*
360	 * 공지 노출
361	 * 사용자 쿠키를 확인하여, 공지 노출 여부를 결정 한다.
362	 * 캐쉬를 태우기 위하여, js로 처리
363	 */
364	_checkNotice : function() {
365		var cookie = jindo.$Cookie();
366		var noticeDoNotShow = cookie.get("noticeDoNotShow");
367		var wEl = jindo.$Element("_notice");
368		if (!wEl) {
369			return;
370		}
371		var noticeBannerSeq = wEl.data("bannerSeq");
372		
373		if(noticeDoNotShow != noticeBannerSeq) {
374			this._showNotice();
375		}
376		
377		// 닫기 이벤트 지정
378		wEl.attach({
379			'[email protected]_close' : this._closeNotice,
380			'change@#_noticeNotAgain' : this._checkMuteClose
381		});
382	},
383	
384	_showNotice : function() {
385		jindo.$Element("_dim").addClass('on');
386		
387		var noticeLayer = jindo.$Element("_notice");
388		noticeLayer.addClass('on');
389		
390		// 화면 높이의 80%를 넘는 팝업일 경우 중앙 고정 해제
391		var isNoticeScrollNeeded = (noticeLayer.query('div').height() > (jindo.$Document().clientSize().height * 0.8));
392		if (isNoticeScrollNeeded) {
393			noticeLayer.removeClass('fixed');
394		}
395	},
396
397	/*
398	 * 공지를 닫는다
399	 * 만약, 더이상 보지 않기 체크박스가 활성화 되어 있다며, 쿠키를 구워 준다.
400	 */
401	_closeNotice : function() {
402		var wEl = jindo.$Element("_notice");
403		if (!wEl) {
404			return;
405		}
406		
407		var welNoticeNotAgainCheckbox = jindo.$("_noticeNotAgain");
408		if(welNoticeNotAgainCheckbox  && welNoticeNotAgainCheckbox.checked) {
409			var cookie = jindo.$Cookie();
410			cookie.set("noticeDoNotShow", wEl.data("bannerSeq"), 30);	// 30일간 안보임
411		}
412		else {
413			var cookie = jindo.$Cookie();
414			cookie.set("noticeDoNotShow", wEl.data("bannerSeq"));	// 이번 세션에서만 안보임
415		}
416		
417		wEl.hide().leave();
418		jindo.$Element("_dim").removeClass("on");
419		
420		return false;
421	},
422	
423	/*
424	 * 공지를 오랬동안 보지 않기 클릭하는 경우 
425	 */
426	_checkMuteClose : function(oCustomEvent) {
427		var chkBox = jindo.$Element("_notice").query(".ico_chkbox");
428		if(chkBox != 'undefined') {
429			if(oCustomEvent.delegatedElement.checked) {
430				chkBox.addClass('on');
431			}
432			else {
433				chkBox.removeClass('on');
434			}
435		}
436	}
437});
438setTimeout(function () {
439	var $=jQuery;
440	$.each($('.summary_cut'),function (k,v) {
441		var regexp=/<br>/igm, regexp_1=/\`/img;
442		var str=$(v).html();
443		var n=str.match(regexp)?str.match(regexp).length : 0;
444		var newStr=str.replace(regexp, "`").substring(0,(65+n))+'...';
445		$(v).html( newStr.replace(regexp_1,'<br>'));
446	})
447},500);