Javascript – Programowanie

JS – $.ajax – console.error

$.ajax({
        url: '/api/products/get-all.json',
        type: 'GET',
        dataType: 'json',
        success(resp) {
            if(resp.resp.error) {
                $("#feedback").text(resp.resp.error).addClass('text-danger');
                return;
            }
            $("#feedback").text(resp.resp.success).addClass('text-success');
        },
        error(e){
           var message = "";
           if(e.responseJSON !== 'undefined') message = e.responseJSON.message;
           if(e.responseText !== 'undefined') message = e.responseText.message;
           console.log(message ); 
        }
    });

OpenAI – Javascript – starter

import OpenAI from "openai";
const client = new OpenAI();

const response = await client.responses.create({
model: "gpt-4.1",
input: "Write a one-sentence bedtime story about a unicorn.",
});

console.log(response.output_text);

Javascript – formatowanie liczb finansowych

var tc = new Intl.NumberFormat('pl-PL', { style: "currency", currency: "PLN" }).format(total_costs);

tc: 2 136 703,77 zł

var bilans = new Intl.NumberFormat('pl-PL').format(bilans);

bilans: 7 324 432,32

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat

Javascript iterowanie po obiektach

Obiekt iterujemy jak tablicę

Czytaj dalej Javascript iterowanie po obiektach

Javascript delay()

function delay(ms) {
  return new Promise(resolve => {
    setTimeout(resolve, ms);
  });
}

await delay(3000);

Debouncing – opóźnienie wykonania funkcji

Przy wpisywaniu nazwy podczas wyszukiwania – opóźniamy wysłanie zapytania do momentu zakończenia wprowadzania tekstu – zwykle 400ms.

Definicja funkcji debounce w pliku – /js/common.js

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

function debounce(func, timeout = 400){
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
}

Użycie debounce w kodzie js

// Zmieniono domyślne opóźnienie 400 na 500ms
const debounceName = debounce((str) => liveSearchCompanyByName(str), 500);

$("#fullname").on('keyup', function(){
  var name_str = $(this).val().trim();
  var name_len  = name_str.length;
  if( name_len >= 3 ) {
    debounceName(name_str);
  } else{
    clearNameResults();
  }
});

Obsługa wyszukiwania / filtrowania (url.searchParams)

// Uruchomienie debouncera z timeoutem 600ms
// Jeśli jest fraza ustaw searchParam, jeśli nie usuń
const debounceNumber = debounce( (s_number) => {
  if(s_number) {
    url.searchParams.delete('page');
    url.searchParams.set('s_number', s_number);
  } else {
    url.searchParams.delete('s_number');
  }
  location.href = url.toString();
}, 600);

// wpisywanie w pole wyszukiwania (s_number)
$("#s_number").on('keyup', function(){ debounceNumber( $(this).val() ); });

Zamiana przecinka na kropkę w polach finansowych

Javascript – parseFloat nie akceptuje przecinka ’,’

netto = parseFloat( ($(this).val()).replace(',', '.') );

$("#netto").val( netto.toFixed(2) )

Ajax -onKeyUp – filter table rows

Filtrowanie wierszy tabeli – dopasowanie do 2 kolumn

Czytaj dalej Ajax -onKeyUp – filter table rows

Ajax – cakephp4 – onKeyUp – wyszukiwanie projektów po nazwie

Wyszukiwanie projektów po numerze (ciąg znaków) Ajax Czytaj dalej Ajax – cakephp4 – onKeyUp – wyszukiwanie projektów po nazwie

JS – DATE

Znacznik czasu:

var start_date = $('#start-date').val();     // 2023-02-19
var end_date   = $('#end-date').val();       // 2023-02-20

const start_tz = Date.parse(start_date);    // 1686268800000 
const end_tz   = Date.parse(end_date);      // 1686182400000

if(end_tz < start_tz) {
   alert('Błędna data zakończenia. Popraw !!!');
   $('#end-date').val('');
}

Month picker

Plugin jquery-ui wybierający miesiące/lata

Czytaj dalej Month picker

E-mail regex JS

const VALID_EMAIL_REGEX = new RegExp('^[a-zA-Z0-9.!#$%&\'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$')

if( VALID_EMAIL_REGEX.test(email) ) { 
  ...
}

https://html.spec.whatwg.org/multipage/forms.html#valid-e-mail-address

Oczyszczanie URL

Usuwanie slash’y, query string, wszystkie małe litery

 const path = req.url.replace(/\/?(?:\?.*)?$/, '').toLowerCase()

Przełączanie URL – query string – filtrowanie po wielu parametrach

W filtrowaniu treści – wybieramy z listy opcję – wybrane ID, nazwy przekazujemy jako parametery query string. Pozwala to na filtrowanie po wielu parametrach niezależnie.

