216 lines
		
	
	
		
			7.8 KiB
		
	
	
	
		
			PHP
		
	
	
	
	
	
			
		
		
	
	
			216 lines
		
	
	
		
			7.8 KiB
		
	
	
	
		
			PHP
		
	
	
	
	
	
| <?php
 | |
| 
 | |
| namespace Nextend\Framework\Style;
 | |
| 
 | |
| use Nextend\Framework\Settings;
 | |
| 
 | |
| class StyleRenderer {
 | |
| 
 | |
|     public static $pre = '';
 | |
| 
 | |
|     /**
 | |
|      * @var Style
 | |
|      */
 | |
|     public static $style;
 | |
| 
 | |
|     public static $mode;
 | |
| 
 | |
|     public static function render($style, $mode, $pre = '') {
 | |
|         self::$pre = $pre;
 | |
| 
 | |
|         if (!empty($style)) {
 | |
| 
 | |
|             $value = json_decode($style, true);
 | |
|             if ($value) {
 | |
|                 $selector = 'n2-style-' . md5($style) . '-' . $mode;
 | |
| 
 | |
|                 return array(
 | |
|                     $selector . ' ',
 | |
|                     self::renderStyle($mode, $pre, $selector, $value['data'])
 | |
|                 );
 | |
|             }
 | |
|         }
 | |
| 
 | |
|         return false;
 | |
|     }
 | |
| 
 | |
|     private static function renderStyle($mode, $pre, $selector, $tabs) {
 | |
|         $search  = array(
 | |
|             '@pre',
 | |
|             '@selector'
 | |
|         );
 | |
|         $replace = array(
 | |
|             $pre,
 | |
|             '.' . $selector
 | |
|         );
 | |
|         $tabs[0] = array_merge(array(
 | |
|             'backgroundcolor' => 'ffffff00',
 | |
|             'opacity'         => 100,
 | |
|             'padding'         => '0|*|0|*|0|*|0|*|px',
 | |
|             'boxshadow'       => '0|*|0|*|0|*|0|*|000000ff',
 | |
|             'border'          => '0|*|solid|*|000000ff',
 | |
|             'borderradius'    => '0',
 | |
|             'extra'           => '',
 | |
|         ), $tabs[0]);
 | |
| 
 | |
|         foreach ($tabs as $k => $tab) {
 | |
|             $search[]  = '@tab' . $k;
 | |
|             $replace[] = self::$style->style($tab);
 | |
|         }
 | |
| 
 | |
|         $template = '';
 | |
|         foreach (self::$mode[$mode]['selectors'] as $s => $style) {
 | |
|             $key = array_search($style, $search);
 | |
|             if (is_numeric($key) && !empty($replace[$key])) {
 | |
|                 $template .= $s . "{" . $style . "}";
 | |
|             }
 | |
|         }
 | |
| 
 | |
|         return str_replace($search, $replace, $template);
 | |
|     }
 | |
| }
 | |
| 
 | |
| 
 | |
| $frontendAccessibility = intval(Settings::get('frontend-accessibility', 1));
 | |
| 
 | |
