From 3a027c8989f72cc7050cb8f30cf906964424588b Mon Sep 17 00:00:00 2001 From: buddh4 Date: Thu, 9 Feb 2017 15:25:01 +0100 Subject: [PATCH] Fixed markdown comment rendering. + Added collapsable text to comments. --- protected/humhub/assets/CoreApiAsset.php | 1 + .../comment/resources/js/humhub.comment.js | 1 + .../comment/widgets/views/showComment.php | 12 +-- .../_support/_generated/UnitTesterActions.php | 2 +- .../modules/post/resources/js/humhub.post.js | 68 ------------- .../modules/post/widgets/views/wallEntry.php | 2 +- .../_generated/AcceptanceTesterActions.php | 2 +- .../_support/_generated/UnitTesterActions.php | 2 +- protected/humhub/widgets/CoreJsConfig.php | 6 +- static/js/humhub/humhub.ui.additions.js | 98 +++++++++---------- static/js/humhub/humhub.ui.showMore.js | 72 ++++++++++++++ static/less/comment.less | 12 +++ themes/HumHub/css/theme.css | 9 ++ 13 files changed, 157 insertions(+), 130 deletions(-) create mode 100644 static/js/humhub/humhub.ui.showMore.js diff --git a/protected/humhub/assets/CoreApiAsset.php b/protected/humhub/assets/CoreApiAsset.php index a9311bad58..83c9f3f6fe 100755 --- a/protected/humhub/assets/CoreApiAsset.php +++ b/protected/humhub/assets/CoreApiAsset.php @@ -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', diff --git a/protected/humhub/modules/comment/resources/js/humhub.comment.js b/protected/humhub/modules/comment/resources/js/humhub.comment.js index 4e2baccf2b..3926a375b9 100644 --- a/protected/humhub/modules/comment/resources/js/humhub.comment.js +++ b/protected/humhub/modules/comment/resources/js/humhub.comment.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); }); diff --git a/protected/humhub/modules/comment/widgets/views/showComment.php b/protected/humhub/modules/comment/widgets/views/showComment.php index 873344d1c7..1b9e1b0bef 100644 --- a/protected/humhub/modules/comment/widgets/views/showComment.php +++ b/protected/humhub/modules/comment/widgets/views/showComment.php @@ -48,8 +48,8 @@ $canDelete = $comment->canDelete(); width="40" height="40" alt="40x40" data-src="holder.js/40x40" style="width: 40px; height: 40px;"/> - -
+
+

displayName); ?> $comment->created_at]); ?> updated_at != "" && $comment->created_at != $comment->updated_at): ?> @@ -57,12 +57,12 @@ $canDelete = $comment->canDelete();

- - +
+
- +
$comment->message, 'record' => $comment]); ?> - +
$comment]); ?>
diff --git a/protected/humhub/modules/content/tests/codeception/_support/_generated/UnitTesterActions.php b/protected/humhub/modules/content/tests/codeception/_support/_generated/UnitTesterActions.php index c4a0f7b50e..7623058d10 100644 --- a/protected/humhub/modules/content/tests/codeception/_support/_generated/UnitTesterActions.php +++ b/protected/humhub/modules/content/tests/codeception/_support/_generated/UnitTesterActions.php @@ -1,4 +1,4 @@ - 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(' ' + this.options.readMore); - this.$.data('state', 'collapsed'); - }; - - Post.prototype.expand = function() { - this.$.css('max-height', ''); - this.$collapseButton.html(' ' + this.options.readLess); - this.$.data('state', 'expanded'); - }; - - Post.templates = { - showMore : '' - }; module.export({ Post: Post diff --git a/protected/humhub/modules/post/widgets/views/wallEntry.php b/protected/humhub/modules/post/widgets/views/wallEntry.php index 11ce8233b8..087302a40d 100644 --- a/protected/humhub/modules/post/widgets/views/wallEntry.php +++ b/protected/humhub/modules/post/widgets/views/wallEntry.php @@ -1,5 +1,5 @@
-
+
$post->message, 'record' => $post]) ?>
diff --git a/protected/humhub/modules/space/tests/codeception/_support/_generated/AcceptanceTesterActions.php b/protected/humhub/modules/space/tests/codeception/_support/_generated/AcceptanceTesterActions.php index 23b79e552d..88ba6843e7 100644 --- a/protected/humhub/modules/space/tests/codeception/_support/_generated/AcceptanceTesterActions.php +++ b/protected/humhub/modules/space/tests/codeception/_support/_generated/AcceptanceTesterActions.php @@ -1,4 +1,4 @@ - 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' => [ diff --git a/static/js/humhub/humhub.ui.additions.js b/static/js/humhub/humhub.ui.additions.js index a038d00a54..e6104d97a0 100644 --- a/static/js/humhub/humhub.ui.additions.js +++ b/static/js/humhub/humhub.ui.additions.js @@ -5,7 +5,7 @@ * An addition can be registered for a specific selector e.g: * 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(), $('
').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); } diff --git a/static/js/humhub/humhub.ui.showMore.js b/static/js/humhub/humhub.ui.showMore.js new file mode 100644 index 0000000000..8d46bcfe87 --- /dev/null +++ b/static/js/humhub/humhub.ui.showMore.js @@ -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(' ' + this.options.readMoreText); + this.$.data('state', 'collapsed'); + }; + + CollapseContent.prototype.expand = function () { + this.$.css('max-height', ''); + this.$collapseButton.html(' ' + 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: '' + }; + + module.export({ + init: init, + CollapseContent + }); +}); \ No newline at end of file diff --git a/static/less/comment.less b/static/less/comment.less index 746a760c42..fa8679c3e1 100644 --- a/static/less/comment.less +++ b/static/less/comment.less @@ -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; } \ No newline at end of file diff --git a/themes/HumHub/css/theme.css b/themes/HumHub/css/theme.css index f4f4ed1243..9e556ab300 100644 --- a/themes/HumHub/css/theme.css +++ b/themes/HumHub/css/theme.css @@ -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;