Jak utworzyć Medium-Like Floating Action Menu
Popularność pływające menu akcji rośnie, zwłaszcza, że Medium.com wprowadziło tę modę do mody. W skrócie, pływające menu akcji wyskakuje kiedy ty wybierz jakiś tekst na stronie internetowej. Menu pojawi się w pobliżu wyboru, pokazano różne działania które umożliwiają szybkie formatowanie, wyróżnianie lub udostępnianie wybranego tekstu.
W tym samouczku pokażę ci, jak wyświetlić menu akcji dla wybranego fragmentu tekstu na stronie internetowej. Nasze menu akcji umożliwi użytkownikom Tweetnij wybrany tekst do swoich zwolenników.
1. Utwórz kod HTML
The starter HTML jest prosty, potrzebujemy tylko jakiś tekst użytkownik może wybrać. Do dema użyję “The Hart and the Hunter” bajka do poduszki jako przykładowy tekst.
The Hart and the Hunter
The Hart był kiedyś…
…
2. Utwórz szablon menu akcji
Jestem dodawanie kodu HTML należący do menu akcji wewnątrz a element. Cokolwiek jest w środku tag, to nie zostanie zrealizowane przez przeglądarki, dopóki nie zostanie dodany do dokumentu używając JavaScript.
Nie zostawiaj niepotrzebnej przestrzeni w środku tag, ponieważ może to zakłócić układ menu akcji po jego wstawieniu do dokumentu. Jeśli chcesz, dodaj więcej przycisków wewnątrz #shareBox więcej opcji.
3. Utwórz CSS
CSS dla #shareBox pojemnik inline w ten sposób:
#shareBox width: 30px; wysokość: 30px; pozycja: absolutna;
The pozycja: absolutna; reguła pozwoli nam umieść menu w dowolnym miejscu na stronie.
Stylizowałem także przycisk akcji w środku #shareBox z kolorem tła i obrazem oraz w jego ::po pseudoelement I dodano trójkąt dla strzałki w dół.
#shareBox> przycisk szerokość: 100%; wysokość: 100%; kolor tła: # 292A2B; granica: brak; border-radius: 2px; zarys: brak; cursor: pointer; background-image: url ('share.png'); powtórz tło: nie powtarzaj; pozycja tła: środek; rozmiar tła: 70%; #shareBox> button :: after position: absolute; zawartość: "; border-top: 10px solid # 292A2B; border-left: 10px solid transparent; border-right: 10px solid transparent; left: 5px; top: 30px; 4. Dodaj obsługę zdarzeń za pomocą JS
Przechodząc do JavaScript, musimy dodaj obsługę zdarzeń dla mousedown i mouseup wydarzenia do uchwycić początek i koniec wyboru tekstu.
Możesz także prowadzić badania inne wydarzenia selekcji Jak na przykład selectstart i używaj ich zamiast zdarzeń myszy (co byłoby idealne, ale na razie ich obsługa przeglądarki nie jest zbyt dobra).
Również dodaj odniesienie do element za pomocą querySelector () metoda.
document.addEventListener ('mousedown', onMouseDown); document.addEventListener ('mouseup', onMouseUp); var temp = document.querySelector ('# shareBoxTemplate'); function onMouseDown () function onMouseUp () 5. Wyczyść poprzednie wybory
w mousedown wydarzenie, my wykonać kilka czynności porządkowych, tj. usuń wszystkie wcześniejsze zaznaczenia i przynależne menu akcji.
function onMouseDown () document.getSelection (). removeAllRanges (); var shareBox = document.querySelector ('# shareBox'); if (shareBox! == null) shareBox.remove (); The getSelection () metoda zwraca a Wybór obiekt reprezentujące zakresy tekstu aktualnie wybrany przez użytkownika i removeAllRange () metodausuwa wszystkie zakresy z tego samego Wybór obiekt, więc czyszczenie poprzedniego wyboru.
6. Wyświetl menu akcji
To podczas mouseup wydarzenie, kiedy będziemy potwierdź, czy dokonano wyboru tekstu i podjąć dalsze działania.
funkcja onMouseUp () var sel = document.getSelection (), txt = sel.toString (); if (txt! == "") var range = sel.getRangeAt (0); if (range.startContainer.parentElement.parentElement.localName === "artykuł" || range.startContainer.parentElement.localName === "article") // wybrany został tekst w artykule
Pobierz wybrany ciąg tekstowy dzwoniąc do toString () metoda Wybór obiekt. Jeśli wybrany tekst nie jest pusty, idź dalej i zdobądź pierwszy zakres od Wybór obiekt.
Zasięg jest wybrany fragment dokumentu. Zazwyczaj użytkownicy dokonują pojedynczy wybór tylko, nie wiele (naciskając klawisz ctrl / cmd), więc po prostu pobierz pierwszy obiekt zakresu (o indeksie 0) z zaznaczenia za pomocą getRangeAt (0).
Po znalezieniu zasięgu sprawdź, czy wybór rozpoczął się od miejsca, które jest wewnątrz artykułu. The startContainer właściwość zakresu zwraca węzeł DOM skąd rozpoczęła się selekcja.
Czasami (kiedy ty wybierz w obrębie akapitu), jego wartość to tylko węzeł tekstowy, w takim przypadku element macierzysty będzie i rodzicem element będzie (w przykładowym kodzie w tym poście).
Innym razem, gdy wybierzesz w wielu akapitach, startContainer będzie a jego węzeł macierzysty będzie . Stąd dwa porównania w sekundę Jeśli warunek w powyższym kodzie.
Kiedyś Jeśli warunek mija, czas na pobierz menu akcji z szablonu i dodaj go do dokumentu. Umieść poniższy kod wewnątrz drugiego Jeśli komunikat.
document.body.insertBefore (document.importNode (temp.content, true), temp);));
The importNode () metoda zwraca węzły z dokumentów zewnętrznych (w naszym przypadku węzły z ). Gdy jest wywoływany z drugim parametrem (prawdziwe), importowany element / węzeł będzie chodź z jego elementami potomnymi.
Możesz wstawić #shareBox w dowolnym miejscu w dokumencie, Dodałem go przed elementem szablonu.
7. Umieść menu akcji
Chcemy umieścić menu akcji zaraz nad & w środku wybranego obszaru. Aby to zrobić, uzyskać wartości prostokąta wybranego obszaru za pomocą getBoundingClientRect () metoda, która zwraca rozmiar i położenie elementu.
Następnie zaktualizuj Top i lewo wartości #shareBox na podstawie wartości prostokąta. W obliczeniach nowego Top i lewo wartości, z których korzystałem Literały szablonów 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) - 30px)'; 8. Dodaj funkcjonalność
Teraz, gdy dodaliśmy menu akcji w pobliżu zaznaczonego tekstu, nadszedł czas, aby zaznaczyć wybrany tekst dostępne dla opcji menu abyśmy mogli wykonać na nim pewne działania.
Przypisz zaznaczony tekst do a niestandardowa właściwość przycisku udostępniania nazywa „shareTxt” i dodaj a mousedown słuchacz zdarzeń do przycisku.
var shareBtn = shareBox.querySelector ('button'); shareBtn ['shareTxt'] = txt; shareBtn.addEventListener ('mousedown', onShareClick, true); The prawdziwe parametr addEventListener () zapobiega mousedown wydarzenie z bulgotania.
W środku onShareClick () obsługa zdarzeń, my wstaw zaznaczony tekst do tweeta uzyskując dostęp do shareTxt właściwość przycisku.
function onShareClick () window.open ('https://twitter.com/intent/tweet?text=$ this.shareTxt'); this.remove (); document.getSelection (). removeAllRanges () Kiedyś przycisk zostanie kliknięty, robi to, co ma robić, a następnie usuwa się ze strony. To też będzie usuń zaznaczenie w dokumencie.
Kod źródłowy i demo
W demie Codepen poniżej możesz test jak działa menu akcji. Możesz również znaleźć pełny kod źródłowy w naszym repozytorium Github.
