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