@tiddh/brave-vue 1.9.21 → 1.9.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/brave-vue.esm.js +166 -65
  2. package/dist/brave-vue.min.js +1 -1
  3. package/dist/brave-vue.ssr.js +183 -82
  4. package/package.json +1 -2
  5. package/src/components/Avatar/Avatar.vue +18 -0
  6. package/src/components/Avatar/elements/CustomizationPanel.vue +9 -0
  7. package/src/components/Avatar/elements/CustomizationView.vue +28 -0
  8. package/src/components/Modal/Modal.vue +388 -371
  9. package/src/components/Preview/Preview.vue +971 -933
  10. package/src/components/Preview/PreviewTools.vue +2148 -1164
  11. package/src/components/Preview/PreviewWithTools.vue +252 -248
package/src/components/Preview/Preview.vue CHANGED
@@ -1,943 +1,981 @@
1
1
  <template>
2
- <div class="flipbook-container">
3
- <div class="loading-box" v-if="isLoading && loader">
4
- <div id="loading"></div>
5
- <small>{{lang.justASecond}}</small>
6
- <h4>{{lang.loadingPhrase}}</h4>
7
- </div>
8
-
9
- <div class="book-centered" v-bind:style="centered ? { 'margin-left': isCover + 'px' } : null">
10
- <div class="preview-desktop" :class="!isLoading ? 'visible' : 'invisible'">
11
- <div class="flipbook-lib" :class="[formato]" id="flipbook"></div>
12
- </div>
13
- </div>
14
-
15
- <div class="controls" v-if="controls">
16
- <Button
17
- kind="ghost"
18
- size="md"
19
- width="circle"
20
- class="arrow"
21
- :disabled="false"
22
- :inverted="false"
23
- @click="toTheLeft()"
24
- >
25
- <span data-v-98f27cc4="" data-v-c614f43e="" class="icon icon-chevron-left size-lg svg-color">
26
- <svg fill="#12d3db" stroke="transparent" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
27
- <path d="M20.0847 20.7019L15.3828 16L20.0847 11.298C20.8651 10.5177 20.8651 9.25557 20.0847 8.47522C19.3044 7.69487 18.0423 7.69487 17.2619 8.47522L11.1419 14.5952C10.3616 15.3756 10.3616 16.6377 11.1419 17.418L17.2619 23.538C18.0423 24.3184 19.3044 24.3184 20.0848 23.5381L20.0908 23.5319C20.8421 22.7608 20.8726 21.4898 20.0847 20.7019Z"></path>
28
- </svg>
29
- </span>
30
- <!-- <Icon name="chevron-left" fill="#12d3db" stroke="transparent" /> -->
31
- </Button>
32
-
33
- <div class="info-space">
34
- <div class="current-pages">
35
- <div class="list" v-bind:style="{ left: '-' + numberPositions + 'px' }">
36
- <span v-for="(item, index) in pages" :key="index">{{ index + 1 }}</span>
37
- </div>
38
- </div>
39
- <div class="info-pages">{{ pages }} {{lang.pages}}</div>
40
- </div>
41
-
42
- <Button
43
- kind="ghost"
44
- size="md"
45
- class="arrow"
46
- width="circle"
47
- :disabled="false"
48
- :inverted="false"
49
- @click="toTheRight()"
50
- >
51
- <span data-v-98f27cc4="" data-v-c614f43e="" class="icon icon-chevron-right size-lg svg-color">
52
- <svg fill="#12d3db" stroke="transparent" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
53
- <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9153 8.47532C11.135 9.25567 11.135 10.5178 11.9153 11.2981L16.6173 16.0001L11.9153 20.702C11.135 21.4823 11.135 22.7444 11.9153 23.5248C12.6957 24.3051 13.9578 24.3051 14.7381 23.5248L20.8582 17.4048C21.6385 16.6244 21.6385 15.3623 20.8582 14.582L14.7381 8.46198C13.9668 7.69064 12.6913 7.69931 11.9153 8.47532Z"></path>
54
- </svg>
55
- </span>
56
- <!-- <Icon name="chevron-right" fill="#12d3db" stroke="transparent" /> -->
57
- </Button>
58
- </div>
59
- </div>
2
+ <div class="flipbook-container">
3
+ <div class="loading-box" v-if="isLoading && loader">
4
+ <div id="loading"></div>
5
+ <small>{{ lang.justASecond }}</small>
6
+ <h4>{{ lang.loadingPhrase }}</h4>
7
+ </div>
8
+
9
+ <div
10
+ class="book-centered"
11
+ v-bind:style="centered ? { 'margin-left': isCover + 'px' } : null"
12
+ >
13
+ <div
14
+ class="preview-desktop"
15
+ :class="!isLoading ? 'visible' : 'invisible'"
16
+ >
17
+ <div class="flipbook-lib" :class="[formato]" id="flipbook"></div>
18
+ </div>
19
+ </div>
20
+
21
+ <div class="controls" v-if="controls">
22
+ <Button
23
+ kind="ghost"
24
+ size="md"
25
+ width="circle"
26
+ class="arrow"
27
+ :disabled="false"
28
+ :inverted="false"
29
+ @click="toTheLeft()"
30
+ >
31
+ <span
32
+ data-v-98f27cc4=""
33
+ data-v-c614f43e=""
34
+ class="icon icon-chevron-left size-lg svg-color"
35
+ >
36
+ <svg
37
+ fill="#12d3db"
38
+ stroke="transparent"
39
+ viewBox="0 0 32 32"
40
+ xmlns="http://www.w3.org/2000/svg"
41
+ >
42
+ <path
43
+ d="M20.0847 20.7019L15.3828 16L20.0847 11.298C20.8651 10.5177 20.8651 9.25557 20.0847 8.47522C19.3044 7.69487 18.0423 7.69487 17.2619 8.47522L11.1419 14.5952C10.3616 15.3756 10.3616 16.6377 11.1419 17.418L17.2619 23.538C18.0423 24.3184 19.3044 24.3184 20.0848 23.5381L20.0908 23.5319C20.8421 22.7608 20.8726 21.4898 20.0847 20.7019Z"
44
+ ></path>
45
+ </svg>
46
+ </span>
47
+ <!-- <Icon name="chevron-left" fill="#12d3db" stroke="transparent" /> -->
48
+ </Button>
49
+
50
+ <div class="info-space">
51
+ <div class="current-pages">
52
+ <div
53
+ class="list"
54
+ v-bind:style="{ left: '-' + numberPositions + 'px' }"
55
+ >
56
+ <span v-for="(item, index) in pages" :key="index">{{
57
+ index + 1
58
+ }}</span>
59
+ </div>
60
+ </div>
61
+ <div class="info-pages">{{ pages }} {{ lang.pages }}</div>
62
+ </div>
63
+
64
+ <Button
65
+ kind="ghost"
66
+ size="md"
67
+ class="arrow"
68
+ width="circle"
69
+ :disabled="false"
70
+ :inverted="false"
71
+ @click="toTheRight()"
72
+ >
73
+ <span
74
+ data-v-98f27cc4=""
75
+ data-v-c614f43e=""
76
+ class="icon icon-chevron-right size-lg svg-color"
77
+ >
78
+ <svg
79
+ fill="#12d3db"
80
+ stroke="transparent"
81
+ viewBox="0 0 32 32"
82
+ xmlns="http://www.w3.org/2000/svg"
83
+ >
84
+ <path
85
+ fill-rule="evenodd"
86
+ clip-rule="evenodd"
87
+ d="M11.9153 8.47532C11.135 9.25567 11.135 10.5178 11.9153 11.2981L16.6173 16.0001L11.9153 20.702C11.135 21.4823 11.135 22.7444 11.9153 23.5248C12.6957 24.3051 13.9578 24.3051 14.7381 23.5248L20.8582 17.4048C21.6385 16.6244 21.6385 15.3623 20.8582 14.582L14.7381 8.46198C13.9668 7.69064 12.6913 7.69931 11.9153 8.47532Z"
88
+ ></path>
89
+ </svg>
90
+ </span>
91
+ <!-- <Icon name="chevron-right" fill="#12d3db" stroke="transparent" /> -->
92
+ </Button>
93
+ </div>
94
+ </div>
60
95
  </template>
