/* * File List * * Creates a tree list of clickable folders and files. * * Data attributes: * - data-control="filelist" - enables the file list plugin * - data-group-status-handler - AJAX handler to execute when a group is collapsed or expanded by a user * * JavaScript API: * $('#list').fileList() * * Events * - open.oc.list - this event is triggered on the list element when an item is clicked. * * Dependences: * - Null */ +function ($) { "use strict"; // FILELIST CLASS DEFINITION // ============================ var FileList = function(element, options) { this.options = options this.$el = $(element) this.init(); } FileList.DEFAULTS = { ignoreItemClick: false } FileList.prototype.init = function (){ var self = this this.$el.on('click', 'li.group > h4 > a, li.group > div.group', function() { self.toggleGroup($(this).closest('li')) return false; }); if (!this.options.ignoreItemClick) { this.$el.on('click', 'li.item > a', function(event) { var e = $.Event('open.oc.list', {relatedTarget: $(this).parent().get(0), clickEvent: event}) self.$el.trigger(e, this) return false }) } this.$el.on('ajaxUpdate', $.proxy(this.update, this)) } FileList.prototype.toggleGroup = function(group) { var $group = $(group); $group.attr('data-status') == 'expanded' ? this.collapseGroup($group) : this.expandGroup($group) } FileList.prototype.collapseGroup = function(group) { var $list = $('> ul, > div.subitems', group), self = this; $list.css('overflow', 'hidden') $list.animate({'height': 0}, { duration: 100, queue: false, complete: function() { $list.css({ 'overflow': 'visible', 'display': 'none' }) $(group).attr('data-status', 'collapsed') $(window).trigger('resize') } }) this.sendGroupStatusRequest(group, 0); } FileList.prototype.expandGroup = function(group) { var $list = $('> ul, > div.subitems', group), self = this; $list.css({ 'overflow': 'hidden', 'display': 'block', 'height': 0 }) $list.animate({'height': $list[0].scrollHeight}, { duration: 100, queue: false, complete: function() { $list.css({ 'overflow': 'visible', 'height': 'auto' }) $(group).attr('data-status', 'expanded') $(window).trigger('resize') } }) this.sendGroupStatusRequest(group, 1); } FileList.prototype.sendGroupStatusRequest = function(group, status) { if (this.options.groupStatusHandler !== undefined) { var groupId = $(group).data('group-id') if (groupId === undefined) groupId = $('> h4 a', group).text(); $(group).request(this.options.groupStatusHandler, {data: {group: groupId, status: status}}) } } FileList.prototype.markActive = function(dataId) { $('li.item', this.$el).removeClass('active') if (dataId) $('li.item[data-id="'+dataId+'"]', this.$el).addClass('active') this.dataId = dataId } FileList.prototype.update = function() { if (this.dataId !== undefined) this.markActive(this.dataId) } // FILELIST PLUGIN DEFINITION // ============================ var old = $.fn.fileList $.fn.fileList = function (option) { var args = arguments; return this.each(function () { var $this = $(this) var data = $this.data('oc.fileList') var options = $.extend({}, FileList.DEFAULTS, $this.data(), typeof option == 'object' && option) if (!data) $this.data('oc.fileList', (data = new FileList(this, options))) if (typeof option == 'string') { var methodArgs = []; for (var i=1; i