gruntfile.js, /grunt_tasks/browserify.js, /controllers/cn.home.js, /views/widgets/v.widget.date.range.inspection.js, /grunt_tasks/contrib-copy.js, /grunt_tasks/contrib-clean.js

browserify.js

// example

module.exports = function(grunt) {

    grunt.config.set('browserify', {

        dist: {
            options: {
                transform: ['hbsfy']
            },
            files: {
                '<%= paths.dist_js %>/dist/home.concat.js' : 'node_modules/app/cn.home.js',
                '<%= paths.dist_js %>/dist/users.concat.js' : 'node_modules/app/cn.users.js'
            }
        }

    });

    grunt.loadNpmTasks('grunt-browserify');

};

cn.home.js

// example

require('app/globals');

require('app/c.abstract.selectable');
require('app/c.data');

require('app/m.user');

require('app/v.modal.widget.container');
require('app/v.widget.date.range.inspection');
require('app/v.widget.home.overview');

Controllers.Home = Backbone.View.extend({

    tpl: require('app/t.page.home.hbs'),

    events: {
        'click [data-id="button"]': 'doSomething'
    },

    initialize: function(options) {

        this.startTime = options.startTime;
        this.endTime = options.endTime;

        this.childViews = {
            popup: null,
            modal: null,
            dateFilter: null
        };

        this.childModels = {
            filterable: []
        };

        this.render();
    },

    render: function () {

        this.$el.html(this.tpl());
        this.initTimeFilter();
    },

    initTimeFilter: function () {

        this.childViews.dateFilter = new Views.Widgets.DateRangeInspection({
            el: $('#tab-time'),
            models: this.childModels.filterable,
            startDate: this.startTime,
            endDate: this.endTime
        });
    }

});

contrib-clean.js

// example

module.exports = function(grunt) {
  
    grunt.config.set('clean', {

        // clean out /node_modules/app compiled js
        browserify: {
            src: [
                'node_modules/app'
            ],
            options: {
                force: true
            }
        }

    });

    grunt.loadNpmTasks('grunt-contrib-clean');

};

contrib-copy.js

// example

module.exports = function(grunt) {
  
    grunt.config.set('copy', {
        browserify: {
            expand: true,
            flatten: true,
            src: [
                '<%= paths.src_js %>/**'
            ],
            dest: 'node_modules/app',
            filter: 'isFile'
        }
    });

    grunt.loadNpmTasks('grunt-contrib-copy');

};

gruntfile.js

// example

module.exports = function (grunt) {

    // output task timing
    require('time-grunt')(grunt);

    // Project config
    grunt.initConfig({
        
        // read grunt tasks from npm
        pkg: grunt.file.readJSON('package.json'),
        
        // configure paths for grunt plugins
        paths: {
            assets: '../../vendor/assets',
            tests: 'tests',

            src_js: 'javascripts', 
            src_css: 'stylesheets',
            src_img: 'images',
            src_font: 'fonts',
            src_json: 'json',
            src_tmp: 'tmp',

            dist_js: '../../public/javascripts',
            dist_css: '../../public/stylesheets',
            dist_img: '../../public/images',
            dist_font: '../../public/fonts',
            dist_json: '../../public/json'
        }

    });

    // load grunt plugins from directory
    grunt.loadTasks('grunt_tasks');

    // prep and build project
    grunt.registerTask('prep',
        'Prepare project assets',
        ['clean:nuke', 'bowercopy', 'clean:bower', 'jshint', 'modernizr', 'less:dev', 'copy:browserify', 'browserify', 'concat', 'copy_deps', 'imagemin', 'jasmine:ci', 'clean:browserify']
    );

    // install and build project and watch for changes to rebuild
    grunt.registerTask('dev',
        'Prepare project assets',
        ['prep', 'watch']
    );

    // package up product for production
    grunt.registerTask('prod',
        'Prepare project assets',
        ['clean:nuke', 'bowercopy', 'clean:bower', 'jshint', 'modernizr', 'less:prod', 'cssmin', 'copy:browserify', 'browserify', 'concat', 'copy:prod_css', 'uglify', 'copy_deps', 'imagemin', 'jasmine:ci', 'clean:browserify', 'clean:prod']
    );

    grunt.registerTask('copy_deps',
        ['copy:fontawesome', 'copy:bootstrapglyphs', 'copy:geojson', 'copy:fonts', 'copy:images']
    );

    grunt.registerTask('default', ['dev', 'prod']);

};

v.widget.date.range.inspection.js

require('app/v.partial.popup.js');
require('app/v.popup.container.js');
require('app/v.widget.date.range.js');

/**
 * Filters models by a selected date range
 */
Views.Widgets.DateRangeInspection = Backbone.View.extend({

    CHANGE: 'change', //Triggered whenever date range is updated

    tpl: require('app/t.widget.dateRangeInspection.hbs'),

    events: {
        'click [data-action="inspect-date"]': 'showTimeRangePopup'
    },

    initialize: function (options) {

        _.extend(this, Views.Partials.Popup);

        options = options || {};

        if (!options.hasOwnProperty('models') || options.models.length <= 0) {
            throw 'Expecting at least one model model.';
        }

        this.childModels = {
            models: options.models
        };

        this.childViews = {
            popup: null
        };

        // Set default
        this.startTime = options.startDate;
        this.endTime = options.endDate;

        this.render();
    },


    render: function () {


        this.$el.html(this.tpl({
            start_date: moment(this.startTime).utc().format('MMMM DD, YYYY'),
            end_date: moment(this.endTime).utc().format('MMMM DD, YYYY')
        }));

        return this.$el;
    },


    showTimeRangePopup: function (e) {

        this.hidePopup();
        this.initPopup();

        this.childViews.popup = new Views.PopupWidgetContainer({
            el: $.find('.popup')[0],
            title: 'Time Range',
            widget: Views.Widgets.TimeRange,
            widgetOptions: {
                startTime: moment(this.startTime).utc().format('YYYY-MM-DDTHH:mm:ss') + 'Z',
                endTime: moment(this.endTime).utc().format('YYYY-MM-DDTHH:mm:ss') + 'Z',
                models: this.childModels.models
            }
        });

        this.childViews.popup.position({x: e.pageX - 250, y: e.pageY - 10});
    },


    /**
     * Clean up widget before it is completely removed from DOM
     */
    cleanup: function () {
        this.hidePopup();
        this.undelegateEvents();
        this.$el.empty();
    }
});