PageRenderTime 50ms CodeModel.GetById 25ms RepoModel.GetById 1ms app.codeStats 0ms

/tools/turbine/plugins/transform.php

https://github.com/sevir/Creamy
PHP | 275 lines | 199 code | 17 blank | 59 comment | 84 complexity | b3e338d5cc514099df25541c71f1fffe MD5 | raw file
    

  1. <?php
    2. 

  2. 

  3. /**
    4. 

  4.  * This file is part of Turbine
    5. 

  5.  * http://github.com/SirPepe/Turbine
    6. 

  6.  * 
    7. 

  7.  * Copyright Peter Kröner
    8. 

  8.  * Licensed under GNU LGPL 3, see license.txt or http://www.gnu.org/licenses/
    9. 

  9.  */
    10. 

  10. 

  11. 

  12. /**
    13. 

  13.  * Easy and extended transform
    14. 

  14.  * Adds vendor-specific versions of transform
    15. 

  15.  * 
    16. 

  16.  * Usage:     Use any currently known transform-property wihtout vendor-prefixes,  
    17. 

  17.  *            BUT NOT YET! transform-origin.
    18. 

  18.  *            For IE you need to define width and height dimensions and use the same units (px/em)
    19. 

  19.  *            for dimensions and translation
    20. 

  20.  * Example 1: width: 100px; height: 100px; transform: translate(2px, 2px);
    21. 

  21.  * Example 1: width: 20em; height: 20em; transform: translate(1em, 2em);
    22. 

  22.  * Example 3: width: 100px; height: 100px; transform: translate(2px, 2px) rotate(90deg);
    23. 

  23.  * Example 4:width: 100px; height: 100px;  transform: skew(15deg,25deg);
    24. 

  24.  * Status:    Beta
    25. 

  25.  * Version:   1.0
    26. 

  26.  * 
    27. 

  27.  * @param mixed &$parsed
    28. 

  28.  * @return void
    29. 

  29.  */
    30. 

  30. function transform(&$parsed){
    31. 

  31. 	global $browser, $cssp;
    32. 

  32. 	foreach($parsed as $block => $css){
    33. 

  33. 		foreach($parsed[$block] as $selector => $styles){
    34. 

  34. 			$width = 0;
    35. 

  35. 			$height = 0;
    36. 

  36. 			$width_unit = 'px';
    37. 

  37. 			$height_unit = 'px';
    38. 

  38. 			$rotate_x = 0;
    39. 

  39. 			$rotate_y = 0;
    40. 

  40. 			$translate_x = 0;
    41. 

  41. 			$translate_y = 0;
    42. 

  42. 			$translate_x_unit = 'px';
    43. 

  43. 			$translate_y_unit = 'px';
    44. 

  44. 			$scale_x = 1;
    45. 

  45. 			$scale_y = 1;
    46. 

  46. 			$rotate_before_translate = false;
    47. 

  47. 			$scale_before_translate = false;
    48. 

  48. 			if(isset($parsed[$block][$selector]['transform'])){
    49. 

  49. 				// Creating good browser CSS
    50. 

  50. 				$num_values = count($parsed[$block][$selector]['transform']);
    51. 

  51. 				for($i = 0; $i < $num_values; $i++){
    52. 

  52. 					$value = $parsed[$block][$selector]['transform'][$i];
    53. 

  53. 					$newproperties = array(
    54. 

  54. 						'-moz-transform' => array($value),
    55. 

  55. 						'-o-transform' => array($value),
    56. 

  56. 						'-webkit-transform' => array($value)
    57. 

  57. 					);
    58. 

  58. 					$cssp->insert_properties($newproperties, $block, $selector, null, 'transform');
    59. 

  59. 				}
    60. 

  60. 

  61. 				// Applying the matrix-filter for IE
    62. 

  62. 				// If we have width & height defined, then replicate transforms with the help of IE's matrix-filter
    63. 

  63. 				if(isset($parsed[$block][$selector]['width'][0]) && isset($parsed[$block][$selector]['height'][0])){
    64. 

  64. 					$values = explode(' ',implode(' ',$parsed[$block][$selector]['transform']));
    65. 

  65. 					$num_values = count($values);
    66. 

  66. 					for($i = 0; $i < $num_values; $i++){
    67. 

  67. 						$value = $values[$i];
    68. 

  68. 						// If we are dealing with a matrix-transformation
    69. 

  69. 						if(preg_match('/matrix\(\D*([0-9\-]+)\s([0-9\-]+)\s([0-9\-]+)\s([0-9\-]+)\s([0-9\-]+)\s([0-9\-]+)\D*\)/i',$value,$matches) == 1){
    70. 

  70. 							$matrix_a = $matches[1];
    71. 

  71. 							$matrix_b = $matches[2];
    72. 

  72. 							$matrix_c = $matches[3];
    73. 

  73. 							$matrix_d = $matches[4];
    74. 

  74. 						}
    75. 

  75. 						else{
    76. 

  76. 							// If we are dealing with a rotation
    77. 

  77. 							if(preg_match('/rotate\(\D*([0-9\-\.]+)(deg|rad|grad)\D*\)/i',$value,$matches) == 1){
    78. 

  78. 								$rotate_x = $matches[1];
    79. 

  79. 								$rotate_x_unit = $matches[2];
    80. 

  80. 								$rotate_y = $matches[1];
    81. 

  81. 								$rotate_y_unit = $matches[2];
    82. 

  82. 							}
    83. 

  83. 							// If we are dealing with a scaling on the X-axis
    84. 

  84. 							if(preg_match('/scaleX\(\D*([0-9\.]+)\D*\)/i',$value,$matches) == 1){
    85. 

  85. 								$scale_x = $matches[1];
    86. 

  86. 							}
    87. 

  87. 							// If we are dealing with a scaling on the Y-axis
    88. 

  88. 							if(preg_match('/scaleY\(\D*([0-9\.]+)\D*\)/i',$value,$matches) == 1){
    89. 

  89. 								$scale_y = $matches[1];
    90. 

  90. 							}
    91. 

  91. 							// If we are dealing with a scaling on both axis
    92. 

  92. 							if(preg_match('/scale\(\D*([0-9\.]+)\D*\)/i',$value,$matches) == 1){
    93. 

  93. 								$scale_x = $matches[1];
    94. 

  94. 								$scale_y = $matches[1];
    95. 

  95. 							}
    96. 

  96. 							// If we are dealing with a skew-transform on the X-axis
    97. 

  97. 							if(preg_match('/skewX*\(\D*([0-9\-\.]+)(deg|rad|grad)\D*\)/i',$value,$matches) == 1){
    98. 

  98. 								$rotate_x = $matches[1] * -1;
    99. 

  99. 								$rotate_x_unit = $matches[2];
    100. 

  100. 							}
    101. 

  101. 							// If we are dealing with a skew-transform on the Y-axis
    102. 

  102. 							if(preg_match('/skewY\(\D*([0-9\-\.]+)(deg|rad|grad)\D*\)/i',$value,$matches) == 1){
    103. 

  103. 								$rotate_y = $matches[1] * -1;
    104. 

  104. 								$rotate_y_unit = $matches[4];
    105. 

  105. 							}
    106. 

  106. 							// If we are dealing with a skew-transform on the both axis
    107. 

  107. 							if(preg_match('/skew\(\D*([0-9\-\.]+)(deg|rad|grad)\D*,\D*([0-9\-\.]+)(deg|rad|grad)\D*\)/i',$value,$matches) == 1){
    108. 

  108. 								$rotate_x = $matches[1] * -1;
    109. 

  109. 								$rotate_x_unit = $matches[2];
    110. 

  110. 								$rotate_y = $matches[3] * -1;
    111. 

  111. 								$rotate_y_unit = $matches[4];
    112. 

  112. 							}
    113. 

  113. 							// If we are dealing with a translation
    114. 

  114. 							if(preg_match('/translate\(\D*([0-9\.\-]+)([a-z%]*),\s*([0-9\.\-]+)([a-z%]*)\D*\)/i',$value,$matches) == 1){
    115. 

  115. 								$translate_x = $matches[1];
    116. 

  116. 								if($matches[2] != '') $translate_x_unit = $matches[2];
    117. 

  117. 								if($matches[3] != '') $translate_y = $matches[3];
    118. 

  118. 								if($matches[4] != '') $translate_y_unit = $matches[4];
    119. 

  119. 								if($rotate_x != 0 || $rotate_y != 0) $rotate_before_translate = true;
    120. 

  120. 								if($scale_x != 1 || $scale_y != 1) $scale_before_translate = true;
    121. 

  121. 							}
    122. 

  122. 						}
    123. 

  123. 					}
    124. 

  124. 					// Convert translation, rotation, scale and skew into matrix values
    125. 

  125. 					if($rotate_x_unit == 'deg') $radian_x = deg2rad(floatval($rotate_x));
    126. 

  126. 					if($rotate_x_unit == 'rad') $radian_x = floatval($rotate_x);
    127. 

  127. 					if($rotate_x_unit == 'grad') $radian_x = deg2rad((floatval($rotate_x) / 400) * 360);
    128. 

  128. 					if($rotate_y_unit == 'deg') $radian_y = deg2rad(floatval($rotate_y));
    129. 

  129. 					if($rotate_y_unit == 'rad') $radian_y = floatval($rotate_y);
    130. 

  130. 					if($rotate_y_unit == 'grad') $radian_y = deg2rad((floatval($rotate_y) / 400) * 360);
    131. 

  131. 					$matrix_a = floatval(number_format(cos($radian_x),8,'.',''));
    132. 

  132. 					$matrix_b = -1 * floatval(number_format(sin($radian_x),8,'.',''));
    133. 

  133. 					$matrix_c = floatval(number_format(sin($radian_y),8,'.',''));
    134. 

  134. 					$matrix_d = floatval(number_format(cos($radian_y),8,'.',''));
    135. 

  135. 					$filter = 'progid:DXImageTransform.Microsoft.Matrix(Dx=1.0,Dy=1.0,M11='.($matrix_a * floatval($scale_x)).',M12='.($matrix_b * floatval($scale_x)).',M21='.($matrix_c * floatval($scale_y)).',M22='.($matrix_d * floatval($scale_y)).',sizingMethod=\'auto expand\')';
    136. 

  136. 					
    137. 

  137. 					// Adjust transforms for IEs, needs to come in first
    138. 

  138. 					$newproperties = array();
    139. 

  139. 					// If position-property is not set, or static set it
    140. 

  140. 					if(!isset($parsed[$block][$selector]['position']) || $parsed[$block][$selector]['position'][0] == 'static'){
    141. 

  141. 						$newproperties['position'] = array('relative');
    142. 

  142. 						$cssp->insert_properties($newproperties, $block, $selector, null, 'transform');
    143. 

  143. 						CSSP::comment($parsed[$block][$selector], 'position', 'Added by transform plugin');
    144. 

  144. 					}
    145. 

  145. 

  146. 					//Include behavior to compensate for IEs auto expand feature
    147. 

  147. 					$htc_path = rtrim(dirname($_SERVER['SCRIPT_NAME']),'/').'/plugins/transform/transform.htc';
    148. 

  148. 					$parsed[$block][$selector]['behavior'] = array('url('.$htc_path.')');
    149. 

  149. 					CSSP::comment($parsed[$block][$selector], 'behavior', 'Added by transform plugin');
    150. 

  150. 					
    151. 

  151. 					//Legacy IE-compliance
    152. 

  152. 					if(floatval($browser->engine_version) < 8){
    153. 

  153. 						//If filter-property not yet set
    154. 

  154. 						if(!isset($parsed[$block][$selector]['filter'])){
    155. 

  155. 							$parsed[$block][$selector]['filter'] = array($filter);
    156. 

  156. 						}
    157. 

  157. 						//If filter-property already set
    158. 

  158. 						else{
    159. 

  159. 							//Needs its filter-value to be put in first place!
    160. 

  160. 							array_unshift($parsed[$block][$selector]['filter'],$filter);
    161. 

  161. 						}
    162. 

  162. 						CSSP::comment($parsed[$block][$selector], 'filter', 'Added by transform plugin');
    163. 

  163. 					}
    164. 

  164. 					else {						
    165. 

  165. 						//IE8-compliance (note: value inside apostrophes!)
    166. 

  166. 						//If -ms-filter-property not yet set
    167. 

  167. 						if(!isset($parsed[$block][$selector]['-ms-filter'])){
    168. 

  168. 							$parsed[$block][$selector]['-ms-filter'] = array($filter);
    169. 

  169. 						}
    170. 

  170. 						//If -ms-filter-property already set
    171. 

  171. 						else{
    172. 

  172. 							//Needs its filter-value to be put in first place!
    173. 

  173. 							array_unshift($parsed[$block][$selector]['-ms-filter'],$filter);
    174. 

  174. 						}
    175. 

  175. 						CSSP::comment($parsed[$block][$selector], '-ms-filter', 'Added by transform plugin');
    176. 

  176. 					}
    177. 

  177. 

  178. 					//Set hasLayout
    179. 

  179. 					$parsed[$block][$selector]['zoom'] = array('1');
    180. 

  180. 					CSSP::comment($parsed[$block][$selector], 'zoom', 'Added by transform plugin');
    181. 

  181. 					$newproperties = array();
    182. 

  182. 

  183. 					// Adjust translation to scaling
    184. 

  184. 					if($scale_before_translate)
    185. 

  185. 					{
    186. 

  186. 						$translate_x = $translate_x * floatval($scale_x);
    187. 

  187. 						$translate_y = $translate_y * floatval($scale_y);
    188. 

  188. 					}
    189. 

  189. 

  190. 					// Adjust translation to rotation
    191. 

  191. 					if($rotate_before_translate)
    192. 

  192. 					{
    193. 

  193. 						$translate_x = ($translate_x * cos($radian_x)) + ($translate_y * sin($radian_y));
    194. 

  194. 						$translate_y = ($translate_x * sin($radian_x)) + ($translate_y * cos($radian_y));
    195. 

  195. 					}
    196. 

  196. 

  197. 					if($translate_x_unit == 'px') $translate_x = round($translate_x);
    198. 

  198. 					if($translate_y_unit == 'px') $translate_y = round($translate_y);
    199. 

  199. 					
    200. 

  200. 					// If position-property is not set, or not set to absolute
    201. 

  201. 					if($parsed[$block][$selector]['position'][0] != 'absolute'){
    202. 

  202. 						// Translation on x-axis
    203. 

  203. 						if($translate_x > 0 && !isset($parsed[$block][$selector]['left']))
    204. 

  204. 						{
    205. 

  205. 							$newproperties['left'] = array($translate_x.$translate_x_unit);
    206. 

  206. 							CSSP::comment($parsed[$block][$selector], 'left', 'Added by transform plugin');
    207. 

  207. 						}
    208. 

  208. 						elseif($translate_x < 0 && !isset($parsed[$block][$selector]['right']))
    209. 

  209. 						{
    210. 

  210. 							$newproperties['right'] = array(abs($translate_x).$translate_x_unit);
    211. 

  211. 							CSSP::comment($parsed[$block][$selector], 'right', 'Added by transform plugin');
    212. 

  212. 						}
    213. 

  213. 						elseif($translate_x != 0 && !isset($parsed[$block][$selector]['margin-left']) && !isset($parsed[$block][$selector]['margin-right']))
    214. 

  214. 						{
    215. 

  215. 							$newproperties['margin-left'] = array($translate_x.$translate_x_unit);
    216. 

  216. 							CSSP::comment($parsed[$block][$selector], 'margin-left', 'Added by transform plugin');
    217. 

  217. 							$newproperties['margin-right'] = array((-1 * $translate_x).$translate_x_unit);
    218. 

  218. 							CSSP::comment($parsed[$block][$selector], 'margin-right', 'Added by transform plugin');
    219. 

  219. 						}
    220. 

  220. 

  221. 						// Translation on y-axis
    222. 

  222. 						if($translate_y > 0 && !isset($parsed[$block][$selector]['top']))
    223. 

  223. 						{
    224. 

  224. 							$newproperties['top'] = array($translate_y.$translate_y_unit);
    225. 

  225. 							CSSP::comment($parsed[$block][$selector], 'top', 'Added by transform plugin');
    226. 

  226. 						}
    227. 

  227. 						elseif($translate_y < 0 && !isset($parsed[$block][$selector]['bottom']))
    228. 

  228. 						{
    229. 

  229. 							$newproperties['bottom'] = array(abs($translate_y).$translate_y_unit);
    230. 

  230. 							CSSP::comment($parsed[$block][$selector], 'bottom', 'Added by transform plugin');
    231. 

  231. 						}
    232. 

  232. 						elseif($translate_y != 0 && !isset($parsed[$block][$selector]['margin-left']) && !isset($parsed[$block][$selector]['margin-right']))
    233. 

  233. 						{
    234. 

  234. 							$newproperties['margin-top'] = array($translate_y.$translate_y_unit);
    235. 

  235. 							CSSP::comment($parsed[$block][$selector], 'margin-top', 'Added by transform plugin');
    236. 

  236. 							$newproperties['margin-bottom'] = array((-1 * $translate_y).$translate_y_unit);
    237. 

  237. 							CSSP::comment($parsed[$block][$selector], 'margin-bottom', 'Added by transform plugin');
    238. 

  238. 						}
    239. 

  239. 					}
    240. 

  240. 					// If position-property is set to absolute
    241. 

  241. 					else
    242. 

  242. 					{
    243. 

  243. 						if($translate_x != 0 && !isset($parsed[$block][$selector]['margin-left']) && !isset($parsed[$block][$selector]['margin-right']))
    244. 

  244. 						{
    245. 

  245. 							$newproperties['margin-left'] = array($translate_x.$translate_x_unit);
    246. 

  246. 							CSSP::comment($parsed[$block][$selector], 'margin-left', 'Added by transform plugin');
    247. 

  247. 							$newproperties['margin-right'] = array((-1 * $translate_x).$translate_x_unit);
    248. 

  248. 							CSSP::comment($parsed[$block][$selector], 'margin-right', 'Added by transform plugin');
    249. 

  249. 						}
    250. 

  250. 						if($translate_y != 0 && !isset($parsed[$block][$selector]['margin-left']) && !isset($parsed[$block][$selector]['margin-right']))
    251. 

  251. 						{
    252. 

  252. 							$newproperties['margin-top'] = array($translate_y.$translate_y_unit);
    253. 

  253. 							CSSP::comment($parsed[$block][$selector], 'margin-top', 'Added by transform plugin');
    254. 

  254. 							$newproperties['margin-bottom'] = array((-1 * $translate_y).$translate_y_unit);
    255. 

  255. 							CSSP::comment($parsed[$block][$selector], 'margin-bottom', 'Added by transform plugin');
    256. 

  256. 						}
    257. 

  257. 					}
    258. 

  258. 					$cssp->insert_properties($newproperties, $block, $selector, 'transform', null);
    259. 

  259. 				}
    260. 

  260. 				else{
    261. 

  261. 					$cssp->report_error('The transform plugin requires a width and a height on the element "'.$parsed[$block][$selector].'" to make transforms work in Internet Explorer.');
    262. 

  262. 				}
    263. 

  263. 			}
    264. 

  264. 		}
    265. 

  265. 	}
    266. 

  266. }
    267. 

  267. 

  268. 

  269. /**
    270. 

  270.  * Register the plugin, MUST BE THE LAST ONE!
    271. 

  271.  */
    272. 

  272. $cssp->register_plugin('before_glue', -999999, 'transform');
    273. 

  273. 

  274. 

  275. ?>
    276. 

  276.