dje
/
dededit
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

factorisation du code pour boîte de dialogue + dialogue de choix d'environnement à l'ouverture d'un nouveau document + introduction de la liste des environnements dispo via envlist.json

master
choj 4 years ago
parent
47b1f9233f
commit
f28fe9f764
6 changed files with 208 additions and 57 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +10
    -0
      public/env/envlist.json
  2. +1
    -0
      public/index.html
  3. +50
    -0
      src/assets/_dialog.scss
  4. +18
    -10
      src/components/Dedediteur.vue
  5. +17
    -47
      src/components/MetaEditor.vue
  6. +112
    -0
      src/components/OpenPane.vue

+ 10
- 0
public/env/envlist.json View File

@@ -0,0 +1,10 @@
window.environments = [
{
'name':'typobasic',
'desc': "Environnement de rédaction contenant l'ensemble des élements typographiques de base."
},
{
'name':'courrier',
'desc': "Environnement permettant la rédaction d'un courrier."
}
];

+ 1
- 0
public/index.html View File

@@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
<script type="text/javascript" src="env/envlist.json"></script>
</head> </head>
<body> <body>
<noscript> <noscript>


+ 50
- 0
src/assets/_dialog.scss View File

@@ -0,0 +1,50 @@

@import './_vars';
.dialog{
width: 100vw;
height: 100vh;
background-color: rgba(100, 100, 100, 0.75);
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 500;

.dialog-content{
padding: 10px;
width: 800px;
height: 400px;
background-color: $bg-color;
position: relative;
}

.close-btn {
position: absolute;
top: 5px;
right: 5px;
padding:0;
margin : 0;
border: none;
cursor: pointer;
background-color: $bg-color;
color: $txt-color;
font-size: $button-width;
display: block;
line-height: unset;

svg{
width: $button-width;
height: $button-width;
}

}

.ok-button{
position: absolute;
bottom: 5px;
right: 5px;
cursor: pointer;
}
}

+ 18
- 10
src/components/Dedediteur.vue View File

@@ -1,6 +1,7 @@
<template> <template>
<div class="editor" v-bind:class="{ preview: isPreviewMode }"> <div class="editor" v-bind:class="{ preview: isPreviewMode }">


<open-pane v-bind:environmentList="environmentList" v-on:open-pane:open="openEnvFile" v-if="isOpeningState"/>
<meta-editor v-on:meta-editor:closed="isMetaEditorVisible=false" v-if="isMetaEditorVisible"/> <meta-editor v-on:meta-editor:closed="isMetaEditorVisible=false" v-if="isMetaEditorVisible"/>


<div class="bottom-bar"> <div class="bottom-bar">
@@ -168,6 +169,7 @@
Link Link
} from 'tiptap-extensions' } from 'tiptap-extensions'


import OpenPane from './OpenPane';
import MetaEditor from './MetaEditor'; import MetaEditor from './MetaEditor';




@@ -180,15 +182,18 @@
EditorContent, EditorContent,
EditorMenuBar, EditorMenuBar,
EditorMenuBubble, EditorMenuBubble,
OpenPane,
MetaEditor MetaEditor
}, },
data() { data() {
console.log(window.environments);
return { return {
nbWords: 0, nbWords: 0,
nbParagraphs: 0, nbParagraphs: 0,
nbSentences: 0, nbSentences: 0,
nbCharacters : 0, nbCharacters : 0,
environmentName: 'typobasic',
isOpeningState: false,
environmentList : window.environments ? window.environments : [],
cssEnvElement : null, cssEnvElement : null,
isMetaEditorVisible: false, isMetaEditorVisible: false,
isPreviewMode: false, isPreviewMode: false,
@@ -238,9 +243,6 @@
console.warn('Something went wrong.', err); console.warn('Something went wrong.', err);
}); });


this.addPrettyBackground();


}, },


methods: { methods: {
@@ -280,9 +282,9 @@
}, },




