Merge branch 'develop'

* develop:
  팝업의 뱃지 스타일 변경
  공지사항 추가
  뷰어를 열면 항상 높이에 맞게 변하도록 처리
  오디오 버튼 클릭 시 뷰어가 닫히던 문제 해결
  아이콘을 선택했을 때, 사전에 바로 포커스 가도록 변경
  컨텍스트 메뉴로부터 검색할 수 있도록 추가
  검색 키워드에 대한 로그 추가
  요청 주소 트래킹 추가

TODO.md

@@ -1,9 +1,5 @@
 ## TODO
 
-설정 정보에 이후 개선 내용에 대한 슬라이드 추가하기
-
-창이 열려있는 상태에서 렌더링 시 창 크기 변경하기
-
 페이스북 페이지 임베드하기
 단축키 입력 시 사전 동작하게 하기 (백그라운드로 메시지 보내기)
 단어장 페이지 만들기
@@ -13,9 +9,7 @@
 
 
 ## DOING
-개선 내용에 대한 엑셀 파일을 설정 페이지에 추가하기
-  - https://docs.google.com/spreadsheets/d/19eSjHMtyF_RsF8EYa655SPjYB8EQFplfmPA_dozfIB0/edit#gid=0
-  - 앵귤러에서 선택해서 컨트롤러를 변경하는 방법에 대해 알아봐야 함
+
 
 
 ## Complete
@@ -45,4 +39,9 @@
 더블클릭과 마우스 드래그를 명확하게 나누기
 지표 코드 추가하기
 사용하지 않는 파일 정리하기
-빌드 코드 정리하기
+빌드 코드 정리하기
+개선 내용에 대한 엑셀 파일을 설정 페이지에 추가하기
+  - https://docs.google.com/spreadsheets/d/19eSjHMtyF_RsF8EYa655SPjYB8EQFplfmPA_dozfIB0/edit#gid=0
+  - 앵귤러에서 선택해서 컨트롤러를 변경하는 방법에 대해 알아봐야 함
+설정 정보에 이후 개선 내용에 대한 슬라이드 추가하기
+창이 열려있는 상태에서 렌더링 시 창 크기 변경하기

src/coffee/background/analyticsTracker.coffee

@@ -6,7 +6,8 @@
 ###
 @define 'analyticsTracker', ($$constant, $$uuid, $$storage, $$message) ->
 
-  whenTrackingRequested = $$message.createListenerToExtension 'A:trackingRequested'
+  whenEventTrackingRequested = $$message.createListenerToExtension 'A:eventTrackingRequested'
+  whenPageTrackingRequested = $$message.createListenerToExtension 'A:pageTrackingRequested'
 
   startTracking = (clientId) ->
     # @ga_debug = true
@@ -32,8 +33,10 @@
 
   # 이벤트를 전송한다.
   # @param {String} eventString 이벤트 문자열 '카테고리:액션:레이블'
-  track = (eventString) ->
+  # @param {String} [referrer] 이벤트가 발생한 페이지 URL
+  trackEvent = (eventString, referrer = '') ->
     [category, action, label] = eventString.split(':')
+    @ga 'set', 'referrer', referrer
     @ga 'send', 'event', category, action, label, useBeacon: true 
 
   $$storage.get('clientId')
@@ -45,4 +48,7 @@
 
     .then (clientId) ->
       startTracking clientId
-      whenTrackingRequested track
+      whenEventTrackingRequested (data) ->
+        trackEvent data.eventString, data.referrer
+      whenPageTrackingRequested (pageUrl) ->
+        @ga 'send', 'pageview', pageUrl, useBeacon: true

src/coffee/background/background.coffee

@@ -37,4 +37,11 @@
   whenQuerySubmitted (word) ->
     $$wordSearcher.searchWord(word, sendWordSearchedToPopup)  
   whenDicTypeToggledOnPopup (isEE) ->
-    $$wordSearcher.toggleDicType(isEE, sendWordSearchedToPopup)
+    $$wordSearcher.toggleDicType(isEE, sendWordSearchedToPopup)
+
+  # 컨텍스트 메뉴에 영어사전 검색을 추가한다.
+  chrome.contextMenus.create
+    title: "네이버 영어사전에서 '%s' 검색"
+    contexts: ["selection"]
+    onclick: (info) ->
+      $$wordSearcher.searchWord(info.selectionText, sendWordSearched)

