jQuery Mobile style headings w/ sproutcore-titanium

_scti-jquerymobileheadings.md

jQuery Mobile style headings w/ sproutcore-titanium

https://github.com/ebryn/sproutcore-titanium

scti-jquerymobileheadings.js

// Heading w/ Bubble
myApp.Heading = SCTi.View.extend({
  height: 32,
  width: '100%',
  
  init: function() {
    this._super();
    
    // Title
    this.add(SCTi.Label.create({
      color: '#fff',
      left: 10,
      font: { fontSize: 16, fontWeight: 'bold' },
      shadowOffset: {x:0, y:-1}
    }));
    // Bubble
    this.add(SCTi.Label.create({
      borderRadius: 10,
      borderWidth: 1,
      font: { fontSize: 12, fontWeight: 'bold' },
      height: 20,
      right: 10,
      shadowOffset: {x:0, y:-1},
      visible: false,
      width: 'auto'
    }));
    // Borders
    this.add(SCTi.View.create({
      height: 1,
      left: 0,
      top: 0,
      width: '100%'
    }));
    this.add(SCTi.View.create({
      bottom: 0,
      height: 1,
      left: 0,
      width: '100%'
    }));
    
    this.bubbleDidChange();
    this.colorDidChange();
    this.titleDidChange();
  },
  
  bubbleDidChange: function() {
    var bubble = this.get('bubble');
    if (bubble) {
      bubble = '  ' + bubble + '  ';
      this.get('childViews')[1].set('text', bubble);
      this.get('childViews')[1].set('visible', true);
    } else {
      this.get('childViews')[1].set('visible', false);
    }
  }.observes('bubble'),
  
  colorDidChange: function() {
    switch(this.get('color')) {
    case 'blue':
      // Background
      this.set('backgroundGradient', { type: 'linear', colors: ['#05e', '#046'], startPoint: {x:0, y:0}, endPoint: {x: 0, y:'100%'} });
      // Title
      this.get('childViews')[0]
        .set('color', '#fff')
        .set('shadowColor', '#002');
      // Bubble
      this.get('childViews')[1]
        .set('backgroundGradient', { type: 'linear', colors: ['#05e', '#046'], startPoint: {x:0, y:0}, endPoint: {x: 0, y:'100%'} })
        .set('borderColor', '#035')
        .set('color', '#fff')
        .set('shadowColor', '#035');
      // Borders
      this.get('childViews')[2].set('backgroundColor', '#046');
      this.get('childViews')[3].set('backgroundColor', '#002');      
      break;
    case 'red':
      // Background
      this.set('backgroundGradient', { type: 'linear', colors: ['#e00', '#800'], startPoint: {x:0, y:0}, endPoint: {x: 0, y:'100%'} });
      // Title
      this.get('childViews')[0]
        .set('color', '#fff')
        .set('shadowColor', '#500');
      // Bubble
      this.get('childViews')[1]
        .set('backgroundGradient', { type: 'linear', colors: ['#e00', '#800'], startPoint: {x:0, y:0}, endPoint: {x: 0, y:'100%'} })
        .set('borderColor', '#500')
        .set('color', '#fff')
        .set('shadowColor', '#500');
      // Borders
      this.get('childViews')[2].set('backgroundColor', '#900');
      this.get('childViews')[3].set('backgroundColor', '#400');      
      break;
    case 'white':
      // Background
      this.set('backgroundGradient', { type: 'linear', colors: ['#fff', '#ccc'], startPoint: {x:0, y:0}, endPoint: {x: 0, y:'100%'} });
      // Title
      this.get('childViews')[0]
        .set('color', '#000')
        .set('shadowColor', '#ccc');
      // Bubble
      this.get('childViews')[1]
        .set('backgroundGradient', { type: 'linear', colors: ['#fff', '#ccc'], startPoint: {x:0, y:0}, endPoint: {x: 0, y:'100%'} })
        .set('borderColor', '#aaa')
        .set('color', '#000')
        .set('shadowColor', '#ccc');
      // Borders
      this.get('childViews')[2].set('backgroundColor', '#ccc');
      this.get('childViews')[3].set('backgroundColor', '#888');      
      break;
    default:
      // Background
      this.set('backgroundGradient', { type: 'linear', colors: ['#666', '#222'], startPoint: {x:0, y:0}, endPoint: {x: 0, y:'100%'} });
      // Title
      this.get('childViews')[0]
        .set('color', '#fff')
        .set('shadowColor', '#111');
      // Bubble
      this.get('childViews')[1].set('backgroundGradient', { type: 'linear', colors: ['#666', '#333'], startPoint: {x:0, y:0}, endPoint: {x: 0, y:'100%'} })
        .set('borderColor', '#111')
        .set('color', '#fff')
        .set('shadowColor', '#111');
      // Borders
      this.get('childViews')[2].set('backgroundColor', '#444');
      this.get('childViews')[3].set('backgroundColor', '#000');
    }
  }.observes('color'),
  
  titleDidChange: function() {
    this.get('childViews')[0].set('text', this.get('title'));
  }.observes('title')
});

var win = SCTi.Window.create();

var red = myApp.Heading.create({
  bubble: 'Red',
  color: 'red',
  title: "I'm Red",
  top: 0
});
win.add(red);
var white = myApp.Heading.create({
  bubble: 'White',
  color: 'white',
  title: "I'm White",
  top: 50
});
win.add(white);
var blue = myApp.Heading.create({
  bubble: 'Blue',
  color: 'blue',
  title: "I'm Blue",
  top: 100
});
win.add(blue);
var nobubble = myApp.Heading.create({
  title: "I'm the default w/ no bubble text",
  top: 150
});
win.add(nobubble);