comments js

app/assets/scripts/comments.js

@@ -0,0 +1,219 @@
+/// <reference path="../../node_modules/@types/jquery/index.d.ts"/>
+var Comments;
+(function (Comments) {
+    var Controller = (function () {
+        function Controller() {
+            this.comments = new CommentsContainer;
+            this.renderedCount = 0;
+            var showAll = $('.comments__show-all');
+            this.renderedCount = showAll.parent().find('.comments__comment').length;
+            this.loadUrl = showAll.data('load-url');
+            showAll.on('click', this.loadComments.bind(this));
+            this.form = new CommentForm(this);
+        }
+        Controller.prototype.loadComments = function () {
+            $.ajax({
+                url: this.loadUrl,
+                dataType: 'json'
+            }).done((function (data) {
+                var $button = $('.comments__show-all');
+                for (var i = 0; i < data.length; i++) {
+                    if (data.hasOwnProperty(i) && !this.comments.hasId(data[i].id)) {
+                        var comment = new Comment(data[i]);
+                        this.comments.push(comment);
+                        comment.rendered.insertBefore($button);
+                    }
+                }
+                $button.remove();
+            }).bind(this));
+        };
+        Controller.prototype.pushComments = function (data) {
+            for (var i = 0; i < data.length; i++) {
+                if (data.hasOwnProperty(i)) {
+                    var comment = new Comment(data[i]);
+                    this.comments.push(comment);
+                }
+            }
+        };
+        Controller.prototype.addComment = function (data) {
+            var comment = new Comment(data);
+            this.comments.push(comment);
+            if (data.answeredTo)
+                comment.rendered.insertAfter($('.comments').find('[data-comment-id=' + data.answerTo + ']'));
+            else
+                comment.rendered.insertBefore($('.comments__show-all'));
+        };
+        return Controller;
+    }());
+    Comments.Controller = Controller;
+    var CommentsContainer = (function () {
+        function CommentsContainer() {
+        }
+        CommentsContainer.prototype.push = function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            return Array.prototype.push.apply(this, args);
+        };
+        CommentsContainer.prototype.hasId = function (id) {
+            var list = Object.keys(this);
+            for (var i in list) {
+                if (this.hasOwnProperty(i)) {
+                    if (this[i].id === id) {
+                        return true;
+                    }
+                }
+            }
+            return false;
+        };
+        return CommentsContainer;
+    }());
+    var CommentForm = (function () {
+        function CommentForm(owner) {
+            this.owner = owner;
+            $('.comments__add-link').on('click', this.onAddClick.bind(this));
+            $('.comments').on('click', '.comments__comment-reply', this.onAddClick.bind(this));
+            this.form = $('.comments__add-popup-form');
+            this.form.on('submit', this.submitFrom.bind(this));
+            this.formData = [];
+        }
+        CommentForm.prototype.onAddClick = function (event) {
+            event.preventDefault();
+            $('.comments__add-error').remove();
+            $('.comments__add-popup').show();
+            $('.comments__add-back-log').show();
+            var target = $(event.target);
+            var targetId = 0;
+            if (target.hasClass('comments__comment-reply')) {
+                targetId = target.parents('.comments__comment').data('comment-id');
+            }
+            this.formData = { answerTo: targetId };
+        };
+        CommentForm.prototype.submitFrom = function (e) {
+            e.preventDefault();
+            var data = this.form.serializeArray();
+            for (var i in this.form.serializeArray()) {
+                if (data.hasOwnProperty(i)) {
+                    this.formData[data[i].name] = data[i].value;
+                }
+            }
+            $('.comments__add-error').remove();
+            $.ajax({
+                url: this.owner.postEndpointUrl,
+                data: { UserComments: this.formData },
+                dataType: 'json',
+                type: 'post'
+            }).done((function (data) {
+                console.dir(data);
+                if (data.errors) {
+                    for (var fieldName in data.errors) {
+                        if (data.errors.hasOwnProperty(fieldName))
+                            $('<span class="comments__add-error">' + data.errors[fieldName][0] + '</span>').insertAfter(this.form.find('[name=' + fieldName + ']'));
+                    }
+                }
+                else {
+                    //this.form.parent().find('.comments__add-popup-close').click();
+                    this.form.html('<p>Ваш комментарий успешно отправлен. После одобрения модератором он появится на сайте.</p>');
+                    setTimeout((function () {
+                        this.form.parent().find('.comments__add-popup-close').click();
+                    }).bind(this), 3000);
+                    //this.owner.addComment(data.result);
+                }
+            }).bind(this)).fail((function (xhr) {
+                console.dir(xhr.responseText);
+            }).bind(this)).always((function () {
+                this.formData = [];
+            }).bind(this));
+        };
+        return CommentForm;
+    }());
+    var Comment = (function () {
+        function Comment(data) {
+            this.answerTo = 0;
+            this.id = data.id;
+            this.userName = data.userName;
+            this.date = data.datetime;
+            this.text = data.text;
+            this.level = data.answerTo == 0 ? 1 : 2;
+            this.answerTo = data.answerTo;
+        }
+        Object.defineProperty(Comment.prototype, "template", {
+            get: function () {
+                if (this._template !== undefined)
+                    return this._template;
+                this._template = $('<div class="comments__comment"></div>');
+                this._template.append('<div class="comments__comment-text"></div>');
+                var info = $('<div class="comments__comment-info"></div>');
+                info.append('<div class="comments__comment-name"></div>');
+                info.append('<div class="comments__comment-date"></div>');
+                info.append('<div class="comments__comment-reply">Ответить</div>');
+                this._template.append(info);
+                return this._template;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Comment.prototype, "rendered", {
+            get: function () {
+                if (this._rendered !== undefined)
+                    return this._rendered;
+                this._rendered = this.template.clone();
+                return this._rendered;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Comment.prototype, "text", {
+            set: function (value) {
+                this._text = value;
+                this.rendered.find('.comments__comment-text').html(value);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Comment.prototype, "userName", {
+            set: function (value) {
+                this._userName = value;
+                this.rendered.find('.comments__comment-name').html(value);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Comment.prototype, "date", {
+            set: function (value) {
+                this._date = value;
+                var dateObject = new Date(value);
+                this.rendered.find('.comments__comment-date').html(dateObject.toLocaleString("ru", {
+                    year: 'numeric',
+                    month: 'long',
+                    day: 'numeric',
+                    hour: '2-digit',
+                    minute: '2-digit'
+                }).replace(' г.', ''));
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Comment.prototype, "id", {
+            get: function () {
+                return this._id;
+            },
+            set: function (value) {
+                this._id = value;
+                this.rendered.data('comment-id', value);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Comment.prototype, "level", {
+            set: function (value) {
+                this._level = value;
+                this.rendered.addClass('comments__comment--level' + value);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        return Comment;
+    }());
+})(Comments || (Comments = {}));

app/assets/scripts/main.js

@@ -187,5 +187,4 @@
         itemCheckboxClass: 'regionsfilter__checkbox',
         itemLabelClass: 'regionsfilter__label'
     });
-
 })();

app/assets/scripts/regionfilter.js

@@ -19,7 +19,6 @@ var RegionFilter;
             this.$selector.click(this.onSelectorClick.bind(this));
             this.loadSelected();
         }
-
         RegionFilter.prototype.onSelectorClick = function (event) {
             event.preventDefault();
             var context = this;
@@ -40,15 +39,15 @@ var RegionFilter;
             field.find('option').each(function () {
                 var id = $(this).attr('value');
                 itemsContainer.append(
-                    // create container
-                    $("<div class=\"" + context.config.itemContainerClass + "\"></div>")
-                        .append($("<input type=\"checkbox\" class=\"" + context.config.itemCheckboxClass + "\" id=\"rfchb" + id + "\" value=\"" + id + "\">")
-                            .attr('checked', $(this).prop('selected'))
-                            .on('change', function () {
-                                field.find("option[value=" + id + "]").prop('selected', $(this).prop('checked'));
-                                context.setCount(field.find('option:selected').length);
-                            }))
-                        .append($("<label class=\"" + context.config.itemLabelClass + "\" for=\"rfchb" + id + "\">" + $(this).html() + "</label>")));
+                // create container
+                $("<div class=\"" + context.config.itemContainerClass + "\"></div>")
+                    .append($("<input type=\"checkbox\" class=\"" + context.config.itemCheckboxClass + "\" id=\"rfchb" + id + "\" value=\"" + id + "\">")
+                    .attr('checked', $(this).prop('selected'))
+                    .on('change', function () {
+                    field.find("option[value=" + id + "]").prop('selected', $(this).prop('checked'));
+                    context.setCount(field.find('option:selected').length);
+                }))
+                    .append($("<label class=\"" + context.config.itemLabelClass + "\" for=\"rfchb" + id + "\">" + $(this).html() + "</label>")));
             });
             return itemsContainer;
         };
@@ -62,9 +61,7 @@ var RegionFilter;
             return this.selected.hasOwnProperty(id);
         };
         RegionFilter.prototype.setCount = function (count) {
-            if (count === void 0) {
-                count = 0;
-            }
+            if (count === void 0) { count = 0; }
             this.$selector.html('Все ' + this.typeName);
             if (count > 0) {
                 this.$selector.html(count + ' ' + RegionFilter.declOfNum(count, this.strings));

app/assets/scripts/specfilter.js

@@ -96,7 +96,7 @@ var SpecFilter;
             $fancy.find('.specializations__listRegionMore').click(function () {
                 var $link = $(this);
                 var $list = $link.prev();
-                $list.animate({'max-height': $list[0].scrollHeight}, 200, function () {
+                $list.animate({ 'max-height': $list[0].scrollHeight }, 200, function () {
                     $link.remove();
                 });
             });
@@ -105,9 +105,7 @@ var SpecFilter;
             return this.selected.hasOwnProperty(id);
         };
         SpecFilter.prototype.setCount = function (count) {
-            if (count === void 0) {
-                count = 0;
-            }
+            if (count === void 0) { count = 0; }
             this.$selector.html('Все ' + this.typeName);
             if (count > 0) {
                 this.$selector.html(count + ' ' + SpecFilter.declOfNum(count, this.strings));

app/assets/ts/comments.ts

@@ -0,0 +1,216 @@
+/// <reference path="../../node_modules/@types/jquery/index.d.ts"/>
+
+namespace Comments {
+    export class Controller {
+        public loadUrl;
+        public postEndpointUrl;
+        private comments: CommentsContainer = new CommentsContainer;
+        private form: CommentForm;
+        private renderedCount = 0;
+
+        public constructor() {
+            let showAll = $('.comments__show-all');
+            this.renderedCount = showAll.parent().find('.comments__comment').length;
+            this.loadUrl = showAll.data('load-url');
+            showAll.on('click', this.loadComments.bind(this));
+            this.form = new CommentForm(this);
+        }
+
+        public loadComments() {
+            $.ajax({
+                url: this.loadUrl,
+                dataType: 'json'
+            }).done((function (data) {
+                let $button = $('.comments__show-all');
+
+                for (let i = 0; i < data.length; i++) {
+                    if (data.hasOwnProperty(i) && !this.comments.hasId(data[i].id)) {
+                        let comment = new Comment(data[i]);
+                        this.comments.push(comment);
+                        comment.rendered.insertBefore($button);
+                    }
+                }
+                $button.remove();
+            }).bind(this));
+        }
+
+        public pushComments(data) {
+            for (let i = 0; i < data.length; i++) {
+                if (data.hasOwnProperty(i)) {
+                    let comment = new Comment(data[i]);
+                    this.comments.push(comment);
+                }
+            }
+        }
+
+        public addComment(data) {
+            let comment = new Comment(data);
+            this.comments.push(comment);
+            if (data.answeredTo)
+                comment.rendered.insertAfter($('.comments').find('[data-comment-id=' + data.answerTo + ']'));
+            else
+                comment.rendered.insertBefore($('.comments__show-all'));
+        }
+    }
+
+    class CommentsContainer {
+        [index: number]: Comment;
+
+        push(...args) {
+            return Array.prototype.push.apply(this, args);
+        }
+
+        hasId(id) {
+            let list = Object.keys(this);
+            for (let i in list) {
+                if (this.hasOwnProperty(i)) {
+                    if (this[i].id === id) {
+                        return true;
+                    }
+                }
+            }
+            return false;
+        }
+    }
+
+    class CommentForm {
+        private owner;
+        private form: JQuery;
+        private formData;
+
+        constructor(owner: Controller) {
+            this.owner = owner;
+            $('.comments__add-link').on('click', this.onAddClick.bind(this));
+            $('.comments').on('click', '.comments__comment-reply', this.onAddClick.bind(this));
+            this.form = $('.comments__add-popup-form');
+            this.form.on('submit', this.submitFrom.bind(this));
+            this.formData = [];
+        }
+
+        private onAddClick(event) {
+            event.preventDefault();
+            $('.comments__add-error').remove();
+            $('.comments__add-popup').show();
+            $('.comments__add-back-log').show();
+            let target = $(event.target);
+            let targetId = 0;
+            if (target.hasClass('comments__comment-reply')) {
+                targetId = target.parents('.comments__comment').data('comment-id');
+            }
+            this.formData = {answerTo: targetId};
+        }
+
+        private submitFrom(e) {
+            e.preventDefault();
+            let data = this.form.serializeArray();
+            for (let i in this.form.serializeArray()) {
+                if (data.hasOwnProperty(i)) {
+                    this.formData[data[i].name] = data[i].value;
+                }
+            }
+            $('.comments__add-error').remove();
+            $.ajax({
+                url: this.owner.postEndpointUrl,
+                data: {UserComments: this.formData},
+                dataType: 'json',
+                type: 'post'
+            }).done((function (data) {
+                console.dir(data);
+                if (data.errors) {
+                    for (let fieldName in data.errors) {
+                        if (data.errors.hasOwnProperty(fieldName))
+                            $('<span class="comments__add-error">' + data.errors[fieldName][0] + '</span>').insertAfter(this.form.find('[name=' + fieldName + ']'));
+                    }
+                } else {
+                    //this.form.parent().find('.comments__add-popup-close').click();
+                    this.form.html('<p>Ваш комментарий успешно отправлен. После одобрения модератором он появится на сайте.</p>');
+                    setTimeout((function () {
+                        this.form.parent().find('.comments__add-popup-close').click();
+                    }).bind(this), 3000);
+                    //this.owner.addComment(data.result);
+                }
+            }).bind(this)).fail((function (xhr) {
+                console.dir(xhr.responseText);
+            }).bind(this)).always((function () {
+                this.formData = [];
+            }).bind(this));
+        }
+    }
+
+    class Comment {
+        private _template: JQuery;
+        private _rendered: JQuery;
+
+        private _text;
+        private _userName;
+        private _date;
+        private _level;
+        private _id;
+
+        public answerTo = 0;
+
+        constructor(data) {
+            this.id = data.id;
+            this.userName = data.userName;
+            this.date = data.datetime;
+            this.text = data.text;
+            this.level = data.answerTo == 0 ? 1 : 2;
+            this.answerTo = data.answerTo;
+        }
+
+        get template() {
+            if (this._template !== undefined) return this._template;
+
+            this._template = $('<div class="comments__comment"></div>');
+            this._template.append('<div class="comments__comment-text"></div>');
+            let info = $('<div class="comments__comment-info"></div>');
+            info.append('<div class="comments__comment-name"></div>');
+            info.append('<div class="comments__comment-date"></div>');
+            info.append('<div class="comments__comment-reply">Ответить</div>');
+            this._template.append(info);
+            return this._template;
+        }
+
+        get rendered() {
+            if (this._rendered !== undefined) return this._rendered;
+            this._rendered = this.template.clone();
+            return this._rendered;
+        }
+
+        set text(value) {
+            this._text = value;
+            this.rendered.find('.comments__comment-text').html(value);
+        }
+
+        set userName(value) {
+            this._userName = value;
+            this.rendered.find('.comments__comment-name').html(value);
+        }
+
+        set date(value) {
+            this._date = value;
+            let dateObject = new Date(value);
+            this.rendered.find('.comments__comment-date').html(dateObject.toLocaleString("ru", {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit'
+            }).replace(' г.', ''));
+        }
+
+        set id(value) {
+            this._id = value;
+            this.rendered.data('comment-id', value);
+        }
+
+        get id() {
+            return this._id;
+        }
+
+        set level(value) {
+            this._level = value;
+            this.rendered.addClass('comments__comment--level' + value);
+        }
+    }
+}

app/gulpfile.js

@@ -81,6 +81,7 @@ gulp.task('scripts', function () {
         //'assets/scripts/formstyler.js',
         'assets/scripts/regionfilter.js',
         'assets/scripts/specfilter.js',
+        'assets/scripts/comments.js',
         'assets/scripts/main.js'
     ])
         .pipe(plumber())