biovision-comment 0.1.170914 → 0.7.190905.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: f90194297e55ad450ea7bbf54b5793c70d1f8a59
-  data.tar.gz: 7ff6561739d214e95fc48ba9fc9ce7740e798e89
+SHA256:
+  metadata.gz: a602c3288d543c9a10860099700cb6657f206b3b6dce1b88a82c5ad1c239b5c8
+  data.tar.gz: 552231814a6ad6ed6b43c1edbc12b195192090e2ef821d73b962c1c6cd1850b4
 SHA512:
-  metadata.gz: 64bb4f5aa97526081b06a577c0ee26ba5a43a00637acd3af6b796422055124fe3e21210e66c2c418e1846bb6fa6bdaefa89edf3d916645c497efa42e964ff17c
-  data.tar.gz: 10fb7f85ddc4d8eb23d6628a1845d6bc4190d220b1cb3655d3169dfb6fddc88799bd7c5b781920f504a6b6a22543a90dbd9c20159fd1ca1692693298f9755624
+  metadata.gz: ba351318a8b74404e890374ae9c9a1cfab90924d25c10dc0374660fba6b014005e7ce4105ca3f6ce4805939935cbd52fd4517d4cda960057e1e2c23bbbc6badb
+  data.tar.gz: 5272919b6715ef8641f458257d9d35f2638b5c4cb6b593163c1fe44e0e3c5d8da2a265477a205bc338b7bd5625282d9330b7db042de7e1b3556fd04a14ea3a1e

data/README.md

@@ -1,28 +1,82 @@
 # Biovision::Comment
-Short description and motivation.
 
-## Usage
-How to use my plugin.
+Компонент с комментариями для проектов на базе `Biovision`.
 
-## Installation
-Add this line to your application's Gemfile:
+Находится в стадии разработки. Используйте на свой страх и риск.
+
+## Использование
+
+### Подготовка моделей
+
+Для моделей, которым нужны комментарии, следует в классе добавить это:
 
 ```ruby
-gem 'biovision-comment'
+has_many :comments, as: :commentable
 ```
 
-And then execute:
+Тамже всем моделям с комментариями нужно поле `comments_count` для счётчика
+комментарием:
+
 ```bash
-$ bundle
+rails g migration add_comments_count_to_sample comments_count:integer
+```
+
+```ruby
+# frozen_string_literal: true
+
+# Add counter for comments to Sample model
+class AddCommentsCountToSample < ActiveRecord::Migration[5.2]
+  def change
+    add_column :samples, :comments_count, :integer, default: 0, null: false
+  end
+end
+```
+
+### В представлениях
+
+Для вывода комментариев используется код такого вида:
+
+```erb
+<%= render(partial: 'comments/section', locals: { entity: entity }) %>
+```
+
+Здесь `entity` — это объект модели с комментариями.
+
+### Стили и сценарии
+
+Для работы переноса формы ответа нужно включить в сценарии JS код компонента
+в `application.js` после добавления `biovision/base/biovision`:
+
+```
+//= require biovision/comment/biovision-comments
 ```
 
-Or install it yourself as:
+Стили по умолчанию описаны в `biovision/comment/comments.scss`.
+
+## Установка
+
+Нужно добавить компонент в `Gemfile`:
+
+```ruby
+gem 'biovision-comment', git: 'https://github.com/Biovision/biovision-comment'
+# gem 'biovision-comment', path: '/Users/maxim/Projects/Biovision/gems/biovision-comment'
+```
+
+После этого:
+
 ```bash
-$ gem install biovision-comment
+$ bundle
+$ rails railties:install:migrations
+$ rails db:migrate
 ```
 
