https://ripostecreativepedagogique.xyz/tools/bazar/presentation/ja…/entries-index-dynamic/image-mixin.js

1export default {
2  data() {
3    return {
4      tokenForImages: null,
5      imagesToProcess: [],
6      processingImage: false,
7    }
8  },
9  methods: {
10    urlImageResizedOnError(entry, fieldName, width, height, mode, token) {
11      const node = window.event.target
12      $(node).removeAttr('onerror')
13      if (entry[fieldName]) {
14        const fileName = entry[fieldName]
15        if (!this.isExternalUrl(entry)) {
16          // currently not supporting api for external images (anti-csrf token not generated)
17          if (this.tokenForImages === null) {
18            this.tokenForImages = token
19          }
20          this.imagesToProcess.push({
21            fileName,
22            width,
23            height,
24            mode,
25            node,
26          })
27          this.processNextImage()
28        } else {
29          const baseUrl = entry.url
30            .slice(0, -entry.id_fiche.length)
31            .replace(/\?$/, '')
32            .replace(/\/$/, '')
33          const previousUrl = $(node).prop('src')
34          const newUrl = `${baseUrl}/files/${fileName}`
35          if (newUrl != previousUrl) {
36            $(`img[src="${previousUrl}"]`).each(function () {
37              $(this).prop('src', newUrl)
38            })
39          }
40        }
41      }
42    },
43    urlImage(entry, fieldName, width, height, mode) {
44      if (!entry[fieldName]) {
45        return null
46      }
47      let baseUrl = this.isExternalUrl(entry)
48        ? entry.url.slice(0, -entry.id_fiche.length)
49        : wiki.baseUrl
50      baseUrl = baseUrl.replace(/\?$/, '').replace(/\/$/, '')
51      const fileName = entry[fieldName]
52      const field = this.fieldInfo(fieldName)
53
54      if (fileName.toLowerCase().endsWith('.svg'))
55        return `${baseUrl}/files/${fileName}`
56
57      let regExp = new RegExp(
58        `^(${entry.id_fiche}_${field.propertyname}_.*)_(\\d{14})_(\\d{14})\\.([^.]+)$`,
59      )
60
61      if (regExp.test(fileName)) {
62        return `${baseUrl}/cache/${fileName.replace(regExp, `$1_${mode == 'fit' ? 'vignette' : 'cropped'}_${width}_${height}_$2_$3.$4`)}`
63      }
64      regExp = new RegExp(
65        `^(${entry.id_fiche}_${field.propertyname}_.*)\\.([^.]+)$`,
66      )
67      if (regExp.test(fileName)) {
68        return `${baseUrl}/cache/${fileName.replace(regExp, `$1_${mode == 'fit' ? 'vignette' : 'cropped'}_${width}_${height}.$2`)}`
69      }
70      // maybe from other entry
71      regExp = new RegExp(
72        `^([A-Za-z0-9-_]+_${field.propertyname}_.*)_(\\d{14})_(\\d{14})\\.([^.]+)$`,
73      )
74      if (regExp.test(fileName)) {
75        return `${baseUrl}/cache/${fileName.replace(regExp, `$1_${mode == 'fit' ? 'vignette' : 'cropped'}_${width}_${height}_$2_$3.$4`)}`
76      }
77      // last possible format
78      regExp = new RegExp('^(.*)\\.([^.]+)$')
79      if (regExp.test(fileName)) {
80        return `${baseUrl}/cache/${fileName.replace(regExp, `$1_${mode == 'fit' ? 'vignette' : 'cropped'}_${width}_${height}.$2`)}`
81      }
82      return `${baseUrl}/files/${fileName}`
83    },
84    processNextImage() {
85      if (!this.processingImage && this.imagesToProcess.length > 0) {
86        this.processingImage = true
87        const newImageParams = this.imagesToProcess[0]
88        this.imagesToProcess = this.imagesToProcess.slice(1)
89        $.ajax({
90          url: wiki.url(
91            `?api/images/${newImageParams.fileName}/cache/${newImageParams.width}/${newImageParams.height}/${newImageParams.mode}`,
92          ),
93          method: 'post',
94          data: { csrftoken: this.tokenForImages },
95          cache: false,
96          success: (data) => {
97            const previousUrl = $(newImageParams.node).prop('src')
98            const srcFileName = `${wiki.baseUrl.replace(/(\?)?$/, '')}${data.cachefilename}`
99
100            $(`img[src="${previousUrl}"]`).each(function () {
101              const $img = $(this)
102              $img.prop('src', srcFileName)
103
104              const $next = $img.next('div.area.visual-area[style]')
105              if ($next.length) {
106                const backgroundImage = $next.css('background-image')
107                if (backgroundImage && backgroundImage.length) {
108                  $next.css({ 'background-image': '' }) // reset to force update
109                  $next.css({ 'background-image': `url("${srcFileName}")` })
110                }
111              }
112            })
113          },
114          complete: (e) => {
115            if (e.responseJSON != null && e.responseJSON.newToken != null) {
116              this.tokenForImages = e.responseJSON.newToken
117            }
118            this.processingImage = false
119            this.processNextImage()
120          },
121        })
122      }
123    },
124  },
125}