Issues/8

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'
+            }
+        }
+    ]
 });

common.blocks/comments/comments.css

@@ -21,3 +21,8 @@
 
     background-color: #e1e1e1;
 }
+
+.comments__add-form {
+    padding: 30px 0;
+    background-color: #fff;
+}

common.blocks/comments/comments.deps.js

@@ -1,3 +1,3 @@
 ({
-    shouldDeps: 'comment'
+    shouldDeps: ['comment', 'forum-form']
 })

common.blocks/forum-form/forum-form.bemhtml.js

@@ -0,0 +1,4 @@
+block('forum-form')(
+    tag()('form'),
+    js()(true)
+);

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')
+            }
+        }
+    ]
+});

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;
+}

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' }
+        }
+    ]
+})

common.blocks/forum-form/forum-form.i18n/en.js

@@ -0,0 +1,6 @@
+module.exports = {
+    'forum-form': {
+        leaveMessage: 'Leave a comment',
+        comment: 'Comment'
+    }
+};

common.blocks/forum-form/forum-form.i18n/ru.js

@@ -0,0 +1,6 @@
+module.exports = {
+    'forum-form': {
+        leaveMessage: 'Ответить',
+        comment: 'Написать'
+    }
+};

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');
+                });
+            }
+        }
+    }
+}));
+
+});

common.blocks/icon/_size/icon_size_24.css

@@ -0,0 +1,4 @@
+.icon_size_24 {
+    background-size: 24px;
+    margin: 0 10px;
+}

common.blocks/icon/_view/icon_view_markdown.css

@@ -0,0 +1,3 @@
+.icon_view_markdown {
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="208" height="128" viewBox="0 0 208 128"><rect width="198" height="118" x="5" y="5" ry="10" stroke="#000" stroke-width="10" fill="none"/><path d="M30 98V30h20l20 25 20-25h20v68H90V59L70 84 50 59v39zm125 0l-30-33h20V30h20v35h20z"/></svg>');
+}

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

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'] }))