joomla 3 e bootstrap: JHtml::_('bootstrap.modal', 'myModal', $param);

[alexdi]

Considerando le novità introdotte da Joomla3 , mi sono messo a curiosare sulle nuove librerire per gestire gli script java di twitter bootstrap (...libraries/cms/html/bootstrap.php).


Utilizzando il seguente codice per inizializzare un dialogo modal

Codice: [Seleziona]


<?php 
$param['show'] = false;
JHtml::_('bootstrap.modal', 'myModal', $param); ?>
<-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  <>
  <div class="modal-body">
    <p>One fine body…</p>
  <>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  <>
<>


riscontro un comportamento anomalo e cioè, al caricamento della pagina, si apre anche il dialogo, cosa che non dovrebbe avvenire visto che su $param imposto show a false.


Infatti, la funzione modal presente in bootstrap.php , ci mette sempre true.

Codice: [Seleziona]

<?php
public static function modal($selector = 'modal', $params = array())
{
$sig = md5(serialize(array($selector, $params)));
if (!isset(self::$loaded[__METHOD__][$sig]))
{
// Include Bootstrap framework
self::framework();


// Setup options object
$opt['backdrop'] = (isset($params['backdrop']) && ($params['backdrop'])) ? (boolean) $params['backdrop'] : true;
$opt['keyboard'] = (isset($params['keyboard']) && ($params['keyboard'])) ? (boolean) $params['keyboard'] : true;
$opt['show']     = (isset($params['show']) && ($params['show'])) ? (boolean) $params['show'] : true;
$opt['remote']   = (isset($params['remote']) && ($params['remote'])) ? (boolean) $params['remote'] : '';


$options = JHtml::getJSObject($opt);


// Attach the modal to document
JFactory::getDocument()->addScriptDeclaration(
"(function($){
$('#$selector').modal($options);
})(jQuery);"
);


// Set static array
self::$loaded[__METHOD__][$sig] = true;
}


return;
}?>

quindi la parte incriminata è:
$opt['show']     = (isset($params['show']) && ($params['show'])) ? (boolean) $params['show'] : true;


A parte il fatto che ho sempre avuto un pò di difficolta con questi costrutti il else abbreviati, cosa devo scrivere per porre questo benedetto parametro $opt['show'] a false ?


p.s. ho notato che su installazione base di joomla 3 , JHtml::_('bootstrap.modal...) non viene mai utilizzato con parametri......

[mneri]

A giudicare dai commenti d'intestazione del metodo, sembra un errore. Infatti ci dice di passare parametri booleani:

Codice: [Seleziona]

     /**
     * Add javascript support for Bootstrap modals
     *
     * @param   string  $selector  The ID selector for the modal.
     * @param   array   $params    An array of options for the modal.
     *                             Options for the modal can be:
     *                             - backdrop  boolean  Includes a modal-backdrop element.
     *                             - keyboard  boolean  Closes the modal when escape key is pressed.
     *                             - show      boolean  Shows the modal when initialized.
     *                             - remote    string   An optional remote URL to load
     *
     * @return  void
     *
     * @since   3.0
     */

Ma le righe le seguenti righe restituiscono sempre true (sia con parametro true, che con parametro false).

Codice: [Seleziona]

$opt['backdrop'] = (isset($params['backdrop']) && ($params['backdrop'])) ? (boolean) $params['backdrop'] : true;
$opt['keyboard'] = (isset($params['keyboard']) && ($params['keyboard'])) ? (boolean) $params['keyboard'] : true;
$opt['show']     = (isset($params['show']) && ($params['show'])) ? (boolean) $params['show'] : true;
$opt['remote']   = (isset($params['remote']) && ($params['remote'])) ? (boolean) $params['remote'] : '';

Non solo: restituiscono true anche con parametri di tipo stringa e numerici, qualunque sia il valore.

Ho segnalato il bug qui: http://joomlacode.org/gf/project/joomla/tracker/?action=TrackerItemEdit&tracker_item_id=29432

[alexdi]

Infatti anche a me era venuto il sospetto.


Hai fatto bene a segnalarlo anche perchè vedo che l' hanno confermato ed hanno anche aggiunto che è un pò tutta la classe che ha il problema (infatti riscontro comportamenti "strani" anche con tooltip).


Grazie 1000!

[alexdi]

Molto bene ! 


E' già presente la patch. Appena ho un pò di tempo la provo. [size=78%]https://github.com/mbabker/joomla-cms/compare/JHtmlBootstrap.diff[/size]

[alexdi]

Dunque: la patch ha in effetti sistemato il problema della restituzione dei parametri sempre a true. Ora i parametri vengono gestiti regolarmente.


Però, l' unico modo per non far comparire il modal dialog all' apertura della pagina è quello di utilizzare class="modal hide" nel DIV che contiene il dialogo.

[mneri]

Sbirciando ancora un pochino nel codice sorgente di JHtmlBootstrap, ho trovato il metodo renderModal(). Al suo interno renderModal() richiama modal(). Dovresti usare renderModal() poiché costruisce anche i tag HTML necessari.

renderModal() aggiunge anche la classe HTML hide.

Codice: [Seleziona]

$html = "<div class=\"modal hide fade\" id=\"" . $selector . "\">\n";

[alexdi]

esatto mneri.


Verificando anche gli esempi bootstrap , ho notato che pure li utilizzano "modal hide" nel class, per non fare apparire il modal al caricamento della pagina.


renderModal l' ho provato ma non mi soddisfa, mi risulta più ostico da personalizzare e pertanto molto meglio utilizzare modal che richiama un template per il dialog fatto in html con class="modal hide" sul DIV che lo contiene.


Ad ogni modo, c'è qualch' osa che non gira nel verso giusto. Uno si aspetta un certo tipo di comportamento  utilizzando JHtml::_(bootrstarp.modal,  ......) con gli opportuni parametri, ma ciò non avviene.


Alla fine, visionando il codice html della pagina view del componente che viene generata, mi fa pensare che il problema sia dovuto al fatto che, la funzione che richiama l' inizializzazione de dialogo modal, non è dentro alla Jquery(document).ready o meglio, Jquery(document).ready non la vedo da nessuna parte.


Pertanto, se nel DIV HTML che contiene il codice utilizzato per generare il dialog modal, viene inserito  class="modal", il dialog compare al caricamento della pagina, anche con show=false nei parametri inviati tramite JHtml::_(bootsrat.modal).