premier jet d'une editeur front

user/config/plugins/editable-contenttools.yaml

@@ -0,0 +1 @@
+enabled: true

user/data/feed/3a6d0284e743dc4a9b86f97d6dd1a3bf.yaml

@@ -1,4 +1,4 @@
-last_checked: 1685738568
+last_checked: 1685805248
 data:
   -
     title: 'macOS 13.0 Ventura Apache Setup: Upgrading Homebrew'

user/data/notifications/3a6d0284e743dc4a9b86f97d6dd1a3bf.yaml

@@ -1,4 +1,4 @@
-last_checked: 1685743084
+last_checked: 1685809578
 data:
   feed:
     -

user/data/notifications/val.yaml

@@ -0,0 +1 @@
+27: 'Fri, 02 Jun 2023 23:46:04 +0000'

user/pages/04.lexperimentation-ou-atterrir-sur-le-mode-de-la-reprise/02.atelier-1-mener-lenquete-sur-le-terrain-de-vie/01.methodologie-outils/default.md

@@ -2,12 +2,12 @@
 title: 'Méthodologie / outils'
 ---
 
-[moment]1 — accueil convivial des participants[/moment]
-[labeur]autour d’une boisson avec des biscuits ou des fruits pendant lequel on échange et on se met à l’aise avant de commencer l’atelier.[/labeur]
+1 — accueil convivial des participants
+autour d’une boisson avec des biscuits ou des fruits pendant lequel on échange et on se met à l’aise avant de commencer l’atelier.
+
+2 — tour des prénoms
+10 min animé par Maëliss
 
-[moment]2 — tour des prénoms[/moment]
-[temps]10 min animé par Maëliss[/temps]
-[labeur]
 On retire nos chaussures, on laisse toutes nos affaires au bord du plateau et on vient s’asseoir sur les chaises en cercle autour de la boussole. Les membres de l’équipe et les participants sont mélangés.
 
 Premier tour de cercle pendant lequel chacun donne son prénom (et juste son prénom)
@@ -17,21 +17,19 @@ Présentation des membres de l’équipe et de leur fonction dans l’expérimen
 * Valérie et Séverine : artistes médiatrices et en charge de l’animation des exercices artistiques
 * Marion, Pascale, et Anne en alternance : scribe et en charge de la documentation des ateliers
 * Simon avec Tristan et Ambre en alternance : chargé de la documentation des ateliers
-[/labeur]
-[fullpage2imgs]
+
 ![at1_2_1](at1_2_1.jpg "at1_2_1")
 ![at1_2_2](at1_2_2.jpg "at1_2_2")
-[/fullpage2imgs]
 
-[moment]3 — présentation de l’expérimentation “Où atterrir ?”[/moment]
-[temps]~ 8 min animé par Maëliss[/temps]
+3 — présentation de l’expérimentation “Où atterrir ?”
+~ 8 min animé par Maëliss
 
-[moment]4 — présentation du déroulé de l’atelier[/moment]
-[temps]~ 2 min animé par Maëliss[/temps]
+4 — présentation du déroulé de l’atelier
+~ 2 min animé par Maëliss
+
+5 — réveil des sensations physiques
+~ 10 min animé par Séverine et Valérie
 
-[moment]5 — réveil des sensations physiques[/moment]
-[temps]~ 10 min animé par Séverine et Valérie[/temps]
-[labeur]
 On se met debout, toujours en cercle et chacun commence par se masser la paume de la main droite puis la pulpe de chaque doigt. On passe aux bras droit qu’on pétrit comme une pâte à pain. On remonte le long du bras un petit peu, puis on arrive à l’épaule où on retrouve souvent des tensions dans le trapèze. On va essayer de décoller le trapèze vers le haut. Si on baille, c’est bon signe, on laisse aller. Même chose sur l’autre main. Puis on recommence à partir de la main gauche que l’on masse et à partir de laquelle on remonte jusqu’au trapèze gauche. On profite de chaque contact pour respirer et pour sentir chaque mouvement.
 On s’occupe du bas du dos, des lombaires, on remonte le long du dos, on tapote et on fait sortir la voix.
 
