bachir/ouatterrir-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

header static menu promoted & static content well displayed #2194

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2023-07-06 15:05:59 +02:00
parent 5c41bfc04a
commit 52c0700d29
5 changed files with 98 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
package-lock.json generated
View File

@@ -21,6 +21,7 @@
"paper": "^0.12.17",
"pinia": "^2.0.21",
"poly-decomp": "^0.3.0",
"video-embed": "^0.2.0",
"vue": "^3.2.38",
"vue-easy-lightbox": "^1.16.0",
"vue-plyr": "^7.0.0",
@@ -1133,6 +1134,16 @@
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
"optional": true
},
"node_modules/encoding": {
"version": "0.1.13",
"resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
"integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
"optional": true,
"peer": true,
"dependencies": {
"iconv-lite": "^0.6.2"
}
},
"node_modules/entities": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -2670,9 +2681,9 @@
"dev": true
},
"node_modules/node-fetch": {
"version": "2.6.11",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.11.tgz",
"integrity": "sha512-4I6pdBY1EthSqDmJkiNk3JIT8cswwR9nfeW/cPdUagJYEQG7R95WRH74wpz7ma8Gh/9dI9FP+OU+0E4FvtA55w==",
"version": "2.6.12",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.12.tgz",
"integrity": "sha512-C/fGU2E8ToujUivIO0H+tpQ6HWo4eEmchoPIoXtxCrVghxdKq+QOHqEZW7tuP3KlV3bC8FRMO5nMCC7Zm1VP6g==",
"optional": true,
"dependencies": {
"whatwg-url": "^5.0.0"
@@ -2962,18 +2973,6 @@
}
}
},
"node_modules/plyr": {
"version": "3.7.0",
"resolved": "git+ssh://git@github.com/sampotts/plyr.git#d434c9af16e641400aaee93188594208d88f2658",
"license": "MIT",
"dependencies": {
"core-js": "^3.22.0",
"custom-event-polyfill": "^1.0.7",
"loadjs": "^4.2.0",
"rangetouch": "^2.0.1",
"url-polyfill": "^1.1.12"
}
},
"node_modules/poly-decomp": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/poly-decomp/-/poly-decomp-0.3.0.tgz",
@@ -3622,6 +3621,11 @@
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
"devOptional": true
},
"node_modules/video-embed": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/video-embed/-/video-embed-0.2.0.tgz",
"integrity": "sha512-b1pt11Dx5UscV+eKT2ZFchD/MTO5FG+mCSSEBehwwXZXkKY7NsDxn67fDpxtIU2Nbd9l9xfO7391fndlz12x/g=="
},
"node_modules/vite": {
"version": "3.2.7",
"resolved": "https://registry.npmjs.org/vite/-/vite-3.2.7.tgz",
@@ -3768,6 +3772,18 @@
"source-map": "^0.6.1"
}
},
"node_modules/vue-plyr/node_modules/plyr": {
"version": "3.7.0",
"resolved": "git+ssh://git@github.com/sampotts/plyr.git#d434c9af16e641400aaee93188594208d88f2658",
"license": "MIT",
"dependencies": {
"core-js": "^3.22.0",
"custom-event-polyfill": "^1.0.7",
"loadjs": "^4.2.0",
"rangetouch": "^2.0.1",
"url-polyfill": "^1.1.12"
}
},
"node_modules/vue-plyr/node_modules/vue": {
"version": "2.7.14",
"resolved": "https://registry.npmjs.org/vue/-/vue-2.7.14.tgz",
@@ -4772,6 +4788,16 @@
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
"optional": true
},
"encoding": {
"version": "0.1.13",
"resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
"integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
"optional": true,
"peer": true,
"requires": {
"iconv-lite": "^0.6.2"
}
},
"entities": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -5812,9 +5838,9 @@
"dev": true
},
"node-fetch": {
"version": "2.6.11",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.11.tgz",
"integrity": "sha512-4I6pdBY1EthSqDmJkiNk3JIT8cswwR9nfeW/cPdUagJYEQG7R95WRH74wpz7ma8Gh/9dI9FP+OU+0E4FvtA55w==",
"version": "2.6.12",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.12.tgz",
"integrity": "sha512-C/fGU2E8ToujUivIO0H+tpQ6HWo4eEmchoPIoXtxCrVghxdKq+QOHqEZW7tuP3KlV3bC8FRMO5nMCC7Zm1VP6g==",
"optional": true,
"requires": {
"whatwg-url": "^5.0.0"
@@ -6008,17 +6034,6 @@
}
}
},
"plyr": {
"version": "git+ssh://git@github.com/sampotts/plyr.git#d434c9af16e641400aaee93188594208d88f2658",
"from": "plyr@github:sampotts/plyr#develop",
"requires": {
"core-js": "^3.22.0",
"custom-event-polyfill": "^1.0.7",
"loadjs": "^4.2.0",
"rangetouch": "^2.0.1",
"url-polyfill": "^1.1.12"
}
},
"poly-decomp": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/poly-decomp/-/poly-decomp-0.3.0.tgz",
@@ -6454,6 +6469,11 @@
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
"devOptional": true
},
"video-embed": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/video-embed/-/video-embed-0.2.0.tgz",
"integrity": "sha512-b1pt11Dx5UscV+eKT2ZFchD/MTO5FG+mCSSEBehwwXZXkKY7NsDxn67fDpxtIU2Nbd9l9xfO7391fndlz12x/g=="
},
"vite": {
"version": "3.2.7",
"resolved": "https://registry.npmjs.org/vite/-/vite-3.2.7.tgz",
@@ -6550,6 +6570,17 @@
"source-map": "^0.6.1"
}
},
"plyr": {
"version": "git+ssh://git@github.com/sampotts/plyr.git#d434c9af16e641400aaee93188594208d88f2658",
"from": "plyr@github:sampotts/plyr#develop",
"requires": {
"core-js": "^3.22.0",
"custom-event-polyfill": "^1.0.7",
"loadjs": "^4.2.0",
"rangetouch": "^2.0.1",
"url-polyfill": "^1.1.12"
}
},
"vue": {
"version": "2.7.14",
"resolved": "https://registry.npmjs.org/vue/-/vue-2.7.14.tgz",

1
package.json
View File

@@ -21,6 +21,7 @@
"paper": "^0.12.17",
"pinia": "^2.0.21",
"poly-decomp": "^0.3.0",
"video-embed": "^0.2.0",
"vue": "^3.2.38",
"vue-easy-lightbox": "^1.16.0",
"vue-plyr": "^7.0.0",

15
src/assets/main.scss
View File

@@ -101,6 +101,21 @@ body{
}
section.static{
@include main-cartouche();
h2{
font-weight: 400;
font-size: 1.323em;
padding: 1em 0;
}
p:not(:last-of-type){
margin-bottom: 1em;
}
img{
width: 100%;
}
iframe{
width: 100%;
aspect-ratio: 4 / 3;
}
}
section.concernement{
@include main-cartouche();

25
src/views/Static.vue
View File

@@ -3,6 +3,7 @@
import { mapActions, mapState } from 'pinia'
import { StaticsStore } from '@/stores/statics'
const videoEmbed = require("video-embed");
export default {
props: ['id'],
@@ -19,7 +20,21 @@ export default {
// this.loadStatics()
},
methods: {
...mapActions(StaticsStore,['loadStatics'])
...mapActions(StaticsStore,['loadStatics']),
getParsedText(){
let text = this.statics_byid[this.id].texte;
console.log('text', text);
let reg = /https:\/\/(vimeo\.com|www\.youtube\.com)\/(watch\?v=)?(\w+)/g;
let videolinks = [...text.matchAll(reg)];
// console.log('videolinks', videolinks);
for (let link of videolinks){
console.log('videolink', link);
let iframe = videoEmbed(link[0])
console.log('iframe', iframe);
text = text.replace(link[0], iframe);
};
return text;
}
},
components: {
// MapConcernements
@@ -30,10 +45,10 @@ export default {
<template>
<section class="static">
<span v-if="!loaded">loading ...</span>
<!-- <h2 v-if="loaded">{{ this.id }}</h2> -->
<h2 v-if="loaded">{{ statics_byid[id].title }}</h2>
<div v-if="loaded" v-html="statics_byid[id].texte"/>
<span v-if="!loaded">loading ...</span>
<!-- <h2 v-if="loaded">{{ this.id }}</h2> -->
<h2 v-if="loaded">{{ statics_byid[id].title }}</h2>
<div v-if="loaded" v-html="getParsedText()"/>
</section>
</template>

3
vite.config.js
View File

@@ -15,8 +15,9 @@ export default defineConfig({
'@stores': fileURLToPath(new URL('./src/stores', import.meta.url)),
'@components': fileURLToPath(new URL('./src/components', import.meta.url)),
'@views': fileURLToPath(new URL('./src/views', import.meta.url)),
'@api': fileURLToPath(new URL('./src/api', import.meta.url))
'@api': fileURLToPath(new URL('./src/api', import.meta.url)),
// '@icons': fileURLToPath(new URL('./node_modules/vue-material-design-icons', import.meta.url)),
'@node_modules': fileURLToPath(new URL('./node_modules', import.meta.url))
}
},
css: {