Boilerplate List Directive

list_directive.js

var App = angular.module('localmotors');

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
* Content List Directive -
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
App.directive('contentList', function($rootScope, $timeout, Utilities, Content) {
    'use strict';

    var ITEMS_PER_PAGE = 20;

    return {
        restrict: 'A',
        replace: true,
        templateUrl: '/static/partials/content_list.html',
        scope: {

        },

        link: function($scope, $element, $attrs) {

            // properties
            var queueID = Utilities.uuid(),
                currentPage = 0;

            $scope.content = [];

            $scope.state = {
                initialized: false,
                loading: false,
                loaded: false,
                infiniteScrollEnabled: false
            };

            $scope.settings = {
                infinite: true,
                itemsPerPage: ITEMS_PER_PAGE
            };

            Utilities.extendSettings($scope.settings, $scope);

            initialize();
            createEventListeners();


            /* initialize -
            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
            function initialize() {

                // skip load if not visible
                if ($element.width() === 0 || $scope.state.initialized) return;

                loadContentList();
            }

            /* createEventListeners -
            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
            function createEventListeners() {

                $scope.$on('content-tabs:tab-active', function(e, tabID) {
                    initialize();
                });
            }

            /* loadContentList -
            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
            function loadContentList() {

                $scope.state.initialized = true;
                $scope.state.loaded = false;

                currentPage = 0;

                getContentList(currentPage);
            }

            /* getContentList -
            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
            function getContentList(page) {

                if ($scope.state.loaded) return;

                $scope.state.infiniteScrollEnabled = false;
                $scope.state.loading = true;

                var resourceArguments = getResourceArguments(page);

                Content.getContentList(queueID, resourceArguments, page).success(processContentList).error(getContentListError);
            }

            /* processContentList -
            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
            function processContentList(data) {

                console.log(data);
            }

            /* getContentListError -
            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
            function getWatchListError() {

                $scope.state.infiniteScrollEnabled = $scope.settings.infinite;
                $scope.state.loading = false;
            }

            /* getResourceArguments -
            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
            function getResourceArguments(page) {

                // commmon arguments
                var resourceArguments = {
                    'page': page,
                    'limit': $scope.settings.itemsPerPage
                };

                return resourceArguments;
            }

            /* nextPage -
            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
            function nextPage() {

                if ($scope.state.loaded || $scope.state.loading || $element.width() === 0) return;

                // get content list page
                getContentList(++currentPage);
            }

            /* Scope Methods
            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
            $scope.nextPage = nextPage;
        }
    };
});