Message flash ne fonctionne pas dans octobercms

Question

Je suis en train de montrer un message simple flash comme démontré here avec le balisage suivant:

<p data-control="flash-message" data-interval="5" class="success"> 
    This message is created from a static element. It will go away in 5 seconds. 
</p> 

J'attends un message flash à apparaître après la page est chargée, mais je suis seulement voir un texte statique montrant le message. Il semble donc que certains javascript ou css n'ont pas été correctement chargés. J'ai vérifié avec firebug et je reconnais que les fichiers jquery.js, bootstrap.js, app.js, framework.js et framework.extras.js ont été chargés. Y a-t-il autre chose que je dois faire pour que le message flash apparaisse?

Answer 1

These docs se réfèrent au backend UI (qui ne se fait pas tout à fait évident sur cette page, je l'avoue, et d'autres ont été similarly confused par ce sujet). Il semble que vous essayez d'utiliser ceci dans une page frontend.

Alors que le framework.js et framework-extras.js semblent être également utilisés dans backend et frontend (si la directive {% framework %} ou {%framework extras %} est placée de manière appropriée dans le modèle, pour le frontend), exposant même AJAX API dans les deux mondes, il y a Beaucoup de CSS et JS pour l'interface utilisateur backend que vous n'accédez pas normalement dans le frontend, le volume étant contenu dans les fichiers modules/system/assets/ui/storm-min.js et modules/system/assets/ui/storm.css sous la racine d'installation d'octobre.

Je pense que l'importance peu de CSS pertinent est ici ce (de modules/system/assets/ui/storm.css):

#layout-canvas .flash-message{display:none} 
.flash-message{position:fixed;width:500px;left:50%;top:13px;margin-left:-250px;color:#ffffff;font-size:14px;padding:10px 30px 10px 15px;z-index:10300;word-wrap:break-word;text-shadow:0 -1px 0px rgba(0,0,0,0.15);text-align:center;-webkit-box-shadow:0 1px 6px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.24);box-shadow:0 1px 6px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.24);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px} 
.flash-message.fade{opacity:0;filter:alpha(opacity=0);-webkit-transition:all 0.5s,width 0s;transition:all 0.5s,width 0s;-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9)} 
.flash-message.fade.in{opacity:1;filter:alpha(opacity=100);-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)} 
.flash-message.success{background:#8da85e} 
.flash-message.error{background:#cc3300} 
.flash-message.warning{background:#f0ad4e} 
.flash-message.info{background:#5fb6f5} 
.flash-message button{float:none;position:absolute;right:10px;top:8px;color:white;outline:none} 
.flash-message button:hover{color:white} 
.flash-message.static{position:static !important;width:auto !important;display:block !important;margin-left:0 !important;-webkit-box-shadow:none;box-shadow:none} 

La logique du message flash qui est exécuté sur la charge de page doit être quelque part dans le modules/system/assets/ui/storm-min.js, qui, heureusement aussi existe en version non-minified modules/system/assets/ui/storm.js où vous pouvez trouver la ligne

=require js/flashmessage.js 

et de regarder là-bas plus loin dans la référence modules/system/assets/ui/js/flashmessage.js vous trouverez ces lignes vers la fin:

// FLASH MESSAGE DATA-API 
// =============== 

$(document).render(function(){ 
    $('[data-control=flash-message]').each(function(){ 
     $.oc.flashMsg($(this).data(), this) 
    }) 
}) 

Voila! Donc, vous pouvez simplement inclure l'ensemble storm.css et storm.js dans votre page frontend (j'ai essayé, ça marche - bien que le message soit visible au chargement avant d'être "flashé" et stylé de façon appropriée, donc vous devez faire quelques ajustements), ou à partir de là, vous pourriez être en mesure de déterminer les parties du code que vous pourriez avoir besoin d'extraire et d'ajuster pour le rendre opérationnel dans le frontend. Mais je pense qu'il serait plus sage d'écrire des choses pour vous-même pour votre utilisation frontend au lieu d'inclure de grands morceaux de code qui ont été conçus pour être intégrés dans l'interface utilisateur backend.

(Il semble que l'ensemble des choses de JQuery $.oc.[...] est étendu pour l'utilisation de backend, mais pas totalement sûr à ce sujet.)