On gists

CSS (how to write logical statement)

12.12.2021

CSS CSS trick

solution.css #

/* https://stackoverflow.com/questions/2797091/css-and-and-or */

/* or || */
.registration_form_right input:not([type="radio"]):not([type="checkbox"]) {}

/* and && */
.registration_form_right input:not([type="radio"]), 
.registration_form_right input:not([type="checkbox"])

On gists

Component - default + merged options

20.9.2021

Vue.js

BcVideo.vue #

<template>
  <video-player v-bind="mergedVideoSettings" />
</template>

<script>
import VideoPlayer from './VideoPlayer.local.vue'
export default {
  props: {
    videoSettings: Object
  },
  components: {
    VideoPlayer
  },
  computed: {
    mergedVideoSettings() {
      return {
        ...this.defaultVideoSettings,
        ...this.videoSettings
      }
    }
  },
  data() {
    return {
      defaultVideoSettings: {
        mask: false,
        colors: 'var(--primaryColor)'
      }
    }
  },
  mounted() {}
}
</script>

<style lang="scss" scoped></style>

On gists

Konfiguracni objekty - neon - Nette

31.7.2021

Nette Nette-Neon

article.md #

Konfigurační objekty v Nette

Tomáš Jacík 30. 1. 2017

Jak se poprat s předáním konfigurace službě z config.neon? A jak k tomu využít Nette DI?

Jak se to běžně dělává?

Mějme hypotetickou třídu InvoiceForm. Formulář má vlastní šablonu, nemůžeme tedy napsat pouhou továrnu, potřebujeme komponentu. A k ní továrnu. Navíc ale chceme formuláři předat z config.neon nějaké výchozí hodnoty. Jak by takový kód vypadal?

Formulář

declare(strict_types = 1);

namespace App\Forms;

use Nette\Application\UI\Control;
use Nette\Application\UI\Form;

final class InvoiceForm extends Control
{
    /**
     * @var array
     */
    private $config;

    public function __construct(array $config)
    {
        $this->config = $config;
    }

    protected function createComponentInvoiceForm(): Form
    {
        $form = new Form;

        $form->addText('maturity', 'Splatnost')
            ->setDefaultValue($this->config['defaultMaturity']);

        return $form;
    }

    public function render()
    {
        $this->getTemplate()->render(__DIR__ . '/InvoiceForm.latte');
    }
}

Továrna

declare(strict_types = 1);

namespace App\Forms;

final class InvoiceFormFactory
{
    /**
     * @var array
     */
    private $config;

    public function __construct(array $config)
    {
        $this->config = $config;
    }

    public function create(): InvoiceForm
    {
        return new InvoiceForm($this->config);
    }
}

Šablona

<form n:name="invoiceForm">
    {* naše vlastní vykreslení formuláře *}
</form>

V config.neon pak musíme továrnu formuláře zaregistrovat a předat jí potřebné parametry.

parameters:
    invoicing:
        defaultMaturity: 7
        pdfDirectory: %appDir%/../invoices

services:
    - App\Forms\InvoiceFormFactory( %invoicing% )

Jak to udělat lépe?

Místo běžného pole si na konfiguraci vytvoříme objekt, který bude konfiguraci našemu formuláři zprostředkovávat.

declare(strict_types = 1);

namespace App\Config;

use Nette\Utils\ArrayHash;

abstract class AbstractConfig extends ArrayHash
{
    public function __construct(array $arr)
    {
        foreach ($arr as $key => $value) {
            if (is_array($value)) {
                $this->$key = ArrayHash::from($value, TRUE);
            } else {
                $this->$key = $value;
            }
        }
    }
}

Z tohoto objektu pak podědíme konfiguraci pro náš formulář. Můžeme také do třídy přidat metody, které budou s naší konfigurací pracovat. Např. metodu getPdfPath(), kterou později využijeme v třídě na generování PDF. Konfigurační třída tedy není jen jednorázová, předáme její pomocí fakturační konfiguraci více službám.

declare(strict_types = 1);

namespace App\Config;

/**
 * @property int    $defaultMaturity
 * @property string $pdfDirectory
 */
final class InvoicingConfig extends AbstractConfig
{
    public function getPdfPath(int $invoiceId): string
    {
        return vsprintf('%s/%s.pdf', [$this->pdfDirectory, $invoiceId]);
    }
}

