Skip to content
This repository has been archived by the owner on Mar 25, 2019. It is now read-only.

Commit

Permalink
Fix toggle bug
Browse files Browse the repository at this point in the history
  • Loading branch information
@ShahiemS
ShahiemS committed Aug 18, 2018
1 parent f539bb9 commit 700092c
Show file tree
Hide file tree
Showing 3 changed files with 141 additions and 30 deletions.
112 changes: 92 additions & 20 deletions js/forum/dist/extension.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -350,20 +350,16 @@ System.register('reflar/koseki/components/PrimaryTagView', ['flarum/Component',
m('i', { 'class': 'icon fa fa-angle-down', onclick: this.toggleView })
)
)
),
tag.description() != '' ? m(
'div',
{ 'class': 'col-xs-12' },
m(
'p',
{ 'class': 'TagTile-description' },
tag.description()
)
) : ''
)
) : '',
m(
'div',
{ 'class': 'Category--Children' },
tag.isPrimary() && tag.isChild() == false && this.tags.length >= 1 && tag.description() != '' ? m(
'p',
{ 'class': 'TagTile-description' },
tag.description()
) : '',
this.tags.map(function (tag) {
return ChildTagView.component({ tag: tag });
})
Expand Down Expand Up @@ -457,22 +453,26 @@ System.register('reflar/koseki/pages/CategoryPage', ['flarum/components/Page', '
}, {
key: 'toggleView',
value: function toggleView() {
var parent = this.parentNode.parentNode.parentNode;
var parent = this.parentNode.parentNode.parentNode.parentNode;
var child = parent.querySelectorAll('.Category--Children')[0];

if (child.style.display == 'none') {
this.classList.remove('fa-angle-left');
this.classList.add('fa-angle-down');
} else {
this.classList.remove('fa-angle-down');
this.classList.add('fa-angle-left');
}
if (child) {
if (child.style.display == 'none') {
this.classList.remove('fa-angle-left');
this.classList.add('fa-angle-down');
} else {
this.classList.remove('fa-angle-down');
this.classList.add('fa-angle-left');
}

child.style.display = child.style.display == 'none' ? 'block' : 'none';
child.style.display = child.style.display == 'none' ? 'block' : 'none';
}
}
}, {
key: 'view',
value: function view() {
var tagView = app.forum.attribute('kosekiTagsView');

return m(
'div',
{ className: 'KosekiPage' },
Expand All @@ -497,7 +497,79 @@ System.register('reflar/koseki/pages/CategoryPage', ['flarum/components/Page', '
{ className: 'KosekiPage--categories TagTiles' },
this.tags.map(function (tag) {
return PrimaryTagView.component({ tag: tag });
})
}),
this.secondary.length >= 1 ? m(
'div',
{ 'class': 'row' },
m(
'div',
{ 'class': 'row TagTile-info' },
m(
'div',
{ 'class': 'col-xs-8 col-lg-7' },
app.translator.trans('reflar-koseki.forum.forums')
),
tagView == 'compact' ? m(
'div',
null,
m(
'div',
{ 'class': 'col-xs-2 col-lg-2' },
m(
'span',
{ 'class': 'TagTile-posts' },
app.translator.trans('reflar-koseki.forum.statistics')
)
)
) : m(
'div',
null,
m(
'div',
{ 'class': 'col-xs-2 col-lg-1' },
m(
'span',
{ 'class': 'TagTile-topics' },
app.translator.trans('reflar-koseki.forum.topics_title')
)
),
m(
'div',
{ 'class': 'col-xs-2 col-lg-1' },
m(
'span',
{ 'class': 'TagTile-posts' },
app.translator.trans('reflar-koseki.forum.posts_title')
)
)
),
m(
'div',
{ 'class': 'col-xs-2 col-lg-2 visible-lg' },
m(
'span',
{ 'class': 'TagTile-last' },
app.translator.trans('reflar-koseki.forum.last_post')
)
),
m(
'div',
{ 'class': 'visible-lg col-lg-1' },
m(
'div',
{ 'class': 'TagTile-toggle' },
m('i', { 'class': 'icon fa fa-angle-down', onclick: this.toggleView })
)
)
),
m(
'div',
{ 'class': 'Category--Children TagTile' },
this.secondary.map(function (tag) {
return ChildTagView.component({ tag: tag });
})
)
) : ''
)
)
)
Expand Down
2 changes: 1 addition & 1 deletion js/forum/src/components/PrimaryTagView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,10 +62,10 @@ export default class PrimaryTagView extends Component {
<div class="TagTile-toggle"><i class="icon fa fa-angle-down" onclick={this.toggleView}></i></div>
</div>
</div>
{tag.description() != '' ? (<div class="col-xs-12"><p class="TagTile-description">{tag.description()}</p></div>) : ''}
</div>
) : ''}
<div class="Category--Children">
{tag.isPrimary() && tag.isChild() == false && this.tags.length >= 1 && tag.description() != '' ? (<p class="TagTile-description">{tag.description()}</p>) : ''}
{this.tags.map(tag => ChildTagView.component({ tag }))}
</div>
</div>
Expand Down
57 changes: 48 additions & 9 deletions js/forum/src/pages/CategoryPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,22 +14,25 @@ export default class CategoryPage extends Page {
}

toggleView() {
let parent = this.parentNode.parentNode.parentNode;
let parent = this.parentNode.parentNode.parentNode.parentNode;
let child = parent.querySelectorAll('.Category--Children')[0];

if (child.style.display == 'none') {
this.classList.remove('fa-angle-left');
this.classList.add('fa-angle-down');
if (child) {
if (child.style.display == 'none') {
this.classList.remove('fa-angle-left');
this.classList.add('fa-angle-down');
} else {
this.classList.remove('fa-angle-down');
this.classList.add('fa-angle-left');
}

} else {
this.classList.remove('fa-angle-down');
this.classList.add('fa-angle-left');
child.style.display = child.style.display == 'none' ? 'block' : 'none';
}

child.style.display = child.style.display == 'none' ? 'block' : 'none';
}

view() {
const tagView = app.forum.attribute('kosekiTagsView');

return (
<div className="KosekiPage">
{IndexPage.prototype.hero()}
Expand All @@ -42,6 +45,42 @@ export default class CategoryPage extends Page {
<div className="KosekiPage-content">
<div className="KosekiPage--categories TagTiles">
{this.tags.map(tag => PrimaryTagView.component({ tag }))}

{this.secondary.length >= 1 ? (
<div class="row">
<div class="row TagTile-info">
<div class="col-xs-8 col-lg-7">
{app.translator.trans('reflar-koseki.forum.forums')}
</div>
{tagView == 'compact' ? (
<div>
<div class="col-xs-2 col-lg-2">
<span class="TagTile-posts">{app.translator.trans('reflar-koseki.forum.statistics')}</span>
</div>
</div>) : (
<div>
<div class="col-xs-2 col-lg-1">
<span class="TagTile-topics">{app.translator.trans('reflar-koseki.forum.topics_title')}</span>
</div>
<div class="col-xs-2 col-lg-1">
<span class="TagTile-posts">{app.translator.trans('reflar-koseki.forum.posts_title')}</span>
</div>
</div>
)
}
<div class="col-xs-2 col-lg-2 visible-lg">
<span class="TagTile-last">{app.translator.trans('reflar-koseki.forum.last_post')}</span>
</div>
<div class="visible-lg col-lg-1">
<div class="TagTile-toggle"><i class="icon fa fa-angle-down" onclick={this.toggleView}></i></div>
</div>
</div>

<div class="Category--Children TagTile">
{this.secondary.map(tag => ChildTagView.component({ tag }))}
</div>
</div>
) : ''}
</div>
</div>
</div>
Expand Down

0 comments on commit 700092c

Please sign in to comment.