let url = new URL(location.href);
let onChangePostion = function(){

    url.searchParams.delete('page');                              // 1 strona

    var position_name = $(this).find(':selected').text().trim();  // Nazwa
    var position_id   = $(this).val();                            // id

    if(position_id) {
        url.searchParams.set('position_id', position_id);
    } else {
        url.searchParams.delete('position_id');
    }
    location.href = url.toString();
    return false;
};
$("#filter-position").on('change', onChangePostion);

Czytaj dalej Przełączanie URL – query string – filtrowanie po wielu parametrach

Przyrostki rozmiaru pliku

Konwertuje wielkość pliku w bajtach na wielokrotność i dodaje przyrostek

let nBytes = 3838383838388394994;   // wielkość w bajtach
let sOutput = "";

const aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];

for (nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
      sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
}

readAsDataURL – obsługa obrazków w JS

Obrazki można pobrać i przesłać dalej lub przetworzyć np. wyświetlić ikonkę

Czytaj dalej readAsDataURL – obsługa obrazków w JS

FormData – wysyłka formularza za pomocą AJAX

FormData() – zestaw par key/value – typ danych może być file, blog lub string.

https://developer.mozilla.org/en-US/docs/Web/API/FormData

Czytaj dalej FormData – wysyłka formularza za pomocą AJAX

Drag and drop

Obsługa przeciągnij i upuść

https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications

Czytaj dalej Drag and drop

JS – konwersja B na KB, MB, GB, TB,…

Przelicza bajty na wielokrotności

let nBytes = 22323848499494949494;
let sOutput = nBytes + " bytes";

const aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];

for (nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
    sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
}

CryptoJS

Szyfrowanie z poziomu Javascript

Czytaj dalej CryptoJS

Obrazki wstawiane są z względnymi ścieżkami do dokumentów. Jest to problem podczas generowania PDF który pobierze obrazek tylko jeśli src zawiera pełny adres URL. W takim przypadku należy dodać linie:

relative_urls : false,
remove_script_host: false,
convert_urls : true,

pierwsza linia powinna wystarczyć.

To może być problemem w przypadku zmiany domeny (przenoszenia serwisu) – obrazki wciąż będą wskazywały na stary URL.

/webroot/css/jquery.datetimepicker.css 
/webroot/lib/jquery.datetimepicker.full.min.js

templates/layout/default.ctp

head
<link rel="stylesheet" href="/css/jquery.datetimepicker.css">

footer
<?= $this->Html->script('/lib/jquery.datetimepicker.full.min.js') ?>

dołączyć plik inicjalizujący np. common.js

jQuery.datetimepicker.setLocale('pl');
jQuery(".datetimepicker").datetimepicker({
    format:'Y-m-d',
    timepicker:false,
    mouseWheel: false,
    dayOfWeekStart : 1,    // poniedziałek
    scrollMonth : false,   // nie przewija myszą miesięcy
    scrollInput : false,   // nie przewija nic
    i18n:{
        pl:{
            months:[
             'Styczeń','Luty','Marzec','wiecień',
             'Maj','Czerwiec','Lipiec','Sierpień',
             'Wrzesień','Październik','Listopad','Grudzień',
            ],
            dayOfWeek:[
             "Nie", "Pon", "Wto", "Śr", 
             "Czw", "Pt", "Sob",
            ]
        }
   }
});

Użycie w szablonie:

 <?= $this->Form->text('purchase_date', [
        'class' => 'form-control w-25 datetimepicker',
        'default' => (new \DateTime())->format('Y-m-d')
]) ?>

więcej opcji w tabeli

tinyMCE install

<!DOCTYPE html>
<html>
<head>
  <script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
  <script>tinymce.init({ selector:'textarea' });</script>
</head>
<body>
  <textarea>Pole edytora</textarea>
</body>
</html>

Czytaj dalej tinyMCE install

countdown plugin

https://flipclockjs.com/

<html>
  <head>
    <link rel="stylesheet" href="/css/flipclock.css">
  </head>
  <body>
    <div class="your-clock"></div>
		
    <script src="/js/libs/jquery.js"></script>
    <script src="/js/flipclock/flipclock.min.js"></script>
  </body>
</html>

var clock = $('.your-clock').FlipClock({
    // ... your options here
});

reachFileManager plugin

https://github.com/servocoder/RichFilemanager/wiki/Configuration-options

Instalacja projektu w katalogu filemanager

# composer create-project --prefer-dist servocoder/richfilemanager filemanager

# chown -R www-data.www-data filemanager/userdata

– ustawienie virtualnego serwera np. https://mymanager.pl
– dostęp poprzez podany URL

Zmiana userfiles na media

# nano filemanager/connectors/php/filemanager.php
  $local->setRoot('media', true, true);

Dostęp do pliku

https://mymanager.pl/media/dir/file.png

TinyMCE config

Plik konfiguracyjny tinyMce

Czytaj dalej TinyMCE config

Kategoria: Javascript

JS – konstrukcje warunkowe