| StyleRenderer::$mode = array(
 | |
|     '0'              => array(
 | |
|         'id'            => '0',
 | |
|         'label'         => n2_('Single'),
 | |
|         'tabs'          => array(
 | |
|             n2_('Text')
 | |
|         ),
 | |
|         'renderOptions' => array(
 | |
|             'combined' => false
 | |
|         ),
 | |
|         'preview'       => '<div class="{styleClassName}">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>',
 | |
|         'selectors'     => array(
 | |
|             '@pre@selector' => '@tab'
 | |
|         )
 | |
|     ),
 | |
|     'simple'         => array(
 | |
|         'id'            => 'simple',
 | |
|         'label'         => n2_('Simple'),
 | |
|         'tabs'          => array(
 | |
|             n2_('Normal')
 | |
|         ),
 | |
|         'renderOptions' => array(
 | |
|             'combined' => true
 | |
|         ),
 | |
|         'preview'       => '<div class="{styleClassName}" style="width: 200px; height:100px;"></div>',
 | |
|         'selectors'     => array(
 | |
|             '@pre@selector' => '@tab0'
 | |
|         )
 | |
|     ),
 | |
|     'box'            => array(
 | |
|         'id'            => 'box',
 | |
|         'label'         => n2_('Box'),
 | |
|         'tabs'          => array(
 | |
|             n2_('Normal'),
 | |
|             n2_('Hover')
 | |
|         ),
 | |
|         'renderOptions' => array(
 | |
|             'combined' => true
 | |
|         ),
 | |
|         'preview'       => '<div class="{styleClassName}" style="width: 200px; height:100px;"></div>',
 | |
|         'selectors'     => array(
 | |
|             '@pre@selector'       => '@tab0',
 | |
|             '@pre@selector:HOVER' => '@tab1'
 | |
|         )
 | |
|     ),
 | |
|     'button'         => array(
 | |
|         'id'            => 'button',
 | |
|         'label'         => n2_('Button'),
 | |
|         'tabs'          => array(
 | |
|             n2_('Normal'),
 | |
|             n2_('Hover')
 | |
|         ),
 | |
|         'renderOptions' => array(
 | |
|             'combined' => true
 | |
|         ),
 | |
|         'preview'       => '<div><a style="display:inline-block; margin:20px;" class="{styleClassName}" href="#" onclick="return false;">Button</a></div>',
 | |
|         'selectors'     => $frontendAccessibility ? array(
 | |
|             '@pre@selector'                                                  => '@tab0',
 | |
|             '@pre@selector:Hover, @pre@selector:ACTIVE, @pre@selector:FOCUS' => '@tab1'
 | |
|         ) : array(
 | |
|             '@pre@selector, @pre@selector:FOCUS'        => '@tab0',
 | |
|             '@pre@selector:Hover, @pre@selector:ACTIVE' => '@tab1'
 | |
|         )
 | |
|     ),
 | |
|     'heading'        => array(
 | |
|         'id'            => 'heading',
 | |
|         'label'         => n2_('Heading'),
 | |
|         'tabs'          => array(
 | |
|             n2_('Normal'),
 | |
|             n2_('Hover')
 | |
|         ),
 | |
|         'renderOptions' => array(
 | |
|             'combined' => true
 | |
|         ),
 | |
|         'preview'       => '<div class="{styleClassName}">Heading</div>',
 | |
|         'selectors'     => $frontendAccessibility ? array(
 | |
|             '@pre@selector'                                                  => '@tab0',
 | |
|             '@pre@selector:Hover, @pre@selector:ACTIVE, @pre@selector:FOCUS' => '@tab1'
 | |
|         ) : array(
 | |
|             '@pre@selector, @pre@selector:FOCUS'        => '@tab0',
 | |
|             '@pre@selector:Hover, @pre@selector:ACTIVE' => '@tab1'
 | |
|         )
 | |
|     ),
 | |
|     'heading-active' => array(
 | |
|         'id'            => 'heading-active',
 | |
|         'label'         => n2_('Heading active'),
 | |
|         'tabs'          => array(
 | |
|             n2_('Normal'),
 | |
|             n2_('Active')
 | |
|         ),
 | |
|         'renderOptions' => array(
 | |
|             'combined' => true
 | |
|         ),
 | |
|         'preview'       => '<div class="{styleClassName}">Heading</div>',
 | |
|         'selectors'     => array(
 | |
|             '@pre@selector'           => '@tab0',
 | |
|             '@pre@selector.n2-active' => '@tab1'
 | |
|         )
 | |
|     ),
 | |
|     'dot'            => array(
 | |
|         'id'            => 'dot',
 | |
|         'label'         => n2_('Dot'),
 | |
|         'tabs'          => array(
 | |
|             n2_('Normal'),
 | |
|             n2_('Active')
 | |
|         ),
 | |
|         'renderOptions' => array(
 | |
|             'combined' => true
 | |
|         ),
 | |
|         'preview'       => '<div><div class="{styleClassName}" style="display: inline-block; margin: 3px;"></div><div class="{styleClassName} n2-active" style="display: inline-block; margin: 3px;"></div><div class="{styleClassName}" style="display: inline-block; margin: 3px;"></div></div>',
 | |
|         'selectors'     => array(
 | |
|             '@pre@selector'                                                     => '@tab0',
 | |
|             '@pre@selector.n2-active, @pre@selector:HOVER, @pre@selector:FOCUS' => '@tab1'
 | |
|         )
 | |
|     ),
 | |
|     'highlight'      => array(
 | |
|         'id'            => 'highlight',
 | |
|         'label'         => n2_('Highlight'),
 | |
|         'tabs'          => array(
 | |
|             n2_('Normal'),
 | |
|             n2_('Highlight'),
 | |
|             n2_('Hover')
 | |
|         ),
 | |
|         'renderOptions' => array(
 | |
|             'combined' => true
 | |
|         ),
 | |
|         'preview'       => '<div class="{fontClassName}">' . n2_('Button') . '</div>',
 | |
|         'selectors'     => $frontendAccessibility ? array(
 | |
|             '@pre@selector'                                                                                                  => '@tab0',
 | |
|             '@pre@selector .n2-highlighted'                                                                                  => '@tab1',
 | |
|             '@pre@selector .n2-highlighted:HOVER, @pre@selector .n2-highlighted:ACTIVE, @pre@selector .n2-highlighted:FOCUS' => '@tab2'
 | |
|         ) : array(
 | |
|             '@pre@selector'                                                             => '@tab0',
 | |
|             '@pre@selector .n2-highlighted, @pre@selector .n2-highlighted:FOCUS'        => '@tab1',
 | |
|             '@pre@selector .n2-highlighted:HOVER, @pre@selector .n2-highlighted:ACTIVE' => '@tab2'
 | |
|         )
 | |
|     ),
 | |
| );
 | |
| 
 | |
| 
 | |
| StyleRenderer::$style = new Style(); |