premier jet d'une editeur front

2023-06-05 16:24:08 +02:00
parent 0961ab8b11
commit 0027a05dd3
11 changed files with 253 additions and 100 deletions
@@ -15,57 +15,55 @@
  margin-right: 25mm;
 }

+.pagedjs_margin-right,
+.pagedjs_margin-bottom,
+.pagedjs_margin-left,
+.pagedjs_margin-top {
+  border: solid 1px rgba(0, 200, 200, 100);
+}
+
+.block {
+  transition: background-color 0.2s ease-out;
+  background-color: white;
+}
+
+.selected {
+  background-color: #eee;
+}
+
+.block:hover {
+  background-color: aliceblue;
+}
+
+.selected:hover {
+  background-color: #ccc;
+}
+
 * {
  font-family: 'Public';
 }

+img {
+  width: 100%;
+}
+
+h1 {
+  color: green;
+}
+
 h2 {
 	color: blue;
 }

 h3 {
+  break-before: left;
 	color: red;
 }

-.moment {
-  display: block;
-  font-weight: bold;
-  font-size: 14pt;
+h4 {
+  color: purple;
 }

-.moment p::first-letter {
-  font-size: 24pt;
-}
-
-.moment:first-of-type {
-  break-before: left;
-}
-
-.temps {
-	font-size: 10pt;
-  margin-top: -3pt;
-  margin-bottom: 8pt;
-}
-
-.labeur {
-  line-height: 12pt;
-  font-size: 10pt;
-  
-}
-
-img {
-  width: 100%;
-}
-
-.fullpage2imgs {
-  break-before: right;
-  width: 130mm;
-  height: 210mm;
-}
-
-.fullpageimage {
-  margin-top: -16mm;
-  margin-left: -10mm;
-  width: 171mm;
-  height: 230mm;
+.default {
+  font-size: 1em;
 }
@@ -8,5 +8,4 @@
    font-family: 'Public';
    src: url('PublicSans/PublicSans-Bold.woff2'), format('woff2');
    font-weight: bold;
-}
-
+}
@@ -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
@@ -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 %}

@@ -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>