added events to comment.js

Igor Chepurnoy · Igor Chepurnoy · commit 56ce4575b71b · 2017-04-29T21:48:29.000+03:00
diff --git a/README.md b/README.md
@@ -202,6 +202,26 @@ You may use the following events:
 ]
 ```
 
+## Using Comment Plugin Events
+
+```js
+$(document).on('beforeCreate', '#comment-form', function (e) {
+    if (!confirm("Everything is correct. Submit?")) {
+        return false;
+    }
+    return true;
+});
+```
+
+Available events are:
+
+* beforeCreate
+* afterCreate
+* beforeDelete
+* afterDelete
+* beforeReply
+* afterReply
+
 ## Internationalization
 
 All text and messages introduced in this extension are translatable under category 'yii2mod.comments'.
diff --git a/assets/js/comment.js b/assets/js/comment.js
@@ -31,6 +31,63 @@
         submitBtnLoadingText: 'Loading...'
     };
 
+    var events = {
+        /**
+         * beforeCreate event is triggered before creating the comment.
+         * The signature of the event handler should be:
+         *     function (event)
+         * where
+         *  - event: an Event object.
+         *
+         * If the handler returns a boolean false, it will stop further comment creation after this event.
+         */
+        beforeCreate: 'beforeCreate',
+        /**
+         * afterCreate event is triggered after comment has been created.
+         * The signature of the event handler should be:
+         *     function (event)
+         * where
+         *  - event: an Event object.
+         */
+        afterCreate: 'afterCreate',
+        /**
+         * beforeDelete event is triggered before comment has been deleted.
+         * The signature of the event handler should be:
+         *     function (event)
+         * where
+         *  - event: an Event object.
+         *
+         * If the handler returns a boolean false, it will stop further comment deletion after this event.
+         */
+        beforeDelete: 'beforeDelete',
+        /**
+         * afterDelete event is triggered after comment has been deleted.
+         * The signature of the event handler should be:
+         *     function (event)
+         * where
+         *  - event: an Event object.
+         */
+        afterDelete: 'afterDelete',
+        /**
+         * beforeReply event is triggered before reply to comment.
+         * The signature of the event handler should be:
+         *     function (event)
+         * where
+         *  - event: an Event object.
+         *
+         * If the handler returns a boolean false, it will stop further comment reply after this event.
+         */
+        beforeReply: 'beforeReply',
+        /**
+         * beforeReply event is triggered after reply to comment.
+         * The signature of the event handler should be:
+         *     function (event)
+         * where
+         *  - event: an Event object.
+         */
+        afterReply: 'afterReply'
+    };
+
     var commentData = {};
 
     // Methods
@@ -65,20 +122,27 @@
 
     /**
      * Create a comment
-     * @returns {boolean}
      */
-    function createComment(event) {
+    function createComment(params) {
         var $commentForm = $(this);
-        var settings = commentData[event.data.wrapperSelector].settings;
+
+        var event = $.Event(events.beforeCreate);
+        $commentForm.trigger(event);
+        if (event.result === false) {
+            return false;
+        }
+
+        var settings = commentData[params.data.wrapperSelector].settings;
         var pjaxSettings = $.extend({container: settings.pjaxContainerId}, settings.pjaxSettings);
         var formData = $commentForm.serializeArray();
         formData.push({'name': 'CommentModel[url]', 'value': getCurrentUrl()});
-        // disable submit button
         $commentForm.find(':submit').prop('disabled', true).text(settings.submitBtnLoadingText);
-        // creating a comment and errors handling
+
         $.post($commentForm.attr('action'), formData, function (data) {
-            if (data.status == 'success') {
+            if (data.status === 'success') {
                 $.pjax(pjaxSettings);
+
+                $commentForm.trigger($.Event(events.afterCreate));
             }
             // errors handling
             else {
@@ -88,7 +152,6 @@
                 else {
                     $commentForm.yiiActiveForm('updateAttribute', 'commentmodel-content', [data.message]);
                 }
-                // enable submit button
                 $commentForm.find(':submit').prop('disabled', false).text(settings.submitBtnText);
             }
         }).fail(function (xhr, status, error) {
@@ -101,28 +164,39 @@
 
     /**
      * Reply to comment
-     * @param event
+     *
+     * @param params
      */
-    function reply(event) {
+    function reply(params) {
         var $this = $(this);
-        var $commentForm = $(event.data.formSelector);
-        var settings = commentData[event.data.wrapperSelector].settings;
+        var $commentForm = $(params.data.formSelector);
+
+        var event = $.Event(events.beforeReply);
+        $commentForm.trigger(event);
+        if (event.result === false) {
+            return false;
+        }
+
+        var settings = commentData[params.data.wrapperSelector].settings;
         var parentCommentSelector = $this.parents('[data-comment-content-id="' + $this.data('comment-id') + '"]');
         // append the comment form inside particular comment container
         $commentForm.appendTo(parentCommentSelector);
         $commentForm.find('[data-comment="parent-id"]').val($this.data('comment-id'));
         $commentForm.find(settings.cancelReplyBtnSelector).show();
 
+        $commentForm.trigger($.Event(events.afterReply));
+
         return false;
     }
 
     /**
      * Cancel reply
-     * @param event
+     *
+     * @param params
      */
-    function cancelReply(event) {
-        var $commentForm = $(event.data.formSelector);
-        var settings = commentData[event.data.wrapperSelector].settings;
+    function cancelReply(params) {
+        var $commentForm = $(params.data.formSelector);
+        var settings = commentData[params.data.wrapperSelector].settings;
         var formContainer = $(settings.pjaxContainerId).find(settings.formContainerSelector);
         // prepend the comment form to `formContainer`
         $commentForm.find(settings.cancelReplyBtnSelector).hide();
@@ -134,11 +208,19 @@
 
     /**
      * Delete a comment
-     * @param event
+     *
+     * @param params
      */
-    function deleteComment(event) {
+    function deleteComment(params) {
         var $this = $(this);
-        var settings = commentData[event.data.wrapperSelector].settings;
+        var $commentForm = $(params.data.formSelector);
+        var settings = commentData[params.data.wrapperSelector].settings;
+
+        var event = $.Event(events.beforeDelete);
+        $commentForm.trigger(event);
+        if (event.result === false) {
+            return false;
+        }
 
         $.ajax({
             url: $this.data('url'),
@@ -152,6 +234,8 @@
             }
         });
 
+        $commentForm.trigger(events.afterDelete);
+
         return false;
     }
 
diff --git a/widgets/views/_list.php b/widgets/views/_list.php
@@ -16,10 +16,10 @@
         <div class="comment-details">
             <div class="comment-action-buttons">
                 <?php if (Yii::$app->getUser()->can('admin')) : ?>
-                    <?php echo Html::a('<span class="glyphicon glyphicon-trash"></span> ' . Yii::t('yii2mod.comments', 'Delete'), '#', ['data' => ['action' => 'delete', 'url' => Url::to(['/comment/default/delete', 'id' => $model->id]), 'comment-id' => $model->id]]); ?>
+                    <?php echo Html::a('<span class="glyphicon glyphicon-trash"></span> ' . Yii::t('yii2mod.comments', 'Delete'), '#', ['class' => 'delete-comment-btn', 'data' => ['action' => 'delete', 'url' => Url::to(['/comment/default/delete', 'id' => $model->id]), 'comment-id' => $model->id]]); ?>
                 <?php endif; ?>
                 <?php if (!Yii::$app->user->isGuest && ($model->level < $maxLevel || is_null($maxLevel))) : ?>
-                    <?php echo Html::a("<span class='glyphicon glyphicon-share-alt'></span> " . Yii::t('yii2mod.comments', 'Reply'), '#', ['class' => 'comment-reply', 'data' => ['action' => 'reply', 'comment-id' => $model->id]]); ?>
+                    <?php echo Html::a("<span class='glyphicon glyphicon-share-alt'></span> " . Yii::t('yii2mod.comments', 'Reply'), '#', ['class' => 'reply-comment-btn', 'data' => ['action' => 'reply', 'comment-id' => $model->id]]); ?>
                 <?php endif; ?>
             </div>
             <div class="comment-author-name">
@@ -31,7 +31,7 @@
                     <?php echo Editable::widget([
                         'model' => $model,
                         'attribute' => 'content',
-                        'url' => '/comment/default/quick-edit',
+                        'url' => Url::to(['/comment/default/quick-edit']),
                         'options' => [
                             'id' => 'editable-comment-' . $model->id,
                         ],
@@ -46,7 +46,7 @@
 <?php if ($model->hasChildren()) : ?>
     <ul class="children">
         <?php foreach ($model->getChildren() as $children) : ?>
-            <?php echo $this->render('_list', ['model' => $children, 'maxLevel' => $maxLevel]) ?>
+            <?php echo $this->render('_list', ['model' => $children, 'maxLevel' => $maxLevel]); ?>
         <?php endforeach; ?>
     </ul>
 <?php endif; ?>
