// cherryPortfolioLayoutPlugin plugin (function($){ var methods = { init : function( options ) { var settings = { call: function(){} } return this.each(function(){ if ( options ){ $.extend(settings, options); } var _this = $(this), ajaxGetNewRequest = null, ajaxGetMoreRequest = null, ajaxGetNewRequestSuccess = true, portfolioContainer = $('.portfolio-container', _this), portfolioList = $('.portfolio-list', portfolioContainer), ajaxLoaderContainer = null, column = portfolioContainer.data('column'), postPerPage = portfolioContainer.data('post-per-page'), itemMargin = parseInt( portfolioContainer.data('item-margin') ), loadingMode = portfolioContainer.data('loading-mode'), fixedHeight = portfolioContainer.data('fixed-height'), listLayout = portfolioContainer.data('list-layout'), template = portfolioContainer.data('template'), postsFormat = portfolioContainer.data('posts-format'), isotopeOptions = { itemSelector : '.portfolio-item', resizable: false, masonry: { columnWidth: Math.floor( $('.portfolio-list', portfolioContainer).width() / column ) } }, currentSlug = '', currentPaginationPage = 1, allPageLenght = 0, allPageLenght_temp = 0, ajaxMoreClicked = false, orderSetting = { order: 'DESC', orderby: 'date' } ; _constructor(); function _constructor(){ if( $('.cherry-portfolio-ajax-loader').length == 0 ){ portfolioContainer.append('
'); ajaxLoaderContainer = $('.cherry-portfolio-ajax-loader'); }else{ ajaxLoaderContainer = $('.cherry-portfolio-ajax-loader'); } ajaxLoaderContainer.css({"display":"block"}).fadeTo(500, 1); if( $('.portfolio-filter', _this)[0] ){ orderSetting = { order: $('.portfolio-filter', _this).data('order-default').toUpperCase(), orderby: $('.portfolio-filter', _this).data('orderby-default') } } ajaxGetNewContent( currentSlug, currentPaginationPage, orderSetting ); allPageLenght = Math.ceil( parseInt($('.portfolio-list', portfolioContainer).data('all-posts-count'))/parseInt( postPerPage ) ); allPageLenght_temp = allPageLenght; addEventsFunction(); } function addEventsFunction(){ $('.portfolio-filter > .filter a', _this).on('click', function(e){ if( !$(this).parent().hasClass('active') ){ $('.portfolio-filter > .filter li', _this).removeClass('active'); $(this).parent().addClass('active'); if(currentSlug !== $(this).data('slug')){ currentPaginationPage = 1; } currentSlug = $(this).data('slug'); ajaxGetNewContent( currentSlug, currentPaginationPage, orderSetting ); } }); $('.portfolio-filter > .order-filter', _this).on('click', 'li', function(){ var $this = $(this); $this.toggleClass('dropdown-state'); }) $('.portfolio-filter > .order-filter', _this).on('click', '[data-order="order"]', function(){ var $this = $(this) , desc_label = $this.data('desc-label') , asc_label = $this.data('asc-label') ; if( $this.hasClass('dropdown-state') ){ $('.current', $this).html( asc_label ); orderSetting.order = 'ASC'; }else{ $('.current', $this).html( desc_label ); orderSetting.order = 'DESC'; } if( 'more-button' == loadingMode ){ currentPaginationPage = 1; } ajaxGetNewContent( currentSlug, currentPaginationPage, orderSetting ); }) $('.portfolio-filter > .order-filter', _this).on('click', '.orderby-list > li', function(){ var $this = $(this) , $parent = $(this).parents('[data-orderby="orderby"]') , $orderList = $parent.siblings('[data-order="order"]') , orderby = $this.data('orderby') ; if( $parent.hasClass('dropdown-state') ){ $parent.removeClass('dropdown-state'); } $('.current', $parent).html( $this.html() ); $('li', $parent).removeClass('active'); $this.addClass('active'); orderSetting.orderby = orderby; if( 'more-button' == loadingMode ){ currentPaginationPage = 1; } ajaxGetNewContent( currentSlug, currentPaginationPage, orderSetting ); }) switch( loadingMode ){ case 'ajax-pagination': $('.portfolio-pagination > ul > li a', _this).on('click', function(e){ ajaxPaginationLinkClickEventFunction( $(this) ); }) $('.portfolio-pagination .page-nav .next-page', _this).on('click', function(e){ ajaxNavigationClickEvent( $(this), 'next' ); }) $('.portfolio-pagination .page-nav .prev-page', _this).on('click', function(e){ ajaxNavigationClickEvent( $(this), 'prev' ); }) break case 'more-button': $('.portfolio-ajax-button .load-more-button a', _this).on('click', function(e){ ajaxMoreButtonClickEventFunction(); }) break } // update columnWidth on window resize jQuery(window).on('resize.portfolio_layout_resize', function(){ mainResizer(); }); } // ajax filter function ajaxGetNewContent( slug, page, order ){ var data = { action: 'get_new_items', value_slug: slug, value_pagination_page: page, post_per_page: postPerPage, loading_mode: portfolioContainer.data('loading-mode'), list_layout: portfolioContainer.data('list-layout'), order_settings: order, template: template, posts_format: postsFormat }; hidePortfolioList(); if( ajaxGetNewRequest != null && ajaxRequestSuccess){ ajaxGetNewRequest.abort(); } ajaxGetNewRequest = $.ajax({ type: 'POST', url: portfolio_type_ajax.url, data: data, cache: false, beforeSend: function(){ ajaxRequestSuccess = false; ajaxLoaderContainer.css({"display":"block"}).fadeTo(500, 1); }, success: function( response ){ ajaxRequestSuccess = true; $('.portfolio-pagination > ul > li a', _this).off('click'); $('.portfolio-pagination .page-nav .next-page', _this).off('click'); $('.portfolio-pagination .page-nav .prev-page', _this).off('click'); $('.portfolio-ajax-button .load-more-button a', _this).off('click') $('.portfolio-pagination, .portfolio-ajax-button', portfolioContainer ).remove(); beforeItemLength = 0; portfolioList = $('.portfolio-list', portfolioContainer); isotopeOptions = { itemSelector : '.portfolio-item', resizable: false, //layoutMode: ( 'masonry-layout' == listLayout ) ? 'masonry' : 'fitRows' , layoutMode: 'masonry' , masonry: { columnWidth: Math.floor( $('.portfolio-list', portfolioContainer).width() / widthLayoutChanger() ) } } var elementsList = $('.portfolio-item', response ) , pagePagination = $('.portfolio-pagination', response ) , pageMoreButton = $('.portfolio-ajax-button', response ) , allPostsCount = $('.portfolio-list', response ).data('all-posts-count') ; allPageLenght = Math.ceil( parseInt( allPostsCount ) / parseInt( postPerPage ) ); switch( listLayout ){ case 'masonry-layout': case 'grid-layout': $('.inner-wrap', elementsList).css({ "margin": Math.floor( itemMargin * 0.5 ) }); $(elementsList).css({ "width": Math.floor( $('.portfolio-list', portfolioContainer).width() / widthLayoutChanger() ) }); portfolioList.html('').isotope( isotopeOptions ).isotope( 'insert', elementsList ); portfolioContainer.append( pagePagination ); portfolioContainer.append( pageMoreButton ); portfolioList.imagesLoaded( function() { portfolioList.isotope( isotopeOptions ) showPortfolioList( beforeItemLength ); jQuery(window).trigger('resize.portfolio_layout_resize'); ajaxLoaderContainer.fadeTo(500, 0, function(){ $(this).css({"display":"none"}); }); }) break; case 'justified-layout': portfolioList.html('').append(elementsList); portfolioContainer.append( pagePagination ); portfolioContainer.append( pageMoreButton ); $(elementsList).each(function( index ){ var $this = $(this) , image_src = $this.data('image-src') , image_width = $this.data('image-width') , image_height = $this.data('image-height') , image_ratio = $this.data('image-ratio') , flex_value = Math.round( image_ratio*100 ) , new_width = Math.round( fixedHeight * image_ratio ) ; if( $('.justified-image', $this)[0] ){ new_height = 'auto'; $('.justified-image', $this).css({ 'width': '100%' , 'height': fixedHeight , 'background-image': 'url(' + image_src + ')' }) }else{ new_height = fixedHeight; $('.inner-wrap', $this).css({ 'background-image': 'url(' + image_src + ')' }) } $this.css({ 'width': new_width + 'px' , 'height': new_height , '-webkit-flex': flex_value + ' 1 ' + new_width + 'px' , '-ms-flex': flex_value + ' 1 ' + new_width + 'px' , 'flex': flex_value + ' 1 ' + new_width + 'px' , margin: Math.ceil(itemMargin*0.5) + 'px' }); }) portfolioList.imagesLoaded( function() { showPortfolioList( beforeItemLength ); ajaxLoaderContainer.fadeTo(500, 0, function(){ $(this).css({"display":"none"}); }); }) break; case 'list-layout': portfolioList.html('').append(elementsList); portfolioContainer.append( pagePagination ); portfolioContainer.append( pageMoreButton ); portfolioList.imagesLoaded( function() { showPortfolioList( beforeItemLength ); ajaxLoaderContainer.fadeTo(500, 0, function(){ $(this).css({"display":"none"}); }); } ) break; } switch( loadingMode ){ case 'ajax-pagination': $('.portfolio-pagination > ul > li a', _this).on('click', function(e){ ajaxPaginationLinkClickEventFunction( $(this) ); }) $('.portfolio-pagination .page-nav .next-page', _this).on('click', function(e){ ajaxNavigationClickEvent( $(this), 'next' ); }); $('.portfolio-pagination .page-nav .prev-page', _this).on('click', function(e){ ajaxNavigationClickEvent( $(this), 'prev' ); }) break case 'more-button': $('.portfolio-ajax-button .load-more-button a', _this).on('click', function(e){ ajaxMoreButtonClickEventFunction(); }) //$('.portfolio-ajax-button .load-more-button', _this).removeClass('disabled'); $('.portfolio-ajax-button .load-more-button', _this).slideDown(); break } // ajax_success - trigger _this.trigger( 'ajax_success' ); CHERRY_API.cherry_portfolio.magnific_popap_init(); }, dataType: 'html' }); } // ajax get more function ajaxGetMore( page, slug, order ){ var data = { action: 'get_more_items', value_pagination_page: page, value_slug: slug, post_per_page: postPerPage, list_layout: portfolioContainer.data('list-layout'), order_settings: order, template: template, posts_format: postsFormat }; if( ajaxGetMoreRequest != null && ajaxRequestSuccess){ ajaxGetMoreRequest.abort(); } ajaxGetMoreRequest = $.ajax({ type: 'POST', url: portfolio_type_ajax.url, data: data, cache: false, beforeSend: function(){ ajaxRequestSuccess = false; ajaxLoaderContainer.css({"display":"block"}).fadeTo(500, 1); }, success: function( response ){ ajaxRequestSuccess = true; ajaxLoaderContainer.fadeTo(500, 0, function(){ $(this).css({"display":"none"}); }); beforeItemLength = $('.portfolio-list .portfolio-item', portfolioContainer).length; var elementsList = $('.portfolio-item', response ) , allPostsCount = $(response).data('all-posts-count'); ; //var allPostsCount = $('.portfolio-list', response ).data('all-posts-count'); allPageLenght = allPageLenght_temp; switch(listLayout){ case 'masonry-layout': case 'grid-layout': var $elems = $(response); elementsList.css({ "width": Math.floor( $('.portfolio-list', portfolioContainer).width() / column ) }); $('.inner-wrap', elementsList).css({ "margin": Math.floor( itemMargin * 0.5 ) }); portfolioList.append( elementsList ).isotope( 'appended', elementsList ); portfolioList.imagesLoaded( function() { portfolioList.isotope( isotopeOptions ) showPortfolioList( beforeItemLength ); }); break; case 'justified-layout': portfolioList.append( elementsList ); $(elementsList).each(function(index){ var $this = $(this) , image_src = $this.data('image-src') , image_width = $this.data('image-width') , image_height = $this.data('image-height') , image_ratio = $this.data('image-ratio') , flex_value = Math.round( image_ratio * 100 ) , new_width = Math.round( fixedHeight * image_ratio ) ; $this.css({ 'width': new_width + 'px' , 'height': fixedHeight , '-webkit-flex': flex_value + ' 1 ' + new_width + 'px' , '-ms-flex': flex_value + ' 1 ' + new_width + 'px' , 'flex': flex_value + ' 1 ' + new_width + 'px' , margin: Math.ceil(itemMargin*0.5) + 'px' }); $('.inner-wrap', $this).css({ 'background-image': 'url(' + image_src + ')' }) }) portfolioList.imagesLoaded( function() { showPortfolioList( beforeItemLength ); ajaxLoaderContainer.fadeTo(500, 0, function(){ $(this).css({"display":"none"}); }); } ) break; case 'list-layout': portfolioList.append( elementsList ); portfolioList.imagesLoaded( function() { showPortfolioList( beforeItemLength ); ajaxLoaderContainer.fadeTo(500, 0, function(){ $(this).css({"display":"none"}); }); } ) break; } // ajax_success - trigger _this.trigger( 'ajax_success' ); CHERRY_API.cherry_portfolio.magnific_popap_init(); }, dataType: 'html' }); } function ajaxPaginationLinkClickEventFunction( clicked ){ if( !clicked.parent().hasClass('active') ){ $('.portfolio-pagination > .page-link > li', _this).removeClass('active'); clicked.parent().addClass('active'); currentPaginationPage = clicked.parent().index() + 1; ajaxGetNewContent( currentSlug, currentPaginationPage, orderSetting ); } } function ajaxNavigationClickEvent( clicked, direction ){ switch(direction){ case 'next': currentPaginationPage++; ajaxGetNewContent( currentSlug, currentPaginationPage, orderSetting ); break case 'prev': currentPaginationPage--; ajaxGetNewContent( currentSlug, currentPaginationPage, orderSetting ); break } } function ajaxMoreButtonClickEventFunction(){ if( currentPaginationPage < allPageLenght ){ currentPaginationPage++; ajaxMoreClicked = true; if( currentPaginationPage == allPageLenght){ $('.portfolio-ajax-button .load-more-button', _this).slideUp(); } ajaxGetMore( currentPaginationPage, currentSlug, orderSetting ); } } function showPortfolioList( index ){ var counter = 1; $('.portfolio-item', portfolioContainer).each(function(){ if( $(this).index() >= index){ show_item( $(this), 100*parseInt(counter) ); counter++; } }) function show_item( itemList, delay ){ var timeOutInterval = setTimeout(function(){ itemList.removeClass('animate-cycle-show'); }, delay ); } } function hidePortfolioList(){ $('.portfolio-item', portfolioContainer).each( function(){ hide_item( $(this), 50*parseInt($(this).index()+1) ); } ) function hide_item(itemList, delay){ var timeOutInterval = setTimeout(function(){ itemList.addClass('animate-cycle-hide'); }, delay ); } } function mainResizer(){ switch(listLayout){ case 'masonry-layout': case 'grid-layout': var newWidth = Math.floor( $('.portfolio-list', portfolioContainer).width() / widthLayoutChanger() ) ; $('.portfolio-list .portfolio-item', portfolioContainer).css({ "width": newWidth }); $('.portfolio-list', portfolioContainer).isotope({ masonry: { columnWidth: newWidth } }); break; case 'list-layout': break; } } function widthLayoutChanger(){ var windowWidth = $(window).width() , columnPerView , widthLayout = 'large' ; if ( windowWidth >= 1200 ) { widthLayout = 'large'; } if ( windowWidth <= 1199 && windowWidth >= 768 ) { widthLayout = 'medium'; } if ( windowWidth <= 767 && windowWidth >= 481) { widthLayout = 'small'; } if ( windowWidth <= 480 ) { widthLayout = 'extra-small'; } switch ( widthLayout ) { case 'large': columnPerView = column; break case 'medium': columnPerView = Math.ceil( column / 2 ); break case 'small': columnPerView = Math.ceil( column / 4 ); break case 'extra-small': columnPerView = 1; break } return columnPerView; } }); }, destroy : function( ) { }, update : function( content ) { } }; $.fn.cherryPortfolioLayoutPlugin = function( method ){ if ( methods[method] ) { return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 )); } else if ( typeof method === 'object' || ! method ) { return methods.init.apply( this, arguments ); } else { $.error( 'Method with name ' + method + ' is not exist for jQuery.cherryPortfolioLayoutPlugin' ); } }//end plugin })(jQuery)