src/coffee/common/analytics.coffee

@@ -4,16 +4,31 @@
 - 스크립트를 추가하면 해당 페이지 뷰 코드를 전달한다.
 - 지표를 수집하고 싶은 버튼 엘리먼트에 `data-analytics-event="category:action:label"` 속성을 추가하면,
   클릭 시 지표를 수집한다.
-- `$$analytics.track(eventString)`로 직접 호출할 수 있다.
+- `$$analytics.trackEvent(eventString)`로 직접 호출할 수 있다.
 ###
 @define 'analytics', ($$message) ->
+  _referer = location.href
+
   # 이벤트 정보를 백그라운드로 전송한다.
-  # @param {String} eventString 이벤트 문자열 '카테고리:액션:레이블'
-  sendTrackingRequested = $$message.createSenderToExtension 'A:trackingRequested'
+  # @param {Object} data
+  # @param {String} data.eventString 이벤트 문자열 '카테고리:액션:레이블'
+  # @param {String} data.referrer 요청이 발생한 페이지 URL
+  sendEventTrackingRequested = $$message.createSenderToExtension 'A:eventTrackingRequested'
+
+  # 페이지 정보를 전송한다.
+  # @param {String} pageUrl
+  sendPageTrackingRequested = $$message.createSenderToExtension 'A:pageTrackingRequested'
 
   $(document).on 'mousedown', '[data-analytics-event]', (e) ->
     $target = $(e.currentTarget)
-    sendTrackingRequested($target.attr('data-analytics-event'))
+    sendEventTrackingRequested
+      eventString: $target.attr('data-analytics-event')
+      referrer: _referer
 
   @exports =
-    track: sendTrackingRequested
+    trackEvent: (eventString) ->
+      sendEventTrackingRequested
+        eventString: eventString
+        referrer: _referer
+
+    trackPage: sendPageTrackingRequested

src/coffee/common/newBadge.coffee

@@ -0,0 +1,42 @@
+###
+공지사항 처리를 위해 뉴 뱃지
+###
+@define 'newBadge', ($$storage) ->
+
+  _currentVersion = chrome.runtime.getManifest().version
+  _isVersionDifferent = false
+
+  showNewBadge = ->
+    chrome.browserAction.setBadgeText
+      text: 'N'
+    $('[data-new-badge]').show()
+
+  hideNewBadge = ->
+    chrome.browserAction.setBadgeText
+      text: ''
+
+  # 버전이 다를 경우 뉴 뱃지를 보여준다.
+  # 뱃지의 스타일은 각 뷰에서 처리하되, 기본값은 display:none; 처리한다.
+  $$storage.get('version').then (version) ->
+    console.log '>>>>', version, _currentVersion
+    unless version is _currentVersion
+      console.log '헐?'
+      _isVersionDifferent = true
+
+      # 백그라운드 페이지일 경우, 브라우저 액션의 뱃지를 보여주고 컨텐트일 경우 문서를 검색한다.
+      if location.pathname is '/_generated_background_page.html'
+        showNewBadge()
+      else
+        $(->
+          $('[data-new-badge]').show()
+        )
+
+  @exports =
+    # 저장된 키 값을 최신 버전으로 업데이트한다.
+    # 브라우저 액션의 뉴 뱃지를 제거한다.
+    # 컨텐츠들은 닫으면 없어지므로 그대로 둔다.
+    updateToCurrentVersion: ->
+      if _isVersionDifferent
+        $$storage.set('version', _currentVersion).then ->
+          hideNewBadge()
+          _isVersionDifferent = false

src/coffee/content/actionWatcher.coffee

@@ -65,7 +65,10 @@
   onMouseDown (e) ->
     _startX = e.pageX
     _startY = e.pageY
-    sendOutsideClicked()
+
+    # 뷰어 내에서 클릭이 일어난 경우엔, 이벤트를 전달하지 않는다.
+    unless location.pathname is '/viewer.html'
+      sendOutsideClicked()
 
   onMouseUp (e) ->
     diffX = Math.abs(_startX - e.pageX)
@@ -83,4 +86,4 @@
       selectionText = getSelectedText()
       if isValidWord(selectionText)
         sendWordSelected selectionText
-        $$analytics.track("actionWatcher:trigger:#{method}")
+        $$analytics.trackEvent("actionWatcher:trigger:#{method}")

src/coffee/content/viewer.coffee

