summaryrefslogtreecommitdiffstats
path: root/data/js
diff options
context:
space:
mode:
Diffstat (limited to 'data/js')
-rw-r--r--data/js/application.js4
-rw-r--r--data/js/script.js85
-rw-r--r--data/js/thumbnail-view.js132
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;
+});
+})();
generated by cgit v1.2.3-24-g4f1b (git 2.32.0) at 2024-11-16 00:58:54 +0100