61
96
 
62
97
  <script>
63
- import Language from "./js/language.json";
64
-
65
- import jQuery from "jquery";
66
- import "./js/turn.min.js";
67
- import "./js/zoom.min.js";
68
- import Icon from "../Icons/Icon.vue";
69
-
70
- const $ = jQuery;
71
- const axios = require("axios");
72
-
73
- export default {
74
- name: "Preview",
75
- components: { Icon },
76
- props: {
77
- /** Character uuid. `ddh5e177ff920f15` */
78
- uuid: {
79
- type: String,
80
- required: true
81
- },
82
- /** Number of pages. `32` */
83
- pages: {
84
- type: Number,
85
- required: true
86
- },
87
- /** Child age. `5` */
88
- age: {
89
- type: Number,
90
- required: true
91
- },
92
- /** Product ID. `109` */
93
- product_id: {
94
- type: Number,
95
- required: true
96
- },
97
- /** The five first pages. `https://builder.dentrodahistoria.com.br/api/builder/getpreview/ddh5e177ff920f15?page=X` */
98
- preloaded_pages: {
99
- type: Array,
100
- required: false
101
- },
102
- /** Download and convert preloaded images to base64. `false` */
103
- base64: {
104
- type: Boolean,
105
- required: false
106
- },
107
- typeLanguage: {
108
- type: String,
109
- required: false,
110
- default: "br"
111
- },
112
- zoom: {
113
- type: Boolean,
114
- default: false
115
- },
116
- /** Show preview controls */
117
- controls: {
118
- type: Boolean,
119
- default: true
120
- },
121
- /** Center book on first and last page */
122
- centered: {
123
- type: Boolean,
124
- default: true
125
- },
126
- /** Show loader */
127
- loader: {
128
- type: Boolean,
129
- default: true
130
- },
131
- apiUrl: {
132
- type: String,
133
- required: false,
134
- default:"https://builder.dentrodahistoria.com.br"
135
- },
136
- },
137
- data() {
138
- return {
139
- formato: "a4",
140
- bookDimensions: {
141
- widthPlaceholder: 100,
142
- width: 800
143
- },
144
- flipbookWidth: null,
145
- flipbookHeight: null,
146
- isCover: 0,
147
- currentPage: 1,
148
- loadedPages: 5,
149
- numberPositions: 0,
150
- sizeSquare: "calc(75vh - 50px)",
151
- isLoading: true,
152
- lang: Language[this.typeLanguage]
153
- };
154
- },
155
- mounted() {
156
- const self = this;
157
-
158
- //let age = this.product.tagName.substring(0, 1)
159
- if (parseInt(this.age) <= 5) {
160
- this.sizeSquare = "calc(55vh - 50px)";
161
- }
162
-
163
- if (this.age <= 5) {
164
- this.formato = "square";
165
- this.bookDimensions.width = 1050;
166
- } else {
167
- this.formato = "a4";
168
- }
169
-
170
- this.createInitialPages();
171
- this.initBook();
172
-
173
- $(function() {
174
- window.addEventListener("resize", function(e) {
175
- if ($("#flipbook").length > 0) {
176
- var size = self.resize();
177
- $("#flipbook").turn("size", size.width, size.height);
178
- $("#flipbook").turn("resize");
179
- self.updated();
180
- }
181
- });
182
- });
183
-
184
- if (this.loader) {
185
- setTimeout(function() {
186
- self.isLoading = false;
187
-
188
- var size = self.resize();
189
- $("#flipbook").turn("size", size.width, size.height);
190
- $("#flipbook").turn("resize");
191
- }, 3000);
192
- } else {
193
- self.isLoading = false;
194
-
195
- var size = self.resize();
196
- $("#flipbook").turn("size", size.width, size.height);
197
- $("#flipbook").turn("resize");
198
- }
199
-
200
- if (self.zoom) {
201
- this.activateZoom();
202
- }
203
- },
204
-
205
- methods: {
206
- started() {
207
- this.$emit("started");
208
- },
209
-
210
- updated() {
211
- this.$emit("updated");
212
- },
213
-
214
- completed(payload) {
215
- if (payload.success) {
216
- this.$emit("completed");
217
- }
218
- },
219
-
220
- createInitialPages() {
221
- let d = new Date();
222
- let n = d.getMilliseconds();
223
-
224
- //var n = Math.floor(Math.random() * 1000);
225
-
226
- let InitialPages = "";
227
- if (this.base64) {
228
- for (var i = 1; i < 6; i++) {
229
- var url =
230
- this.apiUrl +
231
- "/api/builder/getpreview/" +
232
- this.uuid +
233
- "?page=" +
234
- i +
235
- "&update=" +
236
- n +
237
- "&w=533&v=0&noCache=true";
238
- InitialPages +=
239
- "<div class='hard'><img src='data:image/png;base64," +
240
- url +
241
- "' alt='' firstPage='true'></div>";
242
- }
243
- } else {
244
- for (var i = 1; i < 6; i++) {
245
- var url =
246
- this.apiUrl +
247
- "/api/builder/getpreview/" +
248
- this.uuid +
249
- "?page=" +
250
- i +
251
- "&update=" +
252
- n +
253
- "&w=533&v=0&noCache=true";
254
- InitialPages +=
255
- "<div class='hard'><img src='" +
256
- url +
257
- "' alt='' firstPage='true'></div>";
258
- }
259
- }
260
- InitialPages +=
261
- "<div class='hard back-side'><img src='" +
262
- this.apiUrl +
263
- "/api/builder/getpreview/" +
264
- this.uuid +
265
- "?page=" +
266
- (this.pages - 1) +
267
- "&w=" +
268
- this.bookDimensions.width +
269
- "&v=0&update=" +
270
- n +
271
- "' alt=''></div>";
272
- InitialPages +=
273
- "<div class='hard'><img src='" +
274
- this.apiUrl +
275
- "/api/builder/getpreview/" +
276
- this.uuid +
277
- "?page=" +
278
- this.pages +
279
- "&w=" +
280
- this.bookDimensions.width +
281
- "&v=0&update=" +
282
- n +
283
- "' alt=''></div>";
284
-
285
- $("#flipbook").html(InitialPages);
286
- },
287
-
288
- initBook() {
289
- const self = this;
290
-
291
- this.flipbookWidth = self.formato === "square" ? "100vh" : "100vh";
292
- this.flipbookHeight =
293
- self.formato === "square" ? "calc(50.2vh)" : "calc(70.5vh)";
294
-
295
- $("#flipbook").turn({
296
- width: self.flipbookWidth,
297
- height: self.flipbookHeight,
298
- autoCenter: false,
299
- gradients: true,
300
- acceleration: true,
301
- duration: 800,
302
- elevation: 150
303
- });
304
-
305
- $("#flipbook").bind("start", function(event, pageObject, corner) {
306
- console.log(event)
307
- console.log(pageObject)
308
- console.log(corner)
309
-
310
- if (corner == "r" || corner == "l") {
311
- $(".page-wrapper").css("cursor", "pointer");
312
- } else {
313
- $(".page-wrapper").css("cursor", "unset");
314
- }
315
- if (
316
- corner == "tl" ||
317
- corner == "tr" ||
318
- corner == "bl" ||
319
- corner == "br"
320
- ) {
321
- event.preventDefault();
322
- }
323
- });
324
-
325
- $("#flipbook").bind("end", function(event, pageObject, turned) {
326
- //$(".page-wrapper").css("cursor", "unset");
327
- });
328
-
329
- // Habilitar passagem via o dedo
330
- $(document).keydown(function(e) {
331
- var previous = 37;
332
- var next = 39;
333
- switch (e.keyCode) {
334
- case previous:
335
- jQuery("#flipbook").turn("previous");
336
- break;
337
- case next:
338
- jQuery("#flipbook").turn("next");
339
- break;
340
- }
341
- });
342
-
343
- self.isCover =
344
- "-" + $(".page-wrapper[page=" + self.currentPage + "]").width();
345
- $("#flipbook").bind("turning", function(event, page, view) {
346
- self.currentPage = page;
347
-
348
- if (self.currentPage >= self.loadedPages - 2) {
349
- self.morePages();
350
- }
351
-
352
- if (self.currentPage === 1) {
353
- self.numberPositions = 0;
354
- self.isCover =
355
- "-" + $(".page-wrapper[page=" + self.currentPage + "]").width();
356
- } else if (self.currentPage === self.pages) {
357
- self.isCover = $(
358
- ".page-wrapper[page=" + self.currentPage + "]"
359
- ).width();
360
-
361
- if (self.currentPage % 2 == 0) {
362
- self.numberPositions = self.currentPage * 30;
363
- } else {
364
- self.numberPositions = (self.currentPage - 1) * 30;
365
- }
366
- } else {
367
- self.isCover = 0;
368
-
369
- if (self.currentPage % 2 == 0) {
370
- self.numberPositions = self.currentPage * 30;
371
- } else {
372
- self.numberPositions = (self.currentPage - 1) * 30;
373
- }
374
- }
375
- });
376
-
377
- for (var i = this.loadedPages; i < this.pages - 2; i++) {
378
- var pageCount = $("#flipbook").turn("pages") + 1;
379
-
380
- var element = $(
381
- '<div><img class="img-book" width="100%" src="' +
382
- this.apiUrl +
383
- "/api/builder/getplaceholder/" +
384
- this.product_id +
385
- "?page=" +
386
- i +
387
- "&w=" +
388
- this.bookDimensions.widthPlaceholder +
389
- '&pw=0&noCache=true" alt=""><div class="loading-bg"><div class="loading book-loading"></div></div> </div>'
390
- );
391
-
392
- $("#flipbook").turn("addPage", element);
393
- $("#flipbook").turn("pages", pageCount); // Sets the total # of pages
394
- }
395
-
396
- this.started();
397
- },
398
-
399
- toTheLeft() {
400
- $("#flipbook").turn("previous");
401
- },
402
-
403
- toTheRight() {
404
- $("#flipbook").turn("next");
405
- },
406
-
407
- zoomTo(event) {
408
- setTimeout(function() {
409
- if ($(".flipbook-container").data().regionClicked) {
410
- $(".flipbook-container").data().regionClicked = false;
411
- } else {
412
- if ($(".flipbook-container").zoom("value") == 1) {
413
- $(".flipbook-container").zoom("zoomIn", event);
414
- } else {
415
- $(".flipbook-container").zoom("zoomOut");
416
- }
417
- }
418
- }, 1);
419
- },
420
-
421
- activateZoom() {
422
- const self = this;
423
-
424
- $(".flipbook-container").zoom({
425
- flipbook: $("#flipbook"),
426
-
427
- max: function() {
428
- return 1452 / $("#flipbook").width();
429
- },
430
-
431
- when: {
432
- swipeLeft: function() {
433
- $(this)
434
- .zoom("flipbook")
435
- .turn("next");
436
- },
437
-
438
- swipeRight: function() {
439
- $(this)
440
- .zoom("flipbook")
441
- .turn("previous");
442
- },
443
-
444
- resize: function(event, scale, page, pageElement) {
445
- // if (scale==1)
446
- // loadSmallPage(page, pageElement);
447
- // else
448
- // loadLargePage(page, pageElement);
449
- },
450
-
451
- zoomIn: function() {
452
- $(".flipbook-container").removeClass("zoom-in");
453
- $(".flipbook-container").removeClass("zoom-out");
454
-
455
- $(".flipbook-container").addClass("zoom-in");
456
- // $('.thumbnails').hide();
457
- // $('.made').hide();
458
- // $('.magazine').removeClass('animated').addClass('zoom-in');
459
- // $('.zoom-icon').removeClass('zoom-icon-in').addClass('zoom-icon-out');
460
-
461
- // if (!window.escTip && !$.isTouch) {
462
- // escTip = true;
463
-
464
- // $('<div />', {'class': 'exit-message'}).
465
- // html('<div>Press ESC to exit</div>').
466
- // appendTo($('body')).
467
- // delay(2000).
468
- // animate({opacity:0}, 500, function() {
469
- // $(this).remove();
470
- // });
471
- // }
472
- },
473
-
474
- zoomOut: function() {
475
- $(".flipbook-container").removeClass("zoom-in");
476
- $(".flipbook-container").removeClass("zoom-out");
477
-
478
- $(".flipbook-container").addClass("zoom-out");
479
- // $('.exit-message').hide();
480
- // $('.thumbnails').fadeIn();
481
- // $('.made').fadeIn();
482
- // $('.zoom-icon').removeClass('zoom-icon-out').addClass('zoom-icon-in');
483
-
484
- setTimeout(function() {
485
- $("#flipbook")
486
- .addClass("animated")
487
- .removeClass("zoom-in");
488
- self.resizeViewport();
489
- }, 0);
490
- }
491
- }
492
- });
493
-
494
- // Zoom event
495
- if ($.isTouch) {
496
- $(".flipbook-container").bind("zoom.doubleTap", self.zoomTo);
497
- } else {
498
- $(".flipbook-container").bind("zoom.tap", self.zoomTo);
499
- }
500
- },
501
-
502
- resizeViewport() {
503
- var width = $(window).width(),
504
- height = $(window).height(),
505
- options = $("#flipbook").turn("options");
506
-
507
- $("#flipbook").removeClass("animated");
508
-
509
- $(".flipbook-container")
510
- .css({
511
- width: width,
512
- height: height
513
- })
514
- .zoom("resize");
515
-
516
- if ($("#flipbook").turn("zoom") == 1) {
517
- var bound = calculateBound({
518
- width: options.width,
519
- height: options.height,
520
- boundWidth: Math.min(options.width, width),
521
- boundHeight: Math.min(options.height, height)
522
- });
523
-
524
- if (bound.width % 2 !== 0) bound.width -= 1;
525
-
526
- if (
527
- bound.width != $("#flipbook").width() ||
528
- bound.height != $("#flipbook").height()
529
- ) {
530
- $("#flipbook").turn("size", bound.width, bound.height);
531
-
532
- if ($("#flipbook").turn("page") == 1)
533
- $("#flipbook").turn("peel", "br");
534
-
535
- // $('.next-button').css({height: bound.height, backgroundPosition: '-38px '+(bound.height/2-32/2)+'px'});
536
- // $('.previous-button').css({height: bound.height, backgroundPosition: '-4px '+(bound.height/2-32/2)+'px'});
537
- }
538
-
539
- $("#flipbook").css({ top: -bound.height / 2, left: -bound.width / 2 });
540
- }
541
-
542
- // var magazineOffset = $('#flipbook').offset(),
543
- // boundH = height - magazineOffset.top - $('#flipbook').height(),
544
- // marginTop = (boundH - $('.thumbnails > div').height()) / 2;
545
-
546
- // if (marginTop<0) {
547
- // $('.thumbnails').css({height:1});
548
- // } else {
549
- // $('.thumbnails').css({height: boundH});
550
- // $('.thumbnails > div').css({marginTop: marginTop});
551
- // }
552
-
553
- // if (magazineOffset.top<$('.made').height())
554
- // $('.made').hide();
555
- // else
556
- // $('.made').show();
557
-
558
- $("#flipbook").addClass("animated");
559
- },
560
-
561
- morePages() {
562
- for (var i = this.loadedPages + 1; i <= this.loadedPages + 4; i++) {
563
- this.addPage(i, $("#flipbook"));
564
- }
565
- this.loadedPages = this.loadedPages + 4;
566
- },
567
-
568
- addPage(page, book) {
569
- if (book.turn("hasPage", page) && page <= this.pages - 2) {
570
- let classHard = "";
571
-
572
- var element = $("<div />", { class: "hard" }).html(
573
- '<img class="img-book loading-blur" width="100%" src="https://dka04237waacy.cloudfront.net/api/builder/getplaceholder/' +
574
- this.product_id +
575
- "?page=" +
576
- page +
577
- "&w=" +
578
- this.bookDimensions.widthPlaceholder +
579
- '&pw=0" alt=""><div class="loading-bg"><div class="loading book-loading"></div></div>'
580
- );
581
- book.turn("addPage", element, page);
582
-
583
- var url =
584
- this.apiUrl +
585
- "/api/builder/getpreview/" +
586
- this.uuid +
587
- "?page=" +
588
- page +
589
- "&w=" +
590
- this.bookDimensions.width +
591
- "&v=0";
592
-
593
- axios
594
- .get(url, {
595
- progress: false,
596
- responseType: "arraybuffer"
597
- })
598
- .then(response => {
599
- const cover = new Buffer.from(response.data, "binary").toString(
600
- "base64"
601
- );
602
- element.html(
603
- "<img width='100%' src='data:image/png;base64," + cover + "'>"
604
- );
605
- });
606
- }
607
- },
608
-
609
- resize() {
610
- var barSize = 90 + 40;
611
-
612
- //var controlSize = $(".controls").height() + 20
613
-
614
- var width = "100vh";
615
- var height = this.sizeSquare;
616
-
617
- return {
618
- width: width,
619
- height: height
620
- };
621
- }
622
- },
623
- computed: {
624
- shadowVar() {
625
- return {
626
- "--shadow-color": this.shadowColor
627
- };
628
- }
629
- }
630
- };
98
+ import Language from "./js/language.json";
99
+
100
+ import jQuery from "jquery";
101
+ import "./js/turn.min.js";
102
+ import "./js/zoom.min.js";
103
+ import Icon from "../Icons/Icon.vue";
104
+
105
+ const $ = jQuery;
106
+ const axios = require("axios");
107
+
108
+ export default {
109
+ name: "Preview",
110
+ components: { Icon },
111
+ props: {
112
+ /** Character uuid. `ddh5e177ff920f15` */
113
+ uuid: {
114
+ type: String,
115
+ required: true,
116
+ },
117
+ /** Number of pages. `32` */
118
+ pages: {
119
+ type: Number,
120
+ required: true,
121
+ },
122
+ /** Child age. `5` */
123
+ age: {
124
+ type: Number,
125
+ required: true,
126
+ },
127
+ /** Product ID. `109` */
128
+ product_id: {
129
+ type: Number,
130
+ required: true,
131
+ },
132
+ /** The five first pages. `https://builder.dentrodahistoria.com.br/api/builder/getpreview/ddh5e177ff920f15?page=X` */
133
+ preloaded_pages: {
134
+ type: Array,
135
+ required: false,
136
+ },
137
+ /** Download and convert preloaded images to base64. `false` */
138
+ base64: {
139
+ type: Boolean,
140
+ required: false,
141
+ },
142
+ typeLanguage: {
143
+ type: String,
144
+ required: false,
145
+ default: "br",
146
+ },
147
+ zoom: {
148
+ type: Boolean,
149
+ default: false,
150
+ },
151
+ /** Show preview controls */
152
+ controls: {
153
+ type: Boolean,
154
+ default: true,
155
+ },
156
+ /** Center book on first and last page */
157
+ centered: {
158
+ type: Boolean,
159
+ default: true,
160
+ },
161
+ /** Show loader */
162
+ loader: {
163
+ type: Boolean,
164
+ default: true,
165
+ },
166
+ apiUrl: {
167
+ type: String,
168
+ required: false,
169
+ default: "https://builder.dentrodahistoria.com.br",
170
+ },
171
+ },
172
+ data() {
173
+ return {
174
+ formato: "a4",
175
+ bookDimensions: {
176
+ widthPlaceholder: 100,
177
+ width: 800,
178
+ },
179
+ flipbookWidth: null,
180
+ flipbookHeight: null,
181
+ isCover: 0,
182
+ currentPage: 1,
183
+ loadedPages: 5,
184
+ numberPositions: 0,
185
+ sizeSquare: "calc(75vh - 50px)",
186
+ isLoading: true,
187
+ lang: Language[this.typeLanguage],
188
+ };
189
+ },
190
+ mounted() {
191
+ const self = this;
192
+
193
+ //let age = this.product.tagName.substring(0, 1)
194
+ if (parseInt(this.age) <= 5) {
195
+ this.sizeSquare = "calc(55vh - 50px)";
196
+ }
197
+
198
+ if (this.age <= 5) {
199
+ this.formato = "square";
200
+ this.bookDimensions.width = 1050;
201
+ } else {
202
+ this.formato = "a4";
203
+ }
204
+
205
+ this.createInitialPages();
206
+ this.initBook();
207
+
208
+ $(function() {
209
+ window.addEventListener("resize", function(e) {
210
+ if ($("#flipbook").length > 0) {
211
+ var size = self.resize();
212
+ $("#flipbook").turn("size", size.width, size.height);
213
+ $("#flipbook").turn("resize");
214
+ self.updated();
215
+ }
216
+ });
217
+ });
218
+
219
+ if (this.loader) {
220
+ setTimeout(function() {
221
+ self.isLoading = false;
222
+
223
+ var size = self.resize();
224
+ $("#flipbook").turn("size", size.width, size.height);
225
+ $("#flipbook").turn("resize");
226
+ }, 3000);
227
+ } else {
228
+ self.isLoading = false;
229
+
230
+ var size = self.resize();
231
+ $("#flipbook").turn("size", size.width, size.height);
232
+ $("#flipbook").turn("resize");
233
+ }
234
+
235
+ if (self.zoom) {
236
+ this.activateZoom();
237
+ }
238
+ },
239
+
240
+ methods: {
241
+ started() {
242
+ this.$emit("started");
243
+ },
244
+
245
+ updated() {
246
+ this.$emit("updated");
247
+ },
248
+
249
+ completed(payload) {
250
+ if (payload.success) {
251
+ this.$emit("completed");
252
+ }
253
+ },
254
+
255
+ createInitialPages() {
256
+ let d = new Date();
257
+ let n = d.getMilliseconds();
258
+
259
+ //var n = Math.floor(Math.random() * 1000);
260
+
261
+ let InitialPages = "";
262
+ if (this.base64) {
263
+ for (var i = 1; i < 6; i++) {
264
+ var url =
265
+ this.apiUrl +
266
+ "/api/builder/getpreview/" +
267
+ this.uuid +
268
+ "?page=" +
269
+ i +
270
+ "&update=" +
271
+ n +
272
+ "&w=533&v=0&noCache=true";
273
+ InitialPages +=
274
+ "<div class='hard'><img src='data:image/png;base64," +
275
+ url +
276
+ "' alt='' firstPage='true'></div>";
277
+ }
278
+ } else {
279
+ for (var i = 1; i < 6; i++) {
280
+ var url =
281
+ this.apiUrl +
282
+ "/api/builder/getpreview/" +
283
+ this.uuid +
284
+ "?page=" +
285
+ i +
286
+ "&update=" +
287
+ n +
288
+ "&w=533&v=0&noCache=true";
289
+ InitialPages +=
290
+ "<div class='hard'><img src='" +
291
+ url +
292
+ "' alt='' firstPage='true'></div>";
293
+ }
294
+ }
295
+ InitialPages +=
296
+ "<div class='hard back-side'><img src='" +
297
+ this.apiUrl +
298
+ "/api/builder/getpreview/" +
299
+ this.uuid +
300
+ "?page=" +
301
+ (this.pages - 1) +
302
+ "&w=" +
303
+ this.bookDimensions.width +
304
+ "&v=0&update=" +
305
+ n +
306
+ "' alt=''></div>";
307
+ InitialPages +=
308
+ "<div class='hard'><img src='" +
309
+ this.apiUrl +
310
+ "/api/builder/getpreview/" +
311
+ this.uuid +
312
+ "?page=" +
313
+ this.pages +
314
+ "&w=" +
315
+ this.bookDimensions.width +
316
+ "&v=0&update=" +
317
+ n +
318
+ "' alt=''></div>";
319
+
320
+ $("#flipbook").html(InitialPages);
321
+ },
322
+
323
+ initBook() {
324
+ const self = this;
325
+
326
+ this.flipbookWidth = self.formato === "square" ? "100vh" : "100vh";
327
+ this.flipbookHeight =
328
+ self.formato === "square" ? "calc(50.2vh)" : "calc(70.5vh)";
329
+
330
+ $("#flipbook").turn({
331
+ width: self.flipbookWidth,
332
+ height: self.flipbookHeight,
333
+ autoCenter: false,
334
+ gradients: true,
335
+ acceleration: true,
336
+ duration: 800,
337
+ elevation: 150,
338
+ });
339
+
340
+ $("#flipbook").bind("start", function(event, pageObject, corner) {
341
+ console.log(event);
342
+ console.log(pageObject);
343
+ console.log(corner);
344
+
345
+ if (corner == "r" || corner == "l") {
346
+ $(".page-wrapper").css("cursor", "pointer");
347
+ } else {
348
+ $(".page-wrapper").css("cursor", "unset");
349
+ }
350
+ if (
351
+ corner == "tl" ||
352
+ corner == "tr" ||
353
+ corner == "bl" ||
354
+ corner == "br"
355
+ ) {
356
+ event.preventDefault();
357
+ }
358
+ });
359
+
360
+ $("#flipbook").bind("end", function(event, pageObject, turned) {
361
+ //$(".page-wrapper").css("cursor", "unset");
362
+ });
363
+
364
+ // Habilitar passagem via o dedo
365
+ $(document).keydown(function(e) {
366
+ var previous = 37;
367
+ var next = 39;
368
+ switch (e.keyCode) {
369
+ case previous:
370
+ jQuery("#flipbook").turn("previous");
371
+ break;
372
+ case next:
373
+ jQuery("#flipbook").turn("next");
374
+ break;
375
+ }
376
+ });
377
+
378
+ self.isCover =
379
+ "-" + $(".page-wrapper[page=" + self.currentPage + "]").width();
380
+ $("#flipbook").bind("turning", function(event, page, view) {
381
+ self.currentPage = page;
382
+
383
+ if (self.currentPage >= self.loadedPages - 2) {
384
+ self.morePages();
385
+ }
386
+
387
+ if (self.currentPage === 1) {
388
+ self.numberPositions = 0;
389
+ self.isCover =
390
+ "-" + $(".page-wrapper[page=" + self.currentPage + "]").width();
391
+ } else if (self.currentPage === self.pages) {
392
+ self.isCover = $(
393
+ ".page-wrapper[page=" + self.currentPage + "]"
394
+ ).width();
395
+
396
+ if (self.currentPage % 2 == 0) {
397
+ self.numberPositions = self.currentPage * 30;
398
+ } else {
399
+ self.numberPositions = (self.currentPage - 1) * 30;
400
+ }
401
+ } else {
402
+ self.isCover = 0;
403
+
404
+ if (self.currentPage % 2 == 0) {
405
+ self.numberPositions = self.currentPage * 30;
406
+ } else {
407
+ self.numberPositions = (self.currentPage - 1) * 30;
408
+ }
409
+ }
410
+ });
411
+
412
+ for (var i = this.loadedPages; i < this.pages - 2; i++) {
413
+ var pageCount = $("#flipbook").turn("pages") + 1;
414
+
415
+ var element = $(
416
+ '<div><img class="img-book" width="100%" src="' +
417
+ this.apiUrl +
418
+ "/api/builder/getplaceholder/" +
419
+ this.product_id +
420
+ "?page=" +
421
+ i +
422
+ "&w=" +
423
+ this.bookDimensions.widthPlaceholder +
424
+ '&pw=0&noCache=true" alt=""><div class="loading-bg"><div class="loading book-loading"></div></div> </div>'
425
+ );
426
+
427
+ $("#flipbook").turn("addPage", element);
428
+ $("#flipbook").turn("pages", pageCount); // Sets the total # of pages
429
+ }
430
+
431
+ this.started();
432
+ },
433
+
434
+ toTheLeft() {
435
+ $("#flipbook").turn("previous");
436
+ },
437
+
438
+ toTheRight() {
439
+ $("#flipbook").turn("next");
440
+ },
441
+
442
+ zoomTo(event) {
443
+ setTimeout(function() {
444
+ if ($(".flipbook-container").data().regionClicked) {
445
+ $(".flipbook-container").data().regionClicked = false;
446
+ } else {
447
+ if ($(".flipbook-container").zoom("value") == 1) {
448
+ $(".flipbook-container").zoom("zoomIn", event);
449
+ } else {
450
+ $(".flipbook-container").zoom("zoomOut");
451
+ }
452
+ }
453
+ }, 1);
454
+ },
455
+
456
+ activateZoom() {
457
+ const self = this;
458
+
459
+ $(".flipbook-container").zoom({
460
+ flipbook: $("#flipbook"),
461
+
462
+ max: function() {
463
+ return 1452 / $("#flipbook").width();
464
+ },
465
+
466
+ when: {
467
+ swipeLeft: function() {
468
+ $(this)
469
+ .zoom("flipbook")
470
+ .turn("next");
471
+ },
472
+
473
+ swipeRight: function() {
474
+ $(this)
475
+ .zoom("flipbook")
476
+ .turn("previous");
477
+ },
478
+
479
+ resize: function(event, scale, page, pageElement) {
480
+ // if (scale==1)
481
+ // loadSmallPage(page, pageElement);
482
+ // else
483
+ // loadLargePage(page, pageElement);
484
+ },
485
+
486
+ zoomIn: function() {
487
+ $(".flipbook-container").removeClass("zoom-in");
488
+ $(".flipbook-container").removeClass("zoom-out");
489
+
490
+ $(".flipbook-container").addClass("zoom-in");
491
+ // $('.thumbnails').hide();
492
+ // $('.made').hide();
493
+ // $('.magazine').removeClass('animated').addClass('zoom-in');
494
+ // $('.zoom-icon').removeClass('zoom-icon-in').addClass('zoom-icon-out');
495
+
496
+ // if (!window.escTip && !$.isTouch) {
497
+ // escTip = true;
498
+
499
+ // $('<div />', {'class': 'exit-message'}).
500
+ // html('<div>Press ESC to exit</div>').
501
+ // appendTo($('body')).
502
+ // delay(2000).
503
+ // animate({opacity:0}, 500, function() {
504
+ // $(this).remove();
505
+ // });
506
+ // }
507
+ },
508
+
509
+ zoomOut: function() {
510
+ $(".flipbook-container").removeClass("zoom-in");
511
+ $(".flipbook-container").removeClass("zoom-out");
512
+
513
+ $(".flipbook-container").addClass("zoom-out");
514
+ // $('.exit-message').hide();
515
+ // $('.thumbnails').fadeIn();
516
+ // $('.made').fadeIn();
517
+ // $('.zoom-icon').removeClass('zoom-icon-out').addClass('zoom-icon-in');
518
+
519
+ setTimeout(function() {
520
+ $("#flipbook")
521
+ .addClass("animated")
522
+ .removeClass("zoom-in");
523
+ self.resizeViewport();
524
+ }, 0);
525
+ },
526
+ },
527
+ });
528
+
529
+ // Zoom event
530
+ if ($.isTouch) {
531
+ $(".flipbook-container").bind("zoom.doubleTap", self.zoomTo);
532
+ } else {
533
+ $(".flipbook-container").bind("zoom.tap", self.zoomTo);
534
+ }
535
+ },
536
+
537
+ resizeViewport() {
538
+ var width = $(window).width(),
539
+ height = $(window).height(),
540
+ options = $("#flipbook").turn("options");
541
+
542
+ $("#flipbook").removeClass("animated");
543
+
544
+ $(".flipbook-container")
545
+ .css({
546
+ width: width,
547
+ height: height,
548
+ })
549
+ .zoom("resize");
550
+
551
+ if ($("#flipbook").turn("zoom") == 1) {
552
+ var bound = calculateBound({
553
+ width: options.width,
554
+ height: options.height,
555
+ boundWidth: Math.min(options.width, width),
556
+ boundHeight: Math.min(options.height, height),
557
+ });
558
+
559
+ if (bound.width % 2 !== 0) bound.width -= 1;
560
+
561
+ if (
562
+ bound.width != $("#flipbook").width() ||
563
+ bound.height != $("#flipbook").height()
564
+ ) {
565
+ $("#flipbook").turn("size", bound.width, bound.height);
566
+
567
+ if ($("#flipbook").turn("page") == 1)
568
+ $("#flipbook").turn("peel", "br");
569
+
570
+ // $('.next-button').css({height: bound.height, backgroundPosition: '-38px '+(bound.height/2-32/2)+'px'});
571
+ // $('.previous-button').css({height: bound.height, backgroundPosition: '-4px '+(bound.height/2-32/2)+'px'});
572
+ }
573
+
574
+ $("#flipbook").css({
575
+ top: -bound.height / 2,
576
+ left: -bound.width / 2,
577
+ });
578
+ }
579
+
580
+ // var magazineOffset = $('#flipbook').offset(),
581
+ // boundH = height - magazineOffset.top - $('#flipbook').height(),
582
+ // marginTop = (boundH - $('.thumbnails > div').height()) / 2;
583
+
584
+ // if (marginTop<0) {
585
+ // $('.thumbnails').css({height:1});
586
+ // } else {
587
+ // $('.thumbnails').css({height: boundH});
588
+ // $('.thumbnails > div').css({marginTop: marginTop});
589
+ // }
590
+
591
+ // if (magazineOffset.top<$('.made').height())
592
+ // $('.made').hide();
593
+ // else
594
+ // $('.made').show();
595
+
596
+ $("#flipbook").addClass("animated");
597
+ },
598
+
599
+ morePages() {
600
+ for (var i = this.loadedPages + 1; i <= this.loadedPages + 4; i++) {
601
+ this.addPage(i, $("#flipbook"));
602
+ }
603
+ this.loadedPages = this.loadedPages + 4;
604
+ },
605
+
606
+ addPage(page, book) {
607
+ if (book.turn("hasPage", page) && page <= this.pages - 2) {
608
+ let classHard = "";
609
+
610
+ var element = $("<div />", { class: "hard" }).html(
611
+ '<img class="img-book loading-blur" width="100%" src="https://dka04237waacy.cloudfront.net/api/builder/getplaceholder/' +
612
+ this.product_id +
613
+ "?page=" +
614
+ page +
615
+ "&w=" +
616
+ this.bookDimensions.widthPlaceholder +
617
+ '&pw=0" alt=""><div class="loading-bg"><div class="loading book-loading"></div></div>'
618
+ );
619
+ book.turn("addPage", element, page);
620
+
621
+ var url =
622
+ this.apiUrl +
623
+ "/api/builder/getpreview/" +
624
+ this.uuid +
625
+ "?page=" +
626
+ page +
627
+ "&w=" +
628
+ this.bookDimensions.width +
629
+ "&v=0";
630
+
631
+ axios
632
+ .get(url, {
633
+ progress: false,
634
+ responseType: "arraybuffer",
635
+ })
636
+ .then((response) => {
637
+ const cover = new Buffer.from(response.data, "binary").toString(
638
+ "base64"
639
+ );
640
+ element.html(
641
+ "<img width='100%' src='data:image/png;base64," + cover + "'>"
642
+ );
643
+ });
644
+ }
645
+ },
646
+
647
+ resize() {
648
+ var barSize = 90 + 40;
649
+
650
+ //var controlSize = $(".controls").height() + 20
651
+
652
+ var width = "100vh";
653
+ var height = this.sizeSquare;
654
+
655
+ return {
656
+ width: width,
657
+ height: height,
658
+ };
659
+ },
660
+ },
661
+ computed: {
662
+ shadowVar() {
663
+ return {
664
+ "--shadow-color": this.shadowColor,
665
+ };
666
+ },
667
+ },
668
+ };
631
669
  </script>
