src/js/layout.js
author hamidouk
Wed, 28 Dec 2011 14:41:43 +0100
branchpopcorn-port
changeset 539 3ba5b82aebb6
parent 525 af5248f4d37e
child 542 b33516ab03e8
permissions -rw-r--r--
added code to select widgets to the layoutmanager, similar to what jquery does.
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
111
df08c7f9535c added a basic layout manager.
hamidouk
parents:
diff changeset
     1
/* layout.js - very basic layout management */
df08c7f9535c added a basic layout manager.
hamidouk
parents:
diff changeset
     2
525
af5248f4d37e commented layout.js for jsdoc.
hamidouk
parents: 499
diff changeset
     3
/**
af5248f4d37e commented layout.js for jsdoc.
hamidouk
parents: 499
diff changeset
     4
  @class a layout manager manages a div and the layout of objects
111
df08c7f9535c added a basic layout manager.
hamidouk
parents:
diff changeset
     5
  inside it.
df08c7f9535c added a basic layout manager.
hamidouk
parents:
diff changeset
     6
*/
df08c7f9535c added a basic layout manager.
hamidouk
parents:
diff changeset
     7
IriSP.LayoutManager = function(options) {
df08c7f9535c added a basic layout manager.
hamidouk
parents:
diff changeset
     8
    this._Popcorn = null;
df08c7f9535c added a basic layout manager.
hamidouk
parents:
diff changeset
     9
    this._widgets = [];
df08c7f9535c added a basic layout manager.
hamidouk
parents:
diff changeset
    10
    
113
ebfd0d17e427 small changes to the layout manager.
hamidouk
parents: 111
diff changeset
    11
    this._div = "LdtPlayer";
111
df08c7f9535c added a basic layout manager.
hamidouk
parents:
diff changeset
    12
    this._width = 640;
df08c7f9535c added a basic layout manager.
hamidouk
parents:
diff changeset
    13
    
df08c7f9535c added a basic layout manager.
hamidouk
parents:
diff changeset
    14
    if (options === undefined) {
df08c7f9535c added a basic layout manager.
hamidouk
parents:
diff changeset
    15
      options = {};
df08c7f9535c added a basic layout manager.
hamidouk
parents:
diff changeset
    16
    };
df08c7f9535c added a basic layout manager.
hamidouk
parents:
diff changeset
    17
    
117
b0a699baf3f1 some renames to the layout internal structures.
hamidouk
parents: 113
diff changeset
    18
    if (options.hasOwnProperty('container')) {
b0a699baf3f1 some renames to the layout internal structures.
hamidouk
parents: 113
diff changeset
    19
      this._div = options.container;
111
df08c7f9535c added a basic layout manager.
hamidouk
parents:
diff changeset
    20
    }
df08c7f9535c added a basic layout manager.
hamidouk
parents:
diff changeset
    21
df08c7f9535c added a basic layout manager.
hamidouk
parents:
diff changeset
    22
    if (options.hasOwnProperty('width')) {
df08c7f9535c added a basic layout manager.
hamidouk
parents:
diff changeset
    23
      this._width = options.width;
df08c7f9535c added a basic layout manager.
hamidouk
parents:
diff changeset
    24
    }    
df08c7f9535c added a basic layout manager.
hamidouk
parents:
diff changeset
    25
    
df08c7f9535c added a basic layout manager.
hamidouk
parents:
diff changeset
    26
    if (options.hasOwnProperty('height')) {
df08c7f9535c added a basic layout manager.
hamidouk
parents:
diff changeset
    27
      this._height = options.height;
df08c7f9535c added a basic layout manager.
hamidouk
parents:
diff changeset
    28
    } 
df08c7f9535c added a basic layout manager.
hamidouk
parents:
diff changeset
    29
    
113
ebfd0d17e427 small changes to the layout manager.
hamidouk
parents: 111
diff changeset
    30
    /* this is a shortcut */
ebfd0d17e427 small changes to the layout manager.
hamidouk
parents: 111
diff changeset
    31
    this.selector = IriSP.jQuery("#" + this._div);
ebfd0d17e427 small changes to the layout manager.
hamidouk
parents: 111
diff changeset
    32
    
ebfd0d17e427 small changes to the layout manager.
hamidouk
parents: 111
diff changeset
    33
    this.selector.css("width", this._width);
159
de92bfdcbe4c removed default height from layout.js.
hamidouk
parents: 138
diff changeset
    34
    
de92bfdcbe4c removed default height from layout.js.
hamidouk
parents: 138
diff changeset
    35
    if (this._height !== undefined)
de92bfdcbe4c removed default height from layout.js.
hamidouk
parents: 138
diff changeset
    36
      this.selector.css("height", this._height);
111
df08c7f9535c added a basic layout manager.
hamidouk
parents:
diff changeset
    37
};
df08c7f9535c added a basic layout manager.
hamidouk
parents:
diff changeset
    38
