From 0bd656a197b5b37349cf39a8ec701625df92e797 Mon Sep 17 00:00:00 2001 From: Fabio Bas Date: Wed, 30 Mar 2016 18:52:24 +0200 Subject: Added TClientStyleSheet::PradoStyles - fix #562 --- framework/Web/Javascripts/css-packages.php | 93 ++++++++++++++++++++++++++++ framework/Web/Javascripts/packages.php | 2 +- framework/Web/UI/TClientScriptManager.php | 82 +++++++++++++++++++++++- framework/Web/UI/WebControls/TStyleSheet.php | 46 +++++++++++++- 4 files changed, 219 insertions(+), 4 deletions(-) create mode 100644 framework/Web/Javascripts/css-packages.php (limited to 'framework/Web') diff --git a/framework/Web/Javascripts/css-packages.php b/framework/Web/Javascripts/css-packages.php new file mode 100644 index 00000000..8bc5fe59 --- /dev/null +++ b/framework/Web/Javascripts/css-packages.php @@ -0,0 +1,93 @@ + array( + JQUERY_DIR.'/css/base/jquery-ui.css', + ), + 'jquery.ui.accordion' => array( + JQUERY_DIR.'/css/base/jquery.ui.accordion.css', + ), + 'jquery.ui.autocomplete' => array( + JQUERY_DIR.'/css/base/jquery.ui.autocomplete.css', + ), + 'jquery.ui.button' => array( + JQUERY_DIR.'/css/base/jquery.ui.button.css', + ), + 'jquery.ui.core' => array( + JQUERY_DIR.'/css/base/jquery.ui.core.css', + ), + 'jquery.ui.datepicker' => array( + JQUERY_DIR.'/css/base/jquery.ui.datepicker.css', + ), + 'jquery.ui.dialog' => array( + JQUERY_DIR.'/css/base/jquery.ui.dialog.css', + ), + 'jquery.ui.menu' => array( + JQUERY_DIR.'/css/base/jquery.ui.menu.css', + ), + 'jquery.ui.progressbar' => array( + JQUERY_DIR.'/css/base/jquery.ui.progressbar.css', + ), + 'jquery.ui.resizable' => array( + JQUERY_DIR.'/css/base/jquery.ui.resizable.css', + ), + 'jquery.ui.selectable' => array( + JQUERY_DIR.'/css/base/jquery.ui.selectable.css', + ), + 'jquery.ui.slider' => array( + JQUERY_DIR.'/css/base/jquery.ui.slider.css', + ), + 'jquery.ui.spinner' => array( + JQUERY_DIR.'/css/base/jquery.ui.spinner.css', + ), + 'jquery.ui.tabs' => array( + JQUERY_DIR.'/css/base/jquery.ui.tabs.css', + ), + 'jquery.ui.theme' => array( + JQUERY_DIR.'/css/base/jquery.ui.theme.css', + ), + 'jquery.ui.tooltip' => array( + JQUERY_DIR.'/css/base/jquery.ui.tooltip.css', + ), + + // bootstrap + 'bootstrap' => array( + BOOTSTRAP_DIR.'/css/bootstrap.css', + ), + 'bootstrap-theme' => array( + BOOTSTRAP_DIR.'/css/bootstrap-theme.css', + ), +); + + +//package names and their dependencies +$dependencies = array( + 'jquery-ui' => array('jquery-ui'), + 'jquery.ui.accordion' => array('jquery.ui.core', 'jquery.ui.accordion'), + 'jquery.ui.autocomplete' => array('jquery.ui.core', 'jquery.ui.autocomplete'), + 'jquery.ui.button' => array('jquery.ui.core', 'jquery.ui.button'), + 'jquery.ui.core' => array('jquery.ui.core'), + 'jquery.ui.datepicker' => array('jquery.ui.core', 'jquery.ui.datepicker'), + 'jquery.ui.dialog' => array('jquery.ui.core', 'jquery.ui.dialog'), + 'jquery.ui.menu' => array('jquery.ui.core', 'jquery.ui.menu'), + 'jquery.ui.progressbar' => array('jquery.ui.core', 'jquery.ui.progressbar'), + 'jquery.ui.resizable' => array('jquery.ui.core', 'jquery.ui.resizable'), + 'jquery.ui.selectable' => array('jquery.ui.core', 'jquery.ui.selectable'), + 'jquery.ui.slider' => array('jquery.ui.core', 'jquery.ui.slider'), + 'jquery.ui.spinner' => array('jquery.ui.core', 'jquery.ui.spinner'), + 'jquery.ui.tabs' => array('jquery.ui.core', 'jquery.ui.tabs'), + 'jquery.ui.theme' => array('jquery.ui.core', 'jquery.ui.theme'), + 'jquery.ui.tooltip' => array('jquery.ui.core', 'jquery.ui.tooltip'), + 'bootstrap' => array('bootstrap'), + 'bootstrap-theme' => array('bootstrap', 'bootstrap-theme'), +); + +return array($packages, $dependencies); + diff --git a/framework/Web/Javascripts/packages.php b/framework/Web/Javascripts/packages.php index fe16d979..68b4822d 100644 --- a/framework/Web/Javascripts/packages.php +++ b/framework/Web/Javascripts/packages.php @@ -95,7 +95,7 @@ $packages = array( //bootstrap 'bootstrap' => array( - BOOTSTRAP_DIR.'/js/bootstrap.js', + BOOTSTRAP_DIR.'/js/bootstrap.js', ), 'dragdrop'=>array( diff --git a/framework/Web/UI/TClientScriptManager.php b/framework/Web/UI/TClientScriptManager.php index 88e7bb62..c2e73b63 100644 --- a/framework/Web/UI/TClientScriptManager.php +++ b/framework/Web/UI/TClientScriptManager.php @@ -30,6 +30,10 @@ class TClientScriptManager extends TApplicationComponent * file containing javascript packages and their cross dependencies */ const PACKAGES_FILE='Web/Javascripts/packages.php'; + /** + * file containing css packages and their cross dependencies + */ + const CSS_PACKAGES_FILE='Web/Javascripts/css-packages.php'; /** * @var TPage page who owns this manager */ @@ -80,12 +84,27 @@ class TClientScriptManager extends TApplicationComponent * @var array */ private static $_pradoPackages; + /** + * @var array registered PRADO style libraries + */ + private $_registeredPradoStyles=array(); + /** + * Client-side style library dependencies, loads from PACKAGES_FILE; + * @var array + */ + private static $_pradoStyles; + /** + * Client-side style library packages, loads from CSS_PACKAGES_FILE; + * @var array + */ + private static $_pradoStylePackages; private $_renderedHiddenFields; private $_renderedScriptFiles=array(); private $_expandedPradoScripts; + private $_expandedPradoStyles; /** * Constructor. @@ -214,7 +233,7 @@ class TClientScriptManager extends TApplicationComponent } /** - * @param string javascript package path. + * @param string javascript or css package path. * @return array tuple($path,$url). */ protected function getPackagePathUrl($base) @@ -347,6 +366,67 @@ class TClientScriptManager extends TApplicationComponent $this->_page->registerCachingAction('Page.ClientScript','registerFocusControl',$params); } + /** + * Registers Prado style by library name. See "Web/Javascripts/packages.php" + * for library names. + * @param string style library name. + */ + public function registerPradoStyle($name) + { + $this->registerPradoStyleInternal($name); + $params=func_get_args(); + $this->_page->registerCachingAction('Page.ClientScript','registerPradoStyle',$params); + } + + /** + * Registers a Prado style library to be loaded. + */ + protected function registerPradoStyleInternal($name) + { + // $this->checkIfNotInRender(); + if(!isset($this->_registeredPradoStyles[$name])) + { + $base = $this->getPradoScriptAssetUrl(); + + if(self::$_pradoStyles === null) + { + $packageFile = Prado::getFrameworkPath().DIRECTORY_SEPARATOR.self::CSS_PACKAGES_FILE; + list($packages,$deps)= include($packageFile); + self::$_pradoStyles = $deps; + self::$_pradoStylePackages = $packages; + } + + if (isset(self::$_pradoStyles[$name])) + $this->_registeredPradoStyles[$name]=true; + else + throw new TInvalidOperationException('csmanager_pradostyle_invalid',$name); + + if(($packages=array_keys($this->_registeredPradoStyles))!==array()) + { + $base = Prado::getFrameworkPath().DIRECTORY_SEPARATOR.self::SCRIPT_PATH; + list($path,$baseUrl)=$this->getPackagePathUrl($base); + $packagesUrl=array(); + $isDebug=$this->getApplication()->getMode()===TApplicationMode::Debug; + foreach ($packages as $p) + { + foreach (self::$_pradoStyles[$p] as $dep) + { + foreach (self::$_pradoStylePackages[$dep] as $style) + if (!isset($this->_expandedPradoStyles[$style])) + { + $this->_expandedPradoStyles[$style] = true; + // TODO minify css? + if (!in_array($url=$baseUrl.'/'.$style,$packagesUrl)) + $packagesUrl[]=$url; + } + } + } + foreach($packagesUrl as $url) + $this->registerStyleSheetFile($url,$url); + } + } + } + /** * Registers a CSS file to be rendered in the page head * diff --git a/framework/Web/UI/WebControls/TStyleSheet.php b/framework/Web/UI/WebControls/TStyleSheet.php index 1964610f..021b9117 100644 --- a/framework/Web/UI/WebControls/TStyleSheet.php +++ b/framework/Web/UI/WebControls/TStyleSheet.php @@ -13,7 +13,17 @@ * TStyleSheet class. * * TStyleSheet represents the link to a stylesheet file and/or a piece of - * stylesheet code. To specify the link to a CSS file, set {@link setStyleSheetUrl StyleSheetUrl}. + * stylesheet code. To specify the link to a CSS file, set {@link setStyleSheetUrl + * StyleSheetUrl}. + * Since Prado 3.3.1, it' possible to import css libraries bundled with + * Prado from template via the {@link setPradoStyles PradoStyles} property. + * Multiple Prado libraries can be specified using comma delimited string of the + * css library to include on the page. For example, + * + * + * + * + * * The child rendering result of TStyleSheet is treated as CSS code and * is rendered within an appropriate style HTML element. * Therefore, if the child content is not empty, you should place the TStyleSheet @@ -28,6 +38,29 @@ */ class TStyleSheet extends TControl { + /** + * @return string comma delimited list of css libraries to include + * on the page. + * @since 3.3.1 + */ + public function getPradoStyles() + { + return $this->getViewState('PradoStyles', ''); + } + + /** + * Include css library to the current page. The current supported + * libraries are: "jquery-ui", "bootstrap" and all the split + * jquery.ui.componentname libraries. + * + * @param string comma delimited list of css libraries to include. + * @since 3.3.1 + */ + public function setPradoStyles($value) + { + $this->setViewState('PradoStyles', $value, ''); + } + /** * @param string URL to the stylesheet file */ @@ -67,8 +100,17 @@ class TStyleSheet extends TControl */ public function onPreRender($param) { + $cs = $this->getPage()->getClientScript(); + + $styles = preg_split('/,|\s+/', $this->getPradoStyles()); + foreach($styles as $style) + { + if(($style = trim($style))!=='') + $cs->registerPradoStyle($style); + } + if(($url=$this->getStyleSheetUrl())!=='') - $this->getPage()->getClientScript()->registerStyleSheetFile($url,$url,$this->getMediaType()); + $cs->registerStyleSheetFile($url,$url,$this->getMediaType()); } /** -- cgit v1.2.3