From 1431d02c8f2b3b45f2b4640bb1ef887ae2e47a0f Mon Sep 17 00:00:00 2001 From: Rouslan Placella Date: Mon, 26 Sep 2011 20:46:28 +0100 Subject: [PATCH 01/11] Made PMA aware of the presence of sprites + added a script for generating sprites from icons --- js/get_image.js.php | 123 ++++++++++++++++++++ libraries/Theme.class.php | 12 ++ libraries/common.lib.php | 93 +++++++++++---- libraries/header_scripts.inc.php | 2 + navigation.php | 2 + scripts/create-release.sh | 5 + scripts/generate-sprites | 140 ++++++++++++++++++++++ themes/original/css/theme_left.css.php | 31 +---- themes/original/css/theme_right.css.php | 140 ---------------------- themes/original/img/more.png | Bin 119 -> 117 bytes themes/pmahomme/css/theme_left.css.php | 26 ----- themes/pmahomme/css/theme_right.css.php | 147 ------------------------ themes/pmahomme/img/more.png | Bin 119 -> 117 bytes themes/sprites.css.php | 73 ++++++++++++ 14 files changed, 432 insertions(+), 362 deletions(-) create mode 100644 js/get_image.js.php create mode 100755 scripts/generate-sprites create mode 100644 themes/sprites.css.php diff --git a/js/get_image.js.php b/js/get_image.js.php new file mode 100644 index 0000000000..c8da6d20b0 --- /dev/null +++ b/js/get_image.js.php @@ -0,0 +1,123 @@ +getPath() . '/sprites.lib.php')) { + include $_SESSION['PMA_Theme']->getPath() . '/sprites.lib.php'; +} +$sprites = array(); +if (function_exists('PMA_sprites')) { + $sprites = PMA_sprites(); +} +// We only need the keys from the array of sprites data, +// since they contain the (partial) class names +$keys = array(); +foreach ($sprites as $key => $value) { + $keys[] = "'$key'"; +} + +?> +/** + * Returns an HTML IMG tag for a particular image from a theme, + * which may be an actual file or an icon from a sprite + * + * @param string image The name of the file to get + * @param string alternate Used to set 'alt' and 'title' attributes of the image + * @param object attributes An associative array of other attributes + * + * @return Object The requested image, this object has one method: + * .toString() - Returns the IMG tag for the requested image + * And two properties: + * .attr - an associative array containing + * all attributes of the IMG tag + * .isSprite - Whether the image is a sprite or not + */ +function PMA_getImage(image, alternate, attributes) { + var in_array = function (needle, haystack) { + for (i in haystack) { + if (haystack[i] == needle) { + return true; + } + } + return false; + }; + var sprites = [ + + ]; + // custom image object, it will eventually be returned by this functions + var retval = { + attr: { + alt: '', + title: '', + src: 'themes/dot.gif', + class: '' + }, + isSprite: true, + toString: function () { + var retval = '<' + 'img'; + for (var i in this.attr) { + retval += ' ' + i + '="' + this.attr[i] + '"'; + } + retval += ' /' + '>'; + return retval; + } + }; + // initialise missing parameters + if (attributes == undefined) { + attributes = {}; + } + if (alternate == undefined) { + alternate = ''; + } + // set alt + if (attributes.alt != undefined) { + retval.attr.alt = attributes.alt; + } else { + retval.attr.alt = alternate; + } + // set title + if (attributes.title != undefined) { + retval.attr.title = attributes.title; + } else { + retval.attr.title = alternate; + } + // set src + var klass = image.replace('.gif', '').replace('.png', ''); + if (in_array(klass, sprites)) { + // it's an icon from a sprite + retval.attr.class = 'icon ic_' + klass; + } else { + // it's an image file + retval.isSprite = false; + retval.attr.src = "getImgPath(); ?>" + image; + } + // set all other attrubutes + for (var i in attributes) { + if (i == 'src') { + // do not allow to override the 'src' attribute + continue; + } else if (i == 'class') { + retval.attr[i] += ' ' + attributes[i]; + } else { + retval.attr[i] = attributes[i]; + } + } + + return retval; +}; diff --git a/libraries/Theme.class.php b/libraries/Theme.class.php index 817e4c3517..0dbeb5e252 100644 --- a/libraries/Theme.class.php +++ b/libraries/Theme.class.php @@ -311,6 +311,18 @@ class PMA_Theme } include $_css_file; + + if ($type != 'print') { + $_sprites_data_file = $this->getPath() . '/sprites.lib.php'; + $_sprites_css_file = './themes/sprites.css.php'; + if ( (file_exists($_sprites_data_file) && is_readable($_sprites_data_file)) + && (file_exists($_sprites_css_file) && is_readable($_sprites_css_file)) + ) { + include $_sprites_data_file; + include $_sprites_css_file; + } + } + return true; } diff --git a/libraries/common.lib.php b/libraries/common.lib.php index 123666781c..fb9cec7709 100644 --- a/libraries/common.lib.php +++ b/libraries/common.lib.php @@ -71,53 +71,106 @@ function PMA_pow($base, $exp, $use_function = false) } /** - * string PMA_getIcon(string $icon) + * Returns an HTML IMG tag for a particular icon from a theme, + * which may be an actual file or an icon from a sprite. + * This function takes into account the PropertiesIconic + * configuration setting and wraps the image tag in a span tag. * * @param string $icon name of icon file * @param string $alternate alternate text * @param boolean $force_text whether to force alternate text to be displayed - * @param boolean $noSprite If true, the image source will be not replaced - * with a CSS Sprite * - * @return html img tag + * @return string an html snippet */ -function PMA_getIcon($icon, $alternate = '', $force_text = false, $noSprite = false) +function PMA_getIcon($icon, $alternate = '', $force_text = false) { // $cfg['PropertiesIconic'] is true or both $include_icon = ($GLOBALS['cfg']['PropertiesIconic'] !== false); // $cfg['PropertiesIconic'] is false or both // OR we have no $include_icon $include_text = ($force_text || true !== $GLOBALS['cfg']['PropertiesIconic']); - $alternate = htmlspecialchars($alternate); - $button = ''; // Always use a span (we rely on this in js/sql.js) - $button .= ''; - + $button = ''; if ($include_icon) { - if ($noSprite) { - $button .= ''; - } else { - $button .= '' . $alternate . ''; - } + $button .= PMA_getImage($icon, $alternate); } - if ($include_icon && $include_text) { $button .= ' '; } - if ($include_text) { $button .= $alternate; } - $button .= ''; return $button; } +/** + * Returns an HTML IMG tag for a particular image from a theme, + * which may be an actual file or an icon from a sprite + * + * @param string $image The name of the file to get + * @param string $alternate Used to set 'alt' and 'title' attributes of the image + * @param array $attributes An associative array of other attributes + * + * @return string an html IMG tag + */ +function PMA_getImage($image, $alternate = '', $attributes = array()) +{ + $url = ''; + $is_sprite = false; + $alternate = htmlspecialchars($alternate); + + // Check if we have the requested image as a sprite + // and set $url accordingly + if (is_readable($_SESSION['PMA_Theme']->getPath() . '/sprites.lib.php')) { + include_once $_SESSION['PMA_Theme']->getPath() . '/sprites.lib.php'; + $sprites = PMA_sprites(); + $class = str_replace(array('.gif','.png'), '', $image); + if (array_key_exists($class, $sprites)) { + $is_sprite = true; + $url = 'themes/dot.gif'; + } else { + $url = $GLOBALS['pmaThemeImage'] . $image; + } + } else { + $url = $GLOBALS['pmaThemeImage'] . $image; + } + // set class attribute + if ($is_sprite) { + if (isset($attributes['class'])) { + $attributes['class'] = "icon ic_$class " . $attributes['class']; + } else { + $attributes['class'] = "icon ic_$class"; + } + } + // set all other attributes + $attr_str = ''; + foreach ($attributes as $key => $value) { + if (! in_array($key, array('alt', 'title'))) { + $attr_str .= " $key='$value'"; + } + } + // override the alt attribute + if (isset($attributes['alt'])) { + $alt = $attributes['alt']; + } else { + $alt = $alternate; + } + // override the title attribute + if (isset($attributes['title'])) { + $title = $attributes['title']; + } else { + $title = $alternate; + } + // generate the IMG tag + $template = '%s'; + $retval = sprintf($template, $url, $title, $alt, $attr_str); + + return $retval; +} + /** * Displays the maximum size for an upload * diff --git a/libraries/header_scripts.inc.php b/libraries/header_scripts.inc.php index d211e48f01..a6bc313cb8 100644 --- a/libraries/header_scripts.inc.php +++ b/libraries/header_scripts.inc.php @@ -41,6 +41,8 @@ if (isset($GLOBALS['db'])) { $params['db'] = $GLOBALS['db']; } $GLOBALS['js_include'][] = 'messages.php' . PMA_generate_common_url($params); +// Append the theme id to this url to invalidate the cache on a theme change +$GLOBALS['js_include'][] = 'get_image.js.php?theme=' . urlencode($_SESSION['PMA_Theme']->getId()); /** * Here we add a timestamp when loading the file, so that users who diff --git a/navigation.php b/navigation.php index 1db459c7e0..223d2aabfb 100644 --- a/navigation.php +++ b/navigation.php @@ -110,6 +110,8 @@ require_once './libraries/header_http.inc.php'; echo PMA_includeJS('navigation.js'); echo PMA_includeJS('functions.js'); echo PMA_includeJS('messages.php'); + // Append the theme id to this url to invalidate the cache on a theme change + echo PMA_includeJS('get_image.js.php?theme=' . urlencode($_SESSION['PMA_Theme']->getId())); ?>