Pages enfant
  • Retailler automatiquement les canaux iFrame pour éviter les doubles ascenceurs

Comparaison des versions

Légende

  • Ces lignes ont été ajoutées. Ce mot a été ajouté.
  • Ces lignes ont été supprimées. Ce mot a été supprimé.
  • La mise en forme a été modifiée.
Commentaire: Migrated to Confluence 5.3

...

Retailler

...

automatiquement

...

les

...

canaux

...

iFrame

...

pour éviter les doubles ascenceurs

Pour des raisons de confort pour l'utilisateur, on retaille les canaux de façon à supprimer les doubles assenceurs. Cette page présente une méthode possible pour les applications PHP.

Pour d'autres solutions (expliquées pour uportal 3.2), voir Retaillage d'iframe.

Version concernée :

uPortal-esup et esupdev 2.6 versions ALM et DLM

Patcher la classe  CInlineFrame

Patcher la class CInlineFrame de façon à rajouter un nom à la frame (c'est plus simple si on en a plusieurs sur la même page),

Bloc de code
--- CInlineFrame.java    2008-12-09 10:14:52.000000000 +0100
+++ CInlineFrame.java.new    2008-12-09 10:15:12.000000000 +0100
@@ -51,6 +51,7 @@
     // Obtain url and height, both static parameters
     String srcUrl = staticData.getParameter("url"); // the url for the IFrame content
     String frameHeight = staticData.getParameter("height"); // the height of the IFrame in pixels
+    String iFrameName = staticData.getParameter("iFrameName"); // the name of the IFrame in pixels

     Document doc = null;
     try {
@@ -62,12 +63,19 @@

     // Create XML doc
     Element iframeE = doc.createElement("iframe");
+
     Element urlE = doc.createElement("url");
     urlE.appendChild(doc.createTextNode(srcUrl));
     iframeE.appendChild(urlE);
+
     Element heightE = doc.createElement("height");
     heightE.appendChild(doc.createTextNode(frameHeight));
     iframeE.appendChild(heightE);
+
+    Element iFrameNameE = doc.createElement("iFrameName");
+    iFrameNameE.appendChild(doc.createTextNode(iFrameName));
+    iframeE.appendChild(iFrameNameE);
+
     doc.appendChild(iframeE);

     XSLT xslt = XSLT.getTransformer(this, runtimeData.getLocales());
@@ -105,4 +113,4 @@
     sbKey.append("locales:").append(LocaleManager.stringValueOf(runtimeData.getLocales()));
     return sbKey.toString();
   }
-}
\ Pas de fin de ligne à la fin du fichier.
+}

Télécharger le patch

Paramétre à ajouter dans le pubChan

On définit le nom de la frame qui sera utilisé dans la feuille de randu

Bloc de code
     <parameter>

            <name>iFrameName</name>

            <value>nomdeliframe</value>  éviter les doubles assenceur*

J'ai patché la class CInlineFrame de façon à rajouter un nom à la frame (c'est plus simple si on en a plusieurs sur la même page), le fichier est joint et commenté (partie ajout IUFM)
et la partie a ajouter dans le pubchan :

&nbsp;&nbsp;&nbsp;&nbsp; <parameter>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <name>iFrameName</name>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <value>cdoc-masterisation</value>&nbsp;_==> nom de la frame qui sera utilisé dans les applications pour la retailler_
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            <description></description>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            <ovrd>N</ovrd>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        </parameter>

Modifier la fauille xhtml-theme.xsl de façon a définir le domaine :
Ajouter dans le bloc javascript (ligne 26, 65, 141 suivant si on est connecté ou pas )&nbsp; la ligne :
document.domain="bretagne.iufm.fr";

ensuite dans les applis PHP ,
1 - declarer la variable $iFrameName qui correspond au parametre ci dessus.
&nbsp;&nbsp;&nbsp; Pour certaines applis qui comporte des frames ca ne fonctionne pas alors j'ai declarer la variable $iFrameHeight qui force la hauteur de la page

