|
| 1 | +var thumb = require('client/image').thumb; |
| 2 | +var promptSquarePhoto = require('photoCut').promptSquarePhoto; |
| 3 | +var notification = require('client/notification'); |
| 4 | +var xhr = require('client/xhr'); |
| 5 | +var Spinner = require('client/spinner'); |
| 6 | + |
| 7 | +exports.init = function() { |
| 8 | + |
| 9 | + initPhotoLoadWidget(); |
| 10 | + |
| 11 | +}; |
| 12 | + |
| 13 | +function initPhotoLoadWidget() { |
| 14 | + var photoWidgetElem = document.querySelector('[data-photo-load]'); |
| 15 | + if (!photoWidgetElem) return; |
| 16 | + new PhotoLoadWidget({ |
| 17 | + elem: photoWidgetElem |
| 18 | + }); |
| 19 | +} |
| 20 | + |
| 21 | +function PhotoLoadWidget({elem}) { |
| 22 | + var link = elem.querySelector('a'); |
| 23 | + var photoDiv = elem.querySelector('div'); |
| 24 | + var input = elem.querySelector('input'); |
| 25 | + |
| 26 | + link.onclick = function(e) { |
| 27 | + e.preventDefault(); |
| 28 | + promptSquarePhoto({ |
| 29 | + minSize: 160, |
| 30 | + onSuccess: uploadPhoto |
| 31 | + }); |
| 32 | + }; |
| 33 | + |
| 34 | + |
| 35 | + var spinner = new Spinner({ |
| 36 | + elem: photoDiv, |
| 37 | + size: 'small' |
| 38 | + }); |
| 39 | + |
| 40 | + function uploadPhoto(file) { |
| 41 | + |
| 42 | + var formData = new FormData(); |
| 43 | + formData.append("photo", file); |
| 44 | + |
| 45 | + var request = xhr({ |
| 46 | + method: 'POST', |
| 47 | + url: '/imgur/upload', |
| 48 | + body: formData, |
| 49 | + normalStatuses: [200, 400] |
| 50 | + }); |
| 51 | + |
| 52 | + request.addEventListener('loadstart', onLoadStart); |
| 53 | + request.addEventListener('loadend', onLoadEnd); |
| 54 | + |
| 55 | + request.addEventListener('fail', (event) => { |
| 56 | + new notification.Error("Ошибка загрузки: " + event.reason); |
| 57 | + }); |
| 58 | + |
| 59 | + request.addEventListener('success', (event) => { |
| 60 | + if (request.status == 400) { |
| 61 | + new notification.Error("Неверный тип файла или изображение повреждено."); |
| 62 | + } else { |
| 63 | + onSuccess(event.result); |
| 64 | + } |
| 65 | + }); |
| 66 | + |
| 67 | + } |
| 68 | + |
| 69 | + |
| 70 | + function onSuccess(imgurImage) { |
| 71 | + photoDiv.style.backgroundImage = `url('${thumb(imgurImage.link, 64, 64)}')`; |
| 72 | + input.value = imgurImage.imgurId; |
| 73 | + } |
| 74 | + |
| 75 | + |
| 76 | + function onLoadStart() { |
| 77 | + spinner.start(); |
| 78 | + elem.classList.add('modal-overlay_light'); |
| 79 | + } |
| 80 | + |
| 81 | + function onLoadEnd() { |
| 82 | + spinner.stop(); |
| 83 | + elem.classList.remove('modal-overlay_light'); |
| 84 | + } |
| 85 | +} |
| 86 | + |
| 87 | + |
| 88 | + |
| 89 | + |
0 commit comments