Semantic UI - Ractive Component - Feed

Feed

by vikikamath

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css">
<script id="templ" type="text/ractive">

<div class="ui feed">
	{{#items:i}}
  <div class="event {{#active}}selected{{/active}}" on-click="click:{{i}}">
    <div class="label">
      <i class="{{icon}} icon"></i>
    </div>
    <div class="content">
    	<button class="ui right floated icon button" style="background: transparent;"><i class="caret {{#active}}down{{/active}}{{^active}}left{{/active}} icon"></i></button>
      <div class="summary">
      {{>summary}}
      </div>
      {{#items[i].active}}
      <div class="extra text">
      {{>details}}
      </div>
      {{/items[i].active}}
      {{>meta}}
    </div>
  </div>
  {{/items}}
</div>
<style>
	.event {
  border: solid 1px #ccc;
}

.event.selected {
  border-left: solid 3px blue;
}

.feed .event:nth-child(even) {
  background-color: #fafafa;
}
.feed .event:nth-child(odd) {
  background-color: #fff;
}
</style>

</script>

<main></main>

JavaScript

var items = [{
  user: 'Joe Henderson',
  timestamp: '2 days ago',
  type: 'Blue',
  list: [{timestamp: '20 seconds ago'}, {}]
}, {
  user: 'Joe Henderson',
  timestamp: '1 day ago',
  type: 'Black',
  list: [{}, {}]
}];

var MyFeed = Ractive.extend({
  template: '#templ'

  ,oninit() {
    var self = this;

    self.set('items.*.active', false);

    self.on('click', function(e, i) {
      var keyPath = 'items.' + i + '.active'
      self.set(keyPath, !self.get(keyPath))
      e.original.stopPropagation()
    })
  }
})
var MyInnerFeedWrapper = Ractive.extend({
  template: '<MyFeed items="{{list}}"/>',
  partials: {
    details: '<h1> Blah</h1>',
    summary: '<div class="date">{{timestamp}}</div>',
    meta: ''
  },
  components: {
    MyFeed: MyFeed
  },
  data() {
    return {
      items: items
    }
  }
});

var MyFeedWrapper = Ractive.extend({
  template: '<MyFeed items="{{items}}"/>',
  partials: {
    details: '<MyInnerFeedWrapper/>',
    summary: '<a>Joe Henderson</a> posted on his page<div class="date">{{timestamp}}</div>',
    meta: ''
  },
  components: {
    MyFeed: MyFeed,
    MyInnerFeedWrapper: MyInnerFeedWrapper
  },
  data() {
    return {
      items: items
    }
  }
})


var Container = Ractive.extend({
  template: '<MyFeedWrapper/>'

  ,
  components: {
    MyFeedWrapper: MyFeedWrapper
  }

})

new Ractive({
  el: 'main',
  template: '<Container/>',
  components: {
    Container: Container
  }
})