@@ -46,22 +44,21 @@ On s’ancre dans le sol et on essaye de sentir comment la région lombaire (se
 Entre nos deux mains, on imagine une immense feuille de papier qu’on voudrait compresser, en faire une toute petite boule de papier cartonné entre nos mains : ça demande un effort, il y a une densité, jusqu’à le compresser. Et dès qu’on l’a, on le lâche (souffle et lâche).
 
 Puis on va aller puiser de la force dans le sol, on ouvre les épaules, on s’ancre bien et on va faire des petits tremblements, on va aller prendre l’air et tout jeter. On devient immense par le dos, et on lâche à nouveau, on jette. Puis, on va se mettre droit, sentir le poids de notre corps, et on va devenir très fragile, se sentir une feuille de papier sur la tranche : tout passe par le périnée. Et on devient large. Les épaules sont connectées avec le mur de part et d'autre.
-[/labeur]
-[fullpage2imgs]
+
 ![at1_5_1](at1_5_1.jpg "at1_5_1")
 ![at1_5_2](at1_5_2.jpg "at1_5_2")
-[/fullpage2imgs]
-[moment]6 — cercle des prénoms[/moment]
-[temps]~ 3 min animé par Maëliss[/temps]
 
-[labeur]Une première personne sonorise son prénom avec un geste
+6 — cercle des prénoms
+~ 3 min animé par Maëliss
+
+Une première personne sonorise son prénom avec un geste
 
 Tout le monde reprend, collectivement, en même temps et le plus précisément possible, le geste et le prénom de la première personne.
 
-On recommence pour chacun jusqu’à boucler le cercle des prénoms[/labeur]
-[fullpageimage]
+On recommence pour chacun jusqu’à boucler le cercle des prénoms
+
 ![at1_6](at1_6.jpg "at1_6")
-[/fullpageimage]
+
  7 — faire une ligne
 ~ 4 min animé par Loïc
 

user/themes/carnet-atterrissage/css/mep_carnet.css

@@ -15,57 +15,55 @@
   margin-right: 25mm;
 }
 
