Implémenter un modal lors de la modification d'un lien de menu vers un article

[ghazal]

Salut,
quand on veut modifier un lien de menu déjà créé vers un article, on peut modifier directement l'article via le bouton Modifier (Edit en GB) :


En cliquant sur Modifier, on ouvre une nouvelle fenêtre, ou une nouvelle tab (selon les réglages de votre navigateur) via un target="_blank".

A mon avis, le bouton Modifier devrait ouvrir une fenêtre modale vers l'article à modifier, on modifie, on enregistre, et voila.
Plus simple à décrire qu'à mettre en place.
Mon but ici serait de trouver une solution jouable et de la proposer sur Github.

[ced1870]

Re : Implémenter un modal lors de la modification d'un lien de menu vers un article

salut
cool, on va jouer un peu

on est d'accord qu'on édite le fichier

administrator\components\com_content\models\fields \modal\article.php

tout simplement avec notre bon vieux Squeezebox vers l.150 :

$html[] = '<a class="modal btn hasTooltip' . ($value ? '' : ' hidden')
				. '" href="index.php?option=com_content&layout=modal&tmpl=component&task=article.edit&id=' . $value . '" rel="{handler: \'iframe\', size: {x: 800, y: 600}}" title="'
				. JHtml::tooltipText('COM_CONTENT_EDIT_ARTICLE') . '" ><span class="icon-edit"></span>' . JText::_('JACTION_EDIT') . '</a>';

- - - Mise à jour - - -

le souci après est de gérer les actions des boutons de la vue modale d'edition pour refermer la box.
Je regarde aussi pour aller vers une modal BS, mais c'est déjà un début de piste

[ced1870]

Re : Implémenter un modal lors de la modification d'un lien de menu vers un article

voilà mes modifs

// The current article display field.
        $html[] = '<span class="input-append">';
        $html[] = '<input type="text" class="input-medium" id="' . $this->id . '_name" value="' . $title . '" disabled="disabled" size="35" />';
        $html[] = '<a href="#modalArticle' . $this->id . '" class="btn hasTooltip" role="button"  data-toggle="modal" title="'
            . JHtml::tooltipText('COM_CONTENT_CHANGE_ARTICLE') . '">'
            . '<span class="icon-file"></span> '
            . JText::_('JSELECT') . '</a>';

                // Edit article button
        if ($allowEdit)
        {
            $html[] = '<a class="btn hasTooltip' . ($value ? '' : ' hidden')
                . '" href="#modalEditArticle' . $value . '" data-toggle="modal" title="'
                . JHtml::tooltipText('COM_CONTENT_EDIT_ARTICLE') . '" ><span class="icon-edit"></span>' . JText::_('JACTION_EDIT') . '</a>';

            $html[] = JHtml::_(
                'bootstrap.renderModal',
                'modalEditArticle' . $value,
                array(
                    'url' => 'index.php?option=com_content&layout=modal&tmpl=component&task=article.edit&id=' . $value . '&amp;tmpl=component',
                    'title' => JText::_('JACTION_EDIT'),
                    'width' => '800px',
                    'height' => '300px',
                    'footer' => '<button class="btn" data-dismiss="modal" aria-hidden="true">'
                        . JText::_("JLIB_HTML_BEHAVIOR_CLOSE") . '</button>'
                )
            );

            $script[] = 'jQuery(document).ready(function($) {';
            $script[] = '    $("#modalEditArticle' . $value . '").on("show", function() {';
            $script[] = '        $("body").addClass("modal-open");';
            $script[] = '    var modalBody = $(this).find(".modal-body");';
            $script[] = '    modalBody.find("iframe").remove();';
            $script[] = '    modalBody.prepend(\'<iframe class="iframe" src="index.php?option=com_content&layout=modal&tmpl=component&task=article.edit&id=' . $value . '" height="300px" width="800px"></iframe>\');';
            $script[] = '    }).on("hide", function () {';
            $script[] = '        $("body").removeClass("modal-open");';
            $script[] = '    });';
            $script[] = '});';
        } 

et la ligne

// Add the script to the document head.
        JFactory::getDocument()->addScriptDeclaration(implode("\n", $script)); 

à déplacer juste avant

return implode("\n", $html); 

ci-joint le brouillon de mon fichier

https://dl.dropboxusercontent.com/u/8539690/article.php

PS : dans mon fichier y a 3 boutons, c'est le dernier qui est en modal BS

[ced1870]

Re : Implémenter un modal lors de la modification d'un lien de menu vers un article

PPS : perso j'aime bien pouvoir mettre la modale en fullscreen, j'ai ajouté un bouton dans mes derniers développements, ça permet d'avoir une meilleure visibilité. Mais si c'est pour mettre dans le core de Joomla!, pas sur qu'ils soient très chaud pour ce genre de choses

[ghazal]

Re : Implémenter un modal lors de la modification d'un lien de menu vers un article

Pas encore testé.
J'y vais de ce pas.
Mais :

perso j'aime bien pouvoir mettre la modale en fullscreen

Super bonne idée.
Dans l'idéal, je verrai un genre overlay.
Juste un exemple, pas le script à adapter :

