[JS] (redimensionnement d'éléments) lock de sélection

lock de sélection [JS] (redimensionnement d'éléments) - HTML/CSS - Programmation

Marsh Posté le 19-03-2008 à 08:46:12    

Bonjour tout le monde,
 
J'essaie de donner un comportement de frame à des composants html : je voudrais par exemple pouvoir redimensionner une DIV en saisissant sa bordure inférieure et en l'étirant.
 
Voici mon code pour le moment (je me doute qu'il est loin d'être parfait et c'est pour ça que je vous le soumets) :
 
HTML

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3.    
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head>
  6.  <script type="text/javascript" src="./js/prototype.js"></script>
  7.  <script type="text/javascript" src="./js/scriptaculous.js"></script>
  8.  <script type="text/javascript" src="./xtd.js"></script>
  9.  <style type="text/css">
  10.   * { margin: 0; padding: 0; border: 0; }
  11.   #xtd_ctn_test1 {
  12.      display:block;
  13.      width: 500px;
  14.      height: 300px;
  15.      margin: 0 auto;
  16.      overflow: auto;
  17.      background: rgb(204,204,255);
  18.       }
  19.      
  20.       #xtd_bar_test1 {
  21.          display: block;
  22.          width: 500px;
  23.          height: 5px;
  24.      margin: 0 auto;
  25.          background: grey;
  26.          cursor: s-resize;
  27.       }
  28.      
  29.       #xtd_ctn_test2 {
  30.      display:block;
  31.      width: 500px;
  32.      height: 300px;
  33.      margin: 0 auto;
  34.      overflow: auto;
  35.      background: rgb(255,204,204);
  36.       }
  37.      
  38.       #xtd_bar_test2 {
  39.          display: block;
  40.          width: 500px;
  41.          height: 5px;
  42.      margin: 0 auto;
  43.          background: grey;
  44.          cursor: s-resize;
  45.       }
  46.  </style>
  47. </head>
  48. <body>
  49.   <div id="ctr">
  50.  
  51.  <div id="xtd_ctn_test1">
  52.   
  53.    <p>
  54.         Quam ob rem circumspecta cautela observatum est deinceps et cum edita montium petere coeperint grassatores, loci iniquitati milites cedunt. ubi autem in planitie potuerint reperiri, quod contingit adsidue, nec exsertare lacertos nec crispare permissi tela, quae vehunt bina vel terna, pecudum ritu inertium trucidantur.
  55.       </p>
  56.       <p>
  57.         empore quo primis auspiciis in mundanum fulgorem surgeret victura dum erunt homines Roma, ut augeretur sublimibus incrementis, foedere pacis aeternae Virtus convenit atque Fortuna plerumque dissidentes, quarum si altera defuisset, ad perfectam non venerat summitatem.
  58.       </p>
  59.       <p>
  60.         Iamque non umbratis fallaciis res agebatur, sed qua palatium est extra muros, armatis omne circumdedit. ingressusque obscuro iam die, ablatis regiis indumentis Caesarem tunica texit et paludamento communi, eum post haec nihil passurum velut mandato principis iurandi crebritate confirmans et statim inquit exsurge et inopinum carpento privato inpositum ad Histriam duxit prope oppidum Polam, ubi quondam peremptum Constantini filium accepimus Crispum.
  61.       </p>
  62.       <p>
  63.         Primi igitur omnium statuuntur Epigonus et Eusebius ob nominum gentilitatem oppressi. praediximus enim Montium sub ipso vivendi termino his vocabulis appellatos fabricarum culpasse tribunos ut adminicula futurae molitioni pollicitos.
  64.       </p>
  65.       <p>
  66.         Eminuit autem inter humilia supergressa iam impotentia fines mediocrium delictorum nefanda Clematii cuiusdam Alexandrini nobilis mors repentina; cuius socrus cum misceri sibi generum, flagrans eius amore, non impetraret, ut ferebatur, per palatii pseudothyrum introducta, oblato pretioso reginae monili id adsecuta est, ut ad Honoratum tum comitem orientis formula missa letali omnino scelere nullo contactus idem Clematius nec hiscere nec loqui permissus occideretur.
  67.       </p>
  68.   
  69.  </div>
  70.   
  71.     <div id="xtd_bar_test1">
  72.  </div>
  73.  </div>
  74.  <br /><br /><br /><br /><br />
  75.  <div id="xtd_ctn_test2">
  76.   
  77.    <p>
  78.         Quam ob rem circumspecta cautela observatum est deinceps et cum edita montium petere coeperint grassatores, loci iniquitati milites cedunt. ubi autem in planitie potuerint reperiri, quod contingit adsidue, nec exsertare lacertos nec crispare permissi tela, quae vehunt bina vel terna, pecudum ritu inertium trucidantur.
  79.       </p>
  80.       <p>
  81.         empore quo primis auspiciis in mundanum fulgorem surgeret victura dum erunt homines Roma, ut augeretur sublimibus incrementis, foedere pacis aeternae Virtus convenit atque Fortuna plerumque dissidentes, quarum si altera defuisset, ad perfectam non venerat summitatem.
  82.       </p>
  83.       <p>
  84.         Iamque non umbratis fallaciis res agebatur, sed qua palatium est extra muros, armatis omne circumdedit. ingressusque obscuro iam die, ablatis regiis indumentis Caesarem tunica texit et paludamento communi, eum post haec nihil passurum velut mandato principis iurandi crebritate confirmans et statim inquit exsurge et inopinum carpento privato inpositum ad Histriam duxit prope oppidum Polam, ubi quondam peremptum Constantini filium accepimus Crispum.
  85.       </p>
  86.       <p>
  87.         Primi igitur omnium statuuntur Epigonus et Eusebius ob nominum gentilitatem oppressi. praediximus enim Montium sub ipso vivendi termino his vocabulis appellatos fabricarum culpasse tribunos ut adminicula futurae molitioni pollicitos.
  88.       </p>
  89.       <p>
  90.         Eminuit autem inter humilia supergressa iam impotentia fines mediocrium delictorum nefanda Clematii cuiusdam Alexandrini nobilis mors repentina; cuius socrus cum misceri sibi generum, flagrans eius amore, non impetraret, ut ferebatur, per palatii pseudothyrum introducta, oblato pretioso reginae monili id adsecuta est, ut ad Honoratum tum comitem orientis formula missa letali omnino scelere nullo contactus idem Clematius nec hiscere nec loqui permissus occideretur.
  91.       </p>
  92.   
  93.  </div>
  94.   
  95.     <div id="xtd_bar_test2">
  96.  </div>
  97. </body>
  98. </html>


 
