'; protected $element_id = 'socials_1'; protected $builders = array( 'header', 'footer' ); protected function __construct() { $this->title = __( 'Socials', 'brandy' ); $this->default_socials = array_values( array_filter( $this->get_all_socials(), function( $item ) { return in_array( $item['id'], array( 'facebook', 'instagram', 'linkedin' ), true ); } ) ); add_filter( 'brandy_extra_localize', array( $this, 'add_localize_data' ) ); parent::__construct(); } public function template_path() { return 'template-parts/builder/elements/socials'; } protected function register_components() { return array( 'list_socials' => array( 'title' => array( 'text' => __( 'List socials', 'brandy' ), 'type' => 'bold', ), 'value_path' => array( 'items' ), 'default_value' => $this->default_socials, 'type' => 'ListSocials', ), 'open_in_new_tab' => array( 'title' => array( 'text' => __( 'Open links in new tab', 'brandy' ), 'type' => 'bold', ), 'value_path' => array( 'target' ), 'default_value' => true, 'type' => 'Switcher', 'render_options' => array( 'type' => 'data_attribute', 'data' => array( array( 'type' => 'switcher', 'name' => 'target', 'selector' => '.brandy-social-item', 'value_path' => array( 'target' ), 'enabled_value' => '_blank', 'disabled_value' => '_self', ), ), ), ), 'show_title' => array( 'title' => array( 'text' => __( 'Show title', 'brandy' ), 'type' => 'bold', 'show_devices' => true, ), 'value_path' => array( 'show_title' ), 'default_value' => array( 'desktop' => false, 'tablet' => null, 'mobile' => null, ), 'is_responsive' => true, 'type' => 'Switcher', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'custom_variables', 'value_path' => array( 'show_title' ), 'selector' => '.brandy-social-title', 'mapping_variables' => array_merge( array_map( function( $device ) { return array( 'condition' => array( 'operator' => 'equal', 'value' => true, ), 'path' => array( $device ), 'mapping' => array( $device => array( 'display' => 'block', ), ), ); }, brandy_get_devices() ), array_map( function( $device ) { return array( 'condition' => array( 'operator' => 'equal', 'value' => false, ), 'path' => array( $device ), 'mapping' => array( $device => array( 'display' => 'none', ), ), ); }, brandy_get_devices() ) ), ), ), ), ), 'title_text' => array( 'value_path' => array( 'title_text' ), 'default_value' => '', 'type' => 'TextInput', 'render_options' => array( 'type' => 'content', 'data' => array( array( 'selector' => '.brandy-social-title', 'value_path' => array( 'title_text' ), ), ), ), 'visible_conditions' => array( array( 'value_path' => 'show_title', 'value' => true, ), ), ), 'show_label' => array( 'title' => array( 'text' => __( 'Show text', 'brandy' ), 'type' => 'bold', 'show_devices' => true, ), 'value_path' => array( 'show_label' ), 'default_value' => array( 'desktop' => false, 'tablet' => null, 'mobile' => null, ), 'is_responsive' => true, 'type' => 'Switcher', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'custom_variables', 'value_path' => array( 'show_label' ), 'selector' => '.brandy-social-item__label', 'mapping_variables' => array_merge( array_map( function( $device ) { return array( 'condition' => array( 'operator' => 'equal', 'value' => true, ), 'path' => array( $device ), 'mapping' => array( $device => array( 'display' => 'block', ), ), ); }, brandy_get_devices() ), array_map( function( $device ) { return array( 'condition' => array( 'operator' => 'equal', 'value' => false, ), 'path' => array( $device ), 'mapping' => array( $device => array( 'display' => 'none', ), ), ); }, brandy_get_devices() ) ), ), ), ), ), 'items_direction' => array( 'title' => array( 'text' => __( 'Item Direction', 'brandy' ), 'type' => 'bold', 'show_devices' => true, ), 'type' => 'ButtonGroup', 'default_value' => array( 'desktop' => 'horizontal', 'tablet' => null, 'mobile' => null, ), 'is_responsive' => true, 'options' => array( array( 'value' => 'horizontal', 'label' => __( 'Horizontal', 'brandy' ), ), array( 'value' => 'vertical', 'label' => __( 'Vertical', 'brandy' ), ), ), 'value_path' => array( 'items_direction' ), 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'custom_variables', 'value_path' => array( 'items_direction' ), 'selector' => '.brandy-social-list', 'mapping_variables' => array_merge( array_map( function( $device ) { return array( 'condition' => array( 'operator' => 'equal', 'value' => 'horizontal', ), 'path' => array( $device ), 'mapping' => array( $device => array( 'flex-direction' => 'row', 'align-items' => 'center', ), ), ); }, brandy_get_devices() ), array_map( function( $device ) { return array( 'condition' => array( 'operator' => 'equal', 'value' => 'vertical', ), 'path' => array( $device ), 'mapping' => array( $device => array( 'flex-direction' => 'column', 'align-items' => 'flex-start', ), ), ); }, brandy_get_devices() ) ), ), ), ), ), 'hide_icon' => array( 'title' => array( 'text' => __( 'Hide icon', 'brandy' ), 'type' => 'bold', 'show_devices' => true, ), 'value_path' => array( 'hide_icon' ), 'default_value' => array( 'desktop' => false, 'tablet' => null, 'mobile' => null, ), 'is_responsive' => true, 'type' => 'Switcher', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'custom_variables', 'value_path' => array( 'hide_icon' ), 'selector' => '.brandy-social-item__icon', 'mapping_variables' => array_merge( array_map( function( $device ) { return array( 'condition' => array( 'operator' => 'equal', 'value' => true, ), 'path' => array( $device ), 'mapping' => array( $device => array( 'display' => 'none', ), ), ); }, brandy_get_devices() ), array_map( function( $device ) { return array( 'condition' => array( 'operator' => 'equal', 'value' => false, ), 'path' => array( $device ), 'mapping' => array( $device => array( 'display' => 'block', ), ), ); }, brandy_get_devices() ) ), ), ), ), ), 'icon_color_type' => array( 'title' => array( 'text' => __( 'Icons color', 'brandy' ), 'type' => 'bold', ), 'value_path' => array( 'icon_color_type' ), 'default_value' => 'custom', 'type' => 'ButtonGroup', 'options' => array( array( 'label' => 'Colorful', 'value' => 'default', ), array( 'label' => 'Custom', 'value' => 'custom', ), ), 'render_options' => array( 'type' => 'force_refresh', ), 'visible_conditions' => array( array( 'value_path' => array( 'hide_icon' ), 'value' => false, ), ), ), 'icon_reset' => array( 'title' => array( 'text' => __( 'Icon', 'brandy' ), 'type' => 'bold', 'show_devices' => true, ), 'type' => 'Reset', 'reset_paths' => array( array( 'icon', 'size' ), ), ), 'icon_color' => array( 'title' => array( 'text' => __( 'Color', 'brandy' ), 'type' => 'normal', ), 'value_path' => array( 'icon', 'color' ), 'default_value' => array( 'normal' => array( 'desktop' => 'var(--wp--preset--color--brandy-border)', 'tablet' => null, 'mobile' => null, ), 'hover' => array( 'desktop' => 'var(--wp--preset--color--brandy-border)', 'tablet' => null, 'mobile' => null, ), ), 'is_responsive' => true, 'type' => 'ColorGroup', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'color', 'name' => '--b-icon-color', 'value_path' => array( 'icon', 'color' ), ), ), ) ), 'icon_size' => array( 'title' => array( 'text' => __( 'Size', 'brandy' ), 'type' => 'normal', ), 'value_path' => array( 'icon', 'size' ), 'units' => array( 'px' ), 'default_value' => array( 'desktop' => ElementsLoader::get_default_icon_size( array( 'value' => 20 ) ), 'tablet' => null, 'mobile' => null, ), 'is_responsive' => true, 'type' => 'Dimension', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'dimension', 'name' => '--b-icon-size', 'value_path' => array( 'icon', 'size' ), ), ), ), ), 'title_color' => array( 'title' => array( 'text' => __( 'Color', 'brandy' ), 'type' => 'normal', ), 'value_path' => array( 'title', 'color' ), 'default_value' => array( 'normal' => array( 'desktop' => 'var(--wp--preset--color--brandy-primary-text)', 'tablet' => null, 'mobile' => null, ), ), 'is_responsive' => true, 'type' => 'ColorGroup', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'color', 'name' => '--b-social-title-color', 'value_path' => array( 'title', 'color' ), ), ), ), ), 'title_reset' => array( 'title' => array( 'text' => __( 'Title', 'brandy' ), 'type' => 'bold', 'show_devices' => true, ), 'type' => 'Reset', 'reset_paths' => array( array( 'title' ), ), ), 'title_typography' => array( 'title' => array( 'text' => __( 'Typography', 'brandy' ), 'type' => 'normal', ), 'value_path' => array( 'title', 'typography' ), 'default_value' => null, 'type' => 'Typography', 'is_responsive' => true, 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'typography', 'selector' => '.brandy-social-title', 'value_path' => array( 'title', 'typography' ), ), ), ), ), 'title_distance' => array( 'title' => array( 'text' => __( 'Bottom Spacing', 'brandy' ), 'type' => 'normal', ), 'value_path' => array( 'title', 'distance' ), 'default_value' => array( 'desktop' => array( 'unit' => 'px', 'min' => 1, 'max' => 30, 'value' => 10, ), 'tablet' => null, 'mobile' => null, ), 'is_responsive' => true, 'type' => 'Dimension', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'dimension', 'name' => 'margin-bottom', 'selector' => '.brandy-social-title', 'value_path' => array( 'title', 'distance' ), ), ), ), ), 'label_color' => array( 'title' => array( 'text' => __( 'Label color', 'brandy' ), 'type' => 'normal', ), 'value_path' => array( 'label', 'color' ), 'default_value' => array( 'normal' => array( 'desktop' => 'var(--wp--preset--color--brandy-primary-text)', 'tablet' => null, 'mobile' => null, ), 'hover' => array( 'desktop' => 'var(--wp--preset--color--brandy-primary-text)', 'tablet' => null, 'mobile' => null, ), ), 'is_responsive' => true, 'type' => 'ColorGroup', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'color', 'name' => '--b-label-color', 'value_path' => array( 'label', 'color' ), ), ), ), ), 'label_reset' => array( 'title' => array( 'text' => __( 'Label', 'brandy' ), 'type' => 'bold', 'show_devices' => true, ), 'type' => 'Reset', 'reset_paths' => array( array( 'label', 'typography' ), ), ), 'label_typography' => array( 'title' => array( 'text' => __( 'Typography', 'brandy' ), 'type' => 'normal', ), 'value_path' => array( 'label', 'typography' ), 'default_value' => null, 'type' => 'Typography', 'is_responsive' => true, 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'typography', 'selector' => '.brandy-social-item__label', 'value_path' => array( 'label', 'typography' ), ), ), ), ), 'label_distance' => array( 'title' => array( 'text' => __( 'Icon & Text Spacing', 'brandy' ), 'type' => 'normal', ), 'value_path' => array( 'label', 'distance' ), 'default_value' => array( 'desktop' => array( 'unit' => 'px', 'min' => 1, 'max' => 30, 'value' => 5, ), 'tablet' => null, 'mobile' => null, ), 'is_responsive' => true, 'type' => 'Dimension', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'dimension', 'name' => 'gap', 'selector' => '.brandy-social-item', 'value_path' => array( 'label', 'distance' ), ), ), ), 'visible_conditions' => array( 'relation' => 'AND', array( 'value_path' => array( 'show_label' ), 'value' => true, ), array( 'value_path' => array( 'hide_icon' ), 'value' => false, ), ), ), 'item_reset' => array( 'title' => array( 'text' => __( 'Social item', 'brandy' ), 'type' => 'bold', 'show_devices' => true, ), 'type' => 'Reset', 'reset_paths' => array( array( 'item' ), array( 'icon', 'color' ), array( 'label', 'distance' ), ), ), 'item_background_color' => array( 'title' => array( 'text' => __( 'Background color', 'brandy' ), 'type' => 'normal', ), 'value_path' => array( 'item', 'background' ), 'default_value' => array( 'normal' => array( 'desktop' => '#ffffff00', 'tablet' => null, 'mobile' => null, ), 'hover' => array( 'desktop' => '#ffffff00', 'tablet' => null, 'mobile' => null, ), ), 'is_responsive' => true, 'type' => 'ColorGroup', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'color', 'name' => '--b-item-background', 'value_path' => array( 'item', 'background' ), ), ), ), ), 'item_border_radius' => array( 'title' => array( 'text' => __( 'Border radius', 'brandy' ), 'type' => 'normal', ), 'value_path' => array( 'item', 'border_radius' ), 'default_value' => array( 'desktop' => array( 'unit' => 'px', 'min' => 0, 'max' => 50, 'value' => 50, ), 'tablet' => null, 'mobile' => null, ), 'is_responsive' => true, 'type' => 'Dimension', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'dimension', 'name' => '--b-item-border-radius', 'value_path' => array( 'item', 'border_radius' ), ), ), ), ), 'items_spacing' => array( 'title' => array( 'text' => __( 'Items Spacing', 'brandy' ), 'type' => 'normal', ), 'value_path' => array( 'item', 'spacing' ), 'default_value' => array( 'desktop' => array( 'unit' => 'px', 'min' => 1, 'max' => 100, 'value' => 20, ), 'tablet' => null, 'mobile' => null, ), 'is_responsive' => true, 'type' => 'Dimension', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'dimension', 'name' => 'gap', 'selector' => '.brandy-social-list', 'value_path' => array( 'item', 'spacing' ), ), ), ), ), 'item_padding' => array( 'value_path' => array( 'item', 'padding' ), 'title' => array( 'text' => __( 'Item padding', 'brandy' ), 'type' => 'normal', ), 'default_value' => array( 'desktop' => array( 'unit' => 'px', 'top' => 4, 'right' => 4, 'bottom' => 4, 'left' => 4, 'is_constraints' => false, ), 'tablet' => null, 'mobile' => null, ), 'is_responsive' => true, 'type' => 'Spacing', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'spacing', 'name' => 'padding', 'selector' => '.brandy-social-item', 'value_path' => array( 'item', 'padding' ), ), ), ), ), 'margin' => array( 'value_path' => array( 'margin' ), 'title' => array( 'text' => __( 'Margin', 'brandy' ), '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, ), 'is_responsive' => true, 'type' => 'Spacing', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'spacing', 'name' => 'margin', 'selector' => '.brandy-element-wrapper', 'value_path' => array( 'margin' ), ), ), ), ), ); } protected function register_layout() { return array( 'general' => array( 'sections' => array( array( 'components' => array( 'list_socials' ), ), array( 'components' => array( 'open_in_new_tab' ), ), array( 'components' => array( 'show_title', 'title_text' ), ), array( 'components' => array( 'show_label' ), ), array( 'components' => array( 'hide_icon' ), ), array( 'components' => array( 'items_direction' ), ), ), ), 'designs' => array( 'sections' => array( array( 'components' => array( 'title_reset', 'title_color', 'title_typography', 'title_distance', ), 'visible_conditions' => array( array( 'value_path' => array( 'show_title' ), 'value' => true, ), ), ), array( 'components' => array( 'icon_color_type', 'icon_reset', 'icon_size', ), 'visible_conditions' => array( array( 'value_path' => array( 'hide_icon' ), 'value' => false, ), ), ), array( 'components' => array( 'label_reset', 'label_typography', ), 'visible_conditions' => array( array( 'value_path' => array( 'show_label' ), 'value' => true, ), ), ), array( 'components' => array( 'item_reset', 'item_background_color', 'icon_color', 'item_border_radius', 'label_distance', 'item_padding', 'items_spacing', ), ), array( 'components' => array( 'margin', ), ), ), ), ); } /** * Add socials icons to localize data * * @param array $localize_data General data * * @return array */ public function add_localize_data( $localize_data ) { if ( ! isset( $localize_data['all_socials'] ) ) { $localize_data['all_socials'] = $this->get_all_socials(); } if ( isset( $localize_data['icons']['socials'] ) ) { return $localize_data; } $icons = array(); $dir = new \DirectoryIterator( BRANDY_TEMPLATE_DIR . self::$path_to_icons ); foreach ( $dir as $fileinfo ) { if ( ! $fileinfo->isDot() ) { $types = array( 'default', 'custom' ); foreach ( $types as $type ) { $file_name = $fileinfo->getFilename(); $file_path = BRANDY_TEMPLATE_DIR . self::$path_to_icons . "$file_name/$type.php"; $icon_name = basename( $file_name, '.php' ); if ( $file_name && file_exists( $file_path ) ) { if ( empty( $icons ) ) { $icons = array(); } ob_start(); require $file_path; $icon_data = ob_get_contents(); ob_end_clean(); $icons[ $icon_name ][ $type ] = $icon_data; } } } } $localize_data['icons']['socials'] = $icons; return $localize_data; } /** * All socials */ public static function get_all_socials() { return array( array( 'id' => 'facebook', 'label' => 'Facebook', 'url' => 'https://www.facebook.com/', 'icon' => 'facebook', ), array( 'id' => 'instagram', 'label' => 'Instagram', 'url' => 'https://www.instagram.com/', 'icon' => 'instagram', ), array( 'id' => 'linkedin', 'label' => 'LinkedIn', 'url' => 'https://www.linkedin.com/', 'icon' => 'linkedin', ), array( 'id' => 'youtube', 'label' => 'Youtube', 'url' => 'https://www.youtube.com/', 'icon' => 'youtube', ), array( 'id' => 'snapchat', 'label' => 'Snapchat', 'url' => 'https://www.snapchat.com/', 'icon' => 'snapchat', ), // Not yet array( 'id' => 'pinterest', 'label' => 'Pinterest', 'url' => 'https://www.pinterest.com/', 'icon' => 'pinterest', ), array( 'id' => 'github', 'label' => 'Github', 'url' => 'https://www.github.com/', 'icon' => 'github', ), array( 'id' => 'tiktok', 'label' => 'Tiktok', 'url' => 'https://www.tiktok.com/', 'icon' => 'tiktok', ), array( 'id' => 'telegram', 'label' => 'telegram', 'url' => 'https://www.telegram.com/', 'icon' => 'telegram', ), array( 'id' => 'whatsapp', 'label' => 'Whatsapp', 'url' => 'https://www.whatsapp.com/', 'icon' => 'whatsapp', ), array( 'id' => 'twitter', 'label' => 'Twitter', 'url' => 'https://www.twitter.com/', 'icon' => 'twitter', ), ); } }