summaryrefslogtreecommitdiffstats
path: root/data/js/thumbnail-view.js
diff options
context:
space:
mode:
authorJoakim Reinert <mail@jreinert.com>2015-04-29 22:42:55 +0200
committerFlorian Pritz <bluewind@xinu.at>2015-05-05 12:21:27 +0200
commitf7da6a0ee8c3b79deb8995e592a130a4a409dc70 (patch)
tree3dc0931089a50aff9211c50273319f52c8c46388 /data/js/thumbnail-view.js
parentf0be7e7412721039cdd37798fe294dd5cb41d216 (diff)
Refactor thumbnail view js
Diffstat (limited to 'data/js/thumbnail-view.js')
-rw-r--r--data/js/thumbnail-view.js132
1 files changed, 132 insertions, 0 deletions
diff --git a/data/js/thumbnail-view.js b/data/js/thumbnail-view.js
new file mode 100644
index 000000000..5478cdca9
--- /dev/null
+++ b/data/js/thumbnail-view.js
@@ -0,0 +1,132 @@
+(function () {
+'use strict';
+define(['jquery'], function ($) {
+ var ui = {
+ thumbnailLinks: '.upload_thumbnails a',
+ deleteButton: '#delete_button',
+ deleteForm: '#delete_form',
+ markedThumbnails: '.upload_thumbnails marked',
+ colorbox: '.colorbox',
+ thumbnails: '.upload_thumbnails',
+ toggleDeleteModeButton: '#toggle_delete_mode'
+ };
+
+ var PrivateFunctions = {
+ inDeleteMode: false,
+
+ setupEvents: function () {
+ $(ui.toggleDeleteModeButton).on('click', _.bind(this.toggleDeleteMode, this));
+ $(ui.thumbnailLinks).on('click', _.bind(this.toggleMarkForDeletion, this));
+ $(window).resize(_.bind(this.onResize, this));
+ },
+
+ setupColorbox: function () {
+ if (_.isUndefined($.colorbox)) { return; }
+ $(ui.colorbox).colorbox({
+ transistion: "none",
+ speed: 0,
+ initialWidth: "100%",
+ initialHeight: "100%",
+ photo: true,
+ retinaImage: true,
+ maxHeight: "100%",
+ maxWidth: "100%",
+ next: '<span class="glyphicon glyphicon-chevron-right"></span>',
+ previous: '<span class="glyphicon glyphicon-chevron-left"></span>',
+ close: '<span class="glyphicon glyphicon-remove"></span>',
+ loop: false,
+ orientation: function() {
+ return $(this).data('orientation');
+ },
+ });
+ },
+
+ removeColorbox: function () {
+ if (_.isUndefined($.colorbox)) { return; }
+ $.colorbox.remove();
+ },
+
+ setupPopovers: function () {
+ $(thumbnailLinks).popover({
+ trigger: 'hover',
+ placement: 'bottom',
+ html: true
+ });
+ },
+
+ toggleDeleteMode: function () {
+ if (this.inDeleteMode) {
+ $(ui.deleteButton).hide();
+ $(ui.deleteForm).find('input').remove();
+ $(ui.markedThumbnails).removeClass('marked');
+ this.setupColorbox();
+ } else {
+ $(ui.deleteButton).show();
+ this.removeColorbox();
+ }
+ this.inDeleteMode = !this.inDeleteMode;
+ },
+
+ deleteInput: function (id) {
+ return $('<input>').attr({
+ type: 'hidden',
+ name: 'ids[' + id + ']',
+ value: id,
+ id: 'delete_' +id
+ });
+ },
+
+ toggleMarkForDeletion: function (event) {
+ if (!this.inDeleteMode) { return; }
+ event.preventDefault();
+ var id = $(event.target).closest('a').data('id');
+
+ var deleteInput = $(ui.deleteForm).find('input#delete_' + id);
+
+ if (deleteInput.length === 0) {
+ $(ui.deleteForm).append(this.deleteInput(id));
+ } else {
+ deleteInput.remove();
+ }
+ $(event.target).closest('a').toggleClass('marked');
+ },
+
+ needMultipleLines: function (thumbnailContainer) {
+ var containerWidth, thumbsWidth, thumbs, thumbsCount;
+ containerWidth = thumbnailContainer.parent().width();
+ thumbs = thumbnailContainer.find('a');
+ thumbsCount = thumbs.length;
+ thumbsWidth = thumbs.outerWidth(true) * thumbsCount;
+
+ return containerWidth < thumbsWidth;
+ },
+
+ thumbnailsWidth: function (thumbnailContainer) {
+ var containerWidth, thumbs, thumbWidth;
+ containerWidth = thumbnailContainer.parent().width();
+ thumbs = thumbnailContainer.find('a');
+ thumbWidth = thumbs.outerWidth(true);
+ return containerWidth - (containerWidth % thumbWidth);
+ },
+
+ onResize: function () {
+ _.each($(ui.thumbnails), function (thumbnailContainer) {
+ thumbnailContainer = $(thumbnailContainer);
+ var margin = this.needMultipleLines(thumbnailContainer) ? 'auto' : '0';
+ thumbnailContainer.css('margin-left', margin);
+ thumbnailContainer.width(this.thumbnailsWidth(thumbnailContainer));
+ }, this);
+ }
+ };
+
+ var ThumbnailView = {
+ initialize: function () {
+ PrivateFunctions.setupEvents();
+ PrivateFunctions.onResize();
+ PrivateFunctions.setupColorbox();
+ }
+ };
+
+ return ThumbnailView;
+});
+})();