'; protected function __construct() { $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', ), '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' => 'Default', 'value' => 'default', ), array( 'label' => 'Custom', 'value' => 'custom', ), ), 'render_options' => array( 'type' => 'force_refresh', ), ), '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, ), 'type' => 'Switcher', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'switcher', 'name' => '--brandy-social-title-display', 'value_path' => array( 'show_title' ), 'enabled_value' => 'block', 'disabled_value' => 'none', ), ), ), ), '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 label', 'brandy' ), 'type' => 'bold', 'show_devices' => true, ), 'value_path' => array( 'show_label' ), 'default_value' => array( 'desktop' => false, 'tablet' => null, 'mobile' => null, ), 'type' => 'Switcher', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'switcher', 'name' => '--brandy-label-display', 'value_path' => array( 'show_label' ), 'enabled_value' => 'block', 'disabled_value' => 'none', ), ), ), ), 'items_direction' => array( 'title' => array( 'text' => __( 'Items direction', 'brandy' ), 'type' => 'bold', 'show_devices' => true, ), 'type' => 'ButtonGroup', 'default_value' => array( 'desktop' => 'horizontal', 'tablet' => null, 'mobile' => null, ), 'options' => array( array( 'value' => 'horizontal', 'label' => __( 'Horizontal', 'brandy' ), ), array( 'value' => 'vertical', 'label' => __( 'Vertical', 'brandy' ), ), ), 'value_path' => array( 'items_direction' ), 'render_options' => array( 'type' => 'data_attribute', 'data' => array( array( 'selector' => '.brandy-social-list', 'name' => 'items-direction-desktop', 'value_path' => array( 'items_direction', 'desktop' ), ), array( 'selector' => '.brandy-social-list', 'name' => 'items-direction-tablet', 'value_path' => array( 'items_direction', 'tablet' ), ), array( 'selector' => '.brandy-social-list', 'name' => 'items-direction-mobile', 'value_path' => array( 'items_direction', 'mobile' ), ), ), ), ), '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, ), 'type' => 'Switcher', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'switcher', 'name' => '--brandy-social-icon-display', 'value_path' => array( 'hide_icon' ), 'enabled_value' => 'none', 'disabled_value' => 'block', ), ), ), ), 'logo_reset' => array( 'title' => array( 'text' => __( 'Social icon', 'brandy' ), 'type' => 'bold', 'show_devices' => true, ), 'type' => 'Reset', 'reset_paths' => array( array( 'logo' ), ), ), 'logo_color' => array( 'title' => array( 'text' => __( 'icon color', 'brandy' ), 'type' => 'normal', ), 'value_path' => array( 'logo', '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, ), ), 'type' => 'ColorGroup', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'color', 'name' => '--brandy-logo-color', 'value_path' => array( 'logo', 'color' ), ), ), ), 'visible_conditions' => array( array( 'value_path' => array( 'icon_color_type' ), 'value' => 'custom', ), ), ), 'logo_background_color' => array( 'title' => array( 'text' => __( 'Background color', 'brandy' ), 'type' => 'normal', ), 'value_path' => array( 'logo', 'background' ), 'default_value' => array( 'normal' => array( 'desktop' => '#ffffff00', 'tablet' => null, 'mobile' => null, ), 'hover' => array( 'desktop' => '#ffffff00', 'tablet' => null, 'mobile' => null, ), ), 'type' => 'ColorGroup', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'color', 'name' => '--brandy-logo-background', 'value_path' => array( 'logo', 'background' ), ), ), ), 'visible_conditions' => array( array( 'value_path' => array( 'icon_color_type' ), 'value' => 'custom', ), ), ), 'logo_stroke_color' => array( 'title' => array( 'text' => __( 'Stroke color', 'brandy' ), 'type' => 'normal', ), 'value_path' => array( 'logo', 'stroke', 'color' ), 'default_value' => array( 'normal' => array( 'desktop' => '#ffffff', 'tablet' => null, 'mobile' => null, ), 'hover' => array( 'desktop' => '#ffffff', 'tablet' => null, 'mobile' => null, ), ), 'type' => 'ColorGroup', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'color', 'name' => '--brandy-logo-stroke-color', 'value_path' => array( 'logo', 'stroke', 'color' ), ), ), ), 'visible_conditions' => array( array( 'value_path' => array( 'icon_color_type' ), 'value' => 'custom', ), ), ), 'logo_stroke_width' => array( 'title' => array( 'text' => __( 'Stroke width', 'brandy' ), 'type' => 'normal', ), 'value_path' => array( 'logo', 'stroke', 'width' ), 'units' => array( 'px' ), 'default_value' => array( 'desktop' => array( 'unit' => 'px', 'min' => 0, 'max' => 20, 'value' => 0, ), 'tablet' => null, 'mobile' => null, ), 'type' => 'Dimension', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'dimension', 'name' => '--brandy-logo-stroke-width', 'value_path' => array( 'logo', 'stroke', 'width' ), ), ), ), 'visible_conditions' => array( array( 'value_path' => array( 'icon_color_type' ), 'value' => 'custom', ), ), ), 'logo_border_radius' => array( 'title' => array( 'text' => __( 'Border radius', 'brandy' ), 'type' => 'normal', ), 'value_path' => array( 'logo', 'border_radius' ), 'units' => array( 'px', '%' ), 'default_value' => array( 'desktop' => array( 'unit' => 'px', 'min' => 0, 'max' => 50, 'value' => 1, ), 'tablet' => null, 'mobile' => null, ), 'type' => 'Dimension', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'dimension', 'name' => '--brandy-logo-border-radius', 'value_path' => array( 'logo', 'border_radius' ), ), ), ), 'visible_conditions' => array( array( 'value_path' => array( 'icon_color_type' ), 'value' => 'custom', ), ), ), 'logo_size' => array( 'title' => array( 'text' => __( 'Icon size', 'brandy' ), 'type' => 'normal', ), 'value_path' => array( 'logo', 'size' ), 'units' => array( 'px' ), 'default_value' => array( 'desktop' => ElementsLoader::get_default_icon_size(), 'tablet' => null, 'mobile' => null, ), 'type' => 'Dimension', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'dimension', 'name' => '--brandy-logo-size', 'value_path' => array( 'logo', 'size' ), ), ), ), ), 'logo_shadow' => array( 'title' => array( 'text' => __( 'Icon shadow', 'brandy' ), 'type' => 'normal', ), 'type' => 'BoxShadow', 'default_value' => array( 'desktop' => array( 'enabled' => false, 'type' => 'custom', 'custom_value' => array( 'color' => '#D9E3F030', 'x' => 1, 'y' => 4, 'blur' => 8, 'spread' => 0, ), ), 'tablet' => null, 'mobile' => null, ), 'value_path' => array( 'logo', 'shadow' ), 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'box_shadow', 'name' => '--brandy-social-box-shadow', 'value_path' => array( 'logo', 'shadow' ), ), ), ), ), 'title_color' => array( 'title' => array( 'text' => __( 'Title 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, ), ), 'type' => 'ColorGroup', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'color', 'name' => '--brandy-social-title-color', 'value_path' => array( 'title', 'color' ), ), ), ), ), 'title_reset' => array( 'title' => array( 'text' => __( 'Title social', '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' => TypographyService::get_default_typography_value(), 'type' => 'Typography', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'typography', 'name' => '--brandy-social-title-typography', 'value_path' => array( 'title', 'typography' ), ), ), ), ), 'title_distance' => array( 'title' => array( 'text' => __( 'Title distance', '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, ), 'type' => 'Dimension', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'dimension', 'name' => '--brandy-social-title-distance', '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, ), ), 'type' => 'ColorGroup', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'color', 'name' => '--brandy-label-color', 'value_path' => array( 'label', 'color' ), ), ), ), ), 'label_reset' => array( 'title' => array( 'text' => __( 'Label social', 'brandy' ), 'type' => 'bold', 'show_devices' => true, ), 'type' => 'Reset', 'reset_paths' => array( array( 'label' ), ), ), 'label_typography' => array( 'title' => array( 'text' => __( 'Typography', 'brandy' ), 'type' => 'normal', ), 'value_path' => array( 'label', 'typography' ), 'default_value' => TypographyService::get_default_typography_value(), 'type' => 'Typography', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'typography', 'name' => '--brandy-label-typography', 'value_path' => array( 'label', 'typography' ), ), ), ), ), 'label_distance' => array( 'title' => array( 'text' => __( 'Label distance', 'brandy' ), 'type' => 'normal', ), 'value_path' => array( 'label', 'distance' ), 'default_value' => array( 'desktop' => array( 'unit' => 'px', 'min' => 1, 'max' => 30, 'value' => 3, ), 'tablet' => null, 'mobile' => null, ), 'type' => 'Dimension', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'dimension', 'name' => '--brandy-label-distance', 'value_path' => array( 'label', 'distance' ), ), ), ), ), 'item_reset' => array( 'title' => array( 'text' => __( 'Item social', 'brandy' ), 'type' => 'bold', 'show_devices' => true, ), 'type' => 'Reset', 'reset_paths' => array( array( 'item' ), ), ), '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, ), ), 'type' => 'ColorGroup', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'color', 'name' => '--brandy-item-background', 'value_path' => array( 'item', 'background' ), ), ), ), ), 'item_stroke_color' => array( 'title' => array( 'text' => __( 'Stroke color', 'brandy' ), 'type' => 'normal', ), 'value_path' => array( 'item', 'stroke', 'color' ), 'default_value' => array( 'normal' => array( 'desktop' => '#ffffff', 'tablet' => null, 'mobile' => null, ), 'hover' => array( 'desktop' => '#ffffff', 'tablet' => null, 'mobile' => null, ), ), 'type' => 'ColorGroup', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'color', 'name' => '--brandy-item-stroke-color', 'value_path' => array( 'item', 'stroke', 'color' ), ), ), ), ), 'item_stroke_width' => array( 'title' => array( 'text' => __( 'Stroke width', 'brandy' ), 'type' => 'normal', ), 'value_path' => array( 'item', 'stroke', 'width' ), 'default_value' => array( 'desktop' => array( 'unit' => 'px', 'min' => 0, 'max' => 20, 'value' => 0, ), 'tablet' => null, 'mobile' => null, ), 'type' => 'Dimension', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'dimension', 'name' => '--brandy-item-border-width', 'value_path' => array( 'item', 'stroke', 'width' ), ), ), ), ), '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' => 1, ), 'tablet' => null, 'mobile' => null, ), 'type' => 'Dimension', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'dimension', 'name' => '--brandy-item-border-radius', 'value_path' => array( 'item', 'border_radius' ), ), ), ), ), 'item_spacing' => array( 'title' => array( 'text' => __( 'Item spacing', 'brandy' ), 'type' => 'normal', ), 'value_path' => array( 'item', 'spacing' ), 'default_value' => array( 'desktop' => array( 'unit' => 'px', 'min' => 1, 'max' => 100, 'value' => 10, ), 'tablet' => null, 'mobile' => null, ), 'type' => 'Dimension', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'dimension', 'name' => '--brandy-item-spacing', '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' => 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' => '--brandy-item-padding', '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, ), 'type' => 'Spacing', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'spacing', 'name' => '--brandy-margin', 'value_path' => array( 'margin' ), ), ), ), ), ); } protected function register_layout() { return array( 'general' => array( 'sections' => array( array( 'components' => array( 'list_socials' ), ), array( 'components' => array( 'icon_color_type' ), ), 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( 'logo_reset', 'logo_color', 'logo_background_color', 'logo_stroke_color', 'logo_stroke_width', 'logo_border_radius', 'logo_size', 'logo_shadow' ), ), array( 'components' => array( 'title_reset', 'title_color', 'title_typography', 'title_distance', ), ), array( 'components' => array( 'label_reset', 'label_color', 'label_typography', 'label_distance', ), ), array( 'components' => array( 'item_reset', 'item_background_color', 'item_stroke_color', 'item_stroke_width', 'item_border_radius', 'item_spacing', 'item_padding', ), ), 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', 'visible' => true, ), array( 'id' => 'instagram', 'label' => 'Instagram', 'url' => 'https://www.instagram.com/', 'icon' => 'instagram', 'visible' => true, ), array( 'id' => 'linkedin', 'label' => 'LinkedIn', 'url' => 'https://www.linkedin.com/', 'icon' => 'linkedin', 'visible' => true, ), array( 'id' => 'youtube', 'label' => 'Youtube', 'url' => 'https://www.youtube.com/', 'icon' => 'youtube', 'visible' => true, ), array( 'id' => 'snapchat', 'label' => 'Snapchat', 'url' => 'https://www.snapchat.com/', 'icon' => 'snapchat', 'visible' => true, ), // Not yet array( 'id' => 'pinterest', 'label' => 'Pinterest', 'url' => 'https://www.pinterest.com/', 'icon' => 'pinterest', 'visible' => true, ), array( 'id' => 'github', 'label' => 'Github', 'url' => 'https://www.github.com/', 'icon' => 'github', 'visible' => true, ), array( 'id' => 'tiktok', 'label' => 'Tiktok', 'url' => 'https://www.tiktok.com/', 'icon' => 'tiktok', 'visible' => true, ), array( 'id' => 'telegram', 'label' => 'telegram', 'url' => 'https://www.telegram.com/', 'icon' => 'telegram', 'visible' => true, ), array( 'id' => 'whatsapp', 'label' => 'Whatsapp', 'url' => 'https://www.whatsapp.com/', 'icon' => 'whatsapp', 'visible' => true, ), array( 'id' => 'twitter', 'label' => 'Twitter', 'url' => 'https://www.twitter.com/', 'icon' => 'twitter', 'visible' => true, ), ); } }