app/assets/javascripts/slices/app/views/asset_library_view.js
// The asset library is dedicated to browsing, searching and managing of
// assets. It can be rendered in-place, or to a specific element using the
// helper method.
//
// To render the library inline in html:
//
// <script>slices.renderAssetLibrary()</script>
//
// Otherwise:
//
// slices.renderAssetLibrary({ el: '#my-target' })
//
slices.AssetLibraryView = Backbone.View.extend({
DRAG_THRESHOLD: 15,
DRAWER_HEIGHT: 250,
events: {
'keyup [type="search"]' : 'search',
'click [type="search"]' : 'search',
'click [data-action="close"]' : 'close',
'click [data-action="show-all"]' : 'showAll',
'mousedown .library-container' : 'backgroundPress',
'mousedown .resize-handle' : 'startResize'
},
thumbs: {},
selection: [],
currentSearchTerm: '',
className: 'asset-library',
// We include the full template here, so the view can be rendered anywhere
// without html needing to be present ahead of time.
template: Handlebars.compile(
'<div class="toolbar">' +
'{{{resizeHandle}}}' +
'<input type="search" id="assets-search" placeholder="Search assets...">' +
'<div class="count"></div>' +
'{{{hint}}}' +
'<div class="actions"><ul>{{actions}}</ul></div>' +
'</div>' +
'<div class="library-container">' +
'<ul class="library"></ul>' +
'</div>'
),
// The collection is instantiated during initialization, as this is an
// 'AppView' style class.
initialize: function() {
_.bindAll(this);
this.collection = new slices.AssetCollection();
this.collection.bind('add', this.add);
this.collection.bind('remove', this.remove);
this.collection.bind('reset', this.reset);
$(window).on('assets:uploadCompleted', this.fetch);
this.render();
this.scrollArea = this.$('.library-container');
this.scrollArea.on('scroll', this.onScroll);
this.initializeUploader();
this.showLoadingSpinner();
this.fetch();
},
render: function() {
$(this.el).html(this.template(this));
return this;
},
// Clear all thumbs on display and re-render the collection.
reset: function() {
this.clearThumbs();
this.collection.each(this.add);
},
// Create a thumb view for the model, render it, and stick it in
// our reference hash.
add: function(model) {
var thumb = new slices.AssetThumbView({ model: model, selectable: true });
thumb.bind('thumb:press', this.thumbPress);
thumb.bind('thumb:release', this.thumbRelease);
thumb.bind('thumb:blur', this.thumbBlur);
this.loadingSpinner().before(thumb.render().el);
this.thumbs[model.cid] = thumb;
this.updateCount();
},
// Ask the thumb view to remove itself, and delete the reference.
remove: function(model) {
this.clearThumb(model.cid);
this.updateCount();
},
// Handle special keystrokes, or defer to our debounced general search.
search: function(e) {
if (e.which == 27) this.$('[type="search"]').val('');
this._search(e);
},
// This debounced method actually performs the search on our collection.
_search: _.debounce(function(e) {
var term = this.searchTerm();
if (term === this.currentSearchTerm) return;
this.currentSearchTerm = term;
this.fetch();
}, 300),
// Assuming we’re in upload-view, take us back to normal.
showAll: function() {
if (this.uploader.files.length > 0) {
alert('Uploads are still in progress, please wait for them to finish.');
} else {
this.fetch();
}
},
// Remove all thumb views currently on display.
clearThumbs: function() {
this.updateCount('Searching…');
for (var cid in this.thumbs) this.clearThumb(cid);
},
// Remove a specific thumb.
clearThumb: function(cid) {
var thumb = this.thumbs[cid];
this.selection = _(this.selection).without(thumb);
thumb.remove();
delete this.thumbs[cid];
},
// Helper method for getting the value of the search field.
searchTerm: function() {
return this.$('[type="search"]').val();
},
// If we’re in drawer mode, we’ll display a hint that users should
// drag and drop.
hint: function() {
if (this.options.mode === 'drawer') {
return '<div class="hint">Drag & drop to place on the page</div>';
}
},
// If we’re in drawer mode, we’ll add a resize handle in here.
resizeHandle: function() {
if (this.options.mode === 'drawer') {
return '<div class="resize-handle"></div>';
}
},
// We render different action button depending on the mode.
actions: function() {
var actions = [];
actions.push('<li><a class="button" data-action="upload">Upload</a></li>');
if (this.options.mode === 'drawer') {
actions.push('<li><a class="button" data-action="close">Close</a></li>');
}
return new Handlebars.SafeString(actions.join(''));
},
// The open and close methods only apply if in 'drawer' mode.
open: function(options) {
$('#container').stop().animate({ paddingBottom: this.DRAWER_HEIGHT + 'px' });
$(this.el).stop().animate(
{ height: this.DRAWER_HEIGHT + 'px' },
_.extend({}, options, { complete: this.afterOpen })
);
},
afterOpen: function() {
this.$('input[type="search"]')[0].focus();
},
close: function() {
this.$('input[type="search"]')[0].blur();
$('#container').stop().animate({ paddingBottom: '0px' });
$(this.el).stop().animate({ height: '0px' });
},
// Thumb press/release behaviour mimicks that of operating system file
// selection. Holding down shift selects ranges of files, with memory of
// the anchor. Holding down cmd/ctrl selects multiple assets. Clicks
// without modifiers select single assets.
//
// This method is disgraceful at the moment, because there are a few
// modes of behaviour. It’s an ideal candidate for refactoring.
thumbPress: function(event, thumb) {
_.invoke(this.selection, 'deselect');
if (event.shiftKey) {
if (this.selection.length === 0) {
this.selection.push(thumb);
this.selectionAnchor = thumb;
} else {
var first = this.selectionAnchor,
start = this.collection.indexOf(first.model),
end = this.collection.indexOf(thumb.model),
lowest = Math.min(start, end),
highest = Math.max(start, end);
this.selection = [];
for (var i = lowest; i <= highest; i++) {
var thumb = this.thumbs[this.collection.at(i).cid];
this.selection.push(thumb);
}
}
} else if (event.metaKey) {
if (_(this.selection).include(thumb)) {
this.selection = _(this.selection).without(thumb);
} else {
this.selection.push(thumb);
}
this.selectionAnchor = _.sortBy(this.selection, function(thumb) {
return thumb.model.collection.indexOf(thumb.model);
})[0];
} else {
if (!_(this.selection).include(thumb)) {
this.selection = [thumb];
this.selectionAnchor = thumb;
}
}
_.invoke(this.selection, 'select');
if (this.selection.length > 0) this.prepareForDrag(event);
this.listenForKeys();
},
// Most selection releated behaviours happen on mousedown. The exception
// is when multiple assets are selected - a single unmodified click will
// set the selection to the clicked asset, but only when the mouse is
// released.
thumbRelease: function(event, thumb) {
if (event.metaKey || event.shiftKey) return;
_.invoke(this.selection, 'deselect');
this.selection = [thumb];
this.selectionAnchor = thumb;
_.invoke(this.selection, 'select');
},
// Thumb Blur is not the best name, but this basically implies that an
// action has taken place which should cause asset library thumb-related
// actions to take a back-seat. This is used when the asset editor is
// opened.
thumbBlur: function() {
this.deselectAll();
},
// When the background is pressed, the selection is cleared out.
backgroundPress: function(event) {
if (event.shiftKey || event.metaKey) return;
event.preventDefault();
event.stopImmediatePropagation();
this.deselectAll();
},
// Deselect all thumbs and trigger appropriate actions.
deselectAll: function() {
_.invoke(this.selection, 'deselect');
this.selection = [];
},
// Array of models from the current selection.
selectedAssets: function() {
return _.pluck(this.selection, 'model');
},
// Update the UI count of asset(s) found.
updateCount: function(message) {
this.$('.count').html(message || this.countMessage());
},
// Messages for different asset counts.
countMessages: {
default: {
none: Handlebars.compile('No assets, yet…'),
one: Handlebars.compile('Showing 1 asset'),
some: Handlebars.compile(
'Showing latest {{count}} assets of {{total}} total'
),
all: Handlebars.compile(
'Showing all {{count}} assets, latest first'
)
},
uploads: {
one: Handlebars.compile(
'Showing 1 new asset ' +
'(<a data-action="show-all">Show everything</a>)'
),
some: Handlebars.compile(
'Showing {{count}} new assets ' +
'(<a data-action="show-all">Show everything</a>)'
),
},
search: {
none: Handlebars.compile('No matching assets'),
one: Handlebars.compile('Showing 1 matching asset'),
some: Handlebars.compile(
'Showing latest {{count}} matching assets of {{total}} total'
),
all: Handlebars.compile(
'Showing all {{count}} maching assets, latest first'
)
}
},
// Returns the appropriate message count for the current context.
countMessage: function() {
var t = this.countMessages,
total = this.collection.totalEntries,
count = this.collection.length;
if (this.inUploadView) {
t = t.uploads;
if (count === 1) {
return t.one({ count: count });
} else {
return t.some({ count: count });
}
} else {
t = this.currentSearchTerm ? t.search : t.default;
if (total === 0) {
return t.none();
} else if (total === 1) {
return t.one();
} else if (total > count) {
return t.some({ total: total, count: count });
} else {
return t.all({ total: total, count: count });
}
}
},
NEXT_PAGE_THRESHOLD: 600,
// Potentially load more entries on scroll.
onScroll: _.debounce(function(e) {
if (this.loading) return;
if (this.inUploadView) return;
var library = this.$('.library'),
scrollTop = this.scrollArea.scrollTop(),
scrollBottom = scrollTop + this.scrollArea.height(),
remaining = library.height() - scrollBottom;
if (remaining <= this.NEXT_PAGE_THRESHOLD && this.collection.hasMorePages()) {
this.showLoadingSpinner();
this.fetch({ add: true });
}
}, 300),
// Spinner graphic, revealed as necessary.
loadingSpinner: _.memoize(function() {
return $(
'<li class="loading-indicator">' +
'<span class="label">Loading…</label>' +
'</li>'
).appendTo(this.$('.library'));
}),
showLoadingSpinner: function() {
this.loadingSpinner().css({ display: 'block' });
},
hideLoadingSpinner: function() {
this.loadingSpinner().css({ display: 'none' });
},
// Wrapper around the collection’s fetch method. Takes seach
// and paging into account.
fetch: function(options) {
options = _.extend({ add: false }, options);
this.loading = true;
this.exitUploadView();
this.showLoadingSpinner();
if (!options.add) this.collection.reset();
this.collection.fetch({
data: {
search: this.searchTerm(),
page: options.add ? (this.collection.currentPage + 1) : 1
},
add: options.add,
success: this.onFetchSuccess
});
},
// Hide spinner and set loading state back to false.
onFetchSuccess: function() {
this.loading = false;
this.hideLoadingSpinner();
this.updateCount();
},
// ## Drag-Drop API:
//
// Any object can hook into AssetLibrary’s drag-drop API by
// implementing the following protocol:
//
// Bind to the `assets:dragStarted` event and register to receive assets:
//
// var self = this;
//
// $(window).on('assets:dragStarted', function(event, library) {
// library.registerReceiver(self);
// });
//
// Implement the `withinBounds` method:
//
// this.withinBounds = function(x, y) {
// // Return true or false
// }
//
// Implement the `assetsOver` method:
//
// this.assetsOver = function(x, y) { ... }
//
// Implement the `assetsNotOver` method:
//
// this.assetsNotOver = function() { ... }
//
// Implement the `receiveAssets` method:
//
// this.receiveAssets = function(assets, x, y) { ... }
//
// Store the originating click, and bind onto relevant mouse events.
prepareForDrag: function(e) {
$(document).on('mousemove', this.onDrag).
on('mouseup', this.stopDrag);
this.dragOrigin = { x: e.pageX, y: e.pageY };
},
// If we’ve already started dragging, update the little helper so it follows
// the user’s mouse pointer around. Otherwise, test if we’ve crossed the
// threshold yet.
onDrag: function(e) {
if (this.dragging) {
this.dragHelper.css({ left: e.pageX + 'px', top: e.pageY + 'px' });
this.reviewReceiversForDrag(e.pageX, e.pageY);
} else {
this.testDragTreshold(e);
}
},
// Dragging only begins when the mouse is dragged over DRAG_TRESHOLD.
testDragTreshold: function(e) {
var absDelta = Math.max(
Math.abs(e.pageX - this.dragOrigin.x),
Math.abs(e.pageY - this.dragOrigin.y)
);
if (absDelta >= this.DRAG_THRESHOLD) this.startDrag(e);
},
// Set the dragging state to true and create the drag helper -
// the collection of little thumbs representing the current selection.
startDrag: function(e) {
this.dragging = true;
this.dragHelper = $('<span class="asset-drag-helper">');
this.dragHelper.css({ position: 'absolute' });
for (var i in this.selection) { var thumb = this.selection[i];
var img = thumb.$('img').clone(false);
this.dragHelper.append(img);
}
this.dragHelper.appendTo('body');
var width = Math.ceil(Math.sqrt(this.selection.length)) *
(this.dragHelper.width() / this.selection.length);
this.dragHelper.width(width);
this.receivers = [this];
$(window).trigger('assets:dragStarted', this);
window.autoscroll.start();
this.onDrag(e);
},
// Unbind mousey events, delete the drag helper, and inform potenital
// recipients that a drop is taking place.
stopDrag: function(e) {
$(document).off('mousemove', this.onDrag).
off('mouseup', this.stopDrag);
window.autoscroll.stop();
if (this.dragHelper) {
this.dragHelper.remove();
delete this.dragHelper;
}
delete this.dragging;
this.reviewReceiversForDrop(e.pageX, e.pageY);
delete this.receivers;
},
// Registers a potential asset receiver. Receivers are polled in order.
registerReceiver: function(receiver) {
this.receivers.push(receiver);
},
// On drag, we’ll want to send `assetsNotOver` to all receivers,
// then identify the receiver under the cursor (if any) and it
// `assetsOver`.
reviewReceiversForDrag: function(x, y) {
var receiver = this.identifyReceiver(x, y);
_.each(this.receivers, function(r) {
if (r !== receiver) r.assetsNotOver();
else r.assetsOver(x, y);
});
},
// On drop, we’ll identify the receiver under the cursor and send
// `receiveAssets`, with the current selection.
reviewReceiversForDrop: function(x, y) {
_.invoke(this.receivers, 'assetsNotOver');
var receiver = this.identifyReceiver(x, y);
if (receiver) receiver.receiveAssets(this.selectedAssets(), x, y);
},
// Find the first receiver in the stack for which `withinBounds`
// returns true.
identifyReceiver: function(x, y) {
return _.find(this.receivers, function(receiver) {
return receiver.withinBounds(x, y);
});
},
// Internal implementation of asset-receiver interface.
//
// The library itself is first on the stack of receivers.
// So, if an asset payload is over the library,
// it will get be the identified receiver.
withinBounds: function(x, y) {
var offset = $(this.el).offset(),
top = offset.top,
left = offset.left,
bottom = top + $(this.el).height(),
right = left + $(this.el).width();
return x >= left && x <= right && y >= top && y <= bottom;
},
assetsOver: function() {},
assetsNotOver: function() {},
receiveAssets: function() {},
keydown: function(e) {
if (this.selection.length > 0 && e.which === 8) {
e.preventDefault();
e.stopImmediatePropagation();
this.destroySelection();
}
},
// Destroy the selected assets. This sends 'destroy' to each asset
// indvidually. If the responses to the DELETE requests are a bit slow,
// then this can look a little inelegant.
destroySelection: function() {
if (this.selection.length === 1) {
var message = 'Are you sure you want to delete this asset?';
} else {
var message = Handlebars.compile(
'Are you sure you want to delete these {{count}} assets?'
)({ count: this.selection.length });
}
if (confirm(message)) {
_.invoke(this.selectedAssets(), 'destroy');
}
},
// When this mode is switched on, AssetLibrary will listen out globally
// for keydown events; primarily to catch the delete key at the moment.
//
// If a click is encountered outside the area of the library, we jump
// out of this mode.
listenForKeys: function() {
if (this.listeningForKeys) return;
this.listeningForKeys = true;
$(window).on('keydown', this.keydown);
$(window).one('mousedown', this.stopListeningForKeys);
},
// Jump out of keydown-aware mode.
stopListeningForKeys: function() {
this.listeningForKeys = false;
$(window).off('keydown', this.keydown);
},
startResize: function(e) {
e.preventDefault();
e.stopImmediatePropagation();
this.resizeOrigin = { y: e.pageY, h: this.$el.height() };
$(window).on('mousemove', this.performResize).
on('mouseup', this.endResize);
},
performResize: function(e) {
var delta = e.pageY - this.resizeOrigin.y,
height = Math.max(this.resizeOrigin.h - delta, this.DRAWER_HEIGHT);
this.$el.height(height);
},
endResize: function(e) {
$('#container').css({ paddingBottom: this.$el.height() + 'px' });
$(window).off('mousemove', this.performResize).
off('mouseup', this.endResize);
},
// Enables upload-to-library functionality.
initializeUploader: function() {
if (this.uploader) return;
this.uploader = new slices.Uploader({
button : this.$el.find('[data-action="upload"]'),
drop : this.$el.find('.library-container')
});
this.uploader.on('filesAdded', this.onFilesAdded);
this.uploader.on('fileUploaded', this.onFileUploaded);
},
// When files are added to the upload queue we create corresponding
// asset objects and add them to the collection.
onFilesAdded: function(event) {
this.enterUploadView();
_(event.files).each(function(file) {
var a = new slices.Asset({ file: file });
// This is clearly a code-smell!
file.asset = a;
// These bits are fine.
this.collection.add(a);
this.updateFileStatus(file);
}, this);
this.uploader.start();
},
// This looks weird, I know, but really all we’re doing is taking the
// response from our upload to /assets and feeding it into our
// asset model.
//onFileUploaded: function(uploader, file, transport) {
onFileUploaded: function(event) {
var file = event.file,
response = event.response;
// Update the attachment model. Silently, because we want to control
// how it redraws.
var asset = file.asset;
asset.set(response);
// Finally complete upload progress display and transition to thumbnail.
this.viewForFile(file).updateFileAndComplete(file);
},
// When uploading files we just display the new uploads. All this does is
// clear the current collection. There's also a catch in there to ensure
// we don’t accidentally clear the collection when we don’t mean to.
enterUploadView: function() {
if (this.inUploadView) return;
this.inUploadView = true;
this.collection.reset();
this.$('[type="search"]').hide();
this.updateCount('Uploading…');
},
// When we’re no longer concerned with just our uploaded files, we return
// to normal.
exitUploadView: function() {
if (!this.inUploadView) return;
this.inUploadView = false;
this.$('[type="search"]').show();
this.updateCount();
},
// Passes information from upload on to the file’s view.
updateFileStatus: function(file) {
this.viewForFile(file).updateFile(file);
},
// Returns the view object associated with the given file.
viewForFile: function(file) {
return this.thumbs[file.asset.cid];
}
});