BookStack Code Mirror - bookstack/blob - public/js/image-manager.js

   1
   2 // Dropzone config
   3 Dropzone.options.imageUploadDropzone = {
   4     uploadMultiple: false,
   5     previewsContainer: '.image-manager-display .uploads',
   6     init: function() {
   7         this.on('success', function(event, image) {
   8             $('.image-manager-display .uploads').empty();
   9             var newImage = $('<img />').attr('data-image-id', image.id);
  10             newImage.attr('title', image.name).attr('src', image.thumbnail);
  11             newImage.data('imageData', image);
  12             $('.image-manager-display .uploads').after(newImage);
  13         });
  14     }
  15 };
  16
  17 (function() {
  18
  19     var isInit = false;
  20     var elem;
  21     var overlay;
  22     var display;
  23     var imageIndexUrl = '/images/all';
  24     var pageIndex = 0;
  25     var hasMore = true;
  26     var isGettingImages = true;
  27
  28     var ImageManager =  {};
  29     var action = false;
  30
  31     ImageManager.show = function(selector, callback) {
  32         if(isInit) {
  33             showWindow();
  34         } else {
  35             this.init(selector)
  36             showWindow();
  37         }
  38
  39         action = (typeof callback !== 'undefined') ? callback : false;
  40     };
  41
  42     ImageManager.init = function(selector) {
  43         elem = $(selector);
  44         overlay = elem.closest('.overlay');
  45         display = elem.find('.image-manager-display').first();
  46         var uploads = display.find('.uploads');
  47         var images = display.find('images');
  48         var loadMore = display.find('.load-more');
  49         // Get recent images and show
  50         $.getJSON(imageIndexUrl, showImages);
  51         function showImages(data) {
  52             var images = data.images;
  53             hasMore = data.hasMore;
  54             pageIndex++;
  55             isGettingImages = false;
  56             for(var i = 0; i < images.length; i++) {
  57                 var image = images[i];
  58                 var newImage = $('<img />').attr('data-image-id', image.id);
  59                 newImage.attr('title', image.name).attr('src', image.thumbnail);
  60                 loadMore.before(newImage);
  61                 newImage.data('imageData', image);
  62             }
  63             if(hasMore) loadMore.show();
  64         }
  65
  66         loadMore.click(function() {
  67             loadMore.hide();
  68             if(isGettingImages === false) {
  69                 isGettingImages = true;
  70                 $.getJSON(imageIndexUrl + '/' + pageIndex, showImages);
  71             }
  72         });
  73
  74         // Image grabbing on scroll
  75         display.on('scroll', function() {
  76             var displayBottom = display.scrollTop() + display.height();
  77             var elemTop = loadMore.offset().top;
  78             if(elemTop < displayBottom && hasMore && isGettingImages === false) {
  79                 isGettingImages = true;
  80                 loadMore.hide();
  81                 $.getJSON(imageIndexUrl + '/' + pageIndex, showImages);
  82             }
  83         });
  84
  85         elem.on('dblclick', '.image-manager-display img', function() {
  86             var imageElem = $(this);
  87             var imageData = imageElem.data('imageData');
  88             closeWindow();
  89             if(action) {
  90                 action(imageData);
  91             }
  92         });
  93
  94         elem.find('button[data-action="close"]').click(function() {
  95             closeWindow();
  96         });
  97
  98         // Set up dropzone
  99         elem.find('.image-manager-dropzone').first().dropzone({
 100             uploadMultiple: false
 101         });
 102
 103         isInit = true;
 104     };
 105
 106     function showWindow() {
 107         overlay.closest('body').css('overflow', 'hidden');
 108         overlay.show();
 109     }
 110
 111     function closeWindow() {
 112         overlay.hide();
 113         overlay.closest('body').css('overflow', 'auto');
 114     }
 115
 116     window.ImageManager = ImageManager;
 117 })();