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