Fixed markdown comment rendering. + Added collapsable text to comments.

This commit is contained in:
buddh4 2017-02-09 15:25:01 +01:00
parent 0182c83c64
commit 3a027c8989
13 changed files with 157 additions and 130 deletions

View File

@ -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',

View File

@ -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);
});

View File

@ -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>

View File

@ -1,4 +1,4 @@
<?php //[STAMP] 0468b7e2480518455b63a22d3aa6f7c2
<?php //[STAMP] e93907d5924b39a3cd4134cc6a6ea3a3
namespace content\_generated;
// This class was automatically generated by build task

View File

@ -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
});

View File

@ -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>

View File

@ -1,4 +1,4 @@
<?php //[STAMP] 890a71cd7f21af7a261c0d3eceef09fb
<?php //[STAMP] 430e094a9cc7da2106caa11ef6778085
namespace space\_generated;
// This class was automatically generated by build task

View File

@ -1,4 +1,4 @@
<?php //[STAMP] ea40a453a487fa3632a18d4dadac1a58
<?php //[STAMP] 58ce1236f98ef299248ede5a3d5a3e7c
namespace _generated;
// This class was automatically generated by build task

View File

@ -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' => [

View 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
});
});

View File

@ -44,3 +44,15 @@
background: #cacaca;
}
}
.comment-container .content_edit {
margin-left: 50px;
}
.comment_edit_content {
margin-left: 50px;
}
.comment-message {
overflow:hidden;
}

View File

@ -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;