Nyní můžeme třídu InvoiceForm upravit, aby nového konfiguračního objektu využila. Všimněte si také metody setDefaultValue(). Díky ArrayHash nyní můžeme ke konfiguraci přistupovat jako k objektu.

declare(strict_types = 1);

namespace App\Forms;

use App\Config\InvoicingConfig;
use Nette\Application\UI\Control;
use Nette\Application\UI\Form;

final class InvoiceFormNew extends Control
{
    /**
     * @var InvoicingConfig
     */
    private $config;

    public function __construct(InvoicingConfig $config)
    {
        $this->config = $config;
    }

    protected function createComponentInvoiceForm(): Form
    {
        $form = new Form;

        $form->addText('maturity', 'Splatnost')
            ->setDefaultValue($this->config->defaultMaturity);

        return $form;
    }

    public function render()
    {
        $this->getTemplate()->render(__DIR__ . '/InvoiceForm.latte');
    }
}

Můžeme se také zbavit vlastní implementace továrny a nahradit ji interfacem. Nette nám pak továrnu vygeneruje samo.

declare(strict_types = 1);

namespace App\Forms;

interface InvoiceFormFactoryInterface
{
    public function create(): InvoiceForm;
}

Nakonec vše zaregistrujeme v config.neon. Všimněte si také absence sekce parameters.

services:
    - App\Config\InvoicingConfig({
        defaultMaturity: 7
        pdfDirectory: %appDir%/../invoices
    })
    - App\Forms\InvoiceFormFactoryInterface

Co na závěr? Tohle jistě není definitivní řešení. Dalo by se lecjak rozšířit. Např. dodělat validace hodnot vstupujících do konfiguračních objektů. Tím by však byl článek již moc složitý. Jeho pointou je ukázat alternativní přístup předávání konfigurace službám. A jak to ve svých aplikacích děláte vy?

On gists

v-model, Parent <-> Child 2 way databinding

29.6.2021 • 20.1.2022 (aktualizováno)

Vue.js

1.vue #

<!--Emit + props-->

<!--PARENT-->
<template>
  <div>
    <h1>A1 - parent</h1>
    <input
      :value="time"
      @input="time = $event.target.value"
      class="border border-gray-400"
    />
    <b1 @on-parent="this.time = $event" :time="time" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: null
    }
  },
  methods: {},
  computed: {},
  mounted() {}
}
</script>



<!--CHILD-->
<template>
  <div>
    <h1>B1 - child</h1>
    <input
      :value="time"
      @input="sendData($event.target.value)"
      class="border border-gray-400"
    />
  </div>
</template>

<script>
export default {
  emits: ['on-parent'],
  props: ['time'],
  data() {
    return {}
  },
  methods: {
    sendData(val) {
      this.$emit('on-parent', val)
    }
  },
  computed: {},
  mounted() {}
}
</script>

On gists

Use Global Utility Methods For DRYer Code

29.6.2021

Vue.js

utils.js #

// import store from '../store' <-- To access your Vuex store
import Vue from 'vue' // <-- used for vue-toastification

class Utils {
  // Copy a string to user's clipboard
  copyToClipboard(text) {
    let copyText = document.createElement('input')
    document.body.appendChild(copyText)
    copyText.value = text
    copyText.select()
    document.execCommand('copy')
    document.body.removeChild(copyText)

    // Show toast on copy success
    // (using the vue-toastification package here)
    Vue.$toast.success('Copied address to clipboard: ' + text, {
      position: 'top-right',
      timeout: 3000
    })
  }
}

export default new Utils()

Gists

CSS (how to write logical statement)

solution.css #

External links only CSS

external-links.css #

Full width

full.css #

Store/Restore Request

Presenter.php #

Composition API - examples

composition.vue #

ICal Event Parser

ICallParser.php #

Component - default + merged options

BcVideo.vue #

Konfiguracni objekty - neon - Nette

article.md #

Konfigurační objekty v Nette

Jak se to běžně dělává?

Jak to udělat lépe?

v-model, Parent <-> Child 2 way databinding

1.vue #

Use Global Utility Methods For DRYer Code

utils.js #