Medium-szerű úszó műveleti menü létrehozása
A népszerűsége lebegő menük nőtt, különösen azért, mert a Medium.com divatba hozta a funkciót. Röviden, a lebegő művelet menü felbukkan amikor te válasszon néhány szöveget egy weboldalon. A menü a kijelölés közelében jelenik meg, különböző cselekvések megjelenítése amely lehetővé teszi a kiválasztott szöveg gyors formázását, kiemelését vagy megosztását.
Ebben a bemutatóban megmutatom, hogyan jelenjen meg egy műveleti menü a kiválasztott szövegrészlethez egy weboldalon. Akciómenünk lehetővé teszi a felhasználók számára, hogy csevegni a kiválasztott szöveget követői.
1. Hozza létre a HTML-t
A az indító HTML egyszerű, csak szükségünk van néhány szöveget a felhasználó kiválaszthatja. A demóhoz használom “A Hart és a Vadász” esti mese mint szöveg.
A Hart és a Vadász
A Hart egyszer…
...
2. Hozza létre a műveleti menü sablont
vagyok a HTML-kód hozzáadása az akciómenübe tartozik belül a elem. Bármi is van az címke nem jelenik meg böngészők által, amíg hozzá nem adják a dokumentumhoz JavaScript használatával.
Ne hagyjon szükségtelen helyet benne címke, mivel ez megzavarhatja az akciómenü elrendezését, miután beillesztette a dokumentumba. Ha akarod, további gombok hozzáadása belül #shareBox további lehetőségekért.
3. Hozza létre a CSS-t
A CSS a #shareBox Inline konténer így megy:
#shareBox szélesség: 30px; magasság: 30px; pozíció: abszolút;
A pozíció: abszolút; a szabály megengedi bennünket helyezze el a menüt, bárhol is akarja az oldalon.
Én is az akció gomb belsejében #shareBox a háttérszín és a kép, valamint a ::után pszeudoelem I hozzáadott egy háromszöget a lefelé mutató nyílhoz.
#shareBox> gomb szélesség: 100%; magasság: 100%; háttérszín: # 292A2B; határ: nincs; határ-sugár: 2px; vázlat: nincs; kurzor: mutató; háttérkép: url ('share.png'); háttér-ismétlés: nincs ismétlés; háttérpozíció: központ; háttérméret: 70%; #shareBox> gomb :: után pozíció: abszolút; tartalom: "; border-top: 10px szilárd # 292A2B; bal oldali: 10px szilárd átlátszó; határ-jobb: 10px szilárd átlátszó; bal: 5px; felső: 30px; 4. Add eseménykezelőket a JS-el
Tovább kell lépnünk a JavaScript-hez eseménykezelők hozzáadása a mousedown és MouseUp események rögzítse az elejét és a végét a szöveg kiválasztása.
Ön is végezhet kutatást egyéb kiválasztási események mint például selectstart és használd őket egéresemények helyett (ami ideális lenne, de a böngésző támogatása még nem túl jó).
Is hivatkozás hozzáadása hoz elemet a querySelector () eljárás.
document.addEventListener ('mousedown', onMouseDown); document.addEventListener ('mouseup', onMouseUp); var temp = document.querySelector ('# shareBoxTemplate'); funkció onMouseDown () funkció onMouseUp () 5. Törölje a korábbi beállításokat
Ban,-ben mousedown eseményre végezzen néhány tisztítást, vagyis törölje az összes korábbi kiválasztást és a hozzá tartozó műveleti menüt.
funkció onMouseDown () document.getSelection (). removeAllRanges (); var shareBox = document.querySelector ('# shareBox'); if (shareBox! == null) shareBox.remove (); A getSelection () A módszer a Kiválasztás tárgy a szöveg tartományait képviseli a felhasználó és a removeAllRange () eljáráseltávolítja az összes tartományt ugyanabból Kiválasztás objektum, így minden korábbi kiválasztás törlése.
6. Jelenítse meg a műveleti menüt
Ez az idő alatt MouseUp esemény, amikor meg fogjuk tenni erősítse meg, ha szöveges választás történt és tegyen további lépéseket.
funkció onMouseUp () var sel = document.getSelection (), txt = sel.toString (); ha (txt! == "") var range = sel.getRangeAt (0); ha (range.startContainer.parentElement.parentElement.localName === "cikk" || range.startContainer.parentElement.localName === "cikk") // a cikk néhány szövege lett kiválasztva
Szerezd meg a kiválasztott szöveges karakterláncot hívja a toString () módszer Kiválasztás tárgy. Ha a kijelölt szöveg nem üres, menjen előre kapja meg az első tartományt tól Kiválasztás tárgy.
Hatótávolság az a kiválasztott részt dokumentumot. Általában a felhasználók a egyetlen kiválasztás csak a többszörös (a ctrl / cmd gomb megnyomásával), így csak az első tartomány objektumot (a 0-as indexben) kapja meg a getRangeAt (0).
Miután megkapta a hatótávolságot, nézze meg, hogy a kiválasztás egy olyan helyen kezdődött-e, amelyik az a cikken belül. A startContainer a tartomány tulajdonsága visszatér a DOM csomóponthoz ahonnan a kiválasztás megkezdődött.
Néha (amikor válasszon egy bekezdésben), értéke csak a szöveg csomópont, ebben az esetben annak szülőelem lesz és a szülő elem lesz (a minta kódjában ebben a bejegyzésben).
Más alkalommal, amikor kiválasztja több bekezdésben, a startContainer lesz és a szülő csomópontja lesz . Ezért a két összehasonlítás a második ha feltétel a fenti kódban.
Egyszer a ha az állapot halad, itt az ideje keresse meg a műveleti menüt a sablonból, és adjuk hozzá a dokumentumhoz. Helyezze az alábbi kódot a második ha nyilatkozat.
document.body.insertBefore (document.importNode (temp.content, true), temp);));
A importNode () eljárás külső csomópontokat küld vissza a külső dokumentumokból (a mi esetünkben a csomópontok ). Amikor a második paraméterrel hívjákigaz), az importált elem / csomópont lesz jönnek a gyermek elemei.
Beilleszthet #shareBox bárhol a dokumentum testében, Hozzáadtam a sablonelem előtt.
7. Helyezze el a műveleti menüt
A műveleti menüt szeretnénk elhelyezni pont felette & a kiválasztott terület közepén. Ehhez, kapja meg a téglalap értékeit a kiválasztott területet a getBoundingClientRect () egy elem méretét és pozícióját visszatérítő módszer.
Ezután frissítse a felső és balra értékei #shareBox a téglalap értékei alapján. Az új számításokban felső és balra értékeket használtam ES6 sablon literál.
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) - 30px)'; 8. Funkció hozzáadása
Most, hogy hozzáadtuk a kiválasztott szöveghez tartozó műveleti menüt, itt az ideje, hogy elkészítse a kiválasztott szöveget elérhető a menüopciókhoz úgy, hogy bizonyos lépéseket tudjunk végrehajtani rajta.
A kijelölt szöveg hozzárendelése a a megosztási gomb egyéni tulajdonsága hívott 'ShareTxt' és adjunk hozzá egy mousedown eseményfigyelő a gombhoz.
var shareBtn = shareBox.querySelector ('gomb'); shareBtn ['shareTxt'] = txt; shareBtn.addEventListener ('mousedown', onShareClick, igaz); A igaz paraméter addEventListener () megakadályozza a mousedown esemény a buborékolásról.
Benne onShareClick () eseménykezelő, mi helyezze be a kiválasztott szöveget egy tweetbe a shareTxt a gomb tulajdonságai.
funkció onShareClick () window.open ('https://twitter.com/intent/tweet?text=$ this.shareTxt'); this.remove (); document.getSelection (). removeAllRanges () Egyszer a gombra kattint, azt teszi, amit tennie kell, majd távolítsa el magát az oldalról. Azt is törölje a választást a dokumentumban.
Forráskód és demó
Az alábbi Codepen demóban teszt hogyan működik az akció menü. Megtalálhatja a teljes forráskód a Github repóban.