2 - ajouter dans l'entete&nbsp; de page 

Modifier la feuille Iframe.xsl de façon a ajouter le nom du canal

Bloc de code
<?xml version='1.0'?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:param name="locale">en_US</xsl:param>

<xsl:template match="iframe" >
    <iframe src="{url}" height="{height}" name="{iFrameName}" id="{iFrameName}" frameborder="0" width="100%">
        This browser does not support inline frames.<br/>
        <a href="{url}" target="_blank">Click here to view content</a> in a separate window.
    </iframe>
</xsl:template>
</xsl:stylesheet>

Modifier la feuille xhtml-theme.xsl de façon à définir le domaine

Ajouter dans le bloc javascript (ligne 26, 65, 141 suivant si on est connecté ou pas )  la ligne :
document.domain="domaine.univ.fr";

Modifier les applications PHP

1 - declarer la variable $iFrameName qui correspond au parametre défini dans le pubchan.
    Pour certaines applis qui comporte des frames ca ne fonctionne pas alors j'ai declarer la variable $iFrameHeight qui force la hauteur de la page

2 - ajouter dans l'entete  de page :

Bloc de code
:
<script type="text/javascript">
&nbsp;&nbsp;&nbsp;    document.domain="bretagnedomaine.iufmuniv.fr";
&nbsp;&nbsp;&nbsp;    function resizeIframe(maframe) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
        if (navigator.userAgent.indexOf('Safari') == \-1)
{                         {
            var height = document.body.scrollHeight + 35;     // (on ajoute ajoute  + 35 car le calcul de la page peut varier, sur le meme navigateur ca peut se jouer et quelques px)                 }
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; else
{                        
        }
        else{
            var height = document.body.offsetHeight + 35;
                       }\\

&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <?
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
         <? if (isset($iFrameHeight) && $iFrameHeight \!= "") echo "\nheight=$iFrameHeight;\n";
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; ?>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;?>
         maframe.style.height = height \+"px";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;        };
</script>

3

...

-

...

ajouter

...

dans

...

le

...

pied

...

de

...

page

...

:

Bloc de code


<script type="text/javascript">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    document.domain="bretagnedomaine.iufmuniv.fr";
&nbsp;&nbsp;&nbsp;    try{
{                  maframe = parent.document.getElementById('<?=$iFrameName?>');            
        maframe.onload = resizeIframe(maframe);
                  window.onresize = resizeIframe(maframe);
       }
&nbsp;&nbsp;&nbsp;    catch(e){}
</script>
\\

La

...

partie

...

ajoutée

...

dans

...

l'entete

...

pourait

...

etre

...

fait

...

dans

...

le

...

pied,

...

mais

...

si

...

on

...

veut

...

agrandir

...

la

...

taille

...

quand

...

on

...

clic

...

un

...

menu

...

déroulant

...

type

...

arbre,

...

il

...

faut

...

que

...

la

...

fonction

...

soit

...

connue.

...

C'est

...

tout,

...

c'est

...

relativement

...

simple

...

a

...

mettre

...

en

...

place

...

mais

...

demande

...

bcp

...

de

...

travail

...

pour

...

repasser

...

dans

...

toutes

...

les

...

applis

...

et

...

que

...

celles

...

ci

...

soit

...

bien formatées.

Notes:

Si vous utilisez FCKeditior, il faut alors le mettre a jour, la notion de domaine n'est prise en compte qu'a partir de la v 2.6.3.

Preciser votre nom de domaine dans le fichier de constantes : editor/_source/fckconstants.js

Bloc de code
var FCK_RUNTIME_DOMAIN = "domaine.univ.fr";

Modifier Moodle (v1.9)

C'est un peu plus et ca ne fonctionne pas sous IE qui pose des probleme avec l'editeur utiliser (cet éditeur devrait changer dans la v2), on test donc le test de navigateur.

1- Déclarer le domaine dans l'entête des pages.

Ajouter dans theme/votre-themes/header.html (ligne 9)

Bloc de code
 formatée. J'ai quelques probleme sur safari qui devrait etre réglé rapidemement.
Il faut noter également que seul la derniere version de FCKeditior prend en compte la notion de domaine.
Enfin, c'est un peu plus compliquer pour Moodle, voici ce qu'il faut modifier (sauf sous IE qui pose des probleme avec l'editeur)

Ajouter sans theme/iufm/header.html (ligne 9)

<script type="text/javascript">
    if (navigator.appName \!= "Microsoft Internet Explorer")
{ document.domain="bretagnedomaine.iufmuniv.fr"; }  // on ne gere pas sous ie, on verra avec la v2 ou l'editeur change



dans theme/iufm
</script>

2 - Calculer la hauteur de la page et retailler

Ajouter dans theme/votre-themes/footer.html 

...

(

...

ligne 30)

Bloc de code
<script type="text/javascript">if

<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (navigator.appName \!= "Microsoft Internet Explorer"){<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    document.domain="bretagnedomaine.iufmuniv.fr";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        maframe = parent.document.getElementById('CMoodle');&nbsp;  // nom de la frame in the parent<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; déclaré dans le pubchan (ici : CMoodle)
        function resizeIframe() {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            if (navigator.userAgent.indexOf('Safari') == -1) {
                var height = document.body.scrollHeight + 35;<br   />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// (on ajoute  + 35 car le calcul de la page peut varier, sur le meme navigateur ca peut se jouer et quelques px)
            }
            else{
                var height = document.body.offsetHeight + 35;
            }
            maframe.style.height = height \+"px";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; };<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        };
        maframe.onload = resizeIframe;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        window.onresize = resizeIframe;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br />


}</script>

L'éditeur

...

de

...

texte

...

utilisé

...

dans

...

les

...

forums,

...

wiki,

...

devoirs,

...

bases

...

de

...

données,

...

étiquettes...

...

présente

...

alors

...

ses

...

dysfonctionnements :

...

-

...

impossible

...

d'ajouter

...

une

...

URL,

...

-

...

d'ajouter

...

une

...

image,

...

-

...

d'ouvrir

...

en

...

pleine

...

fenêtre.

...

Il

...

faut

...

définir le domaine  dans les fichiers suivants :

  • lib/editor/htmlarea/popups/popup.js

...

  • (ligne

...

  • 15)

...

  • lib/editor/htmlarea/coursefiles.php

...

  • (ligne

...

  • 54)

...

  • lib/editor/htmlarea/popups/fullscreen.php

...

  • (ligne 24)

la ligne à ajouter est :

Bloc de code
if (navigator.appName != "Microsoft Internet Explorer"){ document.domain="domaine.univ.fr"; }

 

Une autre correction est nécessaire pour l'ouverture en plein écran (popup) de l'éditeur. Il s'agit d'ajouter "parent" devant "opener.HTMLArea._object"

...

dans

...

le

...

fichier :

  • lib/editor/htmlarea/popups/fullscreen.php

...

  • (ligne

...

  • 120)
Bloc de code
Remplacer

Remplacer
&nbsp; parent_object&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;      = opener.HTMLArea._object;

par
&nbsp;
  parent_object&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;      = parent.opener.HTMLArea._object;

et ca fonctionne

Pour voir ce que ca donne vous pouvez allez sur notre ent 

Pour voir ce que ca donne vous pouvez allez sur notre ent (ent.bretagne.iufm.fr),

...

le

...

canal

...

"Votre

...

nouvel

...

Espace

...

Numérique

...

de

...

Travail"

...

inclus

...

cette

...

modif,

...

ainsi

...

que

...

le

...

menu

...

"Aide"