كيفية إنشاء المتوسطة مثل العائمة العمل القائمة
شعبية قوائم العمل العائمة كان في ارتفاع ، خاصةً منذ جعل موقع Medium.com الميزة رائجة. باختصار ، القائمة العمل العائمة إعلان منبثق عندما انت حدد بعض النص على صفحة الويب. تظهر القائمة بالقرب من التحديد, تظهر الإجراءات المختلفة التي تتيح لك تنسيق النص المحدد أو تمييزه أو مشاركته بسرعة.
في هذا البرنامج التعليمي ، سأريك كيفية عرض قائمة الإجراء لمقتطف النص المحدد على صفحة الويب. قائمة الإجراء لدينا ستمكن المستخدمين من سقسقة النص المحدد لأتباعهم.
1. إنشاء HTML
ال بداية HTML بسيط, نحن بحاجة فقط بعض النصوص يمكن للمستخدم اختيار. للعرض ، سأستخدم “هارت والصياد” قصة ما قبل النوم كنص عينة.
هارت والصياد
كان هارت مرة واحدة ...
...
2. إنشاء قالب قائمة العمل
أنا إضافة كود HTML ينتمون إلى قائمة العمل داخل جزء. كل ما هو داخل الوسم لن يتم تقديمها بواسطة المتصفحات حتى يتم إضافتها إلى المستند باستخدام جافا سكريبت.
لا تترك أي مساحة غير ضرورية داخل ال ، لأن ذلك قد يزعج تخطيط قائمة الإجراء بمجرد إدراجه في المستند. إن أردت, إضافة المزيد من الأزرار في داخل #shareBox لمزيد من الخيارات.
3. إنشاء CSS
المغلق ل #shareBox حاوية مضمنة غني عن مثل هذا:
#shareBox width: 30px؛ الارتفاع: 30 بكسل ؛ الموقف: مطلق ؛
ال الموقف: مطلقة؛ حكم سوف تسمح لنا ضع القائمة في أي مكان نريد على الصفحة.
أنا أيضا على غرار زر العمل في الداخل #shareBox مع لون الخلفية والصورة وفي ::بعد العنصر الزائف الأول إضافة مثلث لسهم لأسفل.
#shareBox> button width: 100٪؛ الارتفاع: 100 ٪ ؛ لون الخلفية: # 292A2B ؛ الحدود: لا شيء ؛ نصف قطر الحدود: 2 بكسل ؛ الخطوط العريضة: لا شيء ؛ المؤشر: المؤشر ؛ صورة الخلفية: url ('share.png') ؛ تكرار الخلفية: عدم التكرار ؛ خلفية الموقف: مركز. حجم الخلفية: 70 ٪ ؛ #shareBox> button :: after position: absolute؛ المحتوى: "؛ الحد الأعلى: 10px صلب # 292A2B ؛ الحد الأيسر: 10px صلب شفاف ؛ الحد الأيمن: 10px صلب شفاف ؛ اليسار: 5px ؛ أعلى: 30px ؛ 4. إضافة معالجات الأحداث مع JS
الانتقال إلى JavaScript ، نحتاج إلى إضافة معالجات الأحداث ل mousedown و mouseup أحداث ل التقاط البداية والنهاية اختيار النص.
يمكنك أيضا إجراء البحوث ل أحداث اختيار أخرى مثل selectstart واستخدامها بدلا من أحداث الماوس (الأمر الذي سيكون مثاليًا ولكن حتى الآن لا يعد دعم المتصفح الخاص بهم جيدًا جدًا).
أيضا أضف مرجع إلى عنصر باستخدام querySelector () طريقة.
document.addEventListener ('mousedown'، onMouseDown)؛ document.addEventListener ('mouseup'، onMouseUp)؛ var temp = document.querySelector ('# shareBoxTemplate')؛ دالة onMouseDown () دالة onMouseUp () 5. مسح التحديدات السابقة
في ال mousedown الحدث ، ونحن سوف أداء بعض التنظيف, أي امسح أي تحديد سابق وقائمة إجراءات الانتماء.
دالة onMouseDown () document.getSelection (). removeAllRanges ()؛ var shareBox = document.querySelector ('# shareBox')؛ if (shareBox! == null) shareBox.remove ()؛ ال getSelection () طريقة إرجاع أ اختيار موضوع يمثل نطاقات النص المحدد حاليا من قبل المستخدم و removeAllRange () طريقةيزيل جميع النطاقات من نفسه اختيار الاعتراض ، وبالتالي مسح أي اختيار سابق.
6. عرض قائمة العمل
إنه خلال mouseup الحدث ، عندما سنقوم تأكيد ما إذا كان قد تم تحديد النص واتخاذ المزيد من الإجراءات.
function onMouseUp () var sel = document.getSelection ()، txt = sel.toString ()؛ if (txt! == "") var range = sel.getRangeAt (0)؛ if (range.startContainer.parentElement.parentElement.localName === "article" || range.startContainer.parentElement.localName === "article") // تم تحديد نص في المقالة
الحصول على سلسلة النص المحدد عن طريق الاتصال على إلى سلسلة() طريقة لل اختيار موضوع. إذا لم يكن النص المحدد فارغًا ، فتابع الحصول على المجموعة الأولى من اختيار موضوع.
نطاق هل الجزء المحدد من الوثيقة. عادة ، سوف يقوم المستخدمون اختيار واحد فقط ، وليس متعددة (عن طريق الضغط على مفتاح ctrl / cmd) ، لذلك فقط احصل على كائن النطاق الأول (في الفهرس 0) من التحديد باستخدام getRangeAt (0).
بمجرد الحصول على النطاق ، معرفة ما إذا كان التحديد بدأ من مكان داخل المقال. ال startContainer إرجاع خاصية النطاق العقدة DOM من حيث بدأ الاختيار.
في بعض الاحيان (عندك حدد ضمن فقرة) ، قيمتها هي مجرد عقدة النص, في هذه الحالة عنصر الأصل سوف يكون والدا سوف يكون العنصر (في نموذج التعليمة البرمجية في هذا المنشور).
في أوقات أخرى ، عند تحديد عبر فقرات متعددة, ال startContainer سوف يكون والعقدة الأصل سيكون . ومن هنا فإن مقارنات في الثانية إذا الشرط في الرمز أعلاه.
مرة واحدة في إذا حالة يمر ، حان الوقت ل جلب قائمة العمل من القالب وإضافته إلى المستند. ضع الكود أدناه داخل الثانية إذا بيان.
document.body.insertBefore (document.importNode (temp.content، true)، temp)؛))؛
ال importNode () طريقة إرجاع العقد من المستندات الخارجية (في حالتنا ، العقد من ). عندما يتم استدعاء مع المعلمة الثانية (صحيح) ، والعنصر / عقدة المستوردة تأتي مع عناصرها الفرعية.
يمكنك إدراج #shareBox في أي مكان في نص الوثيقة, لقد أضفته قبل عنصر القالب.
7. ضع قائمة الإجراءات
نريد أن نضع قائمة الإجراءات أعلى اليمين و في منتصف المنطقة المحددة. لنفعل ذلك, الحصول على القيم المستطيل المنطقة المحددة باستخدام getBoundingClientRect () الطريقة التي ترجع حجم وموضع العنصر.
ثم ، قم بتحديث أعلى و اليسار قيم #shareBox بناء على قيم المستطيل. في حسابات الجديد أعلى و اليسار القيم ، لقد استفدت من ES6 قالب الحرفي.
var rect = range.getBoundingClientRect ()؛ var shareBox = document.querySelector ('# shareBox')؛ shareBox.style.top = 'calc ($ rect.top px - 38px)'؛ shareBox.style.left = 'calc ($ rect.left px + calc ($ rect.width px / 2) - 30 بكسل)'؛ 8. إضافة وظيفة
الآن وبعد أن أضفنا قائمة الإجراء بالقرب من النص المحدد ، حان الوقت لعمل النص المحدد متاح لخيارات القائمة حتى نتمكن من القيام ببعض الإجراءات على ذلك.
تعيين النص المحدد إلى خاصية مخصصة لزر المشاركة مسمي "shareTxt" وأضف mousedown مستمع الحدث إلى الزر.
var shareBtn = shareBox.querySelector ('button')؛ shareBtn ['shareTxt'] = txt؛ shareBtn.addEventListener ('mousedown'، onShareClick، true)؛ ال صحيح المعلمة من addEventListener () يمنع mousedown حدث من فقاعة.
داخل ال onShareClick () معالج الحدث ، ونحن إدراج النص المحدد في تغريدة عن طريق الوصول إلى shareTxt خاصية الزر.
وظيفة onShareClick () window.open ('https://twitter.com/intent/tweet؟text=$ this.shareTxt') ؛ this.remove ()؛ document.getSelection (). removeAllRanges () مرة واحدة في تم النقر فوق الزر, يفعل ما يفترض القيام به ، ثم يزيل نفسه من الصفحة. سوف كذلك مسح أي اختيار في المستند.
شفرة المصدر و التجريبي
في Codepen التجريبي أدناه ، يمكنك اختبار كيف تعمل القائمة العمل. يمكنك أيضا العثور على شفرة المصدر الكامل في جيثب الريبو.