525
af5248f4d37e commented layout.js for jsdoc.
hamidouk
parents: 499
diff changeset
    39
/** 
af5248f4d37e commented layout.js for jsdoc.
hamidouk
parents: 499
diff changeset
    40
   Set the popcorn instance used by the manager.
af5248f4d37e commented layout.js for jsdoc.
hamidouk
parents: 499
diff changeset
    41
   
af5248f4d37e commented layout.js for jsdoc.
hamidouk
parents: 499
diff changeset
    42
   we need this special setter because of a chicken and egg problem :
111
df08c7f9535c added a basic layout manager.
hamidouk
parents:
diff changeset
    43
   we want the manager to use popcorn but the popcorn div will be managed
df08c7f9535c added a basic layout manager.
hamidouk
parents:
diff changeset
    44
   by the manager. So we need a way to set the instance the manager uses
df08c7f9535c added a basic layout manager.
hamidouk
parents:
diff changeset
    45
*/
df08c7f9535c added a basic layout manager.
hamidouk
parents:
diff changeset
    46
   
df08c7f9535c added a basic layout manager.
hamidouk
parents:
diff changeset
    47
IriSP.LayoutManager.prototype.setPopcornInstance = function(popcorn) {
df08c7f9535c added a basic layout manager.
hamidouk
parents:
diff changeset
    48
    this._Popcorn = popcorn;
df08c7f9535c added a basic layout manager.
hamidouk
parents:
diff changeset
    49
}
df08c7f9535c added a basic layout manager.
hamidouk
parents:
diff changeset
    50
525
af5248f4d37e commented layout.js for jsdoc.
hamidouk
parents: 499
diff changeset
    51
/** create a subdiv with an unique id, and a spacer div as well.
539
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
    52
    @param widgetName the name of the widget.
525
af5248f4d37e commented layout.js for jsdoc.
hamidouk
parents: 499
diff changeset
    53
    @return an array of the form [createdivId, spacerdivId].
af5248f4d37e commented layout.js for jsdoc.
hamidouk
parents: 499
diff changeset
    54
*/
539
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
    55
