annotate 다운로드 - annotate 소스 코드 다운로드

annotate

웹사이트 데이터

1.0.0

다운로드

주석

웹에서 텍스트를 주석을 달고 게시하십시오! 이 프로젝트는 "(편집 된) Latecomer 's Guide to Crypto"용으로 만들어졌지만 모든 텍스트 문서에 주석을 달 때 사용할 수 있습니다.

https://molly.github.io/annotate/에서 라이브 데모를보십시오.

사용 방법

index.html , styles.css 및 annotate.js 파일을 프로젝트에 복사하십시오. 스타일 또는 JavaScript 동작을 변경하지 않는 한 index.html 파일 만 편집하면됩니다. 이 프로젝트에는 JavaScript가 필요 하지 않으므로 javaScript를 남기려면 annotate.js 파일을 생략하고 <script src="./annotate.js"></script> 태그를 html 파일에서 제거하십시오. screenshots 폴더에는 데스크탑 ( index-desktop.png )과 mobile ( index-mobile.png ) 뷰에서 인덱스 페이지의 전체 크기 스크린 샷이 있으므로 HTML이 생성하는 내용을 확인할 수 있습니다.

문서의 각 섹션은이 기본 구조를 따릅니다.

 < section class =" group " >
  < div class =" content quote " >
    Text that's being < mark data-annotation-id =" 1 " aria-details =" unique-comment-id " > annotated </ mark > .
  </ div >
  < div class =" content note " >
    < div class =" annotation " role =" comment " data-annotation-id =" 1 " id =" unique-comment-id " >
      < div class =" commenter " > Commenter name </ div >
      Comment text.
    </ div >
  </ div >
</ section >

그리고 생산 :

세부

텍스트의 각 섹션은 왼쪽 및 오른쪽 섹션으로 연속으로 캡처됩니다. <section class="group"> 요소는이 행을 나타냅니다. 그런 다음 각면에는 content 클래스와 quote 또는 note 클래스가있는 DIV가 있습니다. 인용문은 텍스트가 quote 이 달리는 것입니다. note 주석을위한 것입니다.

원래 소스 (왼쪽)의 강조 표시된 텍스트의 각 부분에는 <mark> 태그가 표시됩니다. 이들은 주석의 id 에 해당하는 고유 한 aria-details 속성이 있어야하므로 클릭에 대한 시각적 초점이 강조 될 수 있습니다. 또한 섹션에 다수가있을 때 주석을 구별하기 위해 선택적으로 주석을 달성하기 위해 data-annotation-id 가질 수 있습니다.

<mark> 태그에 해당하는 것은 오른쪽에 annotation 또는 annotation-group 클래스가있는 div입니다 (단일 주석의 경우 전자, 후자는 그룹화 된 주석의 경우). 이들은 role="comment" 과 그에 해당하는 강조 표시된 텍스트의 고유 한 aria-details 값과 정확히 일치하는 id 있어야합니다. 강조 표시된 텍스트와 마찬가지로, 주석을 달성하기 위해 data-annotation-id 가질 수 있습니다.

그룹화 된 주석

주석 그룹 내에는 annotation 클래스와 하나 이상의 DIV가 있습니다. 여기에는 문서에 여러 개의 주석기가있는 경우 작가를 식별하기 위해 클래스 commenter 와 DIV가 포함될 수 있습니다. 이들은 해당 속성과 함께 annotation-group 내에 중첩되어 있기 때문에 role="comment , data-annotation-id 또는 id 필요하지 않습니다 .

주석 그룹 내에서 다중 주석이있는 경우, 직접 쌓거나 나사산이 나타날 수 있습니다 (증가 된 수준의 압입으로 렌더링하여 서로 대답한다는 것을 나타냅니다). 스레드 주석에 두 번째 주석에 thread 클래스를 포함하십시오 (첫 번째 답변). 후속 답변은 thread-x 클래스로 표시되어야하며 여기서 x 2-10 : thread-2 , thread-3 , ..., thread-10 의 압입 레벨입니다. thread 클래스를 생략하여 압입없이 스택에 여러 주석이 렌더링됩니다.

 < section class =" group " >
  < div class =" content quote " >
    Text that's being < mark data-annotation-id =" 1 " aria-details =" unique-comment-id " > annotated </ mark > .
  </ div >
  < div class =" content note " >
    < div class =" annotation-group " role =" comment " data-annotation-id =" 1 " id =" unique-comment-id " >
      < div class =" annotation " >
        A comment with indented responses.
      </ div >
      < div class =" annotation thread " > 
        A reply
      </ div >
      < div class =" annotation thread-2 " > 
        A second reply
      </ div >
    </ div >
  </ div >
</ section >