تنزيل annotate - annotate رمز المصدر

annotate

بيانات الموقع

1.0.0

تنزيل

علق

التعليق ونشر النص على الويب! تم إنشاء هذا المشروع لـ "دليل Latecomer (المحرر) إلى Crypto" ، ولكن يمكن استخدامه للتعليق على أي مستند نصي.

شاهد عرضًا حيًا على https://molly.github.io/annotate/.

كيفية استخدام

انسخ ملفات index.html و styles.css و annotate.js إلى مشروعك. يجب أن تحتاج فقط إلى تحرير ملف 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"> هذا الصف. كل جانب ثم لديه div مع فئة content وإما فئات quote أو note . quote هو النص الذي يتم تعليقه ، note مخصصة للشروح.

يتم وضع علامة على كل جزء من النص المميز في المصدر الأصلي (الجانب الأيسر) بعلامات <mark> . يجب أن تحتوي هذه السمة على سمة فريدة من نوع aria-details تتوافق مع id التعليقات التوضيحية ، والتي ستمكن من تمييز التركيز البصري عند النقر. يمكن أن يكون له أيضًا اختياريًا data-annotation-id لرقم التعليق التوضيحي ، للمساعدة في التمييز بين التعليقات التوضيحية عندما يكون هناك متعددة في قسم.

سيكون المقابل لعلامة <mark> div إما مع فئة annotation أو annotation-group على الجانب الأيمن (الأول للشروح الفردية ، والأخير للشروح المجمعة). يجب أن يكون لها role="comment" id يتطابق تمامًا مع قيمة aria-details الفريدة للنص المميز الذي يتوافق معه. كما هو الحال مع النص المميز ، يمكن أن يكون له data-annotation-id لرقم التعليق التوضيحي.

التعليقات التوضيحية المجمعة

ضمن مجموعة التعليقات التوضيحية ، سيكون هناك واحد أو أكثر من divs مع فئة annotation . يمكن أن تحتوي هذه على DIV مع commenter الفصل لتحديد الكاتب ، إذا كان هناك العديد من الشروط المتعددة التي تعمل على المستند. هذه لا تحتاج إلى role="comment أو data-annotation-id أو id لأنها متداخلة ضمن annotation-group مع تلك السمات.

في حالة التعليقات التوضيحية المتعددة داخل مجموعة التعليقات التوضيحية ، يمكن أن تظهر مكدسة مباشرة ، أو الخيوط (عرضًا بمستويات متزايدة من المسافة البادئة ، للإشارة إلى أنها ردود على بعضها البعض). لتعليقات الموضوع ، قم بتضمين فئة 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 >