[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">
  6. <head>
  8.  <script type="text/javascript" src="./js/prototype.js"></script>
  9.  <script type="text/javascript" src="./js/scriptaculous.js"></script>
  11.  <script type="text/javascript" src="./xtd.js"></script>
  13.  <style type="text/css">
  15.   * { margin: 0; padding: 0; border: 0; }
  17.   #xtd_ctn_test1 {
  18.      display:block;
  19.      width: 500px;
  20.      height: 300px;
  21.      margin: 0 auto;
  22.      overflow: auto;
  23.      background: rgb(204,204,255);
  24.       }
  25.      
  26.       #xtd_bar_test1 {
  27.          display: block;
  28.          width: 500px;
  29.          height: 5px;
  30.      margin: 0 auto;
  31.          background: grey;
  32.          cursor: s-resize;
  33.       }
  34.      
  35.       #xtd_ctn_test2 {
  36.      display:block;
  37.      width: 500px;
  38.      height: 300px;
  39.      margin: 0 auto;
  40.      overflow: auto;
  41.      background: rgb(255,204,204);
  42.       }
  43.      
  44.       #xtd_bar_test2 {
  45.          display: block;
  46.          width: 500px;
  47.          height: 5px;
  48.      margin: 0 auto;
  49.          background: grey;
  50.          cursor: s-resize;
  51.       }
  53.  </style>
  55. </head>
  57. <body>
  59.   <div id="ctr">
  60.  
  61.  <div id="xtd_ctn_test1">
  62.   
  63.    <p>
  64.         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.
  65.       </p>
  66.       <p>
  67.         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.
  68.       </p>
  69.       <p>
  70.         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.
  71.       </p>
  72.       <p>
  73.         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.
  74.       </p>
  75.       <p>
  76.         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.
  77.       </p>
  78.   
  79.  </div>
  80.   
  81.     <div id="xtd_bar_test1">
  82.  </div>
  84.  </div>
  86.  <br /><br /><br /><br /><br />
  88.  <div id="xtd_ctn_test2">
  89.   
  90.    <p>
  91.         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.
  92.       </p>
  93.       <p>
  94.         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.
  95.       </p>
  96.       <p>
  97.         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.
  98.       </p>
  99.       <p>
  100.         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.
  101.       </p>
  102.       <p>
  103.         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.
  104.       </p>
  105.   
  106.  </div>
  107.   
  108.     <div id="xtd_bar_test2">
  109.  </div>
  111. </body>
  113. </html>


 
JAVASCRIPT

Code :
  1. // VARIABLES GLOBALES
  3. var xtd_lastY = 0;                         // position (verticale) de la souris
  4. var xtd_extendables = [];                  // objet sur lequel agir
  5. var xtd_minHeight = 40;                    // hauteur minimum
  6. var xtd_maxHeight;                         // hauteur maximum
  7. xtd_maxHeight = document.viewport.getHeight() - 100;
  10. // METHODES
  12. function xtd_listenResize(e) {             // lance d'écoute des mouvements de souris une fois l'objet sélectionné
  13.     if (!e) var e = window.event;
  14.      // récupère l'objet d'où vient l'évènement
  15.      var xtd_bar = Event.element(e);
  16.    
  17.     // pointe sur l'objet à redimensionner
  18.     xtd_extendables.push('xtd_ctn_'+xtd_bar.id.substr(8,xtd_bar.id.length-8));
  19.     // récupère la position (verticale) de la souris
  20.     xtd_lastY = Event.pointerY(e);
  21.          
  22.       xtd_bar.focus();          
  23.             
  24.     document.observe('mousemove', xtd_doResize);
  25.     document.observe('mouseup', xtd_endResize);
  26.     xtd_bar.observe('blur', xtd_endResize);
  27.     }
  28.      
  29.     function xtd_doResize(e) {                 // redimensionne l'objet à chaque déplacement de souris
  30.     if (!e) var e = window.event;
  31.      // récupère l'objet à redimensionner
  32.      var xtd_main = xtd_extendables[0];
  33.        
  34.     // calcul de la nouvelle taille de l'objet
  35.     var xtd_newHeight = $(xtd_main).getHeight() + Event.pointerY(e) - xtd_lastY;
  36.     if (xtd_newHeight < xtd_minHeight)
  37.      xtd_newHeight = xtd_minHeight;
  38.     if (xtd_newHeight > xtd_maxHeight)
  39.      xtd_newHeight = xtd_maxHeight;
  40.          
  41.     // mise à jour de la position (verticale) de la souris
  42.     xtd_lastY = Event.pointerY(e);
  43.        
  44.     // mise à jour de la taille de l'objet
  45.     $(xtd_main).style.height = xtd_newHeight+'px';
  46.     }
  47.     function xtd_endResize(e) {               // arrête l'écoute des mouvements de souris
  48.       // réinitialise l'objet à dimensionner
  49.     xtd_extendables.pop();
  50.    
  51.     document.stopObserving('mousemove', xtd_doResize);
  52.     document.stopObserving('mouseup', xtd_endResize);
  53.     }
  54.      
  55.     function xtd_init() {                     // ajoute les écouteurs d'évènements aux barres d'extension
  56.     // parcours de l'ensemble des éléments du document
  57.     var allTags = document.getElementsByTagName('*');
  58.     for (var i=0; i<allTags.length; i++) {
  59.      var xtd_extend = new RegExp('^xtd_bar_[a-zA-Z0-9_-]+', 'g');
  60.      // sélection des éléments respectant la nomenclature de redimensionnement
  61.      if ( xtd_extend.test(allTags[i].id) ) {
  62.       $(allTags[i].id).observe('mousedown', xtd_listenResize);
  63.      }
  64.    }
  65.     }
  66.      
  67.      
  68. // LANCEMENT DU SCRIPT AU CHARGEMENT DU DOCUMENT
  69.      
  70. 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  -->
  3. /* This script and many more are available free online at
  4. The JavaScript Source :: http://javascript.internet.com
  5. Created by: James Nisbet (morBandit) :: http://www.bandit.co.nz/ */
  7. window.onload = function() {
  8.   document.onselectstart = function() {return false;} // ie
  9.   document.onmousedown = function() {return false;} // mozilla
  10. }
  13. /* You can attach the events to any element. In the following example
  14. I'll disable selecting text in an element with the id 'content'. */
  16. window.onload = function() {
  17.   var element = document.getElementById('content');
  18.   element.onselectstart = function () { return false; } // ie
  19.   element.onmousedown = function () { return false; } // mozilla
  20. }


 
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