it/itf/static/js/itf/boxes.js

/*

*/
Ox.ItfPage = function(page, parentPanel) {
  var panelItems = [];
//  Ox.print("page", page);
//  GLOB_PAGE = page;
  for (var i=0; i < page.displayed.length; i++) {
    var t = page.displayed[i];
    var displayed = true;
    var panel = new Ox.ItfPanel(t, displayed);
    panelItems.push({
      'element': panel,
      'size': 300
    }); 
  }
  var hiddenPanel = new Ox.ItfHiddenPanelContainer();
  for (var j=0; j < page.hidden.length; j++) {
    var t = page.hidden[j];
    var displayed = false;
    var panel = new Ox.ItfPanel(t, displayed);
    hiddenPanel.addPanel(panel);
  }
  panelItems.push({
    'element': hiddenPanel,
    'size': 30
  });
  var that = app.$ui['ItfPage'] = new Ox.SplitPanel({
    orientation: 'vertical',
    id: 'ItfPage',
    elements: panelItems    
  });
  return that;     
};


Ox.ItfPanel = function(panelData, displayed) {
  var items = [];
  var id = "Panel" + panelData.id;
  for (var i=0; i < panelData.boxes.length; i++) {
    var t = panelData.boxes[i];
    var box = new Ox.ItfBox(t);
    items.push({
      'element': box,
      'size': 333
    });
  }
  var that = new Ox.SplitPanel({
    orientation: 'horizontal',
    id: id,
    elements: items
  });  
  that.displayed = displayed;
  return that;
};


Ox.ItfHiddenPanelContainer = function() {  
  return new Ox.Element();  
};


Ox.ItfBox = function(boxData) {
  var self = {};
  boxData.itfId = "Box" + boxData.id;
  var options = {
    'id': boxData.itfId,
    'title': boxData.title
  };
  var that = app.$ui[boxData.itfId] = new Ox.Element(options, self).addClass("itfBox");
  var $titlebar = new Ox.Bar({
    orientation: 'horizontal',
    size: 24
  }).appendTo(that);
  var $title = new Ox.Element()
    .addClass('OxTitle')
    .addClass('itfBoxTitle')
    .html(boxData.title)
    .appendTo($titlebar);
  var $buttons = new Ox.Element().appendTo($title).css({'position': 'absolute', 'top': '1px', 'right': '10px'});
  var boxButtons = ItfBoxTypes[boxData.type].buttons;
  for (var i=0; i<boxData.extra_buttons.length; i++) {
    var t = boxData.extra_buttons[i];
    boxButtons.push(t);
  }
//  var boxButtons = Ox.merge(ItfBoxTypes[boxData.type].buttons, boxData.extra_buttons);
  for (var i=0; i<boxButtons.length; i++) {
    var t = boxButtons[i];
    var button = new Ox.ItfButton(t, boxData).appendTo($buttons);  
  }   
  $contentContainer = new Ox.Element().css({'position': 'relative', 'height': '90%'}).appendTo(that);
  $content = ItfBoxTypes[boxData.type].render(boxData);
  $content.appendTo($contentContainer);
  that.$content = $content;
  return that;
};


Ox.ItfButton = function(buttonData, boxData) {
  var button = new Ox.Button({
    'id': boxData.itfId + "Button" + buttonData.id,
    'style': 'symbol',
    'title': buttonData.icon,
    'tooltip': buttonData.mouseover,
    'type': 'image'    
  });
  var that = ItfButtonTypes[buttonData.type](button, buttonData, boxData);
  return that;
};


Ox.ItfList = function(modelData, boxData, size, self) {
  var self = self || {};
  var size = size || 256;
  var id = "ModelList" + modelData.id;
  var listOptions = {
    'id': id,
    'model': modelData.model,
    'module': modelData.module,
    'boxId': boxData.itfId,
    'width': size,
    'scrollbarVisible': false,
    'hasComments': modelData.has_comments || false,
    'items': function(data, callback) {
      app.api.find(getFindParams(modelData, boxData, data), callback);
    },
    'max': 1,
    'columns': [
      {
        align: 'left',
        id: 'title',
        operator: '-',
        unique: false,
        visible: true,
        width: 256
      },
      {
        id: 'id',
        visible: false,
        unique: true  
      }
    ],
    'sort': modelData.sort_options  
  }
  var that = new Ox.TextList(listOptions, self);
  that.bindEvent("select", function(e, data) {
    if (data.ids.length === 0) {
      app.$ui.previewBox.$content.html('');
      return;
    }
//    app.$ui[options.boxId].$loading.start();
//    debugger;
    app.api.preview({
      model: listOptions.model,
      module: listOptions.module,
      id: data.ids[0]
    }, function(response) {
//      alert(JSON.stringify(response.data.data));
//      app.$ui[options.boxId].$loading.stop();
//      var data = add_newlines(response['data']);
      var html = $.tmpl(response['template'], response['data']);
      app.$ui.previewBox.$content.html(html);
    }); 
  });  

  return that;

  function getFindParams(modelData, boxData, data) {
    var box = app.$ui[boxData.itfId];
    data['search'] = '';
    data['model'] = modelData.model;
    data['module'] = modelData.module;
    return data;
  }
};