scrivito_content_browser 0.30.0 → 0.40.0.rc1

data/app/assets/javascripts/dist/scrivito_content_browser_pkg.js

@@ -0,0 +1,1629 @@
+(function() {
+  var ExpandableFilterNodeMixin, FilterMixin, OptionFilterLabelRenderMixin, OptionFilterMixin, classSet, models, ui,
+    __hasProp = {}.hasOwnProperty,
+    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
+
+  if (typeof scrivito === "undefined" || scrivito === null) {
+    console.error("'scrivito' is undefined, the content browser will not be available");
+    $(function() {
+      if (typeof scrivito === "undefined" || scrivito === null) {
+        return console.log("possible reason: '//= require scrivito_sdk' is missing");
+      } else {
+        return console.log("possible reason: 'scrivito_sdk'/'scrivito_body_tags' is included after 'scrivito_content_browser'");
+      }
+    });
+    return;
+  }
+
+  scrivito.content_browser = (function() {
+    return {
+      filters: {},
+      components: {},
+      models: {},
+      _center: function(domElement) {
+        if (domElement) {
+          domElement = $(domElement);
+          return domElement.css({
+            marginLeft: -domElement.innerWidth() / 2,
+            marginTop: -domElement.innerHeight() / 2,
+            left: '50%'
+          });
+        }
+      },
+      _loadModal: function() {
+        this.overlay = $('<div></div>').addClass('editing-overlay show').appendTo($('body'));
+        this.modal = $('<div></div>').addClass('scrivito-content-browser show').attr('id', 'scrivito-content-browser').appendTo($('body'));
+        this._center(this.modal);
+        return $(window).resize((function(_this) {
+          return function() {
+            return _this._center(_this.modal);
+          };
+        })(this));
+      },
+      _buildFilter: function(filter_definition) {
+        return new models.Filter(filter_definition);
+      },
+      _startReact: function() {
+        var filter, filterConfig;
+        filterConfig = this.options.filters || this.filters;
+        filter = this._buildFilter(filterConfig);
+        return this._reactApp = React.render(React.createElement(ui.App, {
+          "initialFilter": filter,
+          "container": this
+        }), document.getElementById('scrivito-content-browser'));
+      },
+      close: function() {
+        this.overlay.remove();
+        return this.modal.remove();
+      },
+      open: function(options) {
+        if (options == null) {
+          options = {};
+        }
+        this.options = options;
+        this._loadModal();
+        this._startReact();
+        this._promise = $.Deferred();
+        return this._promise;
+      }
+    };
+  })();
+
+  ui = scrivito.content_browser.components;
+
+  models = scrivito.content_browser.models;
+
+  classSet = React.addons.classSet;
+
+  scrivito.register_public_api("content_browser", scrivito.content_browser);
+
+  ExpandableFilterNodeMixin = {
+    defaultExpansionState: function() {
+      return {
+        open: this.props.filter.isExpanded()
+      };
+    },
+    arrowHandleClick: function() {
+      return this.setState({
+        open: !this.state.open
+      });
+    },
+    renderArrowTag: function() {
+      return React.createElement("div", {
+        "className": "scrivito-content-browser-hierarchy-arrow",
+        "onClick": this.arrowHandleClick
+      });
+    },
+    openClassSetOptions: function() {
+      return {
+        'open': this.state.open,
+        'closed': !this.state.open
+      };
+    }
+  };
+
+  FilterMixin = {
+    renderSubFiltersList: function(subFilters, additionalClasses) {
+      var ulClassName;
+      ulClassName = "scrivito-content-browser-hierarchy-filter";
+      if (additionalClasses && additionalClasses.length > 0) {
+        ulClassName = ulClassName + " " + additionalClasses;
+      }
+      return React.createElement("ul", {
+        "className": ulClassName
+      }, subFilters);
+    }
+  };
+
+  OptionFilterLabelRenderMixin = {
+    renderHierarchyLabelTitle: function(title) {
+      return React.createElement("div", {
+        "className": "scrivito-content-browser-hierarchy-label"
+      }, React.createElement("span", null, title));
+    }
+  };
+
+  OptionFilterMixin = {
+    mixins: [OptionFilterLabelRenderMixin],
+    optionLabelToogleClick: function() {
+      return this.props.filter.toggleActive();
+    },
+    activeClassName: function() {
+      if (this.props.filter.isActive()) {
+        return "active";
+      } else {
+        return "";
+      }
+    },
+    renderOptionFilterTitle: function() {
+      return this.renderHierarchyLabelTitle(this.props.filter.title);
+    }
+  };
+
+  models.FilterNode = (function() {
+    function FilterNode(filter, name, filter_definition) {
+      this.filter = filter;
+      this.name = name;
+      this.title = filter_definition.title;
+      this.title || (this.title = this._fallbackTitle());
+    }
+
+    FilterNode.prototype._fallbackTitle = function() {
+      return this._capitalize(this.name.replace(/_/g, ' ').trim());
+    };
+
+    FilterNode.prototype._capitalize = function(string) {
+      return string.charAt(0).toUpperCase() + string.slice(1);
+    };
+
+    return FilterNode;
+
+  })();
+
+  models.Listenable = (function() {
+    function Listenable() {
+      this._callbacks = {};
+    }
+
+    Listenable.prototype.on = function(eventName, callback) {
+      var _base;
+      (_base = this._callbacks)[eventName] || (_base[eventName] = []);
+      return this._callbacks[eventName].push(callback);
+    };
+
+    Listenable.prototype.trigger = function() {
+      var callbacks, eventName, params;
+      eventName = arguments[0];
+      params = _.toArray(arguments).slice(1);
+      callbacks = this._callbacks[eventName];
+      if (callbacks) {
+        return _.each(callbacks, function(callback) {
+          return callback.apply(this, params);
+        });
+      }
+    };
+
+    Listenable.prototype.onChange = function(callback) {
+      return this.on('change', callback);
+    };
+
+    Listenable.prototype.changed = function() {
+      return this.trigger('change', this);
+    };
+
+    return Listenable;
+
+  })();
+
+  models.CheckboxFilter = (function(_super) {
+    __extends(CheckboxFilter, _super);
+
+    function CheckboxFilter(filter, name, filterDefinition) {
+      CheckboxFilter.__super__.constructor.call(this, filter, name, filterDefinition);
+      this.type = 'checkbox';
+      this.expanded = filterDefinition.expanded, this.field = filterDefinition.field, this.operator = filterDefinition.operator;
+      this.children = _.map(filterDefinition.options, (function(_this) {
+        return function(definition, name) {
+          return new models.CheckboxOption(_this.filter, name, definition);
+        };
+      })(this));
+    }
+
+    CheckboxFilter.prototype.isExpanded = function() {
+      return !!this.expanded;
+    };
+
+    CheckboxFilter.prototype.hasActiveChildren = function() {
+      return _.some(this.children, function(child) {
+        return child.isActive();
+      });
+    };
+
+    return CheckboxFilter;
+
+  })(models.FilterNode);
+
+  models.CheckboxOption = (function(_super) {
+    __extends(CheckboxOption, _super);
+
+    function CheckboxOption(filter, name, filterDefinition) {
+      CheckboxOption.__super__.constructor.call(this, filter, name, filterDefinition);
+      this.value = filterDefinition.value;
+      this.active = filterDefinition.selected;
+    }
+
+    CheckboxOption.prototype.toggleActive = function() {
+      this.active = !this.active;
+      return this.filter.changed();
+    };
+
+    CheckboxOption.prototype.isActive = function() {
+      return !!this.active;
+    };
+
+    return CheckboxOption;
+
+  })(models.FilterNode);
+
+  models.Filter = (function(_super) {
+    __extends(Filter, _super);
+
+    function Filter(filter_definition) {
+      Filter.__super__.constructor.call(this);
+      this._initFilters(filter_definition);
+    }
+
+    Filter.prototype.deselectHierarchicalFilters = function() {
+      return _.each(this.getHierarchicalFilters(), function(filter) {
+        return filter.deselect();
+      });
+    };
+
+    Filter.prototype.setSearchTerm = function(newTerm) {
+      this.searchTerm = newTerm;
+      return this.changed();
+    };
+
+    Filter.prototype.deselectAllFilters = function() {
+      this.deselectHierarchicalFilters();
+      return this.changed();
+    };
+
+    Filter.prototype.hasActiveChildren = function() {
+      return _.some(_.union(this.getHierarchicalFilters(), this.additionalFilters), function(subFilter) {
+        return subFilter.hasActiveChildren();
+      });
+    };
+
+    Filter.prototype.getHierarchicalFilters = function() {
+      return _.flatten(_.map(this.getTreeFilters(), function(filter) {
+        return filter.subFilters;
+      }));
+    };
+
+    Filter.prototype.getTreeFilters = function() {
+      return this.treeFilters;
+    };
+
+    Filter.prototype.hasHierarchicalFilters = function() {
+      return this.treeFilters.length > 0;
+    };
+
+    Filter.prototype.hasAdditionalFilters = function() {
+      return this.additionalFilters.length > 0;
+    };
+
+    Filter.prototype._initFilters = function(filter_definition) {
+      this.treeFilters = [];
+      this.additionalFilters = [];
+      return _.each(filter_definition, (function(_this) {
+        return function(definition, name) {
+          var subFilters;
+          if ((definition.type == null) || definition.type === 'tree') {
+            subFilters = [];
+            _.each(definition.options, function(definition, name) {
+              return subFilters.push(new models.TreeFilter(_this, name, definition));
+            });
+            _this.treeFilters.push({
+              config: definition,
+              subFilters: subFilters
+            });
+          }
+          if (definition.type === 'radio_button') {
+            _this.additionalFilters.push(new models.RadioFilter(_this, name, definition));
+          }
+          if (definition.type === 'check_box') {
+            return _this.additionalFilters.push(new models.CheckboxFilter(_this, name, definition));
+          }
+        };
+      })(this));
+    };
+
+    return Filter;
+
+  })(models.Listenable);
+
+  models.Inspector = (function(_super) {
+    __extends(Inspector, _super);
+
+    function Inspector() {
+      return Inspector.__super__.constructor.apply(this, arguments);
+    }
+
+    Inspector.prototype.fileDetail = function() {
+      var fileDetail;
+      fileDetail = "(No description)";
+      if (this._inpsectedObj != null) {
+        fileDetail = this._inpsectedObj.title || fileDetail;
+      }
+      return fileDetail;
+    };
+
+    Inspector.prototype.inspectorUrl = function() {
+      if (this._inpsectedObj != null) {
+        return scrivito.details_url_for_obj_id(this._inpsectedObj.id);
+      }
+    };
+
+    Inspector.prototype.setInspectedObj = function(obj) {
+      this._inpsectedObj = obj;
+      return this.changed();
+    };
+
+    Inspector.prototype.getInspectedObj = function() {
+      return this._inpsectedObj;
+    };
+
+    return Inspector;
+
+  })(models.Listenable);
+
+  models.ObjCollection = (function(_super) {
+    __extends(ObjCollection, _super);
+
+    function ObjCollection(selectedObjs, _selectionMode) {
+      this._selectionMode = _selectionMode;
+      ObjCollection.__super__.constructor.call(this);
+      this._selectionMode || (this._selectionMode = 'single');
+      this._selectedObjs = selectedObjs || [];
+      this._objs = [];
+      this._curQueryNumber = 0;
+    }
+
+    ObjCollection.prototype.objs = function() {
+      return this._objs;
+    };
+
+    ObjCollection.prototype.selectedObjs = function() {
+      return this._selectedObjs;
+    };
+
+    ObjCollection.prototype.reload = function() {
+      if (this._query) {
+        return this.loadFromBackend(this._query);
+      }
+    };
+
+    ObjCollection.prototype.loadFromBackend = function(query) {
+      var promise;
+      this._query = query;
+      this._curQueryNumber += 1;
+      promise = $.Deferred();
+      if (query) {
+        this._initialLoadObjs(query, promise, this._curQueryNumber);
+      } else {
+        promise.resolve();
+        this._objs = [];
+      }
+      this.trigger('loading-obj', promise);
+      return promise;
+    };
+
+    ObjCollection.prototype._removeObjFromSelectedCollection = function(objId) {
+      return this._selectedObjs = _.without(this._selectedObjs, objId);
+    };
+
+    ObjCollection.prototype.toggleSelected = function(objId) {
+      if (this.isSelected(objId)) {
+        this._removeObjFromSelectedCollection(objId);
+      } else {
+        if (this._isSingleSelection()) {
+          this._selectedObjs = [objId];
+        } else {
+          this._selectedObjs.push(objId);
+        }
+      }
+      return this.changed();
+    };
+
+    ObjCollection.prototype.isSelected = function(objId) {
+      return _.contains(this._selectedObjs, objId);
+    };
+
+    ObjCollection.prototype.destroyById = function(objId) {
+      return scrivito.delete_obj(objId).done((function(_this) {
+        return function() {
+          return _this._removeObjFromSelectedCollection(objId);
+        };
+      })(this));
+    };
+
+    ObjCollection.prototype.destroySelectedObjs = function() {
+      var deferreds;
+      if (this._selectedObjs.length > 0) {
+        deferreds = _.map(this._selectedObjs, (function(_this) {
+          return function(objId) {
+            return _this.destroyById(objId);
+          };
+        })(this));
+        $.when.apply($, deferreds).done((function(_this) {
+          return function() {
+            return _this.reload();
+          };
+        })(this));
+        return this.trigger('loading-obj');
+      }
+    };
+
+    ObjCollection.prototype._initialLoadObjs = function(query, promise, queryNumber) {
+      return query.load_batch().then((function(_this) {
+        return function(results, next) {
+          promise.resolve();
+          if (queryNumber === _this._curQueryNumber) {
+            _this._objs = [];
+            return _this._setAndLoadObjs(results, next, queryNumber);
+          }
+        };
+      })(this));
+    };
+
+    ObjCollection.prototype._setAndLoadObjs = function(results, next, queryNumber) {
+      if (queryNumber === this._curQueryNumber) {
+        this._objs = this._objs.concat(results.hits);
+        this.changed();
+        if (next) {
+          return next.load_batch().then((function(_this) {
+            return function(results, next) {
+              return _this._setAndLoadObjs(results, next, queryNumber);
+            };
+          })(this));
+        }
+      }
+    };
+
+    ObjCollection.prototype._isSingleSelection = function() {
+      return this._selectionMode === 'single';
+    };
+
+    return ObjCollection;
+
+  })(models.Listenable);
+
+  models.ObjUpload = (function() {
+    function ObjUpload(uploadSet, file) {
+      var objClass;
+      this.uploadSet = uploadSet;
+      this._status = 'active';
+      this._fileName = file.name;
+      objClass = scrivito.default_obj_class_for_content_type(file.type);
+      scrivito.create_obj({
+        blob: file,
+        _obj_class: objClass,
+        _path: this._path()
+      }).done((function(_this) {
+        return function(objData) {
+          _this._obj = objData;
+          return _this._setStatus('completed');
+        };
+      })(this)).fail((function(_this) {
+        return function(failure) {
+          _this._failureMessage = failure.message;
+          return _this._setStatus('failed');
+        };
+      })(this));
+    }
+
+    ObjUpload.prototype.status = function() {
+      return this._status;
+    };
+
+    ObjUpload.prototype.createdObj = function() {
+      return this._obj;
+    };
+
+    ObjUpload.prototype.failureMessage = function() {
+      return this._failureMessage;
+    };
+
+    ObjUpload.prototype.fileName = function() {
+      return this._fileName;
+    };
+
+    ObjUpload.prototype.progress = function() {
+      switch (this.status()) {
+        case 'active':
+          return 10;
+        case 'completed':
+          return 100;
+        case 'failed':
+          return 0;
+      }
+    };
+
+    ObjUpload.prototype._path = function() {
+      return "_resources/" + (this._randomResourceId()) + "/" + (this._sanitizedFilenameForBackend());
+    };
+
+    ObjUpload.prototype._randomResourceId = function() {
+      var hex;
+      hex = Math.floor(Math.random() * Math.pow(16, 8)).toString(16);
+      while (hex.length < 8) {
+        hex = '0' + hex;
+      }
+      return hex;
+    };
+
+    ObjUpload.prototype._sanitizedFilenameForBackend = function() {
+      return this.fileName().replace(/[^a-z0-9_.$\-]/ig, '-');
+    };
+
+    ObjUpload.prototype._setStatus = function(newStatus) {
+      this._status = newStatus;
+      return this.uploadSet.changed();
+    };
+
+    return ObjUpload;
+
+  })();
+
+  models.QueryBuilder = (function() {
+    function QueryBuilder(filter) {
+      this.filter = filter;
+    }
+
+    QueryBuilder.prototype.searchRequest = function() {
+      var query;
+      query = this._buildTreeFilterQuery() || null;
+      query = this._addSearchTerm(query);
+      return this._addAdditionalFilters(query);
+    };
+
+    QueryBuilder.prototype._addAdditionalFilters = function(query) {
+      var activeChildren, baseQuery, filter, searchQuery, _i, _len, _ref;
+      baseQuery = query;
+      _ref = this.filter.additionalFilters;
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        filter = _ref[_i];
+        activeChildren = _.filter(filter.children, function(child) {
+          return child.isActive();
+        });
+        if (activeChildren.length > 0) {
+          searchQuery = this._buildActiveChildrenSearchQuery(activeChildren, filter);
+          if (searchQuery != null) {
+            baseQuery = this._addOrCreateQuery(baseQuery, searchQuery);
+          }
+        }
+      }
+      return baseQuery;
+    };
+
+    QueryBuilder.prototype._buildActiveChildrenSearchQuery = function(activeChildren, filter) {
+      if (filter.type === 'checkbox') {
+        return this._buildFOVQuery(filter, activeChildren);
+      } else {
+        return this._buildRadioQuery(filter, activeChildren[0]);
+      }
+    };
+
+    QueryBuilder.prototype._buildRadioQuery = function(filter, activeChild) {
+      if (activeChild.query) {
+        return activeChild.query;
+      } else {
+        return this._buildFOVQuery(filter, [activeChild]);
+      }
+    };
+
+    QueryBuilder.prototype._buildFOVQuery = function(config, activeNodes) {
+      var operator, values;
+      values = _.flatten(_.map(activeNodes, function(node) {
+        return node.value || node.name;
+      }));
+      operator = config.operator || 'equals';
+      return scrivito.obj_where(config.field, operator, values);
+    };
+
+    QueryBuilder.prototype._addSearchTerm = function(query) {
+      var searchQuery;
+      if (this.filter.searchTerm && this.filter.searchTerm.length > 0) {
+        searchQuery = scrivito.obj_where('*', 'contains_prefix', this.filter.searchTerm);
+        return this._addOrCreateQuery(query, searchQuery);
+      } else {
+        return query;
+      }
+    };
+
+    QueryBuilder.prototype._buildTreeFilterQuery = function() {
+      var activeConfig, field, operator, query;
+      activeConfig = this._findActiveTreeFilterItem();
+      if (activeConfig) {
+        if (activeConfig.node.query) {
+          return models.QueryBuilder.prepareQuery(activeConfig.node.query);
+        } else {
+          field = this._findField(activeConfig);
+          if (field) {
+            operator = this._findOperator(activeConfig);
+            query = this._buildFOVQuery({
+              field: field,
+              operator: operator
+            }, [activeConfig.node]);
+            return models.QueryBuilder.prepareQuery(query);
+          }
+        }
+      }
+    };
+
+    QueryBuilder.prototype._findActiveTreeFilterItem = function() {
+      var activeConfig, subFilter, treeFilter, _i, _j, _len, _len1, _ref, _ref1;
+      _ref = this.filter.getTreeFilters();
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        treeFilter = _ref[_i];
+        _ref1 = treeFilter.subFilters;
+        for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
+          subFilter = _ref1[_j];
+          activeConfig = this._findActiveSubFilterItem(subFilter);
+          if (activeConfig) {
+            activeConfig.parents.push(treeFilter.config);
+            return activeConfig;
+          }
+        }
+      }
+    };
+
+    QueryBuilder.prototype._findActiveSubFilterItem = function(filterNode) {
+      var activeConfig, childNode, _i, _len, _ref;
+      if (filterNode.isActive()) {
+        return {
+          node: filterNode,
+          parents: []
+        };
+      } else {
+        _ref = filterNode.children;
+        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+          childNode = _ref[_i];
+          activeConfig = this._findActiveSubFilterItem(childNode);
+          if (activeConfig) {
+            activeConfig.parents.push(filterNode);
+            return activeConfig;
+          }
+        }
+      }
+    };
+
+    QueryBuilder.prototype._addOrCreateQuery = function(oldQuery, newQuery) {
+      if (oldQuery) {
+        return oldQuery.and(newQuery);
+      } else {
+        return models.QueryBuilder.prepareQuery(newQuery);
+      }
+    };
+
+    QueryBuilder.prototype._findOperator = function(config) {
+      return this._findAttributeInConfig('operator', config);
+    };
+
+    QueryBuilder.prototype._findField = function(config) {
+      return this._findAttributeInConfig('field', config);
+    };
+
+    QueryBuilder.prototype._findAttributeInConfig = function(attributeName, config) {
+      var parentWithAttribute;
+      if (config.node[attributeName]) {
+        return config.node[attributeName];
+      } else {
+        parentWithAttribute = _.find(config.parents, function(node) {
+          return node[attributeName];
+        });
+        return parentWithAttribute && parentWithAttribute[attributeName];
+      }
+    };
+
+    return QueryBuilder;
+
+  })();
+
+  models.QueryBuilder.prepareQuery = function(query) {
+    return query.clone().format('content_browser').order('_last_changed').reverse_order();
+  };
+
+  models.QueryBuilder.by_id = function(ids) {
+    return models.QueryBuilder.prepareQuery(scrivito.obj_where('id', 'equals', ids));
+  };
+
+  models.RadioFilter = (function(_super) {
+    __extends(RadioFilter, _super);
+
+    function RadioFilter(filter, name, filterDefinition) {
+      RadioFilter.__super__.constructor.call(this, filter, name, filterDefinition);
+      this.type = 'radio';
+      this.field = filterDefinition.field, this.expanded = filterDefinition.expanded, this.operator = filterDefinition.operator;
+      this.children = _.map(filterDefinition.options, (function(_this) {
+        return function(definition, name) {
+          return new models.RadioOption(_this, name, definition);
+        };
+      })(this));
+    }
+
+    RadioFilter.prototype.isExpanded = function() {
+      return !!this.expanded;
+    };
+
+    RadioFilter.prototype.hasActiveChildren = function() {
+      return _.some(this.children, function(child) {
+        return child.isActive();
+      });
+    };
+
+    RadioFilter.prototype.activate = function(radioOption) {
+      _.each(this.children, function(child) {
+        return child.active = child === radioOption;
+      });
+      return this.filter.changed();
+    };
+
+    RadioFilter.prototype.deactivateAll = function() {
+      _.each(this.children, function(child) {
+        return child.active = false;
+      });
+      return this.filter.changed();
+    };
+
+    return RadioFilter;
+
+  })(models.FilterNode);
+
+  models.RadioOption = (function(_super) {
+    __extends(RadioOption, _super);
+
+    function RadioOption(group, name, definition) {
+      this.group = group;
+      RadioOption.__super__.constructor.call(this, this.group.filter, name, definition);
+      this.value = definition.value, this.query = definition.query;
+      this.active = definition.selected;
+    }
+
+    RadioOption.prototype.setActive = function() {
+      return this.group.activate(this);
+    };
+
+    RadioOption.prototype.isActive = function() {
+      return !!this.active;
+    };
+
+    return RadioOption;
+
+  })(models.FilterNode);
+
+  models.TreeFilter = (function(_super) {
+    __extends(TreeFilter, _super);
+
+    function TreeFilter(filter, name, filterDefinition) {
+      var childrenDefinition;
+      TreeFilter.__super__.constructor.call(this, filter, name, filterDefinition);
+      this.type = 'tree';
+      this.icon = filterDefinition.icon, this.query = filterDefinition.query, this.expanded = filterDefinition.expanded, this.value = filterDefinition.value, this.field = filterDefinition.field, this.operator = filterDefinition.operator;
+      this.active = filterDefinition.selected;
+      childrenDefinition = filterDefinition.options || [];
+      this.children = _.map(childrenDefinition, function(definition, name) {
+        return new models.TreeFilter(filter, name, definition);
+      });
+    }
+
+    TreeFilter.prototype.isLeaf = function() {
+      return this.children.length === 0;
+    };
+
+    TreeFilter.prototype.isExpanded = function() {
+      return !!this.expanded;
+    };
+
+    TreeFilter.prototype.isActive = function() {
+      return !!this.active;
+    };
+
+    TreeFilter.prototype.toogleActive = function() {
+      if (this.isActive()) {
+        this.active = false;
+      } else {
+        this.filter.deselectHierarchicalFilters();
+        this.active = true;
+      }
+      return this.filter.changed();
+    };
+
+    TreeFilter.prototype.hasActiveChildren = function() {
+      return this.isActive() || _.some(this.children, function(child) {
+        return child.isActive();
+      });
+    };
+
+    TreeFilter.prototype.deselect = function() {
+      this.active = false;
+      return _.each(this.children, function(filter) {
+        return filter.deselect();
+      });
+    };
+
+    return TreeFilter;
+
+  })(models.FilterNode);
+
+  models.UploadSet = (function(_super) {
+    __extends(UploadSet, _super);
+
+    function UploadSet() {
+      UploadSet.__super__.constructor.call(this);
+      this._uploads = [];
+    }
+
+    UploadSet.prototype.uploads = function() {
+      return this._uploads;
+    };
+
+    UploadSet.prototype.addFiles = function(files) {
+      _.each(files, (function(_this) {
+        return function(file) {
+          return _this._uploads.unshift(new models.ObjUpload(_this, file));
+        };
+      })(this));
+      return this.changed();
+    };
+
+    UploadSet.prototype.hasActiveUploads = function() {
+      return _.some(this._uploads, function(upload) {
+        return upload.status() === 'active';
+      });
+    };
+
+    return UploadSet;
+
+  })(models.Listenable);
+
+  models.ViewMode = (function(_super) {
+    __extends(ViewMode, _super);
+
+    function ViewMode(mode) {
+      ViewMode.__super__.constructor.call(this);
+      if (mode == null) {
+        mode = "normal";
+      }
+      this._mode = mode;
+    }
+
+    ViewMode.prototype.setMode = function(newMode) {
+      this._mode = newMode;
+      return this.changed();
+    };
+
+    ViewMode.prototype.getMode = function() {
+      return this._mode;
+    };
+
+    return ViewMode;
+
+  })(models.Listenable);
+
+  ui.App = React.createClass({
+    displayName: 'App',
+    updateFilter: function(filter) {
+      return this.setState({
+        filter: filter
+      });
+    },
+    updateViewMode: function(viewMode) {
+      return this.setState({
+        viewMode: viewMode
+      });
+    },
+    updateObjCollection: function(objCollection) {
+      return this.setState({
+        objCollection: objCollection
+      });
+    },
+    setLoadingState: function(promise) {
+      this.refs.itemView.setState({
+        loading: true
+      });
+      return promise.then((function(_this) {
+        return function() {
+          return _this.refs.itemView.setState({
+            loading: false
+          });
+        };
+      })(this));
+    },
+    updateUploadSet: function(uploadSet) {
+      this.setState({
+        uploadSet: uploadSet
+      });
+      if (!uploadSet.hasActiveUploads()) {
+        return this.state.objCollection.reload();
+      }
+    },
+    updateInspector: function(inspector) {
+      return this.setState({
+        inspector: inspector
+      });
+    },
+    componentDidMount: function() {
+      this.state.filter.onChange(this.updateFilter);
+      this.state.viewMode.onChange(this.updateViewMode);
+      this.state.uploadSet.onChange(this.updateUploadSet);
+      this.state.objCollection.onChange(this.updateObjCollection);
+      this.state.objCollection.on('loading-obj', this.setLoadingState);
+      return this.state.inspector.onChange(this.updateInspector);
+    },
+    getInitialState: function() {
+      var initialSelection, selectionMode;
+      initialSelection = this.props.container.options.selection || [];
+      selectionMode = this.props.container.options.selectionMode;
+      return {
+        filter: this.props.initialFilter,
+        objs: [],
+        viewMode: new models.ViewMode(),
+        uploadSet: new models.UploadSet(),
+        objCollection: new models.ObjCollection(initialSelection, selectionMode),
+        inspector: new models.Inspector()
+      };
+    },
+    render: function() {
+      return React.createElement("div", {
+        "className": "scrivito-app-root"
+      }, React.createElement("div", {
+        "className": "scrivito-content-browser-body"
+      }, React.createElement("div", {
+        "className": "scrivito-content-browser-wrapper"
+      }, React.createElement(ui.TopBar, {
+        "filter": this.state.filter,
+        "viewMode": this.state.viewMode
+      }), React.createElement(ui.Filter, {
+        "filter": this.state.filter,
+        "objCollection": this.state.objCollection
+      }), React.createElement(ui.Items, {
+        "ref": "itemView",
+        "objCollection": this.state.objCollection,
+        "viewMode": this.state.viewMode,
+        "uploadSet": this.state.uploadSet,
+        "inspector": this.state.inspector
+      })), React.createElement(ui.Inspector, {
+        "inspector": this.state.inspector
+      })), React.createElement(ui.Footer, {
+        "container": this.props.container,
+        "objCollection": this.state.objCollection
+      }));
+    }
+  });
+
+  ui.Filter = React.createClass({
+    displayName: 'Filter',
+    mixins: [FilterMixin],
+    handleDeselectAllFilters: function() {
+      return this.props.filter.deselectAllFilters();
+    },
+    renderAdditionalFilters: function() {
+      var subFilters;
+      subFilters = _.map(this.props.filter.additionalFilters, function(additionalFilter) {
+        return React.createElement(ui.Filter.AdditionalOptionFilter, {
+          "filter": additionalFilter
+        });
+      });
+      return this.renderSubFiltersList(subFilters, "compact");
+    },
+    loadObjsByFilterQuery: function(filter) {
+      var query, queryBuilder;
+      this.setState({
+        selectedFilter: false
+      });
+      queryBuilder = new models.QueryBuilder(filter);
+      query = queryBuilder.searchRequest();
+      return this.props.objCollection.loadFromBackend(query);
+    },
+    componentDidMount: function() {
+      this.props.filter.onChange(this.loadObjsByFilterQuery);
+      return this.activateInitialFilter();
+    },
+    activateInitialFilter: function() {
+      if (this.props.filter.hasActiveChildren()) {
+        return this.loadObjsByFilterQuery(this.props.filter);
+      } else {
+        return this.activateSelectedFilter();
+      }
+    },
+    activateSelectedFilter: function() {
+      var query;
+      this.props.filter.deselectHierarchicalFilters();
+      this.setState({
+        selectedFilter: true
+      });
+      query = models.QueryBuilder.by_id(this.props.objCollection.selectedObjs());
+      return this.props.objCollection.loadFromBackend(query);
+    },
+    getInitialState: function() {
+      return {
+        selectedFilter: false
+      };
+    },
+    renderFilterSeparator: function() {
+      if (this.props.filter.hasAdditionalFilters() && this.props.filter.hasHierarchicalFilters()) {
+        return React.createElement("div", {
+          "className": "scrivito_separator"
+        }, "more filters");
+      }
+    },
+    render: function() {
+      var selectedObjsCount, treeSubFilters;
+      treeSubFilters = _.map(this.props.filter.getHierarchicalFilters(), function(treeFilter) {
+        return React.createElement(ui.Filter.TreeFilter, {
+          "filter": treeFilter
+        });
+      });
+      selectedObjsCount = this.props.objCollection.selectedObjs().length;
+      return React.createElement("div", {
+        "className": "scrivito-content-browser-filter"
+      }, React.createElement(ui.Filter.SelectedFilter, {
+        "selectedCount": selectedObjsCount,
+        "active": this.state.selectedFilter,
+        "activateSelectedFilter": this.activateSelectedFilter
+      }), React.createElement("div", {
+        "className": "scrivito-content-browser-filter-scroll"
+      }, React.createElement(ui.Filter.DeselectFilter, {
+        "onDeselectAllFilters": this.handleDeselectAllFilters
+      }), this.renderSubFiltersList(treeSubFilters), this.renderFilterSeparator(), this.renderAdditionalFilters()));
+    }
+  });
+
+  ui.Filter.AdditionalOptionFilter = React.createClass({
+    displayName: 'AdditionalOptionFilter',
+    mixins: [ExpandableFilterNodeMixin],
+    getInitialState: function() {
+      return this.defaultExpansionState();
+    },
+    getAdditionalLableClasses: function() {
+      return classSet(this.openClassSetOptions());
+    },
+    createDeselctAllRadioOption: function() {
+      return React.createElement(ui.Filter.DeselectAllRadioOptionFilter, {
+        "filter": this.props.filter
+      });
+    },
+    renderSubRadioOptionFilters: function() {
+      var childKey, element, i, _i, _len, _ref, _results;
+      _ref = this.props.filter.children;
+      _results = [];
+      for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
+        element = _ref[i];
+        childKey = "" + element.title + "-" + i;
+        if (this.props.filter.type === "radio") {
+          _results.push(React.createElement(ui.Filter.RadioOptionFilter, {
+            "key": childKey,
+            "filter": element
+          }));
+        } else if (this.props.filter.type === "checkbox") {
+          _results.push(React.createElement(ui.Filter.CheckBoxOptionFilter, {
+            "key": childKey,
+            "filter": element
+          }));
+        } else {
+          _results.push(void 0);
+        }
+      }
+      return _results;
+    },
+    render: function() {
+      var labelClasses;
+      labelClasses = this.getAdditionalLableClasses();
+      return React.createElement("li", {
+        "className": labelClasses
+      }, this.renderArrowTag(), React.createElement("div", {
+        "className": "scrivito-content-browser-hierarchy-label",
+        "onClick": this.arrowHandleClick
+      }, React.createElement("span", null, this.props.filter.title)), React.createElement("ul", null, (this.props.filter.type === "radio" ? this.createDeselctAllRadioOption() : void 0), this.renderSubRadioOptionFilters()));
+    }
+  });
+
+  ui.Filter.CheckBoxOptionFilter = React.createClass({
+    displayName: 'CheckBoxOptionFilter',
+    mixins: [OptionFilterMixin],
+    render: function() {
+      return React.createElement("li", {
+        "className": this.activeClassName(),
+        "onClick": this.optionLabelToogleClick
+      }, React.createElement("div", {
+        "className": "scrivito-content-browser-hierarchy-checkbox"
+      }), this.renderOptionFilterTitle());
+    }
+  });
+
+  ui.Filter.DeselectFilter = React.createClass({
+    displayName: 'DeselectFilter',
+    handleDeselect: function() {
+      return this.props.onDeselectAllFilters();
+    },
+    render: function() {
+      return React.createElement("div", {
+        "className": "scrivito_button",
+        "onClick": this.handleDeselect
+      }, "deselect all");
+    }
+  });
+
+  ui.Filter.DeselectAllRadioOptionFilter = React.createClass({
+    displayName: 'DeselectAllRadioOptionFilter',
+    mixins: [OptionFilterLabelRenderMixin],
+    getActiveClass: function() {
+      if (this.props.filter.hasActiveChildren()) {
+        return '';
+      } else {
+        return "active";
+      }
+    },
+    deselectAllRadioOption: function() {
+      return this.props.filter.deactivateAll();
+    },
+    render: function() {
+      return React.createElement("li", {
+        "className": this.getActiveClass(),
+        "onClick": this.deselectAllRadioOption
+      }, React.createElement("div", {
+        "className": "scrivito-content-browser-hierarchy-radio"
+      }), this.renderHierarchyLabelTitle('All'));
+    }
+  });
+
+  ui.Filter.RadioOptionFilter = React.createClass({
+    displayName: 'RadioOptionFilter',
+    mixins: [OptionFilterMixin],
+    labelToogleClick: function() {
+      if (!this.props.filter.isActive()) {
+        return this.props.filter.setActive();
+      }
+    },
+    render: function() {
+      return React.createElement("li", {
+        "className": this.activeClassName(),
+        "onClick": this.labelToogleClick
+      }, React.createElement("div", {
+        "className": "scrivito-content-browser-hierarchy-radio"
+      }), this.renderOptionFilterTitle());
+    }
+  });
+
+  ui.Filter.SelectedFilter = React.createClass({
+    displayName: 'SelectedFilter',
+    filterClass: function() {
+      return classSet({
+        'scrivito-content-browser-filter-item': true,
+        'selected-filter': true,
+        'active': this.props.active
+      });
+    },
+    render: function() {
+      return React.createElement("div", {
+        "className": "scrivito-content-browser-filter-fixed"
+      }, React.createElement("div", {
+        "className": this.filterClass(),
+        "onClick": this.props.activateSelectedFilter
+      }, React.createElement("span", {
+        "className": "scrivito-content-browser-icon scrivito-content-browser-icon-ok-box"
+      }), React.createElement("span", {
+        "className": "scrivito-content-browser-filter-label"
+      }, "Selected", React.createElement("span", {
+        "className": "scrivito-content-browser-counter selected-total"
+      }, this.props.selectedCount))));
+    }
+  });
+
+  ui.Filter.TreeFilter = React.createClass({
+    displayName: 'TreeFilter',
+    mixins: [ExpandableFilterNodeMixin],
+    getInitialState: function() {
+      return this.defaultExpansionState();
+    },
+    renderIconTag: function() {
+      var baseIconClass, iconClass;
+      if (this.props.filter.icon != null) {
+        baseIconClass = "scrivito-content-browser-icon";
+        iconClass = baseIconClass + ("-" + this.props.filter.icon);
+        return React.createElement("i", {
+          "className": "" + baseIconClass + " " + iconClass
+        });
+      }
+    },
+    getLabelClasses: function() {
+      var activeClass, classes;
+      activeClass = {
+        'active': this.props.filter.isActive()
+      };
+      classes = _.extend(this.openClassSetOptions(), activeClass);
+      return classSet(classes);
+    },
+    renderSubTrees: function() {
+      var childKey, element, i, _i, _len, _ref, _results;
+      _ref = this.props.filter.children;
+      _results = [];
+      for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
+        element = _ref[i];
+        childKey = "" + element.title + "-" + i;
+        _results.push(React.createElement(ui.Filter.TreeFilter, {
+          "key": childKey,
+          "filter": element
+        }));
+      }
+      return _results;
+    },
+    labelToogleClick: function() {
+      return this.props.filter.toogleActive();
+    },
+    render: function() {
+      var labelClasses;
+      labelClasses = this.getLabelClasses();
+      return React.createElement("li", {
+        "className": labelClasses
+      }, (!this.props.filter.isLeaf() ? this.renderArrowTag() : void 0), React.createElement("div", {
+        "className": "scrivito-content-browser-hierarchy-label",
+        "onClick": this.labelToogleClick
+      }, this.renderIconTag(), React.createElement("span", null, this.props.filter.title)), (!this.props.filter.isLeaf() ? React.createElement("ul", null, this.renderSubTrees()) : void 0));
+    }
+  });
+
+  ui.Footer = React.createClass({
+    displayName: 'Footer',
+    currentSelectedCount: function() {
+      return this.props.objCollection.selectedObjs().length;
+    },
+    cancelClick: function() {
+      this.props.container._promise.reject();
+      return this.props.container.close();
+    },
+    doneClick: function() {
+      this.props.container._promise.resolve(this.props.objCollection.selectedObjs());
+      return this.props.container.close();
+    },
+    deleteClick: function() {
+      return this.props.objCollection.destroySelectedObjs();
+    },
+    render: function() {
+      return React.createElement("div", {
+        "className": "scrivito-content-browser-footer"
+      }, React.createElement("a", {
+        "className": "scrivito_button scrivito_lightgrey content-browser-delete",
+        "onClick": this.deleteClick
+      }, "Delete", React.createElement("span", {
+        "className": "scrivito-content-browser-counter selected-total"
+      }, this.currentSelectedCount())), React.createElement("a", {
+        "className": "scrivito_button scrivito_green content-browser-save",
+        "onClick": this.doneClick
+      }, "Select", React.createElement("span", {
+        "className": "scrivito-content-browser-counter selected-total"
+      }, this.currentSelectedCount())), React.createElement("a", {
+        "className": "scrivito_button content-browser-close",
+        "onClick": this.cancelClick
+      }, "Cancel"));
+    }
+  });
+
+  ui.Inspector = React.createClass({
+    displayName: 'Inspector',
+    getDetailsClassName: function() {
+      return "scrivito-content-browser-icon scrivito-content-browser-icon-eye";
+    },
+    render: function() {
+      return React.createElement("div", {
+        "className": "scrivito-content-browser-inspector"
+      }, (this.props.inspector.inspectorUrl() != null ? React.createElement("div", null, React.createElement("h3", null, React.createElement("span", {
+        "title": "Details",
+        "className": this.getDetailsClassName()
+      }), React.createElement("span", {
+        "className": "title"
+      }, this.props.inspector.fileDetail())), React.createElement("div", {
+        "className": "inspector-content"
+      }, React.createElement("iframe", {
+        "src": this.props.inspector.inspectorUrl()
+      }))) : void 0));
+    }
+  });
+
+  ui.Items = React.createClass({
+    displayName: 'Items',
+    getInitialState: function() {
+      return {
+        loading: false,
+        dragInProgres: false
+      };
+    },
+    dropZoneClass: function() {
+      return classSet({
+        "scrivito-content-browser-items": true,
+        "uploader-drag-over": this.state.dragInProgres
+      });
+    },
+    uploadFiles: function(event) {
+      var dataTransfer, files;
+      this.changeDragState(false)(event);
+      dataTransfer = event.dataTransfer;
+      if (dataTransfer == null) {
+        return;
+      }
+      files = dataTransfer.files;
+      if (files.length > 0) {
+        return this.props.uploadSet.addFiles(files);
+      }
+    },
+    changeDragState: function(toValue) {
+      return (function(_this) {
+        return function(event) {
+          event.preventDefault();
+          event.stopPropagation();
+          return _this.setState({
+            dragInProgres: toValue
+          });
+        };
+      })(this);
+    },
+    render: function() {
+      return React.createElement("div", {
+        "className": this.dropZoneClass(),
+        "onDragOver": this.changeDragState(true),
+        "onDrop": this.uploadFiles,
+        "onDragLeave": this.changeDragState(false)
+      }, (this.state.loading ? React.createElement("div", {
+        "className": "scrivito-content-browser-loading"
+      }, React.createElement("i", {
+        "className": "scrivito-content-browser-icon scrivito-content-browser-icon-refresh"
+      })) : this.props.uploadSet.hasActiveUploads() ? React.createElement(ui.UploadItems, {
+        "uploadSet": this.props.uploadSet
+      }) : React.createElement(ui.ThumbnailItems, {
+        "objCollection": this.props.objCollection,
+        "viewMode": this.props.viewMode,
+        "toggleSelected": this.props.toggleSelected,
+        "inspector": this.props.inspector
+      })));
+    }
+  });
+
+  ui.ResizeBar = React.createClass({
+    displayName: 'ResizeBar',
+    resizeButtonsData: ["small", "normal", "big", "large"],
+    render: function() {
+      var size;
+      return React.createElement("div", null, (function() {
+        var _i, _len, _ref, _results;
+        _ref = this.resizeButtonsData;
+        _results = [];
+        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+          size = _ref[_i];
+          _results.push(React.createElement(ui.ResizeItem, {
+            "viewMode": this.props.viewMode,
+            "size": size
+          }));
+        }
+        return _results;
+      }).call(this));
+    }
+  });
+
+  ui.ResizeItem = React.createClass({
+    displayName: 'ResizeItem',
+    resizeButtonsData: {
+      "large": {
+        iconTitle: "Large thumbnails",
+        iconClassName: "scrivito-content-browser-icon-th-large"
+      },
+      "big": {
+        iconTitle: "Big thumbnails",
+        iconClassName: "scrivito-content-browser-icon-th"
+      },
+      "normal": {
+        iconTitle: "Thumbnails",
+        iconClassName: "scrivito-content-browser-icon-th-medium"
+      },
+      "small": {
+        iconTitle: "Small thumbnails",
+        iconClassName: "scrivito-content-browser-icon-th-small"
+      }
+    },
+    getIconClassName: function(size) {
+      return "scrivito-content-browser-icon " + this.resizeButtonsData[size].iconClassName;
+    },
+    getIconTitle: function(size) {
+      return this.resizeButtonsData[size].iconTitle;
+    },
+    getLabelClasses: function() {
+      return classSet({
+        'active': this.props.viewMode.getMode() === this.props.size,
+        "editing-button-view": true
+      });
+    },
+    changeViewMode: function() {
+      return this.props.viewMode.setMode(this.props.size);
+    },
+    render: function() {
+      return React.createElement("span", {
+        "data-size": this.props.size,
+        "className": this.getLabelClasses(),
+        "onClick": this.changeViewMode
+      }, React.createElement("i", {
+        "title": this.getIconTitle(this.props.size),
+        "className": this.getIconClassName(this.props.size)
+      }));
+    }
+  });
+
+  ui.ThumbnailItem = React.createClass({
+    displayName: 'ThumbnailItem',
+    title: function() {
+      return this.props.obj.title || "(No description)";
+    },
+    selectClass: function() {
+      var className;
+      className = 'scrivito-content-browser-thumbnails-select select-item';
+      if (this.props.objCollection.isSelected(this.props.obj.id)) {
+        className += ' active';
+      }
+      return className;
+    },
+    previewImage: function() {
+      if (this.props.obj.preview) {
+        return React.createElement("img", {
+          "src": this.props.obj.preview
+        });
+      } else {
+        return React.createElement("span", {
+          "className": "scrivito-content-browser-icon scrivito-content-browser-icon-generic"
+        });
+      }
+    },
+    handleSelectClick: function() {
+      return this.props.objCollection.toggleSelected(this.props.obj.id);
+    },
+    changeInspectObj: function() {
+      return this.props.inspector.setInspectedObj(this.props.obj);
+    },
+    getItemClasses: function() {
+      return classSet({
+        'active': this.props.inspector.getInspectedObj() === this.props.obj,
+        "content-browser-item": true
+      });
+    },
+    render: function() {
+      return React.createElement("li", {
+        "className": this.getItemClasses()
+      }, React.createElement("div", {
+        "className": "scrivito-content-browser-item-wrapper"
+      }, React.createElement("div", {
+        "className": "scrivito-content-browser-preview",
+        "onClick": this.changeInspectObj
+      }, this.previewImage(), React.createElement("span", {
+        "className": "scrivito-content-browser-inspect"
+      })), React.createElement("div", {
+        "className": "scrivito-content-browser-meta",
+        "onClick": this.handleSelectClick
+      }, React.createElement("span", {
+        "className": "scrivito-content-browser-thumbnails-name"
+      }, this.title()), React.createElement("span", {
+        "className": this.selectClass()
+      }))));
+    }
+  });
+
+  ui.ThumbnailItems = React.createClass({
+    displayName: 'ThumbnailItems',
+    getSizeClassName: function() {
+      return "items scrivito-content-browser-thumbnails " + (this.props.viewMode.getMode());
+    },
+    render: function() {
+      var items;
+      items = _.map(this.props.objCollection.objs(), (function(_this) {
+        return function(obj) {
+          return React.createElement(ui.ThumbnailItem, {
+            "key": obj.id,
+            "obj": obj,
+            "objCollection": _this.props.objCollection,
+            "inspector": _this.props.inspector
+          });
+        };
+      })(this));
+      return React.createElement("ul", {
+        "className": this.getSizeClassName()
+      }, items);
+    }
+  });
+
+  ui.TopBar = React.createClass({
+    displayName: 'TopBar',
+    setSearchTerm: function() {
+      return this.props.filter.setSearchTerm(this.state.searchTerm);
+    },
+    getInitialState: function() {
+      return {
+        searchTerm: this.props.filter.searchTerm
+      };
+    },
+    triggerSearchWithEnter: function(event) {
+      if (event.keyCode === 13) {
+        return this.setSearchTerm();
+      }
+    },
+    updateSearchTerm: function(event) {
+      return this.setState({
+        searchTerm: event.target.value
+      });
+    },
+    render: function() {
+      return React.createElement("div", {
+        "className": "scrivito-content-browser-topbar"
+      }, React.createElement("div", {
+        "className": "scrivito-content-browser-search"
+      }, React.createElement("input", {
+        "type": "text",
+        "placeholder": "Search",
+        "className": "search-field",
+        "value": this.state.searchTerm,
+        "onChange": this.updateSearchTerm,
+        "onKeyUp": this.triggerSearchWithEnter
+      }), React.createElement("button", {
+        "className": "search-field-button",
+        "onClick": this.setSearchTerm
+      }, "Search")), React.createElement(ui.ResizeBar, {
+        "viewMode": this.props.viewMode
+      }));
+    }
+  });
+
+  ui.UploadItem = React.createClass({
+    displayName: 'UploadItem',
+    progressWidth: function() {
+      return {
+        width: "" + (this.props.objUpload.progress()) + "%"
+      };
+    },
+    failureMessage: function() {
+      return this.props.objUpload.failureMessage() || "Upload failed. Please check your network connection.";
+    },
+    failureContent: function() {
+      if (this.props.objUpload.status() === 'failed') {
+        return React.createElement("p", {
+          "className": "scrivito-content-browser-error"
+        }, this.failureMessage());
+      }
+    },
+    render: function() {
+      return React.createElement("div", {
+        "className": "scrivito-content-browser-progress-file"
+      }, React.createElement("p", null, this.props.objUpload.fileName()), this.failureContent(), React.createElement("div", {
+        "className": "scrivito-content-browser-progress"
+      }, React.createElement("div", {
+        "className": "scrivito-content-browser-progress-bar",
+        "style": this.progressWidth()
+      })));
+    }
+  });
+
+  ui.UploadItems = React.createClass({
+    displayName: 'UploadItems',
+    render: function() {
+      var items;
+      items = _.map(this.props.uploadSet.uploads(), function(objUpload) {
+        return React.createElement(ui.UploadItem, {
+          "objUpload": objUpload
+        });
+      });
+      return React.createElement("div", {
+        "className": "scrivito-content-browser-progress-wrapper"
+      }, items);
+    }
+  });
+
+  scrivito.content_browser.stub_filters = {
+    categories: {
+      type: 'tree',
+      options: {
+        all_generics: {
+          title: 'Generics',
+          query: scrivito.obj_where('_obj_class', 'equals', 'Generic'),
+          icon: 'pdf',
+          options: {
+            reports: {
+              title: 'Reports',
+              query: 'empty'
+            },
+            datasheets: {
+              title: 'Datasheets',
+              query: 'empty'
+            }
+          }
+        }
+      }
+    }
+  };
+
+}).call(this);