array( 'value_path' => array( 'text' ), 'default_value' => 'Button', 'title' => array( 'text' => __( 'Button text', 'brandy' ), 'type' => 'bold', ), 'type' => 'TextInput', 'render_options' => array( 'type' => 'content', 'data' => array( array( 'selector' => '.brandy-button-text-wrap', 'value_path' => array( 'text' ), ), ), ), ), 'button_link' => array( 'value_path' => array( 'link' ), 'default_value' => '#', 'title' => array( 'text' => __( 'Button link', 'brandy' ), 'type' => 'bold', ), 'type' => 'TextInput', 'render_options' => array( 'type' => 'data_attribute', 'data' => array( array( 'selector' => 'a.brandy-button', 'name' => 'href', 'value_path' => array( 'link' ), ), ), ), ), 'icon_enabled' => array( 'value_path' => array( 'icon_enabled' ), 'title' => array( 'text' => __( 'Button icon', 'brandy' ), 'type' => 'bold', ), 'default_value' => true, 'type' => 'Switcher', 'render_options' => array( 'type' => 'force_refresh', ), ), 'button_icon' => array( 'value_path' => array( 'icon' ), 'default_value' => 'icon_3', 'type' => 'ButtonIconSelection', 'render_options' => array( 'type' => 'force_refresh', ), 'visible_conditions' => array( array( 'value_path' => array( 'icon_enabled' ), 'value' => true, ), ), ), 'button_type' => array( 'title' => array( 'text' => __( 'Button type', 'brandy' ), 'type' => 'bold', ), 'value_path' => array( 'type' ), 'type' => 'ButtonType', 'options' => array( array( 'label' => __( 'Fill', 'brandy' ), 'value' => 'fill', ), array( 'label' => __( 'Outline', 'brandy' ), 'value' => 'outline', ), ), 'default_value' => 'fill', ), 'button_size' => array( 'title' => array( 'text' => __( 'Button size', 'brandy' ), 'type' => 'bold', ), 'value_path' => array( 'size' ), 'type' => 'ButtonSize', 'options' => array( array( 'label' => __( 'Small', 'brandy' ), 'value' => 'small', ), array( 'label' => __( 'Medium', 'brandy' ), 'value' => 'medium', ), array( 'label' => __( 'large', 'brandy' ), 'value' => 'large', ), ), 'default_value' => 'medium', 'render_options' => array( 'type' => 'data_attribute', 'data' => array( array( 'selector' => 'a.brandy-button', 'name' => 'size', 'value_path' => array( 'size' ), ), ), ), ), 'link_new_tab' => array( 'value_path' => array( 'link_new_tab' ), 'title' => array( 'text' => __( 'Open link in new tab', 'brandy' ), 'type' => 'bold', 'show_devices' => false, ), 'default_value' => true, 'type' => 'Switcher', 'render_options' => array( 'type' => 'data_attribute', 'data' => array( array( 'type' => 'switcher', 'selector' => 'a.brandy-button', 'name' => 'target', 'value_path' => array( 'link_new_tab' ), 'enabled_value' => '_blank', 'disabled_value' => '_self', ), ), ), ), 'css_class' => array( 'value_path' => array( 'css_class' ), 'default_value' => '', 'title' => array( 'text' => __( 'CSS classes', 'brandy' ), 'type' => 'bold', 'show_devices' => false, ), 'type' => 'TextInput', 'render_options' => array( 'type' => 'data_attribute', 'data' => array( array( 'selector' => '.brandy-element-wrapper', 'name' => 'class', 'default_class' => 'brandy-element-wrapper', 'value_path' => array( 'css_class', ), ), ), ), ), 'button_design_reset' => array( 'title' => array( 'text' => __( 'Button', 'brandy' ), 'type' => 'bold', 'show_devices' => true, ), 'type' => 'Reset', 'reset_paths' => array( array( 'button_design' ), ), ), 'button_design_background_color' => array( 'title' => array( 'text' => __( 'Background color', 'brandy' ), 'type' => 'normal', ), 'value_path' => array( 'button_design', 'background_color' ), 'default_value' => array( 'normal' => array( 'desktop' => 'var(--palette_3)', 'tablet' => null, 'mobile' => null, ), 'hover' => array( 'desktop' => 'var(--palette_3)', 'tablet' => null, 'mobile' => null, ), ), 'type' => 'ColorGroup', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'color', 'name' => '--element-button-bgcolor', 'value_path' => array( 'button_design', 'background_color' ), ), ), ), ), 'button_border_color' => array( 'title' => array( 'text' => __( 'Border color', 'brandy' ), 'type' => 'normal', ), 'value_path' => array( 'button_design', 'border', 'color' ), 'default_value' => array( 'normal' => array( 'desktop' => 'var(--palette_3)', 'tablet' => null, 'mobile' => null, ), 'hover' => array( 'desktop' => 'var(--palette_3)', 'tablet' => null, 'mobile' => null, ), ), 'type' => 'ColorGroup', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'color', 'name' => '--element-button-border-color', 'value_path' => array( 'button_design', 'border', 'color' ), ), ), ), ), 'button_border_width' => array( 'title' => array( 'text' => __( 'Border width', 'brandy' ), 'type' => 'normal', ), 'value_path' => array( 'button_design', 'border', 'width' ), 'default_value' => array( 'desktop' => array( 'unit' => 'px', 'min' => 0, 'max' => 20, 'value' => 1, ), 'tablet' => null, 'mobile' => null, ), 'type' => 'Dimension', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'dimension', 'name' => '--element-button-border-width', 'value_path' => array( 'button_design', 'border', 'width' ), ), ), ), ), 'button_design_border_radius' => array( 'title' => array( 'text' => __( 'Border radius', 'brandy' ), 'type' => 'normal', ), 'value_path' => array( 'button_design', 'border_radius' ), 'default_value' => array( 'desktop' => array( 'unit' => 'px', 'min' => 0, 'max' => 50, 'value' => 0, ), 'tablet' => null, 'mobile' => null, ), 'type' => 'Dimension', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'dimension', 'name' => '--element-button-border-radius', 'value_path' => array( 'button_design', 'border_radius' ), ), ), ), ), 'button_design_box_shadow' => array( 'title' => array( 'text' => __( 'Box shadow', 'brandy' ), 'type' => 'bold', ), 'type' => 'BoxShadow', 'default_value' => array( 'enabled' => true, 'type' => 'default', 'custom_value' => array( 'color' => '#c4c3c3', 'x' => 3, 'y' => 3, 'blur' => 6, 'spread' => 1, ), ), 'value_path' => array( 'button_design_box_shadow' ), 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'box_shadow', 'name' => '--element-button-box_shadow', 'value_path' => array( 'button_design_box_shadow' ), ), ), ), ), 'button_design_text_reset' => array( 'title' => array( 'text' => __( 'Text', 'brandy' ), 'type' => 'bold', 'show_devices' => true, ), 'type' => 'Reset', 'reset_paths' => array( array( 'button_design_text' ), ), ), 'button_design_text_color' => array( 'title' => array( 'text' => __( 'Text Color', 'brandy' ), 'type' => 'normal', ), 'value_path' => array( 'button_design_text', 'color' ), 'default_value' => array( 'normal' => array( 'desktop' => '#fff', 'tablet' => null, 'mobile' => null, ), 'hover' => array( 'desktop' => '#fff', 'tablet' => null, 'mobile' => null, ), ), 'type' => 'ColorGroup', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'color', 'name' => '--element-button-text_color', 'value_path' => array( 'button_design_text', 'color' ), ), ), ), ), 'button_design_text_typography' => array( 'value_path' => array( 'button_design_text', 'typography' ), 'title' => array( 'text' => 'Typography', 'type' => 'normal', ), 'default_value' => TypographyService::get_default_typography_value( array( 'font_size' => array( 'desktop' => array( 'value' => 14, ), ), 'line_height' => array( 'desktop' => array( 'value' => 14, ), ), ) ), 'type' => 'Typography', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'typography', 'name' => '--element-button-text-typography', 'value_path' => array( 'button_design_text', 'typography' ), ), ), ), ), 'button_design_icon_reset' => array( 'title' => array( 'text' => __( 'Icon', 'brandy' ), 'type' => 'bold', 'show_devices' => true, ), 'type' => 'Reset', 'reset_paths' => array( array( 'button_design_icon' ), ), ), 'button_design_icon_color' => array( 'title' => array( 'text' => __( 'Icon Color', 'brandy' ), 'type' => 'normal', ), 'value_path' => array( 'button_design_icon', 'color' ), 'default_value' => array( 'normal' => array( 'desktop' => '#fff', 'tablet' => null, 'mobile' => null, ), 'hover' => array( 'desktop' => '#fff', 'tablet' => null, 'mobile' => null, ), ), 'type' => 'ColorGroup', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'color', 'name' => '--element-button-icon_color', 'value_path' => array( 'button_design_icon', 'color' ), ), ), ), ), 'button_design_icon_size' => array( 'title' => array( 'text' => __( 'Icon size', 'brandy' ), 'type' => 'normal', ), 'value_path' => array( 'button_design_icon', 'size' ), 'default_value' => array( 'desktop' => ElementsLoader::get_default_icon_size( array( 'value' => 14, 'min' => 10, ) ), 'tablet' => null, 'mobile' => null, ), 'type' => 'Dimension', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'dimension', 'name' => '--element-button-icon-size', 'value_path' => array( 'button_design_icon', 'size' ), ), ), ), ), //item spacing 'button_design_item_spacing' => array( 'value_path' => array( 'button_design_item_spacing' ), 'title' => array( 'text' => 'Item spacing', 'type' => 'bold', ), 'default_value' => array( 'desktop' => array( 'unit' => 'px', 'value' => 7, 'min' => 0, 'max' => 30, ), 'tablet' => null, 'mobile' => null, ), 'type' => 'Dimension', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'dimension', 'name' => '--element-button_item_spacing_design', 'value_path' => array( 'button_design_item_spacing' ), ), ), ), ), 'button_design_padding' => array( 'value_path' => array( 'button_design_padding' ), 'title' => array( 'text' => 'Padding', 'type' => 'bold', ), 'default_value' => array( 'unit' => 'px', 'top' => 12, 'right' => 16, 'bottom' => 12, 'left' => 16, 'is_constraints' => false, ), 'type' => 'Spacing', 'render_options' => array( 'type' => 'force_refresh', ), 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'spacing', 'name' => '--element-button-padding_design', 'value_path' => array( 'button_design_padding' ), ), ), ), ), //margin 'button_design_margin' => array( 'value_path' => array( 'button_design_margin' ), 'title' => array( 'text' => 'Margin', 'type' => 'bold', 'show_devices' => true, ), 'default_value' => array( 'desktop' => array( 'unit' => 'px', 'top' => 0, 'right' => 0, 'bottom' => 0, 'left' => 0, 'is_constraints' => false, ), 'tablet' => null, 'mobile' => null, ), 'type' => 'Spacing', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'spacing', 'name' => '--element-button-margin_design', 'value_path' => array( 'button_design_margin' ), ), ), ), ), ); return $components; } /** * Register layout for this element * * @param array $layouts Registered layouts * * @return array Layouts after registering */ public function add_layout( $layouts = array() ) { $layout = array( 'general' => array( 'sections' => array( array( 'components' => array( 'button_text', ), ), array( 'components' => array( 'button_link', ), ), array( 'components' => array( 'icon_enabled', 'button_icon', ), ), array( 'components' => array( 'button_type', ), ), array( 'components' => array( 'button_size', ), ), array( 'components' => array( 'link_new_tab', ), ), array( 'components' => array( 'css_class', ), ), ), ), 'designs' => array( 'sections' => array( array( 'components' => array( 'button_design_reset', 'button_design_background_color', 'button_border_color', 'button_border_width', 'button_design_border_radius', ), ), array( 'components' => array( 'button_design_box_shadow', ), ), array( 'components' => array( 'button_design_text_reset', 'button_design_text_color', 'button_design_text_typography', ), ), array( 'components' => array( 'button_design_icon_reset', 'button_design_icon_color', 'button_design_icon_size', ), ), array( 'components' => array( 'button_design_item_spacing', ), ), array( 'components' => array( 'button_design_padding', ), ), array( 'components' => array( 'button_design_margin', ), ), ), ), ); $mapped_layout = $this->map_layout( $layout ); $layouts[ $this->element_id ] = $mapped_layout; return $layouts; } /** * Register this element * * @param array $elements Registered elements * * @return array elements after registering */ public function register_element( $elements = array() ) { $elements[ $this->element_id ] = array( 'id' => $this->element_id, 'title' => __( 'Button', 'brandy' ), 'settings' => $this->map_settings( $this->components ), 'builders' => $this->builders, 'icon' => ' ', ); return $elements; } /** * Add localize data for this element * * @param array $localize_data General localize data * * @return array Data after adding */ public function add_localize_data( $localize_data ) { $icons = array(); $dir = new \DirectoryIterator( self::$path_to_icons ); $dirs = array(); foreach ( $dir as $fileinfo ) { if ( ! $fileinfo->isDot() ) { $dirs[] = $fileinfo->getFilename(); } } usort( $dirs, function( $a, $b ) { return strcmp( $a, $b ); } ); foreach ( $dirs as $file_name ) { $file_path = self::$path_to_icons . '/' . $file_name; $icon_name = basename( $file_name, '.php' ); ob_start(); require $file_path; $icon_data = ob_get_contents(); ob_end_clean(); $icons[ $icon_name ] = $icon_data; } $localize_data['icons']['button'] = $icons; return $localize_data; } /** * Return icon by icon type * * @param string $icon_type Given icon type * * @return string Icon string */ public static function get_icon( $icon_type ) { $file_path = self::$path_to_icons . "$icon_type.php"; if ( file_exists( $file_path ) ) { ob_start(); require $file_path; $icon_data = ob_get_contents(); ob_end_clean(); return $icon_data; } return ''; } }