Skip to content

Commit

Permalink
Merge pull request #87 from mikrostew/change-tag-name
Browse files Browse the repository at this point in the history
Support changing the tag name
  • Loading branch information
lstrrs authored Dec 1, 2022
2 parents a1d8e7d + b7cdb0a commit 3b34d8b
Show file tree
Hide file tree
Showing 4 changed files with 98 additions and 59 deletions.
116 changes: 59 additions & 57 deletions addon/components/line-clamp.hbs
Original file line number Diff line number Diff line change
@@ -1,59 +1,61 @@
<div
class={{this._lineClampClass}}
style={{this._lineClampStyle}}
...attributes
{{did-insert this.onDidInsert}}
{{did-update this.onDidUpdate this.truncate}}
data-test-line-clamp
>
{{#each this._textLines as |line|}}
{{#if line.lastLine}}
<span class="lt-line-clamp__line lt-line-clamp__line--last">
{{line.text}}
{{~#if line.needsEllipsis~}}
<span class="lt-line-clamp__ellipsis">
<div class="lt-line-clamp__dummy-element">{{this.ellipsis}}</div>
{{!-- Use div to wrap the ellipsis up so that the see more button can work after google translates the page (Issue #48)--}}
{{#if this._showMoreButton}}
<a
data-test-line-clamp-show-more-button="true"
href="#"
role="button"
id="line-clamp-show-more-button"
aria-expanded="false"
aria-label={{@seeMoreA11yText}}
class="lt-line-clamp__more"
{{on 'click' this.toggleTruncate}}
>{{this.seeMoreText}}</a>
{{/if}}
</span>
{{~/if~}}
</span>
{{else if line.newLine}}
<br />
{{#let (element (if @tagName @tagName "div")) as |Tag|}}
<Tag
class={{this._lineClampClass}}
style={{this._lineClampStyle}}
...attributes
{{did-insert this.onDidInsert}}
{{did-update this.onDidUpdate this.truncate}}
data-test-line-clamp
>
{{#each this._textLines as |line|}}
{{#if line.lastLine}}
<span class="lt-line-clamp__line lt-line-clamp__line--last">
{{line.text}}
{{~#if line.needsEllipsis~}}
<span class="lt-line-clamp__ellipsis">
<div class="lt-line-clamp__dummy-element">{{this.ellipsis}}</div>
{{!-- Use div to wrap the ellipsis up so that the see more button can work after google translates the page (Issue #48)--}}
{{#if this._showMoreButton}}
<a
data-test-line-clamp-show-more-button="true"
href="#"
role="button"
id="line-clamp-show-more-button"
aria-expanded="false"
aria-label={{@seeMoreA11yText}}
class="lt-line-clamp__more"
{{on 'click' this.toggleTruncate}}
>{{this.seeMoreText}}</a>
{{/if}}
</span>
{{~/if~}}
</span>
{{else if line.newLine}}
<br />
{{else}}
<span class="lt-line-clamp__line">{{line.text}}</span>
{{/if}}
{{else if this._strippedText}}
{{this._strippedText}}
{{else}}
<span class="lt-line-clamp__line">{{line.text}}</span>
{{/if}}
{{else if this._strippedText}}
{{this._strippedText}}
{{else}}
<span class="lt-line-clamp__raw-line">{{this.text}}</span>
{{/each}}
<span class="lt-line-clamp__raw-line">{{this.text}}</span>
{{/each}}

{{#if this._showLessButton}}
{{#unless this._truncated}}
{{#if this._expanded}}
<span><a
data-test-line-clamp-show-less-button="true"
id="line-clamp-show-less-button"
href="#"
role="button"
aria-expanded="true"
aria-label={{@seeLessA11yText}}
class="lt-line-clamp__less"
{{on 'click' this.toggleTruncate}}
>{{this.seeLessText}}</a></span>
{{/if}}
{{/unless}}
{{/if}}
</div>
{{#if this._showLessButton}}
{{#unless this._truncated}}
{{#if this._expanded}}
<span><a
data-test-line-clamp-show-less-button="true"
id="line-clamp-show-less-button"
href="#"
role="button"
aria-expanded="true"
aria-label={{@seeLessA11yText}}
class="lt-line-clamp__less"
{{on 'click' this.toggleTruncate}}
>{{this.seeLessText}}</a></span>
{{/if}}
{{/unless}}
{{/if}}
</Tag>
{{/let}}
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
"ember-batcher": "^5.0.0",
"ember-cli-babel": "^7.26.11",
"ember-cli-htmlbars": "^6.1.1",
"ember-element-helper": "^0.6.1",
"ember-singularity": "^2.0.0",
"ember-test-selectors": "^6.0.0"
},
Expand Down
27 changes: 27 additions & 0 deletions tests/integration/components/line-clamp-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -843,4 +843,31 @@ module('Integration | Component | line clamp', function (hooks) {
.dom('[data-test-line-clamp-show-more-button]')
.isFocused('show more button is focused');
});

test('tag name is <div> by default', async function (assert) {
assert.expect(1);

await render(hbs`
<div style="width: 300px; font-size: 16px; font-family: sans-serif;">
<LineClamp
@text="helloworld helloworld helloworld"
/>
</div>`);

assert.dom('[data-test-line-clamp]').hasTagName('div');
});

test('tag name is able to be changed', async function (assert) {
assert.expect(1);

await render(hbs`
<div style="width: 300px; font-size: 16px; font-family: sans-serif;">
<LineClamp
@text="helloworld helloworld helloworld"
@tagName="p"
/>
</div>`);

assert.dom('[data-test-line-clamp]').hasTagName('p');
});
});
13 changes: 11 additions & 2 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1085,7 +1085,7 @@
lodash "^4.17.21"
resolve "^1.20.0"

"@embroider/util@^1.6.0":
"@embroider/util@^0.39.1 || ^0.40.0 || ^0.41.0 || ^1.0.0", "@embroider/util@^1.6.0":
version "1.9.0"
resolved "https://registry.yarnpkg.com/@embroider/util/-/util-1.9.0.tgz#331c46bdf106c44cb1dd6baaa9030d322c13cfca"
integrity sha512-9I63iJK6N01OHJafmS/BX0msUkTlmhFMIEmDl/SRNACVi0nS6QfNyTgTTeji1P/DALf6eobg/9t/N4VhS9G9QA==
Expand Down Expand Up @@ -3593,7 +3593,7 @@ ember-cli-htmlbars@^5.3.1, ember-cli-htmlbars@^5.7.1:
strip-bom "^4.0.0"
walk-sync "^2.2.0"

ember-cli-htmlbars@^6.1.1:
ember-cli-htmlbars@^6.0.1, ember-cli-htmlbars@^6.1.1:
version "6.1.1"
resolved "https://registry.yarnpkg.com/ember-cli-htmlbars/-/ember-cli-htmlbars-6.1.1.tgz#f5b588572a5d18ad087560122b8dabc90145173d"
integrity sha512-DKf2rjzIVw9zWCuFsBGJScrgf5Mz7dSg08Cq+FWFYIxnpssINUbNUoB0NHWnUJK4QqCvaExOyOmjm0kO455CPg==
Expand Down Expand Up @@ -3854,6 +3854,15 @@ ember-disable-prototype-extensions@^1.1.3:
resolved "https://registry.yarnpkg.com/ember-disable-prototype-extensions/-/ember-disable-prototype-extensions-1.1.3.tgz#1969135217654b5e278f9fe2d9d4e49b5720329e"
integrity sha512-SB9NcZ27OtoUk+gfalsc3QU17+54OoqR668qHcuvHByk4KAhGxCKlkm9EBlKJcGr7yceOOAJqohTcCEBqfRw9g==

ember-element-helper@^0.6.1:
version "0.6.1"
resolved "https://registry.yarnpkg.com/ember-element-helper/-/ember-element-helper-0.6.1.tgz#a6fbc5be5f875b5c864ae61bf5c5f81d6de6d936"
integrity sha512-YiOdAMlzYul4ulkIoNp8z7iHDfbT1fbut/9xGFRfxDwU/FmF8HtAUB2f1veu/w50HTeZNopa1OV2PCloZ76XlQ==
dependencies:
"@embroider/util" "^0.39.1 || ^0.40.0 || ^0.41.0 || ^1.0.0"
ember-cli-babel "^7.26.11"
ember-cli-htmlbars "^6.0.1"

ember-export-application-global@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/ember-export-application-global/-/ember-export-application-global-2.0.1.tgz#b120a70e322ab208defc9e2daebe8d0dfc2dcd46"
Expand Down

0 comments on commit 3b34d8b

Please sign in to comment.