sofol_portfolio

<?php
namespace SofolCore\Widgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Scheme_Color;
use Elementor\Scheme_Typography;
use Elementor\Group_Control_Typography;
use WP_Query;


// Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}


/**
 * Text Typing Effect
 *
 * Elementor widget for text typing effect.
 *
 * @since 1.7.0
 */
class Sofol_portfolio extends Widget_Base {

    public function get_name() {
        return 'sofol_portfolio_section';
    }

    public function get_title() {
        return esc_html__( 'Portfolio', 'sofol-core' );
    }

    public function get_icon() {
        return 'eicon-featured-image';
    }

    public function get_keywords() {
        return [ 'portfolio', 'image', 'sofol' ];
    }

    public function get_categories() {
        return [ 'sofol-elements' ];
    }

    protected function _register_controls() {

       // ---------------------------- Filtering ----------
        $this->start_controls_section(
            'portfolio_filter', [
                'label' => __( 'Portfolio Settings', 'sofol-core' ),
            ]
        );

        $this->add_control(
            'portfolio_section_title', [
                'label' => esc_html__( 'Section Title', 'sofol-core' ),
                'type' => Controls_Manager::TEXT,
                'label_block' => true,
                'default' => 'WORK HISTORY'
            ]
        );
        $this->add_control(
            'portfolio_section_des', [
                'label' => esc_html__( 'Section Descrition', 'sofol-core' ),
                'type' => Controls_Manager::TEXTAREA,
                'label_block' => true,
                'default' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente inventore, quibusdam vel repellat maxime rerum quos .'
            ]
        );
        $this->add_control(
            'item_show', [
                'label' => esc_html__( 'How many portoflio item shows', 'sofol-core' ),
                'type' => Controls_Manager::NUMBER,
                'label_block' => true,
                'default' => '9'
            ]
        );
        $this->add_control(
            'item_order', [
                'label' => esc_html__( 'Select Your Order.', 'sofol-core' ),
                'type' => Controls_Manager::SELECT,
                'options' => [
                    'ASC' => 'ASC',
                    'DESC' => 'DESC'
                ],
                'default' => 'ASC'
            ]
        );


        $this->end_controls_section();



        /**
         * Style Tab
         * ------------------------------ Style Title ------------------------------
         */
        $this->start_controls_section(
            'style_title', [
                'label' => esc_html__( 'Style Item Title', 'sofol-core' ),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'color_title', [
                'label' => esc_html__( 'Item Title Color', 'sofol-core' ),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .portfolio-area .site-heading h2' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(), [
                'name' => 'typography_title',
                'scheme' => Scheme_Typography::TYPOGRAPHY_1,
                'selector' => '{{WRAPPER}} .portfolio-area .site-heading h2',
            ]
        );

        $this->end_controls_section();


        //------------------------------ Gradient Color ------------------------------
        $this->start_controls_section(
            'style_background',
            [
                'label' => esc_html__( 'Background', 'sofol-core' ),
                'tab' => Controls_Manager::TAB_STYLE
            ]
        );

        // Gradient Color
        $this->add_control(
            'bg_color', [
                'label' => esc_html__( 'Background Color', 'sofol-core' ),
                'type' => Controls_Manager::COLOR,
                'defualt' => '#fff',
                'selectors' => [
                    '{{WRAPPER}} .portfolio-area' => 'background: {{VALUE}};',
                ],
            ]
        );

        $this->end_controls_section();
    }

    protected function render() {
        $settings = $this->get_settings();

        $portfolios = new WP_Query(array(
            'post_type'     => 'portfolio',
            'posts_per_page'=> $settings['item_show'],
            'order'     => $settings['item_order']
        ));

        ?>
        <div id="portfolio" class="portfolio-area default-padding bottom-less">
            <div class="container">
                <div class="row">
                    <div class="site-heading text-center">
                        <div class="col-md-8 col-md-offset-2">
                            <?php if(!empty($settings['portfolio_section_title'] )) : ?>
                            <h2><?php echo $settings['portfolio_section_title']; ?></h2>
                            <?php endif; ?>
                            <?php if(!empty($settings['portfolio_section_des'] )) : ?>
                            <p>
                               <?php echo $settings['portfolio_section_des']; ?>
                            </p>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 portfolio-content">
                        <div class="mix-item-menu text-center">
                            <button class="active" data-filter="*">All</button>
                            <?php
                                $cats = get_terms('portfolio_cat');

                                foreach ($cats as $cat) :
                            ?>
                            <button data-filter=".<?php echo $cat->slug; ?>" class=""><?php echo $cat->name; ?></button>
                            <?php endforeach; ?>
                        </div>
                        <!-- End Mixitup Nav-->

                        <div class="row magnific-mix-gallery">
                            <div id="portfolio-grid" class="portfolio-items hover-effect">
                                <?php while ($portfolios->have_posts()) : $portfolios->the_post();

                                $project_cats = get_the_terms( get_the_ID(), 'portfolio_cat' );
                                if ( $project_cats && ! is_wp_error( $project_cats ) ) {
                                    $project_cat_list = array();
                                    foreach ( $project_cats as $cat ) {
                                        $project_cat_list[] = $cat->slug;
                                    }
                                    $project_all_cats = join( " ", $project_cat_list);
                                }
                                else {
                                    $project_all_cats = '';
                                }
                                ?>

                                <div class="pf-item <?php echo $project_all_cats; ?>">
                                    <div class="portfolio-effet">
                                        <div class="thumb">
                                            <?php
                                            if ( has_post_thumbnail() ) :
                                                the_post_thumbnail();
                                            endif;
                                            ?>
                                            <div class="overlay">
                                               <h4><?php the_title(); ?></h4>
                                               <a href="<?php the_post_thumbnail_url('full'); ?>" class="item popup-link"><i class="fa fa-eye"></i></a>
                                                <a href="<?php the_permalink(); ?>" target="_blank"><i class="fa fa-link"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <?php
                                endwhile;
                                wp_reset_postdata();
                                ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Portfolio -->

        <script>
            (function ( $ ) {
                "use strict";
                $(document).ready( function() {

                    $('#portfolio-grid,.blog-masonry').imagesLoaded(function() {

                        /* Filter menu */
                        $('.mix-item-menu').on('click', 'button', function() {
                            var filterValue = $(this).attr('data-filter');
                            $grid.isotope({
                                filter: filterValue
                            });
                        });

                        /* filter menu active class  */
                        $('.mix-item-menu button').on('click', function(event) {
                            $(this).siblings('.active').removeClass('active');
                            $(this).addClass('active');
                            event.preventDefault();
                        });

                        /* Filter active */
                        var $grid = $('#portfolio-grid').isotope({
                            itemSelector: '.pf-item',
                            percentPosition: true,
                            masonry: {
                                columnWidth: '.pf-item',
                            }
                        });

                        /* Filter active */
                        $('.blog-masonry').isotope({
                            itemSelector: '.blog-item',
                            percentPosition: true,
                            masonry: {
                                columnWidth: '.blog-item',
                            }
                        });

                    });


                });
            }( jQuery ));
        </script>

        <?php
    }
}