Skip to content

Instantly share code, notes, and snippets.

@arjaneising
Created March 29, 2012 08:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save arjaneising/2235154 to your computer and use it in GitHub Desktop.
Save arjaneising/2235154 to your computer and use it in GitHub Desktop.
CakePHP CSS helper, returns a string with all possible basic CSS properties
<?php
/**
* Helper to specify ALL CSS to make sure it won't get overwritten on the 'host' site.
*/
class WidgetCssHelper extends AppHelper {
/**
* @param $styles Array with the style of the element
* @param bool $noDefaults boolean, must the default css be loaded?
* @return string Css with the css rules
*/
function defineAll( $styles, $noDefaults = false ) {
$toMerge = array();
if (isset($styles['border'])) {
$toMerge = array_merge( $toMerge, $this->setOutsideBorders( $styles['border'] ) );
}
if (isset($styles['border-radius'])) {
$toMerge['-webkit-border-radius'] = $styles['border-radius'];
$toMerge['-moz-border-radius'] = $styles['border-radius'];
}
if (isset($styles['box-shadow'])) {
$toMerge['-webkit-box-shadow'] = $styles['box-shadow'];
$toMerge['-moz-box-shadow'] = $styles['box-shadow'];
}
if (isset($styles['transition'])) {
$toMerge['-webkit-transition'] = $styles['transition'];
$toMerge['-moz-transition'] = $styles['transition'];
$toMerge['-ms-transition'] = $styles['transition'];
$toMerge['-o-transition'] = $styles['transition'];
}
if (isset($styles['margin'])) {
$toMerge = array_merge( $toMerge, $this->setMargins( $styles ) );
}
if (isset($styles['padding'])) {
$toMerge = array_merge( $toMerge, $this->setPaddings( $styles ) );
}
$toMerge = array_merge( $toMerge, $this->getDefaults( $styles, $noDefaults ) );
$css = $this->arrayToCssString( $toMerge );
return $css;
}
/**
* Set border style for elements of $border
*
* @param $style
* @param $border
* @return array with the border style
*/
function setBorderStyle( $style, $border ){
$borderStyles = explode(' ', $style);
$borderMerge = array(
$border . '-color' => $borderStyles[2],
$border . '-style' => $borderStyles[1],
$border . '-width' => $borderStyles[0]
);
return $borderMerge;
}
/**
* Only sets bottom/left/right and top border
*
* @param $styles
* @return array with the styles
*/
function setOutsideBorders( $style ){
$borders = array( 'border-bottom', 'border-left', 'border-right', 'border-top' );
$toMerge = array();
foreach( $borders as $border ) {
$toMerge = array_merge( $toMerge, $this->setBorderStyle( $style, $border ) );
}
return $toMerge;
}
/**
* @param $styles The style of the element
* @return Array with the margins of the elementsd
*/
function setMargins( $styles ) {
$margins = explode( ' ', $styles['margin'] );
$toMerge = array();
switch( count( $margins ) ) {
case 4:
$toMerge['margin-top'] = $margins[0];
$toMerge['margin-right'] = $margins[1];
$toMerge['margin-bottom'] = $margins[2];
$toMerge['margin-left'] = $margins[3];
break;
case 3:
$toMerge['margin-top'] = $margins[0];
$toMerge['margin-right'] = $margins[1];
$toMerge['margin-bottom'] = $margins[2];
$toMerge['margin-left'] = $margins[1];
break;
case 2:
$toMerge['margin-top'] = $margins[0];
$toMerge['margin-right'] = $margins[1];
$toMerge['margin-bottom'] = $margins[0];
$toMerge['margin-left'] = $margins[1];
break;
case 1:
default:
$toMerge['margin-top'] = $margins[0];
$toMerge['margin-right'] = $margins[0];
$toMerge['margin-bottom'] = $margins[0];
$toMerge['margin-left'] = $margins[0];
break;
}
return $toMerge;
}
/**
* @param $styles style of the element
* @return array with the padding styles
*/
function setPaddings( $styles ) {
$paddings = explode(' ', $styles['padding']);
$toMerge = array();
switch(count($paddings)) {
case 4:
$toMerge['padding-top'] = $paddings[0];
$toMerge['padding-right'] = $paddings[1];
$toMerge['padding-bottom'] = $paddings[2];
$toMerge['padding-left'] = $paddings[3];
break;
case 3:
$toMerge['padding-top'] = $paddings[0];
$toMerge['padding-right'] = $paddings[1];
$toMerge['padding-bottom'] = $paddings[2];
$toMerge['padding-left'] = $paddings[1];
break;
case 2:
$toMerge['padding-top'] = $paddings[0];
$toMerge['padding-right'] = $paddings[1];
$toMerge['padding-bottom'] = $paddings[0];
$toMerge['padding-left'] = $paddings[1];
break;
case 1:
default:
$toMerge['padding-top'] = $paddings[0];
$toMerge['padding-right'] = $paddings[0];
$toMerge['padding-bottom'] = $paddings[0];
$toMerge['padding-left'] = $paddings[0];
break;
}
return $toMerge;
}
/**
* Generates a string with the css rules, key is the property, value is the values of the property.
* All elements get an !important attribute
*
* @return string With the css rules
*/
function arrayToCssString( $toMerge ){
$css = '';
while ( list( $prop, $value ) = each( $toMerge ) ) {
$css .= $prop . ':' . $value . ' !important;';
}
return substr( $css, 0, -1 );
}
/**
* Load default style if it is requested
* @param $styles
* @param $noDefaults
* @return array With the style that is requested
*/
function getDefaults( $styles, $noDefaults) {
$defaultStyles = array(
'bottom' => '0',
'clear' => 'none',
'color' => '#000',
'display' => 'inline',
'float' => 'none',
'font-family' => 'Arial, Helvetica, sans-serif',
'font-size' => '1em',
'font-style' => 'normal',
'font-variant' => 'normal',
'font-weight' => 'normal',
'height' => 'auto',
'left' => '0',
'letter-spacing' => 'normal',
'line-height' => 'normal',
'list-style-image' => 'none',
'list-style-position' => 'outside',
'list-style-type' => 'disc',
'margin-bottom' => '0',
'margin-left' => '0',
'margin-right' => '0',
'margin-top' => '0',
'overflow' => 'visible',
'padding-bottom' => '0',
'padding-left' => '0',
'padding-right' => '0',
'padding-top' => '0',
'position' => 'static',
'right' => '0',
'text-align' => 'left',
'text-decoration' => 'none',
'text-indent' => '0',
'text-transform' => 'none',
'top' => '0',
'vertical-align' => 'baseline',
'visibility' => 'visible',
'white-space' => 'normal',
'width' => 'auto',
'word-spacing' => 'normal',
'z-index' => 'auto'
);
$borderBackgrounds = array(
'background-color' => 'transparent',
'background-attachment' => 'scroll',
'background-image' => 'none',
'background-position' => '0 0',
'background-repeat' => 'repeat',
'border-bottom-color' => 'transparent',
'border-bottom-style' => 'none',
'border-bottom-width' => '0',
'border-left-color' => 'transparent',
'border-left-style' => 'none',
'border-left-width' => '0',
'border-right-color' => 'transparent',
'border-right-style' => 'none',
'border-right-width' => '0',
'border-top-color' => 'transparent',
'border-top-style' => 'none',
'border-top-width' => '0'
);
if ( $noDefaults == 'no-border-background' ) {
return array_merge( $defaultStyles , $styles );
}
else {
return array_merge( $defaultStyles, $borderBackgrounds, $styles );
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment