64bb46f1ee6946aa367e88d853c6519fe8ec882b
[redakcja.git] / src / redakcja / static / js / wiki / view_gallery.js
1 (function($){
2
3     function normalizeNumber(pageNumber, pageCount){
4         // Page number should be >= 1, <= pageCount; 0 if pageCount = 0
5         var pageNumber = parseInt(pageNumber, 10);
6
7         if (!pageCount)
8             return 0;
9
10         if (!pageNumber ||
11                 isNaN(pageNumber) ||
12                 pageNumber == Infinity ||
13                 pageNumber == -Infinity ||
14                 pageNumber < 1)
15             return 1;
16
17         if (pageNumber > pageCount)
18             return pageCount;
19
20         return pageNumber;
21     }
22
23     function bounds(galleryWidth, galleryHeight, imageWidth, imageHeight){
24         return {
25             maxX: 0,
26             maxY: 0,
27             minX: galleryWidth - imageWidth,
28             minY: galleryHeight - imageHeight
29         }
30     };
31
32     function normalizePosition(x, y, galleryWidth, galleryHeight, imageWidth, imageHeight){
33         var b = bounds(galleryWidth, galleryHeight, imageWidth, imageHeight);
34         return {
35             x: Math.min(b.maxX, Math.max(b.minX, x)),
36             y: Math.min(b.maxY, Math.max(b.minY, y))
37         }
38     };
39
40     function fixImageSize(){
41
42     }
43
44     /*
45      * Perspective
46      */
47     class ScanGalleryPerspective extends $.wiki.SidebarPerspective {
48         vsplitbar = 'GALERIA';
49         dimensions = {};
50         zoomFactor = 1;
51         origin = {};
52         imageOrigin = {};
53
54         constructor(options) {
55             super(options);
56             var self = this;
57             if (this.config().page == undefined)
58                 this.config().page = CurrentDocument.galleryStart;
59             this.$element = $("#side-gallery");
60             this.$numberInput = $('.page-number', this.$element);
61
62             this.$image = $('.gallery-image img', this.$element).attr('unselectable', 'on');
63
64             // button handlers
65             this.$numberInput.change(function(event){
66                 event.preventDefault();
67                 self.setPage($(this).val());
68             });
69
70             $('.start-page', this.$element).click(function(){
71                 self.setPage(CurrentDocument.galleryStart);
72             });
73
74             $('.previous-page', this.$element).click(function(){
75                 self.setPage(parseInt(self.$numberInput.val(),10) - 1);
76             });
77
78             $('.next-page', this.$element).click(function(){
79                 self.setPage(parseInt(self.$numberInput.val(),10) + 1);
80             });
81
82             $('.zoom-in', this.$element).click(function(){
83                 self.alterZoom(0.2);
84             });
85
86             $('.zoom-out', this.$element).click(function(){
87                 self.alterZoom((-0.2));
88             });
89
90             $('.ctrl-gallery-setstart', this.$element).click(function(e) {
91                 e.preventDefault();
92                 CurrentDocument.setGalleryStart(self.config().page);
93             });
94             $('.ctrl-gallery-edit', this.$element).click(function(e) {
95                 e.preventDefault();
96                 CurrentDocument.openGalleryEdit();
97             });
98             $('.ctrl-gallery-refresh', this.$element).click(function(e) {
99                 e.preventDefault();
100                 self.refreshGallery();
101             });
102             $('#gallery-chooser').on('show.bs.modal', function (event) {
103                 var modal = $(this);
104                 var datalist = modal.find('.modal-body');
105                 datalist.html('');
106                 self.doc.withGalleryList(function(galleries) {
107                     let item;
108                     $.each(galleries, (i, gallery) => {
109                         item = $('<div class="form-check"><label class="form-check-label"><input class="form-check-input" type="radio" name="gallery"></label></div>');
110                         $('input', item).val(gallery);
111                         $('label', item).append(gallery);
112                         if (gallery == self.doc.galleryLink) {
113                             item.addClass('text-primary')
114                             $('input', item).prop('checked', true);
115                         }
116                         item.appendTo(datalist);
117                     });
118                     item = $('<div class="form-check"><label class="form-check-label"><input class="ctrl-none form-check-input" type="radio" name="gallery"><em class="text-secondary">brak</em></label></div>');
119                     item.appendTo(datalist);
120                     item = $('<div class="form-check"><label class="form-check-label"><input class="ctrl-new form-check-input" type="radio" name="gallery"><input class="ctrl-name form-control" placeholder="nowa"></label></div>');
121                     item.appendTo(datalist);
122                 });
123             });
124             $('#gallery-chooser .ctrl-ok').on('click', function (event) {
125                 let item = $('#gallery-chooser :checked');
126                 let name;
127                 if (item.hasClass('ctrl-none')) {
128                     name = '';
129                 }
130                 else if (item.hasClass('ctrl-new')) {
131                     name = $('#gallery-chooser .ctrl-name').val();
132                 } else {
133                     name = item.val();
134                 }
135
136                 self.doc.setGallery(name);
137                 $('#gallery-chooser').modal('hide');
138                 self.refreshGallery(function() {
139                     self.setPage(1);
140                 });
141             });
142
143             $(window).resize(function(){
144                 self.dimensions.galleryWidth = self.$image.parent().width();
145                 self.dimensions.galleryHeight = self.$image.parent().height();
146             });
147
148             this.$image.load(function(){
149                 self._resizeImage();
150             }).bind('mousedown', function() {
151                 self.imageMoveStart.apply(self, arguments);
152             });
153         }
154
155         _resizeImage() {
156             var $img = this.$image;
157
158             $img.css({
159                 width: '',
160                 height: ''
161             });
162
163             this.dimensions = {
164                 width: $img.width() * this.zoomFactor,
165                 height: $img.height() * this.zoomFactor,
166                 originWidth: $img.width(),
167                 originHeight: $img.height(),
168                 galleryWidth: $img.parent().width(),
169                 galleryHeight: $img.parent().height()
170             };
171
172             if (!(this.dimensions.width && this.dimensions.height)) {
173                 setTimeout(function(){
174                     $img.load();
175                 }, 100);
176             }
177
178             var position = normalizePosition($img.position().left, $img.position().top, this.dimensions.galleryWidth, this.dimensions.galleryHeight, this.dimensions.width, this.dimensions.height);
179
180             $img.css({
181                 left: position.x,
182                 top: position.y,
183                 width: $img.width() * this.zoomFactor,
184                 height: $img.height() * this.zoomFactor
185             });
186         }
187
188         setPage(newPage) {
189             newPage = normalizeNumber(newPage, this.doc.galleryImages.length);
190             this.$numberInput.val(newPage);
191             this.config().page = newPage;
192             $('.gallery-image img', this.$element).attr('src', this.doc.galleryImages[newPage - 1].url);
193         }
194
195         alterZoom(delta) {
196             var zoomFactor = this.zoomFactor + delta;
197             if (zoomFactor < 0.2)
198                 zoomFactor = 0.2;
199             if (zoomFactor > 2)
200                 zoomFactor = 2;
201             this.setZoom(zoomFactor);
202         }
203
204         setZoom(factor) {
205             this.zoomFactor = factor;
206             this.dimensions.width = this.dimensions.originWidth * this.zoomFactor;
207             this.dimensions.height = this.dimensions.originHeight * this.zoomFactor;
208
209             // var position = normalizePosition(this.$image.position().left, this.$image.position().top, this.dimensions.galleryWidth, this.dimensions.galleryHeight, this.dimensions.width, this.dimensions.height);
210
211             this._resizeImage();
212         }
213
214         /*
215          * Movement
216          */
217         imageMoved(event) {
218             event.preventDefault();
219
220             // origin is where the drag started
221             // imageOrigin is where the drag started on the image
222
223             var newX = event.clientX - this.origin.x + this.imageOrigin.left;
224             var newY = event.clientY - this.origin.y + this.imageOrigin.top;
225
226             var position = normalizePosition(newX, newY, this.dimensions.galleryWidth, this.dimensions.galleryHeight, this.dimensions.width, this.dimensions.height);
227
228             this.$image.css({
229                 left: position.x,
230                 top: position.y,
231             });
232
233             return false;
234         }
235
236         imageMoveStart(event) {
237             event.preventDefault();
238
239             var self = this;
240
241             this.origin = {
242                 x: event.clientX,
243                 y: event.clientY
244             };
245
246             this.imageOrigin = self.$image.position();
247             $(document).bind('mousemove.gallery', function(){
248                 self.imageMoved.apply(self, arguments);
249             }).bind('mouseup.gallery', function() {
250                 self.imageMoveStop.apply(self, arguments);
251             });
252
253             return false;
254         }
255
256         imageMoveStop(event) {
257             $(document).unbind('mousemove.gallery').unbind('mouseup.gallery');
258         }
259
260         /*
261          * Loading gallery
262          */
263         refreshGallery(success, failure) {
264             var self = this;
265             this.doc.refreshGallery({
266                 success: function(doc, data){
267                     self.$image.show();
268                     console.log("gconfig:", self.config().page );
269                     self.setPage( self.config().page );
270                     $('#imagesCount').html("/" + doc.galleryImages.length);
271
272                     $('.error_message', self.$element).hide();
273                     if(success) success();
274                 },
275                 failure: function(doc, message){
276                     self.$image.hide();
277                     $('.error_message', self.$element).show().html(message);
278                     if(failure) failure();
279                 }
280             });
281         }
282
283         onEnter(success, failure) {
284             super.onEnter()
285             this.refreshGallery(success, failure);
286         }
287
288         onExit(success, failure) {
289         };
290     }
291     $.wiki.ScanGalleryPerspective = ScanGalleryPerspective;
292
293 })(jQuery);