Dynamické vkladanie iba použitých CSS a JS súborov

Github je docela základ. Chtěl jsem se na to podívat, ale z uložto to stahovat nebudu.

Kdyby to bylo na Githubu tak bych se na to rád podíval …

https://github.com/…eaderControl

Ešte premýšľam nad podporou balíčkov.
Napríklad v šablóne s NiftyGrod-om by som potreboval manuálne vypísať:

{js "jquery.min.js", "jquery-ui.js", "netteForms.js", "grid.js"}
{css "grid.css", "grid.custom.css"}

Toto je dosť pracné vypisovať v každej šablóne s gridom.
Preto by bolo fajn definovať balíček

common:
    services:
        publicFileCollector:
            setup:
                - addPackage("NiftyGrid",["jquery.min.js", "jquery-ui.js", "netteForms.js", "grid.js"], ["grid.css", "grid.custom.css"])

Syntaxou NEON-u si nie som 100% istý
a potom by stačilo v šablóne použiť

{pfpack NiftyGrid}

To by bolo celkom fajn, nie?

Plus ešte by som mohol implementovať aj vkladanie balíčkov do balíčkov. (dosť krkolomné vyjadrenie myšlienky:)

common:
    services:
        publicFileCollector:
            setup:
                - addPackage("jQuery",NULL,["jquery.min.js"])
                - addPackage("jQuery-UI",["jQuery"],["jquery-ui.js"])
                - addPackage("netteForms",NULL,["netteForms.js"])
                - addPackage("NiftyGrid",["jQuery","jQuery-UI","netteForms"],["grid.js"], ["grid.css", "grid.custom.css"])

Výhodou by bola možnosť vypísania jednej cesty k súboru vždy iba raz a následného používania skrátených názvov.

Touto úpravou by bolo zabezpečené, že sa:

• Cesta ku každému súboru musí zadefinovať iba raz
• V prípade prejdenia na novú verziu napr. jQuery stačí uraviť jedinú cestu k súboru
• Minimalizuje sa priestor pre chyby spôsobené nedodaním všetkých závislostí

Ešte premýšľam nad API, čo sa ako má volať a taktiež aj ako sa má volať makro pre aplikovanie balíčku.

akurat sa mi nepaci to ze takto si rozne po slablonach bude ‚volat‘ tie css a js a casom stratis uplne prehlad o tom, ze kde co mas…
ja to riesim trochu inak a hlavne jednoduchsie https://forum.nette.org/…a-js-suborou

zopper napsal(a):