632
670
 
633
-
634
671
  <style lang="scss">
635
- @import "./node_modules/@tiddh/brave-tokens/dist/styles/style.scss";
636
- @import "./css/flipbook.scss";
637
-
638
- .storybook {
639
- &-6 {
640
- width: columns("lg", 6);
641
- }
642
- &-12 {
643
- width: columns("lg", 12);
644
- }
645
- &-25 {
646
- width: columns("lg", 25);
647
- }
648
- }
672
+ @import "./node_modules/@tiddh/brave-tokens/dist/styles/style.scss";
673
+ @import "./css/flipbook.scss";
674
+
675
+ .storybook {
676
+ &-6 {
677
+ width: columns("lg", 6);
678
+ }
679
+ &-12 {
680
+ width: columns("lg", 12);
681
+ }
682
+ &-25 {
683
+ width: columns("lg", 25);
684
+ }
685
+ }
649
686
  </style>
650
687
 
651
- <style lang='scss' scoped>
652
- @import "./node_modules/@tiddh/brave-tokens/dist/styles/style.scss";
653
- ::v-deep .arrow{
654
- svg{
655
- width: 100% !important;
656
- height: 100% !important;
657
- }
658
- }
659
-
660
- .zoom-in {
661
- #flipbook img {
662
- height: 100% !important;
663
- }
664
- }
665
-
666
- .preview-desktop {
667
- text-align: center;
668
- margin: 0 auto;
669
- transition: all 0.7s ease-in-out;
670
- }
671
-
672
- .loading-box {
673
- position: absolute;
674
- top: 35%;
675
- left: 0;
676
- right: 0;
677
- bottom: 0;
678
- margin-bottom: auto;
679
- margin-top: auto;
680
- z-index: 9999;
681
- text-align: center;
682
- font-family: $font-family-02;
683
-
684
- #loading {
685
- display: inline-block;
686
- border: 8px solid #f3f3f3;
687
- border-top: 8px solid #42cda1;
688
- border-radius: 50%;
689
- width: px-size("lg", 60px);
690
- height: px-size("lg", 60px);
691
- animation: spin 0.6s linear infinite;
692
- @include media-breakpoint-down("sm") {
693
- border: 6px solid #f3f3f3;
694
- border-top: 6px solid #42cda1;
695
- width: px-size("lg", 40px);
696
- height: px-size("lg", 40px);
697
- font-family: $font-family-02;
698
- }
699
- }
700
-
701
- @keyframes spin {
702
- 0% {
703
- transform: rotate(0deg);
704
- }
705
- 100% {
706
- transform: rotate(360deg);
707
- }
708
- }
709
-
710
- small {
711
- display: block;
712
- width: 100%;
713
- font-size: $font-size-xxs;
714
- font-weight: $font-weight-bold;
715
- font-family: $font-family-comp-01;
716
- margin-top: $spacing-inset-xs;
717
- }
718
-
719
- h4 {
720
- font-size: $font-size-sm;
721
- margin-top: $spacing-stack-xs;
722
- font-weight: $font-weight-regular;
723
- }
724
- }
725
-
726
- .book-centered {
727
- transition: all 0.7s ease-in-out;
728
- }
729
-
730
- .flipbook-container {
731
- position: relative;
732
- display: flex;
733
- flex-direction: column;
734
- justify-content: center;
735
- align-items: center;
736
- transition: all 0.3s;
737
- z-index: 2;
738
- min-height: 210px;
739
- min-height: 210px;
740
-
741
- &.zoom-in {
742
- height: 100vh;
743
- }
744
-
745
- @include media-breakpoint-down("sm") {
746
- display: none;
747
- }
748
-
749
- .flipbook-lib {
750
- z-index: 50;
751
-
752
- .page {
753
- &.odd:not(.p1)::before {
754
- content: "";
755
- position: absolute;
756
- display: block;
757
- height: 100%;
758
- width: 100%;
759
- top: 0;
760
- left: 0;
761
- box-shadow: 20px 0px 20px -10px rgba(0, 0, 0, 0.3) inset;
762
- z-index: 4;
763
- }
764
- &.even::before {
765
- position: absolute;
766
- display: block;
767
- content: "";
768
- height: 100%;
769
- width: 100%;
770
- top: 0;
771
- left: 0;
772
- box-shadow: -20px 0px 20px -10px rgba(0, 0, 0, 0.5) inset;
773
- }
774
- }
775
- img {
776
- height: 100% !important;
777
- }
778
- }
779
- }
780
-
781
- .controls {
782
- margin: 0 auto;
783
- display: block;
784
- display: inline-block;
785
- margin-top: 20px;
786
- position: relative;
787
- z-index: 2;
788
-
789
- button {
790
- display: inline-block !important;
791
- background: #fff;
792
- box-shadow: $shadow-level-03;
793
- padding: px-size("lg", $spacing-inline-xs) !important;
794
- border-radius: $border-radius-circle;
795
- text-align: center;
796
- color: $color-neutral-dark;
797
- border: none;
798
- width: auto !important;
799
- height: auto !important;
800
-
801
- svg {
802
- fill: transparent !important;
803
-
804
- path {
805
- fill: transparent !important;
806
- }
807
- }
808
-
809
- .svg-color {
810
- fill: #12d3db !important;
811
- path {
812
- fill: #12d3db !important;
813
- }
814
- }
815
- }
816
-
817
- .info-space {
818
- position: relative;
819
- top: 3px;
820
- display: inline-block;
821
- margin: 0px px-size("lg", $spacing-inline-xs);
822
- font-size: $font-size-xxxxs;
823
- font-weight: $font-weight-black;
824
- color: $color-neutral-dark;
825
- font-family: $font-family-comp-01;
826
- }
827
-
828
- .current-pages {
829
- width: 60px;
830
- white-space: nowrap;
831
- line-height: 1;
832
- overflow: hidden;
833
- transition: all 0.5s ease;
834
-
835
- .list {
836
- position: relative;
837
- transition: all 0.5s ease;
838
- }
839
-
840
- span {
841
- width: 30px;
842
- display: inline-block;
843
- text-align: center;
844
- font-size: $font-size-xs;
845
-
846
- &:first-child {
847
- margin: 0px $spacing-inline-sm;
848
- }
849
-
850
- &:last-child {
851
- margin: 0px $spacing-inline-sm;
852
- }
853
- }
854
- }
855
- }
856
-
857
- .info-pages {
858
- text-align: center;
859
- }
860
-
861
- @keyframes arrow-animation {
862
- 0%,
863
- 48%,
864
- 100% {
865
- -webkit-transform: translateX(0%);
866
- transform: translateX(0%);
867
- -webkit-transform-origin: 50% 50%;
868
- transform-origin: 50% 50%;
869
- }
870
- 8% {
871
- -webkit-transform: translateX(-30%);
872
- transform: translateX(-30%);
873
- }
874
- 16% {
875
- -webkit-transform: translateX(15%);
876
- transform: translateX(15%);
877
- }
878
- 24% {
879
- -webkit-transform: translateX(-15%);
880
- transform: translateX(-15%);
881
- }
882
- 32% {
883
- -webkit-transform: translateX(9%);
884
- transform: translateX(9%);
885
- }
886
- 40% {
887
- -webkit-transform: translateX(-6%);
888
- transform: translateX(-6%);
889
- }
890
- }
891
-
892
- .visible {
893
- opacity: 1;
894
- }
895
- .invisible {
896
- opacity: 0;
897
- }
898
-
899
- ::v-deep {
900
- .loading-bg {
901
- position: absolute;
902
- display: flex;
903
- top: 0;
904
- width: 100%;
905
- height: 100%;
906
- background-color: #fff;
907
- opacity: $opacity-intense;
908
- align-items: center;
909
- justify-content: center;
910
- z-index: 12;
911
-
912
- .loading {
913
- border: $border-width-md solid $color-neutral-medium;
914
- border-top: $border-width-md solid $color-feedback-success;
915
- border-radius: $border-radius-circle;
916
- width: px-size("lg", 60px);
917
- height: px-size("lg", 60px);
918
- animation: spin 0.6s linear infinite;
919
- @include media-breakpoint-down("sm") {
920
- border: 6px solid #f3f3f3;
921
- border-top: 6px solid #42cda1;
922
- width: px-size("lg", 40px);
923
- height: px-size("lg", 40px);
924
- }
925
- }
926
-
927
- @keyframes spin {
928
- 0% {
929
- transform: rotate(0deg);
930
- }
931
- 100% {
932
- transform: rotate(360deg);
933
- }
934
- }
935
- }
936
- }
937
-
938
- .icon {
939
- width: 24px;
940
- height: 24px;
941
- display: block;
942
- }
688
+ <style lang="scss" scoped>
689
+ @import "./node_modules/@tiddh/brave-tokens/dist/styles/style.scss";
690
+ ::v-deep .arrow {
691
+ svg {
692
+ width: 100% !important;
693
+ height: 100% !important;
694
+ }
695
+ }
696
+
697
+ .zoom-in {
698
+ #flipbook img {
699
+ height: 100% !important;
700
+ }
701
+ }
702
+
703
+ .preview-desktop {
704
+ text-align: center;
705
+ margin: 0 auto;
706
+ transition: all 0.7s ease-in-out;
707
+ }
708
+
709
+ .loading-box {
710
+ position: absolute;
711
+ top: 35%;
712
+ left: 0;
713
+ right: 0;
714
+ bottom: 0;
715
+ margin-bottom: auto;
716
+ margin-top: auto;
717
+ z-index: 9999;
718
+ text-align: center;
719
+ font-family: $font-family-02;
720
+
721
+ #loading {
722
+ display: inline-block;
723
+ border: 8px solid #f3f3f3;
724
+ border-top: 8px solid #42cda1;
725
+ border-radius: 50%;
726
+ width: px-size("lg", 60px);
727
+ height: px-size("lg", 60px);
728
+ animation: spin 0.6s linear infinite;
729
+ @include media-breakpoint-down("sm") {
730
+ border: 6px solid #f3f3f3;
731
+ border-top: 6px solid #42cda1;
732
+ width: px-size("lg", 40px);
733
+ height: px-size("lg", 40px);
734
+ font-family: $font-family-02;
735
+ }
736
+ }
737
+
738
+ @keyframes spin {
739
+ 0% {
740
+ transform: rotate(0deg);
741
+ }
742
+ 100% {
743
+ transform: rotate(360deg);
744
+ }
745
+ }
746
+
747
+ small {
748
+ display: block;
749
+ width: 100%;
750
+ font-size: $font-size-xxs;
751
+ font-weight: $font-weight-bold;
752
+ font-family: $font-family-comp-01;
753
+ margin-top: $spacing-inset-xs;
754
+ }
755
+
756
+ h4 {
757
+ font-size: $font-size-sm;
758
+ margin-top: $spacing-stack-xs;
759
+ font-weight: $font-weight-regular;
760
+ }
761
+ }
762
+
763
+ .book-centered {
764
+ transition: all 0.7s ease-in-out;
765
+ }
766
+
767
+ .flipbook-container {
768
+ position: relative;
769
+ display: flex;
770
+ flex-direction: column;
771
+ justify-content: center;
772
+ align-items: center;
773
+ transition: all 0.3s;
774
+ z-index: 2;
775
+ min-height: 210px;
776
+ min-height: 210px;
777
+
778
+ &.zoom-in {
779
+ height: 100vh;
780
+ }
781
+
782
+ @include media-breakpoint-down("sm") {
783
+ display: none;
784
+ }
785
+
786
+ .flipbook-lib {
787
+ z-index: 50;
788
+
789
+ .page {
790
+ &.odd:not(.p1)::before {
791
+ content: "";
792
+ position: absolute;
793
+ display: block;
794
+ height: 100%;
795
+ width: 100%;
796
+ top: 0;
797
+ left: 0;
798
+ box-shadow: 20px 0px 20px -10px rgba(0, 0, 0, 0.3) inset;
799
+ z-index: 4;
800
+ }
801
+ &.even::before {
802
+ position: absolute;
803
+ display: block;
804
+ content: "";
805
+ height: 100%;
806
+ width: 100%;
807
+ top: 0;
808
+ left: 0;
809
+ box-shadow: -20px 0px 20px -10px rgba(0, 0, 0, 0.5) inset;
810
+ }
811
+ }
812
+ img {
813
+ height: 100% !important;
814
+ }
815
+ }
816
+ }
817
+
818
+ .controls {
819
+ margin: 0 auto;
820
+ display: block;
821
+ display: inline-block;
822
+ margin-top: 20px;
823
+ position: relative;
824
+ z-index: 2;
825
+
826
+ button {
827
+ display: inline-block !important;
828
+ background: #fff;
829
+ box-shadow: $shadow-level-03;
830
+ padding: px-size("lg", $spacing-inline-xs) !important;
831
+ border-radius: $border-radius-circle;
832
+ text-align: center;
833
+ color: $color-neutral-dark;
834
+ border: none;
835
+ width: auto !important;
836
+ height: auto !important;
837
+ cursor: pointer;
838
+
839
+ svg {
840
+ fill: transparent !important;
841
+
842
+ path {
843
+ fill: transparent !important;
844
+ }
845
+ }
846
+
847
+ .svg-color {
848
+ fill: #12d3db !important;
849
+ path {
850
+ fill: #12d3db !important;
851
+ }
852
+ }
853
+ }
854
+
855
+ .info-space {
856
+ position: relative;
857
+ top: 3px;
858
+ display: inline-block;
859
+ margin: 0px px-size("lg", $spacing-inline-xs);
860
+ font-size: $font-size-xxxxs;
861
+ font-weight: $font-weight-black;
862
+ color: $color-neutral-dark;
863
+ font-family: $font-family-comp-01;
864
+ }
865
+
866
+ .current-pages {
867
+ width: 60px;
868
+ white-space: nowrap;
869
+ line-height: 1;
870
+ overflow: hidden;
871
+ transition: all 0.5s ease;
872
+
873
+ .list {
874
+ position: relative;
875
+ transition: all 0.5s ease;
876
+ }
877
+
878
+ span {
879
+ width: 30px;
880
+ display: inline-block;
881
+ text-align: center;
882
+ font-size: $font-size-xs;
883
+
884
+ &:first-child {
885
+ margin: 0px $spacing-inline-sm;
886
+ }
887
+
888
+ &:last-child {
889
+ margin: 0px $spacing-inline-sm;
890
+ }
891
+ }
892
+ }
893
+ }
894
+
895
+ .info-pages {
896
+ text-align: center;
897
+ }
898
+
899
+ @keyframes arrow-animation {
900
+ 0%,
901
+ 48%,
902
+ 100% {
903
+ -webkit-transform: translateX(0%);
904
+ transform: translateX(0%);
905
+ -webkit-transform-origin: 50% 50%;
906
+ transform-origin: 50% 50%;
907
+ }
908
+ 8% {
909
+ -webkit-transform: translateX(-30%);
910
+ transform: translateX(-30%);
911
+ }
912
+ 16% {
913
+ -webkit-transform: translateX(15%);
914
+ transform: translateX(15%);
915
+ }
916
+ 24% {
917
+ -webkit-transform: translateX(-15%);
918
+ transform: translateX(-15%);
919
+ }
920
+ 32% {
921
+ -webkit-transform: translateX(9%);
922
+ transform: translateX(9%);
923
+ }
924
+ 40% {
925
+ -webkit-transform: translateX(-6%);
926
+ transform: translateX(-6%);
927
+ }
928
+ }
929
+
930
+ .visible {
931
+ opacity: 1;
932
+ }
933
+ .invisible {
934
+ opacity: 0;
935
+ }
936
+
937
+ ::v-deep {
938
+ .loading-bg {
939
+ position: absolute;
940
+ display: flex;
941
+ top: 0;
942
+ width: 100%;
943
+ height: 100%;
944
+ background-color: #fff;
945
+ opacity: $opacity-intense;
946
+ align-items: center;
947
+ justify-content: center;
948
+ z-index: 12;
949
+
950
+ .loading {
951
+ border: $border-width-md solid $color-neutral-medium;
952
+ border-top: $border-width-md solid $color-feedback-success;
953
+ border-radius: $border-radius-circle;
954
+ width: px-size("lg", 60px);
955
+ height: px-size("lg", 60px);
956
+ animation: spin 0.6s linear infinite;
957
+ @include media-breakpoint-down("sm") {
958
+ border: 6px solid #f3f3f3;
959
+ border-top: 6px solid #42cda1;
960
+ width: px-size("lg", 40px);
961
+ height: px-size("lg", 40px);
962
+ }
963
+ }
964
+
965
+ @keyframes spin {
966
+ 0% {
967
+ transform: rotate(0deg);
968
+ }
969
+ 100% {
970
+ transform: rotate(360deg);
971
+ }
972
+ }
973
+ }
974
+ }
975
+
976
+ .icon {
977
+ width: 24px;
978
+ height: 24px;
979
+ display: block;
980
+ }
943
981
  </style>