diff --git a/common.blocks/comments/comments.bemtree.js b/common.blocks/comments/comments.bemtree.js index cd723ef..cba7480 100644 --- a/common.blocks/comments/comments.bemtree.js +++ b/common.blocks/comments/comments.bemtree.js @@ -1,8 +1,18 @@ block('comments').content()(function() { - return this.data.comments.map(function(comment) { - return { - block: 'comment', - comment: comment - }; - }); + var comments = this.data.comments; + + return [ + comments.map(function(comment) { + return { + block: 'comment', + comment: comment + }; + }), + { + elem: 'add-form', + content: { + block: 'forum-form' + } + } + ] }); diff --git a/common.blocks/comments/comments.css b/common.blocks/comments/comments.css index de2f5d3..5a70779 100644 --- a/common.blocks/comments/comments.css +++ b/common.blocks/comments/comments.css @@ -21,3 +21,8 @@ background-color: #e1e1e1; } + +.comments__add-form { + padding: 30px 0; + background-color: #fff; +} diff --git a/common.blocks/comments/comments.deps.js b/common.blocks/comments/comments.deps.js index 72b60cd..ec1dd6d 100644 --- a/common.blocks/comments/comments.deps.js +++ b/common.blocks/comments/comments.deps.js @@ -1,3 +1,3 @@ ({ - shouldDeps: 'comment' + shouldDeps: ['comment', 'forum-form'] }) diff --git a/common.blocks/forum-form/forum-form.bemhtml.js b/common.blocks/forum-form/forum-form.bemhtml.js new file mode 100644 index 0000000..283b6f6 --- /dev/null +++ b/common.blocks/forum-form/forum-form.bemhtml.js @@ -0,0 +1,4 @@ +block('forum-form')( + tag()('form'), + js()(true) +); diff --git a/common.blocks/forum-form/forum-form.bemtree.js b/common.blocks/forum-form/forum-form.bemtree.js new file mode 100644 index 0000000..427899e --- /dev/null +++ b/common.blocks/forum-form/forum-form.bemtree.js @@ -0,0 +1,61 @@ +block('forum-form').content()(function() { + var i18n = this.require('i18n'); + + return [ + { + elem: 'forum-create', + content: [ + { + elem: 'header', + content: { + block: 'radio-group', + mods: { theme: 'islands', size: 'm', type: 'button' }, + name: 'radio-button', + val: 1, + options: [ + { + val: 1, + icon: { + block: 'icon', + mods: { view: 'markdown', size: '24' } + } + }, + { + val: 2, + disabled: true, + icon: { + block: 'icon', + mods: { view: 'preview', size: '24' } + } + } + ] + } + }, + { + elem: 'body', + content: [ + { + block: 'textarea', + name: 'body', + mods: { theme: 'islands', size: 'l', width: 'available' }, + mix: [{ block: 'forum-form', elem: 'view' }, { block: 'forum-form', elem: 'view_visible' }], + placeholder: i18n(this.block, 'leaveMessage') + }, + { + elem: 'preview', + mix: { block: 'forum-form', elem: 'view' } + } + ] + } + ] + }, + { + elem: 'submit', + content: { + block: 'button', + mods: { theme: 'islands', size: 'm', view: 'action' }, + text: i18n(this.block, 'comment') + } + } + ] +}); diff --git a/common.blocks/forum-form/forum-form.css b/common.blocks/forum-form/forum-form.css new file mode 100644 index 0000000..7f5b9ab --- /dev/null +++ b/common.blocks/forum-form/forum-form.css @@ -0,0 +1,31 @@ +.forum-form__forum-create { + margin-left: 120px; +} + +.forum-form .forum-form__view { + display: none; + width: 100%; + min-height: 150px; + margin-top: 10px; + resize: vertical; +} + +.forum-form .forum-form__view_visible { + display: inline-block; +} + +.forum-form__preview { + box-sizing: border-box; + border: 1px solid #e5e5e5; + background-color: #f5f5f5; + padding: 5px 20px; +} + +.forum-form__body { + margin-top: 10px; +} + +.forum-form__submit { + margin-left: 120px; + padding-top: 20px; +} diff --git a/common.blocks/forum-form/forum-form.deps.js b/common.blocks/forum-form/forum-form.deps.js new file mode 100644 index 0000000..594f54a --- /dev/null +++ b/common.blocks/forum-form/forum-form.deps.js @@ -0,0 +1,28 @@ +({ + shouldDeps: [ + { + block: 'icon', + mods: { view: ['markdown', 'preview'], size: '24' } + }, + { + block: 'radio-group', + mods: { + theme: 'islands', + size: 'm', + type: 'button' + } + }, + { + block: 'textarea', + mods: { + theme: 'islands', + size: 'm', + width: 'available' + } + }, + { + block: 'button', + mods: { theme: 'islands', size: 'm', view: 'action' } + } + ] +}) diff --git a/common.blocks/forum-form/forum-form.i18n/en.js b/common.blocks/forum-form/forum-form.i18n/en.js new file mode 100644 index 0000000..89687e9 --- /dev/null +++ b/common.blocks/forum-form/forum-form.i18n/en.js @@ -0,0 +1,6 @@ +module.exports = { + 'forum-form': { + leaveMessage: 'Leave a comment', + comment: 'Comment' + } +}; diff --git a/common.blocks/forum-form/forum-form.i18n/ru.js b/common.blocks/forum-form/forum-form.i18n/ru.js new file mode 100644 index 0000000..cc38cd0 --- /dev/null +++ b/common.blocks/forum-form/forum-form.i18n/ru.js @@ -0,0 +1,6 @@ +module.exports = { + 'forum-form': { + leaveMessage: 'Ответить', + comment: 'Написать' + } +}; diff --git a/common.blocks/forum-form/forum-form.js b/common.blocks/forum-form/forum-form.js new file mode 100644 index 0000000..8a8d995 --- /dev/null +++ b/common.blocks/forum-form/forum-form.js @@ -0,0 +1,35 @@ +modules.define('forum-form', ['i-bem__dom', 'jquery'], + function(provide, BEMDOM, $) { + +provide(BEMDOM.decl(this.name, { + onSetMod: { + js: { + inited: function() { + var textarea = this.findBlockInside('textarea'), + plainTextButton = this.findBlocksInside('button')[0], + previewButton = this.findBlocksInside('button')[1]; + + textarea.bindTo('keyup', function() { + $('.textarea').val() ? previewButton.delMod('disabled') : previewButton.setMod('disabled'); + }); + + previewButton.bindTo('click', function(){ + if( $('.textarea').val() ){ + $.post('/comment-preview', { data : $('.textarea').val() }) + .then(function(data) { + $('.textarea').removeClass('forum-form__view_visible'); + $('.forum-form__preview').addClass('forum-form__view_visible').html(data); + }); + } + }); + + plainTextButton.bindTo('click', function(){ + $('.textarea').addClass('forum-form__view_visible'); + $('.forum-form__preview').removeClass('forum-form__view_visible'); + }); + } + } + } +})); + +}); diff --git a/common.blocks/icon/_size/icon_size_24.css b/common.blocks/icon/_size/icon_size_24.css new file mode 100644 index 0000000..9735370 --- /dev/null +++ b/common.blocks/icon/_size/icon_size_24.css @@ -0,0 +1,4 @@ +.icon_size_24 { + background-size: 24px; + margin: 0 10px; +} diff --git a/common.blocks/icon/_view/icon_view_markdown.css b/common.blocks/icon/_view/icon_view_markdown.css new file mode 100644 index 0000000..9404074 --- /dev/null +++ b/common.blocks/icon/_view/icon_view_markdown.css @@ -0,0 +1,3 @@ +.icon_view_markdown { + background-image: url('data:image/svg+xml,'); +} diff --git a/common.blocks/icon/_view/icon_view_preview.css b/common.blocks/icon/_view/icon_view_preview.css new file mode 100644 index 0000000..ebee133 --- /dev/null +++ b/common.blocks/icon/_view/icon_view_preview.css @@ -0,0 +1,3 @@ +.icon_view_preview { + background-image: url('data:image/svg+xml,'); +} diff --git a/server/controllers/gh.js b/server/controllers/gh.js index 698eff7..9088598 100644 --- a/server/controllers/gh.js +++ b/server/controllers/gh.js @@ -62,6 +62,12 @@ function getComments(req, res) { }); } +function getCommentPreview(req, res) { + var comment = req.body.data; + + res.send(marked(comment)); +} + function get404 (req, res) { makeIssueRequest(issuesRequestUrl).then(function(issues) { var latestIssues = issues.slice(0, 10); @@ -109,5 +115,6 @@ module.exports = { getIssues, getIssue, getComments, + getCommentPreview, get404 }; diff --git a/server/router.js b/server/router.js index 4e4af70..f476291 100644 --- a/server/router.js +++ b/server/router.js @@ -16,6 +16,7 @@ router .get('/:id(\\d+)', keepRetpath, controllers.gh.getIssue) .get('/api/:id(\\d+)/comments', controllers.gh.getComments) + .post('/comment-preview', controllers.gh.getCommentPreview) // Auth routes .get('/auth/github', passportGitHub.authenticate('github', { scope: ['user:email'] }))