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

notion d'environnements et premiers essais sur les types de paragraphes

master
Jérôme Chauveau 4 years ago
parent
44de43568a
commit
57c9805c6d
4 changed files with 522 additions and 415 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +40
    -0
      public/env/basic.json
  2. +40
    -0
      public/env/basicplus.json
  3. +374
    -415
      src/components/Dedediteur.vue
  4. +68
    -0
      src/environments/Environement.js

+ 40
- 0
public/env/basic.json View File

@@ -0,0 +1,40 @@
{
"name" : "basic",
"characters" : [
{
"label" : "mot",
"styles": [
{
"label" : "étranger",
"class" : "foreign"
},
{
"label" : "acronyme",
"class" : "acronym"
}
]
},

{
"label" : "numéral",
"styles": [
{
"label" : "siècle",
"class" : "century"
},
{
"label" : "date",
"class" : "date"
}
]
}
],

"paragraphs": {
"T1": true,
"T2": false,
"T3": false,
"T4": false,
"quote" : false
}
}

+ 40
- 0
public/env/basicplus.json View File

@@ -0,0 +1,40 @@
{
"name" : "basicplus",
"characters" : [
{
"label" : "mot",
"styles": [
{
"label" : "étranger",
"class" : "foreign"
},
{
"label" : "acronyme",
"class" : "acronym"
}
]
},

{
"label" : "numéral",
"styles": [
{
"label" : "siècle",
"class" : "century"
},
{
"label" : "date",
"class" : "date"
}
]
}
],

"paragraphs": {
"T1": true,
"T2": true,
"T3": true,
"T4": false,
"quote" : false
}
}

+ 374
- 415
src/components/Dedediteur.vue View File

@@ -1,439 +1,398 @@
<template>
<div class="editor">
<div id="file_actions">
<button title="Ouvrir un fichier" id="input_button" onclick="document.getElementById('input').click()"></button>
<button title="Enregistrer" id="output_button" v-on:click="saveFile"></button>
<input type="file" style="display:none;" id="input" v-on:change="loadFile()">
</div>
<div class="editor">
<div class="env-select" >
<!--<label>Environnement </label>-->
<select v-model="environmentName" @change="loadEnvironment()">
<option value="ar">AR</option>
<option value="basic">Basic</option>
<option value="basicplus">Basic +</option>
</select>
</div>


<div class="editor-main">

<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">

<div>

<div class="menubar char-menubar">
<ul>

<li>
Mot
<ul>
<li>
<button
class="menubar__button"
:class="{ 'is-active': isActive.customstyle({ type: 'acronym' }) }"
@click="commands.customstyle({ type: 'acronym' })">
Acronyme
</button>
</li>
<li>
<button
class="menubar__button"
:class="{ 'is-active': isActive.customstyle({ type: 'foreign' }) }"
@click="commands.customstyle({ type: 'foreign' })">
Étranger
</button>
</li>
</ul>
</li>


<li>
Nom
<ul>
<li>
<button
class="menubar__button"
:class="{ 'is-active': isActive.customstyle({ type: 'author-quotation' }) }"
@click="commands.customstyle({ type: 'author-quotation' })">
Auteur - Citation
</button>
</li>
<li>
<button
class="menubar__button"
:class="{ 'is-active': isActive.customstyle({ type: 'author-work' }) }"
@click="commands.customstyle({ type: 'author-work' })">
Auteur - Œuvre
</button>
</li>
<li>
<button
class="menubar__button"
:class="{ 'is-active': isActive.customstyle({ type: 'brand' }) }"
@click="commands.customstyle({ type: 'brand' })">
Marque
</button>
</li>
<li>
<button
class="menubar__button"
:class="{ 'is-active': isActive.customstyle({ type: 'proper-noun' }) }"
@click="commands.customstyle({ type: 'proper-noun' })">
Nom propre
</button>
</li>
</ul>
</li>


