← Wszystkie wpisy

Typy akcji

INPUT: single-line akcja jako mini command bar w pasku akcji JustZix

15 maja 2026 · autor JustZix Team

TEXTAREA to scratch pad — Enter zostawia newline, kod odpala się dopiero na blur. INPUT to przeciwieństwo — Enter natychmiast triggeruje kod. To czyni z niego "mini command bar" — wpisujesz coś, Enter, akcja się dzieje. Lekka, single-line, idealnie integruje się w pasek akcji obok BUTTONów i SLIDER'ów.

Czym to się różni od TEXTAREA i SLIDER?

Najważniejsze: Enter w INPUT zwalnia fokus + odpala code. Identyczne UX co Spotlight (Mac), Chrome address bar, Discord slash commands. User mental model: "wpisz → Enter → akcja".

Pierwsza akcja INPUT

Use case: quick search po nazwie produktu, z customizowanym filtrowaniem.

type: 'input'
label: '🔍 Search'
placeholder: 'Wpisz nazwę produktu...'
defaultValue: ''
code: |
  // value to text wpisany w pole. Po Enter / blur.
  if (!value || value.length < 2) {
    document.querySelectorAll('.product').forEach(p => p.style.display = '');
    return;
  }
  const q = value.toLowerCase();
  document.querySelectorAll('.product').forEach(p => {
    const text = p.textContent.toLowerCase();
    p.style.display = text.includes(q) ? '' : 'none';
  });
  JUSTZIX.log(`Filtered: "${value}"`);

UI: pole tekstowe w pasku. Wpiszesz "iphone" + Enter → tylko produkty z "iphone" widoczne. Wpiszesz pustkę + Enter → wszystkie widoczne.

Memory model — co przeżywa F5

Identyczny jak TEXTAREA:

1. sessionStorage (primary) — sync save na keystroke. Klucz: jz_action_memory_{id}. Trzyma przez F5.
2. chrome.storage.local (backup) — async save na keystroke. Survival across "Restore session".

Save na każdy keystroke, code odpala się tylko na Enter / blur. Save = często (bezpieczeństwo), run = rzadko (efektywność).

3 kolory + placeholder

color              → background pola
colorText          → text-color wpisanego tekstu
colorPlaceholder   → kolor placeholder (CSS variable --jz-placeholder-color)

Bez override'ów wygląda jak natywny browser default (szary border, biały bg, czarny tekst). Dla integracji z ciemnym paskiem akcji: color=#1A1A1A, colorText=#E5E5E5, colorPlaceholder=#777.

Use case 1 — Quick navigation

"Goto" command bar — wpisujesz path, Enter, redirect:

label: '➡️ Goto'
placeholder: '/admin/users lub https://...'
code: |
  if (!value) return;
  if (value.startsWith('http')) {
    location.href = value;
  } else {
    location.pathname = value;
  }
  JUSTZIX.log(`Navigated to ${value}`);

Skrót Tab+Shift z keyboard rule można dodać żeby focusować INPUT. Bez wstrzymywania flow myszki.

Use case 2 — Tag/label injection

Forma rejestracji wymaga ID promo. Zamiast pamiętać kod: INPUT pole + auto-fill formularza po Enter:

label: '🎟️ Promo'
placeholder: 'PROMO2025...'
defaultValue: ''
code: |
  if (!value) return;
  const promoField = document.querySelector('input[name=promo_code]');
  if (promoField) {
    promoField.value = value;
    promoField.dispatchEvent(new Event('input', { bubbles: true }));
    promoField.dispatchEvent(new Event('change', { bubbles: true }));
    JUSTZIX.log(`Promo applied: ${value}`);
  }

Memory pomoże: następny raz na tej domenie pole już ma promo z poprzedniej sesji. Wpisz Enter → re-apply.

Use case 3 — Custom command parser

Discord-style commands: pole które rozpoznaje prefix komendy:

label: '/ Command'
placeholder: '/login, /addCart, /reset...'
code: |
  if (!value || !value.startsWith('/')) return;
  const parts = value.slice(1).split(' ');
  const cmd = parts[0];
  const args = parts.slice(1).join(' ');

  if (cmd === 'login') {
    JZ.click('Login');
  } else if (cmd === 'addCart' && args) {
    document.querySelector(`[data-product="${args}"] .add`)?.click();
  } else if (cmd === 'reset') {
    document.querySelectorAll('input').forEach(i => i.value = '');
    JUSTZIX.log('Form reset.');
  } else {
    JUSTZIX.warn(`Unknown command: /${cmd}`);
  }
  // Wyczyść pole po wykonaniu
  $el.value = '';

To dosłownie mini-CLI w pasku akcji. $el to reference do inputa — możesz go programatically wyczyścić po command'zie.

Use case 4 — Live filter z debounce

Filter live (na keystroke, nie tylko Enter) — wymaga workaround, bo INPUT code runs only on Enter/blur:

// W JS rule (auto-run na stronie):
let debounce;
document.addEventListener('input', (e) => {
  if (e.target.dataset.jzActionType !== 'input') return;
  if (e.target.dataset.jzLabel !== 'Filter') return;
  clearTimeout(debounce);
  debounce = setTimeout(() => {
    const q = e.target.value.toLowerCase();
    document.querySelectorAll('.item').forEach(it => {
      it.style.display = it.textContent.toLowerCase().includes(q) ? '' : 'none';
    });
  }, 200);
});

JS rule słucha input event na elementach JustZix data-jz-action-type='input', dispatch własne filtering z debounce. INPUT code field zostaje pusty (lub fallback po Enter).

Pułapki

• Enter triggeruje code — to różnica vs TEXTAREA. Jeśli user wpisuje multi-line zawartość przez przypadek wciska Enter, code odpala się z incomplete value. Best practice: label "🔍 Search" / "➡️ Goto" sygnalizuje że to command bar.
• Tab triggeruje też blur → code. Tab fokus przechodzi do następnego elementu, blur fires, code odpala się. Może być confusing jeśli user chciał tylko poskoczyć fokusem.
• Bez label/placeholder INPUT wygląda pusto. Walidacja isActionRenderable dla INPUT zwraca true zawsze (od v2.13.7), więc renderuje się nawet bez label. UX-bad — placeholder MIN.
• $el.value vs value w context. value w extras to wartość PRZY wywołaniu kodu. $el.value to current DOM state (może być inne jeśli user zaczął wpisywać kolejny tekst podczas async fetch w code).
• Drag baru blocked podczas typing. mousedown.stopPropagation — input "łapie" mouse events, drag bara nie zadziała przez chwytanie inputa. Celowe.

Co dalej

INPUT to "command bar w pasku" — najlżejszy interactive control, idealny dla quick text → action workflow. Pełna seria typów akcji:

• BUTTON — fire-and-forget
• SELECT static vs js — wybór z listy
• TEXTAREA — multi-line scratch pad
• SLIDER — natywny range controller
• TOGGLE3 — 3-stanowe segmented controls
• window.JZ + JUSTZIX helpers — programmatic API

To zamyka pełną referencję 6 typów akcji JustZix. Jeśli budujesz personal QA toolbar, masz teraz mapę wszystkich klocków.

Zainstaluj JustZix — kompletnie za darmo, bez konta, bez serwera.