From 1db6603556d9da66efc9e5498c033633af6b7187 Mon Sep 17 00:00:00 2001 From: MMR Date: Tue, 20 May 2014 12:12:04 +0200 Subject: [PATCH 1/8] =?UTF-8?q?Am=C3=A9lioration=20de=20la=20fonction=20mo?= =?UTF-8?q?dale()?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Ajout d'une option pour avoir une icône à la place d'un bouton pour ouvrir le modal. --- COMMENT_CA_MARCHE.md | 53 ++++++++ View/Helper/BsHelper.php | 261 ++++++++++++++++++++------------------- webroot/css/bs_addon.css | 4 + 3 files changed, 190 insertions(+), 128 deletions(-) create mode 100644 COMMENT_CA_MARCHE.md mode change 100644 => 100755 View/Helper/BsHelper.php mode change 100644 => 100755 webroot/css/bs_addon.css diff --git a/COMMENT_CA_MARCHE.md b/COMMENT_CA_MARCHE.md new file mode 100644 index 0000000..3439f0d --- /dev/null +++ b/COMMENT_CA_MARCHE.md @@ -0,0 +1,53 @@ +BsHelper::modal(string $header, string $body, array $options = array(), array $buttons = array()) + +_param string $header_ : +Contenu de l'en-tête +_param string $body_ : +Contenu du corps +_param array $options_ : +Tableau indiquant l'ID du modal, classes supplémentaires et la présence ou non dans un formulaire. +_param array $buttons_ : +Tableau caractérisant les 3 boutons du modal. + +Créer un modal de Bootstrap : + + echo $this->Bs->modal('Mon en-tête', 'Mon contenu'); + +Crée une modal simple sans bouton close et confirm. + +Pour personnalisé vos boutons, utilisez le tableau $buttons : + + $this->Bs->modal( + 'Mon en-tête', + 'Mon contenu', + array( + 'id' => 'abc123', + 'class' => 'modal-form', + ), + array( + 'open' => array( + 'name' => 'S'inscrire', + 'class' => 'btn-success' + ), + 'close' => array( + 'name' => 'Annuler', + 'class' => 'btn-link' + ), + 'confirm' => array( + 'name' => 'Confirmer', + 'link' => array( + 'controller' => 'monController', + 'action' => 'monAction' + ), + 'class' => 'btn-success' + ) + ) + ); + +Si vous voulez naviguer en dehors du projet en cliquant sur le bouton confirmer, utilisez une URL absolue à la place du tableau de CakePHP. + +Pour insérer un formulaire dans le body : + + $this->Bs->modal('Mon en-tête', $form); + +La variable $form désigne ici le code HTML de votre formulaire. diff --git a/View/Helper/BsHelper.php b/View/Helper/BsHelper.php old mode 100644 new mode 100755 index bf8c0e1..a01056e --- a/View/Helper/BsHelper.php +++ b/View/Helper/BsHelper.php @@ -1,6 +1,6 @@ ' . BL; $out .= '' . BL; $out .= '' . BL; @@ -86,7 +86,7 @@ public function html($titre = '' , $description = '' , $lang = 'fr') { $out .= ''.$titre.'' . BL; $out .= '' . BL; $out .= '' . BL; - + return $out; } @@ -101,37 +101,37 @@ public function html($titre = '' , $description = '' , $lang = 'fr') { */ public function html5($titre = '' , $description = '' , $lang = 'fr') { - + $out = $this->html($titre , $description , $lang); - + // Script JS for IE and HTML 5 $out .= '' . BL; - + return $out; } - + /** * Close the head element and initialize the body element * * @return string */ - + public function body($classBody = '') { - + $out = '' . BL; - + if($classBody == '') $out .= '' . BL; - else + else $out .= '' . BL; - + return $out; } - - + + /** * Close the body element and the html element * @@ -139,13 +139,13 @@ public function body($classBody = '') { */ public function end() { - + $out = '' . BL; $out .= ''; - + return $out; } - + /** * Load CSS for the current page @@ -155,7 +155,7 @@ public function end() { */ public function css($path = array(), $options = array()) { - + $out = parent::css($this->pathCSS). BL ; if ($this->fa_load) { $out .= parent::css($this->fa_path) . BL; @@ -163,11 +163,11 @@ public function css($path = array(), $options = array()) { if ($this->bs_addon_load) { $out .= parent::css($this->bs_addon_path) . BL; } - + // Others CSS foreach($path as $css) $out .= parent::css($css, $options) . BL; - + return $out; } @@ -180,17 +180,17 @@ public function css($path = array(), $options = array()) { */ public function js($array_js = array()) { - + $out = parent::script($this->pathJquery) . BL; $out .= parent::script($this->pathJS) . BL; - + // Others JS foreach($array_js as $js) $out .= parent::script($js). BL; - + return $out; } - + /** * Close div elements * @@ -246,7 +246,7 @@ public function container($options = array()) { $out = ''; $class = CONTAINER; if(isset($options['class'])) - $class .= SP . $options['class']; + $class .= SP . $options['class']; $out .= parent::div($class , null, $options). BL; return $out; } @@ -269,7 +269,7 @@ public function row($options = array()) { /** * Create a
element. - * + * * Differents layouts with options. * * ### Construction @@ -295,7 +295,7 @@ public function row($options = array()) { * * @param string layout, size and options (offset, push and/or pull) * @param array $attributes Options of the div element - * @return string DIV tag element + * @return string DIV tag element */ public function col() { $class = ''; @@ -322,7 +322,7 @@ public function col() { $device = str_replace($replace, '.', $device); $device = explode('.', $device); - // Sould define the device in first + // Sould define the device in first foreach ($device as $elem) { if (!$ecran) { $nom = substr($elem, 0, 2); @@ -377,7 +377,7 @@ private function optCol($elem, $screen){ case 'ph': return 'col-'.$screen.'-push-'.$size; break; - + case 'of': return 'col-'.$screen.'-offset-'.$size; break; @@ -429,20 +429,20 @@ private function optCol($elem, $screen){ /** * Initialize the table with the head and the body element. - * @param array $titles 'title' => title of the cell + * @param array $titles 'title' => title of the cell * 'width' => width in percent of the cell * 'hidden' => layout * @param array $class classes of the table (hover, striped, etc) * @return string */ function table($titles, $class = array()) { - + $classes = ''; $out = '
'; if (!empty($class)) { foreach ($class as $opt) { - $classes .= ' table-'.$opt; + $classes .= ' table-'.$opt; } } @@ -457,7 +457,7 @@ function table($titles, $class = array()) { $tablePos = 0; $nbColumn = count($titles); $width = false; - + foreach($titles as $title) { $classVisibility = ''; if(isset($title['hidden'])) { @@ -478,7 +478,7 @@ function table($titles, $class = array()) { $out .= $classVisibility.'">'.$title['title'].''; $tablePos ++; } - + $out .= _TR; $out .= ''; $out .= ''; @@ -486,11 +486,11 @@ function table($titles, $class = array()) { $this->_nbColumn = $nbColumn - 1; $this->_tableClassesCells = $tableClassesCells; $this->_cellPos = 0; - $this->_openLine = 0; + $this->_openLine = 0; } return $out; } - + /** * Create a cell () @@ -504,10 +504,10 @@ public function cell($content, $class = '', $autoformat = true) { $out = ''; $classVisibility = ''; $cellPos = $this->_cellPos; - + if($cellPos == 0 && $this->_openLine == 0) $out .= TR; - + $this->_openLine = 0; if($this->_tableClassesCells[$cellPos]) @@ -517,9 +517,9 @@ public function cell($content, $class = '', $autoformat = true) { $out .= ''; else $out .= TD; - + $out .= $content; - + if($autoformat) { $out .= _TD; @@ -538,7 +538,7 @@ public function cell($content, $class = '', $autoformat = true) { } return $out; } - + /** * Color a line () @@ -578,7 +578,7 @@ public function endTable() { * Picture responsive * * Extends from HtmlHelper:image() - * + * * @param string $path Path to the image file, relative to the app/webroot/img/ directory. * @param array $options Array of HTML attributes. See above for special options. * @return string End tag header @@ -618,8 +618,8 @@ public function icon($iconLabel, $classes = array(), $attributes = array()) { } } - return ''; - + return ''; + } @@ -669,15 +669,15 @@ public function btn($text, $url = array(), $options = array(), $confirmMessage = } /** -* Create a Bootstrap Modal -* @param string $id the modal id -* @param string $header the text in the header -* @param string $body the content of the body -* @param array $buttons informations about open, close and save buttons -* @param array $options -* @return string +* Create a Bootstrap Modal. +* @param string $header The text in the header +* @param string $body The content of the body +* @param array $buttons Informations about open, close and confirm buttons +* @param array $options Used to add custom ID, class or a form into the modal +* @return string Bootstrap modal */ - public function modal($header, $body, $options = array(), $buttons = array()){ + public function modal($header, $body, $options = array(), $buttons = array()) + { $classes = (isset($options['class'])) ? $options['class'] : ''; // Is it a form ? @@ -692,7 +692,7 @@ public function modal($header, $body, $options = array(), $buttons = array()){ $cle1 = "zarnfjdlvjezprizejrjpzojazjpodffp"; $cle2 = "251848416487764197191944948794449"; $cle = ''; - for ($i=0; $i < 15; $i++) { + for ($i=0; $i < 15; $i++) { $tab = array($cle1, $cle2); if ($i == 0) { $cle .= $cle1[rand(0, strlen($cle1)-1)]; @@ -705,98 +705,103 @@ public function modal($header, $body, $options = array(), $buttons = array()){ $id = $cle; } - // Button - if (!empty($buttons)) { - if (isset($buttons['open']) && $buttons['open'] != '') { - if (is_array(($buttons['open']))){ + // Create the open button + if (!empty($buttons)) { + if (isset($buttons['open']) && $buttons['open'] != '') { + if (is_array(($buttons['open']))){ + // Create a simple font-awesome icon instead of a button + if (isset($buttons['open']['button']) && $buttons['open']['button'] === false) { + $out = $this->icon($buttons['open']['name'], array('open-modal'), array('data-toggle' => 'modal', 'data-target' => '#'.$id)); + } else { $out = $this->btn(__($buttons['open']['name']), null , array('tag' => 'button', 'class' => $buttons['open']['class'], 'data-toggle' => 'modal', 'data-target' => '#'.$id)); - }else{ - $out = $this->btn(__($buttons['open']), null , array('tag' => 'button', 'class' => 'btn-primary btn-lg', 'data-toggle' => 'modal', 'data-target' => '#'.$id)); } }else{ - $out = $this->btn(__('Voir'), null , array('tag' => 'button', 'class' => 'btn-primary btn-lg', 'data-toggle' => 'modal', 'data-target' => '#'.$id)); + $out = $this->btn(__($buttons['open']), null , array('tag' => 'button', 'class' => 'btn-primary btn-lg', 'data-toggle' => 'modal', 'data-target' => '#'.$id)); } }else{ $out = $this->btn(__('Voir'), null , array('tag' => 'button', 'class' => 'btn-primary btn-lg', 'data-toggle' => 'modal', 'data-target' => '#'.$id)); } + }else{ + $out = $this->btn(__('Voir'), null , array('tag' => 'button', 'class' => 'btn-primary btn-lg', 'data-toggle' => 'modal', 'data-target' => '#'.$id)); + } - // Modal - $out .= '