Jak poprawnie użyć gradientu w Beautify Icon?

pytanie zadane 6 czerwca 2020 w HTML i CSS przez Kubs Mądrala (5,190 p.)

Witajcie,

próbuje użyć gradient w tym kodzie i otrzymuje błąd

An identifier or keyword cannot immediately follow a numeric literal.

L.BeautifyIcon.icon({
                        icon: 'video-camera',
                        background: -webkit-linear-gradient(#9c47fc, #356ad2),
....

1 odpowiedź

odpowiedź 6 czerwca 2020 przez ScriptyChris Mędrzec (190,190 p.)

To raczej powinno być przypisane jako string (w cudzysłowiach):

-webkit-linear-gradient(#9c47fc, #356ad2)

komentarz 6 czerwca 2020 przez Kubs Mądrala (5,190 p.)

Witaj,

rzeczywiście, masz rację. Próbuję zamienić jednolity kolor ikony textColor: '#526b2d' na gradient. Wiesz może jak to zrobić?

I jeszcze druga sprawa - gdy mam jeden rodzaj ikon, który chce odróżnić jeden od drugiego kolorami i używać dla różnych miejsc, to jak to zrobić?

komentarz 6 czerwca 2020 przez Kubs Mądrala (5,190 p.)

@JSHolic, background: -webkit-linear-gradient ('#9c47fc, #356ad2') w ten sposób nie działa.

komentarz 6 czerwca 2020 przez ScriptyChris Mędrzec (190,190 p.)

Całą wartość umieść w cudzysłowach, a nie tylko parametry gradientu:

background: '-webkit-linear-gradient(#9c47fc, #356ad2)',

komentarz 6 czerwca 2020 przez Kubs Mądrala (5,190 p.)

Nie pokazuje błędu ale też nie ma pożądanego efektu. Czegoś chyba brakuje. Próbuje wzorować się na tym przykładzie:

https://codepen.io/ismailfarooq/pen/wewNxx

Ja próbuję zmienić textColor: '#8d6120' na gradient.

 icon: 'video-camera',
                        iconShape: 'marker',
                        borderColor: '#8d6120',
                        textColor: '#8d6120',

komentarz 6 czerwca 2020 przez ScriptyChris Mędrzec (190,190 p.)

Z jakiej biblioteki korzystasz? Może tej: https://github.com/masajid390/BeautifyMarker? Żeby sprawdzić dlaczego gradient się nie pokazuje trzeba by testować na całym kodzie (albo przynajmniej jego testowalnym fragmencie).

komentarz 6 czerwca 2020 przez Kubs Mądrala (5,190 p.)

Tzn. sprawdzać w konsoli przeglądarki czy coś związane z debuggowaniem?

komentarz 6 czerwca 2020 przez ScriptyChris Mędrzec (190,190 p.)

No jeśli debugowałbyś L.BeautifyIcon.icon, to dowiesz się co ta metoda robi pod spodem i możliwe, że wtedy namierzysz dlaczego gradient nie został nadany - czy to wina biblioteki, czy czegoś innego.

Tutaj masz przykład jak debugować kod w Chrome i Firefox.

komentarz 6 czerwca 2020 przez Kubs Mądrala (5,190 p.)

Ok, wykonuje te kroki z linka o Chrome. Czy mógłbyś mi pomóc co wykonać dalej bo od tego momentu

Call debugger from your code to pause on that line. This is equivalent to a line-of-code breakpoint, except that the breakpoint is set in your code, not in the DevTools UI.

console.log('a');
console.log('b');
debugger;
console.log('c');

już nie rozumiem gdzie mam ten console.log kod umieścić. Na razie zaznaczyłem tą problematyczną linię kodu background czerwoną kropką.

komentarz 6 czerwca 2020 przez ScriptyChris Mędrzec (190,190 p.)

Jeśli debugujesz kod, to nie musisz korzystać z console.log, bo informacje o scop'ie możesz odczytać z panelu "Scope", najeżdżając myszką na zmienne w kodzie lub wypisując je w konsoli - nie mam na myśli przez console.log, tylko po prostu wpisując w konsoli dane wyrażenie (nazwa zmiennej, funkcji czy np. "2 + 3") i wykonując je wciskając klawisz "enter".

Jeśli postawiłeś breakpoint w kodzie, to uruchom ten kod - wykonaj w aplikacji (na stronie) akcje, która wywołują ten kod (np. kliknięcie w przycisk lub zwyczajne załadowanie aplikacji). Wtedy debugger powinien zatrzymać kod w zaznaczonym punkcie i będziesz mieć dostęp do informacji o scope, callstacku itd.

komentarz 6 czerwca 2020 przez Kubs Mądrala (5,190 p.)

Bardzo doceniam twoje wyjaśnienia. Są na tyle szczegółowe, że można się zorientować co i jak. Wyrzuca mi jednak dość dużo błędów więc odpuszczę i zostawię kolor jednolity.

Dzięki serdeczne i do kolejnego postu.

komentarz 6 czerwca 2020 przez ScriptyChris Mędrzec (190,190 p.)

Wyrzuca mi jednak dość dużo błędów więc odpuszczę

Wyrzuca Ci błędy podczas debugowania? :)

komentarz 11 lipca 2020 przez Kubs Mądrala (5,190 p.)

Witam ponownie.

Chciałbym wznowić temat bo wciąż nie radzę sobie z tą zmianą na gradient.

Może w między czasie natknąłeś się na proste rozwiązanie tego problemu.

Dzięki.

komentarz 11 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)

Skoro próbowałeś debugować problem, to możesz odpowiedzieć na moje ostatnie pytanie. ;)

komentarz 11 lipca 2020 przez Kubs Mądrala (5,190 p.)

Próbuje robić wg twojej podpowiedzi. Ale nie moge tam wstawic tej linijki kodu background: linear-gradient poniewaz odrzuca mi ją z automatu - zółty trójkąt z przekresleniem kodu.

Nie moge tez wstawic w plik index ponieważ nie mozna go edytowac w tym systemi kontroli źródła F12.

komentarz 11 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)

