WebLoader a nacitanie len potrebnych CSS a JS suborou

Upozornění: Tohle vlákno je hodně staré a informace nemusí být platné pro současné Nette.
David Ďurika
Člen | 328
+
0
-

Naco zbytocne nacitavat vsetky CSS a JS ked ich pre danu stranku nepotrebujem, ze?

V praxi pri pouzivani webloaderu na naozaj velkom projekte som sa dopracoval k takemuto rieseniu:

  • definujem si balicky
  • definujem si zoznam balickov
  • podla requestu sa nacita spravny zoznam balickov

Vyhody

  • vsetky vyhody co ponuka webloader
  • vsetky pouzite CSS a JS mam na jednom mieste
  • nemusel som skoro nic programovat :)

ukazka
a takto to u nas vyzera v praxi
config neon:

parameters:
	webloader:
		packages:

			customui:

				css:
					- BootstrapCustomUI/ui.css

			phrase:
				js:
					- phrase/phrase.js

				css:
					- phrase/phrase.css
			admin:
				js:
					- admin/admin.js
					- admin/main.js
				css:
					- admin/_bootstrap.less

			front:
				css:
					- front/default.css
					- front/mainHeader.css
					- front/mainFooter.css
					- front/search.css
					- front/clickMap.css
					- front/home.css
					- front/objectsList.css
					- front/objectDetails.css
					- front/calendar.css
					- front/forms.css
					- front/listPanel.css
					- skinnedcombo/skin.css
				js:
					- jQuery/jquery.js
					- skinnedcombo/jquery.skinned-combo.pack.js
			autopilot:
				js:
					- admin/admin.js
					- admin/main.js
					- autopilot/autopilot.js
				css: autopilot/_bootstrap.less
			nette:
				js:
					- nette/nette.js
					- nette/netteForms.js
			bootstrap:
				js:
					- bootstrap/bootstrap-alert.js
					- bootstrap/bootstrap-button.js
					# - bootstrap/bootstrap-carousel.js
					- bootstrap/bootstrap-collapse.js
					- bootstrap/bootstrap-dropdown.js
					- bootstrap/bootstrap-modal.js
					- bootstrap/bootstrap-tooltip.js
					- bootstrap/bootstrap-popover.js
					# - bootstrap/bootstrap-scrollspy.js
					- bootstrap/bootstrap-tab.js
					- bootstrap/bootstrap-transition.js
					- bootstrap/bootstrap-typeahead.js
			liveQuery:
				js: liveQuery/livequery.js
			jQuery:
				js:
					- jQuery/jquery.js
					- jQuery/jquery.livequery.js
					- jQuery/jquery.textarea.js
					- jQuery/jquery.neon.js
			jQueryCalendar:
				js: jQueryCalendar/jquery.calendar.js
				css: jQueryCalendar/jquery.calendar.css
			jQueryUI:
				js:
					- jQueryUI/jquery.ui.js
					- jQueryUI/multiselect/ui.multiselect.js
					- jQueryUI/jquery.checkbox.js
				css:
					- jQueryUI/jquery.ui.css
					- jQueryUI/ui.multiselect.css
					- jQueryUI/jquery.checkbox.css
					- jQueryUI/jquery-ui-1.8.20.custom.css
			fileUpload:
				js:
					- FileUpload/js/vendor/jquery.ui.widget.js
					- FileUpload/js/tmpl.min.js
					- FileUpload/js/load-image.min.js
					- FileUpload/js/canvas-to-blob.min.js
					- FileUpload/js/jquery.iframe-transport.js
					- FileUpload/js/jquery.fileupload.js
					- FileUpload/js/jquery.fileupload-fp.js
					- FileUpload/js/jquery.fileupload-ui.js
					- FileUpload/js/locale.js
					- FileUpload/js/main.js
				css:
					- FileUpload/css/jquery.fileupload-ui.css
			phraseControl:
				js: PhraseControl/jquery.phraseControl.js
			liveWysi:
				js: LiveWysi/jquery.liveWysi.js
			contactsControl:
				js: ContactsControl/jquery.contactsControl.js
			dateInput:
				css:
					- DateInput/dateInput.css
					- DateInput/jquery-ui-timepicker-addon.css
				js:
					- DateInput/timepicker.js
					- DateInput/dateInput.js
		sets:

			'Admin:Ap':
				- %webloader.packages.jQuery%
				- %webloader.packages.jQueryCalendar%
				- %webloader.packages.dateInput%
				- %webloader.packages.autopilot%
				- %webloader.packages.bootstrap%

			Admin:
				- %webloader.packages.jQuery%
				- %webloader.packages.liveQuery%
				- %webloader.packages.jQueryUI%
				- %webloader.packages.dateInput%
				- %webloader.packages.nette%
				- %webloader.packages.contactsControl%
				- %webloader.packages.jQueryCalendar%
				- %webloader.packages.phraseControl%
				- %webloader.packages.liveWysi%
				- %webloader.packages.admin%
				- %webloader.packages.fileUpload%
				- %webloader.packages.bootstrap%
				- %webloader.packages.phrase%
				- %webloader.packages.customui%

			Front:
				- %webloader.packages.front%
<?php
	....
		list($modul, $presenter) = explode(':', $this->name, 2);
		$action = $this->action;

		$wlSets = $this->context->parameters['webloader']['sets'];

		$wlSet = NULL;

		if(isset($wlSets[$this->name.':'.$action])) {
			$wlSet = $wlSets[$this->name.':'.$action];
		} else if(isset($wlSets[$this->name])) {
			$wlSet = $wlSets[$this->name];
		} else if(isset($wlSets[$modul])) {
			$wlSet = $wlSets[$modul];
		}

		$cssFiles = array();
		$jsFiles = array();
		if(is_array($wlSet)) {
			foreach ($wlSet as $key => $value) {
				if(isset($value['css'])) {
					if(is_array($value['css'])) {
						$cssFiles = array_merge($cssFiles, $value['css']);
					} else {
						$cssFiles[] = $value['css'];
					}
				}
				if(isset($value['js'])) {
					if(is_array($value['js'])) {
						$jsFiles = array_merge($jsFiles, $value['js']);
					} else {
						$jsFiles[] = $value['js'];
					}
				}
			}
		}
		$this->cssFiles = array_unique($cssFiles); # zoznam CSS suborou kt. uz len predam do webloaderu
		$this->jsFiles = array_unique($jsFiles); # zoznam JS suborou kt. uz len predam do webloaderu
	....
?>

Editoval achtan (8. 11. 2012 9:03)

enumag
Člen | 2118
+
0
-

Tenhle přístup se mi velmi líbí, ale jak třeba u CSS tagu <link> definuješ další atributy (media, alternate)?

Tomáš Votruba
Moderator | 1114
+
0
-

Hnulo se toto někam? Packages ve Webloaderu se mi líbí.

enumag
Člen | 2118
+
0
-

Ano, postavil jsem na tomhle principu Arachne/Resources, bohužel to ale nemám zdokumentované a nemám momentálně čas dokumentaci psát. Mohu ti mejlem poslat nějaké příklady když budeš chtít.

David Ďurika
Člen | 328
+
0
-

aha sry, nejak som prehliadol ze si pred 11 mesiacmi nieco pisal :)

ja som zatial nic take nepotreboval, takze som to ani neriesil