lib/ajax/block_classes.js

   1 /**
   2  * library for ajaxcourse formats, the classes and related functions for drag and drop blocks
   3  *
   4  * this library requires a 'main' object created in calling document
   5  *
   6  * $Id$
   7  */
   8
   9
  10 //set Drag and Drop to Intersect mode:
  11 YAHOO.util.DDM.mode = YAHOO.util.DDM.INTERSECT;
  12
  13
  14 /**
  15  * class for draggable block, extends YAHOO.util.DDProxy
  16  */
  17 function block_class(id,group,config){
  18     this.init_block(id,group,config);
  19 }
  20 YAHOO.extend(block_class, YAHOO.util.DDProxy);
  21
  22 block_class.prototype.debug = false;
  23
  24
  25 block_class.prototype.init_block = function(id, sGroup, config) {
  26
  27     if (!id) {
  28         return;
  29     }
  30
  31     //Drag and Drop
  32     this.init(id, sGroup, config);
  33     this.initFrame();
  34     this.createFrame();
  35
  36     this.is = 'block';
  37     this.instanceId = this.getEl().id.replace(/inst/i, '');
  38
  39     // Add the drag class (move handle) only to blocks that need it.
  40     YAHOO.util.Dom.addClass(this.getEl(), 'drag');
  41
  42     this.addInvalidHandleType('a');
  43
  44     var s = this.getEl().style;
  45     s.opacity = 0.76;
  46     s.filter = "alpha(opacity=76)";
  47
  48     // specify that this is not currently a drop target
  49     this.isTarget = false;
  50
  51     this.region = YAHOO.util.Region.getRegion(this.getEl());
  52     this.type = block_class.TYPE;
  53
  54     //DHTML
  55     this.viewbutton = null;
  56     this.originalClass = this.getEl().className;
  57
  58     this.init_buttons();
  59 }
  60
  61
  62 block_class.prototype.startDrag = function(x, y) {
  63     //operates in intersect mode
  64     YAHOO.util.DDM.mode = YAHOO.util.DDM.INTERSECT;
  65
  66     YAHOO.log(this.id + " startDrag");
  67
  68     var dragEl = this.getDragEl();
  69     var clickEl = this.getEl();
  70
  71     dragEl.innerHTML = clickEl.innerHTML;
  72     dragEl.className = clickEl.className;
  73     dragEl.style.color = this.DDM.getStyle(clickEl, "color");;
  74     dragEl.style.backgroundColor = this.DDM.getStyle(clickEl, "backgroundColor");
  75     dragEl.style.border = '0px';
  76
  77     var s = clickEl.style;
  78     s.opacity = .1;
  79     s.filter = "alpha(opacity=10)";
  80
  81     var targets = YAHOO.util.DDM.getRelated(this, true);
  82     YAHOO.log(targets.length + " targets");
  83
  84     //restyle side boxes to highlight
  85     for (var i=0; i<targets.length; i++) {
  86
  87         var targetEl = targets[i].getEl();
  88
  89         targetEl.style.background = "#fefff0";
  90         targetEl.opacity = .3;
  91         targetEl.filter = "alpha(opacity=30)";
  92     }
  93     }
  94
  95 block_class.prototype.endDrag = function() {
  96     // reset the linked element styles
  97     var s = this.getEl().style;
  98     s.opacity = 1;
  99     s.filter = "alpha(opacity=100)";
 100     this.resetTargets();
 101     }
 102
 103
 104 block_class.prototype.onDragDrop = function(e, id) {
 105     // get the drag and drop object that was targeted
 106     var oDD;
 107
 108     if ("string" == typeof id) {
 109         oDD = YAHOO.util.DDM.getDDById(id);
 110     } else {
 111         oDD = YAHOO.util.DDM.getBestMatch(id);
 112     }
 113
 114     var el = this.getEl();
 115
 116     if (this.debug) {
 117         YAHOO.log("id="+id+" el="+e+" x="+YAHOO.util.Dom.getXY(this.getDragEl()));
 118     }
 119     //var collisions = this.find_collisions(e,id);
 120
 121     this.move_block(id);
 122     //YAHOO.util.DDM.moveToEl(el, oDD.getEl());
 123
 124     this.resetTargets();
 125 }
 126
 127
 128 block_class.prototype.find_target = function(column){
 129         var collisions = column.find_sub_collision(YAHOO.util.Region.getRegion(this.getDragEl()));
 130
 131         //determine position
 132         var insertbefore = null;
 133         if(collisions.length == 0)
 134           return;
 135
 136        insertbefore = column.blocks[collisions[0][0]];
 137
 138         return insertbefore;
 139     }
 140
 141 block_class.prototype.resetTargets = function() {
 142         // reset the target styles
 143         var targets = YAHOO.util.DDM.getRelated(this, true);
 144         for (var i=0; i<targets.length; i++) {
 145             var targetEl = targets[i].getEl();
 146             targetEl.style.background = "";
 147             targetEl.opacity = 1;
 148             targetEl.filter = "alpha(opacity=100)";
 149         }
 150     }
 151
 152 block_class.prototype.move_block = function(columnid){
 153         if(this.debug)YAHOO.log("Dropped on "+columnid[0]);
 154         //var column = YAHOO.util.DDM.getDDById(columnid[0].);
 155         column = columnid[0];
 156         var inserttarget = this.find_target(column);
 157
 158         if(this.debug && inserttarget != null)YAHOO.log("moving "+this.getEl().id+" before "+inserttarget.getEl().id+" - parentNode="+this.getEl().parentNode.id);
 159
 160         if(this == inserttarget){
 161             if(this.debug)YAHOO.log("Dropping on self, resetting");
 162             this.endDrag();
 163             return;
 164         }
 165
 166         //remove from document
 167         if(this.getEl().parentNode != null)
 168           this.getEl().parentNode.removeChild(this.getEl());
 169
 170         //insert into correct place
 171         if(inserttarget != null ){
 172             inserttarget.getEl().parentNode.insertBefore(this.getEl(),inserttarget.getEl());
 173
 174         }else if(column == main.rightcolumn){//if right side insert before admin block
 175             column.getEl().insertBefore(this.getEl(),main.adminBlock);
 176
 177         }else{
 178             column.getEl().appendChild(this.getEl());
 179         }
 180
 181         this.reset_regions();
 182
 183         //remove block from current array
 184         if(main.rightcolumn.has_block(this))
 185               main.rightcolumn.remove_block(this);
 186
 187         else if(main.leftcolumn.has_block(this))
 188               main.leftcolumn.remove_block(this);
 189
 190         //insert into new array
 191         column.insert_block(this,inserttarget);
 192
 193     }
 194
 195
 196 block_class.prototype.reset_regions = function() {
 197     var blockcount = main.blocks.length;
 198     for (i=0; i<blockcount; i++) {
 199         main.blocks[i].region = YAHOO.util.Region.getRegion(main.blocks[i].getEl());
 200     }
 201 }
 202
 203
 204 block_class.prototype.init_buttons = function() {
 205     var viewbutton = main.mk_button('a', '/t/hide.gif', [['class', 'icon hide']]);
 206     YAHOO.util.Event.addListener(viewbutton, 'click', this.toggle_hide, this, true);
 207
 208     var deletebutton = main.mk_button('a', '/t/delete.gif', [['class', 'icon delete']]);
 209     YAHOO.util.Event.addListener(deletebutton, 'click', this.delete_button, this, true);
 210
 211     this.viewbutton = viewbutton;
 212
 213     buttonCont = YAHOO.util.Dom.getElementsByClassName('commands', 'div', this.getEl())[0];
 214
 215     if (buttonCont) {
 216         buttonCont.appendChild(viewbutton);
 217         buttonCont.appendChild(deletebutton);
 218     }
 219 }
 220
 221
 222 block_class.prototype.toggle_hide = function(e, target, isCosmetic) {
 223
 224     if (YAHOO.util.Dom.hasClass(this.getEl(), 'hidden')) {
 225         this.getEl().className = this.originalClass;
 226         this.viewbutton.childNodes[0].src = this.viewbutton.childNodes[0].src.replace(/show.gif/i, 'hide.gif');
 227
 228         if (!isCosmetic) {
 229             main.connect('POST', 'class=block&field=visible', null,
 230                     'value=1&instanceId='+this.instanceId);
 231         }
 232     } else {
 233         this.originalClass = this.getEl().className;
 234         this.getEl().className = "hidden sideblock";
 235         this.viewbutton.childNodes[0].src = this.viewbutton.childNodes[0].src.replace(/hide.gif/i,'show.gif');
 236
 237         if (!isCosmetic) {
 238             main.connect('POST', 'class=block&field=visible', null,
 239                     'value=0&instanceId='+this.instanceId);
 240         }
 241     }
 242 }
 243
 244
 245 block_class.prototype.delete_button = function() {
 246     // Remove from local model.
 247     if (main.rightcolumn.has_block(this)) {
 248         main.rightcolumn.remove_block(this);
 249     } else if (main.leftcolumn.has_block(this)) {
 250         main.leftcolumn.remove_block(this);
 251     }
 252     // Remove block from the drag and drop group in YUI.
 253     this.removeFromGroup('blocks');
 254
 255     // Remove from remote model.
 256     main.connect('DELETE', 'class=block&instanceId='+this.instanceId);
 257
 258     // Remove from view
 259     main.blocks.splice(main.get_block_index(this), 1);
 260     this.getEl().parentNode.removeChild(this.getEl());
 261
 262     if (this.debug) {
 263         YAHOO.log("Deleting "+this.getEl().id);
 264     }
 265 }
 266
 267
 268 block_class.prototype.updatePosition = function(index, columnId) {
 269     //update the db for the position
 270     main.connectQueue_add('POST', 'class=block&field=position', null,
 271             'value='+index+'&column='+columnId+'&instanceId='+this.instanceId);
 272
 273     if (this.debug) {
 274         YAHOO.log("Updating position of "+this.getEl().id+" to index "+index+" on column "+columnId);
 275     }
 276 }
 277
 278
 279 /*
 280  * column class, DD targets
 281  */
 282
 283 function column_class(id,group,config,ident){
 284     this.init_column(id,group,config,ident);
 285 }
 286 YAHOO.extend(column_class, YAHOO.util.DDTarget);
 287
 288 column_class.prototype.debug = false;
 289
 290 column_class.prototype.init_column = function(id, group,config,ident){
 291         if (!id) { return; }
 292
 293         this.initTarget(id,group,config);
 294         this.blocks = new Array();
 295         this.ident = ident;
 296
 297 //      YAHOO.log("init_column "+id+"-"+el.id);
 298         this.region = YAHOO.util.Region.getRegion(id);
 299
 300     }
 301
 302
 303 column_class.prototype.find_sub_collision = function(dragRegion){
 304         if(this.debug)YAHOO.log("Finding Collisions on "+this.getEl().id+" with "+this.blocks.length+" blocks");
 305         //find collisions with sub_elements(blocks), return array of collisions with regions of collision
 306         var collisions = new Array();
 307         for(i=0;i<this.blocks.length;i++){
 308             if(this.debug)YAHOO.log("testing region "+this.blocks[i].region+" against" + dragRegion + "intersect ="+this.blocks[i].region.intersect(dragRegion));
 309             var intersect = this.blocks[i].region.intersect(dragRegion);
 310             if(intersect != null){
 311                 index = collisions.length;
 312                 collisions[index] = new Array();
 313                 collisions[index][0] = i;
 314                 collisions[index][1] = this.blocks[i].region.intersect(dragRegion);
 315                 if(this.debug)YAHOO.log(index+" Collides with "+this.blocks[i].getEl().id+" area" + collisions[index][1].getArea());
 316             }
 317         }
 318       return collisions;
 319     }
 320
 321 column_class.prototype.add_block = function(el){
 322        this.blocks[this.blocks.length] = el;
 323      }
 324
 325 column_class.prototype.insert_block = function(el,targetel){
 326         var blockcount = this.blocks.length;
 327         var found = -1;
 328         var tempStore = nextStore = null;
 329         for(var i=0;i<blockcount;i++){
 330             if(found > 0){
 331                 tempStore = this.blocks[i];
 332                 this.blocks[i] = nextStore;
 333                 nextStore = tempStore;
 334
 335             }else if(this.blocks[i] == targetel){
 336                 found = i;
 337                 nextStore = this.blocks[i];
 338                 this.blocks[i] = el;
 339                 blockcount++;
 340             }
 341         }
 342
 343         if(found<0){//insert at end
 344             found = this.blocks.length;
 345             this.add_block(el);
 346
 347         }
 348
 349         el.updatePosition(found,this.ident);
 350     }
 351
 352 column_class.prototype.has_block = function(el){
 353         var blockcount = this.blocks.length;
 354         for(var i=0;i<blockcount;i++)
 355             if(this.blocks[i]==el)
 356                  return true;
 357         return false;
 358     }
 359
 360
 361 column_class.prototype.remove_block = function(el){
 362         var blockcount = this.blocks.length;
 363         var found = false;
 364         for(var i=0;i<blockcount;i++){
 365             if(this.blocks[i]==el || found){
 366                if(!found)
 367                     found = true;
 368
 369                if(i < blockcount-1){
 370                    this.blocks[i] = this.blocks[i+1];
 371                }else{
 372                     this.blocks.pop();
 373                }
 374             }
 375         }
 376         YAHOO.log("column "+this.indent+" has "+blockcount+"blocks");
 377     }
 378
 379
 380