http://codepen.io/chrisdothtml/full/EaBOLq/

[ced1870]

Re : Implémenter un modal lors de la modification d'un lien de menu vers un article

Dans l'idéal, je verrai un genre overlay.

si tu parles de l'effet lorsque tu cliques sur "sign in" dans ton lien, ça voudrait dire revoir complètement la modal BS
je prépare un truc fullscreen à ma sauce et je te fais signe

[ghazal]

Re : Implémenter un modal lors de la modification d'un lien de menu vers un article

Bon, les 3 boutons fonctionnent nickel.
Mais le 3e est le plus logique du point de vue utilisateur, à mon avis.
A cause du bouton "Fermer" pour fermer le modal.

[ghazal]

Re : Implémenter un modal lors de la modification d'un lien de menu vers un article

si tu parles de l'effet lorsque tu cliques sur "sign in" dans ton lien, ça voudrait dire revoir complètement la modal BS

Absolument.
J'ai bien écrit "dans l'idéal"....

je prépare un truc fullscreen à ma sauce et je te fais signe

Yo !
J'attends avec impatience.

[ced1870]

Re : Implémenter un modal lors de la modification d'un lien de menu vers un article

voilà j'ai mis à jour le fichier sur ma dropbox, tu peux le récupérer.
Côté code regardes pas trop le bordel j'ai mis les scripts et css à l'arrache hein !

dis moi ce que tu en penses

[ced1870]

Re : Implémenter un modal lors de la modification d'un lien de menu vers un article

t'es mourue ?

[ghazal]

Re : Implémenter un modal lors de la modification d'un lien de menu vers un article

Je suis pas mourue ... mais je n'ai reçu aucun message sur ce fil ... va savoir ..

Mais j'ai fait la modif sur la version "staging", sur la 2e mouture d'article.php

https://github.com/ghazal/joomla-cms

Pour voir les modifs, clique sur Compare - en haut, à droite de :
This branch is 1 commit ahead of joomla:staging.

ou

https://github.com/joomla/joomla-cms/compare/staging...ghazal:staging

En installant le package (avec la modif 2), ca a l'air de rouler nickel.
Sauf qu'on ne peut pas proposer tel que, il faut choisir entre les 3 Edit
Le 3e me va, mais ce n'est pas évident que ce soit accepté.
Qui ne tente rien n'a rien, on propose, on verra bien.

Dès que je reçois ton accord, je modifie et annule les diverses propals (les 3 Edit) pour n'en garder qu'une.

[ced1870]

Re : Implémenter un modal lors de la modification d'un lien de menu vers un article

ah ben mince, moi qui était au taquet

il faut choisir entre les 3 Edit

en fait il ne faut garder que le 3e, j'ai laissé les autres
- 1er : lien actuel
- 2e : test avec squeezebox
- 3e : test avec BS modal

Le truc qui ne marche pas c'est les boutons qui sont dans la vue modale, si tu fais enregistrer ou autre ça ne ferme pas la modale. Je pense qu'il y a moyen d'améliorer

Tu as tester le fullscreen au fait ??

- - - Mise à jour - - -

https://github.com/joomla/joomla-cms...ghazal:staging

>> je vois que tu as laissé l'appel JS et CSS à l'arrache lol

en fait tu as laissé tout le code pourri que j'avais mis en commenté !

[ghazal]

Re : Implémenter un modal lors de la modification d'un lien de menu vers un article

Le truc qui ne marche pas c'est les boutons qui sont dans la vue modale, si tu fais enregistrer ou autre ça ne ferme pas la modale. Je pense qu'il y a moyen d'améliorer
Tu as tester le fullscreen au fait ??

Absolument.
Ca réglerait le pb de penser à fermer le fullscreen (testé, of course) par le Close en bas à droite, une fois l'article modifié.
C'est sur ce genre de détail que ca coincera au cours des tests.

Cela dit, point positif, quand on enregistre dans la modal, pas besoin de ré-enregistrer dans la fenêtre du lien de menu (par Save).
ce que les users feront de toutes façons, mais bon, c'est fait.

PS : as-tu un compte Github au fait ?
Ils ont sorti un soft pour Windows :

https://desktop.github.com/

Celui pour Mac facilite grandement les choses, j'imagine que pour Windows, c'est aussi le cas.

[ghazal]

Re : Implémenter un modal lors de la modification d'un lien de menu vers un article

en fait tu as laissé tout le code pourri que j'avais mis en commenté !

Oui, j'ai fait exprès pour qu'on soit raccord, pour l'instant, c'est juste un doc de travail.

[ced1870]

Re : Implémenter un modal lors de la modification d'un lien de menu vers un article

as-tu un compte Github au fait

heu oui sous ced1807 ... mais j'utilise pas parce que trop chiant pour moi
j'ai fait une fois une soumission pour le JFilterInput et à cause d'un espace ou un retour chariot c'était refusé. J'ai passé plus d'une heure à essayer d'éditer ma modif sans succès... un autre l'a fait à ma place au final

faudra que j'essaie parce que ça me tente parfois de soumettre du code, mais bon ...