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

compteurs : mots, phrases, paragraphes. Utilisation des CustomStyle pour indices et exposants.

master
Jérôme Chauveau 4 years ago
parent
57c9805c6d
commit
23cd755c2e
9 changed files with 255 additions and 141 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -0
      package.json
  2. BIN
      public/favicon.ico
  3. +60
    -0
      public/sample-mounier.html
  4. +17
    -1
      src/assets/dedediteur.css
  5. +84
    -119
      src/components/Dedediteur.vue
  6. +11
    -10
      src/components/extensions/CustomStyle.js
  7. +72
    -11
      src/environments/Environement.js
  8. +5
    -0
      vue.config.js
  9. +5
    -0
      yarn.lock

+ 1
- 0
package.json View File

@@ -9,6 +9,7 @@
}, },
"dependencies": { "dependencies": {
"core-js": "^3.6.4", "core-js": "^3.6.4",
"countable": "^3.0.1",
"tiptap": "^1.27.0", "tiptap": "^1.27.0",
"tiptap-extensions": "^1.29.0", "tiptap-extensions": "^1.29.0",
"vue": "^2.6.11" "vue": "^2.6.11"


BIN
public/favicon.ico View File

Before After

+ 60
- 0
public/sample-mounier.html View File

@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Ce que l’ordinateur apporte aux humanités</h1>
<p>
Par <span class="dede-style proper-noun">Pierre Mounier</span>
</p>
<p>
<a href="https://books.openedition.org/editionsmsh/12036">Consulter l'article complet</a>
</p>
<p>
Les perspectives ouvertes par Roberto Busa pour l’étude des textes sont plus importantes qu’il n’y paraît. Elles
permettent en effet aux chercheurs non seulement d’adopter un autre point de vue sur les sources de leurs
recherches, mais aussi, et peut-être surtout, de modifier l’amplitude et la diversité des sources sur lesquels ils
appuient leur argumentation, permettant de faire surgir des questions nouvelles. Autrement dit, dans ce cas, les
humanités numériques sont synonymes de redécouverte des sources. Dans des disciplines où la découverte de documents
inédits est devenue plutôt rare – histoire ancienne, philologie, histoire de la littérature – la perspective est
enthousiasmante : puisqu’on ne trouve plus tous les jours de nouveaux papyri, de nouveaux manuscrits, de nouvelles
correspondances, la reprise à neuf de matériaux déjà connus constitue une opportunité à bien des égards. C’est sur
cette base que se construisent aujourd’hui la plupart des projets dans ce domaine.
</p>

<h2>Une textualité « rayonnante »</h2>
<p>
Le travail de numérisation et de mise en ligne des oeuvres de William Blake fait figure de pionnier dans ce domaine.
Conçue à partir de 1993 par Morris Eaves, Robert N. Essick et Joseph Viscomi, la William Blake Archive vise à rendre
justice au caractère multiforme de l’œuvre du poète anglais, qui fut aussi illustrateur, peintre et typographe.
Contrairement au travail de Roberto Busa, il s’agit ici essentiellement d’un travail d’édition numérique permettant
d’étendre l’accessibilité des éditions originales publiées par Blake à un plus grand nombre de chercheurs
susceptibles de renouveler le champ d’études portant sur cet auteur. Ainsi, le site du projet prend en charge
l’édition numérique de la revue académique spécialisée sur Blake qui existe depuis les années 1970 et lui offre une
seconde vie en termes de diffusion. La William Blake Archive est considérée aujourd’hui comme une sorte de modèle
pour les projets de numérisation de corpus en humanités numériques, en raison de la qualité du travail d’édition
dont il rend compte, aussi bien en termes de choix des matériaux qu’en ce qui concerne l’encodage du corpus (les
textes ont été encodés très tôt en SGML puis en XML) ou la conception des interfaces de navigation et de
consultation.
</p>
<p>
Créée par un spécialiste du romantisme, Jerome McGann, l’autre grande archive historique qui voit le jour à peu près
au même moment est la Dante Gabriel Rosetti Archive. Comme le projet sur Blake, la Rosetti Archive donne
prioritairement accès aux reproductions des œuvres originales, y compris lorsqu’il s’agit de textes (poèmes, livres,
articles et textes théoriques), avant de livrer leur transcription. On voit donc bien qu’il s’agit avant tout de
permettre aux chercheurs de visualiser en un clic des reproductions numériques d’originaux, qui autrement sont
difficiles d'accès, et de bénéficier de tous les outils de recherche (index, apparat critique, moteur de recherche)
leur permettant d’explorer facilement et rapidement le corpus ainsi constitué.
</p>
<p>
Il est remarquable que ces deux projets, premiers d’une longue lignée, aient pris pour objet les œuvres d’auteurs à
la créativité polymorphe : la présence du texte et de l’image ensemble dans leur œuvre, indissolublement liés dans
le cas de Blake, nécessite un travail d’édition numérique particulier qui leur rend justice. Ce travail d’édition,
qui se situe dans la longue tradition de l’édition critique que connaissent les études littéraires (les porteurs des
deux projets appartiennent à des départements d’études des textes et d’histoire de la littérature d’universités
américaines), fonde une autre lignée intellectuelle que celle dont Roberto Busa est l’initiateur.
</p>
</body>
</html>

+ 17
- 1
src/assets/dedediteur.css View File

@@ -1,13 +1,20 @@
body{
--txt-font-size: 1.2rem
}

.editor{ .editor{
position: relative; position: relative;
} }
.editor-main { .editor-main {
width: 75%;
width: 800px;
margin: auto; margin: auto;
} }
.editor__content { .editor__content {
margin: auto; margin: auto;
margin-top: 100px; margin-top: 100px;
line-height: 1.58;
text-rendering: optimizelegibility;
font-size: var(--txt-font-size);
} }


/* MOTS */ /* MOTS */
@@ -58,10 +65,19 @@
/*// — Typo - Exposant*/ /*// — Typo - Exposant*/
.superscript{ .superscript{
color: green; color: green;
font-variant-position: super;
} }
/*// — Typo - Indice*/ /*// — Typo - Indice*/
.subscript{ .subscript{
color:chartreuse; color:chartreuse;
font-variant-position: sub;


} }
/*// — Typo - Particulier*/ /*// — Typo - Particulier*/




p:nth-child(1){
text-indent: 75px;
}

+ 84
- 119
src/components/Dedediteur.vue View File

@@ -1,12 +1,20 @@
<template> <template>
<div class="editor"> <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 class="bottom-bar">
<div>
<label>Paragraphes :</label><span>{{nbParagraphs}}</span>
<label>Phrases :</label><span>{{nbSentences}}</span>
<label>Mots :</label><span>{{nbWords}}</span>
</div>
<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> </div>




@@ -33,119 +41,22 @@


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


<div class="dropdown">
<button class="dropbtn border-left">Mot</button>
<div v-bind:key="opt.label" v-for="opt in environment.getCharacterOptions()" class="dropdown">
<button class="dropbtn border-left">{{opt.label}}</button>
<div class="dropdown-content"> <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="#">
<a v-for="style in opt.styles" v-bind:key="style.label">
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive.customstyle({ type: 'foreign' }) }"
@click="commands.customstyle({ type: 'foreign' })">
Étranger
:class="{ 'is-active': isActive.customstyle({ type: style.class }) }"
@click="commands.customstyle({ type: style.class })">
{{style.label}}
</button> </button>
</a> </a>
</div> </div>
</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" <form class="menububble__form" v-if="linkMenuIsActive"
@submit.prevent="setLinkUrl(commands.link, linkUrl)"> @submit.prevent="setLinkUrl(commands.link, linkUrl)">
<input class="menububble__input" type="text" v-model="linkUrl" placeholder="https://" <input class="menububble__input" type="text" v-model="linkUrl" placeholder="https://"
@@ -221,14 +132,14 @@






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


<script> <script>
import {Editor, EditorContent, EditorMenuBar, EditorMenuBubble} from 'tiptap' import {Editor, EditorContent, EditorMenuBar, EditorMenuBubble} from 'tiptap'
import Countable from 'countable'
import { import {
Blockquote, Blockquote,
Heading, Heading,
@@ -240,8 +151,7 @@


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



export default { export default {
components: { components: {
@@ -251,6 +161,9 @@
}, },
data() { data() {
return { return {
nbWords : 0,
nbParagraphs: 0,
nbSentences : 0,
environmentName: 'ar', environmentName: 'ar',
environment : new Environment(), environment : new Environment(),
keepInBounds: true, keepInBounds: true,
@@ -262,9 +175,7 @@
new ListItem(), new ListItem(),
new OrderedList(), new OrderedList(),
new Link(), new Link(),
new CustomStyle(),
new SuperscriptStyle(),
new SubscriptStyle()
new CustomStyle()
], ],
content: ` 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>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>.
@@ -277,6 +188,16 @@
</p> </p>
`, `,


onInit: () => {

//Countable.count(document.getElementById('dedediteur'), counter => this.updateCountInfos(counter), {stripTags: true})
},
onUpdate: () => {

Countable.count(document.getElementById('dedediteur'), counter => this.updateCountInfos(counter), {stripTags: false})

}

}), }),
linkUrl: null, linkUrl: null,
linkMenuIsActive: false, linkMenuIsActive: false,
@@ -287,7 +208,25 @@
}, },


mounted(){ mounted(){
//console.log(Environment.loadAvailablesEnvironments());
let self = this;
fetch('/dedediteur/sample-mounier.html').then(function (response) {
return response.text();
}).then(function (html) {
self.editor.setContent(html);
self.$nextTick().then(() => {
Countable.count(document.getElementById('dedediteur'), counter => self.updateCountInfos(counter), {stripTags: false})
})
}).catch(function (err) {
// There was an error
console.warn('Something went wrong.', err);
});


// const area = document.getElementById('dedediteur')
//
// const callback = counter => this.updateCountInfos(counter)
// Countable.on(area, callback, {stripTags: true})

}, },


methods: { methods: {
@@ -332,7 +271,14 @@
Environment.loadEnvironment(this.environmentName).then(function(env){ Environment.loadEnvironment(this.environmentName).then(function(env){
self.environment = env; self.environment = env;
}) })
}
},

updateCountInfos(counter){
console.log(counter);
this.nbWords = counter.words;
this.nbSentences = counter.sentences;
this.nbParagraphs = document.getElementById("dedediteur").querySelectorAll('p').length;
}


} }
} }
@@ -344,6 +290,25 @@
@import '../assets/menupara'; @import '../assets/menupara';
@import '../assets/dedediteur.css'; @import '../assets/dedediteur.css';


.bottom-bar{
position: fixed;
width: 100vw;
height: 25px;
background-color: $bg-color;
bottom: 0px;
z-index: 50;
border-top:1px solid #ccc;
font-size: 0.8rem;
display: flex;
align-items: center;
div {
display: flex;
span {
margin-right: 10px;
padding-left : 5px;
}
}
}
.env-select{ .env-select{
font-size: 0.8rem; font-size: 0.8rem;
position : fixed; position : fixed;


+ 11
- 10
src/components/extensions/CustomStyle.js View File

@@ -24,15 +24,16 @@ export default class CustomStyle extends Mark {
get defaultOptions() { get defaultOptions() {
return { return {
types: [ types: [
"acronym",
"foreign",
"author-quotation",
"author-work",
"brand",
"proper-noun",
"century",
"date",
"chapter"]
// "acronym",
// "foreign",
// "author-quotation",
// "author-work",
// "brand",
// "proper-noun",
// "century",
// "date",
// "chapter"
]
}; };
} }


@@ -40,7 +41,7 @@ export default class CustomStyle extends Mark {
return { return {
attrs: { attrs: {
type: { type: {
default: "acronym"
default: ""
} }
}, },
parseDOM: [ parseDOM: [


+ 72
- 11
src/environments/Environement.js View File

@@ -1,11 +1,9 @@
const defaultEnvName = "ar";


const defaultEnvName = "ar";


export default class Environment { export default class Environment {






constructor(options = {}) { constructor(options = {}) {
this.name = options.name ? options.name : defaultEnvName; this.name = options.name ? options.name : defaultEnvName;
this.defaultOptions = { this.defaultOptions = {
@@ -14,11 +12,74 @@ export default class Environment {
T2: true, T2: true,
T3: true, T3: true,
T4: true, T4: true,
quote : true
quote: true
}, },


characters : {}
}
characters: [
{
label: "mot",
styles: [
{
"label": "étranger",
"class": "foreign"
},
{
"label": "accronyme",
"class": "acronym"
}
]
},

{
label: "nom",
styles: [
{
"label": "Auteur - Citation",
"class": "author-quotation"
},
{
"label": "Auteur - Œuvre",
"class": "author-work"
},
{
"label": "Marque",
"class": "brand"
},
{
"label": "Nom propre",
"class": "proper-noun"
}
]
},

{
label: "numéral",
styles: [
{
"label": "siècle",
"class": "century"
},
{
"label": "date",
"class": "date"
}
]
},
{
label: "typo",
styles: [
{
"label": "indice",
"class": "subscript"
},
{
"label": "exposant",
"class": "superscript"
}
]
}
],
};


this.setOptions({ this.setOptions({
...this.defaultOptions, ...this.defaultOptions,
@@ -36,20 +97,20 @@ export default class Environment {
} }




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


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




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


} }




+ 5
- 0
vue.config.js View File

@@ -0,0 +1,5 @@
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/dedediteur/'
: '/dedediteur/'
}

+ 5
- 0
yarn.lock View File

@@ -2451,6 +2451,11 @@ cosmiconfig@^5.0.0:
js-yaml "^3.13.1" js-yaml "^3.13.1"
parse-json "^4.0.0" parse-json "^4.0.0"


countable@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/countable/-/countable-3.0.1.tgz#1d0c1c426e8db08890534151ac7448c3642496ce"
integrity sha512-dz/sdi+RFpHJKMen5RAB9EKpCKd/q5WMfxG3SbdbQ3Pak4+SEPmDhVWZF0GTTHwjqjR+7DmiZHzZiFJ4qeAzmg==

create-ecdh@^4.0.0: create-ecdh@^4.0.0:
version "4.0.3" version "4.0.3"
resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.3.tgz#c9111b6f33045c4697f144787f9254cdc77c45ff" resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.3.tgz#c9111b6f33045c4697f144787f9254cdc77c45ff"


Write Preview
Loading…
Cancel
Save