@@ -1,7 +1,7 @@
 ###
 사전이 렌더링되는 페이지의 스크립트
 ###
-@define 'viewer', ($$message, $$options) ->
+@define 'viewer', ($$message, $$options, $$analytics) ->
   #--------------------
   # Functions
   #--------------------
@@ -65,6 +65,11 @@
         # angular 범위 밖에서 호출된 것이기 때문에 apply()를 호출해줘야 한다.
         $scope.$apply()
 
+        # 쿼리가 있을 경우, 페이지 렌더링 결과를 보낸다.
+        # `query` 파라미터는 애널리틱스에서 검색어 파악을 위해 사용한다.
+        if data.query
+          $$analytics.trackPage "viewer.html?query=#{data.query.replace(/\s/g, '+')}"
+
         window.scrollTo(0, 0); # 같은 윈도우를 재활용하므로 렌더링 이후에 스크롤을 초기화한다
         sendViewerRenderered document.documentElement.scrollHeight
         sendViewerRendereredToWindow document.documentElement.scrollHeight

src/coffee/content/viewerManager.coffee

@@ -7,7 +7,6 @@
 
   _$viewer = null
   _isAttached = false
-  _currentViewerHeight = 0
   _isViewerOpened = false
 
   # 뷰어가 닫히자 마자 다시 열리는 경우를 대비해 (사전 전환이나 빠른 클릭 등)
@@ -35,29 +34,17 @@
     _$viewer.addClass 'on'
     _isViewerOpened = true
 
-    attachExpandEvent()
     preventDocumentWheelEvent()
 
-  # 전체 내용을 보기 편하도록, 마우스를 올릴 때 창을 확장하고 닫을 때 기본 크기로 줄인다.
-  attachExpandEvent = ->
-    # 이벤트가 한 번만 실행되도록 하기 위해 기존 이벤트는 제거한다.
-    detachExpandEvent()
-    _$viewer.one 'mouseover', expandViewerHeight
-
-  detachExpandEvent = ->
-    _$viewer.off 'mouseover'
-
-  expandViewerHeight = ->
-    if _currentViewerHeight <= DEFAULT_HEIGHT
+  expandViewerHeight = (height) ->
+    if height <= DEFAULT_HEIGHT
       properHeight = DEFAULT_HEIGHT
     else
       maxHeight = Math.floor($(window).height() * 0.9)
-      properHeight = Math.min(_currentViewerHeight, maxHeight)
+      properHeight = Math.min(height, maxHeight)
 
     _$viewer.attr 'style', "height: #{properHeight}px !important"
 
-    $$analytics.track('viewer:expand')
-
   # 뷰어 iframe 위에서 스크롤 시, 문서의 스크롤을 막는다.
   preventDocumentWheelEvent = ->
     allowDocumentWheelEvent()
@@ -80,7 +67,6 @@
       _$viewer.removeClass 'on'
 
       restoreViewerHeight()
-      detachExpandEvent()
       allowDocumentWheelEvent()
     , 300
 
@@ -98,4 +84,4 @@
 
   whenWordSearched showViewer
   whenOutsideClicked hideViewer
-  whenViewerRendered setCurrentViewerHeight
+  whenViewerRendered expandViewerHeight

src/coffee/options/notice.coffee

@@ -0,0 +1,30 @@
+@define 'notice', ->
+  notices =
+    '3.0.1':
+      """
+      3.0.0으로 업데이트 후에, 변경된 점들에 대해 많은 분들이 의견을 주셨습니다.
+      일단, 그 중에 많은 분들께서 공통적으로 요청하셨던 것들과 중요 버그 몇 가지를 수정했습니다.
+
+      이번 버전은 3.0.1이고, 아래 사항이 업데이트되었습니다.
+
+        - 마우스 오른쪽 버튼 클릭으로 검색할 수 있는 기능 추가
+        - 오디오 버튼 클릭 시 뷰어가 닫히던 문제 해결
+        - 윈도우에서 사전 아이콘을 선택했을 때 바로 포커스가 가도록 수정
+        - 뷰어를 열었을 때 높이가 자동으로 조절되도록 수정
+
+      많은 분들이 PDF에서도 사전을 사용하고 싶다고 요청하셨는데요.
+      안타깝게도 크롬 브라우저의 정책으로 PDF에서는 더블클릭이나 드래그로 사전을 검색할 수 없습니다.
+      아쉬운 대로, 단어를 선택 후 마우스 오른쪽 버튼으로 검색하시거나, 주소창 옆 아이콘을 클릭해 검색하실 수 있습니다.
+
+      단축키 기능에 대해 요청하신 분들도 많았는데, 이 기능은 조금만 더 기다려주세요.
+      다음 수정 버전에 배포할 예정입니다.
+
+      정말 많은 분들이 좋은 의견을 주셨습니다. 감사합니다.^^
+      피드백 창구를 진작에 만들 걸 그랬나봐요.
+
+      사전 편리하게 사용하시고, 늘 즐거운 하루 되세요.
+      """
+
+  @exports =
+    getCurrentVersionNotice: ->
+      notices[chrome.runtime.getManifest().version]