<li>
Numéral
<ul>
<li>
<button
class="menubar__button"
:class="{ 'is-active': isActive.customstyle({ type: 'century' }) }"
@click="commands.customstyle({ type: 'century' })">
Siècle
</button>
</li>
<li>
<button
class="menubar__button"
:class="{ 'is-active': isActive.customstyle({ type: 'date' }) }"
@click="commands.customstyle({ type: 'date' })">
Date
</button>
</li>
<li>
<button
class="menubar__button"
:class="{ 'is-active': isActive.customstyle({ type: 'chapter' }) }"
@click="commands.customstyle({ type: 'chapter' })">
Chapitre
</button>
</li>
</ul>
</li>

<li>
Typo
<ul>
<li>
<button
class="menubar__button"
:class="{ 'is-active': isActive.subscriptstyle() }"
@click="commands.subscriptstyle()">
Indice
</button>
</li>
<li>
<button
class="menubar__button"
:class="{ 'is-active': isActive.superscriptstyle() }"
@click="commands.superscriptstyle()">
Exposant
</button>
</li>
</ul>
</li>


</ul>
<div id="file_actions">
<button title="Ouvrir un fichier" id="input_button"
onclick="document.getElementById('input').click()"></button>
<button title="Enregistrer" id="output_button" v-on:click="saveFile"></button>
<input type="file" style="display:none;" id="input" v-on:change="loadFile()">
<a style="display:none;" id="download_link" download="dedediteur-export-demo.html" href=”” >Download as Text File</a>
</div>


<div class="menubar paragraph-menubar">

<button
class="menubar__button"
:class="{ 'is-active': isActive.paragraph() }"
@click="commands.paragraph">
</button>


<button
class="menubar__button"
:class="{ 'is-active': isActive.heading({ level: 1 }) }"
@click="commands.heading({ level: 1 })">
T1
</button>

<button
class="menubar__button"
:class="{ 'is-active': isActive.heading({ level: 2 }) }"
@click="commands.heading({ level: 2 })">
T2
</button>

<button
class="menubar__button"
:class="{ 'is-active': isActive.heading({ level: 3 }) }"
@click="commands.heading({ level: 3 })">
T3
</button>

<button
class="menubar__button"
:class="{ 'is-active': isActive.heading({ level: 3 }) }"
@click="commands.heading({ level: 3 })">
T4
</button>

<button
class="menubar__button"
:class="{ 'is-active': isActive.blockquote() }"
@click="commands.blockquote">
« »
</button>
<div class="editor-main">

</div>
</div>
</editor-menu-bar>

<!--
<editor-menu-bubble class="menububble" :editor="editor" @hide="hideLinkMenu" v-slot="{ commands, isActive, getMarkAttrs, menu }">
<div
class="menububble"
:class="{ 'is-active': menu.isActive }"
:style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`"
>

<form class="menububble__form" v-if="linkMenuIsActive" @submit.prevent="setLinkUrl(commands.link, linkUrl)">
<input class="menububble__input" type="text" v-model="linkUrl" placeholder="https://" ref="linkInput" @keydown.esc="hideLinkMenu"/>
<button class="menububble__button" @click="setLinkUrl(commands.link, null)" type="button">
DEL
</button>
</form>

<template v-else>
<button
class="menububble__button"
@click="showLinkMenu(getMarkAttrs('link'))"
:class="{ 'is-active': isActive.link() }"
<!--<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">-->
<editor-menu-bubble class="menububble" :editor="editor" @hide="hideLinkMenu"
v-slot="{ commands, isActive, getMarkAttrs, menu }">
<div
class="menububble"
:class="{ 'is-active': menu.isActive }"
:style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`"
>
<span>{{ isActive.link() ? 'Update Link' : 'Add Link'}}</span>
LINK
</button>
</template>

<button
class="menubar__button"
:class="{ 'is-active': isActive.paragraph() }"
@click="commands.paragraph"
>
</button>

<button
class="menubar__button"
:class="{ 'is-active': isActive.heading({ level: 1 }) }"
@click="commands.heading({ level: 1 })"
>
H1
</button>