Vypadá to skvěle, akorát to nejsem schopný rozchodit… :(
Class \RM\PublicFileCollector\CssSimpleMinificator has not been found – přitom soubory jsou nahrané všechny a pokud v neonu změním class: \RM\PublicFileCollector\CssSimpleMinificator na nějakou jinou třídu, tak ta se načte (sice spadne o kus dál, ale až při pokusu o použití – načte se i \RM\PublicFileCollector\ImageReplacer).

Soubory jsem umístil do /app/components/HeaderControl/, je to verze z Nov 06, 2012, Nette je 2.0.6.

EDIT: Tak mě ještě napadlo zkusit ten název ručně přepsat na obou místech, i když vypadal absolutně stejně – a rozjelo se to. :-/ Mohl by to být nějaký netisknutelný znak?

Veľmi nepríjemný problém:( Vďaka za riešenie pre ostatných.
Žiaľ u mňa sa chyba neprejavuje tak neviem čo a ako mám opraviť.

Nová verzia je vonku:)

Vďaka achtan -ovi a jeho príspevku som sa dokopal k dorobeniu podpory pre balíčky. Výrazne som sa inšpiroval jeho nastavovaním. Mnou navrhovaný spôsob bol dosť divoký a neprehľadný.

Čo je nové:

Definovanie balíčkov

common:
	parameters:
		csspath: %wwwDir%/style/css
		jspath: %wwwDir%/style/js
		webtemp: %wwwDir%/webtemp
		packages:
			jQuery:
				js:
					- %jspath%/jquery-1.8.2.min.js
			netteForms:
				js:
					- %wwwDir%/libs/Nette-extras/Niftyx-NiftyGrid-5163290/resources/js/netteForms.js
			jQueryUI:
				extends:
					- jQuery
				css:
					- %wwwDir%/libs/jquery-ui-1.9.1.custom/css/smoothness/jquery-ui-1.9.1.custom.min.css
				js:
					- %wwwDir%/libs/jquery-ui-1.9.1.custom/js/jquery-ui-1.9.1.custom.min.js
			NiftyGrid:
				extends:
					- jQueryUI
					- netteForms
				css:
					- %wwwDir%/libs/Nette-extras/Niftyx-NiftyGrid-5163290/resources/css/grid.css
				js:
					- %wwwDir%/libs/Nette-extras/Niftyx-NiftyGrid-5163290/resources/js/grid.js

Inicializácia v PublicFileCollector

common:
	services:
		publicFileCollector:
			class: \RM\PublicFileCollector
			setup:
				- $csspath(%csspath%)
				- $jspath(%jspath%)
				- $webtemp(%webtemp%)
				- setPackages(%packages%)

Príklad použitia sablona-s-gridom.latte

{pfpack "NiftyGrid"}

Aby boli informácie pokope, vytvoril som wiki .

Editoval romiix.org (8. 11. 2012 15:40)

enumag napsal(a):

Vypadá to jako hezký koncept, kterému chybí pár věcí: :-)

1. Bylo by hezké mít to jako extension.

Viem, ale zatiaľ som extension nepísal tak som to spravil ako štandardný addon. Vzhľadom na jednoduchosť inštalácie je to možno aj zbytočnosť. Beriem späť, prečítal som si odkazovaný článok znovu a súhlasím, že je to lepšie. Keď si nájdem trochu času, prerobím to.

2. Instalace pomocí Composeru.

Zatiaľ to tu nie je žiadne „terno“, žiadny extra záujem, tak nemám na to dôvod. Ak vznikne požiadavka, vznikne balíček:)

3. Podpora CSS preprocesorů a JS minifikace.

Podpora existuje a je dokumentovaná.

Editoval romiix.org (8. 11. 2012 18:17)

vojtech.dobes napsal(a):

Ej, to je psaní, to používat nebudu…

CompilerExtension vždycky zjednoduší zápis v configu a tudíž to s větší pravděpodobností i někdo zkusí použít :).

A ono to ani nemá Composer, tak to už vůbec nebudu zkoušet…

Je lepší se na to dívat opačně – nabídnout co nejlepší doplněk a doufat, že ho někdo použije. Ne čekat na reakce a de facto si nechat určovat, co má dělat, co má obsahovat… Co jiného je enumagův příspěvek, než „požadavka“.

Nedá inak než súhlasiť. O pár dní sa k tomu dúfam dostanem a napravím nedostatky.

enumag Však já tě ani necitoval, odpovídal jsem čistě romiixovi – omlouvám se, pokud to vyznělo, že si tě beru do úst.

Tak som to snáď nejak zvládol.

GitHub: https://github.com/…eaderControl
Packgist: https://packagist.org/…eadercontrol
Registrácia: \RM\PublicFileCollectorExtension::register($configurator);

Niekto by to mohol otestovať;)

@romiix.org Good job! :)

Patrik Votoček napsal(a):

Pár postřehů:

1. na packagist.org se to jmenuje „headercontrol“ ale extension se registruje jako „PublicFileCollectorExtension“ sjednotil bych to.

Rozhodne súhlasím.

2. „PublicFileCollector“ je ale příšernej název to bude překlepů

Súhlasím, ale ešte som nevymyslel lepší názov.

3. umí to zkopírovat i obrázky které jsou linkované uvnitř CSS souborů?

