mirror of
https://github.com/humhub/humhub.git
synced 2025-01-17 06:08:21 +01:00
Fixed markdown comment rendering. + Added collapsable text to comments.
This commit is contained in:
buddh4
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,8 +48,8 @@ $canDelete = $comment->canDelete();
|
||||
width="40"
|
||||
height="40" alt="40x40" data-src="holder.js/40x40" style="width: 40px; height: 40px;"/>
|
||||
</a>
|
||||
|
||||
<div class="media-body">
|
||||
<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]); ?>
|
||||
<?php if ($comment->updated_at != "" && $comment->created_at != $comment->updated_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
|
||||
|
||||
@ -7,74 +7,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' => [
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
* An addition can be registered for a specific selector e.g: <input data-addition-richtext ... />
|
||||
* It is possible to register multiple additions for the same selector.
|
||||
*/
|
||||
humhub.module('ui.additions', function(module, require, $) {
|
||||
humhub.module('ui.additions', function (module, require, $) {
|
||||
|
||||
var event = require('event');
|
||||
var object = require('util.object');
|
||||
@ -23,20 +23,20 @@ humhub.module('ui.additions', function(module, require, $) {
|
||||
* @param function addition addition function
|
||||
* @returns {undefined}
|
||||
*/
|
||||
var register = function(id, selector, handler, options) {
|
||||
var register = function (id, selector, handler, options) {
|
||||
options = options || {};
|
||||
|
||||
if(!_additions[id] || options.overwrite) {
|
||||
if (!_additions[id] || options.overwrite) {
|
||||
_additions[id] = {
|
||||
'selector': selector,
|
||||
'handler': handler
|
||||
};
|
||||
|
||||
// Make sure additions registrated after humhub:ready also affect element
|
||||
if(humhub.initialized) {
|
||||
if (humhub.initialized) {
|
||||
apply($('body'), id);
|
||||
}
|
||||
} else if(options.extend) {
|
||||
} else if (options.extend) {
|
||||
options.selector = selector;
|
||||
module.extend(id, handler, options);
|
||||
}
|
||||
@ -47,17 +47,17 @@ humhub.module('ui.additions', function(module, require, $) {
|
||||
* @param {type} element
|
||||
* @returns {undefined}
|
||||
*/
|
||||
var applyTo = function(element, options) {
|
||||
var applyTo = function (element, options) {
|
||||
options = options || {};
|
||||
|
||||
var $element = (element instanceof $) ? element : $(element);
|
||||
$.each(_additions, function(id) {
|
||||
if(options.filter && !options.filter.indexOf(id)) {
|
||||
$.each(_additions, function (id) {
|
||||
if (options.filter && !options.filter.indexOf(id)) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
module.apply($element, id);
|
||||
} catch(e) {
|
||||
} catch (e) {
|
||||
module.log.error('Error while applying addition ' + id, e);
|
||||
}
|
||||
});
|
||||
@ -70,10 +70,10 @@ humhub.module('ui.additions', function(module, require, $) {
|
||||
* @param {type} addition
|
||||
* @returns {undefined}
|
||||
*/
|
||||
var apply = function($element, id) {
|
||||
var apply = function ($element, id) {
|
||||
var addition = _additions[id];
|
||||
|
||||
if(!addition) {
|
||||
if (!addition) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -81,57 +81,57 @@ humhub.module('ui.additions', function(module, require, $) {
|
||||
addition.handler.apply($match, [$match, $element]);
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
event.on('humhub:ready', function(evt) {
|
||||
var init = function () {
|
||||
event.on('humhub:ready', function (evt) {
|
||||
module.applyTo($('body'));
|
||||
});
|
||||
|
||||
// workaround for jp-player since it sets display to inline which results in a broken view...
|
||||
$(document).on('click.humhub-jp-play', '.jp-play', function() {
|
||||
$(document).on('click.humhub-jp-play', '.jp-play', function () {
|
||||
$(this).closest('.jp-controls').find('.jp-pause').css('display', 'block');
|
||||
});
|
||||
|
||||
// Autosize textareas
|
||||
module.register('autosize', '.autosize', function($match) {
|
||||
module.register('autosize', '.autosize', function ($match) {
|
||||
$match.autosize();
|
||||
});
|
||||
|
||||
// Show tooltips on elements
|
||||
module.register('tooltip', '.tt', function($match) {
|
||||
module.register('tooltip', '.tt', function ($match) {
|
||||
$match.tooltip({
|
||||
html: false,
|
||||
container: 'body'
|
||||
});
|
||||
|
||||
$match.on('click.tooltip', function() {
|
||||
$match.on('click.tooltip', function () {
|
||||
$('.tooltip').remove();
|
||||
});
|
||||
});
|
||||
|
||||
module.register('markdown', '[data-ui-markdown]', function($match) {
|
||||
module.register('markdown', '[data-ui-markdown]', function ($match) {
|
||||
var converter = new Markdown.Converter();
|
||||
Markdown.Extra.init(converter);
|
||||
$match.each(function() {
|
||||
$match.each(function () {
|
||||
var $this = $(this);
|
||||
|
||||
if($this.data('markdownProcessed')) {
|
||||
|
||||
if ($this.data('markdownProcessed')) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Export all richtext features
|
||||
var features = {};
|
||||
$this.find('[data-richtext-feature]').each(function() {
|
||||
$this.find('[data-richtext-feature]').each(function () {
|
||||
var $this = $(this);
|
||||
features[$this.data('guid')] = $this.clone();
|
||||
$this.replaceWith($this.data('guid'));
|
||||
});
|
||||
|
||||
|
||||
var text = richtext.Richtext.plainText($this.clone());
|
||||
var result = converter.makeHtml(text);
|
||||
|
||||
|
||||
// Rewrite richtext feature
|
||||
$.each(features, function(guid, $element) {
|
||||
$.each(features, function (guid, $element) {
|
||||
result = result.replace(guid.trim(), $('<div></div>').html($element).html());
|
||||
});
|
||||
|
||||
@ -140,12 +140,12 @@ humhub.module('ui.additions', function(module, require, $) {
|
||||
});
|
||||
});
|
||||
|
||||
$(document).on('click.humhub-ui-tooltip', function() {
|
||||
$(document).on('click.humhub-ui-tooltip', function () {
|
||||
$('.tooltip').remove();
|
||||
});
|
||||
|
||||
// Show popovers on elements
|
||||
module.register('popover', '.po', function($match) {
|
||||
module.register('popover', '.po', function ($match) {
|
||||
$match.popover({html: true});
|
||||
});
|
||||
|
||||
@ -155,36 +155,36 @@ humhub.module('ui.additions', function(module, require, $) {
|
||||
});*/
|
||||
|
||||
// Replace the standard checkbox and radio buttons
|
||||
/* module.register('forms', ':checkbox, :radio', function($match) {
|
||||
//$match.flatelements();
|
||||
});*/
|
||||
/* module.register('forms', ':checkbox, :radio', function($match) {
|
||||
//$match.flatelements();
|
||||
});*/
|
||||
|
||||
// Deprecated!
|
||||
module.register('', 'a[data-loader="modal"], button[data-loader="modal"]', function($match) {
|
||||
module.register('', 'a[data-loader="modal"], button[data-loader="modal"]', function ($match) {
|
||||
$match.loader();
|
||||
});
|
||||
};
|
||||
|
||||
var extend = function(id, handler, options) {
|
||||
|
||||
var extend = function (id, handler, options) {
|
||||
options = options || {};
|
||||
|
||||
if(_additions[id]) {
|
||||
if (_additions[id]) {
|
||||
var addition = _additions[id];
|
||||
if(options.prepend) {
|
||||
if (options.prepend) {
|
||||
addition.handler = object.chain(addition.handler, handler, addition.handler);
|
||||
} else {
|
||||
addition.handler = object.chain(addition.handler, addition.handler, handler);
|
||||
}
|
||||
|
||||
if(options.selector && options.selector !== addition.selector) {
|
||||
if (options.selector && options.selector !== addition.selector) {
|
||||
addition.selector += ',' + options.selector;
|
||||
}
|
||||
|
||||
if(options.applyOnInit) {
|
||||
if (options.applyOnInit) {
|
||||
module.apply('body', id);
|
||||
}
|
||||
|
||||
} else if(options.selector) {
|
||||
} else if (options.selector) {
|
||||
options.extend = false; // Make sure we don't get caught in a loop somehow.
|
||||
module.register(id, options.selector, handler, options);
|
||||
}
|
||||
@ -196,7 +196,7 @@ humhub.module('ui.additions', function(module, require, $) {
|
||||
* Cleanup some nodes required to prevent memoryleaks in pjax mode.
|
||||
* @returns {undefined}
|
||||
*/
|
||||
var unload = function() {
|
||||
var unload = function () {
|
||||
// Tooltip issue
|
||||
// http://stackoverflow.com/questions/24841028/jquery-tooltip-add-div-role-log-in-my-page
|
||||
// https://bugs.jqueryui.com/ticket/10689
|
||||
@ -206,45 +206,45 @@ humhub.module('ui.additions', function(module, require, $) {
|
||||
$('#ui-datepicker-div').remove();
|
||||
};
|
||||
|
||||
var switchButtons = function(outButton, inButton, cfg) {
|
||||
var switchButtons = function (outButton, inButton, cfg) {
|
||||
cfg = cfg || {};
|
||||
var animation = cfg.animation || 'bounceIn';
|
||||
var $out = (outButton instanceof $) ? outButton : $(outButton);
|
||||
var $in = (inButton instanceof $) ? inButton : $(inButton);
|
||||
|
||||
$out.hide();
|
||||
if(cfg.remove) {
|
||||
if (cfg.remove) {
|
||||
$out.remove();
|
||||
}
|
||||
|
||||
$in.addClass('animated ' + animation).show();
|
||||
};
|
||||
|
||||
var highlight = function(node) {
|
||||
var highlight = function (node) {
|
||||
var $node = (node instanceof $) ? node : $(node);
|
||||
$node.addClass('highlight');
|
||||
$node.delay(200).animate({backgroundColor: 'transparent'}, 1000, function() {
|
||||
$node.delay(200).animate({backgroundColor: 'transparent'}, 1000, function () {
|
||||
$node.removeClass('highlight');
|
||||
$node.css('backgroundColor', '');
|
||||
});
|
||||
};
|
||||
|
||||
var observe = function(node, options) {
|
||||
if(object.isBoolean(options)) {
|
||||
var observe = function (node, options) {
|
||||
if (object.isBoolean(options)) {
|
||||
options = {applyOnInit: options};
|
||||
} else if(!options) {
|
||||
} else if (!options) {
|
||||
options = {};
|
||||
}
|
||||
|
||||
node = (node instanceof $) ? node[0] : node;
|
||||
|
||||
var observer = new MutationObserver(function(mutations) {
|
||||
var observer = new MutationObserver(function (mutations) {
|
||||
module.applyTo(node);
|
||||
});
|
||||
|
||||
observer.observe(node, {childList: true, subtree: true});
|
||||
|
||||
if(options.applyOnInit) {
|
||||
if (options.applyOnInit) {
|
||||
module.applyTo(node, options);
|
||||
}
|
||||
|
||||
|
||||
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
|
||||
});
|
||||
});
|
||||
@ -43,4 +43,16 @@
|
||||
.jp-play-bar {
|
||||
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