src/coffee/options/optionPage.coffee

@@ -1,7 +1,7 @@
 ###
 옵션 페이지
 ###
-@define 'optionPage', ($$constant, $$message, $$options) ->
+@define 'optionPage', ($$constant, $$message, $$options, $$notice, $$newBadge) ->
   sendWordSelected = $$message.createSenderToExtension 'T:wordSelected'
 
   #--------------------
@@ -13,7 +13,6 @@
       $scope.menu = 'option'
 
     .controller 'optionCtrl', ($scope) ->
-      console.log 'xxx'
       $scope.TRIGGER_METHODS = $$options.TRIGGER_METHODS
       $scope.options = {}
       $scope.isChanged = false
@@ -51,3 +50,7 @@
       $('#todo').attr('src', $$constant.TODO_DOC_URL)
       $scope.bugUrl = $$constant.BUG_DOC_URL
       $scope.feedbackUrl = $$constant.FEEDBACK_DOC_URL
+      $scope.notice = $$notice.getCurrentVersionNotice()
+
+      # 업데이트 뱃지를 제거한다.
+      $$newBadge.updateToCurrentVersion()

src/coffee/popup/popup.coffee

@@ -1,7 +1,7 @@
 ###
 브라우저에 액션에 의해 노출되는 팝업 페이지
 ###
-@define 'popup', ($$message, $$analytics) ->
+@define 'popup', ($$message, $$analytics, $$storage) ->
   VIEWER_TOP_OFFSET = 46
   VIEWER_MAX_HEIGHT = 400
 
@@ -34,20 +34,33 @@
         properHeight = if height > VIEWER_MAX_HEIGHT then VIEWER_MAX_HEIGHT else height
         $('#viewer').height(properHeight)
         $(document.documentElement).css('height', "#{VIEWER_TOP_OFFSET + properHeight}px")
-
+
+      showNewBadge = ->
+        $$storage.get('version').then (version) ->
+          currentVersion = chrome.runtime.getManifest().version
+          unless version is currentVersion
+            $scope.$apply()
+
       whenWordSearched (data) ->
         sendWordSearchedToIframe data
 
       whenDicTypeToggled sendDicTypeToggled
       whenViewerRendered resizePopup
 
       $scope.search = ->
+        # 검색어가 없으면 아무 동작을 하지 않는다.
+        return unless $scope.query
+
         # 검색 결과 응답이 오기 전에 iframe을 보이도록 설정한다.
         # 그렇지 않으면, iframe의 scrollHeight가 부모의 scrollHeight를 리턴한다.
         $('.viewer-wrap').show()
         sendQuerySubmitted $scope.query
 
-        $$analytics.track('popup:search')
+        $$analytics.trackEvent('popup:search')
 
       $scope.selectQuery = ($event) ->
         $event.target.select() 
+
+      # 페이지가 로드되면 쿼리 엘리먼트에 포커스를 준다.
+      $('#query').focus()
+      showNewBadge()

src/less/optionPage.less

@@ -46,6 +46,19 @@
       background: #333;
       color: #fff;
     }
+
+    .new-badge {
+      display: none;
+      position: absolute;
+      font-size: 10px;
+      top: 17px;
+      right: 13px;
+      background: red;
+      color: #fff;
+      padding: 4px;
+      border-radius: 17px;
+      line-height: 7px;
+    }
   }
 
 }
@@ -158,4 +171,12 @@
     color: #fff;
     font-weight: bold;
   }
+
+  .notice {
+    margin-left: 20px;
+    padding: 20px;
+    background: #fff;
+    word-break: break-word;
+    border-radius: 5px;
+  }
 }