JS - Kody, triki, sztuczki

14 kwi 2019

Optymalizacja wordpress - pobranie js i css z hash

W poście poniżej opisałem jak usunąć "?ver" ze statycznych linków - [ tutaj ]
Po tej zmianie pojawił się problem z "cashowaniem" plików. Rozwiązanie jest dość proste.

W związku z tym że do generowania plików użyty został "gulp" oraz biblioteka "gulp-rev" za pomącą której do nazw plików dodany jest hash - style-ecf06381de.css

Problem jaki napotykamy to jak wczytać pliki css i js w wordpressie, które za każdym razem gdy zmieniamy coś we frontendzie mają inną nazwę.
Na potrzeby tego bloga stworzyłem poniższą funkcję.

/**
 * match file name
 */
function kodywig_matchFile($partOfName, $folder)
{
  $handler = get_template_directory() . '/assets/' . $folder;
    $openHandler = opendir($handler);
    while ($file = readdir($openHandler)) {
      if ($file !== '.' && $file !== '..') {
        if (preg_match("/^" . $partOfName . "\w+.(" . $folder . ")/i", $file, $name)) {
	  return $name[0];
	}
      }
    }
    closedir($openHandler);
}

Do powyższej funkcji przekazywane są dwa parametry, pierwszy $partOfName czyli cześć nazwy. Drugi parametr $folder czyli gdzie znajduje się nasz plik css|js

Najpierw budujemy ścieżkę do folderu, później w pętli wyciągamy nazwę pliku przez preg_match i zwracamy nazwę z dopasowania.

Czytaj dalej

7 wrz 2015

jQuery UI Autocomplete highlight

Mamy sobie prosty formularz. Do podpowiedzi użyjemy pluginu jquery autocomplite. Chcemy również dodać wyboldowanie podpowiedzi.
Dokładnie uzyskać taki efekt "meble, Waszawa" gdzie highlight jest zmianą koloru na czarny i wyboldowaniem.

<form id="search" action="/" method="GET" role="search">
  <fieldset>
    <input id="query" type="text" name="query" value="" maxlength="255" autocomplete="off"
      placeholder="Produkt, usługa, miasto, ulica"/>
    <button type="submit" id="button-search"></button>
  </fieldset>
</form>

A teraz trochę js 😉

Czytaj dalej

7 cze 2015

Gulp.js - menadżer zadań

Gulp.js jest menadżerem zadań opartym na node, w skrócie mamy kilka czynności do zrobienia w projekcie. I żeby nie robić tego ręcznie gulp wykonuje za nas te operacje.
Oprę się na małym projekcie, chcę less zamienić na css, skopiować do foldera css, zminimalizować i zmienić jego nazwę na style.min.css

1. Instalacja

Do tego oczywiście potrzebny najpierw jest zainstalowany node, jak już jest zainstalowany to instalujemy gulp.

// najpierw instalujemy globalnie - zainstaluje się w folderze C:\Users\Uzytkownik\AppData\Roaming\npm\node_modules\gulp

npm install -g gulp

// następnie instalujemy lokalnie w moim wypadku wchodzimy do D:\xampp\htdocs\test-gulp i tam instalujemy gulp jak i pluginy

npm install gulp --save-dev

Teraz aby móc z gulp skorzystać należy utworzyć plik konfiguracyjny gulpfile.js - musi być on umieszczony w katalogu głównym naszego projektu.

W naszym projekcie będziemy korzystać z gulp-less, gulp-minify-css oraz gulp-rename możemy je zainstalować pojedynczo jak i za jednym razem jak kto woli.

// wszystko instalujemy lokalnie

npm install gulp-less gulp-minify-css gulp-rename install --save-dev

Struktura naszego projektu:
mamy folder "test-gulp" w nim foldery css oraz less, w less jest plik style.less 🙂
W test-gulp znajduje się plik gulpfile.js (nasze taski) oraz package.json (plik generujemy automatycznie lub ręcznie 😉 - zawiera on dependencies itd.)

test-gulp/
|  css/
|  less/
|  |  style.less
gulpfile.js -- ad3
package.json -- ad2

Czytaj dalej

26 lip 2008

Wyświetlenie referrera strony w JS

<SCRIPT LANGUAGE="JavaScript">
  <!--
 document.write(":" + document.referrer.substring(0,255))
//-->
</SCRIPT>

26 lip 2008

Dodawanie dynamiczne tabeli do komórki innej tabeli

<HTML>

  <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Author" CONTENT="">
    <SCRIPT LANGUAGE="JavaScript">
      function ukryjtab(id) {

        var element = document.getElementById(id);
        while (element.firstChild) {
          element.removeChild(element.firstChild);
        }
      }
      function dodajtab(id) {

        var element = document.getElementById(id);
        var tbl = document.createElement("table");
        var tblBody = document.createElement("tbody");

        for (var j = 0; j < 2; j++) {
          var row = document.createElement("tr");
          for (var i = 0; i < 2; i++) {

            var cell = document.createElement("td");
            var cellText = document.createTextNode("komórka nr: " + j + ", kolumna nr: " + i);
            cell.appendChild(cellText);
            row.appendChild(cell);
          }
          tblBody.appendChild(row);
        }

        tbl.appendChild(tblBody);
        element.appendChild(tbl);
        tbl.setAttribute("border", "1");
      }
    </SCRIPT>
  </HEAD>

  <BODY>
    <TABLE border="1">
      <TR>
         <TD>fiat stilo</TD>
         <TD>1,6</TD>
         <TD><input type="button" name="wybor" value="pokaz" onClick="dodajtab(2)"><input type="button" name="wybor"
            value="ukryj" onClick="ukryjtab(2)"></TD>
      </TR>
      <TR>
         <TD colspan="3" id="2"></TD>
      </TR>
      <TR>
         <TD>fiat panda</TD>
         <TD>1,1</TD>
         <TD>&amp;nbsp;</TD>
      </TR>
    </TABLE>
  </BODY>

</HTML>