====== Pxxo_Widget_Decorator_Flybox ====== Ce décorateur peut encapsuler un widget visuellement dans une fenêtre volante que l'on peut déplacée, réduire, ... * [[http://apps.pxxo.net/showcase/|Exemple d'utilisation en ligne]] * [[fr:install|Installer]] ===== Paramètres ===== ^ Nom ^ Type ^ Valeur par défaut ^ Description ^ | ''width'' | String | 350 | Largeur de la fenêtre volante __en pixel__ (ne pas spécifier d'unité) | | ''height'' | String | null | Hauteur de la fenêtre volante __en pixel__ par défaut la hauteur s'adapte au contenu (ne pas spécifier d'unité) | | ''label'' | String | null | Titre de la fenêtre volante | | ''top'' | Integer | null | Position Y __en pixel__ de la fenêtre volante par rapport au coin supérieur gauche de de la zone cliente du navigateur web (ne pas spécifier d'unité) | | ''left'' | Integer | false | Position X __en pixel__ de la fenêtre volante par rapport au coin supérieur gauche de de la zone cliente du navigateur web (ne pas spécifier d'unité) | | ''minimized'' | Boolean | false | Si à true, la fenêtre est réduite lors de son initialisation | | ''visible'' | Boolean | true | Si à true la fenêtre est visible lors de sa création, dans le cas contraire elle est cachée | | ''zIndex'' | Integer | null | Permet de spécifier un z-index | | ''oid'' | String | null | Si ce paramètre n'est pas renseigner le ClassID du widget sera utilisé. Il n'est pas nécessaire dans la plupart des cas de renseigner ce paramètre. Il est utilisé pour un usage interne lié à la dynamique entre le php et le client via du javascript et le protocole AJAX. Cependant, il peut être utile de le fixer : c'est le cas dans [[http://www.pxxo.net/fr/doc/pxxo_widget_rss_flybox|Pxxo_Widget_RSS_Flybox]] ce qui permet une communication Javascript entre le bouton "clef à molette" généré par ce décorateur et la partie paramétrage générée par le widget décorée | | ''shadowonstart'' | Boolean | false | Si à true, active l'affichage "d'une ombre" au commencement d'une action de glisser-déplacer | | ''overflowX '' | String | ''hidden'' | comportement en overflow horizontal du contenu ; valeurs possibles : hidden => cache tout ce qui dépasse, scroll => met toujours la barre de scroll horizontale, auto => met si besoin une barre de scroll horizontale | | ''overflowY '' | String | auto | comportement en overflow vertical du contenu ; valeurs possibles : hidden => cache tout ce qui dépasse, scroll => met toujours la barre de scroll verticale, auto => met si besoin une barre de scroll verticale | | ''button'' | Array | //array('param','minmax','close')// | Tableau listant les boutons à afficher dans la barre de titre de la fenêtre volante ; valeurs possibles : 'param', 'minmax', 'close'. | | ''modal'' | Boolean | false | Si à true, la fenêtre générée sera modale. | | ''draggable'' | Boolean | true | Si à false, la fenêtre restera fixe. Paramètre facultatif. | | ''alignMiddle'' | Boolean | false | Si à true positionne la fenêtre volante de manière centrée par rapport à la zone cliente du navigateur. Dans ce cas les autres éventuelles indications de positionnement seront ignorées. Paramètre facultatif. | ===== Exemples ===== Ce décorateur est utilisé dans le [[http://apps.pxxo.net/showcase/|Showcase]]. Il est également utilisé dans le [[http://www.pxxo.net/fr/doc/pxxo_widget_rss_flybox|Pxxo_Widget_RSS_Flybox]] comme l'illustre la capture d'écran ci-dessous, et dans [[http://www.pxxo.net/fr/doc/pxxo_widget_window|Pxxo_Widget_Window]] {{ fr:doc:pxxo_widget_rss_flybox.png | Exemple d'utilisation dans le Pxxo_Widget_RSS_Flybox }} __Autre exemple__ : Ici on génére un formulaire possédant une zone de saisie de type WYSIWYG qu'on rend "draggable". require_once 'Pxxo/Widget/Decorator/Flybox.php'; require_once 'Pxxo/Widget/Form.php'; require_once 'Pxxo/Widget/Input.php'; // on génére pour l'exemple un formulaire ayant un champ WYSIWYG $p = array(); $p['inputs'] = array(); $p['inputs'][] = array('type' => 'Wysiwyg', 'id' => 'test1', 'width' => 500, 'height' => 150, 'theme' => 'office2003'); $obj1 = new Pxxo_Widget_Form($p); // on applique au formulaire le décorateur Flybox $obj1->addDecorator( new Pxxo_Widget_Decorator_Flybox( array('label'=>'Editeur WYSIWYG','width'=>'520px','height'=>'280px') ) ); $obj1->main(); $obj1->dump(); ===== Cacher / montrer un widget décoré avec Flybox ===== On peut avoir le besoin de cacher une fenêtre volante lors de sa création et ne l'afficher que sur une action précise de l'utilisateur tel qu'un clic ou un survol sur un lien, une image, un bouton , ... Pour cela, il faut renseigner le paramètre "visible" à false au constructeur du décorateur. Le décorateur va mettre à disposition une fonction javascript qui se nomme **DaD_toggle** et prend un unique paramètre : l'oid (cf. paramètre). Exemple : ... Caractères accentués et symboles ... Cette exemple met en oeuvre une image cliquable qui fera apparaître la fênetre volante dont l'oid vaut $this->oid si celle-ci est cachée et réciproquement la cachera si celle-ci est visible. ===== Listes des fonctions javascripts à disposition ===== === DaD_absolutize(p_oid) === Passe la flybox en positionnement absolu sans en changer sa position dans le layout de la page. ^ Nom ^ Type ^ Description ^ | ''p_oid'' | String | Correspond à l'oid passé en paramètre du décorateur ou le ClassID si celui-ci n'est pas renseigné | === DaD_setPosition(p_oid,p_top,p_left) === Positionne la flybox aux coordonnées passées en paramètres. ^ Nom ^ Type ^ Description ^ | ''p_oid'' | String | Correspond à l'oid passé en paramètre du décorateur ou le ClassID si celui-ci n'est pas renseigné | | ''p_top'' | Integer | Position Y par rapport au coin supérieur gauche | | ''p_left'' | Integer | Position X par rapport au coin supérieur gauche | === DaD_setPositionTop(p_oid,p_top) === Positionne la flybox aux coordonnées passées en paramètres. ^ Nom ^ Type ^ Description ^ | ''p_oid'' | String | Correspond à l'oid passé en paramètre du décorateur ou le ClassID si celui-ci n'est pas renseigné | | ''p_top'' | Integer | Position Y par rapport au coin supérieur gauche | === DaD_setPositionLeft(p_oid,p_left) === Positionne la flybox aux coordonnées passées en paramètres. ^ Nom ^ Type ^ Description ^ | ''p_oid'' | String | Correspond à l'oid passé en paramètre du décorateur ou le ClassID si celui-ci n'est pas renseigné | | ''p_left'' | Integer | Position X par rapport au coin supérieur gauche | === DaD_setZindex(p_oid,p_zindex) === Règle le zindex de la flybox. ^ Nom ^ Type ^ Description ^ | ''p_oid'' | String | Correspond à l'oid passé en paramètre du décorateur ou le ClassID si celui-ci n'est pas renseigné | | ''p_zindex'' | Integer | zindex de la flybox | === DaD_hideParams(p_oid) === Cache la zone "paramètrage" générée par le widget décoré si celle-ci existe. ^ Nom ^ Type ^ Description ^ | ''p_oid'' | String | Correspond à l'oid passé en paramètre du décorateur ou le ClassID si celui-ci n'est pas renseigné | === DaD_showParams(p_id) === Affiche la zone "paramètrage" générée par le widget décoré si celle-ci existe. ^ Nom ^ Type ^ Description ^ | ''p_oid'' | String | Correspond à l'oid passé en paramètre du décorateur ou le ClassID si celui-ci n'est pas renseigné | === DaD_toggle(p_id) === Affiche ou cache la fenêtre volante selon son état. ^ Nom ^ Type ^ Description ^ | ''p_oid'' | String | Correspond à l'oid passé en paramètre du décorateur ou le ClassID si celui-ci n'est pas renseigné | === DaD_toggleModal(p_id) === Affiche ou cache la fenêtre volante modale selon son état. Cette fonction est à utilisée à la place de //DaD_toggle(...)// pour l'usage de fenêtre modale. ^ Nom ^ Type ^ Description ^ | ''p_oid'' | String | Correspond à l'oid passé en paramètre du décorateur ou le ClassID si celui-ci n'est pas renseigné | === DaD_show(p_id) === Affiche la fenêtre volante. ^ Nom ^ Type ^ Description ^ | ''p_oid'' | String | Correspond à l'oid passé en paramètre du décorateur ou le ClassID si celui-ci n'est pas renseigné | === DaD_showModal(p_id) === Affiche la fenêtre volante modale. Cette fonction est à utilisée à la place de //DaD_show(...)// pour l'usage de fenêtre modale. ^ Nom ^ Type ^ Description ^ | ''p_oid'' | String | Correspond à l'oid passé en paramètre du décorateur ou le ClassID si celui-ci n'est pas renseigné | === DaD_hide(p_id) === Cache la fenêtre volante. ^ Nom ^ Type ^ Description ^ | ''p_oid'' | String | Correspond à l'oid passé en paramètre du décorateur ou le ClassID si celui-ci n'est pas renseigné | === DaD_hideModal(p_id) === Cache la fenêtre volante modale. Cette fonction est à utilisée à la place de //DaD_hide(...)// pour l'usage de fenêtre modale. ^ Nom ^ Type ^ Description ^ | ''p_oid'' | String | Correspond à l'oid passé en paramètre du décorateur ou le ClassID si celui-ci n'est pas renseigné | === DaD_getNameContainer(p_oid) === Retourne la valeur calculée à partir de l'oid de l'id du container de la flybox. ^ Nom ^ Type ^ Description ^ | ''p_oid'' | String | Correspond à l'oid passé en paramètre du décorateur ou le ClassID si celui-ci n'est pas renseigné | /* * Retourne la valeur calculée à partir de l'oid de l'id de la div utilisée en mode modal pour rendre inaccesible l'arriere plan * * @param p_id String correspond à l'oid passé en paramètre du decorateur ou le ClassID si celui-ci n'est pas renseigné */ === DaD_getNameOverlay(p_oid) === Retourne la valeur calculée à partir de l'oid de l'id de la div utilisée en mode modal pour rendre inaccesible l'arriere plan ^ Nom ^ Type ^ Description ^ | ''p_oid'' | String | Correspond à l'oid passé en paramètre du décorateur ou le ClassID si celui-ci n'est pas renseigné | /** * Renvoie la taille de la page courante ainsi que la taille de la zone cliente du navigateur */ === DaD_getPageSize() === Renvoie la taille de la page courante ainsi que la taille de la zone cliente du navigateur. Retour => //Array(pageWidth,pageHeight,windowWidth,windowHeight)// === DaD_setTitle( p_oid, p_title ) === Change le nom de la fenêtre ^ Nom ^ Type ^ Description ^ | ''p_oid'' | String | Correspond à l'oid passé en paramètre du décorateur ou le ClassID si celui-ci n'est pas renseigné | | ''p_title'' | String | Correspond au nouveau nom que l'on souhaite donner à la fenêtre |