12 maj 2023

Jak animować wysokość od 0 do auto?

Mamy div który ma wysokość ustawioną na height: 0;. Po kliknięciu chcemy aby była "gładka" animacja pojawiąjącego się tekstu. Jest jeden problem, po toggle wysokość jest ustawiana na auto i zamiast "gładkiego" przejścia z wysokości 0 do auto, div po prostu się pojawia zamiast zwiększyć wysokość dynamicznie.
Powiesz, a czemu nie ustawić wysokości na konkretną "height i tutaj jest problem bo strona jest dynamiczna, więc wysokość tego diva z tekstem również jest dynamiczna.

Dobra najpierw pokażę jak to wygląda normalnie:

<button>Toggle</button>
<div class="expandable">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio
  deserunt porro nostrum dignissimos eveniet aperiam harum! Illum et eos
  atque. Dolorem, dolor deleniti impedit quibusdam nobis numquam quae
  maiores itaque? Lorem ipsum dolor sit, amet consectetur adipisicing elit.
  Et harum, minus, odit impedit id soluta nostrum nemo repudiandae fugit
  voluptatum voluptatibus fugiat quas cupiditate necessitatibus sunt numquam
  adipisci libero, deserunt distinctio deleniti quo eligendi?
</div>
30 kwi 2023

window resize i optymalizacja

Czasami się zdarza, że musimy użyć "resize" 😉
Nie będę się rozpisywał co to jest wystarczy zerknąć tutaj - resize
Poniżej przykład użycia, a także wywołania jakiejś randomowej funkcji.

// nasz funkcja
function jakasFunkcja() {
  if (window.innerWidth < 600) {
     // tutaj coś robimy
  }
  else {
     // tutaj coś robimy
  }
}

// wywołanie funkcji
window.addEventListener('resize', jakasFunkcja);
19 mar 2023

#shorts - dodanie data attribute do markera

Oj dawno mnie tutaj nie było 😉
Dzisiaj coś co ostatnio mi się bardzo przydało, a mianowicie dodanie data attribute do markera. Potrzebowałem kilka takich elementów.
A więc zacząłem od rozszerzenia funkcji divIcon.
Poniżej funkcja, która jest dość prosta. Używamy metody createIcon

const DataMarkers = L.DivIcon.extend({
  createIcon: function (oldIcon) {
    let divElement = L.DivIcon.prototype.createIcon.call(this, oldIcon);

    // w pętli dodajemy odpowiednie elementy do markera
    if (this.options.data) {
      for (let key in this.options.data) {
        divElement.dataset[key] = this.options.data[key];
      }
    }
    return divElement;
  },
});

L.dataDivIcon = (options) => new L.DivIcon(options);

export default DataMarkers;
18 lut 2022

#shorts - utworzenie dodatkowych miejsc w kontrolce sterującej

W leaflet domyślnie mamy dostępne cztery miejsca (cztery rogi mapy) w które możemy wstawić własne elementy lub zmienić pozycję już istniejących elementów np. zoom in/out.
Te miejsca to oczywiście [topleft, topright, bottomleft, bottomright], a co jeżeli chcemy stawić dodatkowy element ale na górze strony i na środku.

Oczywiście możemy to zrobić na wiele sposobów, np. dodając div do strony i przez position abolute i z-index wyśrodkować dany element. Wstrzyknąć element do leaflet-control-container.

10 lut 2022

#shorts - szybki update wersji biblioteki we wszystkich plikach

Mam zawsze problem z tym, że zapominam zmienić wersję biblioteki we wszystkich miejscach w których występuje wzmianka o niej.
Dopiero na koniec gdy wszystko już zakomitowałem na githuba okazuje się że czegoś znowu nie zmieniłem 😉

Postanowiłem temu zapobiec i stworzyłem sobie mały skrypt - version.js

Skrypt na wrzucam do foldera scripts w głównym folderze projektu. I za każdym razem wywołuję przez dodanie do package.json w sekcji script przy budowaniu produkcyjnym.

"scripts": {
  ...
  "prod": "yarn build && yarn sass:prod && yarn lib:version",
  "lib:version": "node ./scripts/version.js",
  ...
},