<button
class="menubar__button"
:class="{ 'is-active': isActive.heading({ level: 2 }) }"
@click="commands.heading({ level: 2 })"
>
H2
</button>

<button
class="menubar__button"
:class="{ 'is-active': isActive.heading({ level: 3 }) }"
@click="commands.heading({ level: 3 })"
>
H3
</button>

<button
class="menubar__button"
:class="{ 'is-active': isActive.bullet_list() }"
@click="commands.bullet_list"
>
ul
</button>

<button
class="menubar__button"
:class="{ 'is-active': isActive.ordered_list() }"
@click="commands.ordered_list"
>
ol
</button>

<button
class="menubar__button"
:class="{ 'is-active': isActive.blockquote() }"
@click="commands.blockquote"
>
""
</button>

<button
class="menubar__button"
:class="{ 'is-active': isActive.customstyle({ type: 'dede' }) }"
@click="commands.customstyle({ type: 'dede' })">DeDe</button>

</div>
</editor-menu-bubble>

-->

<!--
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">

<div class="menubar">



<div class="menubar char-menubar">

<div class="dropdown">
<button class="dropbtn border-left">Mot</button>
<div class="dropdown-content">
<a href="#">
<button
class="menubar__button"
:class="{ 'is-active': isActive.customstyle({ type: 'acronym' }) }"
@click="commands.customstyle({ type: 'acronym' })">
Acronyme
</button>
</a>
<a href="#">
<button
class="menubar__button"
:class="{ 'is-active': isActive.customstyle({ type: 'foreign' }) }"
@click="commands.customstyle({ type: 'foreign' })">
Étranger
</button>
</a>
</div>
</div>

<div class="dropdown">
<button class="dropbtn">Nom</button>
<div class="dropdown-content">
<a href="#">
<button
class="menubar__button"
:class="{ 'is-active': isActive.customstyle({ type: 'author-quotation' }) }"
@click="commands.customstyle({ type: 'author-quotation' })">
Auteur - Citation
</button>
</a>
<a href="#">
<button
class="menubar__button"
:class="{ 'is-active': isActive.customstyle({ type: 'author-work' }) }"
@click="commands.customstyle({ type: 'author-work' })">
Auteur - Œuvre
</button>
</a>
<a href="#">
<button
class="menubar__button"
:class="{ 'is-active': isActive.customstyle({ type: 'brand' }) }"
@click="commands.customstyle({ type: 'brand' })">
Marque
</button>
</a>
<a href="#">
<button
class="menubar__button"
:class="{ 'is-active': isActive.customstyle({ type: 'proper-noun' }) }"
@click="commands.customstyle({ type: 'proper-noun' })">
Nom propre
</button>
</a>
</div>
</div>


<div class="dropdown">
<button class="dropbtn">Numéral</button>
<div class="dropdown-content">
<a href="#">
<button
class="menubar__button"
:class="{ 'is-active': isActive.customstyle({ type: 'century' }) }"
@click="commands.customstyle({ type: 'century' })">
Siècle
</button>
</a>
<a href="#">
<button
class="menubar__button"
:class="{ 'is-active': isActive.customstyle({ type: 'date' }) }"
@click="commands.customstyle({ type: 'date' })">
Date
</button>
</a>
<a href="#">
<button
class="menubar__button"
:class="{ 'is-active': isActive.customstyle({ type: 'chapter' }) }"
@click="commands.customstyle({ type: 'chapter' })">
Chapitre
</button>
</a>
</div>
</div>


<div class="dropdown">
<button class="dropbtn border-right">Typo</button>
<div class="dropdown-content">
<a href="#">
<button
class="menubar__button"
:class="{ 'is-active': isActive.subscriptstyle() }"
@click="commands.subscriptstyle()">
Indice
</button>
</a>
<a href="#">
<button
class="menubar__button"
:class="{ 'is-active': isActive.superscriptstyle() }"
@click="commands.superscriptstyle()">
Exposant
</button>
</a>
</div>
</div>
<form class="menububble__form" v-if="linkMenuIsActive"
@submit.prevent="setLinkUrl(commands.link, linkUrl)">
<input class="menububble__input" type="text" v-model="linkUrl" placeholder="https://"
ref="linkInput" @keydown.esc="hideLinkMenu"/>
<button class="menububble__button" @click="setLinkUrl(commands.link, null)" type="button">
Supprimer le lien
</button>
</form>

