אתם הולכים להיות מופתעים עד כמה HTML יכול להיות חכם ולבצע משהו כל כך מורכב, שאם אנחנו היינו רוצים ליצור את זה לבד , היה לנו ממש קשה.
נגיד שאנחנו רוצים איזור טקסט שאפשר להדביק בתוכו תמונות או קבצי תמונות, טקסטים צבעוניים או עם קו תחתון, במידה שהיינו מייצרים את זה לבד היינו כנראה צריכים ליצור דינמית שדות טקסט ואיזורים לקבלת קובץ ובמידה שיש טקסט מעוצב אז לפרק את העיצוב וליצור תגית מתאימה וכו'.
אבל…. זה יותר מידי בלגן, במקום זה אפשר לעשות את הדבר הבא:
<div class="textbox-wrapper"> <h2>ASK ME SOMETHING:</h2> <div id="ask-me" class="textbox" contenteditable="true" ondrop="lockIt(event)" onkeydown="lastPTag(event)"> <p></p> </div> </div>
contenteditable
זה המאפיין שהולך לעשות לנו את כל העבודה בשבילנו, ברגע שהוא נמצא על תגית , הדפדפן שלנו נותן מאחורי הקלעים תמיכה כמעט בכל מה שאנחנו רוצים, כתיבה של טקסט, הדבקה של צילומי מסך, טקסט מעוצב… והכל תוך כדאי ייצור של תגיות מתאימות לכל דבר.
עם זאת, הוא לא מושלם ולכן אנחנו צריכים לשפץ אותו קצת. כבררת מחדל, כתיבה של שורות חדשות מאוכסנות בתוך תגית DIV,
השורה הראשונה הרבה פעמים נכתבת בגוף התגית המארחת ולא בתוך תגית משלה.
והוא לא מקבל קבצים אלא רק צילומי מסך.
נוסיף ondrop כדאי לאפשר קבצים, אחרי זה נתמודד איתם.
ולבסוף onkeydown כדאי לטפל בבעיה.
אפשר לראות שבתוך ה-DIV יש P ששם אנחנו רוצים לכתוב ואותה אנחנו רוצים לקבל כאשר מתחילים שורה חדשה.
העיצוב:
.textbox-wrapper { border: 1px solid black; border-radius: 10px; padding: 10px; } .textbox-wrapper p { margin: 0; padding: 2px 8px; min-height: 1rem; } .textbox { background-color: rgb(134, 200, 202); border-radius: 10px; font-size: 18px; } .textbox img { padding: 8px; display: block; width: 100%; box-sizing: border-box; }
אין כאן יותר מידי על מה לדבר
עכשיו לחלק האחרון והחשוב
function lockIt(dropEv) { dropEv.preventDefault(); const domTargetEle = dropEv.srcElement; const imgArr = []; if (dropEv.dataTransfer.items) { // browser support [...dropEv.dataTransfer.items].forEach(element => { if (element.kind === 'file') { const f = element.getAsFile(); if (f.type.startsWith('image')) { imgArr.push(f); } } }); } else { [...dropEv.dataTransfer.files].forEach(ele => { if (f.type.startsWith('image')) { imgArr.push(f); } }) } imgArr.forEach(image => { const reader = new FileReader(); reader.onloadend = () => { const imgEle = document.createElement('img'); imgEle.src = reader.result; domTargetEle.appendChild(imgEle) } reader.readAsDataURL(image); }) } function lastPTag(keyEvent) { if ((keyEvent.keyCode === 8 || keyEvent.key === "Backspace") && keyEvent.target.children.length === 1 && (keyEvent.target.children[0].innerHTML === '' || keyEvent.target.children[0].innerHTML === '<br>' || keyEvent.target.children[0].innerHTML === undefined)) { keyEvent.preventDefault(); } }
פונקצית lockit מטפלת בקבצים, כאשר משתמש מוסיף קובץ לאיזור הכתיבה שלנו, הפונקציה מופעלת, בודקת אם מדובר בקובץ מסוג של תמונה ובהנחה שכן, מיצרת תגית IMG, הופכת את הקובץ למידע בבסיס 64 ביט ומוסיפה אותו ל-SRC.
בדיוק כמו במקרה של צילום מסך. שורה 5 ושורה 14 נועדו לתמיכה של דפדפנים שונים, אבל הפעולה היא אותה פעולה.
בשני המקרים התמיכה היא במערך של קבצים כך שהמשתמש יכול לגרור לתוך האזור מספר קבצים באותו זמן והפונקציה תדע להתמודד.
שורה 3 תופסת את האלמנט העוטף, ששם מתבצעת הפעולה, המטרה היא לייצר את תגיות ה-IMG בתוך התגית המתאימה, התגית ששם בוצע ההוספה של הקבצים.
פונקציה lastPTag :
זו פונקציה חשובה מאוד שבאה לתקן בעיה שהזכרנו בהתחלה. כאשר מבצעים מחיקה ומגיעים למצב שתגית ה-P היחידה ריקה ואז מוחקים שוב, המעטפת נשארת ריקה לגמרי.
זה אומר שכאשר המשתמש יחזור לכתוב בה משהו, הדפדפן ייצר תגית DIV ולא P כמו שרצינו.
לכן, אנחנו מאתרים ותופסים כל מחיקה ואם זו התגית P היחידה בתוך המעטפת והיא ריקה או שיש בה BR או שהתוכן שלה לא מוגדר, אנחנו מונעים את פעולת המחיקה וכך משאירים את זה שתמיד תהיה לפחות תגית P אחת בתוך המעטפת שלנו.
זה הכל, יחסית קצר וקליל, מוזמנים לשחק עם זה ולאחר מכן לחשוב מה הייתם צריכים לעשות אם זה לא היה קיים 😱