Refactor thumbnail view js

3 files changed, 135 insertions, 86 deletions

diff --git a/data/js/application.js b/data/js/application.js
index a82c193c8..76ed5ae55 100644
--- a/data/js/application.js
+++ b/data/js/application.js
@@ -6,9 +6,10 @@ define(
 		'util',
 		'lexer-input',
 		'tabwidth-input',
+		'thumbnail-view',
 		'vendor'
 	],
-	function (require, Util, LexerInput, TabwidthInput) {
+	function (require, Util, LexerInput, TabwidthInput, ThumbnailView) {
 		require(['script']);
 		var App = {
 			 // Gets called for every request (before page load)
@@ -26,6 +27,7 @@ define(
 				Util.setTabwidthFromLocalStorage();
 				TabwidthInput.initialize();
 				LexerInput.initialize(config.lexers);
+				ThumbnailView.initialize();
 				this.configureTooltips();
 				this.setupToggleSelectAllEvent();
 				this.setupLineWrapToggle();
diff --git a/data/js/script.js b/data/js/script.js
index 5c509c41a..14250cd3d 100644
--- a/data/js/script.js
+++ b/data/js/script.js
@@ -1,68 +1,5 @@
 (function($) {
 	$(function() {
-		$('.upload_thumbnails a').popover({
-			trigger: "hover",
-			placement: "bottom",
-			html: true,
-		});
-
-		$('#toggle_delete_mode').on("click", function() {
-			switch (window.page_mode) {
-				case "delete":
-					window.page_mode = "normal";
-					$('#delete_button').hide();
-					$("#delete_form input[id^='delete_']").remove();
-					$(".upload_thumbnails .marked").removeClass("marked");
-					if (typeof $.colorbox !== 'undefined') {
-						setup_colorbox();
-					}
-					break;
-				default:
-					window.page_mode = "delete";
-					$('#delete_button').show();
-					if (typeof $.colorbox !== 'undefined') {
-						$.colorbox.remove();
-					}
-					break;
-			}
-		});
-
-		$('.upload_thumbnails a').on("click", function(event) {
-			if (window.page_mode == "delete") {
-				event.preventDefault();
-				var data_id = $(event.target).parent().attr("data-id");
-
-				if ($('#delete_'+data_id).length == 0) {
-					$('<input>').attr({
-						type: "hidden",
-						name: "ids["+data_id+"]",
-						value: data_id,
-						id: "delete_"+data_id,
-					}).appendTo('#delete_form');
-					$(event.target).parent().addClass("marked");
-				} else {
-					$('#delete_'+data_id).remove();
-					$(event.target).parent().removeClass("marked");
-				}
-			}
-		});
-
-		function handle_resize() {
-			$('.upload_thumbnails').each(function() {
-				var div = $(this);
-
-				need_multiple_lines = div.parent().width() < (div.find('a').outerWidth(true) * div.find('a').size());
-
-				div.css('margin-left', need_multiple_lines ? "auto" : "0");
-				div.width(div.parent().width() - (div.parent().width() % div.find('a').outerWidth(true)));
-			});
-		}
-
-		$(window).resize(function() {
-			handle_resize();
-		});
-		handle_resize();
-
 		// check file size before uploading if browser support html5
 		if (window.File && window.FileList) {
 			function checkFileUpload(evt) {
@@ -214,28 +151,6 @@
 			});
 		}
 
-		if (typeof $.colorbox !== 'undefined') {
-			function setup_colorbox() {
-				$('.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 parseInt($(this).children().first().parent().attr("data-orientation"));
-					},
-				});
-			}
-			setup_colorbox();
-		}
 		if ($("img.lazyload").length) {
 			$("img.lazyload").show().lazyload({treshold: 200});
 		}
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;
+});
+})();