diff options
| -rw-r--r-- | application/views/file/upload_history_thumbnails.php | 2 | ||||
| -rw-r--r-- | data/js/application.js | 4 | ||||
| -rw-r--r-- | data/js/script.js | 85 | ||||
| -rw-r--r-- | data/js/thumbnail-view.js | 132 |
4 files changed, 136 insertions, 87 deletions
diff --git a/application/views/file/upload_history_thumbnails.php b/application/views/file/upload_history_thumbnails.php index 53ac762c2..04846e944 100644 --- a/application/views/file/upload_history_thumbnails.php +++ b/application/views/file/upload_history_thumbnails.php @@ -1,6 +1,6 @@ <div class="pull-right"> <?php echo form_open("file/do_delete/", array("id" => "delete_form", "style" => "display: inline")); ?> - <button class="btn btn-danger" id="delete_button" style="display: none">Delete selected</button> + <button type="submit" class="btn btn-danger" id="delete_button" style="display: none">Delete selected</button> </form> <button class="btn btn-default" id="toggle_delete_mode" style="display: inline">Delete mode</button> </div> 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; +}); +})(); |