Merge pull request #4020 from GeotrekCE/feat_add_tools_for_flatpages_…

…content

Add styling and embedding tools for FlatPages content (refs  #3921, #3922, #4019)

docs/changelog.rst

@@ -8,14 +8,15 @@ CHANGELOG
 **Features**
 
 - Add new menu headers and flat pages with tree hierarchies
+- Add styling and embedding tools for FlatPages content (refs #3921, #3922, #4019)
 
 **Bug fixes**
 
 - Fix API crash when using an SVG file for information desks (fixes #3860)
 
 **Breaking changes**
 
-- This version brings a lot of changes to flat pages and the corresponding API endpoints. In order not to break your Geotrek-rando website it is mandatory to update first Geotrek-rando to XXX before upgrading your Geotrek-admin to this version. Note that Geotrek-rando handles the upgrade smoothly and can handle both old and new flat pages.
+- This version brings a lot of changes to flat pages and the corresponding API endpoints. In order not to break your Geotrek-rando website it is mandatory to update first Geotrek-rando to 3.19.0 before upgrading your Geotrek-admin to this version. Note that Geotrek-rando handles the upgrade smoothly and can handle both old and new flat pages.
 - Geotrek-rando v2 support is deprecated, `sync_rando` command and Sync rando menu view are removed (#3752)
 
 **Hot fix**

docs/usage/static-pages.rst

@@ -74,18 +74,52 @@ Les champs Titre, Publiée et Contenu peuvent recevoir une valeur différente po
 
     Ces champs sont une alternative au glisser-déposer sur la liste des Pages Statiques et permettent de déplacer les pages dans l'arborescence (voir `Arborescence des pages statiques`_).
 
-**Mise en forme et médias**
+Mise en forme et médias
+-----------------------
 
 Le champ contenu expose un éditeur de texte riche (TinyMCE) permettant d'ajouter de la mise en forme et des médias dans le contenu de la page.
 
 - mise en forme du texte : titres, styles du texte, couleur du texte
 - insertion de listes
+- encart "Information"
+- lien sous forme de bouton
+- citation
 
 Médias :
 
 - insérer une image
 - insérer une vidéo YouTube
 - insérer un lien vers une autre page
+- encart de suggestion de contenu Geotrek
+
+Insérer une image
+-----------------
+
+L'outil *Insérer/modifier* une image permet d'insérer une image dans le contenu. Les champs suivants sont à renseigner :
+
+- Source
+- Description alternative : non-affichée, pour l'accessibilité et les formes de consultation alternatives du contenu
+- Largeur et Hauteur de présentation de l'image en pixels
+- checkbox Afficher le sous-titrage insère une zone de texte collée à l'image pour présenter un titre (le titre est à saisir dans le contenu une fois le formulaire validé)
+
+Insérer des suggestions de contenu Geotrek
+------------------------------------------
+
+Avec l'outil *Suggestions*, les champs suivants sont à renseigner :
+
+- le type de contenu (itinéraires, contenu touristique, événements ou site d'activités de plein nature)
+- les identifiants des contenus (séparés par des virgules. Par exemple : 12,8,73)
+- un titre pour l'encart de suggestions
+
+Après la validation du formulaire une zone récapitulant les informations saisies sous forme textuelle est placée dans le contenu de la page. Le site portail enrichira la présentation des suggestions avec les titres des contenus suggérés à la place des identifiants et les images associées.
+
+Vérifier la mise en page du contenu
+-----------------------------------
+
+Les outils suivants sont disponibles :
+
+- *Afficher les blocs* : permet de contrôler finement la séparation du contenu en blocs (pratique pour les paragraphes de texte)
+- *Code source* : affiche et permet de modifier directement le contenu au format HTML (pour les utilisateurs avertis)
 
 Publier une page
 ================

geotrek/flatpages/forms.py

@@ -1,6 +1,6 @@
 from django.conf import settings
 from django.core import validators
-from tinymce.widgets import TinyMCE
+from geotrek.flatpages.widgets import FlatPageTinyMCE
 
 from treebeard.forms import MoveNodeForm
 
@@ -26,7 +26,7 @@ def __init__(self, *args, **kwargs):
         # are passed along as they contain modeltranslation CSS classes.
         for fieldname, formfield in self.fields.items():
             if fieldname.startswith('content_'):
-                self.fields[fieldname].widget = TinyMCE(attrs=self.fields[fieldname].widget.attrs)
+                self.fields[fieldname].widget = FlatPageTinyMCE(attrs=self.fields[fieldname].widget.attrs)
 
         if self.instance.pk:
             page = Attachment.objects.filter(

geotrek/flatpages/static/flatpages/tinymce/css/flatpage_custom_formats.css

@@ -0,0 +1,51 @@
+h1, h2, h3 {
+    clear: both;
+}
+
+.align-left {
+    float: left;
+    margin-right: 1rem;
+    margin-bottom: 1rem;
+}
+
+.align-right {
+    float: right;
+    margin-left: 1rem;
+    margin-bottom: 1rem;
+}
+
+.button-link {
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    border-radius: 1rem;
+    border: 1px solid;
+    text-decoration: none;
+}
+
+.information {
+    clear: both;
+    padding: 1rem;
+    background: lightgray;
+}
+
+.suggestions {
+    clear: both;
+    display: block !important;
+    background: lightgreen;
+    color: green;
+    padding: 2rem;
+    border-radius: 1rem;
+    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    clear: both;
+}
+
+.suggestions::before {
+    content: '' attr(data-type) ' suggestions : ' attr(data-label) '';
+    font-size: 1.2rem;
+    display: block;
+    margin-bottom: .3rem;
+}
+
+.suggestions::after {
+    content: 'Identifiants : ' attr(data-ids) '';
+}

geotrek/flatpages/static/flatpages/tinymce/js/additional_tinymce_plugins.js

@@ -0,0 +1,129 @@
+/*
+  Note: We have included the plugin in the same JavaScript file as the TinyMCE
+  instance for display purposes only. Tiny recommends not maintaining the plugin
+  with the TinyMCE instance and using the `external_plugins` option.
+*/
+
+document.addEventListener("DOMContentLoaded", function () {
+    tinymce.PluginManager.add('button-link', function (editor, url) {
+        var openDialogButtonLink = function () {
+            return editor.windowManager.open({
+                title: 'Lien bouton',
+                body: {
+                    type: 'panel',
+                    items: [
+                        {
+                            type: 'input',
+                            name: 'label',
+                            label: 'Intitulé',
+                        },
+                        {
+                            type: 'input',
+                            name: 'link',
+                            label: 'Lien',
+                        },
+                        {
+                            type: 'checkbox',
+                            name: 'target',
+                            label: 'Ouvrir dans un nouvel onglet'
+                        }
+                    ]
+                },
+                buttons: [
+                    {
+                        type: 'cancel',
+                        text: 'Close'
+                    },
+                    {
+                        type: 'submit',
+                        text: 'Save',
+                        primary: true
+                    }
+                ],
+                initialData: {
+                    label: tinymce.activeEditor.selection.getContent(),
+                },
+                onSubmit: function (api) {
+                    var data = api.getData();
+                    if (!data.link || !data.label) {
+                        return;
+                    }
+                    var target = data.target ? ' target="_blank" rel="noopener noreferrer" ' : '';
+                    editor.insertContent('<a class="button-link"' + target + 'href="' + data.link + '">' + data.label + '</a>');
+                    api.close();
+                }
+            });
+        };
+
+        var openDialogSuggestion = function () {
+            return editor.windowManager.open({
+                title: 'Suggestions',
+                body: {
+                    type: 'panel',
+                    items: [
+                        {
+                            type: 'listbox',
+                            name: 'type',
+                            label: 'Type',
+                            items: [
+                                {value: 'trek', text: 'Trek'},
+                                {value: 'touristicContent', text: 'Touristic content'},
+                                {value: 'touristicEvent', text: 'Touristic event'},
+                                {value: 'outdoorSite', text: 'Outdoor site'},
+                            ]
+                        },
+                        {
+                            type: 'input',
+                            name: 'label',
+                            label: "Intitulé de l'encart",
+                        },
+                        {
+                            type: 'input',
+                            name: 'ids',
+                            label: "Liste d'ID (séparés par des virgules)",
+                        }
+                    ]
+                },
+                buttons: [
+                    {
+                        type: 'cancel',
+                        text: 'Close'
+                    },
+                    {
+                        type: 'submit',
+                        text: 'Save',
+                        primary: true
+                    }
+                ],
+                initialData: {
+                    label: tinymce.activeEditor.selection.getContent(),
+                },
+                onSubmit: function (api) {
+                    var data = api.getData();
+                    if (!data.type || !data.ids) {
+                        return;
+                    }
+                    editor.insertContent('<div class="suggestions" data-label="' + data.label + '" data-type="' + data.type + '" data-ids="' + data.ids + '" style="display: none" contenteditable="false"></div>');
+                    api.close();
+                }
+            });
+        };
+        /* Add a button that opens a window */
+        editor.ui.registry.addButton('button-link', {
+            text: 'Lien bouton',
+            onAction: function () {
+                /* Open window */
+                openDialogButtonLink();
+            }
+        });
+        /* Add a button that opens a window */
+        editor.ui.registry.addButton('suggestions', {
+            text: 'Suggestions',
+            onAction: function () {
+                /* Open window */
+                openDialogSuggestion();
+            }
+        });
+    })
+
+}); // end of document DOMContentLoaded event handler