<template v-else>
<button id="link__button"
class="menububble__button"
@click="showLinkMenu(getMarkAttrs('link'))"
:class="{ 'is-active': isActive.link() }"
>
<span>{{ isActive.link() ? 'Modifier le lien' : 'Lien'}}</span>
</button>
</template>
</div>
</div>
</editor-menu-bubble>


<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
<div class="menubar paragraph-menubar">

<button
class="menubar__button"
:class="{ 'is-active': isActive.paragraph() }"
@click="commands.paragraph">
</button>


<button v-if="environment.hasParagraphOption('T1')"
class="menubar__button"
:class="{ 'is-active': isActive.heading({ level: 1 }) }"
@click="commands.heading({ level: 1 })">
T1
</button>

<button v-if="environment.hasParagraphOption('T2')"
class="menubar__button"
:class="{ 'is-active': isActive.heading({ level: 2 }) }"
@click="commands.heading({ level: 2 })">
T2
</button>

<button v-if="environment.hasParagraphOption('T3')"
class="menubar__button"
:class="{ 'is-active': isActive.heading({ level: 3 }) }"
@click="commands.heading({ level: 3 })">
T3
</button>

<button v-if="environment.hasParagraphOption('T4')"
class="menubar__button"
:class="{ 'is-active': isActive.heading({ level: 3 }) }"
@click="commands.heading({ level: 3 })">
T4
</button>

<button v-if="environment.hasParagraphOption('quote')"
class="menubar__button"
:class="{ 'is-active': isActive.blockquote() }"
@click="commands.blockquote">
« »
</button>

</div>

</editor-menu-bar>



<editor-content class="editor__content" :editor="editor"/>
</div>
</editor-menu-bar>-->

<editor-content class="editor__content" :editor="editor" />
</div>
</div>
</template>

<script>
import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
import {
Blockquote,
Heading,
OrderedList,
BulletList,
ListItem,
Link
} from 'tiptap-extensions'