installEnvironment() {
installEnvironment(envName) {
let self = this; let self = this;
Environment.getEnvironment(this.environmentName).then(async function (env) {
Environment.getEnvironment(envName).then(async function (env) {
if(!env) if(!env)
alert('À venir.'); alert('À venir.');
else { else {
@@ -323,7 +325,8 @@
}, },


newFile() { newFile() {
this.editor.setContent('<p></p>');
this.isOpeningState = true;
//this.editor.setContent('<p></p>');
}, },


htmlExport() { htmlExport() {
@@ -335,11 +338,16 @@
//document.getElementById('preview_button').innerHTML = this.isPreviewMode ? '&times;' :''; //document.getElementById('preview_button').innerHTML = this.isPreviewMode ? '&times;' :'';
}, },


addPrettyBackground(){
let editorElement = document.querySelector('.ProseMirror');
console.log(editorElement);
openEnvFile(envName){
this.isOpeningState = false;
if(envName){
this.installEnvironment(envName);
this.editor.setContent('<p></p>');
}

} }



} }
} }
</script> </script>


+ 17
- 47
src/components/MetaEditor.vue View File

@@ -1,20 +1,18 @@
<template> <template>
<div class="meta-editor">
<div class="meta-editor-content">
<div class="meta-editor dialog">
<div class="meta-editor-content dialog-content">
<button title="fermer" class="close-btn" v-on:click="hide"> <button title="fermer" class="close-btn" v-on:click="hide">
&times;
<!--<svg viewPort="0 0 42 42" version="1.1"-->
<!--xmlns="http://www.w3.org/2000/svg">-->
<!--<line x1="0" y1="42"-->
<!--x2="42" y2="0"-->
<!--stroke="black"-->
<!--stroke-width="1"/>-->
<!--<line x1="0" y1="0"-->
<!--x2="42" y2="42"-->
<!--stroke="black"-->
<!--stroke-width="1"/>-->
<!--</svg>-->

<svg viewPort="0 0 42 42" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="42"
x2="42" y2="0"
stroke="black"
stroke-width="2"/>
<line x1="0" y1="0"
x2="42" y2="42"
stroke="black"
stroke-width="2"/>
</svg>
</button> </button>
<h3>Métadonnées</h3> <h3>Métadonnées</h3>
<div> <div>
@@ -70,18 +68,9 @@


<style lang="scss"> <style lang="scss">
@import '../assets/_vars'; @import '../assets/_vars';
@import '../assets/_dialog';
.meta-editor { .meta-editor {
width: 100vw;
height: 100vh;
background-color: rgba(100, 100, 100, 0.75);
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 500;



h3 { h3 {
text-align: center; text-align: center;
@@ -89,11 +78,7 @@
} }


.meta-editor-content { .meta-editor-content {
padding: 10px;
width: 800px;
height: 400px;
background-color: $bg-color;
position: relative;



div { div {
margin: 5px; margin: 5px;
@@ -104,22 +89,7 @@
} }
} }


.close-btn {
position: absolute;
top: 5px;
right: 5px;
padding:0;
margin : 0;
border: none;
cursor: pointer;
background-color: $bg-color;
//height: $button-width;
font-size: $button-width;
/*svg{
width: $button-width;
height: 4$button-width;
}*/
}



} }
} }


+ 112
- 0
src/components/OpenPane.vue View File

@@ -0,0 +1,112 @@
<template>
<div class="open-pane dialog">
<div class="dialog-content">
<button title="fermer" class="close-btn" v-on:click="close">
<svg viewPort="0 0 42 42" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="42"
x2="42" y2="0"
stroke="black"
stroke-width="2"/>
<line x1="0" y1="0"
x2="42" y2="42"
stroke="black"
stroke-width="2"/>
</svg>

</button>
<h3>Nouveau document</h3>
<p>Quel type de document souhaitez-vous créer ?</p>
<div class="env-blocks">
<div class="env-block" v-bind:class="{ selected: currentEnv===env}" v-on:click="envSelected(env)" @mouseover="hovering(env)" @mouseout="hovering(null)" v-bind:key="env.name" v-for="env in environmentList">
{{env.name}}
</div>
</div>
<div id="desc">
{{currentDesc}}
</div>
<button v-if="currentEnv !== null" class="ok-button" v-on:click="hide()">Valider</button>
<button v-else class="ok-button" disabled >Valider</button>
</div>
</div>
</template>

<script>


export default {
components: {},
props: ['environmentList'],
data() {
return {
currentEnv : null,
currentDesc: '',
}
},
beforeDestroy() {

},

mounted() {

},

methods: {

close : function(){
this.$emit('open-pane:open', null);
},
hide: function(){
this.$emit('open-pane:open', this.currentEnv ? this.currentEnv.name : null);
},

hovering(env){
this.currentDesc = env ? env.desc : "";
},

envSelected(env){
this.currentEnv = env;
}

}
}
</script>

<style lang="scss">
@import '../assets/_dialog';
h3{
text-align: center;
}

.env-blocks{
display: flex;
justify-content: center;
.env-block{
min-width: 200px;
min-height: 200px;
border: 2px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
margin:2px;
cursor: pointer;
font-weight: bold;
text-transform: uppercase;

&:hover{
background-color: $txt-color;
color:$bg-color;
}

&.selected{
border: 2px solid black;
font-size: 1.8rem;
}
}
}
#desc{
width : 75%;
margin: auto;
padding-top:15px;
}
</style>

Write Preview
Loading…
Cancel
Save