Skip to content

Commit b6abdb0

Browse files
nadnoslennadnoslen
authored
Correcting The Dynamic content & title (#16)
* #14 fixing the dynamic content issue. * #14 tell code-climate to ignore duplicate component declaration.
1 parent 86e6f87 commit b6abdb0

File tree

12 files changed

+74
-75
lines changed

12 files changed

+74
-75
lines changed

‎.codeclimate.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ engines:
88
- 4c4b56fc277494fafed4603b2b3abfc0
99
- 3d5bdb4d43985e98e57c59f863aa5365
1010
- df6b6fd64376dd46e0ca8e8d127f2da9
11+
- 6abf5ab49d988083ea87bcc3abc4d25a
12+
- 5ee693d9305f81516289eae029e132ab
1113
config:
1214
languages:
1315
- ruby

‎addon/components/twbs-popover.js‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,19 @@ export default Ember.Component.extend(Popover, {
1414
this.get('_$triggerElement').popover('hide');
1515
},
1616
/**
17-
* Sets the `content` property to the supplied value. If you are supplying html to the content section, you
18-
* must make sure that the `html?` property is set to true.
19-
* @param content the content for the popover. Can be plain-text or html.
17+
* Sets the `content` property to the supplied value and the `html?` property to `true`.
18+
* @param content the content for the popover. Will be rendered as html.
2019
*/
2120
setPopoverContent(content) {
21+
this.set('html?', true);
2222
this.set('content', content);
2323
},
2424
/**
25-
* Sets the `title` property to the supplied value. If you are supplying html to the title section, you must make
26-
* sure that the `html?` property is set to true.
27-
* @param title the title for the popover. Can be plain-text or html.
25+
* Sets the `title` property to the supplied value and the `html?` property to `true`.
26+
* @param title the title for the popover. Will be rendered as html.
2827
*/
2928
setPopoverTitle(title) {
29+
this.set('html?', true);
3030
this.set('title', title);
3131
},
3232
/**
@@ -53,6 +53,7 @@ export default Ember.Component.extend(Popover, {
5353
layout,
5454
tagName: 'span',
5555
_destroyPopover: Ember.on('willDestroyElement', function () {
56+
Ember.Logger.info('DESTROYING?');
5657
if (Ember.isPresent(this.get('_$triggerElement'))) {
5758
this.get('_$triggerElement').popover('destroy');
5859
}

‎addon/components/twbs-popover/content.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@ import Ember from 'ember';
22
import layout from '../../templates/components/twbs-popover/content';
33

44
export default Ember.Component.extend({
5-
classNames: ['hidden', 'twbs-popover-content'],
5+
classNames: ['hidden'],
66
layout,
77
/**
88
* Call the closure action passed to the `registerContent` property. Invoking this closure should set the content
99
* section of the popover.
1010
*/
1111
_register: Ember.on('didInsertElement', function () {
1212
if (Ember.isPresent(this.get('register'))) {
13-
this.get('register')(this.$().html());
13+
this.get('register')(this.$('.twbs-popover-content'));
1414
} else {
1515
Ember.Logger.warn('The `twbs-popover.content` component should have an action assigned to its `register` property.');
1616
}

‎addon/components/twbs-popover/title.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@ import Ember from 'ember';
22
import layout from '../../templates/components/twbs-popover/title';
33

44
export default Ember.Component.extend({
5-
classNames: ['hidden', 'twbs-popover-title'],
5+
classNames: ['hidden'],
66
layout,
77
/**
88
* Call the closure action passed to the `registerTitle` property. Invoking this closure should set the title
99
* section of the popover.
1010
*/
1111
_register: Ember.on('didInsertElement', function () {
1212
if (Ember.isPresent(this.get('register'))) {
13-
this.get('register')(this.$().html());
13+
this.get('register')(this.$('.twbs-popover-title'));
1414
} else {
1515
Ember.Logger.warn('The `twbs-popover.title` component should have an action assigned to its `register` property.');
1616
}

‎addon/templates/components/twbs-popover/content.hbs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{{yield}}
1+
<div class="twbs-popover-content">{{yield}}</div>

‎addon/templates/components/twbs-popover/title.hbs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{{yield}}
1+
<div class="twbs-popover-title">{{yield}}</div>

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
"ember-cli-sass": "5.6.0",
4141
"ember-cli-sri": "^2.1.0",
4242
"ember-cli-uglify": "^1.2.0",
43+
"ember-clock": "1.0.2",
4344
"ember-data": "^2.6.0",
4445
"ember-disable-prototype-extensions": "^1.1.0",
4546
"ember-export-application-global": "^1.0.5",

‎tests/dummy/app/templates/components/popover-demo/plain-or-html.hbs‎

Lines changed: 46 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,132 +1,138 @@
1-
<h3>Plain-Text Popover Content</h3>
1+
<h3>HTML-Based Popover Content</h3>
22

33
<div class="row">
44
<div class="col-sm-4 form-group">
5-
{{#twbs-popover popoverTrigger="click" as |popover|}}
5+
{{#twbs-popover popoverTrigger="click" html?=true as |popover|}}
66
{{#popover.trigger}}
77
<button class="btn btn-default">Click This Button</button>
88
{{/popover.trigger}}
99
{{#popover.content}}
10-
Click again to hide.
10+
<p><strong>Click</strong> again to hide.</p>
11+
<hr/>
12+
<p>
13+
<em>Lorem ipsum</em> dolor sit amet, consectetur adipisicing elit.
14+
<strong>Consequatur delectus dolores expedita ipsum odit praesentium quos, saepe totam.</strong>
15+
</p>
1116
{{/popover.content}}
1217
{{/twbs-popover}}
1318
</div>
1419
<div class="col-sm-8">
1520
{{!-- @formatter:off --}}
16-
<pre>\{{#twbs-popover popoverTrigger="click" as |popover|}}
21+
<pre>\{{#twbs-popover popoverTrigger="click" html?=true as |popover|}}
1722
\{{#popover.trigger}}
1823
&lt;button class="btn btn-default">Click This Button&lt;/button>
1924
\{{/popover.trigger}}
2025
\{{#popover.content}}
21-
Click again to hide.
26+
&lt;p>&lt;strong>Click&lt;/strong> again to hide.&lt;/p>
27+
&lt;hr/>
28+
&lt;p>
29+
&lt;em>Lorem ipsum&lt;/em> dolor sit amet, consectetur adipisicing elit.
30+
&lt;strong>Consequatur delectus dolores expedita ipsum odit praesentium quos, saepe totam.&lt;/strong>
31+
&lt;/p>
2232
\{{/popover.content}}
2333
\{{/twbs-popover}}
2434
</pre>
2535
{{!-- @formatter:on --}}
2636
</div>
2737
</div>
2838

29-
<h3>Plain-Text Popover Title & Content</h3>
39+
<h3>HTML-Based Popover Title</h3>
3040

3141
<div class="row">
3242
<div class="col-sm-4 form-group">
33-
{{#twbs-popover popoverTrigger="click" as |popover|}}
43+
{{#twbs-popover popoverTrigger="click" html?=true as |popover|}}
3444
{{#popover.trigger}}
3545
<button class="btn btn-default">Click This Button</button>
3646
{{/popover.trigger}}
3747
{{#popover.title}}
38-
Popover With Title
48+
<em>Popover</em> <u>With</u>
49+
<del>Title</del>
3950
{{/popover.title}}
4051
{{#popover.content}}
41-
Click again to hide.
52+
<p><strong>Click</strong> again to hide.</p>
4253
{{/popover.content}}
4354
{{/twbs-popover}}
4455
</div>
4556
<div class="col-sm-8">
4657
{{!-- @formatter:off --}}
47-
<pre>\{{#twbs-popover popoverTrigger="click" as |popover|}}
58+
<pre>\{{#twbs-popover popoverTrigger="click" html?=true as |popover|}}
4859
\{{#popover.trigger}}
4960
&lt;button class="btn btn-default">Click This Button&lt;/button>
5061
\{{/popover.trigger}}
5162
\{{#popover.title}}
52-
Popover With Title
63+
&lt;em>Popover&lt;/em> &lt;u>With&lt;/u>
64+
&lt;del>Title&lt;/del>
5365
\{{/popover.title}}
5466
\{{#popover.content}}
55-
Click again to hide.
67+
&lt;p>&lt;strong>Click&lt;/strong> again to hide.&lt;/p>
5668
\{{/popover.content}}
5769
\{{/twbs-popover}}
5870
</pre>
5971
{{!-- @formatter:on --}}
6072
</div>
6173
</div>
6274

63-
<h3>HTML-Based Popover Content</h3>
75+
<h3>Popover With Dynamic Content</h3>
6476

6577
<div class="row">
6678
<div class="col-sm-4 form-group">
67-
{{#twbs-popover popoverTrigger="click" html?=true as |popover|}}
79+
{{#twbs-popover html?=true as |popover|}}
6880
{{#popover.trigger}}
69-
<button class="btn btn-default">Click This Button</button>
81+
<button class="btn btn-default">Click this button</button>
7082
{{/popover.trigger}}
83+
{{#popover.title}}
84+
Current Time
85+
{{/popover.title}}
7186
{{#popover.content}}
72-
<p><strong>Click</strong> again to hide.</p>
73-
<hr/>
74-
<p>
75-
<em>Lorem ipsum</em> dolor sit amet, consectetur adipisicing elit.
76-
<strong>Consequatur delectus dolores expedita ipsum odit praesentium quos, saepe totam.</strong>
77-
</p>
87+
{{clock.hour}}:{{clock.minute}}:{{clock.second}}
7888
{{/popover.content}}
7989
{{/twbs-popover}}
8090
</div>
8191
<div class="col-sm-8">
8292
{{!-- @formatter:off --}}
83-
<pre>\{{#twbs-popover popoverTrigger="click" html?=true as |popover|}}
93+
<pre>\{{#twbs-popover html?=true as |popover|}}
8494
\{{#popover.trigger}}
85-
&lt;button class="btn btn-default">Click This Button&lt;/button>
95+
&lt;button class="btn btn-default">Click this button&lt;/button>
8696
\{{/popover.trigger}}
97+
\{{#popover.title}}
98+
Current Time
99+
\{{/popover.title}}
87100
\{{#popover.content}}
88-
&lt;p>&lt;strong>Click&lt;/strong> again to hide.&lt;/p>
89-
&lt;hr/>
90-
&lt;p>
91-
&lt;em>Lorem ipsum&lt;/em> dolor sit amet, consectetur adipisicing elit.
92-
&lt;strong>Consequatur delectus dolores expedita ipsum odit praesentium quos, saepe totam.&lt;/strong>
93-
&lt;/p>
101+
\{{clock.hour}}:\{{clock.minute}}:\{{clock.second}}
94102
\{{/popover.content}}
95103
\{{/twbs-popover}}
96104
</pre>
97105
{{!-- @formatter:on --}}
98106
</div>
99107
</div>
100108

101-
<h3>HTML-Based Popover Content</h3>
109+
<h3>Popover With Dynamic Title</h3>
102110

103111
<div class="row">
104112
<div class="col-sm-4 form-group">
105-
{{#twbs-popover popoverTrigger="click" html?=true as |popover|}}
113+
{{#twbs-popover html?=true as |popover|}}
106114
{{#popover.trigger}}
107-
<button class="btn btn-default">Click This Button</button>
115+
<button class="btn btn-default">Click this button</button>
108116
{{/popover.trigger}}
109117
{{#popover.title}}
110-
<em>Popover</em> <u>With</u>
111-
<del>Title</del>
118+
{{clock.hour}}:{{clock.minute}}:{{clock.second}}
112119
{{/popover.title}}
113120
{{#popover.content}}
114-
<p><strong>Click</strong> again to hide.</p>
121+
The current time is in the title.
115122
{{/popover.content}}
116123
{{/twbs-popover}}
117124
</div>
118125
<div class="col-sm-8">
119126
{{!-- @formatter:off --}}
120-
<pre>\{{#twbs-popover popoverTrigger="click" html?=true as |popover|}}
127+
<pre>\{{#twbs-popover html?=true as |popover|}}
121128
\{{#popover.trigger}}
122-
&lt;button class="btn btn-default">Click This Button&lt;/button>
129+
&lt;button class="btn btn-default">Click this button&lt;/button>
123130
\{{/popover.trigger}}
124131
\{{#popover.title}}
125-
&lt;em>Popover&lt;/em> &lt;u>With&lt;/u>
126-
&lt;del>Title&lt;/del>
132+
\{{clock.hour}}:\{{clock.minute}}:\{{clock.second}}
127133
\{{/popover.title}}
128134
\{{#popover.content}}
129-
&lt;p>&lt;strong>Click&lt;/strong> again to hide.&lt;/p>
135+
The current time is in the title.
130136
\{{/popover.content}}
131137
\{{/twbs-popover}}
132138
</pre>

‎tests/dummy/app/templates/index.hbs‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,32 +10,32 @@
1010
</section>
1111

1212
<section class="container">
13-
{{popover-demo.click-triggered}}
13+
{{popover-demo/click-triggered}}
1414
<hr/>
1515
</section>
1616

1717
<section class="container">
18-
{{popover-demo.hover-triggered}}
18+
{{popover-demo/hover-triggered}}
1919
<hr/>
2020
</section>
2121

2222
<section class="container">
23-
{{popover-demo.focus-triggered}}
23+
{{popover-demo/focus-triggered}}
2424
<hr/>
2525
</section>
2626

2727
<section class="container">
28-
{{popover-demo.plain-or-html}}
28+
{{popover-demo/plain-or-html}}
2929
<hr/>
3030
</section>
3131

3232
<section class="container">
33-
{{popover-demo.triggering-methods}}
33+
{{popover-demo/triggering-methods}}
3434
<hr/>
3535
</section>
3636

3737
<section class="container">
38-
{{popover-demo.other-popover-options}}
38+
{{popover-demo/other-popover-options}}
3939
<hr/>
4040
</section>
4141

‎tests/integration/components/twbs-popover-test.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ test('when clicking the link the popover has the nested `twbs-popover.title`', f
7272
`);
7373

7474
this.$('.twbs-popover-trigger').click();
75-
assert.equal(this.$('.popover-title').html().trim(), '<h1>Heading One</h1>');
75+
assert.equal(this.$('.popover-title').html().trim(), '<div class=\"twbs-popover-title\"><h1>Heading One</h1></div>');
7676
});
7777

7878
test('when clicking the link the popover has the property-based `twbs-popover.title`', function (assert) {
@@ -96,7 +96,7 @@ test('when clicking the link the popover has the nested `twbs-popover.content`',
9696

9797
this.$('.twbs-popover-trigger').click();
9898
assert.equal(this.$('.popover-content').html().trim(),
99-
'<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>');
99+
'<div class=\"twbs-popover-content\"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>');
100100
});
101101

102102
test('when clicking the link the popover has the property-based `twbs-popover.content`', function (assert) {

0 commit comments

Comments
 (0)