[addon webloader] Extras/webloader

uestla napsal(a):

Např. takhdlenc:

$css = new CssLoader();
if (Environment::isProduction()) {
	$css->filters[] = array($this, 'packCss');
}

ad komprimace výstupního HTML – použij např. helper TemplateHelpers::strip().

Asi jsem hloupý, ale v readme je:

<?php
protected function createComponentCss() {
    $css = new WebLoader\CssLoader;

    $css->sourcePath = WWW_DIR.DS."css";
    $css->tempPath = WWW_DIR.DS."webtemp";
    $css->tempUri = ((isset($_SERVER["HTTPS"]))&&($_SERVER["HTTPS"]!=""))? "https://".$_SERVER["SERVER_NAME"]."/webtemp" : "http://".$_SERVER["SERVER_NAME"]."/webtemp";
    $css->filters[] = function ($code) {
        return cssmin::minify($code, array("remove-last-semicolon"=>TRUE));
    };
    return $css;
}
?>

upravil jsem to na:

<?php
protected function createComponentCss() {
    $css = new WebLoader\CssLoader;

    $css->sourcePath = WWW_DIR.DS."css";
    $css->tempPath = WWW_DIR.DS."webtemp";
    $css->tempUri = ((isset($_SERVER["HTTPS"]))&&($_SERVER["HTTPS"]!=""))? "https://".$_SERVER["SERVER_NAME"]."/webtemp" : "http://".$_SERVER["SERVER_NAME"]."/webtemp";
    if(Nette\Environment::getName()=="production"){
        $css->filters[] = function ($code) {
            return cssmin::minify($code, array("remove-last-semicolon"=>TRUE));
        };
    }
    return $css;
}
?>

A na Development prostředí mám vygenerováno

<?php
<link rel="stylesheet" type="text/css" href="http://test.localhost/webtemp/cssloader-f6aef36945a5-screen.css?1290956224" />
?>

namísto očekávaného

<?php
<link rel="stylesheet" type="text/css" href="http://test.localhost/css/screen.css" />
?>

ad komprimace výstupního HTML mi vadí to, že tomu musím upravit generování šablon tak, že v @layout.phtml musím mít jenom

<?php
@{include content|strip}
?>

Tedy nemohu použít @layout.phtml pro layout jako takový

Honza Marek napsal(a):

Rozdíl je v obsahu toho vygenerovaného souboru.

Proč se na Development prostředí generuje soubor namísto použití toho výchozího?

Tak můžeš si buď stejně jako komprimaci nastavit public proměnnou Webloader::$joinFiles,

$css = new CssLoader();

if (Environment::isProduction()) {
	$css->joinFiles = FALSE;
}

nebo přímo v šabloně používat WebLoader jen při production módu…

{if Environment::isProduction()}
{widget css 'style.css'}
{else}
<link rel="stylesheet" type="text/css" href="{$basePath}/css/style.css">
{/if}

Tohle neřeší přesně to co jsem chtěl, ale děkuji za tip. Nakonec jsem to vyřešil následovně:

továrnička v presenteru:

<?php
protected function createComponentCss() {
    $css = new WebLoader\CssLoader;

    $css->sourcePath = WWW_DIR.DS."css";
    $css->sourceUri = ((isset($_SERVER["HTTPS"]))&&($_SERVER["HTTPS"]!=""))? "https://".$_SERVER["SERVER_NAME"]."/webtemp" : "http://".$_SERVER["SERVER_NAME"]."/css";
    $css->tempPath = WWW_DIR.DS."webtemp";
    $css->tempUri = ((isset($_SERVER["HTTPS"]))&&($_SERVER["HTTPS"]!=""))? "https://".$_SERVER["SERVER_NAME"]."/webtemp" : "http://".$_SERVER["SERVER_NAME"]."/webtemp";
    if(Nette\Environment::getName()=="production"){
        $css->filters[] = function ($code) {
            return cssmin::minify($code, array("remove-last-semicolon"=>TRUE));
        };
    } elseif(Nette\Environment::getName()=="development"){
        $css->joinFiles = FALSE;
    }
    return $css;
}
?>

