Skip to content

Commit 4b3160d

Browse files
ExelordExelord
committed
Fix examples
1 parent b8bc83f commit 4b3160d

File tree

8 files changed

+52
-34
lines changed

8 files changed

+52
-34
lines changed

‎tests/dummy/app/components/activate-button/component.js‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
1-
import Component from '@ember/component';
1+
import Component from '@glimmer/component';
2+
import { action } from '@ember/object';
23

3-
export default Component.extend({
4-
classNames: 'activator',
5-
6-
actions: {
7-
activate(value) {
8-
this.set('activeExample', value);
9-
},
4+
class ActivateButtonComponent extends Component {
5+
@action
6+
activate(value) {
7+
this.args.onChange(value);
8+
}
109

11-
deactivate() {
12-
this.set('activeExample', null);
13-
}
10+
@action
11+
deactivate() {
12+
this.args.onChange(null);
1413
}
15-
});
14+
}
15+
16+
export default ActivateButtonComponent;

‎tests/dummy/app/components/activate-button/template.hbs‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
{{#if activeExample}}
2-
<a class="btn btn-lg btn-outline btn-ember" {{action 'deactivate'}}>Back to examples</a>
3-
{{else}}
4-
<a class="btn btn-lg btn-outline btn-ember" {{action 'activate' exampleName}}>Live example</a>
5-
{{/if}}
1+
<div class="activator">
2+
{{#if @activeExample}}
3+
<a class="btn btn-lg btn-outline btn-ember" {{on "click" this.deactivate}}>Back to examples</a>
4+
{{else}}
5+
<a class="btn btn-lg btn-outline btn-ember" {{on "click" (fn this.activate @exampleName)}}>Live example</a>
6+
{{/if}}
7+
</div>

‎tests/dummy/app/components/avatar-adorable/template.hbs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<p class="lead"><code>ember-initials/adorable</code></p>
55
{{ember-initials/adorable class="img-thumbnail" image=image size=size email=email}}
66
<p class="example-intro">This component has been designed to display user avatar based on <a href="http://avatars.adorable.io/">avatars.adorable.io</a> service.</p>
7-
{{activate-button exampleName=exampleName activeExample=activeExample}}
7+
<ActivateButton @exampleName={{this.exampleName}} @activeExample={{@activeExample}} @onChange={{@onChange}} />
88
</div>
99

1010
<div class="col-sm-8">
@@ -42,7 +42,7 @@
4242
<p class="lead"><code>ember-initials/adorable</code></p>
4343
{{ember-initials/adorable class="img-thumbnail" image=image size=size email=email}}
4444
<p class="example-intro">This component has been designed to display user avatar based on <a href="http://avatars.adorable.io/">avatars.adorable.io</a> service.</p>
45-
{{activate-button exampleName=exampleName activeExample=activeExample}}
45+
<ActivateButton @exampleName={{this.exampleName}} @activeExample={{@activeExample}} @onChange={{@onChange}} />
4646
</div>
4747
{{/if}}
4848
{{/if}}

‎tests/dummy/app/components/avatar-gravatar/template.hbs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<p class="lead"><code>ember-initials/gravatar</code></p>
66
{{ember-initials/gravatar class="img-rounded" size=size email=email defaultImage=defaultImage image=image relativeUrl=relativeUrl}}
77
<p class="example-intro">This component has been designed to display user avatar based on gravatar service. But it can also work as a fallback for users avatars.</p>
8-
{{activate-button exampleName=exampleName activeExample=activeExample}}
8+
<ActivateButton @exampleName={{this.exampleName}} @activeExample={{@activeExample}} @onChange={{@onChange}} />
99
</div>
1010
</div>
1111

@@ -59,7 +59,7 @@
5959
<p class="lead"><code>ember-initials/gravatar</code></p>
6060
{{ember-initials/gravatar class="img-rounded" size=size email=email defaultImage=defaultImage image=image relativeUrl=relativeUrl}}
6161
<p class="example-intro">This component has been designed to display user avatar based on gravatar service. But it can also work as a fallback for users avatars.</p>
62-
{{activate-button exampleName=exampleName activeExample=activeExample}}
62+
<ActivateButton @exampleName={{this.exampleName}} @activeExample={{@activeExample}} @onChange={{@onChange}} />
6363
</div>
6464
{{/if}}
6565
{{/if}}

‎tests/dummy/app/components/avatar-image/template.hbs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<p class="lead"><code>ember-initials/image</code></p>
55
{{ember-initials/image class="img-thumbnail" image=image size=size defaultImage=defaultImage}}
66
<p class="example-intro">This component has been designed to display user avatar from URL with a fallback to the specific default image.</p>
7-
{{activate-button exampleName=exampleName activeExample=activeExample}}
7+
<ActivateButton @exampleName={{this.exampleName}} @activeExample={{@activeExample}} @onChange={{@onChange}} />
88
</div>
99

1010
<div class="col-sm-8">
@@ -42,7 +42,7 @@
4242
<p class="lead"><code>ember-initials/image</code></p>
4343
{{ember-initials/image class="img-thumbnail" image=image size=size defaultImage=defaultImage}}
4444
<p class="example-intro">This component has been designed to display user avatar from URL with a fallback to the specific default image.</p>
45-
{{activate-button exampleName=exampleName activeExample=activeExample}}
45+
<ActivateButton @exampleName={{this.exampleName}} @activeExample={{@activeExample}} @onChange={{@onChange}} />
4646
</div>
4747
{{/if}}
4848
{{/if}}

‎tests/dummy/app/components/avatar-initials/template.hbs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
@image={{this.image}}
1616
/>
1717
<p class="example-intro">This component has been designed to display user initials based on user name and unique string like email. But it can also work as a fallback for users avatars.</p>
18-
<ActivateButton @exampleName={{this.exampleName}} @activeExample={{this.activeExample}} />
18+
<ActivateButton @exampleName={{this.exampleName}} @activeExample={{@activeExample}} @onChange={{@onChange}} />
1919
</div>
2020
</div>
2121

@@ -116,7 +116,7 @@
116116
@image={{this.image}}
117117
/>
118118
<p class="example-intro">This component has been designed to display user initials based on user name and unique string like email. But it can also work as a fallback for users avatars.</p>
119-
<ActivateButton @exampleName={{this.exampleName}} @activeExample={{this.activeExample}} />
119+
<ActivateButton @exampleName={{this.exampleName}} @activeExample={{@activeExample}} @onChange={{@onChange}} />
120120
</div>
121121
{{/if}}
122122
{{/if}}

‎tests/dummy/app/components/page-sections/examples/component.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import Component from '@glimmer/component';
2+
import { action } from '@ember/object';
3+
import { tracked } from '@glimmer/tracking';
4+
5+
class ExamplesComponent extends Component {
6+
@tracked activeExample;
7+
8+
@action
9+
onChange(value) {
10+
this.activeExample = value;
11+
}
12+
}
13+
14+
export default ExamplesComponent;

‎tests/dummy/app/components/page-sections/examples/template.hbs‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,25 @@
11
<div id="examples">
2-
<div class="{{if activeExample 'container' 'container-fluid'}}">
2+
{{this.activeExample}}
3+
<div class="{{if this.activeExample 'container' 'container-fluid'}}">
34
<div class="section-heading">
45
<h1 data-wow-delay=".3s" class="title wow fadeInDown" style="visibility: visible; animation-delay: 0.3s; animation-name: fadeInDown;">Live Examples</h1>
56
</div>
67

78
<div class="row flex">
8-
<div class="{{unless activeExample 'col-md-3 col-sm-6'}}">
9-
{{avatar-adorable activeExample=activeExample}}
9+
<div class="{{unless this.activeExample 'col-md-3 col-sm-6'}}">
10+
<AvatarAdorable @activeExample={{this.activeExample}} @onChange={{this.onChange}} />
1011
</div>
1112

12-
<div class="{{unless activeExample 'col-md-3 col-sm-6'}}">
13-
{{avatar-initials activeExample=activeExample}}
13+
<div class="{{unless this.activeExample 'col-md-3 col-sm-6'}}">
14+
<AvatarInitials @activeExample={{this.activeExample}} @onChange={{this.onChange}} />
1415
</div>
1516

16-
<div class="{{unless activeExample 'col-md-3 col-sm-6'}}">
17-
{{avatar-gravatar activeExample=activeExample}}
17+
<div class="{{unless this.activeExample 'col-md-3 col-sm-6'}}">
18+
<AvatarGravatar @activeExample={{this.activeExample}} @onChange={{this.onChange}} />
1819
</div>
1920

20-
<div class="{{unless activeExample 'col-md-3 col-sm-6'}}">
21-
{{avatar-image activeExample=activeExample}}
21+
<div class="{{unless this.activeExample 'col-md-3 col-sm-6'}}">
22+
<AvatarImage @activeExample={{this.activeExample}} @onChange={{this.onChange}} />
2223
</div>
2324
</div>
2425
</div>

0 commit comments

Comments
 (0)