Je možné, aby psaní písmen ve formuláři $form->addTextarea mě volalo funkci editaceFormSubmitted()

Karel Chramosil

Dobrý den,
požívám php 8.1 a nette.

Je možné, aby psaní písmen ve formuláři $form->addTextarea mě volalo funkci ->onClick[] = [$this, ‚editaceFormSubmitted‘];
po každém písmenu?

<?php

declare(strict_types=1);

namespace App\Presenters;

use Nette;
use Tracy\Debugger;
use Nette\Utils\Image;
use Nette\Application\UI\Form;
use Nette\Utils\ImageColor;


final class HomePresenter extends BasePresenter
{
    private $id;
    private $img_pripona = '.png';
    private $img_text = 'img_text';
    private $img_zaklad = '';  //jméno základu prázdný štítek nebo tabule
    private $width_zakladna = 640;  //658 px = 169.3 mm
    private $height_zakladna = 540; //556 px = 142.8 mm
    private $width_stitek = 453; //453 px = 120.0 mm
    private $height_stitek = 113; //113 px = 30 mm
    private $text = '';
    public function actionDefault($id)
    {
        Debugger::$dumpTheme = 'dark';
        //Debugger::dump($_SERVER['REMOTE_ADDR']);
        $this->template->width_zakladna = $this->width_zakladna;
        $this->template->height_zakladna = $this->height_zakladna;
        $this->template->id =  $id;
        $this->id = $id;
        $this->template->img_text = $this->img_text.$this->img_pripona;
        $this->template->img_zaklad = $id.$this->img_pripona;
        if ($id != null) {
            $id_case = substr($id, 0, 6);
        } else {
            $id_case = "Neznámé ID";
        }
        //Debugger::dump("id_case = ".$id_case);
        switch ($id_case) {
            case "STITEK":
                $this->template->width_stitek = $this->width_stitek;
                $this->template->height_stitek = $this->height_stitek;
                break;
            case "tabule":
                $this->template->width_stitek = 338;
                $this->template->height_stitek = 338;
                break;
            default:
                $this->template->id =  "Nezname_ID";
        }
        //Debugger::dump("id = ".$id);

    }

    protected function createComponentEditaceForm()
    {
        $form = new Form();

        $form->addTextarea('in_text', 'Text', 25, 4);
        $form->addInteger('in_size', 'Velikost textu')
            ->setDefaultValue(40)
            ->addRule($form::Range, 'Velikost textu musí být od %d do %d.', [8, 360]);
        $fontTextu = [
            'arial.ttf' => 'arial',
            'times.ttf' => 'times',
            'verdanab.ttf' => 'verdanab',
        ];
        $form->addSelect('in_font', 'Font textu', $fontTextu)
            ->setDefaultValue('times.ttf');
        $form->addInteger('in_angle', 'Rotace textu')
            ->setDefaultValue(0)
            ->addRule($form::Range, 'Rotace textu musí být od %d do %d let.', [0, 360]);
        $form->addColor('in_color', 'Barva')
            ->setDefaultValue('#000000');
        $form->addUpload('in_image', 'Vlož obrázek')
            //->setRequired(true)
            ->addCondition(Form::FILLED)
            ->addRule($form::IMAGE, 'obrázek musí být JPEG, PNG, GIF or WebP.')
            ->addRule($form::MAX_FILE_SIZE, 'Maximální velikost je 21 mB.', 20 * 1024 * 1024);
        $form->addSubmit('set', 'Zobraz►')
            ->onClick[] = [$this, 'editaceFormSubmitted'];
        $form->addSubmit('uloz', 'Ulož►')
            ->onClick[] = [$this, 'ulozObrazekFormSubmitted'];

        return $form;
    }
    public function ulozObrazekFormSubmitted(Form $form) {
        echo ("Uloženo");
    }
    public function editaceFormSubmitted(Form $form)
    {
        $values = $form->getValues();
        $this->text = $values->in_text;
        //Debugger::dump("Text = ".$this->text);
        //$this->add_text($this->id);
        $FilePath_image = $this->wwwDir("stitek");
        $image_text = Image::fromBlank($this->width_stitek, $this->height_stitek, ImageColor::rgb(255, 255, 255, 0));
        //z obrázku přečteme $height_stitek_tabule a height_stitek_tabule
        //$image_text = Image::fromFile($FilePath_image.'\www\images\\'.$this->id.$this->img_pripona);

        // Nastavíme velikost písma
        $size = $values->in_size;
        // Nastavíme úhel rotace
        $angle = $values->in_angle;
        settype($angle, "float");
        // Nastavíme souřadnice počátku textu
        $x = 40; //40
        $y = 77; //70
        // Nastavíme barvu textu
        $color = preg_replace('/[^0-9a-fA-F]/', '', $values->in_color);
        $color = hexdec($color);
        // Nastavíme soubor  fontem
        //$fontFile = $FilePath_image.'\www\fonty\times.ttf';
        $fontFile = $FilePath_image.'\www\fonty\\'.$values->in_font;

        // Nastavíme text, který chceme nakreslit
        $text = $this->text;
        // Nakreslíme text
        $result = $image_text->ftText($size, $angle, $x, $y, $color, $fontFile, $text);
        // Vytiskneme informace o textu
        //echo 'Rámeček okolo písma X,Y,Šířka textu,Velikost textu:<br>';
        //echo "X souřadnice: $result[0] , ";     //souhlasí
        //echo "Y souřadnice: $result[1] , ";     //souhlasí
        //viz. dokumentace

        // Uložíme výsledný obrázek
        $image_text->save($FilePath_image.'\www\images\\'.$this->img_text.$this->img_pripona);
        $this->template->img_jmeno = $this->img_text.$this->img_pripona;
    }
}