Upravil jsem webloader tak, že jsem přidal proměnou sourceUri a upravil jsem metodu render() následovně:

<?php
public function render() {
    $hasArgs = func_num_args() > 0;

    if ($hasArgs) {
        $backup = $this->files;
        $this->clear();
        $this->addFiles(func_get_args());
    }

    // joined files
    if ($this->joinFiles) {
        $file = $this->generate($this->files);
        echo $this->getElement($this->tempUri . "/" . $file);
        // separated files
    } else {
        foreach ($this->files as $file) {
            if(\Nette\Environment::getName()=="development"){
                echo $this->getElement($this->sourceUri . "/" . \str_replace($this->sourcePath.DS,"",$file));
            } else {
                $file = $this->generate(array($file));
                echo $this->getElement($this->tempUri . "/" . $file);
            }
        }
    }
     if ($hasArgs) {
        $this->files = $backup;
    }
}
?>

výsledek je takový, že na produkčním prostředí se ty soubory všechny sloučí do jednoho a na vývojovém se použijí výchozí soubory ze sourcePath

No a ten helper TemplateHelpers::strip() můžeš de facto použít i jako filtr…

// BasePresenter...
public function templatePrepareFilters($template)
{
	parent::templatePrepareFilters($template);
	$template->registerFilter('TemplateHelpers::strip');
}

Díky, na tohle se podívám

defaultně webloader nemůže zohledňovat k cestě do vygenerovaného souboru jazyk, ale určitě by šla ta třída podědit, aby se to dělo.

ic napsal(a):

Oggy napsal(a):

znovu budu opakovat prosbu

ale používá někdo na cssloader less filtr?

zkoušel jsem to, ale nic… taky na to nemůžu přijít

Pánové, zkoušeli jste zdrojovému CSS souboru změnit koncovku na .less? :)

Editoval Juan (25. 1. 2011 15:14)

Funguje tu neco jako media? Potreboval bych u nejakych souboru nastavit print a u nekterych screen..

Osobně to dělám takhle, jak píše Honza.

<?php
    protected function createComponentCss()
    {
        $css = new CssLoader;
        $css->media = 'screen, projection';
        // ... nastavení ...
        return $css;
    }

    protected function createComponentCssPrint()
    {
        $css = clone $this['css'];
        $css->media = 'print';
        return $css;
    }
?>

Editoval Michalek (30. 1. 2011 16:50)

whipster napsal(a):

Prosím o radu, URL v CSS se mi absolutizuje špatně......

Jsem na tom stejně… neví někdo kde by mohl být problém?