IriSP.LayoutManager.prototype.createDiv = function(widgetName) {
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
    56
    if (typeof(widgetName) === "undefined")
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
    57
       widgetName = "";
315
4466bf448426 updated layout and init to give more meaningful names to the widgets divs.
hamidouk
parents: 288
diff changeset
    58
539
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
    59
    var newDiv = IriSP.guid(this._div + "_widget_" + widgetName + "_");
499
0a09ff3db7c2 made the layout manager use our own guid generation routine.
hamidouk
parents: 468
diff changeset
    60
    var spacerDiv = IriSP.guid("LdtPlayer_spacer_");
539
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
    61
    this._widgets.push([widgetName, newDiv]);    
217
ec3e6d34462c fixed css positioning bug.
hamidouk
parents: 159
diff changeset
    62
468
651528a4f795 fixed a couple layout bugs that didn't appear in integration testing.
hamidouk
parents: 356
diff changeset
    63
    var divTempl = "<div id='{{id}}' style='width: {{width}}px; position: relative;'></div";
651528a4f795 fixed a couple layout bugs that didn't appear in integration testing.
hamidouk
parents: 356
diff changeset
    64
    var spacerTempl = "<div id='{{spacer_id}}' style='width: {{width}}px; position: relative; height: {{spacer_div_height}};'></div";
113
ebfd0d17e427 small changes to the layout manager.
hamidouk
parents: 111
diff changeset
    65
    
468
651528a4f795 fixed a couple layout bugs that didn't appear in integration testing.
hamidouk
parents: 356
diff changeset
    66
    var divCode = Mustache.to_html(divTempl, {id: newDiv, width: this._width});
651528a4f795 fixed a couple layout bugs that didn't appear in integration testing.
hamidouk
parents: 356
diff changeset
    67
    var spacerCode = Mustache.to_html(spacerTempl, {spacer_id: spacerDiv, width: this._width,
651528a4f795 fixed a couple layout bugs that didn't appear in integration testing.
hamidouk
parents: 356
diff changeset
    68
                                                    spacer_div_height: IriSP.widgetsDefaults.LayoutManager.spacer_div_height });
287
5c7495102bd7 added a spacer div to simplify some graphic animations.
hamidouk
parents: 217
diff changeset
    69
356
1a84cdc88d9f spacer are now inserted after the div instead of before. It makes more sense
hamidouk
parents: 315
diff changeset
    70
    this.selector.append(divCode);
287
5c7495102bd7 added a spacer div to simplify some graphic animations.
hamidouk
parents: 217
diff changeset
    71
    this.selector.append(spacerCode);
356
1a84cdc88d9f spacer are now inserted after the div instead of before. It makes more sense
hamidouk
parents: 315
diff changeset
    72
287
5c7495102bd7 added a spacer div to simplify some graphic animations.
hamidouk
parents: 217
diff changeset
    73
    return [newDiv, spacerDiv];
113
ebfd0d17e427 small changes to the layout manager.
hamidouk
parents: 111
diff changeset
    74
};
539
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
    75
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
    76
/** return a new slice    
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
    77
    @return an IriSP.LayoutManager.sliceObject
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
    78
*/
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
    79
IriSP.LayoutManager.prototype.slice = function(widget) {
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
    80
  var end = (this._widgets.length > 0) ? this._widgets.length - 1 : 0;
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
    81
  var s = new IriSP.LayoutManager.sliceObject(0, end, this)
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
    82
  return s;
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
    83
};
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
    84
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
    85
/** sliceObjects represent a group of widget managed by a layout manager.
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
    86
    They expose convenient methods for selecting portions of widgets
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
    87
    They can be chained in this way :
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
    88
    layoutManager.slice().before("ArrowWidget").after("PolemicWidget");
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
    89
*/
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
    90
IriSP.LayoutManager.sliceObject = function(start, end, layoutManager) {
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
    91
  this.start = start;
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
    92
  this.end = end;
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
    93
  this._layoutManager = layoutManager;
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
    94
};
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
    95
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
    96
/** returns a slice of the array corresponding to the objects after widget
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
    97
    @param widget the widget to filter with */
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
    98
IriSP.LayoutManager.sliceObject.prototype.after = function(widget) {
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
    99
  var i;
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
   100
  for(i = this.start; i < this.end; i++)
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
   101
    if (this._layoutManager._widgets[i][0] === widget)
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
   102
      break;
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
   103
      
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
   104
  this.start = i;
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
   105
  console.log(this.start);
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
   106
  return this;
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
   107
}
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
   108
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
   109
/** returns a slice of the array corresponding to the objects before widget
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
   110
    @param widget the widget to filter with */
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
   111
IriSP.LayoutManager.sliceObject.prototype.before = function(widget) {
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
   112
  var i;
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
   113
  for(i = this.start; i < this.end; i++)
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
   114
    if (this._layoutManager._widgets[i][0] === widget)
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
   115
      break;
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
   116
      
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
   117
  this.end = i;
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
   118
  
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
   119
  return this;
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
   120
}
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
   121
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
   122
/** return a jquery selector corresponding to the defined slice */
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
   123
IriSP.LayoutManager.sliceObject.prototype.jQuerySelector = function() {
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
   124
  return this._layoutManager.selector.children("").slice(this.start, this.end);  
3ba5b82aebb6 added code to select widgets to the layoutmanager, similar to what jquery does.
hamidouk
parents: 525
diff changeset
   125
};