setTitle('Style'); } function init_once(){ $resource=$this->getElement()->getVeManager()->getResourceManager(); $resource->addEditorCss('wp-color-picker') ->addEditorJs('wp-color-picker'); $this->enqueue_script('css-editor',ve_resource_url( dirname(__FILE__).'/../../view/js/css_editor.js' )); } function update($instance){ if($instance) { foreach ($instance as $style_name => $val) { if(!$this->is_valid_style($style_name)){ continue; } $style_name = str_replace('_', '-', $style_name); if($style_name=='background-image'){ if(is_numeric($val)){ list($val,$width,$height)=wp_get_attachment_image_src($val, 'full'); } if($val) { $val = sprintf('url(%s)', $val); } } if($style_name=='background-style'){ switch($val) { case 'cover': $style_name = 'background-size'; //$val = 'coverage'; break; case 'contain': $style_name = 'background-size'; break; case 'no-repeat': $style_name='background-repeat'; break; case 'repeat': $style_name='background-repeat'; break; } } if(is_numeric($val)){ $val.='px'; } $this->getElement()->css($style_name, $val); } } } function is_valid_style($name){ foreach(array('margin','padding','border','background') as $style){ if(strpos($name,$style)!==false){ return true; } } return false; } function form($instance) { $output = '

'; $output .= $this->onionLayout(); $output .= '

' . '

' . __( 'Border', 'visual_editor' ) . '

' . '

Color:

' . '

Style:

' . '

' . __( 'Background', 'visual_editor' ) . '

' . '

' . ' Solid ' . ' Image ' // image bg . '

' . '

Select Image' . $this->getBackgroundImageControl() . '

' . '

' // solid color bg . '

' . '

'; $output .= ''; $output .= '

'; $output .= ''; echo apply_filters( 've_css_editor', $output ); } function getBackgroundImageControl() { $img_ids=$this->get_field_value('background_image'); ob_start(); ?>

Add image

' . __( 'Theme defaults', 'visual_editor' ) . ''; $styles = array( 'solid', 'dotted', 'dashed', 'none', 'hidden', 'double', 'groove', 'ridge', 'inset', 'outset', 'initial', 'inherit' ); foreach ( $styles as $style ) { $output .= ''; } return $output; } function getBackgroundStyleOptions() { $output = ''; $styles = array( __( "Cover", 'visual_editor' ) => 'cover', __( 'Contain', 'visual_editor' ) => 'contain', __( 'No Repeat', 'visual_editor' ) => 'no-repeat', __( 'Repeat', 'visual_editor' ) => 'repeat' ); foreach ( $styles as $name => $style ) { $output .= ''; } return $output; } function onionLayout() { $output = '

' . '

' . $this->layerControls( 'margin' ) . '

' . $this->layerControls( 'border', 'width' ) . $this->borderRadiusControl() . '

' . $this->layerControls( 'padding' ) . '

' . '

'; return $output; } protected function borderRadiusControl(){ $output=''; for($i=0;$i<4;$i++){ $field_name=''; switch($i){ case 0: $field_name='top_left'; break; case 1: $field_name='top_right'; break; case 2: $field_name='bottom_right'; break; case 3: $field_name='bottom_left'; break; } $field_name='border_'.$field_name.'_radius'; $output.=sprintf('',$this->get_field_name($field_name),$this->get_field_value($field_name),'border-radius-'.$i); } return $output; } protected function layerControls( $name, $prefix = '' ) { $output = '' . __( $name, 'visual_editor' ) . ''; foreach ( $this->positions as $pos ) { $field_name=$name . '_' . $pos . ( $prefix != '' ? '_' . $prefix : '' ); $output .= ''; } return $output; } }