Pokaż screen z tym żółtym trójkątem.

Nie moge tez wstawic w plik index ponieważ nie mozna go edytowac w tym systemi kontroli źródła F12

A w którym miejscu (która zakładka devtoolsów) próbujesz go edytować?

komentarz 11 lipca 2020 przez Kubs Mądrala (5,190 p.)

Te dwa przypadki, zerknij proszę

https://imgur.com/a/01GWagF

komentarz 11 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)

Na drugim screenie background kończy się jakimiś trzema kropkami po przecinku - to nie jest prawidłowa wartość, dlatego jest to przekreślone.

Co do pierwszego screena, czy postawienie tam breakpointa zatrzymuje kod?

komentarz 11 lipca 2020 przez Kubs Mądrala (5,190 p.)

Poprawiłem i bez tych kropek coś poszło, ale miałem na myśli nie wypełnienie markera gradientem, a jego właściwość borderColor czyli tylko linii z jednolitego koloru na gradient. O takim markerze myślę (tylko bez tego kółeczka w środku):

https://icons-for-free.com/map+marker+icon-1320166582858325800/

A co do pytanie o break pointy to wychodzi tak, że mogę je postawić tylko w tych miejscach, a nie tam gdzie są właściwości obiektu:

https://imgur.com/a/tVF6tl6

Nie wiem też jak to potem uruchomić, żeby zatrzymał się na tym break point. Naciskam na ekranie strony, ale nic się nie dzieje.

komentarz 11 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)

Nie wiem też jak to potem uruchomić, żeby zatrzymał się na tym break point.

"Wyklikaj" te rzeczy na stronie, które spowodują wykonanie kodu z zaznaczonym breakpointem. Gdy kod się zatrzyma to wejdź do środka metody L.BeautifyIcon.icon (klawisz F11 lub trzecia strzałka od lewej na panelu debuggera) i przejdź aż do momentu utworzenia i dodania stylu, żeby sprawdzić dlaczego nie dodaje borderColor przekazanego w obiekcie konfiguracyjnym.

komentarz 11 lipca 2020 przez Kubs Mądrala (5,190 p.)

Ok, zrobię tak.

Tymczasem próbuję jeszcze zmienić ten background na border color, ale zobacz, też jakoś nie działa. Odznaczyłem border color i wstawiłem ten z gradientem.

https://imgur.com/a/2GLLtor

komentarz 11 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)

Właściwość border-color jako wartość przyjmuje od 1 do 4 kolorów - nie ustawisz mu gradientu.

komentarz 11 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)

Jeśli chcesz zasymulować border z gradientem, to możesz np. owinąć element w parenta, który będzie nieco większy (wyższy i szerszy) i nadać mu gradient jako tło.