import CustomStyle from "./extensions/CustomStyle";
import SubscriptStyle from "./extensions/SubscriptStyle";
import SuperscriptStyle from "./extensions/SuperscriptStyle";
export default {
components: {
EditorContent,
EditorMenuBar
},
data() {
return {
keepInBounds: true,
editor: new Editor({
extensions: [
new Blockquote(),
new BulletList(),
new Heading({ levels: [1, 2, 3] }),
new ListItem(),
new OrderedList(),
new Link(),
new CustomStyle(),
new SuperscriptStyle(),
new SubscriptStyle()
],
content: `
Soit un <a href="https://fr.wiktionary.org/wiki/moment">moment</a> de <a href="https://fr.wikipedia.org/wiki/Perception">perception</a> &amp; son ouverture <a href="https://fr.wikipedia.org/wiki/Philosophie_de_la_perception">philosophique</a>. Pour cela, avoir accès à une connexion <a href="https://fr.wikipedia.org/wiki/Internet">internet</a> &amp; installer, sur l’ordinateur exploité pour s’y connecter, un <a href="https://fr.wikipedia.org/wiki/Navigateur_web">navigateur</a> pour consulter le [web](<a href="https://fr.wikipedia.org/wiki/World_Wide_Web">World Wide Web — Wikipédia</a>). Cette consultation se concrétise par la surface d’un écran où nous sont perceptibles des pages d’informations de diverses natures (iconographique, vidéo ou <a href="https://fr.wiktionary.org/wiki/textuel">textuelle</a>) dédiées à notre <a href="https://fr.wiktionary.org/wiki/aspectus#la"><em>aspectus</em></a>. Ces informations nous sont disponibles dans l’espace de l’écran sous différents <a href="https://fr.wiktionary.org/wiki/aspect">aspects</a>, résultats de la <a href="https://fr.wiktionary.org/wiki/mani%C3%A8re">manière</a> dont elles ont été <a href="https://fr.wiktionary.org/wiki/former">formées</a>.
import {Editor, EditorContent, EditorMenuBar, EditorMenuBubble} from 'tiptap'

import {
Blockquote,
Heading,
OrderedList,
BulletList,
ListItem,
Link
} from 'tiptap-extensions'

import Environment from "../environments/Environement"
import CustomStyle from "./extensions/CustomStyle";
import SubscriptStyle from "./extensions/SubscriptStyle";
import SuperscriptStyle from "./extensions/SuperscriptStyle";

export default {
components: {
EditorContent,
EditorMenuBar,
EditorMenuBubble
},
data() {
return {
environmentName: 'ar',
environment : new Environment(),
keepInBounds: true,
editor: new Editor({
extensions: [
new Blockquote(),
new BulletList(),
new Heading({levels: [1, 2, 3]}),
new ListItem(),
new OrderedList(),
new Link(),
new CustomStyle(),
new SuperscriptStyle(),
new SubscriptStyle()
],
content: `
<p>Soit un <a href="https://fr.wiktionary.org/wiki/moment">moment</a> de <a href="https://fr.wikipedia.org/wiki/Perception">perception</a> &amp; son ouverture <a href="https://fr.wikipedia.org/wiki/Philosophie_de_la_perception">philosophique</a>. Pour cela, avoir accès à une connexion <a href="https://fr.wikipedia.org/wiki/Internet">internet</a> &amp; installer, sur l’ordinateur exploité pour s’y connecter, un <a href="https://fr.wikipedia.org/wiki/Navigateur_web">navigateur</a> pour consulter le [web](<a href="https://fr.wikipedia.org/wiki/World_Wide_Web">World Wide Web — Wikipédia</a>). Cette consultation se concrétise par la surface d’un écran où nous sont perceptibles des pages d’informations de diverses natures (iconographique, vidéo ou <a href="https://fr.wiktionary.org/wiki/textuel">textuelle</a>) dédiées à notre <a href="https://fr.wiktionary.org/wiki/aspectus#la"><em>aspectus</em></a>. Ces informations nous sont disponibles dans l’espace de l’écran sous différents <a href="https://fr.wiktionary.org/wiki/aspect">aspects</a>, résultats de la <a href="https://fr.wiktionary.org/wiki/mani%C3%A8re">manière</a> dont elles ont été <a href="https://fr.wiktionary.org/wiki/former">formées</a>.
</p><p>Soit un <a href="https://fr.wiktionary.org/wiki/moment">moment</a> de <a href="https://fr.wikipedia.org/wiki/Perception">perception</a> &amp; son ouverture <a href="https://fr.wikipedia.org/wiki/Philosophie_de_la_perception">philosophique</a>. Pour cela, avoir accès à une connexion <a href="https://fr.wikipedia.org/wiki/Internet">internet</a> &amp; installer, sur l’ordinateur exploité pour s’y connecter, un <a href="https://fr.wikipedia.org/wiki/Navigateur_web">navigateur</a> pour consulter le [web](<a href="https://fr.wikipedia.org/wiki/World_Wide_Web">World Wide Web — Wikipédia</a>). Cette consultation se concrétise par la surface d’un écran où nous sont perceptibles des pages d’informations de diverses natures (iconographique, vidéo ou <a href="https://fr.wiktionary.org/wiki/textuel">textuelle</a>) dédiées à notre <a href="https://fr.wiktionary.org/wiki/aspectus#la"><em>aspectus</em></a>. Ces informations nous sont disponibles dans l’espace de l’écran sous différents <a href="https://fr.wiktionary.org/wiki/aspect">aspects</a>, résultats de la <a href="https://fr.wiktionary.org/wiki/mani%C3%A8re">manière</a> dont elles ont été <a href="https://fr.wiktionary.org/wiki/former">formées</a>.
</p><p>Soit un <a href="https://fr.wiktionary.org/wiki/moment">moment</a> de <a href="https://fr.wikipedia.org/wiki/Perception">perception</a> &amp; son ouverture <a href="https://fr.wikipedia.org/wiki/Philosophie_de_la_perception">philosophique</a>. Pour cela, avoir accès à une connexion <a href="https://fr.wikipedia.org/wiki/Internet">internet</a> &amp; installer, sur l’ordinateur exploité pour s’y connecter, un <a href="https://fr.wikipedia.org/wiki/Navigateur_web">navigateur</a> pour consulter le [web](<a href="https://fr.wikipedia.org/wiki/World_Wide_Web">World Wide Web — Wikipédia</a>). Cette consultation se concrétise par la surface d’un écran où nous sont perceptibles des pages d’informations de diverses natures (iconographique, vidéo ou <a href="https://fr.wiktionary.org/wiki/textuel">textuelle</a>) dédiées à notre <a href="https://fr.wiktionary.org/wiki/aspectus#la"><em>aspectus</em></a>. Ces informations nous sont disponibles dans l’espace de l’écran sous différents <a href="https://fr.wiktionary.org/wiki/aspect">aspects</a>, résultats de la <a href="https://fr.wiktionary.org/wiki/mani%C3%A8re">manière</a> dont elles ont été <a href="https://fr.wiktionary.org/wiki/former">formées</a>.
</p><p>Soit un <a href="https://fr.wiktionary.org/wiki/moment">moment</a> de <a href="https://fr.wikipedia.org/wiki/Perception">perception</a> &amp; son ouverture <a href="https://fr.wikipedia.org/wiki/Philosophie_de_la_perception">philosophique</a>. Pour cela, avoir accès à une connexion <a href="https://fr.wikipedia.org/wiki/Internet">internet</a> &amp; installer, sur l’ordinateur exploité pour s’y connecter, un <a href="https://fr.wikipedia.org/wiki/Navigateur_web">navigateur</a> pour consulter le [web](<a href="https://fr.wikipedia.org/wiki/World_Wide_Web">World Wide Web — Wikipédia</a>). Cette consultation se concrétise par la surface d’un écran où nous sont perceptibles des pages d’informations de diverses natures (iconographique, vidéo ou <a href="https://fr.wiktionary.org/wiki/textuel">textuelle</a>) dédiées à notre <a href="https://fr.wiktionary.org/wiki/aspectus#la"><em>aspectus</em></a>. Ces informations nous sont disponibles dans l’espace de l’écran sous différents <a href="https://fr.wiktionary.org/wiki/aspect">aspects</a>, résultats de la <a href="https://fr.wiktionary.org/wiki/mani%C3%A8re">manière</a> dont elles ont été <a href="https://fr.wiktionary.org/wiki/former">formées</a>.
</p><p>Soit un <a href="https://fr.wiktionary.org/wiki/moment">moment</a> de <a href="https://fr.wikipedia.org/wiki/Perception">perception</a> &amp; son ouverture <a href="https://fr.wikipedia.org/wiki/Philosophie_de_la_perception">philosophique</a>. Pour cela, avoir accès à une connexion <a href="https://fr.wikipedia.org/wiki/Internet">internet</a> &amp; installer, sur l’ordinateur exploité pour s’y connecter, un <a href="https://fr.wikipedia.org/wiki/Navigateur_web">navigateur</a> pour consulter le [web](<a href="https://fr.wikipedia.org/wiki/World_Wide_Web">World Wide Web — Wikipédia</a>). Cette consultation se concrétise par la surface d’un écran où nous sont perceptibles des pages d’informations de diverses natures (iconographique, vidéo ou <a href="https://fr.wiktionary.org/wiki/textuel">textuelle</a>) dédiées à notre <a href="https://fr.wiktionary.org/wiki/aspectus#la"><em>aspectus</em></a>. Ces informations nous sont disponibles dans l’espace de l’écran sous différents <a href="https://fr.wiktionary.org/wiki/aspect">aspects</a>, résultats de la <a href="https://fr.wiktionary.org/wiki/mani%C3%A8re">manière</a> dont elles ont été <a href="https://fr.wiktionary.org/wiki/former">formées</a>.
</p><p>Soit un <a href="https://fr.wiktionary.org/wiki/moment">moment</a> de <a href="https://fr.wikipedia.org/wiki/Perception">perception</a> &amp; son ouverture <a href="https://fr.wikipedia.org/wiki/Philosophie_de_la_perception">philosophique</a>. Pour cela, avoir accès à une connexion <a href="https://fr.wikipedia.org/wiki/Internet">internet</a> &amp; installer, sur l’ordinateur exploité pour s’y connecter, un <a href="https://fr.wikipedia.org/wiki/Navigateur_web">navigateur</a> pour consulter le [web](<a href="https://fr.wikipedia.org/wiki/World_Wide_Web">World Wide Web — Wikipédia</a>). Cette consultation se concrétise par la surface d’un écran où nous sont perceptibles des pages d’informations de diverses natures (iconographique, vidéo ou <a href="https://fr.wiktionary.org/wiki/textuel">textuelle</a>) dédiées à notre <a href="https://fr.wiktionary.org/wiki/aspectus#la"><em>aspectus</em></a>. Ces informations nous sont disponibles dans l’espace de l’écran sous différents <a href="https://fr.wiktionary.org/wiki/aspect">aspects</a>, résultats de la <a href="https://fr.wiktionary.org/wiki/mani%C3%A8re">manière</a> dont elles ont été <a href="https://fr.wiktionary.org/wiki/former">formées</a>.
</p><p>Soit un <a href="https://fr.wiktionary.org/wiki/moment">moment</a> de <a href="https://fr.wikipedia.org/wiki/Perception">perception</a> &amp; son ouverture <a href="https://fr.wikipedia.org/wiki/Philosophie_de_la_perception">philosophique</a>. Pour cela, avoir accès à une connexion <a href="https://fr.wikipedia.org/wiki/Internet">internet</a> &amp; installer, sur l’ordinateur exploité pour s’y connecter, un <a href="https://fr.wikipedia.org/wiki/Navigateur_web">navigateur</a> pour consulter le [web](<a href="https://fr.wikipedia.org/wiki/World_Wide_Web">World Wide Web — Wikipédia</a>). Cette consultation se concrétise par la surface d’un écran où nous sont perceptibles des pages d’informations de diverses natures (iconographique, vidéo ou <a href="https://fr.wiktionary.org/wiki/textuel">textuelle</a>) dédiées à notre <a href="https://fr.wiktionary.org/wiki/aspectus#la"><em>aspectus</em></a>. Ces informations nous sont disponibles dans l’espace de l’écran sous différents <a href="https://fr.wiktionary.org/wiki/aspect">aspects</a>, résultats de la <a href="https://fr.wiktionary.org/wiki/mani%C3%A8re">manière</a> dont elles ont été <a href="https://fr.wiktionary.org/wiki/former">formées</a>.
</p>
`,

}),
linkUrl: null,
linkMenuIsActive: false,
}),
linkUrl: null,
linkMenuIsActive: false,
}
},
beforeDestroy() {
this.editor.destroy()
},

mounted(){
//console.log(Environment.loadAvailablesEnvironments());
},

methods: {
loadFile: function () {
let ed = this.editor;
let fr = new FileReader();
fr.onload = function () {
console.log(fr.result);
ed.setContent(fr.result)
};
fr.readAsText(document.getElementById('input').files[0]);

},

saveFile: function () {
//console.log(this.editor.getHTML())
var text = this.editor.getHTML()
var data = new Blob([text], {type: 'text/html'});
var url = window.URL.createObjectURL(data);
document.getElementById('download_link').href = url;
document.getElementById('download_link').click()
},
showLinkMenu(attrs) {
this.linkUrl = attrs.href
this.linkMenuIsActive = true
this.$nextTick(() => {
this.$refs.linkInput.focus()
})
},
hideLinkMenu() {
this.linkUrl = null
this.linkMenuIsActive = false
},
setLinkUrl(command, url) {
command({href: url})
this.hideLinkMenu()
},


loadEnvironment(){
let self = this;
Environment.loadEnvironment(this.environmentName).then(function(env){
self.environment = env;
})
}

}
}
},
beforeDestroy() {
this.editor.destroy()
},

methods: {
loadFile: function () {
let ed = this.editor;
let fr = new FileReader();
fr.onload = function() {
console.log(fr.result);
ed.setContent(fr.result)
};
fr.readAsText(document.getElementById('input').files[0]);

},

saveFile: function(){
console.log(this.editor.getHTML())
},
showLinkMenu(attrs) {
this.linkUrl = attrs.href
this.linkMenuIsActive = true
this.$nextTick(() => {
this.$refs.linkInput.focus()
})
},
hideLinkMenu() {
this.linkUrl = null
this.linkMenuIsActive = false
},
setLinkUrl(command, url) {
command({ href: url })
this.hideLinkMenu()
}
}
}
</script>

<style lang="scss">
@import '../assets/menubar.scss';
@import '../assets/dedediteur.css';
.menubar{
text-align: center;
margin-top: 12px;
}

#file_actions{
/*border-bottom : 1px solid #2c3e50;*/
padding : 12px;
position: fixed;
top: 10px;
left: 10px;
z-index: 200;
}
#output_button, #input_button{
border : 1px solid black;
width: 24px;
height: 24px;
cursor: pointer;
}
#input_button{
background-color: white;
}
#output_button{
background-color: black;
margin-left: 12px;
}

/* editor*/
.editor{
position: relative;
}


.ProseMirror:read-write:focus {
outline: none;
}


/*menububble */
.menububble{
/*visibility: hidden;*/
background-color: black;
border-radius: 5px;
z-index: 100;
padding: 5px;
position: absolute;
bottom: 25px;
}

.menububble.is-active{
visibility: visible;
}

.menububble button{
background-color: black;
border: none;
color : white;
border-radius: 5px;
}
@import '../assets/_vars';
@import '../assets/menuchar';
@import '../assets/menupara';
@import '../assets/dedediteur.css';

.env-select{
font-size: 0.8rem;
position : fixed;
right : 2px;
bottom:2px;
z-index: 100;
select {
min-width: 80px;
border: $button-border;
background-color: $bg-color;
}
}

#file_actions {
/*border-bottom : 1px solid #2c3e50;*/
padding: 12px;
position: fixed;
top: 10px;
left: 10px;
z-index: 200;
}

#output_button, #input_button {
border: 1px solid black;
width: 24px;
height: 24px;
cursor: pointer;
}

#input_button {
background-color: white;
}

#output_button {
background-color: black;
margin-left: 12px;
}

/* editor*/
.editor {
position: relative;
}


.ProseMirror:read-write:focus {
outline: none;
}







+ 68
- 0
src/environments/Environement.js View File

@@ -0,0 +1,68 @@

const defaultEnvName = "ar";

export default class Environment {




constructor(options = {}) {
this.name = options.name ? options.name : defaultEnvName;
this.defaultOptions = {
paragraphs: {
T1: true,
T2: true,
T3: true,
T4: true,
quote : true
},

characters : {}
}

this.setOptions({
...this.defaultOptions,
...options,
})
}


setOptions(options) {
this.options = {
...this.options,
...options,
}

}


hasParagraphOption(optionKey){
return this.options.paragraphs[optionKey] | false;
}

hasCharOption(optionKey){
return this.options.characters[optionKey] | false;
}


static async loadEnvironment(envName) {
if(envName === defaultEnvName)
return new Environment();
else
return Environment.loadEnvironmentFromJSONFile('/env/' + envName + '.json')

}

static async loadEnvironmentFromJSONFile(filePath) {
let res = await fetch(filePath);
let json = await res.json();
return Environment.loadEnvironmentFromJSON(json);


}

static loadEnvironmentFromJSON(json) {
return new Environment(json);
}

}

Write Preview
Loading…
Cancel
Save