if (typeof wdi_front == 'undefined') { wdi_front = { type: 'not_declared' }; } wdi_front.detectEvent = function () { var isMobile = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase())); if (isMobile) { return "touchend"; } else { return 'click'; } } wdi_front.show_alert = function (message) { if (wdi_front_messages.show_alerts) { alert(message); } else { console.log('%c' + message, "color:#cc0000;"); } } wdi_front.globalInit = function () { var num = wdi_front['feed_counter']; if (typeof wdi_ajax.ajax_response != "undefined") { var init_feed_counter = wdi_feed_counter_init.wdi_feed_counter_init; } else { var init_feed_counter = 0; } for (var i = init_feed_counter; i <= num; i++) { var currentFeed = new WDIFeed(window['wdi_feed_' + i]); /*initializing instagram object which will handle all instagram api requests*/ currentFeed.instagram = new WDIInstagram(); /** * this object will be passed to filtering function of currentFeed.instagram as second parameter * @type {Object} */ currentFeed.instagram.filterArguments = { feed: currentFeed }; currentFeed.instagram.filters = [ { 'where': 'getUserRecentMedia', 'what': function (response, args, cArgs) { return args.feed.conditionalFilter(response, cArgs); } }, { 'where': 'getTagRecentMedia', 'what': function (response, args, cArgs) { return args.feed.conditionalFilter(response, cArgs); } }, { 'where': 'getRecentLikedMedia', 'what': function (response, args, cArgs) { return args.feed.conditionalFilter(response, cArgs); } }, { 'where': 'requestByUrl', 'what': function (response, args, cArgs) { return args.feed.conditionalFilter(response, cArgs); } },]; currentFeed.instagram.addToken(currentFeed['feed_row']['access_token']); wdi_front.access_token = currentFeed['feed_row']['access_token']; currentFeed.dataStorageRaw = []; //stores all getted data from instagram api currentFeed.dataStorage = []; //stores all avialable data currentFeed.dataStorageList = []; //? currentFeed.allResponseLength = 0; //? //number of instagram objects which has been got by single request currentFeed.currentResponseLength = 0; //temprorary usersData which is uses in case when getted data is smaller then needed currentFeed.temproraryUsersData = []; currentFeed.removedUsers = 0; /*flag for indicating that not all images are loaded yet*/ currentFeed.nowLoadingImages = true; currentFeed.imageIndex = 0; //index for image indexes currentFeed.resIndex = 0; //responsive indexes used for pagination currentFeed.currentPage = 1; //pagination page number currentFeed.userSortFlags = []; //array for descripbing user based filter options currentFeed.customFilterChanged = false; //flag to notice filter change, onclick on username /** * This variable describes after how many requests program will stop searching for content * this number is very important and should not be set too high, because when feed has conditional filter * and filtered items are rare then the program will recursively request new photos and will filter them * if no image was fount it will go into infinite loop if feed images are "infinite" ( very huge number ) * and if requests count in 1 hour exeed 5000 instagram will block access token for one hour * * @type {Number} */ currentFeed.maxConditionalFiltersRequestCount = 10; /** * This variable shows us how many times program has been recursively called, * it changes it value within filtering function, and resets itself to 0 when feed is being displayed * * @type {Number} */ currentFeed.instagramRequestCounter = 0; /** * flag: false initially, becomes true after first request, no matter if there is response or not * */ currentFeed.mediaRequestsDone = false; /** * This array stores data from each request, * it is used to determine and remove duplicate photos caused by multiple hashtags * it is resetted to its inital [] value after displaying feed * * @type {Array} */ currentFeed.conditionalFilterBuffer = []; currentFeed.stopInfiniteScrollFlag = false; if (currentFeed.feed_row.feed_type == 'masonry') { currentFeed.displayedData = []; } //if pagination is on then set pagination parameters if (currentFeed.feed_row.feed_display_view == 'pagination') { currentFeed.feed_row.resort_after_load_more = 0; if (currentFeed.feed_row.feed_type != 'image_browser') { currentFeed.feed_row.load_more_number = parseInt(currentFeed.feed_row.pagination_per_page_number); currentFeed.feed_row.number_of_photos = (1 + parseInt(currentFeed.feed_row.pagination_preload_number)) * currentFeed.feed_row.load_more_number; } else { currentFeed.feed_row.number_of_photos = 1 + parseInt(currentFeed.feed_row.image_browser_preload_number); currentFeed.feed_row.load_more_number = parseInt(currentFeed.feed_row.image_browser_load_number); } currentFeed.freeSpaces = (Math.floor(currentFeed.feed_row.pagination_per_page_number / currentFeed.feed_row.number_of_columns) + 1) * currentFeed.feed_row.number_of_columns - currentFeed.feed_row.pagination_per_page_number; } else { currentFeed.freeSpaces = 0; } //initializing function for lightbox currentFeed.galleryBox = function (image_id) { wdi_spider_createpopup(wdi_url.ajax_url + '?gallery_id=' + this.feed_row['id'] + '&image_id=' + image_id, wdi_front.feed_counter, this.feed_row['lightbox_width'], this.feed_row['lightbox_height'], 1, 'testpopup', 5, this); } //calling responive javascript wdi_responsive.columnControl(currentFeed); //if feed type is masonry then trigger resize event for building proper column layout if (currentFeed.feed_row.feed_type == 'masonry') { jQuery(window).trigger('resize'); } wdi_front.bindEvents(currentFeed); window['wdi_feed_' + i] = currentFeed; //initializing each feed wdi_front.init(currentFeed); } //endfor } wdi_front.init = function (currentFeed) { jQuery('.wdi_js_error').remove(); //some varables used in code currentFeed.photoCounter = currentFeed.feed_row["number_of_photos"]; if (currentFeed.feed_row.liked_feed == 'liked') { currentFeed.feed_users = ['self']; // do nothing, } else if (wdi_front.isJsonString(currentFeed.feed_row.feed_users)) { /** * Contains username and user_id of each user * @type {[Array} */ currentFeed.feed_users = JSON.parse(currentFeed.feed_row.feed_users); /** * Check if feed user has no id for some reason then update user * and after updating them initialize feed */ if (wdi_front.updateUsersIfNecessary(currentFeed)) { return; } ; } else { wdi_front.show_alert(wdi_front_messages.invalid_users_format); return; } //wdi_front.loadInstagramMedia( currentFeed, currentFeed.feed_row.number_of_photos); currentFeed.dataCount = currentFeed.feed_users.length; //1 in case of self feed for (var i = 0; i < currentFeed.dataCount; i++) { wdi_front.instagramRequest(i, currentFeed); } if (currentFeed.feed_row["number_of_photos"] > 0) { wdi_front.ajaxLoader(currentFeed); } //setting feed name if (currentFeed['feed_row']['display_header'] === '1') { wdi_front.show('header', currentFeed); } if (currentFeed['feed_row']['show_usernames'] === '1') { wdi_front.show('users', currentFeed); } } /** * Checks if given string is JSON string * @param {String} str [string to check] * @return {Boolean} [true or false] */ wdi_front.isJsonString = function (str) { try { JSON.parse(str); } catch (e) { return false; } return true; } /** * Makes an ajax request for given user from feed_users array * if response is ok then calls saveUserData function * if liked media to show, feed user is self * @param {Number} id [index of user in current_feed.feed_users array] * @param {Object} currentFeed */ wdi_front.instagramRequest = function (id, currentFeed) { var feed_users = currentFeed.feed_users, _this = this; if (typeof feed_users[id] === 'string' && feed_users[id] === 'self') { // self liked media currentFeed.instagram.getRecentLikedMedia({ success: function (response) { currentFeed.mediaRequestsDone = true; response = _this.checkMediaResponse(response); if (response != false) { _this.saveSelfUserData(response, currentFeed); } } }); } else if (this.getInputType(feed_users[id]['username']) == 'hashtag') { currentFeed.instagram.getTagRecentMedia(this.stripHashtag(feed_users[id]['username']), { success: function (response) { currentFeed.mediaRequestsDone = true; response = _this.checkMediaResponse(response); if (response != false) { _this.saveUserData(response, currentFeed.feed_users[id], currentFeed); } } }); } else if (this.getInputType(feed_users[id]['username']) == 'user') { currentFeed.instagram.getUserRecentMedia(feed_users[id]['id'], { success: function (response) { currentFeed.mediaRequestsDone = true; response = _this.checkMediaResponse(response); if (response != false) { _this.saveUserData(response, currentFeed.feed_users[id], currentFeed); } } }); } } /** * Returns true is given string starts with dash ( # ) * @param {String} str * @return {Boolean} [true or false] */ wdi_front.isHashtag = function (str) { return (str[0] === '#'); } /* * Saves each user data on seperate index in currentFeed.usersData array * And also checks if all data form all users is already avialable if yes it displays feed */ wdi_front.saveUserData = function (data, user, currentFeed) { data['username'] = user.username; data['user_id'] = user.id; //checking if user type is hashtag then manually add hashtag to each object, for later use //hashtag based filters if (data['user_id'][0] === '#') { data['data'] = wdi_front.appendRequestHashtag(data['data'], data['user_id']); } currentFeed.usersData.push(data); currentFeed.currentResponseLength = wdi_front.getArrayContentLength(currentFeed.usersData, 'data'); currentFeed.allResponseLength += currentFeed.currentResponseLength; if (currentFeed.dataCount == currentFeed.usersData.length) { //if getted objects is not enough then recuest new ones if (currentFeed.currentResponseLength < currentFeed.feed_row.number_of_photos && !wdi_front.userHasNoPhoto(currentFeed)) { //console.log('initial recursion'); /*here we are calling loadMore function out of recursion cycle, after this initial-keep call loadMore will be called with 'initial' recursively until the desired number of photos is reached if possible*/ wdi_front.loadMore('initial-keep', currentFeed); } else { //display feed wdi_front.displayFeed(currentFeed); //when all data us properly displayed check for any active filters and then apply them wdi_front.applyFilters(currentFeed); /*removing load more button of feed has finished*/ if (!wdi_front.activeUsersCount(currentFeed)) { if (currentFeed.feed_row.feed_display_view == 'load_more_btn') { var feed_container = jQuery('#wdi_feed_' + currentFeed.feed_row.wdi_feed_counter); feed_container.find('.wdi_load_more').addClass('wdi_hidden'); feed_container.find('.wdi_spinner').addClass('wdi_hidden'); } } ; } } } /* * Saves self user data on separate index in currentFeed.usersData array * And also checks if all data form all users is already avialable if yes it displays feed */ wdi_front.saveSelfUserData = function (data, currentFeed) { //keep empty for self feed data['username'] = ''; data['user_id'] = ''; currentFeed.usersData.push(data); currentFeed.currentResponseLength = wdi_front.getArrayContentLength(currentFeed.usersData, 'data'); currentFeed.allResponseLength += currentFeed.currentResponseLength; if (currentFeed.dataCount == currentFeed.usersData.length) { //if retrieved objects are not enough then request new ones if (currentFeed.currentResponseLength < currentFeed.feed_row.number_of_photos && !wdi_front.userHasNoPhoto(currentFeed)) { //console.log('initial recursion'); /*here we are calling loadMore function out of recursion cycle, after this initial-keep call loadMore will be called with 'initial' recursively until the desired number of photos is reached if possible*/ wdi_front.loadMore('initial-keep', currentFeed); } else { //display feed wdi_front.displayFeed(currentFeed); //when all data us properly displayed check for any active filters and then apply them wdi_front.applyFilters(currentFeed); /*removing load more button of feed has finished*/ if (!wdi_front.activeUsersCount(currentFeed)) { if (currentFeed.feed_row.feed_display_view == 'load_more_btn') { var feed_container = jQuery('#wdi_feed_' + currentFeed.feed_row.wdi_feed_counter); feed_container.find('.wdi_load_more').addClass('wdi_hidden'); feed_container.find('.wdi_spinner').addClass('wdi_hidden'); } } ; } } } /** * checks weather all feed users have any photos after first time request */ wdi_front.userHasNoPhoto = function (currentFeed, cstData) { var counter = 0; var data = currentFeed.usersData; if (typeof cstData != 'undefined') { data = cstData; } for (var i = 0; i < data.length; i++) { if (currentFeed.feed_row.liked_feed === 'liked') { if (typeof data[i]['pagination']['next_max_like_id'] == 'undefined') { counter++ } } else { if (typeof data[i]['pagination']['next_max_id'] == 'undefined') { counter++ } } } if (counter == data.length) { return 1; } else { return 0; } } /* *gives each instagram object custom hashtag parameter, which is used for searching image/video */ wdi_front.appendRequestHashtag = function (data, hashtag) { for (var i = 0; i < data.length; i++) { data[i]['wdi_hashtag'] = hashtag; } return data; } /* * sorts data based on user choice and displays feed * also checks if one request is not enough for displaying all images user wanted * it recursively calls wdi_front.loadMore() until the desired number of photos is reached */ wdi_front.displayFeed = function (currentFeed, load_more_number) { if (currentFeed.customFilterChanged == false) { //sorting data... var data = wdi_front.feedSort(currentFeed, load_more_number); } //becomes true when user clicks in frontend filter //if isset to true then loadmore recursion would not start var frontendCustomFilterClicked = currentFeed.customFilterChanged; // if custom filter changed then display custom data if (currentFeed.customFilterChanged == true) { var data = currentFeed.customFilteredData; //parsing data for lightbox currentFeed.parsedData = wdi_front.parseLighboxData(currentFeed, true); } //storing all sorted data in array for later use in user based filters if (currentFeed.feed_row.resort_after_load_more != '1') { // filter changes when user clicks to usernames in header // at that point displayFeed triggers but we don't have any new data so // we are not adding new data to our list if (currentFeed.customFilterChanged == false) { currentFeed.dataStorageList = currentFeed.dataStorageList.concat(data); } } else { // filter changes when user clicks to usernames in header // at that point displayFeed triggers but we don't have any new data so // we are not adding new data to our list if (currentFeed.customFilterChanged == false) { currentFeed.dataStorageList = data; } } //checking feed_type and calling proper rendering functions if (currentFeed.feed_row.feed_type == 'masonry') { wdi_front.masonryDisplayFeedItems(data, currentFeed); } if (currentFeed.feed_row.feed_type == 'thumbnails' || currentFeed.feed_row.feed_type == 'blog_style' || currentFeed.feed_row.feed_type == 'image_browser') { wdi_front.displayFeedItems(data, currentFeed); } //recursively calling load more to get photos var dataLength = wdi_front.getDataLength(currentFeed); if (dataLength < currentFeed.photoCounter && !frontendCustomFilterClicked && currentFeed.instagramRequestCounter <= currentFeed.maxConditionalFiltersRequestCount && !wdi_front.allDataHasFinished(currentFeed)) { wdi_front.loadMore('', currentFeed); } else { wdi_front.allImagesLoaded(currentFeed); } /** * if maximum number of requests are reached then stop laoding more images and show images which are available * @param {Number} currentFeed.instagramRequestCounter > currentFeed.maxConditionalFiltersRequestCount [description] * @return {Boolean} */ if (currentFeed.instagramRequestCounter > currentFeed.maxConditionalFiltersRequestCount) { wdi_front.allImagesLoaded(currentFeed); //if no data was received then if (data.length == 0) { //if feed_display_view is set to infinite scroll then after reaching the limit once set this flag to false //this will stop infinite scrolling and will not load any images even when scrolling currentFeed.stopInfiniteScrollFlag = true; } } //checking if display_view is pagination and we are not on the last page then enable //last page button if (currentFeed.feed_row.feed_display_view == 'pagination' && currentFeed.currentPage < currentFeed.paginator) { jQuery('#wdi_feed_' + currentFeed.feed_row.wdi_feed_counter).find('#wdi_last_page').removeClass('wdi_disabled'); } // reset instagram request counter to zero for next set of requests currentFeed.instagramRequestCounter = 0; //reset conditional filter buffer for the next bunch of requests currentFeed.conditionalFilterBuffer = []; //if there are any missing images in header then replace them with new ones if possible wdi_front.updateUsersImages(currentFeed); // /** // * Enable image lazy laoding if pagination is not enabeled because pagination has option for preloading images // * which is the opposide of lazy load // */ // if( currentFeed.feed_row.feed_display_view != 'pagination' ){ // jQuery(function() { // jQuery('img.wdi_img').lazyload({ // skip_invisible : false, // threshold : 400 // }); // }); // } } /** * checks if user images in header have empty source or source is missing.png then if it is available data * then update source * @param {Object} currentFeed [description] */ wdi_front.updateUsersImages = function (currentFeed) { var elements = jQuery('#wdi_feed_' + currentFeed.feed_row.wdi_feed_counter).find('.wdi_single_user .wdi_user_img_wrap img'); elements.each(function () { if (jQuery(this).attr('src') == wdi_url.plugin_url + '../images/missing.png' || jQuery(this).attr('src') == '') { //console.log('missing'); if (currentFeed.feed_row.liked_feed == 'liked') { return; } for (var j = 0; j < currentFeed.usersData.length; j++) { if (currentFeed.usersData[j]['username'] == jQuery(this).parent().parent().find('h3').text()) { if (currentFeed.usersData[j]['data'].length != 0) { jQuery(this).attr('src', currentFeed.usersData[j]['data'][0]['images']['thumbnail']['url']); } } } } }); } /** * Displays data in masonry layout * @param {Object} data data to be displayed * @param {Object} currentFeed */ wdi_front.masonryDisplayFeedItems = function (data, currentFeed) { var masonryColEnds = []; var masonryColumns = []; if (jQuery('#wdi_feed_' + currentFeed.feed_row.wdi_feed_counter + " .wdi_feed_wrapper").length == 0) { //no feed in DOM, ignore return; } jQuery('#wdi_feed_' + currentFeed.feed_row['wdi_feed_counter'] + ' .wdi_masonry_column').each(function () { //if resorte after load more is on then reset columns on every load more if (currentFeed.feed_row.resort_after_load_more == 1) { jQuery(this).html(''); currentFeed.imageIndex = 0; } //if custom filter is set or changed then reset masonry columns if (currentFeed.customFilterChanged == true) { jQuery(this).html(''); currentFeed.imageIndex = 0; } //check if pagination is enabled then each page should have resetted colEnds //else give previous colEnds if (currentFeed.feed_row.feed_display_view == 'pagination') { masonryColEnds.push(0); } else { masonryColEnds.push(jQuery(this).height()); } masonryColumns.push(jQuery(this)); }); //if custom filter is set or changed then reset masonry columns if (currentFeed.customFilterChanged == true) { currentFeed.customFilterChanged = false; } //loop for displaying items for (var i = 0; i < data.length; i++) { currentFeed.displayedData.push(data[i]); /*carousel feature*/ if (data[i]['type'] == 'image') { var photoTemplate = wdi_front.getPhotoTemplate(currentFeed); } else if(data[i].hasOwnProperty('videos')) { var photoTemplate = wdi_front.getVideoTemplate(currentFeed); } else{ var photoTemplate = wdi_front.getSliderTemplate(currentFeed); } var rawItem = data[i]; var item = wdi_front.createObject(rawItem, currentFeed); var html = photoTemplate(item); //find column with minumum height and append to it new object var shortCol = wdi_front.array_min(masonryColEnds); var imageResolution = wdi_front.getImageResolution(data[i]); masonryColumns[shortCol['index']].html(masonryColumns[shortCol['index']].html() + html); masonryColEnds[shortCol['index']] += masonryColumns[shortCol['index']].width() * imageResolution; currentFeed.imageIndex++; //changing responsive indexes for pagination if (currentFeed.feed_row.feed_display_view == 'pagination') { if ((i + 1) % currentFeed.feed_row.pagination_per_page_number === 0) { currentFeed.resIndex += currentFeed.freeSpaces + 1; } else { currentFeed.resIndex++; } } } //binding onload event for ajax loader currentFeed.wdi_loadedImages = 0; var columnFlag = false; currentFeed.wdi_load_count = i; var wdi_feed_counter = currentFeed.feed_row['wdi_feed_counter']; var feed_wrapper = jQuery('#wdi_feed_' + wdi_feed_counter + ' img.wdi_img').on('load', function () { currentFeed.wdi_loadedImages++; checkLoaded(); //calls wdi_responsive.columnControl() which calculates column number on page //and gives feed_wrapper proper column class if (columnFlag === false) { wdi_responsive.columnControl(currentFeed, 1); columnFlag = true; } //Binds caption opening and closing event to each image photo_title/mmmmmm // if (currentFeed.feed_row.feed_type != 'blog_style') { // wdi_responsive.bindMasonryCaptionEvent(jQuery(this).parent().parent().parent().parent().find('.wdi_photo_title'), currentFeed); // } }); checkLoaded(); /** * if feed type is not blog style then after displaying images assign click evetns to their captions * this part of code is a bit differenet from free version because of image lazy loading feature * * in free version events are assigned directly in onload event, but when lazy loading added it cased duplicate event fireing * so event assigning moved to here * */ // if ( currentFeed.feed_row.feed_type != 'blog_style' ){ // jQuery('#wdi_feed_'+currentFeed.feed_row.wdi_feed_counter+' .wdi_photo_title').each(function(){ // wdi_responsive.bindMasonryCaptionEvent(jQuery(this),currentFeed); // }); // } //checks if all iamges have been succesfully loaded then it updates variables for next time use function checkLoaded() { if (currentFeed.wdi_load_count === currentFeed.wdi_loadedImages && currentFeed.wdi_loadedImages != 0) { currentFeed.loadedImages = 0; currentFeed.wdi_load_count = 0; wdi_front.allImagesLoaded(currentFeed); } } //checking if pagination next button was clicked then change page if (currentFeed.paginatorNextFlag == true) { wdi_front.updatePagination(currentFeed, 'next'); } //check if load more done successfully then set infinite scroll flag to false currentFeed.infiniteScrollFlag = false; } /* * Calcuates image resolution */ wdi_front.getImageResolution = function (data) { var originalWidth = data['images']['standard_resolution']['width']; var originalHeight = data['images']['standard_resolution']['height']; var resolution = originalHeight / originalWidth; return resolution; } /* * Calculates data count on global Storage and if custom storage provied * it adds custom storage data count to golbals data count and returns length of all storages */ wdi_front.getDataLength = function (currentFeed, customStorage) { var length = 0; if (typeof customStorage === 'undefined') { for (var j = 0; j < currentFeed.dataStorage.length; j++) { length += currentFeed.dataStorage[j].length; } } else { for (var j = 0; j < customStorage.length; j++) { length += customStorage[j].length; } } return length; } wdi_front.getArrayContentLength = function (array, data) { var sum = 0; for (var i = 0; i < array.length; i++) { if (array[i]['finished'] == 'finished') { continue; } sum += array[i][data].length; } return sum; } /** * Displays data in thumbnail layout * @param {Object} data data to be displayed * @param {Object} currentFeed */ wdi_front.displayFeedItems = function (data, currentFeed) { if (jQuery('#wdi_feed_' + currentFeed.feed_row.wdi_feed_counter + " .wdi_feed_wrapper").length == 0) { //no feed in DOM, ignore return; } //gets ready data, gets data template, and appens it into feed_wrapper var wdi_feed_counter = currentFeed.feed_row['wdi_feed_counter']; var feed_wrapper = jQuery('#wdi_feed_' + wdi_feed_counter + ' .wdi_feed_wrapper'); //if resort_after_pagination is on then rewrite feed data if (currentFeed.feed_row['resort_after_load_more'] === '1') { feed_wrapper.html(''); currentFeed.imageIndex = 0; } //if custom filter is set or changed then reset masonry columns if (currentFeed.customFilterChanged == true) { feed_wrapper.html(''); currentFeed.imageIndex = 0; currentFeed.customFilterChanged = false; } var lastIndex = wdi_front.getImgCount(currentFeed) - data.length - 1; /** * if feed display view is set to pagination then check if the current page has not enough photos to be a complete page then * --currentPage so that after loading new images we stay on the same page and see new images which will be located in that page * also do the same thing when recievied data has lenght equal to zero */ if (currentFeed.feed_row.feed_display_view == 'pagination') { if (jQuery('#wdi_feed_' + currentFeed.feed_row.wdi_feed_counter + ' [wdi_page="' + (currentFeed.currentPage - 1) + '"]').length < currentFeed.feed_row.load_more_number || data.length == 0) { currentFeed.currentPage = (--currentFeed.currentPage <= 1) ? 1 : currentFeed.currentPage; } } for (var i = 0; i < data.length; i++) { if (data[i]['type'] == 'image') { var photoTemplate = wdi_front.getPhotoTemplate(currentFeed); } else if(data[i].hasOwnProperty('videos')) { var photoTemplate = wdi_front.getVideoTemplate(currentFeed); } else{ var photoTemplate = wdi_front.getSliderTemplate(currentFeed); } var rawItem = data[i]; var item = wdi_front.createObject(rawItem, currentFeed); var html = photoTemplate(item); feed_wrapper.html(feed_wrapper.html() + html); currentFeed.imageIndex++; //changing responsive indexes for pagination if (currentFeed.feed_row.feed_display_view == 'pagination') { if ((i + 1) % currentFeed.feed_row.pagination_per_page_number === 0) { currentFeed.resIndex += currentFeed.freeSpaces + 1; } else { currentFeed.resIndex++; } } } //fixing last row in case of full caption is open //for that triggering click twice to open and close caption text that will fix last row /*ttt 1.1.12*/ //jQuery('#wdi_feed_' + currentFeed.feed_row['wdi_feed_counter'] + ' .wdi_feed_wrapper [wdi_index=' + lastIndex + '] .wdi_photo_title').trigger(wdi_front.clickOrTouch); //jQuery('#wdi_feed_' + currentFeed.feed_row['wdi_feed_counter'] + ' .wdi_feed_wrapper [wdi_index=' + lastIndex + '] .wdi_photo_title').trigger(wdi_front.clickOrTouch); //binding onload event for ajax loader currentFeed.wdi_loadedImages = 0; var columnFlag = false; currentFeed.wdi_load_count = i; var wdi_feed_counter = currentFeed.feed_row['wdi_feed_counter']; var feed_wrapper = jQuery('#wdi_feed_' + wdi_feed_counter + ' img.wdi_img').on('load', function () { currentFeed.wdi_loadedImages++; checkLoaded(); //calls wdi_responsive.columnControl() which calculates column number on page //and gives feed_wrapper proper column class if (columnFlag === false) { wdi_responsive.columnControl(currentFeed, 1); columnFlag = true; } // //Binds caption opening and closing event to each image photo_title/mmmmmm // if (currentFeed.feed_row.feed_type != 'blog_style') { // wdi_responsive.bindCaptionEvent(jQuery(this).parent().parent().parent().parent().find('.wdi_photo_title'), currentFeed); // } }); /** * if feed type is not blog style then after displaying images assign click evetns to their captions * this part of code is a bit differenet from free version because of image lazy loading feature * * in free version events are assigned directly in onload event, but when lazy loading added it cased duplicate event fireing * so event assigning moved to here * */ // if ( currentFeed.feed_row.feed_type != 'blog_style' ){ // jQuery('#wdi_feed_'+currentFeed.feed_row.wdi_feed_counter+' .wdi_photo_title').each(function(){ // wdi_responsive.bindCaptionEvent(jQuery(this),currentFeed); // }); // } //checks if all iamges have been succesfully loaded then it updates variables for next time use function checkLoaded() { if (currentFeed.wdi_load_count === currentFeed.wdi_loadedImages && currentFeed.wdi_loadedImages != 0) { currentFeed.loadedImages = 0; currentFeed.wdi_load_count = 0; wdi_front.allImagesLoaded(currentFeed); } } //checking if pagination next button was clicked then change page if (currentFeed.paginatorNextFlag == true) { wdi_front.updatePagination(currentFeed, 'next'); } //check if load more done successfully then set infinite scroll flag to false currentFeed.infiniteScrollFlag = false; } wdi_front.checkFeedFinished = function (currentFeed) { for (var i = 0; i < currentFeed.usersData.length; i++) { if (typeof currentFeed.usersData[i]['finished'] == 'undefined') { return false; } } return true; } wdi_front.sortingOperator = function (sortImagesBy, sortOrder) { var operator; switch (sortImagesBy) { case 'date': { switch (sortOrder) { case 'asc': { operator = function (a, b) { return (a['created_time'] > b['created_time']) ? 1 : -1; } break; } case 'desc': { operator = function (a, b) { return (a['created_time'] > b['created_time']) ? -1 : 1; } break; } } break; } case 'likes': { switch (sortOrder) { case 'asc': { operator = function (a, b) { return (a['likes']['count'] < b['likes']['count']) ? -1 : 1; } break; } case 'desc': { operator = function (a, b) { return (a['likes']['count'] < b['likes']['count']) ? 1 : -1; } break; } } break; } case 'comments': { switch (sortOrder) { case 'asc': { operator = function (a, b) { return (a['comments']['count'] < b['comments']['count']) ? -1 : 1; } break; } case 'desc': { operator = function (a, b) { return (a['comments']['count'] < b['comments']['count']) ? 1 : -1; } break; } } break; } case 'random': { operator = function (a, b) { var num = Math.random(); return (num > 0.5) ? 1 : -1; } break; } } return operator; } /* * Calls smart picker method and then after receiving data it sorts data based on user choice */ wdi_front.feedSort = function (currentFeed, load_more_number) { var sortImagesBy = currentFeed.feed_row['sort_images_by']; var sortOrder = currentFeed.feed_row['display_order']; if (currentFeed.feed_row['resort_after_load_more'] === '1') { currentFeed['data'] = currentFeed['data'].concat(wdi_front.smartPicker(currentFeed, load_more_number)); } else { currentFeed['data'] = wdi_front.smartPicker(currentFeed, load_more_number); } var operator = wdi_front.sortingOperator(sortImagesBy, sortOrder); currentFeed['data'].sort(operator); return currentFeed['data']; } /* * Filters all requested data and takes some amount of data for each user * and stops picking when it reaches number_of_photos limit */ wdi_front.smartPicker = function (currentFeed, load_more_number) { var dataStorage = []; var dataLength = 0; var readyData = []; var perUser = Math.ceil(currentFeed['feed_row']['number_of_photos'] / currentFeed['usersData'].length); var number_of_photos = parseInt(currentFeed['feed_row']['number_of_photos']); var remainder = 0; //check if loadmore was clicked if (load_more_number != '' && typeof load_more_number != 'undefined' && load_more_number != null) { number_of_photos = parseInt(load_more_number); perUser = Math.ceil(number_of_photos / wdi_front.activeUsersCount(currentFeed)); } var sortOperator = function (a, b) { return (a['data'].length > b['data'].length) ? 1 : -1; } var sortOperator1 = function (a, b) { return (a.length() > b.length()) ? 1 : -1; } // storing user data in global dataStoreageRaw variable currentFeed.storeRawData(currentFeed.usersData, 'dataStorageRaw'); //dataStorageRaw var dataStorageRaw = currentFeed['dataStorageRaw'].sort(sortOperator1); //sorts user data desc var usersData = currentFeed['usersData'].sort(sortOperator); //picks data from users and updates pagination in request json //for next time call for (var i = 0; i < usersData.length; i++) { remainder += perUser; /* if data is less then amount for each user then pick all data */ if (dataStorageRaw[i].length() <= remainder) { /* update remainder */ remainder -= dataStorageRaw[i].length(); /* get and store data */ dataStorage.push(dataStorageRaw[i].getData(dataStorageRaw[i].length())); /* update data length */ dataLength += dataStorage[dataStorage.length - 1].length; } else { if (dataLength + remainder > number_of_photos) { remainder = number_of_photos - dataLength; } var pickedData = []; if (currentFeed['auto_trigger'] === false) { pickedData = pickedData.concat(dataStorageRaw[i].getData(remainder)); } else { if (pickedData.length + wdi_front.getDataLength(currentFeed) + wdi_front.getDataLength(currentFeed, dataStorage) < currentFeed['feed_row']['number_of_photos']) { pickedData = pickedData.concat(dataStorageRaw[i].getData(remainder)); } } remainder = 0; dataLength += pickedData.length; dataStorage.push(pickedData); } /*if (usersData[i]['data'].length <= remainder) { var pagination = usersData[i]['pagination']['next_url']; if (usersData[i]['finished'] === undefined) { dataStorage.push(usersData[i]['data']); remainder -= usersData[i]['data'].length; dataLength += usersData[i]['data'].length; } if (usersData[i]['finished'] === undefined) { if (pagination === undefined || pagination === '' || pagination === null) { usersData[i]['finished'] = 'finished'; } } } else { if ((dataLength + remainder) > number_of_photos) { remainder = number_of_photos - dataLength; } var pickedData = []; var indexPuller = 0; for (var j = 0; j < remainder; j++) { if (currentFeed['auto_trigger'] === false) { if (usersData[i]['finished'] === undefined) { pickedData.push(usersData[i]['data'][j]); } } else { if (pickedData.length + wdi_front.getDataLength(currentFeed) + wdi_front.getDataLength(currentFeed, dataStorage) < currentFeed['feed_row']['number_of_photos']) { if (usersData[i]['finished'] === undefined) { pickedData.push(usersData[i]['data'][j]); } } else { indexPuller++; } } } j -= indexPuller; remainder = 0; //updating pagination //pushes picked data into local storage dataLength += pickedData.length; dataStorage.push(pickedData); }*/ } //checks if in golbal storage user already exisit then it adds new data to user old data //else it simple puches new user with it's data to global storage for (i = 0; i < dataStorage.length; i++) { if (typeof currentFeed.dataStorage[i] === 'undefined') { currentFeed.dataStorage.push(dataStorage[i]); } else { currentFeed.dataStorage[i] = currentFeed.dataStorage[i].concat(dataStorage[i]); } } //parsing data for lightbox currentFeed.parsedData = wdi_front.parseLighboxData(currentFeed); //combines together all avialable data in global storage and returns it for (i = 0; i < dataStorage.length; i++) { readyData = readyData.concat(dataStorage[i]); } return readyData; } /* * returns json object for inserting photo template */ wdi_front.createObject = function (obj, currentFeed) { var caption = (obj['caption'] != null) ? obj['caption']['text'] : ' '; var image_url = ''; var videoUrl = ''; if (window.innerWidth >= currentFeed.feed_row.mobile_breakpoint) { image_url = obj['images']['standard_resolution']['url']; if (currentFeed.feed_row.feed_type == 'blog_style' || currentFeed.feed_row.feed_type == 'image_browser') { image_url = obj['link'] + 'media?size=l'; } if (obj['type'] == 'video') { /*if pure video, not carousel*/ videoUrl = obj.hasOwnProperty('videos') ? obj['videos']['standard_resolution']['url'] : ''; } } if (window.innerWidth >= currentFeed.feed_row.mobile_breakpoint / 4 && window.innerWidth < currentFeed.feed_row.mobile_breakpoint) { image_url = obj['images']['low_resolution']['url']; if (currentFeed.feed_row.feed_type == 'blog_style' || currentFeed.feed_row.feed_type == 'image_browser') { image_url = obj['link'] + 'media?size=l'; } if (obj['type'] == 'video') { /*if pure video, not carousel*/ videoUrl = obj.hasOwnProperty('videos') ? obj['videos']['low_bandwidth']['url'] : ''; } } if (window.innerWidth < currentFeed.feed_row.mobile_breakpoint / 4) { image_url = obj['images']['thumbnail']['url']; if (currentFeed.feed_row.feed_type == 'blog_style' || currentFeed.feed_row.feed_type == 'image_browser') { image_url = obj['link'] + 'media?size=m'; } if (obj['type'] == 'video') { /*if pure video, not carousel*/ videoUrl = obj.hasOwnProperty('videos') ? obj['videos']['low_resolution']['url'] : ''; } } var imageIndex = currentFeed.imageIndex; var wdi_shape = 'square'; var media_standard_h = obj['images']['standard_resolution']['height']; var media_standard_w = obj['images']['standard_resolution']['width']; if(media_standard_h > media_standard_w){ wdi_shape = 'portrait'; } else if(media_standard_h < media_standard_w){ wdi_shape = 'landscape'; } var photoObject = { 'id': obj['id'], 'caption': caption, 'image_url': image_url, 'likes': obj['likes']['count'], 'comments': obj['comments']['count'], 'wdi_index': imageIndex, 'wdi_res_index': currentFeed.resIndex, 'wdi_media_user': obj['user']['username'], 'link': obj['link'], 'video_url': videoUrl, 'wdi_username': obj['user']['username'], 'wdi_shape': wdi_shape }; return photoObject; } /* * If pagination is on sets the proper page number */ wdi_front.setPage = function (currentFeed) { var display_type = currentFeed.feed_row.feed_display_view; var feed_type = currentFeed.feed_row.feed_type; if (display_type != 'pagination') { return ''; } var imageIndex = currentFeed.imageIndex; if (feed_type == 'image_browser') { var divider = 1; } else { var divider = Math.abs(currentFeed.feed_row.pagination_per_page_number); } currentFeed.paginator = Math.ceil((imageIndex + 1) / divider); return currentFeed.paginator; } /* * Template for all feed items which have type=image */ wdi_front.getPhotoTemplate = function (currentFeed) { var page = wdi_front.setPage(currentFeed); var customClass = ''; var pagination = ''; var onclick = ''; var overlayCustomClass = ''; var thumbClass = 'fa-arrows-alt'; var showUsernameOnThumb = ''; if (currentFeed.feed_row.feed_type == 'blog_style' || currentFeed.feed_row.feed_type == 'image_browser') { thumbClass = ''; } if (page != '') { pagination = 'wdi_page="' + page + '"'; sourceAttr = 'src'; } else { sourceAttr = 'src'; } if (page != '' && page != 1) { customClass = 'wdi_hidden'; } if (currentFeed.feed_row.show_username_on_thumb == '1') { showUsernameOnThumb = '@<%= wdi_username%>'; } //checking if caption is opend by default then add wdi_full_caption class //only in masonry if (currentFeed.feed_row.show_full_description == 1 && currentFeed.feed_row.feed_type == 'masonry') { customClass += ' wdi_full_caption'; } var onclickevent = ""; if (currentFeed.feed_row.feed_type !== "blog_style") { if (currentFeed.feed_row.feed_type == 'masonry') { onclickevent = "wdi_responsive.showMasonryCaption(jQuery(this)," + currentFeed.feed_row.wdi_feed_counter + ");" } else { onclickevent = "wdi_responsive.showCaption(jQuery(this)," + currentFeed.feed_row.wdi_feed_counter + ");"; } } //creating onclick string for different options switch (currentFeed.feed_row.feed_item_onclick) { case 'lightbox': { onclick = "onclick=wdi_feed_" + currentFeed.feed_row.wdi_feed_counter + ".galleryBox('<%=id%>')"; break; } case 'instagram': { onclick = 'onclick="window.open (\'<%= link%>\',\'_blank\')"'; overlayCustomClass = 'wdi_hover_off'; thumbClass = ''; break; } case 'custom_redirect': { onclick = 'onclick="window.open (\'' + currentFeed.feed_row.redirect_url + '\',\'_self\')"'; overlayCustomClass = 'wdi_hover_off'; thumbClass = ''; break; } case 'none': { onclick = ''; overlayCustomClass = 'wdi_cursor_off wdi_hover_off'; thumbClass = ''; } } var wdi_shape_class = "<%= wdi_shape == 'square' ? 'wdi_shape_square' : (wdi_shape == 'portrait' ? 'wdi_shape_portrait' : (wdi_shape == 'landscape' ? 'wdi_shape_landscape' : 'wdi_shape_square') ) %>"; var wdi_feed_counter = currentFeed.feed_row['wdi_feed_counter']; var source = '
" + wdi_front_messages.feed_nomedia + "
"); } //if all images loaded then enable load more button and hide spinner var wdi_feed_counter = currentFeed.feed_row['wdi_feed_counter']; var feed_container = jQuery('#wdi_feed_' + wdi_feed_counter); if (currentFeed.feed_row.feed_display_view == 'load_more_btn') { feed_container.find('.wdi_load_more').removeClass('wdi_hidden'); feed_container.find('.wdi_spinner').addClass('wdi_hidden'); } if (currentFeed.feed_row.feed_display_view == 'infinite_scroll') { jQuery('#wdi_feed_' + currentFeed.feed_row['wdi_feed_counter'] + ' .wdi_ajax_loading').addClass('wdi_hidden'); } //custom event fired for user based custom js feed_container.trigger('wdi_feed_loaded'); } //shows different parts of the feed based user choice wdi_front.show = function (name, currentFeed) { var wdi_feed_counter = currentFeed.feed_row['wdi_feed_counter']; var feed_container = jQuery('#wdi_feed_' + wdi_feed_counter + ' .wdi_feed_container'); var _this = this; switch (name) { case 'header': { show_header(); break; } case 'users': { show_users(currentFeed); break; } } function show_header() { var templateData = { 'feed_thumb': currentFeed['feed_row']['feed_thumb'], 'feed_name': currentFeed['feed_row']['feed_name'], }; var headerTemplate = wdi_front.getHeaderTemplate(), html = headerTemplate(templateData), containerHtml = feed_container.find('.wdi_feed_header').html(); feed_container.find('.wdi_feed_header').html(containerHtml + html); } function show_users(currentFeed) { feed_container.find('.wdi_feed_users').html(''); var users = currentFeed['feed_users']; var access_token = currentFeed['feed_row']['access_token']; var i = 0; currentFeed.headerUserinfo = []; getThumb(); //recursively calls itself until all user data is ready then displyes it with escapeRequest function getThumb() { if (currentFeed.headerUserinfo.length == users.length) { escapeRequest(currentFeed.headerUserinfo, currentFeed); return; } var _user = users[currentFeed.headerUserinfo.length]; if (typeof _user === 'string' && _user === 'self') { currentFeed.instagram.getSelfInfo({ success: function (response) { response = _this.checkMediaResponse(response); if (response != false) { var obj = { id: response['data']['id'], name: response['data']['username'], url: response['data']['profile_picture'], bio: response['data']['bio'], counts: response['data']['counts'], website: response['data']['website'], full_name: response['data']['full_name'] } currentFeed.headerUserinfo.push(obj); i++; getThumb(); } }, args: { ignoreFiltering: true, } }); } else if (_this.getInputType(_user.username) == 'hashtag') { currentFeed.instagram.searchForTagsByName(_this.stripHashtag(_user.username), { /*currentFeed.instagram.getTagRecentMedia(_this.stripHashtag(_user.username), {*/ success: function (response) { response = _this.checkMediaResponse(response); if (response != false) { if (response['data'].length == 0) { var thumb_img = ''; var counts = {media: ''}; } else { var thumb_img = '';// we will get image src later when will have all the sources //thumb_img = response['data'][0]['images']['thumbnail']['url']; var counts = {media: response['data'][0]['media_count']}; } var obj = { name: users[i]['username'], url: thumb_img, counts: counts, }; i++; currentFeed.headerUserinfo.push(obj); getThumb(); } }, args: { ignoreFiltering: true, } }); } else if (_this.getInputType(_user.username) == 'user') { currentFeed.instagram.getUserInfo(_user.id, { success: function (response) { response = _this.checkMediaResponse(response); if (response != false) { var obj = { id: response['data']['id'], name: response['data']['username'], url: response['data']['profile_picture'], bio: response['data']['bio'], counts: response['data']['counts'], website: response['data']['website'], full_name: response['data']['full_name'] } currentFeed.headerUserinfo.push(obj); i++; getThumb(); } }, args: { ignoreFiltering: true, } }); } } //when all user data is ready break recursion and create user elements function escapeRequest(info, currentFeed) { feed_container.find('.wdi_feed_users').html(''); for (var k = 0; k < info.length; k++) { //setting all user filters to false var userFilter = { 'flag': false, 'id': info[k]['id'], 'name': info[k]['name'] }; //user inforamtion var hashtagClass = (info[k]['name'][0] == '#') ? 'wdi_header_hashtag' : ''; var templateData = { 'user_index': k, 'user_img_url': info[k]['url'], 'counts': info[k]["counts"], 'feed_counter': currentFeed.feed_row.wdi_feed_counter, 'user_name': info[k]['name'], 'bio': info[k]['bio'], 'usersCount': currentFeed.feed_row.feed_users.length, 'hashtagClass': hashtagClass }; var userTemplate = wdi_front.getUserTemplate(currentFeed, info[k]['name']), html = userTemplate(templateData), containerHtml = feed_container.find('.wdi_feed_users').html(); feed_container.find('.wdi_feed_users').html(containerHtml + html); currentFeed.userSortFlags.push(userFilter); var clearFloat = jQuery(''); } feed_container.find('.wdi_feed_users').append(clearFloat); wdi_front.updateUsersImages(currentFeed); }; } } wdi_front.getUserTemplate = function (currentFeed, username) { var usersCount = currentFeed.dataCount, instagramLink, instagramLinkOnClick, js; switch (username[0]) { case '#': { instagramLink = '//instagram.com/explore/tags/' + username.substr(1, username.length); break; } default: { instagramLink = '//instagram.com/' + username; break; } } js = 'window.open("' + instagramLink + '","_blank")'; instagramLinkOnClick = "onclick='" + js + "'"; var source = '<%= counts.media%>
' + '<%= counts.followed_by%>
' + '<%= counts.media%>
' + '' + '