Publishing Output Guide Document

Written : 2014-08-27, 작성자 : 지성봉
1. 프로젝트명 아시안게임 PC웹
2. 인코딩 방식 utf-8
3. DTD 사용 HTML5
4. 크로스 브라우징 테스트 IE 8 이상, Firefox , Chrome
5. Responsive 여부 X
6. 웹 접근성 적용 여부

CSS, JavaScript Resources

type 1 Depth 2 Depth Directory FileName Memo
CSS 공통 CSS /css common.css RESET CSS - for CrossBrowsing, 공통 CSS
JS jQuery /js jquery-1.11.1.min.js
Masonry Plugin /js plugins.js
Infinit Scroll Plugin /js plugins.js with manual-trigger Plugin
SWFObejct /js swfobject.js 기존에 사용 중이던 영상 클립 재생 관련 JS
공통 JS /js common.js
JSON 클립 · 하이라이트 영상 / items.json JSON data - 차후 실제 API로 변경
/ items.guide.json items.json Guide
중계일정 · 편성표 / schedule.json JSON data - 차후 실제 API로 변경
/ schedule.guide.json schedule.json Guide - 이미 추출된 데이터 형식을 따름

HTML Resources

미작업 작업 중 작업 완료
1 Depth 2 Depth 3 Depth Directory FileName Memo
클립 · 하이라이트 영상 / index.html
중계일정 · 편성표 / schedule.html
경기일정 / gameSchedule.html
메달순위 / score.html

Developed Script

미작업 작업 중 작업 완료
관련 영역 기능 파일 위치 Memo
클립 · 하이라이트 영상 Masonry Layout Apply & add Masonry Event Listener /js/common.js @see http://masonry.desandro.com/
첫 번째 set Masonry 적용 후,
브라우저 height 대비 full-fill 되어있지 않을 경우 추가 로드
자세한 내용은 주석 참고
1st ajax data load /js/common.js @see http://api.jquery.com/jQuery.ajax/
첫 List 역시 Ajax 로 Get
  1. parsing & processing JSON Data (use function parseClipJSON)
  2. add infinitescroll
클립 영상 json data로 부터 마크업 build 및 관련 data 기록 /js/common.js @function parseClipJSON
@param {object} jsonData
@param {obejct} appendTarget
@param {number} step

추가 데이터 여부 확인하여 infinite scroll destory

동영상 레이어 팝업 생성 /js/common.js @function buildMoviClip
@param {object} opt - { headTxt, regDate, clipId, videoURL, channelId }
@description
  1. popup markup build & append
  2. bind event's for close layer
  3. video player(swf) append (use swfObject.js)

추가 개발 필요 사항 :
focus 가두는 기능 필요 - 완료
팝업 닫을 시 이전 focus 객체로 되돌리기 - 완료
팝업 생성 시 스크롤 차단 - 완료

아이템 클릭 이벤트 바인딩 /js/common.js type( img / banner / video )에 따라 동작
  • ■ img / banner 의 경우

    링크 기본 동작

  • ■ video 의 경우

    동영상 레이어 팝업 생성

추가 개발 필요 사항 :
각 타입별 Flurry log 남기기 - 완료

tag Cloud Buttons /js/common.js
  1. 더보기 클릭 => form#tagCldFrm height 를 animate toggle
    ( +/- 토글 기능 추가 필요 )
  2. 각 태그 클릭 시 마다 컨텐츠 갱신 ( ajaxing )
  3. 전체 보기 시 페이지 갱신
중계일정 · 편성표 Date 객체 메서드 확장
( toYMDString / tommorow / yesterday / toDayString / toYMDhypenString )
/js/common.js @method toYMDString
@return {string}
@description export YYYYMMDD type string
@method tommorow
@return {date object}
@description get next day
@method yesterday
@return {date object}
@description get previous day
@method toDayString
@return {string}
@description export mm.dd dayStr type
@method toYMDhypenString
@return {string}
@description export YYYY-MM-DD type string
날짜 컨트롤 클릭 이벤트 /js/common.js
  1. 이벤트 위임 처리
  2. Ajax Load 익명함수 바인딩
편성 시간 vs 현재 시간 확인 /js/common.js @function chkCurrTime
@returns {bool}
@param {string} stTime
	
{string} endTime
시간 → 문자 변환
(1300 → 오후 01:00 )
/js/common.js @function timeToStr
@param {string} time
@returns {string}
편성표 Ajax Procss /js/common.js @function schdlProc
@param {object} json
@param {string} chID // channel ID
@param {string} targetDate // YYYYMMDD 형태
@description build new Ordered List & append to DocumentFragment

추가 개발 필요 사항 :
페이지 로드 시 각 방송사 별 현재일 편성표 ajax 처리 - 완료

경기일정 Masonry Layout /js/common.js Use Masonry Plugins
Document : masonry homepage