/--html
{* Home *}

{block content}
<div class="panel-levy">
</div>

<div class="panel-stred" >
    <img src="{$basePath}/images/{$img_zaklad}"
         width="{$width_stitek}px"
         height="{$height_stitek}px"
         alt="Stitek"
         important="important"
         class="center-zaklad"
         style="top: 50%; left: 50%;"
         id="zaklad"
    />

    <img src="{$basePath}/images/{$img_text}"
         width="{$width_stitek - 50}px"
         height="{$height_stitek - 50}px"
         alt=""
         important="important"
         class="center-text"
         style="top: 50%; left: 50%;"
         id="img_text"
         onclick="nastavRezim(event)"
    />

</div>

<div class="panel-pravy" id="base">
    {form editaceForm}
    {label in_text /}
    <div class="input">{input in_text} </div>
    <div class="input">{label in_size /} &nbsp {input in_size} </div>
    <div class="input">{label in_font /} &nbsp &nbsp &nbsp &nbsp {input in_font} </div>
    <div class="input">{label in_angle /} &nbsp &nbsp {input in_angle} </div>
    <div class="input">{label in_color /} &nbsp &nbsp {input in_color} </div>
    <div class="input">{label in_image /} {input in_image} </div>
    <div class="input">{input set} &nbsp {input uloz}</div>
    {/form}
</div>


\--

Dškuji za jakoukoliv radu.

Karel Chramosil

m.brecher

@KarelChramosil

Je možné, aby psaní písmen ve formuláři $form->addTextarea mě volalo funkci ->onClick[] = [$this, ‚editaceFormSubmitted‘]; po každém písmenu?

Možné to je, pokud máš ve stránce nějaký javascript, který reaguje na událost input v prvku <textarea>. Zkusil bych postupně krok za krokem ze stránky vyřazovat vložené javascripty až zmíněná chyba přestane.

Editoval m.brecher (8. 12. 2023 18:05)

Karel Chramosil

Děkuji za odpověď,

je to přesně naopak, já potřebuji aby po každém napsaném písmenu se zavolalo zobrazerní textu.
Javasript už také používám ale nevím například jak volat z javascriptu funkce z tříd nettu.

Děkuji

Karel Chramosil

mskocik

Sú 2 možnosti ako to spraviť:

Celú logiku tvorenia náhľadového obrázku prepísať do JS.
Do TextArey pridat html atribut, ktory definuje JS eventListener, ktorý bude posielať ajaxový request na presenter, ktorý by vracal url nového obrázku, alebo prekresloval nejaky snippet. Pseudo kód asi takto:

// HomePresenter

// public function createComponentEditaceForm()
$form->addTextarea('in_text', 'Text', 25, 4)
	->setHtmlAttribute('onkeyup', 'updatePicture(this)');
}

{* predchadzajuci obsah Home sablony *}
<script type="text/javascript">
function updatePicture(textarea) {
  const form = textarea.form;
  const data = new FormData(form);

  // submit formulara ajaxovo
  fetch(form.action, {
	method: 'POST',
    headers: {
	  'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
    }
	body: data
  }).then(
	// spracovat odpoved zo serveru...
  )
}
</script>

Karel Chramosil

Děkuji.