Skip to content
Snippets Groups Projects
Commit b76dd2cf authored by Pierre Fleutot's avatar Pierre Fleutot
Browse files

Fin réordonnement des blocs par glisser déposer

parent 6687d356
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
public/assets/css/app.css
+ 66
− 0
View file @ b76dd2cf
/****** 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
src/Controller/EntryController.php
+ 51
− 4
View file @ b76dd2cf
......@@ -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);
}
}
src/Manager/WiktionaryManager.php
+ 1
− 1
View file @ b76dd2cf
......@@ -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'],
];
......
templates/entry/_entryAttributes.html.twig
+ 48
− 21
View file @ b76dd2cf
......@@ -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>
......
templates/entry/show.html.twig
+ 14
− 3
View file @ b76dd2cf
......@@ -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>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment