app.js

//= require jquery_ujs
//= require jquery-fileupload/basic
//= require jquery-fileupload/vendor/tmpl

window.App = {
    // Configuration container
    Config: {}
};

$(function() {

    // Common utilities
    App.Util = {
        // Format bytes into human readable size notation
        formatFileSize: function(bytes) {
            if (typeof bytes !== 'number') { return ''; }
            if (bytes >= 1000000000) {
                return (bytes / 1000000000).toFixed(2) + ' GB';
            }
            if (bytes >= 1000000) {
                return (bytes / 1000000).toFixed(2) + ' MB';
            }
            return (bytes / 1000).toFixed(2) + ' KB';
        }
    };


    // Flyout menu
    App.Config.Flyout = {
        selector: '.flyout',
        duration: 120
    };

    App.Flyout = (function(container, config) {

        // Elements used with the flyout menu
        var doc = $(document),
            toggle = $('h3 a', container);

        // Toggling of the flyout menu
        toggle.bind('click', function(e) {
            e.preventDefault();
            container.fadeToggle(config.duration);
        });

        // Don't bubble up events inside the container
        container.bind('click', function(e) {
            e.stopPropagation();
        });

        // Close flyout menu when focus lost
        doc.bind('click', function(e) {
            if (container.is(':visible')) {
                container.fadeOut(config.duration);
            }
        })

    })($(App.Config.Flyout.selector), App.Config.Flyout);


    // Flash messages display
    App.Config.Flashes = {
        selector: '.flash',
        duration: 200
    }

    App.Flashes = (function(container, config) {

        // All flash messages
        var messages = $('div', container);

        // Remove them on click
        messages.on('click', function(e) {
            $(this).slideUp(200);
        });

    })($(App.Config.Flashes.selector), App.Config.Flashes);


    // Set up Tipped tooltips
    App.Config.Tooltips = {
        // Default options for each tooltip
        skin: 'white',
        delay: 200,

        // Customized tooltips
        elements: {
            '.tooltip': null, // default options
            '.tooltip-delayed': {delay: 800}, // override delay
            '.tooltip-logo': {delay: 500}
        }
    };

    App.Tooltips = (function(config) {

        // Bind tooltips to each of the given elements
        $.each(config.elements, function(selector, options) {
            // Figure out options to use
            var opts = $.extend({
                skin: config.skin,
                delay: config.delay,
            }, options);

            Tipped.create(selector, opts);
        });

    })(App.Config.Tooltips);



    // Files manager
    App.Config.Files = {

    };

    App.Files = (function() {

        // Creating folders
        var createFolderLink = $('a.create-folder'),
            createFolderForm = $('.create-folder-form'),
            createFolderInput = $('input[type=text]', createFolderForm);

        createFolderLink.bind('click', function(e) {
            e.preventDefault();

            if (createFolderForm.is(':hidden')) {
                $(this).text('Cancel');
                createFolderForm.css('opacity', 0.0)
                    .slideDown(80)
                    .animate({opacity: 1.0}, {queue: false, duration: 350});
                createFolderInput.focus();
            } else {
                $(this).text('Create Folder');
                createFolderForm.fadeOut(100);
            }
        });


        // Live filtering : plugin modified to support tables
        var filterContainer = $('.filterbar .filter'),
            listingSelector = '.listing';
        filterContainer.fastLiveFilter(listingSelector);


        // Listing actions
        var listingContainer = $('.listing'),
            actionCell       = $('.listing td:not(.name, .check)'),
            nameCell         = $('.listing td.name');

        // Showing and hiding action icons on hover
        listingCells.hover(
            function() {
                $(this)
                    .parent()
                    .find('.actions .icon')
                    .css('display', 'inline-block');
            },
            function() {
                $(this)
                    .parent()
                    .find('.actions .icon')
                    .css('display', 'none');
            }
        );

        // Rename functionality
        nameCell.hover(
            function() {
                $(this)
                    .find('div.rename')
                    .css('display', 'inline-block');
            },
            function() {
                $(this)
                    .find('div.rename')
                    .css('display', 'none');
            }
        );

        // Priority rows
        var priorityRows = $('tr[data-priority="1"]', listingContainer);
        priorityRows.addClass('priority');

        listingContainer.on('click', 'a.priority', function() {
            var currentRow   = $(this).parents('tr'),
                newPriority  = (currentRow.data('priority') == "1") ? "0" : "1",
                priorityPath = encodeURIComponent(currentRow.data('path')),
                priorityURL = "/assets/priority?priority=" + newPriority + "&path=" + priorityPath;

            $.get(priorityURL, function(data) {
                currentRow.toggleClass('priority');
            });
        });

        // Checkbox select all
        listingContainer.on('change', 'input[type=checkbox]', function(e) {
            var numChecked = $('input[type=checkbox]:checked', listingContainer).length,
                actionDropdown = $('.filebrowser .bulk-actions');

            if (numChecked === 0) {
                $('filebrowser .inline-action').fadeOut(80);
                actionDropdown.fadeOut(80, function() {
                    actionDropdown.css('visibility', 'hidden').val('');
                });
            } else if (numChecked === 1 && actionDropdown.css('visibility') === 'hidden') {
                actionDropdown.css('visibility', 'visible').hide().fadeIn(200);
            }
        });

        listingContainer.on('change', 'thead input[type=checkbox]', function() {
            var currentState = $(this).attr('checked') || false,
                checkboxes = $('.listing input[type=checkbox]');
            checkboxes.attr('checked',currentState);
            $(checkboxes[1]).trigger('change');
        });


        // Inline editing
        listingContainer.on('click', 'td.name a.rename', function(e) {
            e.preventDefault();
            var cell = $(this).parent();
            cell.find('.filename').hide();
            cell.addClass('editing');
        });

        listingContainer.on('click', '.inline-edit input[type=submit]', function() {
            var row = $(this).parents('tr'),
                newTitle = row.find('input[type=text]').val();
            row.find('.filename').text(newTitle).show();
            row.find('td.name').removeClass('editing');

            // Destruction of the form
            var massForm = $('#mass_form');
            massForm.attr('action', row.find('a.rename').attr('href'));
            massForm.find('tr').not(row).find('.inline-edit input[type=text]').remove();
        });

        // Bulk actions
        var bulkActionsDropdown = $('select.bulk-actions');
        bulkActionsDropdown.bind('change', function() {
            var selection = $(this).val();
            $('.filebrowser .inline-action').hide();

            switch (selection) {
                case 'download':
                    $('.download-submit').css('display', 'inline-block');
                    break;
                case 'move':
                    $('.move-submit').css('display', 'inline-block');
                    break;
                case 'delete':
                    $('.delete-submit').css('display', 'inline-block');
                    break;
            }
        });

    })();

    App.Config.Fileupload = {
        selector: '#file-uploader'
    };

    App.Fileupload = (function(container) {

        container.fileupload({
            dataType: "script",
            start: function(e) {
                $('.upload-stage-wrapper').slideDown(200);
            },
            add: function(e, data) {
                var file = data.files[0],
                    types = /(\.|\/)(gif|jpe?g|png|psd|pdf)$/i,
                    stage = $('.upload-stage-wrapper tbody');
                if (types.test(file.type) || types.test(file.name)) {
                    data.context = $(tmpl("asset-template", file));
                    stage.append(data.context);
                    return data.submit();
                } else {
                    console.log("File type not allowed: " + file.type);
                }
            },
            progress: function(e, data) {
                var progress;
                if (data.context) {
                    progress = parseInt(data.loaded / data.total * 100, 10);
                    return data.context.find('.bar').css('width', progress + '%');
                }
            },
            done: function(e) {
                // Do something
            }
        });

    })($(App.Config.Fileupload.selector));


    App.Config.Dropzone = {
        zoneSelector: '.dropzone',
        activeClass: 'opaque',
        timeout: null
    };

    App.Dropzone = (function(config) {

        $(document).on('drop dragover', function(e) {
            var zone = $(config.zoneSelector);
            if (!App.Config.Dropzone.timeout) {
                zone.addClass(config.activeClass);
            } else {
                clearTimeout(App.Config.Dropzone.timeout);
            }
            App.Config.Dropzone.timeout = setTimeout(function() {
                App.Config.Dropzone.timeout = null;
                zone.removeClass(config.activeClass);
            }, 100);
        })

    })(App.Config.Dropzone);


    // Progress icons
    var progressIcons = $('.progress > span');
    progressIcons.each(function() {
        $(this)
            .data("origWidth", $(this).width())
            .width(0)
            .animate({ width: $(this).data("origWidth") }, 800);
    });

});