diff --git a/public/assets/css/app.css b/public/assets/css/app.css
index 1b4985a79dd97b96bddce60e29375bd2e1fafff7..a75477a859565f534b3b176875cb2b93374a817d 100644
--- a/public/assets/css/app.css
+++ b/public/assets/css/app.css
@@ -1,3 +1,65 @@
+/****** The switch - the box around the slider *******/
+.switch {
+ position: relative;
+ display: inline-block;
+ width: 60px;
+ height: 34px;
+}
+/* Hide default HTML checkbox */
+.switch input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+}
+
+/* The slider */
+.slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #ccc;
+ -webkit-transition: .4s;
+ transition: .4s;
+}
+
+.slider:before {
+ position: absolute;
+ content: "";
+ height: 26px;
+ width: 26px;
+ left: 4px;
+ bottom: 4px;
+ background-color: white;
+ -webkit-transition: .4s;
+ transition: .4s;
+}
+
+input:checked + .slider {
+ background-color: #0A53BE;
+}
+
+input:focus + .slider {
+ box-shadow: 0 0 1px #0A53BE;
+}
+
+input:checked + .slider:before {
+ -webkit-transform: translateX(26px);
+ -ms-transform: translateX(26px);
+ transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+ border-radius: 34px;
+}
+
+.slider.round:before {
+ border-radius: 50%;
+}
+
/* CHAT MESSAGES */
.chat-message {
@@ -342,4 +404,8 @@ table.label-table > tbody > tr > td {
ol {
list-style-type: none;
padding-left: 0;
+}
+
+.cursor-move-sortable .ui-sortable-handle {
+ cursor: move;
}
\ No newline at end of file
diff --git a/src/Controller/EntryController.php b/src/Controller/EntryController.php
index f52b0c387c703f623be1ad3d7d0f1d5c51ae86eb..5be32ee4301efaef13cd42fc99177b7b7951b801 100644
--- a/src/Controller/EntryController.php
+++ b/src/Controller/EntryController.php
@@ -330,12 +330,59 @@ class EntryController extends AppBaseController
/**
* @Route("/{id}/reorder", name="app_entry_reorder", methods={"GET"}, options={"expose" = true})
*/
- public function reorder(Request $request, Entry $entry): Response
+ public function reorderAttributes(Request $request, Entry $entry): Response
{
- $serialized = $request->get('serialized');
-dump($serialized);die();
+ $movedId = $request->get('movedId');
+ $position = $request->get('position');
- return $this->render('entry/show.html.twig', ['id' => $entry->getId()]);
+// dump($movedId, $position);die();
+ $attributes = $entry->getAttributes();
+
+ $result = $this->moveBlock($attributes, $movedId, $position);
+
+ $entry->setAttributes($attributes);
+ $this->em->flush();
+
+ return $this->render('entry/show.html.twig', ['entry' => $entry]);
+ }
+
+// public function getBlockByIdAndParent($attrArray, $id)
+// {
+// foreach ($attrArray as $item) {
+// if (isset($item['id']) && $item['id'] == $id) {
+// return [
+// 'block' => $item,
+// 'parent' => $attrArray,
+// ];
+// } elseif (is_array($item)) {
+// $result = $this->getBlockByIdAndParent($item, $id);
+// if ($result) {
+// return $result;
+// }
+// }
+// }
+// return false;
+// }
+
+ public function moveBlock(&$attrArray, $id, $newKey)
+ {
+ foreach ($attrArray as $key => &$item) {
+ if (isset($item['id']) && $item['id'] == $id) {
+ $this->moveElement($attrArray, $key, $newKey);
+ return true;
+ } elseif (is_array($item)) {
+ $result = $this->moveBlock($item, $id, $newKey);
+ if ($result) {
+ return $result;
+ }
+ }
+ }
+ return false;
+ }
+
+ function moveElement(&$array, $fromIndex, $toIndex) {
+ $out = array_splice($array, $fromIndex, 1);
+ array_splice($array, $toIndex, 0, $out);
}
}
diff --git a/src/Manager/WiktionaryManager.php b/src/Manager/WiktionaryManager.php
index 952f7da9ea666520167c6dfb04da7174732e019d..8da6eafbae3f8e86c710bded5e3a9fc93e188220 100644
--- a/src/Manager/WiktionaryManager.php
+++ b/src/Manager/WiktionaryManager.php
@@ -159,7 +159,7 @@ class WiktionaryManager
$result = [];
foreach ($wikSenses as $id => $wikSense) {
$definition = [
- 'id' => $id,
+ 'id' => $wikSense['Definitions'][0]['id'],
'Def' => $wikSense['Definitions'][0]['definition'],
];
diff --git a/templates/entry/_entryAttributes.html.twig b/templates/entry/_entryAttributes.html.twig
index bd796838e7c1caa515ca1e97572c00dc35a7949e..59ef2f3d680964e16f1852b16e9633c05bbfa6e7 100644
--- a/templates/entry/_entryAttributes.html.twig
+++ b/templates/entry/_entryAttributes.html.twig
@@ -15,12 +15,13 @@
</h4>
</div>
<div class="ms-1 ps-4 mb-2">
- <ol class="sortable">
+ <ol id="pronunciationList" class="sortable">
+{# <ol>#}
{% for key, pronunciation in entry_manager.pronunciations(entry) %}
{### PRONUNCIATION ######### SET KEY ##########}
+ {% set pronunciationKey = '[Items][0][Sense][Pronunciations]['~key~']' %}
<li id="{{ pronunciation.id }}">
<div class="links-container">
- {% set pronunciationKey = '[Items][0][Sense][Pronunciations]['~key~']' %}
{% if pronunciation.accent is defined %}{{ pronunciation.accent }} :{% endif %}
{{ pronunciation.api }}
@@ -35,7 +36,7 @@
</div>
- <ol class="sortable">
+ <ol id="posList" class="sortable">
{% set attr = entry.attributes %}
{% for key, item in attr.Items %}
{### POS ######### SET KEY ##########}
@@ -96,40 +97,66 @@
{% endfor %}
</ol>
- <button id="serialize">Serialize</button>
</div>
<script>
$(document).ready(function(){
- $('.sortable').nestedSortable({
- handle: 'div',
- items: 'li',
- toleranceElement: '> div',
- disableParentChange: true
- });
+ initializeSortable('pronunciationList');
+ initializeSortable('posList');
+ toggleSortable();
+
+ $('#switchSortable').on('click', function () {
+ toggleSortable();
+ })
+ function toggleSortable(e) {
+ if ($('#switchSortable').is(':checked')) {
+ $('#posList').nestedSortable("enable");
+ $('#pronunciationList').nestedSortable("enable");
+ $('#entryAttributes').addClass('cursor-move-sortable');
+ } else {
+ $('#posList').nestedSortable("disable");
+ $('#pronunciationList').nestedSortable("disable");
+ $('#entryAttributes').removeClass('cursor-move-sortable');
+ }
+ }
+
+ function initializeSortable(listId) {
+ $('#'+listId).nestedSortable({
+ handle: 'div',
+ items: 'li',
+ toleranceElement: '> div',
+ disableParentChange: true,
+ stop: function (event, ui) {
+ $moved = ui.item;
+ movedId = $moved.attr('id');
+ position = $moved.prevAll().length;
+ // console.log(movedId, position);
+ updateAttributes($moved, movedId, position);
+ }
+ });
+ }
- $("#serialize").click(function(e) {
- e.preventDefault();
-console.log($('ol.sortable').nestedSortable('serialize'));
+ function updateAttributes($moved, movedId, position) {
+ var entryId = {{ entry.id }};
var $overlay = $('#overlay').show();
- var serialized = $('ol.sortable').nestedSortable('serialize');
var target = $('#entryAttributes');
- var entryId = {{ entry.id }}
- var url = Routing.generate('app_entry_reorder', {id: entryId, serialized: serialized});
-
$.ajax({
- url: url,
- method: "GET",
- data: {serialized: serialized},
+ type: "GET",
+ url: Routing.generate('app_entry_reorder', {id: entryId, movedId: movedId, position: position}),
+ cache: false,
success: function(res) {
+
target.replaceWith($(res).find('#entryAttributes'));
},
complete: function () {
$overlay.hide();
+ initializeSortable('pronunciationList');
+ initializeSortable('posList');
+ toggleSortable();
}
});
- });
+ }
});
</script>
diff --git a/templates/entry/show.html.twig b/templates/entry/show.html.twig
index 764a7a45de5d014a659230e199646cd71c798797..f5619eb9879766568d1a7d4004fe3b489ce8b141 100644
--- a/templates/entry/show.html.twig
+++ b/templates/entry/show.html.twig
@@ -41,14 +41,25 @@
<div id="tabContent" class="{{ entry.lexicon.zero ? 'tab-wiktionnary' }}">
- <div class="row">
- <div class="col-sm-6 col-xl-4">
+ <div class="row d-flex align-items-end">
+ <div class="col-lg-6 col-md-9 col-xl-4">
{% include "entry/_entryLabels.html.twig" %}
</div>
+ {% if not entry.lexicon.zero %}
+ <div class="col-lg-6 col-md-3 text-end" style="margin-bottom: 1rem;">
+ <h4 title="{{ "Activer le déplacement des blocs pour les réordonner"|trans }}">
+ {{ "Réordonner"|trans }}
+ <label class="switch">
+ <input id="switchSortable" type="checkbox">
+ <span class="slider round"></span>
+ </label>
+ </h4>
+ </div>
+ {% endif %}
</div>
<div class="row">
- <div class="col-sm-9">
+ <div class="col-lg-9">
{% include "entry/_entryAttributes.html.twig" %}
</div>
</div>