mirror of
https://github.com/humhub/humhub.git
synced 2025-01-17 14:18:27 +01:00
Fixed markdown comment rendering. + Added collapsable text to comments.
This commit is contained in:
parent
0182c83c64
commit
3a027c8989
@ -46,6 +46,7 @@ class CoreApiAsset extends AssetBundle
|
||||
'js/humhub/humhub.util.js',
|
||||
'js/humhub/humhub.log.js',
|
||||
'js/humhub/humhub.ui.additions.js',
|
||||
'js/humhub/humhub.ui.showMore.js',
|
||||
'js/humhub/humhub.ui.form.elements.js',
|
||||
'js/humhub/humhub.ui.loader.js',
|
||||
'js/humhub/humhub.action.js',
|
||||
|
@ -143,6 +143,7 @@ humhub.module('comment', function(module, require, $) {
|
||||
client.post(evt, {dataType:'html'}).then(function(response) {
|
||||
var $container = evt.$trigger.parent();
|
||||
$container.html(response.html);
|
||||
additions.applyTo($container);
|
||||
}).catch(function(err) {
|
||||
module.log.error(err, true);
|
||||
});
|
||||
|
@ -48,7 +48,7 @@ $canDelete = $comment->canDelete();
|
||||
width="40"
|
||||
height="40" alt="40x40" data-src="holder.js/40x40" style="width: 40px; height: 40px;"/>
|
||||
</a>
|
||||
|
||||
<div>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading"><a href="<?= $user->getUrl(); ?>"><?= Html::encode($user->displayName); ?></a>
|
||||
<small><?= \humhub\widgets\TimeAgo::widget(['timestamp' => $comment->created_at]); ?>
|
||||
@ -57,12 +57,12 @@ $canDelete = $comment->canDelete();
|
||||
<?php endif; ?>
|
||||
</small>
|
||||
</h4>
|
||||
|
||||
<!-- Class comment_edit_content required since v1.2 -->
|
||||
</div>
|
||||
<!-- class comment_edit_content required since v1.2 -->
|
||||
<div class="content comment_edit_content" id="comment_editarea_<?= $comment->id; ?>">
|
||||
<span id="comment-message-<?= $comment->id; ?>" class="comment-message" data-ui-markdown>
|
||||
<div id="comment-message-<?= $comment->id; ?>" class="comment-message" data-ui-markdown data-ui-show-more data-read-more-text="<?= Yii::t('CommentModule.widgets_views_showComment', 'Read full comment...') ?>">
|
||||
<?= humhub\widgets\RichText::widget(['text' => $comment->message, 'record' => $comment]); ?>
|
||||
</span>
|
||||
</div>
|
||||
<?= humhub\modules\file\widgets\ShowFiles::widget(['object' => $comment]); ?>
|
||||
</div>
|
||||
|
||||
|
@ -1,4 +1,4 @@
|
||||
<?php //[STAMP] 0468b7e2480518455b63a22d3aa6f7c2
|
||||
<?php //[STAMP] e93907d5924b39a3cd4134cc6a6ea3a3
|
||||
namespace content\_generated;
|
||||
|
||||
// This class was automatically generated by build task
|
||||
|
@ -8,74 +8,6 @@ humhub.module('post', function(module, require, $) {
|
||||
|
||||
object.inherits(Post, Widget);
|
||||
|
||||
Post.prototype.getDefaultOptions = function() {
|
||||
return {
|
||||
collapse: 310,
|
||||
readMore: module.text('default.readMore'),
|
||||
readLess: module.text('default.readLess')
|
||||
};
|
||||
};
|
||||
|
||||
Post.prototype.init = function() {
|
||||
this.initCollapse();
|
||||
};
|
||||
|
||||
Post.prototype.initCollapse = function() {
|
||||
var that = this;
|
||||
|
||||
var height = this.$.outerHeight();
|
||||
this.$collapseButton = this.$.siblings('.showMore');
|
||||
|
||||
if(this.options.prevCollapse) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If height expands the max height we init the collapse post logic
|
||||
if(height > this.options.collapse) {
|
||||
if(!this.$collapseButton.length) {
|
||||
this.$collapseButton = $(Post.templates.showMore);
|
||||
this.$.after(this.$collapseButton);
|
||||
}
|
||||
|
||||
// Init collapse button
|
||||
this.$collapseButton.on('click', function(evt) {
|
||||
evt.preventDefault();
|
||||
that.toggleCollapse();
|
||||
}).show();
|
||||
|
||||
// Set init state
|
||||
if(this.data('state') !== 'expanded') {
|
||||
this.collapse();
|
||||
} else {
|
||||
this.expand();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Post.prototype.toggleCollapse = function() {
|
||||
if(this.$.data('state') === 'collapsed') {
|
||||
this.expand();
|
||||
} else {
|
||||
this.collapse();
|
||||
}
|
||||
};
|
||||
|
||||
Post.prototype.collapse = function() {
|
||||
this.$.css({'display': 'block', 'max-height': this.options.collapse+'px'});
|
||||
this.$collapseButton.html('<i class="fa fa-arrow-down"></i> ' + this.options.readMore);
|
||||
this.$.data('state', 'collapsed');
|
||||
};
|
||||
|
||||
Post.prototype.expand = function() {
|
||||
this.$.css('max-height', '');
|
||||
this.$collapseButton.html('<i class="fa fa-arrow-up"></i> ' + this.options.readLess);
|
||||
this.$.data('state', 'expanded');
|
||||
};
|
||||
|
||||
Post.templates = {
|
||||
showMore : '<a href="#" style="display:block;margin: 5px 0;"></a>'
|
||||
};
|
||||
|
||||
module.export({
|
||||
Post: Post
|
||||
});
|
||||
|
@ -1,5 +1,5 @@
|
||||
<div data-ui-widget="post.Post" data-state="collapsed" data-ui-init id="post-content-<?= $post->id; ?>" style="overflow: hidden; margin-bottom: 5px;">
|
||||
<div data-ui-markdown>
|
||||
<div data-ui-markdown data-ui-show-more style="overflow: hidden;">
|
||||
<?= humhub\widgets\RichText::widget(['text' => $post->message, 'record' => $post]) ?>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,4 +1,4 @@
|
||||
<?php //[STAMP] 890a71cd7f21af7a261c0d3eceef09fb
|
||||
<?php //[STAMP] 430e094a9cc7da2106caa11ef6778085
|
||||
namespace space\_generated;
|
||||
|
||||
// This class was automatically generated by build task
|
||||
|
@ -1,4 +1,4 @@
|
||||
<?php //[STAMP] ea40a453a487fa3632a18d4dadac1a58
|
||||
<?php //[STAMP] 58ce1236f98ef299248ede5a3d5a3e7c
|
||||
namespace _generated;
|
||||
|
||||
// This class was automatically generated by build task
|
||||
|
@ -108,10 +108,10 @@ class CoreJsConfig extends Widget
|
||||
'showMore' => Yii::t('base', 'Show more'),
|
||||
]
|
||||
],
|
||||
'post' => [
|
||||
'ui.showMore' => [
|
||||
'text' => [
|
||||
'default.readMore' => Yii::t('PostModule.widgets_views_post', 'Read full post...'),
|
||||
'default.readLess' => Yii::t('PostModule.widgets_views_post', 'Collapse'),
|
||||
'readMore' => Yii::t('PostModule.widgets_views_post', 'Read full post...'),
|
||||
'readLess' => Yii::t('PostModule.widgets_views_post', 'Collapse'),
|
||||
]
|
||||
],
|
||||
'content' => [
|
||||
|
72
static/js/humhub/humhub.ui.showMore.js
Normal file
72
static/js/humhub/humhub.ui.showMore.js
Normal file
@ -0,0 +1,72 @@
|
||||
humhub.module('ui.showMore', function (module, require, $) {
|
||||
var additions = require('ui.additions');
|
||||
|
||||
var CollapseContent = function (node, options) {
|
||||
this.options = options || {};
|
||||
this.$ = node instanceof $ ? node : $(node);
|
||||
this.collapseAt = this.$.data('collapse-at') || 310;
|
||||
this.options.readMoreText = this.$.data('read-more-text') || module.text('readMore');
|
||||
this.options.readLessText = this.$.data('read-less-text') || module.text('readLess');
|
||||
this.init();
|
||||
};
|
||||
|
||||
CollapseContent.prototype.init = function () {
|
||||
var that = this;
|
||||
var height = this.$.outerHeight();
|
||||
this.$collapseButton = this.$.siblings('.showMore');
|
||||
|
||||
// If height expands the max height we init the collapse post logic
|
||||
if (height > this.collapseAt) {
|
||||
if (!this.$collapseButton.length) {
|
||||
this.$collapseButton = $(module.templates.showMore);
|
||||
that.$.after(this.$collapseButton);
|
||||
}
|
||||
|
||||
// Init collapse button
|
||||
this.$collapseButton.on('click', function (evt) {
|
||||
evt.preventDefault();
|
||||
if (that.$.data('state') === 'collapsed') {
|
||||
that.expand();
|
||||
} else {
|
||||
that.collapse();
|
||||
}
|
||||
}).show();
|
||||
|
||||
// Set init state
|
||||
if (this.$.data('state') !== 'expanded') {
|
||||
that.collapse();
|
||||
} else {
|
||||
that.expand();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
CollapseContent.prototype.collapse = function () {
|
||||
this.$.css({'display': 'block', 'max-height': this.collapseAt + 'px'});
|
||||
this.$collapseButton.html('<i class="fa fa-arrow-down"></i> ' + this.options.readMoreText);
|
||||
this.$.data('state', 'collapsed');
|
||||
};
|
||||
|
||||
CollapseContent.prototype.expand = function () {
|
||||
this.$.css('max-height', '');
|
||||
this.$collapseButton.html('<i class="fa fa-arrow-up"></i> ' + this.options.readLessText);
|
||||
this.$.data('state', 'expanded');
|
||||
};
|
||||
|
||||
var init = function () {
|
||||
additions.register('showMore', '[data-ui-show-more]', function ($match) {
|
||||
$match.each(function () {
|
||||
new CollapseContent(this);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
module.templates = {
|
||||
showMore: '<a href="#" style="display:block;margin: 5px 0;"></a>'
|
||||
};
|
||||
|
||||
module.export({
|
||||
init: init,
|
||||
CollapseContent
|
||||
});
|
||||
});
|
@ -44,3 +44,15 @@
|
||||
background: #cacaca;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-container .content_edit {
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.comment_edit_content {
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.comment-message {
|
||||
overflow:hidden;
|
||||
}
|
@ -1891,6 +1891,15 @@ table td a:hover {
|
||||
.comment .jp-play-bar {
|
||||
background: #cacaca;
|
||||
}
|
||||
.comment-container .content_edit {
|
||||
margin-left: 50px;
|
||||
}
|
||||
.comment_edit_content {
|
||||
margin-left: 50px;
|
||||
}
|
||||
.comment-message {
|
||||
overflow: hidden;
|
||||
}
|
||||
.grid-view img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
Loading…
x
Reference in New Issue
Block a user