diff --git a/app/assets/javascripts/admin/commons/content_editor.js b/app/assets/javascripts/admin/commons/content_editor.js index 6abb359f00760a48d680d511d92b15f0bfd14bd6..7432bb3d687e8fd27bbb6677a21eff48053efe20 100644 --- a/app/assets/javascripts/admin/commons/content_editor.js +++ b/app/assets/javascripts/admin/commons/content_editor.js @@ -39,45 +39,14 @@ window.osuny.contentEditor = { for (i = 0; i < sortableContainers.length; i += 1) { sortableInstance = new Sortable(sortableContainers[i], { - group: 'nested', handle: '.content-editor__elements__handle', - animation: 150, - fallbackOnBody: true, - swapThreshold: 0.65, - onUnchoose: this.onSortableUnchoose.bind(this), - onStart: this.onSortableStart.bind(this), - onMove: this.onSortableMove.bind(this), + fallbackOnBody: false, onEnd: this.onSortableEnd.bind(this) }); this.sortableInstances.push(sortableInstance); } }, - onSortableStart: function (event) { - 'use strict'; - var item = event.item, - kind = item.dataset.kind; - this.sortableRootContainer.classList.add('content-editor__elements__root--dragging'); - if (kind === 'block') { - this.sortableRootContainer.classList.add('content-editor__elements__root--dragging-block'); - } else if (kind === 'heading') { - this.sortableRootContainer.classList.add('content-editor__elements__root--dragging-heading'); - } - }, - - onSortableMove: function (event) { - 'use strict'; - var draggedKind = event.dragged.dataset.kind, - relatedKind = event.related.dataset.kind, - firstHeading = this.sortableRootContainer.querySelector('.js-content-editor-element[data-kind="heading"]'); - - if (draggedKind === 'block') { - // Prevent dragging a block after a heading, instead of inside - return relatedKind !== 'heading' || !event.willInsertAfter && event.related === firstHeading; - } - return true; - }, - onSortableEnd: function (event) { 'use strict'; var item = event.item, @@ -108,13 +77,6 @@ window.osuny.contentEditor = { }); }, - onSortableUnchoose: function () { - 'use strict'; - this.sortableRootContainer.classList.remove('content-editor__elements__root--dragging', - 'content-editor__elements__root--dragging-block', - 'content-editor__elements__root--dragging-heading'); - }, - getUrlFromKind: function (kind) { 'use strict'; if (kind === 'block') { diff --git a/app/assets/stylesheets/admin/commons/content-editor.sass b/app/assets/stylesheets/admin/commons/content-editor.sass index c10f1d4de19d750dd83581cfd89357f3d8391e6b..d25609a5964efa9f92dc1fe4a58e898e31e068e3 100644 --- a/app/assets/stylesheets/admin/commons/content-editor.sass +++ b/app/assets/stylesheets/admin/commons/content-editor.sass @@ -1,9 +1,5 @@ .content-editor &__elements - &__root - &--dragging-heading - .content-editor__elements__element--block - display: none &__element .draft .kind diff --git a/app/views/admin/communication/blocks/content/_editor.html.erb b/app/views/admin/communication/blocks/content/_editor.html.erb index 1896a0fa17ed58624106cba9148251892347dff0..a7c32436ddbddf600910651fd595d293d40c1019 100644 --- a/app/views/admin/communication/blocks/content/_editor.html.erb +++ b/app/views/admin/communication/blocks/content/_editor.html.erb @@ -1,7 +1,7 @@ <div class="js-content-editor mb-5" data-sort-blocks-url="<%= reorder_admin_communication_blocks_path(lang: nil, website_id: nil, extranet_id: nil) %>" data-sort-headings-url="<%= reorder_admin_communication_headings_path(lang: nil, website_id: nil, extranet_id: nil) %>"> - <ul class="nav nav-tabs justify-content-md-end mt-0 mt-md-n4"> + <ul class="nav nav-tabs justify-content-md-end"> <li class="nav-item"> <a class="nav-link active" id="mode-content-tab" @@ -33,6 +33,11 @@ role="tabpanel" aria-labelledby="mode-content-tab" tabindex="0"> + <div class="row"> + <div class="offset-xl-6 col-xl-6"> + <p class="text-end text-muted small mt-2">Dans le mode "Écrire le contenu", vous pouvez déplacer les blocs et les titres où vous voulez, indépendamment les uns des autres. Ainsi, vous pouvez déplacer un titre plus haut dans le document sans qu'il n'emporte ses blocs.</p> + </div> + </div> <div class=" content-editor__elements content-editor__elements__root js-content-editor-sortable-container" @@ -63,7 +68,14 @@ role="tabpanel" aria-labelledby="profile-tab" tabindex="1"> - plan + <div class="row"> + <div class="offset-xl-6 col-xl-6"> + <p class="text-end text-muted small mt-2">Dans le mode "Organiser le plan", vous ne voyez pas les blocs mais seulement les titres. Lorsque vous déplacez un titre, tous les blocs suivent. C'est le mode idéal pour ranger les documents longs.</p> + </div> + </div> + <% about.headings.root.ordered.each do |heading| %> + <%= render 'admin/communication/blocks/headings/heading', heading: heading, hide_blocks: true %> + <% end %> </div> </div> diff --git a/app/views/admin/communication/blocks/headings/_heading.html.erb b/app/views/admin/communication/blocks/headings/_heading.html.erb index 599eb524547aa3fe6bb3472b4f810accb43d1172..0f975867741bafef2b461c4e3f2aac2dea088727 100644 --- a/app/views/admin/communication/blocks/headings/_heading.html.erb +++ b/app/views/admin/communication/blocks/headings/_heading.html.erb @@ -1,3 +1,6 @@ +<% +hide_blocks ||= false +%> <div class=" content-editor__elements__element content-editor__elements__element--heading js-content-editor-element @@ -20,13 +23,10 @@ </span> <% end %> </div> - <div class="content-editor__elements - js-content-editor-sortable-container"> - <% heading.blocks.ordered.each do |block| %> - <%= render 'admin/communication/blocks/block', block: block %> - <% end %> - <% heading.children.ordered.each do |child| %> - <%= render 'admin/communication/blocks/headings/heading', heading: child %> - <% end %> - </div> </div> +<% heading.blocks.ordered.each do |block| %> + <%= render 'admin/communication/blocks/block', block: block %> +<% end unless hide_blocks %> +<% heading.children.ordered.each do |child| %> + <%= render 'admin/communication/blocks/headings/heading', heading: child %> +<% end %>