JAVASCRIPT

Code :
  1. // VARIABLES GLOBALES
  2. var xtd_lastY = 0;                         // position (verticale) de la souris
  3. var xtd_extendables = [];                  // objet sur lequel agir
  4. var xtd_minHeight = 40;                    // hauteur minimum
  5. var xtd_maxHeight;                         // hauteur maximum
  6. xtd_maxHeight = document.viewport.getHeight() - 100;
  7. // METHODES
  8. function xtd_listenResize(e) {             // lance d'écoute des mouvements de souris une fois l'objet sélectionné
  9.     if (!e) var e = window.event;
  10.      // récupère l'objet d'où vient l'évènement
  11.      var xtd_bar = Event.element(e);
  12.    
  13.     // pointe sur l'objet à redimensionner
  14.     xtd_extendables.push('xtd_ctn_'+xtd_bar.id.substr(8,xtd_bar.id.length-8));
  15.     // récupère la position (verticale) de la souris
  16.     xtd_lastY = Event.pointerY(e);
  17.          
  18.       xtd_bar.focus();          
  19.             
  20.     document.observe('mousemove', xtd_doResize);
  21.     document.observe('mouseup', xtd_endResize);
  22.     xtd_bar.observe('blur', xtd_endResize);
  23.     }
  24.      
  25.     function xtd_doResize(e) {                 // redimensionne l'objet à chaque déplacement de souris
  26.     if (!e) var e = window.event;
  27.      // récupère l'objet à redimensionner
  28.      var xtd_main = xtd_extendables[0];
  29.        
  30.     // calcul de la nouvelle taille de l'objet
  31.     var xtd_newHeight = $(xtd_main).getHeight() + Event.pointerY(e) - xtd_lastY;
  32.     if (xtd_newHeight < xtd_minHeight)
  33.      xtd_newHeight = xtd_minHeight;
  34.     if (xtd_newHeight > xtd_maxHeight)
  35.      xtd_newHeight = xtd_maxHeight;
  36.          
  37.     // mise à jour de la position (verticale) de la souris
  38.     xtd_lastY = Event.pointerY(e);
  39.        
  40.     // mise à jour de la taille de l'objet
  41.     $(xtd_main).style.height = xtd_newHeight+'px';
  42.     }
  43.     function xtd_endResize(e) {               // arrête l'écoute des mouvements de souris
  44.       // réinitialise l'objet à dimensionner
  45.     xtd_extendables.pop();
  46.    
  47.     document.stopObserving('mousemove', xtd_doResize);
  48.     document.stopObserving('mouseup', xtd_endResize);
  49.     }
  50.      
  51.     function xtd_init() {                     // ajoute les écouteurs d'évènements aux barres d'extension
  52.     // parcours de l'ensemble des éléments du document
  53.     var allTags = document.getElementsByTagName('*');
  54.     for (var i=0; i<allTags.length; i++) {
  55.      var xtd_extend = new RegExp('^xtd_bar_[a-zA-Z0-9_-]+', 'g');
  56.      // sélection des éléments respectant la nomenclature de redimensionnement
  57.      if ( xtd_extend.test(allTags[i].id) ) {
  58.       $(allTags[i].id).observe('mousedown', xtd_listenResize);
  59.      }
  60.    }
  61.     }
  62.      
  63.      
  64. // LANCEMENT DU SCRIPT AU CHARGEMENT DU DOCUMENT
  65.      
  66. document.observe('dom:loaded', xtd_init);


 