https://css-tricks.com/gradient-borders-in-css/

[edycja]

Jest jeszcze ciekawe CSSowe property border-image. Tylko, że z tego co widzę, to mimo szerokiego wsparcia, na niektórych przeglądarkach jest trochę zbugowane.

komentarz 11 lipca 2020 przez Kubs Mądrala (5,190 p.)

Fakt, kurcze szkoda.

Wykonam pod wieczór debuggowanie jak zaleciłeś i dam znać.

Dziękuję Ci jak zwykle bardzo serdecznie za pomoc.

komentarz 11 lipca 2020 przez Kubs Mądrala (5,190 p.)

@JSHolic, Hmm..czyli pewnie wtedy ten border zrobi się ciut grubawy na tym markerze. Ciekawe jaki byłby minimalny już widoczny. Bo wyobraź sobie kilkadziesiąt markerów niedaleko siebie. Jeśli border będzie gruby to wtedy będzie to źle wyglądać gdy popatrzy się na to kilkadziesiąt sztuk.

No chyba, że coś źle rozumiem.

komentarz 11 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)

Dla border-image możesz regulować szerokość. Przy sposobie z owinięciem elementu w parenta z gradientem możesz ustawić szerokość i wysokość parenta, regulując tym samym grubość widocznego gradientu (przez różnicę wielkości parenta i elementu w środku).

komentarz 11 lipca 2020 przez Kubs Mądrala (5,190 p.)

Ok..parenta czyli czego dokładnie? Czy to chodzi o dziedziczenie? Jeśli tak to jak to się odbywa w tym przypadku markera?

komentarz 11 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)

Po prostu rodzic Twojego elementu w DOM.

<div class="parent">
  Rodzic
  <div class="child">Element - dziecko</div>
</div>

komentarz 11 lipca 2020 przez Kubs Mądrala (5,190 p.)

Tak, już wiem.

Wiesz co, skopiowałem teraz z devtoolsa

background: -webkit-linear-gradient(#9c47fc, #356ad2);

ale okazuje się, że w kodzie właściwość background to backgroundColor więc napisałem:

backgroundColor: "-webkit-linear-gradient(#f7f6f6, #c8635ac4)"

i teraz nie pojawia mi się zupełnie nic. Widzę tylko pustą mapę pod markerem, a po markerze ani śladu - zupełnie brak tła.

Ps. zmieniłem też borderWidth na "0" to wtedy działam tylko z background

komentarz 11 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)

Trudno mi określić przyczynę problemu nie znając tej biblioteki. Debugowanie kodu powinno odpowiedzieć na pytanie, dlaczego nie ustawiają się te style.

komentarz 11 lipca 2020 przez Kubs Mądrala (5,190 p.)

Ten wiersz kodu:

backgroundColor: "-webkit-linear-gradient(#f7f6f6, #c8635ac4)"

w ogóle nie pojawi mi się w devtools, nie mam nawet jak tego sprawdzić.

Co jeszcze mógłbym zrobić? Podałbym Ci chętnie tą bibliotekę do przejrzenia, ale nie wiem dokładnie jak to zrobić.

komentarz 11 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)

Może nie zapisałeś tego pliku? Nie ma tego wiersza w pliku w devtoolsach? Odświeżałeś z pominięciem cache: Ctrl + F5 lub Ctrl + Shift + R? Spróbuj wyłączyć i włączyć devtoolsy (wciśnij dwukrotnie F12). Jeśli nadal nie zaskoczy, to z devtoolsów otwórz ten plik w nowej karcie i tam odśwież Ctrl + F5 - musi zaskoczyć.

komentarz 11 lipca 2020 przez Kubs Mądrala (5,190 p.)

W pliku index backgroundColor jest widoczny, a już w stylach nie ma tej właściwości.

https://imgur.com/a/FV9Wjuf

komentarz 11 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)

Jak już mówiłem - debugowanie powinno odpowiedzieć na pytanie dlaczego tak się dzieje.

komentarz 11 lipca 2020 przez Kubs Mądrala (5,190 p.)

Stawiam break point i po odświeżeniu i naciśnięciu step into od razu odsyła mnie do tej kolejnej linij kodu:

https://imgur.com/a/whWds0V

komentarz 11 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)

To jest ciało tej metody, a ona korzysta z kolejnej - wewnętrznej metody tej biblioteki - więc trzeba wejść w nią (F11) i patrzeć co się dzieje dalej - bardzo możliwe, że kilka(naście/dziesiąt) razy trzeba będzie wejść do jakiejś metody żeby sprawdzić co tam się dzieje. Jeśli wejdziesz w metodę, w której widzisz że nie dzieje się nic z tym obiektem options, to wychodzisz z metody Shift + F11 (lub czwarta strzałka od lewej - btw. poczytaj sobie podlinkowane docsy do debuggera, tam jest opisane mnóstwo przydatnych opcji i możliwości całych devtoolsów, nie tylko samego debuggera). Jeśli nie chcesz wchodzić do metody/funkcji, to wciskasz F10 (drugi przycisk od lewej), wtedy przechodzisz do następnej linijki kodu. Obserwuj przy tym call stack (żebyś wiedział jak głęboko w wywołaniach funkcji/metod jesteś, a klikając na poprzednie/następne tzw. ramki możesz przechodzić do ich funkcji sprawdzając np. co tam jest w scope). W trakcie debugowania patrz co dzieje się z obiektem options aż do momentu, gdy docelowy element będzie wstawiony do DOM.

Na tym w skrócie polega debugowanie. ;) Z własnego doświadczenia mogę Ci powiedzieć, że na początku wygląda to strasznie, ale im częściej będziesz to robić, tym szybciej nabierzesz wprawy i szukanie bugów będzie wygodniejsze.

komentarz 11 lipca 2020 przez Kubs Mądrala (5,190 p.)

Wow,

czyli teraz mam tej linijki kodu szukać w tym Scope?

https://imgur.com/a/VsYM5u8

komentarz 11 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)

Nie, scope pokazuje Ci zmienne dostępne w danej funkcji/metodzie lub bloku (jeśli zmienna jest deklarowana słówkiem let lub const). To co nie jest zadeklarowane w funkcji, ale w jej parent scope'ach, będzie widoczne w "property" scopu o nazwie "Closure" (będzie ich tyle, ile jest parent scope'ów funkcji), a to co jest globalne w "property" scopa "Global". W panelu "scope" obserwujesz (i modyfikujesz, w razie potrzeby) wartości zmiennych.

Ty natomiast potrzebujesz dowiedzieć się najpierw, gdzie i jak jest używany obiekt options, czyli powinieneś za pomocą opcji F10, F11 (i ewentualnie Shift + F11) - lub analogicznie odpowiednich strzałek w panlu debuggera - wykonywać kolejne linijki kodu (w razie potrzeby wchodząc do środka metody/funkcji), aby móc dotrzeć do miejsca, gdzie obiekt options jest używany (odczytywane jakieś property, robione przypisania lub jest przekazywany gdzieś dalej). I dopiero wtedy sprawdzać w panelu "scope" co się dzieje z propertisami, które mu przypisałeś.

komentarz 11 lipca 2020 przez Kubs Mądrala (5,190 p.)

Wspaniale wyjasniasz tematykę, za co Ci jestem bardzo wdzięczny. Jeszcze dużo w tych kwestiach nie rozumiem, ale pomału jutro będę sobie działał w tym debuggerze.

Dzięki serdeczne za dziś. Dam jutro znać na bieżąco co i jak.

komentarz 12 lipca 2020 przez Kubs Mądrala (5,190 p.)

@JSHolic, Witaj,

znalazłem w scope tą właściwość backgroundColor wg. twoich wskazówek

https://imgur.com/a/gPMw3lJ

a jak ją teraz sprawdzić dlaczego nie działa?

komentarz 12 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)

Znalazłeś ją będąc w call stacku na początku ścieżki, którą ta biblioteka wykonuje wywołując metodę L.BeautifulIcon.icon (tu gdzie skończyłeś wczoraj) , a powinieneś iść dalej aż znajdziesz w kodzie miejsca, w którym coś na tej zmiennej się dzieje.

komentarz 12 lipca 2020 przez Kubs Mądrala (5,190 p.)
edycja 12 lipca 2020 przez Kubs

Rozumiem. Wybacz pytanie: "Czyli od tego miejsca używać F10, a gdy zobaczę w scope backgroundColor to mam wchodzić w to czyli F11?"

Bo tyle tu jest tego kodu w scope, że trudno mi się połapać co i jak.

komentarz 12 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)

