Ytdyklly

This is my first attempt at a jQuery plugin and really doing anything with jQuery which isn't simple DOM manipulation or initialising another plugin!

I'm really keen to learn where I have gone wrong and improve on the code.

The code for the plugin is:

(function($) {



    $.fn.unsplash = function(options, cbOnImageSelect) {

        var defaults = {

            apiRootURL: "https://api.unsplash.com", // root for API, should not need to be overridden                                                               

            searchTerm: '', // the search term the results will be relating to

            imagesToReturn: 6, // number of rows to output per page of results

            page: 1, // page of search results to display, will be 1 to start

            randomImagesToShow: 3, // number of images to display at the outset, 0 for none

            apiClientId: '6066a5f8e2e83faef343bdca81bd128aebccec5d601e8e27501b0f6375423477', // can be overridden for a client id per account

            orientation: 'landscape', // orientation of images to query for [landscape | portrait | squarish]

            source: '', // where the plugin is being called from

            cbOnImageSelect: $.noop

        };



        images = ;

        totalImageCount = 0;

        selectedImage = {};



        var settings = $.extend({}, defaults, options);



        //return to avoid breaking chaining

        return this.each(function() {

            //clear any content in the unsplash search

            $('#unsplashSearch').empty();

            //add a search form

            $('#unsplashSearch').append('<div class="in_searchBox"><input type="text" name="us_searchTerm" id="us_searchTerm" value="" maxlength="50"><button type="submit" name="us_SearchBtn" id="us_SearchBtn"><span>Search</span></button></div>');

            //bind the search handler event to the button in the form

            $("#us_SearchBtn").bind("click", function(e) {

                e.preventDefault();

                //reset page back to 1 to avoid a new search starting on the wrong page.

                settings.page = 1;

                //set the settings search term to the new value

                settings.searchTerm = $('#us_searchTerm').val();

                searchAndPopulate(getSearchURL(settings.searchTerm, 1), settings.apiClientId);

            });

            $('#unsplashSearch').append('<ul id="imageList" class="horizontalList"></ul>');

            $('#unsplashSearch').append('<div id="us_Paging" style="text-align: center;"></div>');

            if (settings.randomImagesToShow > 0) {

                //build up the request url based on whether the search term is null or not...

                searchAndPopulate((!settings.searchTerm) ? getRandomURL(settings.randomImagesToShow) : getSearchURL(settings.searchTerm, 1), settings.apiClientId);

            } else {

                $('#us_Paging').hide();

            }



            //private functions

            function callUnsplash(url) {

                return $.ajax({

                    url: url,

                    dataType: 'json',

                    method: 'GET',

                    beforeSend: function(xhr) {

                        xhr.setRequestHeader('Authorization', 'Client-ID ' + settings.apiClientId);

                        xhr.setRequestHeader('Accept-Version', 'v1');

                    },

                    success: function(json) {

                        totalImageCount = (json.hasOwnProperty('total')) ? json.total : settings.imagesToReturn;

                        images = (json.hasOwnProperty('results')) ? json.results : json;

                    },

                    error: function(xhr, status, error) {

                        alert("Sorry, something went wrong (" + error + " " + xhr.status + " " + xhr.statusText + ")");

                    }

                });

            }



            function searchAndPopulate(url, key) {

                var callUnsplashPromise = callUnsplash(url, key);

                callUnsplashPromise.done(populateImages);

            }



            function populateImages() {

                if (images.total == 0) {

                } else {

                    //clear any existing images in the list

                    $('#imageList').empty();

                    $.each(images, function(index, image) {

                        var liContent = `<li><a href="#" class="splashImage" data-photoid="${image.id}"><div class="in_max200"><img src='${image.urls.thumb}' class='in_singlepic in_max200'></a></li>`;

                        $('#imageList').append(liContent);

                    });

                    //bind the callback function to the splashImage so it is called when clicked. if no callback is provided, then the default will be performed

                    $(".splashImage").bind("click", function(event) {

                        event.preventDefault();

                        if (typeof settings.cbOnImageSelect == 'function') {

                            var photoId = $(this).data('photoid');

                            var url = getImageURL(photoId);

                            var getImagePromise = callUnsplash(url);

                            getImagePromise.done(function(i) {

                                settings.cbOnImageSelect.call(this, i);

                            });

                        }

                    });

                    if (totalImageCount <= settings.imagesToReturn) {

                        $('#us_Paging').hide();

                    } else {

                        $('#us_Paging').empty().show();

                        if (totalImageCount > settings.imagesToReturn) {

                            var noOfPages = Math.ceil(totalImageCount / settings.imagesToReturn);

                            var x = pagination(settings.page, noOfPages);

                            for (var p = 0; p < x.length; p++) {

                                var linkText = ((x[p] !== '...') && (x[p] !== settings.page)) ? '<a href="##" class="us_changePage" data-page="' + x[p] + '">' + x[p] + '</a>&nbsp;&nbsp;' : x[p] + '&nbsp;&nbsp;';

                                $('#us_Paging').append(linkText);

                            }

                            //add the click event to the buttons with the class us_changePage

                            $(".us_changePage").bind("click", function(event) {

                                event.preventDefault();

                                var nextPage = $(this).data('page');

                                settings.page = nextPage;

                                var nextURL = getSearchURL(settings.searchTerm, nextPage);

                                searchAndPopulate(nextURL, settings.apiClientId);

                            });

                        }

                    }

                }

            }



            function getSearchURL(searchTerm, pageToShow) {

                return settings.apiRootURL + '/search/photos?page=' + pageToShow + '&per_page=' + settings.imagesToReturn + '&orientation=' + settings.orientation + '&query=' + searchTerm;

            }



            function getRandomURL(numberOfImages) {

                return settings.apiRootURL + '/photos/random?count=' + numberOfImages + '&orientation=' + settings.orientation;

            }



            function getImageURL(photo_id) {

                return settings.apiRootURL + '/photos/' + photo_id;

            }



            function pagination(c, m) {

                var current = c,

                    last = m,

                    delta = 2,

                    left = current - delta,

                    right = current + delta + 1,

                    range = ,

                    rangeWithDots = ,

                    l;

                for (var i = 1; i <= last; i++) {

                    if (i == 1 || i == last || i >= left && i < right) {

                        range.push(i);

                    }

                }

                for (var i of range) {

                    if (l) {

                        if (i - l === 2) {

                            rangeWithDots.push(l + 1);

                        } else if (i - l !== 1) {

                            rangeWithDots.push('...');

                        }

                    }

                    rangeWithDots.push(i);

                    l = i;

                }

                return rangeWithDots;

            }

        });

    };

})(jQuery);

A link to a demo on JSFiddle: click here

Questions I have:

Is there a better way of maintaining the returned images JSON between the Ajax request and populating the page i.e.

images = ;

Have I bound the click event handlers correctly in the plugin; i.e.

$("#us_SearchBtn").bind("click", function(e) {

Also if you have any suggestions on how to run a different callback depending on which "Choose background" link is clicked, I'd be really grateful.