-* {
-  font-family: 'Public';
+.pagedjs_margin-right,
+.pagedjs_margin-bottom,
+.pagedjs_margin-left,
+.pagedjs_margin-top {
+  border: solid 1px rgba(0, 200, 200, 100);
 }
 
-h2 {
-	color: blue;
+.block {
+  transition: background-color 0.2s ease-out;
+  background-color: white;
 }
 
-h3 {
-	color: red;
+.selected {
+  background-color: #eee;
 }
 
-.moment {
-  display: block;
-  font-weight: bold;
-  font-size: 14pt;
+.block:hover {
+  background-color: aliceblue;
 }
 
-.moment p::first-letter {
-  font-size: 24pt;
+.selected:hover {
+  background-color: #ccc;
 }
 
-.moment:first-of-type {
-  break-before: left;
+* {
+  font-family: 'Public';
+}
+
+img {
+  width: 100%;
 }
 
-.temps {
-	font-size: 10pt;
-  margin-top: -3pt;
-  margin-bottom: 8pt;
+h1 {
+  color: green;
 }
 
-.labeur {
-  line-height: 12pt;
-  font-size: 10pt;
-  
+h2 {
+	color: blue;
 }
 
-img {
-  width: 100%;
+h3 {
+  break-before: left;
+	color: red;
 }
 
-.fullpage2imgs {
-  break-before: right;
-  width: 130mm;
-  height: 210mm;
+h4 {
+  color: purple;
 }
 
-.fullpageimage {
-  margin-top: -16mm;
-  margin-left: -10mm;
-  width: 171mm;
-  height: 230mm;
+.default {
+  font-size: 1em;
 }

user/themes/carnet-atterrissage/fonts/fonts.css

@@ -8,5 +8,4 @@
     font-family: 'Public';
     src: url('PublicSans/PublicSans-Bold.woff2'), format('woff2');
     font-weight: bold;
-}
-
+}

user/themes/carnet-atterrissage/js/styleDropdown.js

@@ -0,0 +1,172 @@
+$( document ).ready(function() {
+    setTimeout(() => {
+        getBlocks();
+        drawUi();
+        console.log('ready');
+    }, 2000);
+});
+
+ let selectedBlock = '';
+ let sBlockId;
+ let lastSelectedBlock = '';
+ let lBlockId = lastSelectedBlock.split('_')[1];
+ let multipleBlocksSelected = false;
+ let classList = [
+    'default',
+    'moment',
+    'temps',
+    'segment',
+    'sous_segment',
+    'liste',
+    'latour',
+    'éclairage'    
+ ];
+
+
+ function getBlocks() {
+        let sections = $('section[data-id="body"]');
+        let index = 0;
+        sections.each(function() {
+                let content = $(this).find('> * > * > * > * > *');
+                let newContent = [];
+                content.each(function() {
+                    let block = $(this);
+                    if ($(block).prop('tagName') === "H4") {
+                        return;
+                    }
+                    index++;
+                    let taggedBlock = '';
+                    taggedBlock = `<div id="block_${index}" class="block" style="
+                        cursor: pointer;">`;
+                    taggedBlock += $(block).html();
+                    taggedBlock += '</div>';
+                    newContent.push(taggedBlock);
+                    $(this).empty();
+                    $(this).append(taggedBlock);
+                    $(this).click(function(e) {
+                        if (e.ctrl) {
+                            console.log("ctrl+click")
+                            blockGrouped($(this))
+                        } else {
+                            blockClicked($(this))
+                        }
+                    });
+                    //console.log(taggedBlock, index);         
+                });
+          });
+ }
+
+ function drawUi() {
+    let uiZone = `
+        <div id="uiZone" style="
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: space-around;
+            background-color: white;
+            position: fixed;
+            top: 0;
+            z-index: 1;
+            width: 10vw;
+            height: 7vw;
+        ">
+
+        </div>
+    `;
+    $('body').append(uiZone);
+
+    let selectedDisplay = `
+        <div id="selectedDisplay">
+            Pas de block sélectionné
+        </div>
+    `;
+    $('#uiZone').append(selectedDisplay);
+    
+
+    let styleDropdown = `
+        <div id="dropdown" style="display:none;">
+            <label for="classes">Style</label>
+
+            <select name="classes" id="classes">
+            </select> 
+        </div>
+    `;
+
+    $('#uiZone').append(styleDropdown);
+    classList.forEach(function(el) {
+        let option = `<option value="${el}">${el}</option>`;
+        $('#dropdown #classes').append(option);
+    })
+ }
+
+ function blockClicked(block) {
+    let blockId = $(block).children().first().attr('id');
+    let idNumber = parseInt(blockId.substr(blockId.indexOf("_") + 1));
+    if (selectedBlock && selectedBlock != blockId) {
+        $("#" + selectedBlock).toggleClass('selected');
+        if (multipleBlocksSelected) {
+            if ($('#' + selectedBlock).parent().is('[data-last-split-element]')) {
+                $('#block_' + (sBlockId + 1)).toggleClass('selected');
+            } else if ($('#' + selectedBlock).parent().is('[data-split-from]')) {
+                $('#block_' + (sBlockId - 1)).toggleClass('selected');
+            }
+        }
+    } else if ((selectedBlock && selectedBlock === blockId)) {
+        $(block).children().toggleClass('selected');
+        $('#dropdown').css('display', 'none');
+        if (multipleBlocksSelected) {
+            if ($('#' + selectedBlock).parent().is('[data-last-split-element]')) {
+                $('#block_' + (sBlockId + 1)).toggleClass('selected');
+            } else if ($('#' + selectedBlock).parent().is('[data-split-from]')) {
+                $('#block_' + (sBlockId - 1)).toggleClass('selected');
+            }
+        }
+        selectedBlock = '';
+        $('#selectedDisplay').empty().append('Pas de block sélectionné');
+        return;
+    }
+
+    $(block).children().first().toggleClass('selected');
+
+    if ($('#' + blockId).attr('class') == 'block') {
+        $('#' + blockId).addClass("default");
+    }
+
+    $('#selectedDisplay').empty().append('sélectionné<br>' + blockId);
+
+    selectedBlock = blockId;
+    sBlockId = parseInt(selectedBlock.split('_')[1]);
+
+    if ($('#' + blockId).parent().is('[data-last-split-element]')) {
+        $('#block_' + (idNumber + 1)).toggleClass('selected');
+        if ($('#block_' + (idNumber + 1)).attr('class') == 'block') {
+            $('#block_' + (idNumber + 1)).addClass("default");
+        }    
+        $('#selectedDisplay').append(` -> block_${idNumber + 1}`);
+        multipleBlocksSelected = true;
+    } else if ($('#' + blockId).parent().is('[data-split-from]')) {
+        $('#block_' + (idNumber - 1)).toggleClass('selected');
+        if ($('#block_' + (idNumber - 1)).attr('class') == 'block') {
+            $('#block_' + (idNumber - 1)).addClass("default");
+        }    
+        $('#selectedDisplay').append(` -> block_${idNumber - 1}`);
+        multipleBlocksSelected = true;
+    }
+    else {
+        multipleBlocksSelected = false;
+    }
+    
+
+    $('#dropdown').css('display', 'block');
+}
+
+function blockGrouped(block) {
+
+}
+
+ function toggleStyle(style, id) {
+    $('#' + id).toggleClass(style);
+ }
+
+
+// data split from

user/themes/carnet-atterrissage/templates/default.html.twig

@@ -3,22 +3,27 @@
 {% macro loop(page) %}
     {% for p in page.children.visible %}
         {% set current_page = (p.active or p.activeChild) ? 'selected' : '' %}
-        {% if p.children.visible.count > 0 %}
             <div class="has-children {{ current_page|e }}">
                     {# parent #}
                     <h2>{{ p.menu|e }}</h2>
                     {{ p.content|raw }}
-                <div>
-                    {{ _self.loop(p) }}
-                </div>
+                    {% if p.children.visible.count > 0 %}
+                        <div>
+                            {% for ppage in p.children.visible %}
+                                <h3>{{ ppage.menu|e }}</h3>
+                                {{ ppage.content|raw }}
+                                {% if p.children.visible.count > 0 %}
+                                    <div>
+                                        {% for pppage in ppage.children.visible %}
+                                            <h4>{{ pppage.menu|e }}</h4>
+                                            {{ pppage.content|raw }}
+                                        {% endfor %}
+                                    </div>
+                                {% endif %}
+                            {% endfor %}
+                        </div>
+                    {% endif %}
             </div>
-        {% else %}
-            <div class="{{ current_page|e }}">
-                    {# enfant #}
-                    <h3>{{ p.menu|e }}</h3>
-                    {{ p.content|raw }}
-            </div>
-        {% endif %}
     {% endfor %}
 {% endmacro %}
 

user/themes/carnet-atterrissage/templates/partials/base.html.twig

@@ -26,6 +26,7 @@
 
 {% block javascripts %}
     {% do assets.addJs('jquery', 100) %}
+    {% do assets.addJs('theme://js/styleDropdown.js', 99) %}
 {% endblock %}
 
 {% block assets deferred %}
@@ -47,26 +48,5 @@
 {% block bottom %}
     {{ assets.js('bottom')|raw }}
 {% endblock %}
-<script>
-	let content = document.getElementById("body");
-
-        content = content.innerHTML.replaceAll("[fullpage2imgs]", '<div class="fullpage2imgs">');
-        content = content.replaceAll("[/fullpage2imgs]", '</div>');
-
-        content = content.replaceAll("[labeur]", '<div class="labeur">');
-        content = content.replaceAll("[/labeur]", '</div>');
-
-        content = content.replaceAll("[moment]", '<div class="moment">');
-        content = content.replaceAll("[/moment]", '</div>');
-
-        content = content.replaceAll("[temps]", '<div class="temps">');
-        content = content.replaceAll("[/temps]", '</div>');
-
-        content = content.replaceAll("[fullpageimage]", '<div class="fullpageimage">');
-        content = content.replaceAll("[/fullpageimage]", '</div>');
-
-        document.getElementById("body").innerHTML = content;
-
-</script>
 </body>
 </html>