Le mécanisme me semble un peu lourd (parcours de l'ensemble des éléments du document + obligation d'ajouter une div simulant la bordure) et lorsque j'utilise le script dans un vrai contexte, les comportements sont abhérents (élément qui s'étire à la place d'un autre, élément qui s'étire sans suivre la souris, etc.).
 
Pourriez-vous me donner quelques petits conseils ?
 
Merci :)


Message édité par Agould le 20-03-2008 à 09:44:45
Reply

Marsh Posté le 19-03-2008 à 08:46:12   

Reply

Marsh Posté le 19-03-2008 à 15:49:38    

Les comportements hasardeux du script se limitent à priori à un mauvais calcul de la nouvelle taille de l'élément à redimensionner.
 

Code :
  1. var xtd_newHeight = $(xtd_main).getHeight() + Event.pointerY(e) - xtd_lastY;


 
La valeur de xtd_newHeight augmente quelque soit les valeurs de Event.pointerY(e) et xtd_lastY... ayant assez peu d'expérience en javascript, je n'arrive pas pour le moment à déceler la cause du problème.
 
Affaire à suivre...

Reply

Marsh Posté le 20-03-2008 à 09:11:00    

Epilogue de cette aventure passionnante :
 
Tout se passait bien dans le javascript (qui est toujours aussi lourdingue mais fonctionne).
-> le problème venait du fait que les padding et border n'étaient pas gérés -_-
 
Toujours est-il que si une solution plus élégante existe, je suis ouvert à toute suggestion.
 
Merci  :jap:

Reply

Marsh Posté le 20-03-2008 à 09:56:35    

Bonjour, c'est encore moi (décidément pour peu de choses on rencontre bien des problèmes).
 
Maintenant que mon script fonctionne tant bien que mal, j'aimerai empêcher la sélection de texte lors du redimensionnement. (Cette pratique n'est à priori pas trop intrusive puisque les gens qui bloque le javascript ne pourront pas redimensionner l'élément et la problématique ne se posera donc pas.)
 
Les peu de pistes que j'ai trouvées sont :
 
bloque tout le temps la sélection

Code :
  1. <!-- Paste this code into an external JavaScript file named: disableSelect.js  -->
  2. /* This script and many more are available free online at
  3. The JavaScript Source :: http://javascript.internet.com
  4. Created by: James Nisbet (morBandit) :: http://www.bandit.co.nz/ */
  5. window.onload = function() {
  6.   document.onselectstart = function() {return false;} // ie
  7.   document.onmousedown = function() {return false;} // mozilla
  8. }
  9. /* You can attach the events to any element. In the following example
  10. I'll disable selecting text in an element with the id 'content'. */
  11. window.onload = function() {
  12.   var element = document.getElementById('content');
  13.   element.onselectstart = function () { return false; } // ie
  14.   element.onmousedown = function () { return false; } // mozilla
  15. }


 
J'étais aussi tombé sur une solution spécifique à Mozilla que je ne parviens pas à retrouver.
 
Quoiqu'il en soit, existe-t-il une solution cross browser pour ce comportement ?
 
Merci :)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed