come creare dei nuovi plug-in per mootools

[adelefxxxbooob]

up

[artorius]

scusa, ma li importi i more di Mootools? Sennò mica li puoi usari Drag e Resize

[adelefxxxbooob]

si certo!

[artorius]

no, secondo firebug Drag non lo importi...

[adelefxxxbooob]

a ecco!! mi ero dimenticato di metterlo!
scs adesso funziona! XD scusami!

edit: il drag funziona ma il resize no:

/* autore: Gabriel
* creato per: DarkSoft
* versione: 1.0 beta
* licenza: MIT-style license
*info:
*/
var MooWindow = new Class({

   Implements : Options,

   options: {
       prefisso: 'window' ,
       rezoom: 'true' ,
       zoom: 'true' ,
       drag: 'true' ,
       resize: 'true' ,
       height: '500' ,
       width: '500' ,
       min_height: '200' ,
       min_width: '200' ,
       container: 'container' ,
       table: 'table' ,
       min_resizeW: '250' ,
       min_resizeH: '35' ,   
       duration: '1000'
   },
initialize: function(el, options) {
  this.setOptions(options);
  var body = $(this.options.prefisso) ;
  var table = $(this.options.prefisso+'_table') ;
  var drag = $(this.options.prefisso+'_drag') ;
  var diminuiz = $(this.options.prefisso+'_zoom') ;
  var ingrand = $(this.options.prefisso+'_zoom2') ;
  var close = $(this.options.prefisso+'_close') ;  
  var resize = $(this.options.prefisso+'_resize') ;
  var toggle_height = new Fx.Toggle(body, {
  duration: this.options.duration
  });
  var toggle_width = new Fx.Toggle(body, {
  duration: this.options.duration
  });
  var move = new Fx.Move(body, {
  duration: this.options.duration
  });

 if (this.options.drag == 'true'){
 var dragger = new Drag.Move(this.options.prefisso,{container: this.options.container , 
 onStart: function(){
 this.options.table.setStyle('border','1px black dotted');
 this.options.table.fade('out');},
 onComplete: function(){
 this.options.table.setStyle('border','0px black dotted');
 this.options.table.fade('in');}
 });
 
drag.addEvent('click', function(){
dragger.attach();
resizer.detach();}.bindWithEvent(this));
}
if (this.options.resize == 'true'){
var minW = this.options.min_resizeW, minH = this.options.min_resizeH;
var resizer =  body.makeResizable({
onStart: function(){
resizer.attach();
dragger.detach();
body.setStyle('border','1px black dotted');
table.fade('out'); },
onDrag: function(div){
var size = div.getSize();
if(size.x < minW)div.setStyle('width', minW);
if(size.y < minH)div.setStyle('height', minH);},
onComplete: function(){
body.setStyle('border','0px black dotted');
table.fade('in');
resizer.detach();
dragger.attach();}
});

resize.addEvent('click',function(){
resizer.attach();
dragger.detach();
}.bindWithEvent(this)) ;
resizer.detach();
dragger.attach();
}
  body.fade(0) ;
  toggle_height.toggleProperty('height', 0, 0, true);
  toggle_width.toggleProperty('width', 0, 0, true); 
  $(el).addEvent('click',function(){
  body.fade(1);
  toggle_height.toggleProperty('height', this.options.height, this.options.height, true);
  toggle_width.toggleProperty('width', this.options.width, this.options.width, true);    
  }.bindWithEvent(this)) ;
 if (this.options.rezoom == 'true'){
  diminuiz.addEvent('click',function(){
  toggle_height.toggleProperty('height', this.options.min_height, this.options.min_height, true);
  toggle_width.toggleProperty('width', this.options.min_width, this.options.min_width, true);
   move.start(50,50) ;
 }.bindWithEvent(this)) ;
 } else {
 return ;
 }
 if (this.options.zoom == 'true'){
 ingrand.addEvent('click',function(){
 toggle_height.toggleProperty('height', 640, 640, true);
 toggle_width.toggleProperty('width', 1024, 1024, true);
 move.start(0,0) ;
 }.bindWithEvent(this)) ;
 }  else {
 return ;
 }
  close.addEvent('click',function(){
  body.fade(0);
  toggle_height.toggleProperty('height', 0, 0, true);
  toggle_width.toggleProperty('width', 0, 0, true);    
  }.bindWithEvent(this)) ;
  drag.addEvent('click',function(){
  resizer.detach();
  dragger.attach();
  }.bindWithEvent(this)) ;
  resize.addEvent('click',function(){
  resizer.attach();
  dragger.detach();
  }.bindWithEvent(this)) ;
}
 }); 

xkè?

[adelefxxxbooob]

scs altro errore mio XDDDDDDDD
senti 1 ultimissima cosa come posso mettere nelle opzioni l'evento onDrag??

[artorius]

cioè che puoi indicare nelle opzioni la funzione da eseguire all'evento onDrag?

beh, fai:

var MooWindow = new Class({ 

   Implements : Options, 

   options: { 
       prefisso: 'window' , 
       rezoom: 'true' , 
       zoom: 'true' , 
       drag: 'true' , 
       resize: 'true' , 
       height: '500' ,
       onDrag : $empty,
...
   var dragger = new Drag.Move(this.options.prefisso,{container: this.options.container , 
      onStart: function(){ 
         this.options.table.setStyle('border','1px black dotted'); 
         this.options.table.fade('out');}, 
      onComplete: function(){ 
         this.options.table.setStyle('border','0px black dotted'); 
         this.options.table.fade('in');},
      onDrag : this.options.onDrag 
   }); 

[adelefxxxbooob]

si si!
che quando muovo la finestra posso scegliere cosa fare
del tipo:

var test_window = new MooWindow('open',{
'onDrag': function(){
//mia funzione
}
}); 

[artorius]

eh, quello che ho scritto...

[adelefxxxbooob]

a ok!
ultimissisisisisimisima cosa:

 var minW = this.options.min_resizeW, minH = this.options.min_resizeH;
 var resizer =  body.makeResizable({
 onStart: function(){
 resizer.attach();
 dragger.detach();
 body.setStyle('border','1px black dotted');
 table.fade('out'); },
 onDrag: function(div){
 var size = div.getSize();
 if(size.x < minW){div.setStyle('width', minW)};
 if(size.y < minH){div.setStyle('height', minH);}},
 onComplete: function(){
 body.setStyle('border','0px black dotted');
 table.fade('in');
 resizer.detach();
 dragger.attach();}
 }); 

in queste righe:

 var minW = this.options.min_resizeW, minH = this.options.min_resizeH;
 onDrag: function(div){
 var size = div.getSize();
 if(size.x < minW){div.setStyle('width', minW)};
 if(size.y < minH){div.setStyle('height', minH);}}, 

cosa c'è che non va?