diff options
author | Florian Pritz <bluewind@xinu.at> | 2015-06-04 23:10:31 +0200 |
---|---|---|
committer | Florian Pritz <bluewind@xinu.at> | 2015-06-05 21:23:49 +0200 |
commit | d088234d67f3aa422796d922e08a07949dc53d83 (patch) | |
tree | a964821b6b725dd26becbb3e91acf8d7dd5e0014 /public_html/data/js/thumbnail-view.js | |
parent | 048410164d2a17bbb588e43351e44eeb81610960 (diff) |
Move public files to ./public_html
./data/local is not moved because it contains likely untracked files
and moving it would throw an error when updating.
Signed-off-by: Florian Pritz <bluewind@xinu.at>
Diffstat (limited to 'public_html/data/js/thumbnail-view.js')
-rw-r--r-- | public_html/data/js/thumbnail-view.js | 131 |
1 files changed, 131 insertions, 0 deletions
diff --git a/public_html/data/js/thumbnail-view.js b/public_html/data/js/thumbnail-view.js new file mode 100644 index 000000000..7bc72a556 --- /dev/null +++ b/public_html/data/js/thumbnail-view.js @@ -0,0 +1,131 @@ +(function () { +'use strict'; +define(['jquery', 'underscore', 'jquery.colorbox'], 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 () { + $(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 () { + $.colorbox.remove(); + }, + + setupPopovers: function () { + $(ui.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(); + PrivateFunctions.setupPopovers(); + } + }; + + return ThumbnailView; +}); +})(); |