Added article system
[GitHub/WoltLab/WCF.git] / com.woltlab.wcf / templates / article.tpl
1 {capture assign='pageTitle'}{$articleContent->title}{/capture}
2
3 {capture assign='contentHeader'}
4 <header class="contentHeader articleContentHeader">
5 <div class="contentHeaderTitle">
6 <h1 class="contentTitle">{$articleContent->title}</h1>
7 <div class="contentHeaderDescription">
8 {$articleContent->getArticle()->getCategory()->getTitle()}
9 </div>
10 <ul class="inlineList contentHeaderMetaData articleMetaData">
11 <li>
12 <span class="icon icon16 fa-user"></span>
13 {if $article->userID}
14 <a href="{link controller='User' id=$article->userID title=$article->username}{/link}" class="userLink" data-user-id="{@$article->userID}">{$article->username}</a>
15 {else}
16 {$article->username}
17 {/if}
18 </li>
19
20 <li>
21 <span class="icon icon16 fa-clock-o"></span>
22 {@$article->time|time}
23 </li>
24
25 <li>
26 <span class="icon icon16 fa-comments"></span>
27 {lang}wcf.article.articleComments{/lang}
28 </li>
29
30 <li>
31 <span class="icon icon16 fa-eye"></span>
32 {lang}wcf.article.articleViews{/lang}
33 </li>
34
35 <li class="articleLikesBadge"></li>
36 </ul>
37 </div>
38
39 {hascontent}
40 <nav class="contentHeaderNavigation">
41 <ul>
42 {content}
43 {event name='contentHeaderNavigation'}
44 {/content}
45 </ul>
46 </nav>
47 {/hascontent}
48 </header>
49 {/capture}
50
51 {include file='header'}
52
53 {if $articleContent->getImage()}
54 <section class="section">
55 <figure class="articleImage">
56 <div class="articleImageWrapper">{@$articleContent->getImage()->getThumbnailTag('large')}</div>
57 {if $articleContent->getImage()->caption}
58 <figcaption>{$articleContent->getImage()->caption}</figcaption>
59 {/if}
60 </figure>
61 </section>
62 {/if}
63
64 <section class="section articleContent"
65 data-object-id="{@$article->articleID}"
66 data-object-type="com.woltlab.wcf.likeableArticle" data-like-liked="{if $articleLikeData[$article->articleID]|isset}{@$articleLikeData[$article->articleID]->liked}{/if}" data-like-likes="{if $articleLikeData[$article->articleID]|isset}{@$articleLikeData[$article->articleID]->likes}{else}0{/if}" data-like-dislikes="{if $articleLikeData[$article->articleID]|isset}{@$articleLikeData[$article->articleID]->dislikes}{else}0{/if}" data-like-users='{ {if $articleLikeData[$article->articleID]|isset}{implode from=$articleLikeData[$article->articleID]->getUsers() item=likeUser}"{@$likeUser->userID}": "{$likeUser->username|encodeJSON}"{/implode}{/if} }' data-user-id="{@$article->userID}"
67 >
68 <div class="htmlContent">
69 {if $articleContent->teaser}
70 <p class="articleTeaser">{$articleContent->teaser}</p>
71 {/if}
72
73 {@$articleContent->getFormattedContent()}
74 </div>
75
76 {if !$tags|empty}
77 <ul class="tagList articleTagList">
78 {foreach from=$tags item=tag}
79 <li><a href="{link controller='Tagged' object=$tag}objectType=com.woltlab.wcf.article{/link}" class="articleTag">{$tag->name}</a></li>
80 {/foreach}
81 </ul>
82 {/if}
83
84 <div class="articleLikesSummery"></div>
85
86 <ul class="articleLikeButtons buttonGroup"></ul>
87
88 {if ENABLE_SHARE_BUTTONS}
89 <section class="section jsOnly">
90 <h2 class="sectionTitle">{lang}wcf.message.share{/lang}</h2>
91
92 {include file='shareButtons'}
93 </section>
94 {/if}
95 </section>
96
97 {if ARTICLE_SHOW_ABOUT_AUTHOR}
98 <div class="section articleAboutAuthor">
99 <h2 class="sectionTitle">{lang}wcf.article.aboutAuthor{/lang}</h2>
100
101 <div class="box128">
102 <span class="articleAboutAuthorAvatar">{@$article->getUserProfile()->getAvatar()->getImageTag(128)}</span>
103
104 <div>
105 <div class="articleAboutAuthorText">{$article->getUserProfile()->aboutMe}</div>
106
107 <div class="articleAboutAuthorUsername">
108 <a href="{link controller='User' object=$article->getUserProfile()->getDecoratedObject()}{/link}" class="username userLink" data-user-id="{@$article->getUserProfile()->userID}" rel="author">{if MESSAGE_SIDEBAR_ENABLE_USER_ONLINE_MARKING}{@$article->getUserProfile()->getFormattedUsername()}{else}{$article->getUserProfile()->username}{/if}</a>
109
110 {if MODULE_USER_RANK}
111 {if $article->getUserProfile()->getUserTitle()}
112 <span class="badge userTitleBadge{if $article->getUserProfile()->getRank() && $article->getUserProfile()->getRank()->cssClassName} {@$article->getUserProfile()->getRank()->cssClassName}{/if}">{$article->getUserProfile()->getUserTitle()}</span>
113 {/if}
114 {if $article->getUserProfile()->getRank() && $article->getUserProfile()->getRank()->rankImage}
115 <span class="userRank">{@$article->getUserProfile()->getRank()->getImage()}</span>
116 {/if}
117 {/if}
118 </div>
119 </div>
120 </div>
121 </div>
122 {/if}
123
124 <footer class="contentFooter">
125 {hascontent}
126 <nav class="contentFooterNavigation">
127 <ul>
128 {content}{event name='contentFooterNavigation'}{/content}
129 </ul>
130 </nav>
131 {/hascontent}
132 </footer>
133
134 {if $previousArticle || $nextArticle}
135 <div class="section articleNavigation">
136 <nav>
137 <ul>
138 {if $previousArticle}
139 <li class="previousArticleButton">
140 <a href="{$previousArticle->getLink()}" rel="prev">
141 {if $previousArticle->getImage()}
142 <div class="box96">
143 <span class="articleNavigationArticleImage">{@$previousArticle->getImage()->getElementTag(96)}</span>
144
145 <div>
146 <span class="articleNavigationEntityName">{lang}wcf.article.previousArticle{/lang}</span>
147 <span class="articleNavigationArticleTitle">{$previousArticle->getTitle()}</span>
148 </div>
149 </div>
150 {else}
151 <div>
152 <span class="articleNavigationEntityName">{lang}wcf.article.previousArticle{/lang}</span>
153 <span class="articleNavigationArticleTitle">{$previousArticle->getTitle()}</span>
154 </div>
155 {/if}
156 </a>
157 </li>
158 {/if}
159
160 {if $nextArticle}
161 <li class="nextArticleButton">
162 <a href="{$nextArticle->getLink()}" rel="next">
163 {if $nextArticle->getImage()}
164 <div class="box96">
165 <span class="articleNavigationArticleImage">{@$nextArticle->getImage()->getElementTag(96)}</span>
166
167 <div>
168 <span class="articleNavigationEntityName">{lang}wcf.article.nextArticle{/lang}</span>
169 <span class="articleNavigationArticleTitle">{$nextArticle->getTitle()}</span>
170 </div>
171 </div>
172 {else}
173 <div>
174 <span class="articleNavigationEntityName">{lang}wcf.article.nextArticle{/lang}</span>
175 <span class="articleNavigationArticleTitle">{$nextArticle->getTitle()}</span>
176 </div>
177 {/if}
178 </a>
179 </li>
180 {/if}
181 </ul>
182 </nav>
183 </div>
184 {/if}
185
186 {if $relatedArticles|count}
187 <section class="section relatedArticles">
188 <h2 class="sectionTitle">{lang}wcf.article.relatedArticles{/lang}</h2>
189
190 <ul class="articleList">
191 {foreach from=$relatedArticles item='relatedArticle'}
192 <li>
193 <a href="{$relatedArticle->getLink()}">
194 {if $relatedArticle->getImage()}
195 <div class="box128">
196 <div class="articleListImage">{@$relatedArticle->getImage()->getThumbnailTag('tiny')}</div>
197 {/if}
198
199 <div>
200 <div class="containerHeadline">
201 <h3 class="articleListTitle">{$relatedArticle->getTitle()}</h3>
202 <ul class="inlineList articleListMetaData">
203 <li>
204 <span class="icon icon16 fa-clock-o"></span>
205 {@$relatedArticle->time|time}
206 </li>
207
208 <li>
209 <span class="icon icon16 fa-comments"></span>
210 {lang article=$relatedArticle}wcf.article.articleComments{/lang}
211 </li>
212
213 {if MODULE_LIKE && $__wcf->getSession()->getPermission('user.like.canViewLike')}
214 <li>
215 {if $relatedArticle->likes || $relatedArticle->dislikes}
216 <span class="icon icon16 fa-thumbs-o-{if $relatedArticle->cumulativeLikes < 0}down{else}up{/if} jsTooltip" title="{lang likes=$relatedArticle->likes dislikes=$relatedArticle->dislikes}wcf.like.tooltip{/lang}"></span>
217 {if $relatedArticle->cumulativeLikes > 0}+{elseif $relatedArticle->cumulativeLikes == 0}&plusmn;{/if}{#$relatedArticle->cumulativeLikes}
218 {/if}
219 </li>
220 {/if}
221 </ul>
222 </div>
223
224 <div class="containerContent articleListTeaser">
225 {$relatedArticle->getTeaser()}
226 </div>
227 </div>
228
229 {if $relatedArticle->getImage()}
230 </div>
231 {/if}
232 </a>
233 </li>
234 {/foreach}
235 </ul>
236 </section>
237 {/if}
238
239 {if $article->enableComments}
240 {if $commentList|count || $commentCanAdd}
241 <section class="section sectionContainerList">
242 <h2 class="sectionTitle">{lang}wcf.article.comments{/lang}{if $article->comments} <span class="badge">{#$article->comments}</span>{/if}</h2>
243
244 {include file='__commentJavaScript' commentContainerID='articleCommentList'}
245
246 <ul id="articleCommentList" class="commentList containerList" data-can-add="{if $commentCanAdd}true{else}false{/if}" data-object-id="{@$articleContentID}" data-object-type-id="{@$commentObjectTypeID}" data-comments="{@$commentList->countObjects()}" data-last-comment-time="{@$lastCommentTime}">
247 {include file='commentList'}
248 </ul>
249 </section>
250 {/if}
251 {/if}
252
253 {if MODULE_LIKE && ARTICLE_ENABLE_LIKE}
254 <script data-relocate="true">
255 require(['WoltLab/WCF/Ui/Like/Handler'], function(UiLikeHandler) {
256 new UiLikeHandler('com.woltlab.wcf.likeableArticle', {
257 // settings
258 isSingleItem: true,
259
260 // permissions
261 canDislike: {if LIKE_ENABLE_DISLIKE}true{else}false{/if},
262 canLike: {if $__wcf->getUser()->userID}true{else}false{/if},
263 canLikeOwnContent: {if LIKE_ALLOW_FOR_OWN_CONTENT}true{else}false{/if},
264 canViewSummary: {if LIKE_SHOW_SUMMARY}true{else}false{/if},
265
266 // selectors
267 badgeContainerSelector: '.articleLikesBadge',
268 buttonAppendToSelector: '.articleLikeButtons',
269 containerSelector: '.articleContent',
270 summarySelector: '.articleLikesSummery'
271 });
272 });
273 </script>
274 {/if}
275
276 {include file='footer'}