forked from WycliffeAssociates/en_btr_frontend
Setup a service to track currently selected word and add some styling
This commit is contained in:
parent
73400d8a66
commit
2b029b8116
|
@ -0,0 +1,5 @@
|
|||
<div class="verse-greek-text">
|
||||
{{#each @model as |word|}}
|
||||
<Words::GreekWord @model={{word}} />
|
||||
{{/each}}
|
||||
</div>
|
|
@ -0,0 +1 @@
|
|||
<span class="{{this.selected}}" {{on "click" (fn this.select @model)}} data-strongs={{@model.strongs_number}} ...attributes>{{@model.greek}}</span>
|
|
@ -0,0 +1,21 @@
|
|||
import Component from '@glimmer/component';
|
||||
import { inject as service } from '@ember/service';
|
||||
import { action } from '@ember/object';
|
||||
|
||||
export default class WordsGreekWordComponent extends Component {
|
||||
@service('word-select') selectWord;
|
||||
|
||||
@action
|
||||
select(word) {
|
||||
this.selectWord.select(word);
|
||||
}
|
||||
|
||||
get
|
||||
selected() {
|
||||
if(this.selectWord.isCurrentByOgntId(this.args.model)) {
|
||||
return "selected";
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,4 +1,4 @@
|
|||
<tr ...attributes>
|
||||
<tr data-strongs={{@model.strongs_number}} class="{{this.selected}}" ...attributes>
|
||||
<td>{{@model.greek}}</td>
|
||||
<td>{{@model.ulb}}</td>
|
||||
<td>{{@model.morph}}</td>
|
||||
|
|
|
@ -0,0 +1,15 @@
|
|||
import Component from '@glimmer/component';
|
||||
import { inject as service } from '@ember/service';
|
||||
|
||||
export default class WordsWordRowComponent extends Component {
|
||||
@service('word-select') selectedWord;
|
||||
|
||||
get
|
||||
selected() {
|
||||
if(this.selectedWord.isCurrentByOgntId(this.args.model)) {
|
||||
return "selected";
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,22 @@
|
|||
import Service from '@ember/service';
|
||||
import { tracked } from "@glimmer/tracking";
|
||||
|
||||
export default class WordSelectService extends Service {
|
||||
@tracked currentWord = '';
|
||||
|
||||
select(word) {
|
||||
this.currentWord = word;
|
||||
}
|
||||
|
||||
current() {
|
||||
return this.currentWord;
|
||||
}
|
||||
|
||||
isCurrentByOgntId(word) {
|
||||
return word.ognt_sort == this.currentWord.ognt_sort;
|
||||
}
|
||||
|
||||
isCurrentByStrongsNumber(word) {
|
||||
return word.strongs_number == this.currentWord.strongs_number
|
||||
}
|
||||
}
|
|
@ -8,3 +8,14 @@ table.word-details td {
|
|||
padding: 10px;
|
||||
}
|
||||
|
||||
table.word-details tr.selected {
|
||||
background-color: lightblue;
|
||||
}
|
||||
|
||||
.verse-greek-text span {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.verse-greek-text span.selected {
|
||||
color: lightblue;
|
||||
}
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<div class="col-12">
|
||||
<h1>{{model.reference}}</h1>
|
||||
<h4>Greek</h4>
|
||||
<p>{{model.greek_text}}</p>
|
||||
<p><Words::GreekText @model={{model.words}} /></p>
|
||||
<h4>ULB</h4>
|
||||
<p>{{model.ulb_text}}</p>
|
||||
</div>
|
||||
|
@ -13,7 +13,7 @@
|
|||
<Words::WordTable @model={{model.words}} />
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<Commentary::Entry />
|
||||
<Lexicon::Entry />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -0,0 +1,26 @@
|
|||
import { module, test } from 'qunit';
|
||||
import { setupRenderingTest } from 'ember-qunit';
|
||||
import { render } from '@ember/test-helpers';
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
|
||||
module('Integration | Component | words/greek-text', function(hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
|
||||
test('it renders', async function(assert) {
|
||||
// Set any properties with this.set('myProperty', 'value');
|
||||
// Handle any actions with this.set('myAction', function(val) { ... });
|
||||
|
||||
await render(hbs`<Words::GreekText />`);
|
||||
|
||||
assert.equal(this.element.textContent.trim(), '');
|
||||
|
||||
// Template block usage:
|
||||
await render(hbs`
|
||||
<Words::GreekText>
|
||||
template block text
|
||||
</Words::GreekText>
|
||||
`);
|
||||
|
||||
assert.equal(this.element.textContent.trim(), 'template block text');
|
||||
});
|
||||
});
|
|
@ -0,0 +1,26 @@
|
|||
import { module, test } from 'qunit';
|
||||
import { setupRenderingTest } from 'ember-qunit';
|
||||
import { render } from '@ember/test-helpers';
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
|
||||
module('Integration | Component | words/greek-word', function(hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
|
||||
test('it renders', async function(assert) {
|
||||
// Set any properties with this.set('myProperty', 'value');
|
||||
// Handle any actions with this.set('myAction', function(val) { ... });
|
||||
|
||||
await render(hbs`<Words::GreekWord />`);
|
||||
|
||||
assert.equal(this.element.textContent.trim(), '');
|
||||
|
||||
// Template block usage:
|
||||
await render(hbs`
|
||||
<Words::GreekWord>
|
||||
template block text
|
||||
</Words::GreekWord>
|
||||
`);
|
||||
|
||||
assert.equal(this.element.textContent.trim(), 'template block text');
|
||||
});
|
||||
});
|
|
@ -0,0 +1,12 @@
|
|||
import { module, test } from 'qunit';
|
||||
import { setupTest } from 'ember-qunit';
|
||||
|
||||
module('Unit | Service | word-select', function(hooks) {
|
||||
setupTest(hooks);
|
||||
|
||||
// TODO: Replace this with your real tests.
|
||||
test('it exists', function(assert) {
|
||||
let service = this.owner.lookup('service:word-select');
|
||||
assert.ok(service);
|
||||
});
|
||||
});
|
Loading…
Reference in New Issue