89 </button> |
89 </button> |
90 <a class="btn" v-bind:href="loginUrl" v-show="!isAuthenticated"> |
90 <a class="btn" v-bind:href="loginUrl" v-show="!isAuthenticated"> |
91 <i class="fa fa-sign-in"></i> <small>Connexion</small> |
91 <i class="fa fa-sign-in"></i> <small>Connexion</small> |
92 </a> |
92 </a> |
93 </div> |
93 </div> |
94 <zoom-thumbnail |
94 <div class="controls-center"> |
95 data-intro="Déplacez vous dans l'image zoomée" |
95 <zoom-thumbnail |
96 data-position="top" |
96 data-intro="Déplacez vous dans l'image zoomée" |
97 class="controls-center" |
97 data-position="top" |
98 ref="thumbnail" |
98 ref="thumbnail" |
99 @change="changeViewBox($event)" |
99 @move="changeViewBox($event)" |
100 @dragstart="hideTooltip" |
100 @moveend="syncViewBox()" |
101 @dragend="showTooltip" |
101 @dragstart="hideTooltip" |
102 v-bind:image="thumbnail" |
102 @dragend="showTooltip" |
103 v-bind:viewport="viewport" |
103 v-if="loaded" |
104 v-bind:viewBox="viewBox" |
104 v-bind:image="thumbnail" |
105 v-bind:imageWidth="imageWidth" |
105 v-bind:viewport="viewport" |
106 v-bind:imageHeight="imageHeight"></zoom-thumbnail> |
106 v-bind:parentViewBox="viewBox" |
|
107 v-bind:imageWidth="imageWidth" |
|
108 v-bind:imageHeight="imageHeight"></zoom-thumbnail> |
|
109 </div> |
107 <div class="controls-right" data-intro="Zoomez dans l'image" data-position="top"> |
110 <div class="controls-right" data-intro="Zoomez dans l'image" data-position="top"> |
108 <button @click="zoomOut" type="button" class="btn" |
111 <button @click="zoomOut" type="button" class="btn" |
109 v-bind:class="{ disabled: scale === 1 }"> |
112 v-bind:class="{ disabled: scale === 1 }"> |
110 <i class="fa fa-minus" aria-hidden="true"></i> |
113 <i class="fa fa-minus" aria-hidden="true"></i> |
111 </button> |
114 </button> |
360 |
363 |
361 this.mode = mode; |
364 this.mode = mode; |
362 }, |
365 }, |
363 |
366 |
364 getCenter: function() { |
367 getCenter: function() { |
365 return { |
368 |
366 x: this.viewBox[0] + (this.viewBox[2] / 2), |
369 if (!this.$refs.thumbnail) { |
367 y: this.viewBox[1] + (this.viewBox[3] / 2) |
370 return { |
368 } |
371 x: this.viewBox[0] + (this.viewBox[2] / 2), |
|
372 y: this.viewBox[1] + (this.viewBox[3] / 2) |
|
373 } |
|
374 } |
|
375 |
|
376 return this.$refs.thumbnail.getCenter() |
369 }, |
377 }, |
370 |
378 |
371 changeViewBox: function(e) { |
379 changeViewBox: function(e) { |
372 const viewBox = this.viewBox.slice(); |
380 const viewBox = this.viewBox.slice(); |
373 |
381 |
375 viewBox[1] = e.y; |
383 viewBox[1] = e.y; |
376 |
384 |
377 this.paper.attr({ "viewBox": viewBox }); |
385 this.paper.attr({ "viewBox": viewBox }); |
378 }, |
386 }, |
379 |
387 |
|
388 syncViewBox: function() { |
|
389 const viewBox = this.paper.attr('viewBox'); |
|
390 this.viewBox = [ |
|
391 viewBox.x, viewBox.y, |
|
392 viewBox.width, viewBox.height |
|
393 ] |
|
394 }, |
|
395 |
380 resetZoom: function() { |
396 resetZoom: function() { |
381 this.scale = 1; |
397 this.scale = 1; |
382 this.$refs.thumbnail.reset(); |
398 if (this.$refs.thumbnail) { |
|
399 this.$refs.thumbnail.reset(); |
|
400 } |
383 }, |
401 }, |
384 |
402 |
385 animateViewBox: function(viewBox, cb) { |
403 animateViewBox: function(viewBox, cb) { |
386 const viewBoxPrev = this.viewBox.slice(); |
404 const viewBoxPrev = this.viewBox.slice(); |
387 |
405 |
675 border-top-left-radius: 4px; |
693 border-top-left-radius: 4px; |
676 border-bottom-left-radius: 4px; |
694 border-bottom-left-radius: 4px; |
677 } |
695 } |
678 .controls .controls-center { |
696 .controls .controls-center { |
679 border-radius: 4px; |
697 border-radius: 4px; |
680 padding: 8px 8px 4px 8px; |
698 padding: 8px; |
681 } |
699 } |
682 .controls .controls-right { |
700 .controls .controls-right { |
683 border-top-right-radius: 4px; |
701 border-top-right-radius: 4px; |
684 border-bottom-right-radius: 4px; |
702 border-bottom-right-radius: 4px; |
685 } |
703 } |