Untitled

<!DOCTYPE html>
<html>

<head>
  <link href="//cdn.jsdelivr.net/picnicss/4.1.1/picnic.min.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
</head>
<body>

  <h1>Hello Mag.JS!</h1>
  <a target="_tab" href="https://github.com/magnumjs/mag.js">GitHub</a>
  <hr/>

  <div id="articles">
    <div>
      <div data-bind="article">
        <star></star>
        <h2 data-bind="title"></h2>
      </div>
    </div>
    <hr/>
    <articleStar></articleStar>
    <p data-bind="content"></p>
    <textarea></textarea>
  </div>

  <div class="template hide">
    <div id="star">
      <span class="favorite-star-character">&#x2605;</span></div>
  </div>

  <script src="//rawgit.com/magnumjs/mag.js/master/dist/mag.0.22.min.js"></script>
  <script src="//rawgit.com/magnumjs/mag.js/master/dist/mag.addons.0.21.min.js"></script>

 <script src="star.js"></script>
 <script src="articles.js"></script>

</body>

</html>

.hide {
  display:none;
}
 div[id^=star] {
      line-height: 1.6em;
      font-size: 20px;
      float:left;
      padding-right:4px;
 }
 
 h2 {
   cursor:pointer;color:navy;
 }

    .favorite-star-character {
      color: #ccd6dd;
      font-weight: 300;
      cursor: pointer;
      display: inline-block;
      transform: scale3d(1.0, 1.0, 1.0);
      -webkit-transform: scale3d(1.0, 1.0, 1.0);
      -moz-transform: scale3d(1.0, 1.0, 1.0);
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
  
  
    .favorite-star-character.active {
      color: #ffac33;
    }
    .favorite-star-character.hover {
      color: #ffac33;
    }

//data
var starred={}
// data service
var service=function(id, val){
  if(typeof val !='undefined'){
    starred[id] = val
  }
  return starred[id]
}

// default (over writable) properties of the component
var props = {starred:service}

// component module
var starComp = mag.create('star', {
  view: function(state, props) {

    // set default if already exists in data store /service
    state.isactive = props.starred(props.id) || false

    state.span = {
      _className: {
        'active': state.isactive
      },
      _onmouseout: function() {
        this.classList.remove('hover')
      },
      _onmouseover: function() {
        this.classList.add('hover')
      },
      _onclick: function() {
        
        // change ui
        this.classList.toggle('hover')
        this.classList.toggle('active')
        
        // set the state
        state.isactive = !state.isactive
        
        // set the data store
        props.starred(props.id, state.isactive)
        
        // notify parent
        props.onStarClick(props.id,  state.isactive)
      }
    }
  }
},props)

// Articles data initializer
var props = {
  arts: [{
    title: 'My first article',
    content: 'My first article story info yeah!',
    id: 1
  }, {
    title: 'The second article title',
    content: 'My SECOND article story info yeah!!!',
    id: 2
  }]
};


// article parent module that calls child component
mag.module('articles', {
  controller: function(props) {

    //callback handler from child to update parent state
    props.handleStarClick = function(articleId, isactive) {
      props.starredArticle = {
        articleId: articleId,
        isactive: isactive
      }
    }

  },
  view: function(state, props) {

    // if article is selected show its contents/details
    if (state.aid) {

      //load the selected articles details star
      state.articleStar = starComp({
        id: state.aid
      })

      // get state data
      state.textarea = JSON.stringify(mag.merge(state.articleStar.getProps(), props.starredArticle))

      // selected article contents to display
      state.content = props.arts[state.aid - 1].content
    }

    // list all our articles
    state.article = props.arts.map(function(art) {
      return {
        star: starComp({
          id: art.id,
          onStarClick: props.handleStarClick
        }),
        title: {
          _text: art.title,
          _onclick: function(aid) {
            state.aid = aid
          }.bind({}, art.id)
        }
      }
    })

  }
}, props);