-## Contributing
-Contribution directions go here.
+## Вклад в разработку
+
+Особых инструкций нет. Fork/update/PR, как обычно. Или просто опишите свои идеи
+в разделе `issues`.
+
+## Лицензия
+
+[MIT License](http://opensource.org/licenses/MIT).
 
-## License
-The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
+Продукт предоставляется «как есть». Используйте на свой страх и риск.

data/app/assets/javascripts/biovision/comment/biovision-comments.js

@@ -0,0 +1,118 @@
+"use strict";
+
+/**
+ * Biovision Comments component
+ *
+ * @type {Object}
+ */
+const Comments = {
+    initialized: false,
+    autoInitComponents: true,
+    components: {}
+};
+
+/**
+ * Move new comment form to different parent comment
+ *
+ * Handles click on "Reply" button and moves form under parent comment.
+ * Click on "Cancel" button moves form back to top-level reply.
+ *
+ * @type {Object}
+ */
+Comments.components.replyFormMover = {
+    initialized: false,
+    /**
+     * Container for list of comments
+     *
+     * @type {HTMLElement}
+     */
+    listContainer: undefined,
+    /**
+     * Container for reply form
+     *
+     * @type {HTMLElement}
+     */
+    mainContainer: undefined,
+    form: undefined,
+    /**
+     * @type {HTMLElement}
+     */
+    parentId: undefined,
+    replyButtons: [],
+    cancelButtons: [],
+    replySelector: ".comment-reply-button button",
+    cancelSelector: ".container button.cancel",
+    /**
+     * Initialize
+     */
+    init: function () {
+        this.listContainer = document.getElementById("comments");
+        this.form = document.getElementById("comment-form");
+
+        if (this.listContainer && this.form) {
+            this.parentId = document.getElementById("comment_parent_id");
+            this.mainContainer = this.listContainer.querySelector(".reply-container .container");
+            this.listContainer.querySelectorAll(this.replySelector).forEach(this.applyToReplyButton);
+            this.listContainer.querySelectorAll(this.cancelSelector).forEach(this.applyToCancelButton);
+
+            this.initialized = true;
+        }
+    },
+    /**
+     * Apply handler for pressing "Reply" button
+     *
+     * @param {HTMLElement} button
+     * @type {Function}
+     */
+    applyToReplyButton: function (button) {
+        const component = Comments.components.replyFormMover;
+
+        component.replyButtons.push(button);
+        button.addEventListener("click", component.move);
+    },
+    /**
+     * Apply handler for pressing "Cancel" button
+     *
+     * @param {HTMLElement} button
+     * @type {Function}
+     */
+    applyToCancelButton: function (button) {
+        const component = Comments.components.replyFormMover;
+
+        component.cancelButtons.push(button);
+        button.addEventListener("click", component.cancel);
+    },
+    /**
+     * Move reply form to parent comment
+     *
+     * @param {Event} event
+     * @type {Function}
+     */
+    move: function (event) {
+        const component = Comments.components.replyFormMover;
+        const button = event.target;
+        const container = button.closest(".comment-reply-block").querySelector(".container");
+
+        if (container) {
+            component.parentId.value = button.closest(".comment-item").getAttribute("data-id");
+            container.appendChild(component.form);
+            container.classList.remove("hidden");
+        }
+    },
+    /**
+     * Handler for pressing "Cancel" button
+     *
+     * @param {Event} event
+     * @type {Function}
+     */
+    cancel: function (event) {
+        const component = Comments.components.replyFormMover;
+        const button = event.target;
+        button.parentNode.classList.add("hidden");
+
+        component.parentId.value = "";
+        component.mainContainer.appendChild(component.form);
+    }
+};
+
+Biovision.components.comments = Comments;

data/app/assets/stylesheets/biovision/comment/comments.scss

@@ -1,35 +1,37 @@
-$border-primary: .1rem solid rgb(127, 127, 127) !default;
-$font-size-decreased: 1.2rem !default;
-$font-size-small: 1rem !default;
+$border-secondary: .1rem solid #aaa !default;
+$text-color-secondary: #777 !default;
 $row-background-even: #f0f0f0 !default;
 $row-background-odd: #fafafa !default;
 
-section.comments {
-  margin: 1.6rem 0;
-  padding: 0 0.8rem;
-  border-top: $border-primary;
-
-  > h2 {
-    margin: 0.8rem 0;
+.comments {
+  h3::first-letter {
+    text-transform: uppercase;
   }
+}
 
-  > div {
-    background-color: $row-background-odd;
-    padding: 0.4rem;
-
-    &:nth-of-type(even) {
-      background-color: $row-background-even;
-    }
-  }
+.comments-list {
+  border-bottom: $border-secondary;
+  margin: var(--spacer-s, 1.6rem) 0;
+  padding: 0 0 var(--spacer-s, 1.6rem);
 }
 
-div.comment {
+.comment-item {
   position: relative;
+  background-color: $row-background-odd;
+  padding: var(--spacer-xxs, .4rem);
+
+  &:first-of-type {
+    margin-top: var(--spacer-s, 1.6rem);
+  }
+
+  &:nth-of-type(even) {
+    background-color: $row-background-even;
+  }
 
   .deleted {
-    font-size: $font-size-decreased;
+    font-size: var(--font-size-decreased, 1.4rem);
     font-style: italic;
-    padding: 0 .8rem;
+    padding: 0 var(--spacer-xs, .8rem);
 
     &::before {
       content: '[';
@@ -41,9 +43,9 @@ div.comment {
   }
 
   .title {
-    padding: 0 0 0.4rem 0;
-    border-bottom: dotted 0.1rem;
-    margin: 0.8rem 0;
+    border-bottom: dotted .1rem;
+    margin: var(--spacer-xs, .8rem) 0;
+    padding: 0 0 var(--spacer-xxs, .4rem) 0;
 
     cite {
       &:before {
@@ -56,39 +58,84 @@ div.comment {
     }
   }
 
+  .meta {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .avatar {
+    height: 4.8rem;
+    margin: 0 var(--spacer-xs, .8rem) 0 0;
+    width: 4.8rem;
+  }
+
+  .info {
+    display: flex;
+    flex-direction: column;
+
+    time {
+      color: $text-color-secondary;
+      font-size: var(--font-size-decreased, 1.4rem);
+      margin-top: auto;
+    }
+  }
+
+  .comment-wrapper {
+    display: flex;
+  }
+
+  .vote-block {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    flex: none;
+    justify-content: center;
+    width: 3.2rem;
+
+    .result {
+      color: $text-color-secondary;
+      font-size: var(--font-size-decreased, 1.4rem);
+      margin: var(--spacer-xxs, .4rem) 0;
+    }
+  }
+
+  .vote {
+    height: 1.6rem;
+    width: .8rem;
+  }
+
   .body {
     background: #ffffff;
-    margin: 0.8rem;
-    padding: 0.8rem;
+    flex: 1;
+    margin: var(--spacer-xs, .8rem);
+    padding: var(--spacer-xs, .8rem);
     position: relative;
   }
 
-  .author {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 0.8rem;
+  p {
+    &:first-of-type {
+      margin-top: 0;
+    }
 
-    time {
-      font-size: $font-size-decreased;
-      font-style: italic;
+    &:last-of-type {
+      margin-bottom: 0;
     }
   }
 
   .footer {
-    padding: 0.8rem 1.6rem;
+    padding: var(--spacer-xs, .8rem) var(--spacer-s, 1.6rem);
 
     > ul {
       display: flex;
+      justify-content: flex-end;
       margin: 0;
       padding: 0;
-      justify-content: flex-end;
 
       > li {
         list-style: none;
-        margin: 0 0.4rem;
+        margin: 0 var(--spacer-xxs, .4rem);
         padding: 0;
-        font-size: $font-size-small;
+        font-size: var(--font-size-small, 1.2rem);
         text-align: right;
 
         &:before {
@@ -102,3 +149,29 @@ div.comment {
     }
   }
 }
+
+.comment-form {
+  .fields {
+    padding: var(--spacer-s, 1.6rem) 0;
+
+    label {
+      display: block;
+    }
+
+    textarea {
+      margin: 0;
+      padding: var(--spacer-xs, .8rem);
+      width: 100%;
+    }
+  }
+
+  .required {
+    label {
+      &::before {
+        color: rgb(255, 63, 0);
+        content: '*';
+        margin: 0 var(--spacer-xxs, .4rem) 0 0;
+      }
+    }
+  }
+}

data/app/controllers/admin/comments_controller.rb

@@ -1,8 +1,11 @@
+# frozen_string_literal: true
+
+# Administrative handling comments
 class Admin::CommentsController < AdminController
   include ToggleableEntity
   include LockableEntity
 
-  before_action :set_entity, except: [:index]
+  before_action :set_entity, except: :index
 
   # get /admin/comments
   def index
@@ -13,16 +16,26 @@ class Admin::CommentsController < AdminController
   def show
   end
 
+  # put /admin/comments/:id/approve
+  def approve
+    @entity.update(approved: true)
+
+    head :no_content
+  end
+
   protected
 
+  def component_slug
+    Biovision::Components::CommentsComponent::SLUG
+  end
+
   def restrict_access
-    require_privilege :moderator
+    error = 'Managing comments is not allowed'
+    handle_http_401(error) unless component_handler.allow?('moderator')
   end
 
   def set_entity
     @entity = Comment.find_by(id: params[:id])
-    if @entity.nil?
-      handle_http_404('Cannot find comment')
-    end
+    handle_http_404('Cannot find comment') if @entity.nil?
   end
 end