Skip to content

Commit 459a462

Browse files
TamaroWalterTamaroWalter
committed
add js to expand/collapse original post
1 parent 1e47368 commit 459a462

File tree

7 files changed

+128
-21
lines changed

7 files changed

+128
-21
lines changed

‎amd/build/show_post.min.js‎

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎amd/build/show_post.min.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎amd/src/show_post.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
// This file is part of Moodle - http://moodle.org/
2+
//
3+
// Moodle is free software: you can redistribute it and/or modify
4+
// it under the terms of the GNU General Public License as published by
5+
// the Free Software Foundation, either version 3 of the License, or
6+
// (at your option) any later version.
7+
//
8+
// Moodle is distributed in the hope that it will be useful,
9+
// but WITHOUT ANY WARRANTY; without even the implied warranty of
10+
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11+
// GNU General Public License for more details.
12+
//
13+
// You should have received a copy of the GNU General Public License
14+
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
15+
16+
import {getString} from "core/str";
17+
import {prefetchStrings} from 'core/prefetch';
18+
/**
19+
* JavaScript for
20+
*
21+
* @module mod_moodleoverflow/show_post
22+
* @copyright 2025 Tamaro Walter
23+
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
24+
*/
25+
26+
const showpostButton = document.getElementById('moodleoverflow_showpost');
27+
const postElement = document.getElementById('moodleoverflow_original_post');
28+
29+
const Selectors = {
30+
actions: {
31+
showpostbutton: '[data-action="mod_moodleoverflow/showpost_button"]',
32+
},
33+
};
34+
35+
/**
36+
* Init function.
37+
*/
38+
export function init() {
39+
prefetchStrings('moodleoverflow', ['showpost_expand', 'showpost_collapse',]);
40+
postElement.setAttribute('expanded', 'false');
41+
postElement.style.maxHeight = '0px';
42+
addEventListener();
43+
}
44+
45+
/**
46+
* Event listener.
47+
*/
48+
const addEventListener = () => {
49+
document.addEventListener('click', async e => {
50+
if (e.target.closest(Selectors.actions.showpostbutton)) {
51+
if (postElement.getAttribute('expanded') === 'true') {
52+
showpostButton.textContent = await getString('showpost_expand', 'moodleoverflow');
53+
postElement.style.maxHeight = '0px';
54+
postElement.setAttribute('expanded', 'false');
55+
} else {
56+
showpostButton.textContent = await getString('showpost_collapse', 'moodleoverflow');
57+
postElement.style.maxHeight = `${postElement.scrollHeight}px`;
58+
postElement.setAttribute('expanded', 'true');
59+
}
60+
}
61+
});
62+
};

‎lang/en/moodleoverflow.php‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -270,6 +270,7 @@
270270
$string['nowtracking'] = '{$a->name} is now tracking \'{$a->moodleoverflow}\'.';
271271
$string['oldpostdays'] = 'Read after days';
272272
$string['original_post'] = 'Original post';
273+
$string['original_post_reply'] = 'You are adressing the post from {$a}:';
273274
$string['parent'] = 'Show parent';
274275
$string['pending_review'] = 'Pending review';
275276
$string['pending_review_but_cannot_now'] = 'Pending review, but cannot be approved until {$a} after the creation of this post to allow the author a bit of time to edit it.';
@@ -369,6 +370,8 @@
369370
$string['scalefactor_help'] = 'The user rating is divided by the scale factor to obtain each user\'s grade. If the resulting grade is greater than the maximum grade, the value is limited to the specified maximum grade';
370371
$string['scalefactorerror'] = 'Scale factor must be a positive integer different than 0';
371372
$string['seeuserstats'] = 'View user statistics';
373+
$string['showpost_collapse'] = 'collapse';
374+
$string['showpost_expand'] = 'expand';
372375
$string['showuserstats'] = 'Show cumulative user statistics';
373376
$string['smallmessage'] = '{$a->user} posted in {$a->moodleoverflowname}';
374377
$string['starterrating'] = 'Helpful';

‎post.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,7 @@
167167
$PAGE->add_body_class('limitedwidth');
168168

169169
// Display all.
170+
$PAGE->requires->js_call_amd('mod_moodleoverflow/show_post', 'init');
170171
echo $OUTPUT->header();
171172
echo $postcontrol->display_original_post();
172173
$mformpost->display();

‎styles.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,25 @@
123123
white-space: nowrap;
124124
}
125125

126+
#moodleoverflow_original_post {
127+
overflow: hidden;
128+
max-height: 0;
129+
transition: max-height 0.4s ease;
130+
}
131+
132+
#moodleoverflow_showpost {
133+
cursor: pointer;
134+
background-color: #6a737b;
135+
font-size: 0.8rem;
136+
}
137+
138+
.original-post-text {
139+
margin-bottom: 5px;
140+
overflow-wrap: break-word;
141+
width: 100%;
142+
word-wrap: break-word;
143+
}
144+
126145
/*
127146
* The Index Page.
128147
*/

‎templates/post_original.mustache‎

Lines changed: 31 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -32,29 +32,39 @@
3232
border" role="region" data-moodleoverflow-postid="{{postid}}">
3333
<div class="d-flex p-2 w-100">
3434
<div class="answercell d-flex flex-column">
35-
<div class="post-text">
36-
{{{ postcontent }}}
35+
<div class="post-info mb-2">
36+
<div class="leftbox">
37+
<span class="text-muted">{{#str}} original_post_reply, moodleoverflow, {{{ byname }}} {{/str}}</span>
38+
</div>
39+
<div class="rightbox">
40+
<div class="post-menu">
41+
<span class="badge rounded-pill" id="moodleoverflow_showpost"
42+
data-action="mod_moodleoverflow/showpost_button">
43+
{{#str}} showpost_expand, moodleoverflow {{/str}}
44+
</span>
45+
</div>
46+
</div>
3747
</div>
38-
<div class="attachments flex-grow-1">
39-
{{#attachments}}
40-
{{#image}}
41-
<img src="{{filepath}}" alt=""/>
48+
<div id="moodleoverflow_original_post">
49+
<div class="original-post-text">
50+
{{{ postcontent }}}
51+
</div>
52+
<div class="attachments flex-grow-1">
53+
{{#attachments}}
54+
{{#image}}
55+
<img src="{{filepath}}" alt=""/>
56+
<br>
57+
{{/image}}
58+
{{^image}}
59+
<a class="icon-size-6" href="{{filepath}}">
60+
{{{icon}}}
61+
</a>
62+
<a href="{{filepath}}">
63+
{{filename}}
64+
</a>
65+
{{/image}}
4266
<br>
43-
{{/image}}
44-
{{^image}}
45-
<a class="icon-size-6" href="{{filepath}}">
46-
{{{icon}}}
47-
</a>
48-
<a href="{{filepath}}">
49-
{{filename}}
50-
</a>
51-
{{/image}}
52-
<br>
53-
{{/attachments}}
54-
</div>
55-
<div class="post-info">
56-
<div class="leftbox {{questioner}}">
57-
<span class="text-muted">{{{ byname }}} - {{ byshortdate }}</span>
67+
{{/attachments}}
5868
</div>
5969
</div>
6070
</div>

0 commit comments

Comments
 (0)