mooTools

Voici une classe mooTools permettant de relooker un input de type file.L'astuce reprise pour que cela fonctionne est celle de masquer le champ de type file dans un div qui sert de bouton pour déclencher la recherche du fichier. Une fois la sélection du fichier faite, le champ de type file est à jour et en cas de soumission du formulaire le fichier sera transmit à un programme php action du form. La classe est très simple, elle permettra de personnaliser à son gré l'aspect d'un champ de type file, chose impossible à ma connaissance en conservant l'objet de base.UtilisationL'utilisation de la classe se fait en instanciant la classe avec comme paramètre un élément input de type file :var elt = $('monelement');new MooUpCombo(elt);Attention à bien redéfinir la variable repUCScript dans le script avec le dossier qui contient le script.L'utilisation de ce script nécessite que la bibliothèque mooTools soit chargé ainsi que le fichier mooUpCombo.js et l'instanciation de la classe doit se faire dans l'évênement domready de l'objet window.Téléchargement mooUpCombo.zip (1.41ko)L'archive contient la classe (fichier mooUpCombo.js) et un fichier graphique (bull_down.png) pour le bouton qui permet de lancer la recherche du fichier à envoyer sur le poste client.

Voici une classe mooTools permettant de choisir une image contenue dans un dossier sur le serveur PHP.La classe génère à droite de l'input un bouton qui permet d'ouvrir un popup contenant une liste de fichiers images, ainsi que, s'il y en a, les dossiers qui seront cliquables pour en afficher le contenu. Les fichiers et dossiers présentés disposent d'une icône permettant de les identifier comme tel.Un aperçu de l'image s'affiche au survol de la souris sur le nom du fichier. La sélection du fichier rapatrie dans le champ input la valeur du fichier ainsi que, selon l'option définie lors de l'instanciation de la classe, le chemin relatif au fichier choisi.UtilisationL'utilisation de la classe se fait en instanciant la classe avec comme paramètre un élément input de type text :var elt = $('monelement');new MooImgCombo(elt, [{ options }]);Attention à bien redéfinir la variable repICScript dans le script avec le dossier qui contient le script.Les options possibles sont :fullpath: Booléen indiquant si le champ input récupère non seulement le nom du fichier mais aussi le chemin relatif.repImages: Chaine désignant le répertoire contenant les images et/ou dossiers à afficher dans la liste déroulante.L'utilisation de ce script nécessite que la bibliothèque mooTools soit chargé ainsi que le fichier mooImgCombo.js et l'instanciation de la classe doit se faire dans l'évênement domready de l'objet window.C'est dans un programme PHP que la liste des fichiers est constituée et récupérée par un Request via JavaScript. Attention à ce qu'il y ait bien les droits en lecture sur le dossier désigné (au moins 0700 pour www-data).Téléchargement mooImgCombo.zip (15 ko)L'archive contient la classe (fichier mooImgCombo.js), le programme PHP (mooImgCombo.php) et des fichiers graphiques nécessaires à l'affichage de la liste déroulante (Icônes, image d'attente chargement aperçu, image du bouton de la combobox).

Voici une classe mooTools permettant de sélectionner une valeur numérique à partir d'une glissière. Son utilisation est très simple, il suffit d'inclure le script JS, et instancier via javascript dans l'évênement window.domready la classe en lui passant en paramètre l'élément du formulaire (de type input) ainsi que les options de la glissière :window.addEvent('domready', function() { var maGlissiere = new MooSlider($('moninput'), { valMin: 0, valMax: 100 });});Coté HTML, très simplement :<form> <input type="text" id="moninput" name="moninput" value="50" /></form>L'input text sera automatiquement masqué, la glissière ajouté automatiquement, et l'input text aura sa valeur (value) synchronisée avec la glissière graphique. Télécharger le script

Une astuce très simple et efficace pour maintenir une session PHP (session_start) via l'objet Request de mooTools (inclure la bibliothèque mootools) consiste à faire appel au programme PHP dans lequel le session_start() est effectué avec une variable post qui permettra de quitter juste après l'ouverture de session. Il ne reste donc plus qu'à appeler régulièrement le Request, durée en fonction de la durée de vie de la session.Voici le code Javascript :window.addEvent('domready', function() { // Request temporisée pour empecher la session d'expirer (function() { new Request({ url: 'page.php?keepalive=1', method: 'post' }).send(); }).periodical(600000);});Ensuite en entête du programme PHP on trouvera le code suivant :session_start();if ($keepalive) die("");De cette façon le session_start() sera appelé toutes les 600 secondes, empêchant la session d'expirer tant que l'utilisateur reste sur la page PHP.

Le framework JavaScript mooTools version 1.3 est désormais distribué en lieu et place de la version 1.2.5... Qu'est-ce que cela change niveau programmation ? Voici un petit récapitulatif des grands changements à opérer sur les programmes basés sur la 1.2.x.Core$chk(value) => (value != null)$A(item) => Array.from(item) // Note: Array.from does not always return a new array but just ensures that the return value is an array.$splat => Array.from$clear => use the native clearTimeout when using fn.delay, use clearInterval when using fn.periodical.$defined => (value != null)$each => use Array.each for arrays, Object.each for objects$empty => No replacement, use function(){}$extend(source, extended) => Object.append(source, extended)$merge(a, b) => Object.merge({}, a, b)$mixin(a, b) => Object.merge(a, b)$lambda => Function.from$random => Number.random$time => Date.now$type => typeOf // Note: returns a string 'null' on empty objects as opposed to "false" in 1.2$unlink => Array.clone or Object.clone$arguments => No replacementNative => Type (see Core.js)Array.type / String.type / Number.type / … => Type.isArray / Type.isString / Type.isNumber / …Hash and $H were deprecated and moved from Core to More. Use plain objects instead of Hash. You can find methods to manipulate objects on Object. You can find all 1.2 functionality of Hash in MooTools More 1.3.BrowserEngine detection was changed in favor of user-agent detection. Browser.Engine was deprecated and according properties on the Browser object were added:Browser.Engine.trident => Browser.ieBrowser.Engine.gecko => Browser.firefoxBrowser.Engine.webkit => Browser.safari or Browser.chromeBrowser.Engine.presto => Browser.operaBrowser.Platform.ipod => Browser.Platform.ios$exec => Browser.execArray$pick => Array.pick or [a, b, c].pick()Array.extend => Array.appendFunction$try => Function.attemptmyFn.run(args, bind) => myFn.apply(bind, Array.from(args));myFn.create => Use the according functions like .pass, .bind, .delay, .periodicalmyFn.bindWithEvent => deprecatedmyFn.bind(this, [arg1, arg2, arg3]) => myFn.bind(this, arg1, arg2, arg3) OR myFn.pass([arg1, arg2, arg3], this)Elementelement.injectInside, .injectBefore, .injectAfter, .injectBottom, .injectTop => element.inject(context, where); // where = inside, bottom, …element.grabTop, … => element.grab(context, where) // see aboveelement.hasChild(item) => element.contains(item) && item != element$$ now only accepts a single selector, an array or arguments of elementsSelectors.Pseudo => Slick.definePseudo(name, fn)Source : github.com/mootools - Pour aller plus loin...