Zdravím, chtěl bych požádat o radu, jak doplnit regulár v CssUrlFilter.php ve funkci __invoke tak, aby nežral DataUri (např. v CSS mám url('data:image/png;base64,...), což filter vezme, a snaží se to zpracovat. Ve finále to dopadne tak, že soubor není zpracován a místo toho je vrácen null (bug?).

Konkrétně se jedná o regexp

$regexp = '~
		(?<![a-z])
			url\(                                     ## url(
				\s*                                   ##   optional whitespace
				([\'"])?                              ##   optional single/double quote
				(   (?: (?:\\\\.)+                    ##     escape sequences
					|   [^\'"\\\\,()\s]+              ##     safe characters
					|   (?(1)   (?!\1)[\'"\\\\,() \t] ##       allowed special characters
						|       ^                     ##       (none, if not quoted)
						)
					)*                                ##     (greedy match)
				)
				(?(1)\1)                              ##   optional single/double quote
				\s*                                   ##   optional whitespace
			\)                                        ## )
		~xs';

Prosím jak přidáváte další JS a CSS z dalších komponent?
Tak abych v layoutu mohl v <head> {control js} a {control css}.

V komponentě bych to chtěl mít v render(), tak abych mohl využívát i jiné rendry, než defaultní.

A pak se stává to, že komponenty, které se volají v <body> už se nepřidají javascripty a styly.
Funguje to pouze, když volání komponent dám až před </body>.

Zkoušel jsem obalit do bloku a includnout na začátku šabolny, ale pak se mi zobrazí 2× … kdyz definuju block pres „define“ tak se zase nacte az pri rendrovani v hlavicce :D

Snad jsem to napsal trosku srozumitelne. Diky za info, jak to pouzivate :)

Super funguje :)
Jen se musí komponentat přidat přes addComponent a ne přes tovarnicku :)

Diky.

Vyřešili jste již někdo ten problém s url na obrázky? Díky

už jsem posílal pull ale nic :( případně zkus nějaký fork stáhnout

Mám takový problém, věřím, že je to nějaká prkotina.

1. Plugin na slideshow + skript níže uvedený, které načítám přes <script src=... v pořádku fungují.
2. {control js "jquery/jquery.bxSlider.min.js"} + skritp níže uvedený načítaný přes <script src=... také funguje
3. {control js "jquery/jquery.bxSlider.min.js", "scripts.unlogged.js"} už nefunguje

Kde by mohla být chybka?

<script>
$(document).ready(function() {

	var screenshow = $('#screenshow').bxSlider({
		mode: 'fade',
		auto: 'true',
		pause: 5000,
		controls: 'false',
		infiniteLoop: 'true',
		randomStart: 'true'
	});

	$('#go-prev').click(function(){
		screenshow.goToPreviousSlide();
		return false;
	});

	$('#go-next').click(function(){
		screenshow.goToNextSlide();
		return false;
	});

});
</script>

Díky.

http://microjs.com/#… atd. … nevim jestli má někdo zkušenosti s více a může to porovnat

mnozí z nás používají async loadery, např. head.js

css a js obvykle zkládám z desítek souborů, obecné css pro flashes, obecné js pro notify, netteform, atd.

vzhledem k tomu, že filemtime a fileexist je dost drahá operace, nemáte někdo tip jak tomu ulehčit než aby to 30 s každým req. checkovalo filemtime?

alespon to zkrátit na 5 minutový úsek, ale nevím jak, jedine název souboru složený ze všech cest použitých souborů jeho md5 a uvnitř na prvním řádku poslední check, pokud nebude starší než 15min dejme tomu, tak nebudeme checkovat ostatní filemtime

má někdo lepší nápad? nebo způsob jak tohle provést?

WebLoader 2.0 funkční.

Paráda!

Bylo by fajn přidat anotace k metodam createCssCompiler a createJsCompiler, aby fungovalo napovidani v netbeansech, jinak zatim vsechno funguje jak ma :)

Přímo s tím regulárem snad problémy nikdy nebyly, spíš se zbytkem filtru. Přijde ti ten z asseticu v něčem lepší?

Že je CssUrlsFilter teď deprecated znamená, že ho nepoužívám a není výchozí. Kdokoliv jinej klidně může. Mazat ho nebudu a když mi někdo potvrdí, že s nim nejsou problémy, tak klidně můžu to deprecated zase sundat.

Předej jen $fil. Nebo můžeš psát ty CSS tak, že počítají s tím, že leží ve složce webtemp.

To bude pořád fungovat. Ale nepovažuju to úplně za šťastný, protože se ti může generovat pro každou stránku jiný CSS, které se bude lišit několika řádkama CSS komponenty. Nebo dokonce jen pořadím CSS z komponent ve vygenerovaném CSS.

Ahoj,

nechces pridat gettery a settery do Webloaderu pre $compiler a $tempPath? Pouzivam Webloader na nacitavanie css a js napriec celou aplikaciou, kedy potrebujem menit fileCollection $compiler-u a vysledok ukladat do istej struktury, a teda menit aj $tempPath. Vyhol by som sa tak ‚zbytocnemu‘ instanciovaniu.

WebLoader umí novej trik:

$files->addFiles(Finder::findFiles('*.css')->from(APP_DIR . '/templates'));

S radostí se přidám k děkujícím a s velkým díky poděkuji za novou verzi ;-)

+ extra díky za vyřešení CSS URL filtru (jen jsem chvíli bádal než došlo na objevení addFileFilter()).