      1 pockets.ui = {};
      2
      3 /**
      4  * @returns window
      5  */
      6 pockets.ui.getWindow = function(controller) {
      7   return controller ? controller.window : window;
      8 };
      9
     10 pockets.ui.htmlForElement = function(element) {
     11   return element.outerHTML;
     12 };
     13
     14 /**
     15  * For when you need to generate an ID for an element
     16  */
     17 pockets.ui.nextElementId = function() {
     18   if (!pockets.ui.nextElementId.nextId) pockets.ui.nextElementId.nextId = 1;
     19   return 'pockets-generated-element-' + pockets.ui.nextElementId.nextId++;
     20 };
     21
     22 pockets.ui.createMojoWidget = function(type, controller, model) {
     23   var widgetEl = pockets.dom.create('div', {
     24     'x-mojo-element': type,
     25     'cssClass': "pockets-widget-" + type.toLowerCase(),
     26     'id': pockets.ui.nextElementId()
     27   });
     28
     29   controller.setupWidget(widgetEl.id, undefined, model);
     30   new Mojo.Controller.WidgetController(widgetEl, controller, model);
     31   return widgetEl;
     32 };
     33
     34 pockets.ui.Spinner = function(controller, parentNode) {
     35   this.spinning = true;
     36   this.spinnerDiv = pockets.ui.createMojoWidget('Spinner', controller, this);
     37   this.spinnerDiv.style.margin = '10px auto';
     38
     39   parentNode.appendChild(this.spinnerDiv);
     40   controller.modelChanged(this, controller.assistant);
     41 };
     42
     43 pockets.ui.Spinner.prototype.stop = function() {
     44   if(this.spinning){
     45     this.spinning = false;
     46     this.spinnerDiv.parentNode.removeChild(this.spinnerDiv);
     47   }
     48 };
     49
     50
     51 pockets.ui.ListWidget = function(options) {
     52   this.model_ = {listTitle: options.title, items: []};
     53   this.options = options;
     54
     55   if (options.parentElement) {
     56     options.parentElement.appendChild(new Element('div', {
     57       'id': options.widgetId,
     58       'x-mojo-element': "List"
     59     }));
     60   }
     61
     62   options.assistant.controller.setupWidget(options.widgetId, {
     63     listTemplate: options.listTemplate,
     64     itemTemplate: options.itemTemplate,
     65     onItemRendered: this.onItemRendered.bind(this)
     66   }, this.model_);
     67
     68   if (options.parentElement) {
     69     options.assistant.controller.instantiateChildWidgets(options.parentElement);
     70   }
     71 };
     72
     73 pockets.ui.ListWidget.prototype.updateModelWithFunction = function(updateFunc) {
     74   updateFunc(this.model_);
     75   this.options.assistant.controller.modelChanged(this.model_, this.options.assistant);
     76 };
     77
     78 pockets.ui.ListWidget.prototype.addItemToList = function(item) {
     79   this.updateModelWithFunction(function(list) {
     80     list.items.push(item);
     81   });
     82 };
     83
     84 pockets.ui.ListWidget.prototype.onItemRendered = function(listWidget, itemModel, itemNode) {
     85 };
     86
     87 pockets.ui.HorizontalGrid = function(scrollerElement, model, renderItem, options) {
     88   this.cardWidth = options.cardWidth;
     89   this.gapWidth = options.gapWidth || 0;
     90   this.containerElement = pockets.dom.create('div');
     91   scrollerElement.appendChild(this.containerElement);
     92   this.scrollerElement = scrollerElement;
     93   this.itemNodes = [];
     94   this.model = model;
     95   this.renderItem = renderItem;
     96   this.scrollbars = false;
     97   this.mode = "horizontal-snap";
     98   this.snapIndex = options.snapIndex || 0;
     99   this.snapElements = {
    100     x: this.itemNodes,
    101     y: []
    102   };
    103   this.modelChanged();
    104 };
    105
    106 pockets.ui.HorizontalGrid.prototype.hasItemToLeft = function() {
    107   return (this.snapIndex > 0);
    108 };
    109
    110 pockets.ui.HorizontalGrid.prototype.hasItemToRight = function() {
    111   return (this.snapIndex < this.itemNodes.length - 1);
    112 };
    113
    114 pockets.ui.HorizontalGrid.prototype.moveLeft = function() {
    115   if (this.hasItemToLeft()) {
    116     this.scrollerElement.mojo.setSnapIndex(this.snapIndex - 1, true);
    117   }
    118 };
    119
    120 pockets.ui.HorizontalGrid.prototype.moveRight = function() {
    121   if (this.hasItemToRight()) {
    122     this.scrollerElement.mojo.setSnapIndex(this.snapIndex + 1, true);
    123   }
    124 };
    125
    126 pockets.ui.HorizontalGrid.prototype.modelChanged = function() {
    127   pockets.dom.removeChildren(this.containerElement);
    128   this.itemNodes.length = 0;
    129
    130   var containerWidth = 0;
    131   for (var i=0; i<this.model.items.length; ++i) {
    132     var div = document.createElement('div');
    133
    134     this.renderItem(div, this.model.items[i], i);
    135     this.containerElement.appendChild(div);
    136
    137     if (this.cardWidth) {
    138       div.style.width = this.cardWidth + 'px';
    139       containerWidth += this.cardWidth;
    140     } else {
    141       containerWidth += parseInt(div.getStyle("width")) + parseInt(div.getStyle("padding-left")) +
    142                         parseInt(div.getStyle("padding-right")) + parseInt(div.getStyle("border-left-width")) +
    143                         parseInt(div.getStyle("border-right-width"));
    144     }
    145     div.style['float'] = 'left';
    146     if (i != this.model.items.length-1) {
    147       div.style.marginRight = this.gapWidth + 'px';
    148       containerWidth += this.gapWidth;
    149     }
    150     else {
    151       div.style.marginRight = '0px';
    152     }
    153     this.itemNodes.push(div);
    154   };
    155   this.containerElement.style['width'] = containerWidth + 'px';
    156 };
    157