From cdb77b15021dc9a723d524369ccdb68d6df60c6e Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 18 Jul 2022 20:22:07 +0200
Subject: [PATCH] wip #4209 @1

---
 .../fields/fluidbook_composition.blade.php    | 150 +++++++++++++++++-
 1 file changed, 146 insertions(+), 4 deletions(-)

diff --git a/resources/views/fields/fluidbook_composition.blade.php b/resources/views/fields/fluidbook_composition.blade.php
index 996a11e77..49e367f66 100644
--- a/resources/views/fields/fluidbook_composition.blade.php
+++ b/resources/views/fields/fluidbook_composition.blade.php
@@ -14,11 +14,13 @@
                     var composition = $('#composition_pages').get(0);
 
                     window.compositionSortable = new Sortable(composition, {
+                        scroll: true,
                         multiDrag: true,
                         selectedClass: 'selected',
                         fallbackTolerance: 3,
                         animation: 150,
                         multiDragKey: 'CTRL',
+                        avoidImplicitDeselect: true,
                         onSort: function (e) {
                             updateComposition();
                         }
@@ -29,9 +31,7 @@
                         if (!compositionIsActive()) {
                             return true;
                         }
-                        $(composition).find('.page').each(function () {
-                            Sortable.utils.select(this);
-                        });
+                        compositionSelectAll();
                         return false;
                     });
 
@@ -39,9 +39,33 @@
                         if (!compositionIsActive()) {
                             return true;
                         }
-                        $(composition).find('.page.selected').remove();
+                        compositionDeleteSelection();
                         return false;
                     });
+
+
+                    $.contextMenu({
+                        selector: '#composition_pages .page',
+                        build: function ($triggerElement, e) {
+                            if (!$($triggerElement).is('.selected')) {
+                                compositionDeselectAll();
+                                Sortable.utils.select($($triggerElement).get(0));
+                            }
+
+                            var res = {
+                                callback: function () {
+
+                                }
+                            };
+                            if ($("#composition_pages .page.selected").length <= 1) {
+                                res.items = compositionContextSimple();
+                            } else {
+                                res.items = compositionContextMulti();
+                            }
+                            return res;
+                        },
+                    });
+
                 }
 
                 function updateComposition() {
@@ -57,6 +81,30 @@
                     $('input[name="page_numbers"]').val(numbers.join(','));
                 }
 
+                function compositionSelectAll() {
+                    $(".page").each(function () {
+                        Sortable.utils.select(this);
+                    });
+                }
+
+
+                function compositionDeselectAll() {
+                    $(".page").each(function () {
+                        Sortable.utils.deselect(this);
+                    });
+                }
+
+                function compositionDeleteSelection() {
+                    $("#composition_pages .page.selected").each(function () {
+                        compositionDeletePage(this);
+                    });
+                }
+
+                function compositionDeletePage(page) {
+                    Sortable.utils.deselect($(page).get(0));
+                    $(page).remove();
+                }
+
                 function compositionIsActive() {
                     return $("#composition_pages .page.selected").length > 0;
                 }
@@ -65,6 +113,80 @@
                     $("#composition_pages").append('<div class="page" data-id="[' + document_id + ',' + document_page + ']"><img src="/fluidbook-publication/docs/' + document_id + '/thumb_' + document_page + '.jpg" /><span>' + pageNumber + '</span></div>');
                 }
 
+                function compositionContextMulti() {
+                    return {
+                        selectall: {
+                            name: "{{__('Tout sélectionner')}}",
+                            callback: function () {
+                                compositionSelectAll()
+                            },
+                        },
+                        sep1: "---------",
+                        deleteSelection: {
+                            name: "{{__('Supprimer la selection')}}",
+                            callback: function (key, opt, e) {
+                                compositionDeleteSelection();
+                            },
+                        },
+                        replaceSelection: {
+                            name: "{{__('Remplacer les pages de la sélection')}}",
+                            callback: function () {
+
+                            }
+                        },
+                    };
+                }
+
+                function compositionContextSimple() {
+                    return {
+                        selectall: {
+                            name: "{{__('Tout sélectionner')}}",
+                            callback: function () {
+                                compositionSelectAll()
+                            },
+                        },
+                        sep1: "---------",
+                        deleteCurrent: {
+                            name: "{{__('Supprimer cette page')}}",
+                            callback: function (key, opt, e) {
+                                compositionDeletePage(opt.$trigger[0]);
+                            },
+                        },
+                        sep2: "---------",
+                        insertBefore: {
+                            name: "{{__('Insérer des pages avant')}}",
+                            callback: function () {
+
+                            }
+                        },
+                        insertAfter: {
+                            name: "{{__('Insérer des pages après cette page')}}",
+                            callback: function () {
+
+                            }
+                        },
+                        sep3: "---------",
+                        nonum:{
+                            name:"{{__('Pas de numérotation à partir de cette page')}}",
+                            callback:function(){
+
+                            },
+                        },
+                        decnum:{
+                            name:"{{__("Numérotation décimale à partir de cette page")}}",
+                            callback:function(){
+
+                            },
+                        },
+                        romannum:{
+                            name:"{{__("Numérotation romaine à partir de cette page")}}",
+                            callback:function(){
+
+                            },
+                        }
+                    }
+                }
+
                 initPages();
             });
         </script>
@@ -74,9 +196,19 @@
         <script src="https://cdnjs.cloudflare.com/ajax/libs/keypress/2.1.5/keypress.min.js"
                 integrity="sha512-JjqUcblrwIZTQBPL/azOhVHwq5uaeXkKzq7da3JZEP14Zg926vZZVhRhBBi+L2pWYquZ6r5P8OZYDYgOChtkOw=="
                 crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.9.2/jquery.contextMenu.min.js"
+                integrity="sha512-kvg/Lknti7OoAw0GqMBP8B+7cGHvp4M9O9V6nAYG91FZVDMW3Xkkq5qrdMhrXiawahqU7IZ5CNsY/wWy1PpGTQ=="
+                crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.9.2/jquery.ui.position.min.js"
+                integrity="sha512-878jmOO2JNhN+hi1+jVWRBv1yNB7sVFanp2gA1bG++XFKNj4camtC1IyNi/VQEhM2tIbne9tpXD4xaPC4i4Wtg=="
+                crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     @endpush
 
     @push('crud_fields_styles')
+        <link rel="stylesheet"
+              href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.9.2/jquery.contextMenu.min.css"
+              integrity="sha512-SWjZLElR5l3FxoO9Bt9Dy3plCWlBi1Mc9/OlojDPwryZxO0ydpZgvXMLhV6jdEyULGNWjKgZWiX/AMzIvZ4JuA=="
+              crossorigin="anonymous" referrerpolicy="no-referrer"/>
         <style>
             #composition {
                 padding: 0 10px;
@@ -117,7 +249,17 @@
                 box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
 
             }
+
+            .context-menu-list {
+                box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
+                border: 0;
+            }
+
+            .context-menu-item.context-menu-hover {
+                background-color: #467fcf;
+            }
         </style>
+
     @endpush
 @endif
 <div id="composition">
-- 
2.39.5