Bonjour à tous,
Ce matin, grand soleil, les petits oiseaux chantent, café chaud enfin bref, tout ce qu'il faut pour commencer une bonne journée.
J'admire mon travail de la nuit : la création d'un magnifique formulaire d'inscription (45 éléments de formulaire...) pour mon nouveau module.
Quand soudain, l'horreur, le gros nuage qui assombrit la matinée. Que vois-je au centre de la page qui fait comme une tâche au milieu de tous ces beaux champs bien stylés ? Mais oui, c'est bien lui : le vilain "input file" avec son look des années 80
.
Ne pouvant me résigner à laisser cette antiquité à la vue de tous, je décide de le relooker un peu. Un petit tour sur internet et quelques minutes plus tard, l'astuce surgit: Cacher le "input file" et le piloter avec une zone de texte, un simple bouton et un peu de javascript (ça c'est pour la théorie).
La solution vient d'elle-même : créer un nouvel élément de formulaire pour notre Xoops préféré (pour ceux qui suivent, c'est mon truc en ce moment lol).
Rassurez-vous, je vais faire court
. Pour les impatients : le résultat final est en fin de post.
Attention... c'est parti...
1- Dans /class/xoopsform créez un fichier formfilehidden.php et collez le code suivant dedans :
<?php
/**
* XOOPS form element
*
* You may not change or alter any portion of this comment or credits
* of supporting developers from this source code or any supporting source code
* which is considered copyrighted (c) material of the original comment or credit authors.
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
*
* @copyright The XOOPS Project http://sourceforge.net/projects/xoops/
* @license GNU GPL 2 (http://www.gnu.org/licenses/old-licenses/gpl-2.0.html)
* @package kernel
* @subpackage form
* @author slider84 From original XoopsFormFile by Kazumi Ono (AKA onokazu) http://www.myweb.ne.jp/, http://jp.xoops.org/
*/
defined('XOOPS_ROOT_PATH') or die('Restricted access');
/**
* A file upload field
*/
class XoopsFormFileHidden extends XoopsFormElement
{
var $_maxFileSize; //Maximum size for an uploaded file
var $_size;
var $_maxlength;
var $_value;
/**
* Constructor
*
* @param string $caption Caption
* @param string $name "name" attribute
* @param int $maxfilesize Maximum size for an uploaded file
* @param int $size Size for the text area
* @param int $maxlength Maximum text length for text area
*/
function XoopsFormFileHidden($caption, $name, $maxfilesize, $size, $maxlength, $value = '')
{
$this->setCaption($caption);
$this->setName($name);
$this->_maxFileSize = intval($maxfilesize);
$this->_size = intval($size);
$this->_maxlength = intval($maxlength);
$this->setValue($value);
$this->_type = "button";
}
/**
* Get the maximum filesize
*
* @return int
*/
function getMaxFileSize()
{
return $this->_maxFileSize;
}
function getSize()
{
return $this->_size;
}
/**
* Get maximum text length
*
* @return int
*/
function getMaxlength()
{
return $this->_maxlength;
}
/**
* Get initial content
*
* @param bool $encode To sanitizer the text? Default value should be "true"; however we have to set "false" for backward compat
* @return string
*/
function getValue($encode = false)
{
return $encode ? htmlspecialchars($this->_value, ENT_QUOTES) : $this->_value;
}
/**
* Set initial text value
*
* @param $value string
*/
function setValue($value)
{
$this->_value = $value;
}
function getType()
{
return in_array( strtolower($this->_type), array("button", "submit", "reset") ) ? $this->_type : "button";
}
/**
* prepare HTML for output
*style='visibility:hidden;height:0px'
* @return string HTML
*/
function render()
{
return "<input type='hidden' name='MAX_FILE_SIZE' value='" . $this->getMaxFileSize() . "' /><input type='file' style='visibility:hidden;height:0px' name='" . $this->getName()."_input" . "' id='" . $this->getName()."_input" . "' title='" . $this->getTitle() . "'" .$this->getExtra() . " />
<input type='hidden' name='xoops_upload_file[]' id='xoops_upload_file[]' value='" . $this->getName() ."_input" . "' />
<br><div class='block inline'><input type='text' readonly='readonly' name='" . $this->getName() ."_txt". "' title='" . $this->getTitle() . "' id='" . $this->getName() ."_txt". "' size='" . $this->getSize() . "' maxlength='" . $this->getMaxlength() . '" value="' . $this->getValue() . "'
onclick='javascript:
$("#".$this->getName()."_input"."").click();
$("input[type=file]").change(function() {
var fullPath = document.getElementById("" . $this->getName()."_input" . "").value;
document.getElementsByName("" . $this->getName() ."_txt". "")[0].value = fullPath;
}); '/>
<input type='" . $this->getType() . "' class='formButton' name='" . $this->getName() ."_btn". "' id='" . $this->getName() ."_btn". "' value='" . _BROWSE . "' title='" . $this->getValue() . "'
onclick='javascript:
$("#".$this->getName()."_input"."").click();
$("input[type=file]").change(function() {
var fullPath = document.getElementById("" . $this->getName()."_input" . "").value;
document.getElementsByName("" . $this->getName() ."_txt". "")[0].value = fullPath;
}); ' /></div>";
}
}
?>
2- Dans /class/xoopsload.php rajoutez dans la fonction loadCoreConfig():
'xoopsformfilehidden' => XOOPS_ROOT_PATH . '/class/xoopsform/formfilehidden.php',
3- Dans /class/xoopsformloader rajoutez :
xoops_load('XoopsFormFileHidden');
4- Dans /language/french/global.php rajoutez :
define("_BROWSE","Parcourir...");
5- Ajout dans un formulaire comme tout élément de xoops :
$variable = new XoopsFormFileHidden($caption, $name, $maxfilesize, $size, $maxlength);
Ormis $caption, $name et $maxfilesize qui sont identiques à ceux de l'élément XoopsFormFile d'origine :
$size= Taille de la zone de texte.
$maxlength= Nombre de caractères max dans la zone de texte.
Aprés quelques heures de travail et de torture de neurones, voici le résultat du relooking :
Testé sur 2.5.5 et 2.5.6. Si certains se sentent une âme d'aventurier et veulent bien le tester sur d'autres versions...
![Open in new window](javascript:CaricaFoto("https://www.frxoops.org/uploads/img51c5fca37075b.png");)
![Open in new window](javascript:CaricaFoto("https://www.frxoops.org/uploads/img51c6057908d63.png");)
![Open in new window](javascript:CaricaFoto("https://www.frxoops.org/uploads/newbb/14931_5325680ead6ec.png");)
![Open in new window](javascript:CaricaFoto("https://www.frxoops.org/uploads/newbb/14931_532567582b8c4.png");)
