violations-highlight

components.trigger-violation.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'span',

  actions: {
    highlight(part, event) {
      this.get('message').forEach((part) => {
        part.set('isHighlighted', false);
      });
      part.set('isHighlighted', true);
      Ember.$('.messages').animate({
        scrollTop: Ember.$(event.target).offset().top - 10
      }, 400);
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  messages: [
    [
      Ember.Object.create({
        text: 'Interstellar is a 2014 epic science fiction drama film directed',
        isViolation: false,
      }),
      Ember.Object.create({
        text: 'co-produced,',
        isViolation: true,
      }),
      Ember.Object.create({
        text: ' and co-written by Christopher Nolan,  along with producers Emma Thomas and Lynda Obst, and writer Jonathan Nolan. ',
        isViolation: false,
      }),
      Ember.Object.create({
        text: 'and',
        isViolation: true,
      }),
      Ember.Object.create({
        text: ' co-written by Christopher Nolan,  along with producers Emma Thomas and Lynda Obst, and writer Jonathan Nolan. and starring Matthew McConaughey, Anne Hathaway, Jessica Chastain, Matt Damon and Michael Caine. The film features a crew of astronauts who travel through a wormhole in search of a new home for humanity.',
        isViolation: false,
      }),
      Ember.Object.create({
        text: 'Both Christopher and Jonathan wrote the screenplay, which has its origins in a script/story developed by Jonathan in 2007. Christopher Nolan produced the film with his wife Emma Thomas through their production company Syncopy and with Lynda Obst through Lynda Obst Productions. Caltech theoretical physicist Kip Thorne, whose work inspired the film, was an executive producer and acted as scientific consultant. Warner Bros., Paramount Pictures, and Legendary Pictures co-financed the ',
        isViolation: false,
      }),
      Ember.Object.create({
        text: 'film.',
        isViolation: true,
      }),
    ]
  ]
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}
.is-violation {
  color: red;
  cursor: pointer;
}
.is-violation-highlighted {
  text-decoration: underline
}
.messages {
  max-height: 200px;
  overflow: auto;
}

templates.application.hbs

{{outlet}}
<div class="messages">
  {{#each messages as |message|}}
    {{#each message as |part|}}
      {{trigger-violation part=part message=message}}
    {{/each}}
  {{/each}}
</div>

templates.components.trigger-violation.hbs

{{#if part.isViolation}}
<span class='is-violation {{if part.isHighlighted 'is-violation-highlighted'}}' onclick={{action 'highlight' part}}>{{part.text}}</span>
{{else}}
<span>{{part.text}}</span>
{{/if}}

twiddle.json

{
  "version": "0.9.3",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.6.0",
    "ember-data": "2.6.1",
    "ember-template-compiler": "2.6.0"
  }
}