W scope obserwuj zmienną options, a jeśli ona zostanie przekazana do jakiejś funkcji, to śledź argument (po nazwie), do którego została przypisana. Np.:

function fn(config) {
  // tutaj zmienna options jest dostępna pod argumentem config
  // jest to ta sama referencja, ale z inną nazwą
}

fn(options); // zawołanie funkcji z przekazaniem jej zmiennej options

komentarz 12 lipca 2020 przez Kubs Mądrala (5,190 p.)

Ok,czyli w oknie Sources szukam wywołania funkcji getCategory z argumentem d, tak?

https://imgur.com/a/VfC7UYJ

komentarz 12 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)

Argument d to jest jakiś string a nie obiekt options, więc gdzieś się chyba zgubiłeś. :) Może zapodaj linka do dema, to pomogę Ci z tym debugowaniem.

[edit]

Chyba, że to jest screen z Twojego kodu, a nie wnętrza biblioteki, no to musisz wejść do środka metody L.BeautifyIcon.icon (już tam chyba ze dwa razy byłeś), bo tam jest argument options.

komentarz 12 lipca 2020 przez Kubs Mądrala (5,190 p.)

Tak, to jest mój kod. Tutaj chyba znalazłem ten obiekt options z argumentami:

https://imgur.com/a/7Efx0KY

Czy to jest to?

komentarz 12 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)

Tak. Tam widać ify, więc musisz przejść po kodzie (klawisz F10, albo drugi przycisk od lewej), albo możesz postawić breakpoint w dowolnej linii (żeby było szybciej) i przejść bezpośrednio do niej (pierwszym przyciskiem lub F8) żeby znaleźć czy gdzieś jest brane pod uwagę options.backgroundColor, jeśli nie to może być jakaś pętla pokroju for..in lub Object.keys po zmiennej options, albo może być przekazywana do innej funkcji, gdzie to się dzieje.

W każdym razie powinieneś docelowo dotrzeć do miejsca, gdzie tworzona jest ikona lub ustawiane są jej style na podstawie propertisów, które Ty przekazałeś i sprawdzić dlaczego backgroundColor nie jest nadawane.

komentarz 12 lipca 2020 przez Kubs Mądrala (5,190 p.)

Nie znalazłem nic typu option.backgroundColor, ale jest utworzony jakiś iconDiv z iconDiv.style.backgroundColor. Może to jest to.

 iconDiv.className = 'beautify-marker ';

                if (options.iconShape) {
                    iconDiv.className += options.iconShape;
                }

                if (options.customClasses) {
                    iconDiv.className += ' ' + options.customClasses;
                }

                iconDiv.style.backgroundColor = options.backgroundColor;
                iconDiv.style.color = options.textColor;
                iconDiv.style.borderColor = options.borderColor;
                iconDiv.style.borderWidth = options.borderWidth + 'px';
                iconDiv.style.borderStyle = options.borderStyle;

komentarz 12 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)

Ok, to może podaj linka do działającego dema, żeby można było przetestować. ;)

komentarz 12 lipca 2020 przez Kubs Mądrala (5,190 p.)

Sprobuje 'wykleic' czesc dotyczącą tego markera. Na jakiej stronie umiescic ten kod bys mogl przetestować?

komentarz 12 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)

CodePen lub JSFiddle. Jeśli wstawisz kod HTML, CSS i JavaScript w osobne bloczki, to testowalna wersja wygeneruje się automatycznie i będzie dostępna pod przyciskami w prawym górnym rogu posta.

komentarz 12 lipca 2020 przez Kubs Mądrala (5,190 p.)

Kurde, męczę się wycinając ten kod ale nic wyrzuca błędy odpalony w CodePen.

Tymczasem dobrnąłem do tego

https://imgur.com/a/DQaUWcm

i tutaj jest option.backgroundColour, ale w scope już są inne wartości właściwości. Czyli gdzieś zmiana nastąpiła po drodze..?

komentarz 12 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)

Możliwe, że po drodze były użyta domyślna wartość dla backgroundColor, zawsze to jakaś poszlaka. Wypadało by znaleźć gdzie to się dzieje. :)

nic wyrzuca błędy odpalony w CodePen

Nie rozumiem, na CodePen rzuca błędami? Może nie podpiąłeś właściwie biblioteki. Umieść normalnie w komentarzu bloczki z minimalnym kodem HTML, CSS i JavaScript w taki sposób, żeby to można było przetestować.