Áno:

publicFileCollector:
	addCssCompilator:
		- @imageReplacer
services:
	imageReplacer:
		class: \RM\PublicFileCollector\ImageReplacer
		setup:
			- $webtemp(%wwwDir%/webtemp)

Patrik Votoček napsal(a):

romiix.org napsal(a):

Áno …

publicFileCollector:
	addCssCompilator:
		- @imageReplacer
services:
	imageReplacer:
		class: \RM\PublicFileCollector\ImageReplacer
		setup:
			- $webtemp(%wwwDir%/webtemp)

Tohle by imho mohla umět ta extension s nějakou lepší syntax.

Kompilátory sú niečo extra, navyše a môže ich byť viac, dá sa pridávať vlastné atď.

Je pravdepodobné, že tento kompilátor by chcel každý, ale napr. ja využívam aj distribuovaný CssSimpleMinificator ale niekto iný by ho nemusel chcieť. Preto som sa priklonil k tomu, že defaultne nebude žiadny a ak niekto nejaký chce tak si ho vcelku jednoducho pridá.

Alebo si to myslel tak, že by som vytvoril ďalšie rozšírenie \RM\CssSimpleMinificatorExtension::register($configurator); ktoré by ho pridalo samo?

Btw napadla mě další věc na většině webů mám 2 druhy CSS/JS.

1. je společný pro všechny stránky
2. liší se stránku od stránky

bylo by super kdyby to teda umělo vygenerovat 2 soubory jeden společný (uživateli se nakešuje) a jeden pro každou stránku. Jde tohle nějak?

Teraz to neide, ale je to dobrý nápad. Ako najlepšie riešenie sa mi javí zlučovať ich na úrovni balíčkov. Tzn. nadefinuješ si balíček Frontend a balíček napr. Contact a do hlavičky sa pošlú súbory frontend.<hash>.css a contact.<hash>.css.

Editoval romiix.org (9. 11. 2012 10:55)

Co takhle AssetsCollector?

romiix.org napsal(a):

Je pravdepodobné, že tento kompilátor by chcel každý, ale napr. ja využívam aj distribuovaný CssSimpleMinificator ale niekto iný by ho nemusel chcieť. Preto som sa priklonil k tomu, že defaultne nebude žiadny a ak niekto nejaký chce tak si ho vcelku jednoducho pridá.

Alebo si to myslel tak, že by som vytvoril ďalšie rozšírenie \RM\CssSimpleMinificatorExtension::register($configurator); ktoré by ho pridalo samo?

Ne myslel jsem to tak aby jsi využil naplno možnosti compiler extension.

assets:
	setup: # tohle je jenom ukazka nevim co presne tam ma byt
		csspath: %appDir/assets/css%
		jspath: %appDir/assets/js%
		webtemp: %wwwDir%/assets

	css:
		- someMyCssFile.css

	packages:
		jQuery:
			js: %jspath%/jquery-1.8.2.min.js

	cssCompilers:
		imageReplacer: true # internal
		- \RM\PublicFileCollector\ImageReplacer() # external (3rd part)

Teraz s odstupom času som dospel k tomu že oba doplnky naspäť oddelím.

To nedělej! Nevidím v tom smysl. Nedokážu si představit že by to kdy někdo používal samostatně.

Dlho som si to nenechal uležať:)

Teraz som si uvedomil, že vlastne sám o sebe nemá extra zmysel, pretože každý bude chcieť v hlavičke definovať aj CSS a JS.

Z tohoto dôvodu som to teda celé znovu zlúčil a je z toho jeden (dúfam dobre použiteľný) komplexný doplnok.

Dokumentácia: https://componette.org/search/?…

GitHub: https://github.com/…atyus/Header

Packagist: https://packagist.org/…es/rm/header (netestované)

Doplnok je použitý v priebežne vytváranom projekte, takže by mal pracovať správne.