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', main.portal.strings['hide'], [['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', main.portal.strings['delete'], [['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     var strhide = main.portal.strings['hide'];
 224     var strshow = main.portal.strings['show'];
 225     if (YAHOO.util.Dom.hasClass(this.getEl(), 'hidden')) {
 226         this.getEl().className = this.originalClass;
 227         this.viewbutton.childNodes[0].src = this.viewbutton.childNodes[0].src.replace(/show.gif/i, 'hide.gif');
 228         this.viewbutton.childNodes[0].alt = this.viewbutton.childNodes[0].alt.replace(strshow, strhide);
 229         this.viewbutton.title = this.viewbutton.title.replace(strshow, strhide);
 230
 231         if (!isCosmetic) {
 232             main.connect('POST', 'class=block&field=visible', null,
 233                     'value=1&instanceId='+this.instanceId);
 234         }
 235     } else {
 236         this.originalClass = this.getEl().className;
 237         this.getEl().className = "hidden sideblock";
 238         this.viewbutton.childNodes[0].src = this.viewbutton.childNodes[0].src.replace(/hide.gif/i,'show.gif');
 239         this.viewbutton.childNodes[0].alt = this.viewbutton.childNodes[0].alt.replace(strhide, strshow);
 240         this.viewbutton.title = this.viewbutton.title.replace(strhide, strshow);
 241
 242         if (!isCosmetic) {
 243             main.connect('POST', 'class=block&field=visible', null,
 244                     'value=0&instanceId='+this.instanceId);
 245         }
 246     }
 247 }
 248
 249
 250 block_class.prototype.delete_button = function() {
 251     // Remove from local model.
 252     if (main.rightcolumn.has_block(this)) {
 253         main.rightcolumn.remove_block(this);
 254     } else if (main.leftcolumn.has_block(this)) {
 255         main.leftcolumn.remove_block(this);
 256     }
 257     // Remove block from the drag and drop group in YUI.
 258     this.removeFromGroup('blocks');
 259
 260     // Remove from remote model.
 261     main.connect('POST', 'class=block&action=DELETE&instanceId='+this.instanceId);
 262
 263     // Remove from view
 264     main.blocks.splice(main.get_block_index(this), 1);
 265     this.getEl().parentNode.removeChild(this.getEl());
 266
 267     if (this.debug) {
 268         YAHOO.log("Deleting "+this.getEl().id);
 269     }
 270 }
 271
 272
 273 block_class.prototype.updatePosition = function(index, columnId) {
 274     //update the db for the position
 275     main.connectQueue_add('POST', 'class=block&field=position', null,
 276             'value='+index+'&column='+columnId+'&instanceId='+this.instanceId);
 277
 278     if (this.debug) {
 279         YAHOO.log("Updating position of "+this.getEl().id+" to index "+index+" on column "+columnId);
 280     }
 281 }
 282
 283
 284 /*
 285  * column class, DD targets
 286  */
 287
 288 function column_class(id,group,config,ident){
 289     this.init_column(id,group,config,ident);
 290 }
 291 YAHOO.extend(column_class, YAHOO.util.DDTarget);
 292
 293 column_class.prototype.debug = false;
 294
 295 column_class.prototype.init_column = function(id, group,config,ident){
 296         if (!id) { return; }
 297
 298         this.initTarget(id,group,config);
 299         this.blocks = new Array();
 300         this.ident = ident;
 301
 302 //      YAHOO.log("init_column "+id+"-"+el.id);
 303         this.region = YAHOO.util.Region.getRegion(id);
 304
 305     }
 306
 307
 308 column_class.prototype.find_sub_collision = function(dragRegion){
 309         if(this.debug)YAHOO.log("Finding Collisions on "+this.getEl().id+" with "+this.blocks.length+" blocks");
 310         //find collisions with sub_elements(blocks), return array of collisions with regions of collision
 311         var collisions = new Array();
 312         for(i=0;i<this.blocks.length;i++){
 313             if(this.debug)YAHOO.log("testing region "+this.blocks[i].region+" against" + dragRegion + "intersect ="+this.blocks[i].region.intersect(dragRegion));
 314             var intersect = this.blocks[i].region.intersect(dragRegion);
 315             if(intersect != null){
 316                 index = collisions.length;
 317                 collisions[index] = new Array();
 318                 collisions[index][0] = i;
 319                 collisions[index][1] = this.blocks[i].region.intersect(dragRegion);
 320                 if(this.debug)YAHOO.log(index+" Collides with "+this.blocks[i].getEl().id+" area" + collisions[index][1].getArea());
 321             }
 322         }
 323       return collisions;
 324     }
 325
 326 column_class.prototype.add_block = function(el){
 327        this.blocks[this.blocks.length] = el;
 328      }
 329
 330 column_class.prototype.insert_block = function(el,targetel){
 331         var blockcount = this.blocks.length;
 332         var found = -1;
 333         var tempStore = nextStore = null;
 334         for(var i=0;i<blockcount;i++){
 335             if(found > 0){
 336                 tempStore = this.blocks[i];
 337                 this.blocks[i] = nextStore;
 338                 nextStore = tempStore;
 339
 340             }else if(this.blocks[i] == targetel){
 341                 found = i;
 342                 nextStore = this.blocks[i];
 343                 this.blocks[i] = el;
 344                 blockcount++;
 345             }
 346         }
 347
 348         if(found<0){//insert at end
 349             found = this.blocks.length;
 350             this.add_block(el);
 351
 352         }
 353
 354         el.updatePosition(found,this.ident);
 355     }
 356
 357 column_class.prototype.has_block = function(el){
 358         var blockcount = this.blocks.length;
 359         for(var i=0;i<blockcount;i++)
 360             if(this.blocks[i]==el)
 361                  return true;
 362         return false;
 363     }
 364
 365
 366 column_class.prototype.remove_block = function(el){
 367         var blockcount = this.blocks.length;
 368         var found = false;
 369         for(var i=0;i<blockcount;i++){
 370             if(this.blocks[i]==el || found){
 371                if(!found)
 372                     found = true;
 373
 374                if(i < blockcount-1){
 375                    this.blocks[i] = this.blocks[i+1];
 376                }else{
 377                     this.blocks.pop();
 378                }
 379             }
 380         }
 381         YAHOO.log("column "+this.indent+" has "+blockcount+"blocks");
 382     }
 383
 384
 385