kanban_list_item_view.js

// ==========================================================================
// Project:   Todozen.KanbanListItemView
// Copyright: @2011 My Company, Inc.
// ==========================================================================
/*globals Todozen */

/** @class

  (Document Your View Here)

  @extends SC.View
*/
Todozen.KanbanListItemView = SC.ListItemView.extend(SC.ContentDisplay, {

  classNames: ['kanban-list-item-view'],
  displayProperties: 'isSelected isEnabled isEditing'.w(),
  contentDisplayProperties: 'color title guid height'.w(),
  isEditing: NO,
  classNames: ['story'],
  titleView: null,  
  editTitleView: null,
  exampleEditor: SC.InlineTextFieldView.extend({ multiline: YES }),

  //inlineEditorDelegate: 'Todozen.editorDelegate',
  //render: function(context, firstTime) {
    ////arguments.callee.base.apply(this, [context, true]);
    //var c          = this.get('content'),
        //guid       = c.get('guid'),
        //title      = c.get('title'),
        //tags       = c.get('tags'),
        //color      = c.get('color'),
        //column     = c.get('column'),
        //status     = c.get('status'),
        //isSelected = this.get('isSelected'),
        //isEditing  = this.get('isEditing');

    //var classes  = { 'standard': !isSelected, 'selected': isSelected};
    //context.addClass(color).setClass(classes);
    //if(isEditing && isSelected) {
      //context = context.begin(this.getPath('editTitleView.tagName'));
      //this.get('editTitleView').renderToContext(context, YES);
    //} else {
      //context = context.begin(this.getPath('titleView.tagName'));
      //this.get('titleView').renderToContext(context, YES);
    //}
    //context = context.end(); //div.titleView
    //this._didRenderChildViews = YES;
  //},

  render: function(context, firstTime) {
    var content = this.get('content'),
        del     = this.displayDelegate,
        level   = this.get('outlineLevel'),
        indent  = this.get('outlineIndent'),
        key, value, working, classArray = [];

    // add alternating row classes
    classArray.push((this.get('contentIndex')%2 === 0) ? 'even' : 'odd');
    context.setClass('disabled', !this.get('isEnabled')).addClass(content.get('color'));

    // outline level wrapper
    working = context.begin("div").addClass("sc-outline");
    if (level>=0 && indent>0) working.addStyle("left", indent*(level+1));

    // handle disclosure triangle
    value = this.get('disclosureState');
    if (value !== SC.LEAF_NODE) {
      this.renderDisclosure(working, value);
      classArray.push('has-disclosure');
    }


    // handle checkbox
    key = this.getDelegateProperty('contentCheckboxKey', del) ;
    if (key) {
      value = content ? (content.get ? content.get(key) : content[key]) : NO ;
      if (value !== null) {
        this.renderCheckbox(working, value);
        classArray.push('has-checkbox');
      }
    }

    // handle icon
    if (this.getDelegateProperty('hasContentIcon', del)) {
      key = this.getDelegateProperty('contentIconKey', del) ;
      value = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;

      this.renderIcon(working, value);
      classArray.push('has-icon');
    } else if (this.get('icon')) {
      value = this.get('icon');
      this.renderIcon(working, value);
      classArray.push('has-icon');
    }

    // handle label -- always invoke
    key = this.getDelegateProperty('contentValueKey', del) ;
    value = (key && content) ? (content.get ? content.get(key) : content[key]) : content ;
    if (value && SC.typeOf(value) !== SC.T_STRING) value = value.toString();
    if (this.get('escapeHTML')) value = SC.RenderContext.escapeHTML(value);
    this.renderLabel(working, value);

    // handle right icon
    if (this.getDelegateProperty('hasContentRightIcon', del)) {
      key = this.getDelegateProperty('contentRightIconKey', del) ;
      value = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;

      this.renderRightIcon(working, value);
      classArray.push('has-right-icon');
    }

    // handle unread count
    key = this.getDelegateProperty('contentUnreadCountKey', del) ;
    value = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
    if (!SC.none(value) && (value !== 0)) {
      this.renderCount(working, value) ;
      var digits = ['zero', 'one', 'two', 'three', 'four', 'five'];
      var valueLength = value.toString().length;
      var digitsLength = digits.length;
      var digit = (valueLength < digitsLength) ? digits[valueLength] : digits[digitsLength-1];
      classArray.push('has-count '+digit+'-digit');
    }

    // handle action
    key = this.getDelegateProperty('listItemActionProperty', del) ;
    value = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
    if (value) {
      this.renderAction(working, value);
      classArray.push('has-action');
    }

    // handle branch
    if (this.getDelegateProperty('hasContentBranch', del)) {
      key = this.getDelegateProperty('contentIsBranchKey', del);
      value = (key && content) ? (content.get ? content.get(key) : content[key]) : NO ;
      this.renderBranch(working, value);
      classArray.push('has-branch');
    }
    context.addClass(classArray);
    context = working.end();
  },  

  //renderLabel: function(context, label) {
    //var title = Todozen.storyController.tagsToUrls(label,'#') || ''
    //context.push('<label class="title">', title , '</label>');
    ////context.push('<div class="title">',title,'</div>');
    ////this.get('titleView').renderToContext(context, YES);
  //},

  //createChildViews: function(){
    //var content = this.get('content'),
        //height  = content.get('height');

    //var titleView = this.titleView = this.createChildView(SC.LabelView.design({
      //classNames: 'title'.w(),
      //layout: {left:5, right:5, top:3, height:height},
      //escapeHTML: NO,
      //value: content.get('title'),
      //formatter: function(value) {
        //return Todozen.storyController.tagsToUrls(value,'#');
      //}
    //}))
  //},

  click: function(){
    console.log(this.content.attributes());
    s = this.content;
  },

  //doubleClick: function() {
    //if(this.get('isEditing')) this.set('isEditing',NO) 
      //else this.set('isEditing',YES);
  //},

  //keyDown: function(evt) {
    //if (evt.keyCode === 13) {
      //if(this.get('isEditing')) this.set('isEditing',NO) 
        //else this.set('isEditing',YES);
    //}
    //return this.interpretKeyEvents(evt) ? YES : NO;
  //},
  
  //_isEditingDidChange: function() {
    //if(this.get('isEditing')){
      //this.editTitleView.childViews[0].childViews[0].becomeFirstResponder();
    //} else {
      ////this.titleView.becomeFirstResponder();
    //}
  //}.observes('isEditing'),
    
  //_isSelectedDidChange : function() { 
    //if(this.get('isSelected')) {
      //this.becomeFirstResponder();
    //} else {
      //this.set('isEditing',NO);
    //}
  //}.observes('isSelected'),  

  //createChildViews: function(){
    //var childViews   = [],
        //content      = this.content,
        //guid         = content.get('guid'),
        //color        = content.get('color'),
        //height       = content.get('height'),
        //classes      = 'border'.w(),
        //maxChar      = 80,
        //klv          = this,
        //tz           = Todozen.storyController,
        //expandSize   = Todozen.storyController.get('expandSize'),
        //isSelected   = this.get('isSelected'),
        //view;

    //var titleView = this.titleView = this.createChildView(SC.View.design({
      //childViews: 'border'.w(),
      //classNames: 'story'.w(),
      //layout: {left:0, right:0, top:0, height:height+6},
      //border: SC.View.design({
        //childViews: 'title'.w(),
        //classNames: 'border'.w(),
        //layout: {left:0, right:0, top:0, height:height+5},

        //title: SC.LabelView.design({
          //layout: {left:5, right:5, top:3, height:height},
          //escapeHTML: NO,
          //value: klv.content.get('title'),
          //formatter: function(value) {
            //return tz.tagsToUrls(value,'#');
          //}
        //})
      //})
    //}));

    ////childViews.push(titleView);

    //var editTitleView = this.editTitleView = this.createChildView(SC.View.design({
      //childViews: 'border'.w(),
      //classNames: 'story'.w(),
      //layout: {left:0, right:0, top:0, height:height+6},
      //border: SC.View.design({
        //childViews: 'editTitle'.w(),
        //classNames: 'border'.w(),
        //layout: {left:0, right:0, top:0, height:height+5},

        //editTitle: SC.TextFieldView.design({
          //layout: {left:3, right:3, top:3, height:height},
          ////acceptsFirstResponder: YES,
          ////valueBinding: 'Todozen.storyController.story.title',
          //value: content.get('title'),
          //isTextArea: YES,
          //keyDown: function(evt) {
            //sc_super();
            //if(evt.keyCode === 13){
              //var o = tz.editStory(this.get('value'), content.get('guid'));

              //content.set('guid'   , o.guid);
              //content.set('title'  , o.title);
              //content.set('tags'   , o.tags);
              //content.set('color'  , o.color);
              //content.set('column' , o.column);
              ////content.set('height' , o.height);
              //klv.set('isEditing', NO);

            //} else if(evt.keyCode === 27 ) {
              //klv.set('isEditing',NO);
            //}
          //}
        //}),
      //})
    //}));    

    ////childViews.push(editTitleView);
    ////this.set('childViews', childViews);
  //},

});