comments.area.blade.php

<div class="comment-area">
    <nav class="navbar">
        <div class="container-fluid">
            <div>
                <ul class="nav navbar-nav">
                    <li>
                        <p class="navbar-text"><span class="total_count"></span> Comments</p>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    @if(\Auth::check())
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                            {{ \Auth()->user()->first_name }}
                            {{ \Auth()->user()->last_name }}
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="{{ action('Auth\AuthController@getLogout') }}">Logout</a></li>
                        </ul>
                    </li>
                    @else
                        <li>
                            <div class="navbar-text">
                                Login to comment :
                            </div>
                        </li>
                        <li>
                            <a href="{{ action('\App\Http\Controllers\Auth\AuthController@getService', ['google']) }}">
                                <i class="fa fa-google"></i>
                            </a>
                        </li>
                        <li>
                            <a href="{{ action('\App\Http\Controllers\Auth\AuthController@getService', ['github']) }}">
                                <i class="fa fa-github"></i>
                            </a>
                        </li>
                        <li>
                            <a href="{{ action('\App\Http\Controllers\Auth\AuthController@getService', ['facebook']) }}">
                                <i class="fa fa-facebook"></i>
                            </a>
                        </li>
                        <li>
                            <a href="{{ action('\App\Http\Controllers\Auth\AuthController@getService', ['linkedin']) }}">
                                <i class="fa fa-linkedin"></i>
                            </a>
                        </li>
                        <li>
                            <a href="{{ action('\App\Http\Controllers\Auth\AuthController@getService', ['twitter']) }}">
                                <i class="fa fa-twitter"></i>
                            </a>
                        </li>
                        <li>
                            <a href="{{ action('\App\Http\Controllers\Auth\AuthController@getService', ['reddit']) }}">
                                <i class="fa fa-reddit"></i>
                            </a>
                        </li>
                    @endif
                </ul>
            </div>
        </div>
    </nav>
    @if(\Auth::check())
        {!! Form::open(['class' => 'comment-form form-horizontal']) !!}
            <div class="form-group">
                <div class="col-xs-1">
                    <img class="pull-right user-image img-responsive" src="{{ empty(\Auth::user()->profile_img) === false ?  \Auth::user()->profile_img : asset('/img/user.svg') }}">
                </div>
                <div class="col-xs-11">
                    {!! Form::text('comment', null, ['class'=> 'comment-text form-control','placeholder' => $blog->comments->count() == 0 ? 'Start the discussion . . .' : 'Join the discussion . . .' ]) !!}
                </div>
            </div>
            {!! Form::submit('Post', ['class' => 'pull-right comment-post btn btn-primary']) !!}
        {!! Form::close() !!}

        {!! Form::open(['class' => 'hide comment-edit-form row']) !!}
        <div class="form-group">
            {!! Form::text('comment', null, ['class' => 'comment-text form-control']) !!}
        </div>
        <div class="form-group">
            {!! Form::submit('Post', ['class' => 'pull-right comment-post btn btn-primary']) !!}
            <div class="cancel pull-right comment-post btn btn-danger">Cancel</div>
        </div>
        {!! Form::close() !!}
    @endif
    <div class="comments">
        @foreach($blog->comments as $comment)
            @include('blog.comments.comment', [
                'comment' => $comment
            ])
            <hr>
        @endforeach
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function()
    {
        // Update the comment number to include all sub comments
        update_comment_number();

        // Get the timeago
        $('.timestamp').timeago();

        window.setInterval(function(){
            $('.timestamp').timeago();
        }, 1000);

        // When a create comment is emited lets add it in the list
        socket.on('create_comment', function(comment_id, parent_id)
        {
            // We are going to get the comments html
            $.get('{{ action('\App\Http\Controllers\CommentsController@show', [null]) }}/' + comment_id, function(html)
            {
                // Append to the parent id if given
                if(parent_id)
                {
                    $('.comment-row[data-id="' + parent_id + '"]').find('> .reply-area').append(html);
                }
                // just prepend to the comments
                else
                {
                    $('.comments').prepend(html);
                }
                // update the comments number
                update_comment_number();
            });
        });

        // When a comment is being updated we just need to change the html
        socket.on('update_comment', function(comment_id, comment)
        {
            $('.comment-row[data-id="' + comment_id + '"]').find('.comment').first().html(comment);
        });

        // Delete the comment that was passed through
        socket.on('delete_comment', function(comment_id)
        {
            $('.comment-row[data-id="' + comment_id + '"]').remove();
            update_comment_number();
        });

        // We want to update the votes and get the most current vote count
        socket.on('update_votes', function(comment_id, votes)
        {
            $('.comment-row[data-id="' + comment_id + '"]').find('.comment-footer .up-votes').first().html(votes);
        });

        // Submit the comment the resource, this also can do a reply
        $(document).on('submit', '.comment-form', function(e)
        {
            e.preventDefault();
            var form = $(this);

            // Disable the form so they cannot submit it twice
            form.find('.comment-post').prop('disabled', true);

            var comment = $(this).find('.comment-text');

            // we are going to attach the comment to the blog
            $.post("{{ action('\App\Http\Controllers\CommentsController@store') }}",
            {
                comment: comment.val(),
                blog_id: "{{ $blog->id }}",
                reply_to : $(form).data('reply-to')
            }).success(function()
            {
                // if its a reply , remove the generated form
                if($(form).data('reply-to'))
                {
                    $(form).remove();
                }
                else
                {
                    form.find('.comment-post').prop('disabled', false);
                    comment.val('');
                }
            }).error(function()
            {
                form.find('.comment-post').prop('disabled', false);
            });
        });

        // The edit submit is similar to the create except it sends an update
        $(document).on('submit', '.comment-edit-form', function(e)
        {
            e.preventDefault();

            var form = $(this);

            form.find('.comment-post').prop('disabled', true);

            var comment = form.find('.comment-text');

            $.ajax({
                url: "{{ action('\App\Http\Controllers\CommentsController@update', null) }}/" + $(this).data('id'),
                type: 'PUT',
                data: {
                    comment : comment.val()
                }
            }).success(function()
            {
                form.prev().removeClass('hide');
                $(form).remove();
            }).error(function()
            {
                form.find('.comment-post').prop('disabled', false);
            });
        });

        // send the command to delete the comment
        $(document).on('click', '.delete', function(e)
        {
            $.ajax({
                url: "{{ action('\App\Http\Controllers\CommentsController@destroy', null) }}/" + $(this).data('id'),
                type: 'DELETE'
            });
        });

        // When a person clicks the upvote we want to send it to socket.io server
        $(document).on('click', '.up-vote', function()
        {
            var span = this;
            $.post("{{ action('\App\Http\Controllers\CommentVotesController@store') }}",
            {
                comment: $(this).data('id'),
                vote : 1
            }).success(function()
            {
                $(span).parent().find('.down-selected').removeClass('down-selected');
                $(span).toggleClass('up-selected');
            });
        });

        // When a person clicks the downvote we want to send it to socket.io server
        $(document).on('click', '.down-vote', function()
        {
            var span = this;
            $.post("{{ action('\App\Http\Controllers\CommentVotesController@store') }}",
            {
                comment: $(this).data('id'),
                vote: 0
            }).success(function()
            {
                $(span).parent().find('.up-selected').removeClass('up-selected');
                $(span).toggleClass('down-selected');
            });
        });

        // Creates the reply form needed to submit the comment
        $(document).on('click', '.reply', function()
        {
            // Check to see if there is already a form open
            if(!$(this).parent().after().next().is('form'))
            {
                // Close all open edit areas
                close_all();

                var comment_form = $('.comment-form').first().clone().attr('data-reply-to', $(this).data('id'));

                // we want to add a cancel button to the form
                comment_form.find('.comment-post').val('Reply').after('<div class="pull-right btn btn-danger cancel">Cancel</div>');
                $(this).closest('.comment-row').find('> .reply-area').append(comment_form);

                // focus the users cursor to the form
                comment_form.find('.comment-text').first().focus();
            }
        });

        // When user clicks on the form we will clone the edit form and add the corresponding comment id
        $(document).on('click', '.edit', function()
        {
            // Check to see if there is already a form open
            if(!$(this).closest('.reply-area').find('.comment').next().is('form'))
            {
                // Close all open edit areas
                close_all();

                var comment_form = $('.comment-edit-form').first().clone().attr('data-reply-to', $(this).data('id'));

                // add the comment id
                comment_form.data('id', $(this).data('id'));
                comment_form.toggleClass('hide');

                // Get the text of the current comment and let the user edit it
                comment_form.find('.comment-text').val($(this).parent().prev().text().trim());

                // Hide the comment and we will replace it with the new comment form for editing
                $(this).closest('.reply-area').find('.comment').addClass('hide');
                $(this).closest('.reply-area').find('.comment').first().after(comment_form);

                // focus the users cursor to the form
                comment_form.find('.comment-text').first().focus();
            }
        });

        // When a user cancels and edit / reply we want to remove the form
        $(document).on('click', '.cancel', function()
        {
            $(this).closest('.reply-area').find('.comment').removeClass('hide');
            $(this).closest('form').remove();
        });

        // Its always nice to allow enter when commeting
        $(document).keyup(function(e) {

            if (e.keyCode == 27)
            {
                $('input:focus').closest('form').find('.cancel').click();
            }
        });
    });

    function close_all()
    {
        $('.cancel:visible').click();
    }

    function update_comment_number()
    {
        $('.total_count').html($('.comment-row').length);
    }
</script>