Merge pull request #673 from kabalin/comments-panel

Implement comments feed panel visibility control.
PastVu · Apr 20, 2024 · 2fb8d85 · 2fb8d85
2 parents 5bc7dc3 + ed98166
commit 2fb8d85
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 8 deletions.
diff --git a/controllers/__tests__/comment.test.js b/controllers/__tests__/comment.test.js
@@ -78,7 +78,8 @@ describe('comment', () => {
             const data = { txt: 'news comment', type: 'news', obj: news.cid };
 
             // Create 4 comments.
-            const comment0 = await comment.create(data);
+            await comment.create(data);
+
             const comment1 = await comment.create(data);
 
             data.parent = comment1.comment.cid;
@@ -89,7 +90,7 @@ describe('comment', () => {
             data.parent = comment2.comment.cid;
             data.level = comment2.comment.level + 1;
 
-            const comment3 = await comment.create(data);
+            await comment.create(data);
 
             // Sanity check.
             await expect(CommentN.count({ obj: news })).resolves.toBe(4);

diff --git a/public/js/lib/leaflet/extends/L.Google.js b/public/js/lib/leaflet/extends/L.Google.js
@@ -9,9 +9,10 @@ define(['Params', 'leaflet', 'leaflet-plugins/lru', 'leaflet-plugins/Leaflet.Goo
     const url = 'https://maps.googleapis.com/maps/api/js?v=weekly&region=RU' + keyParam;
 
     // Load Google Maps API library asynchronously.
-    L.GridLayer.GoogleMutant.addInitHook(function() {
+    L.GridLayer.GoogleMutant.addInitHook(function () {
         require(['async!' + url]);
     });
+
     return function (options) {
         options = options || {};
         options.lru = new lru.LRUMap(100); // Tile LRU cache.

diff --git a/public/js/module/main/mainPage.js b/public/js/module/main/mainPage.js
@@ -9,6 +9,7 @@ define(['underscore', 'Utils', 'Params', 'knockout', 'knockout.mapping', 'm/_mod
     return Cliche.extend({
         pug: pug,
         create: function () {
+            this.map = {};
             this.childs = [
                 {
                     module: 'm/map/map',
@@ -17,6 +18,8 @@ define(['underscore', 'Utils', 'Params', 'knockout', 'knockout.mapping', 'm/_mod
                     ctx: this,
                     callback: function (vm) {
                         this.childModules[vm.id] = vm;
+                        this.map = vm;
+                        this.map.commentFeedShown(this.isCommentFeedShownByDefault());
                     },
                 },
                 {
@@ -41,6 +44,17 @@ define(['underscore', 'Utils', 'Params', 'knockout', 'knockout.mapping', 'm/_mod
 
             this.subscriptions.sizes = P.window.square.subscribe(this.sizesCalc, this);
             ko.applyBindings(globalVM, this.$dom[0]);
+
+            // When comments container is toggled, update state and map bounds.
+            $('#commentsFeed').on('hidden.bs.collapse', function () {
+                this.map.commentFeedShown(false);
+                Utils.setLocalStorage('page.showCommentsFeed', false);
+            }.bind(this));
+            $('#commentsFeed').on('shown.bs.collapse', function () {
+                this.map.commentFeedShown(true);
+                Utils.setLocalStorage('page.showCommentsFeed', true);
+            }.bind(this));
+
             this.show();
         },
         show: function () {
@@ -60,5 +74,10 @@ define(['underscore', 'Utils', 'Params', 'knockout', 'knockout.mapping', 'm/_mod
         mapSize: function () {
             this.$dom.find('#mapContainer').css({ height: P.window.h() - (this.$container.offset().top || 33) - 29 >> 0 });
         },
+        isCommentFeedShownByDefault: function () {
+            const showFeed = Utils.getLocalStorage('page.showCommentsFeed');
+
+            return showFeed !== undefined ? showFeed : true;
+        },
     });
 });
diff --git a/public/js/module/map/map.js b/public/js/module/map/map.js
@@ -8,7 +8,7 @@ define([
     'model/User', 'model/storage', 'leaflet', 'leaflet-extends/L.neoMap', 'm/map/marker',
     'm/photo/status', 'text!tpl/map/map.pug', 'css!style/map/map', 'jquery-ui/draggable', 'jquery-ui/slider',
     'jquery-ui/effect-highlight', 'css!style/jquery/ui/core', 'css!style/jquery/ui/theme', 'css!style/jquery/ui/slider',
-    'css!style/jquery/ui/tooltip',
+    'css!style/jquery/ui/tooltip', 'bs/collapse',
 ], function (_, Browser, Utils, P, ko, Cliche, globalVM, renderer, User, storage, L, Map, MarkerManager, statuses, pug) {
     'use strict';
 
@@ -69,6 +69,8 @@ define([
             });
             this.linkShow = ko.observable(false); //Показывать ссылку на карту
             this.link = ko.observable(''); //Ссылка на карту
+            // State of the comments feed, updated at main/mainPage.
+            this.commentFeedShown = ko.observable(true);
 
             // Map objects
             this.map = null;
@@ -366,6 +368,7 @@ define([
             ko.applyBindings(globalVM, this.$dom[0]);
 
             // Subscriptions
+            this.subscriptions.commentFeedShown = this.commentFeedShown.subscribe(this.sizesCalc, this);
             this.subscriptions.edit = this.editing.subscribe(this.editHandler, this);
             this.subscriptions.sizes = P.window.square.subscribe(this.sizesCalc, this);
             this.subscriptions.openNewTab = this.openNewTab.subscribe(function (val) {
@@ -856,6 +859,9 @@ define([
                 this.removeShowLinkListener();
             }
         },
+        toggleCommentsFeed: function () {
+            $('#commentsFeed').collapse('toggle');
+        },
         removeShowLinkListener: function () {
             this.map.off('zoomstart', this.hideLink, this);
             document.removeEventListener('click', this.showLinkBind);

diff --git a/public/style/main/commentsFeed.less b/public/style/main/commentsFeed.less
@@ -2,8 +2,12 @@
 @import '../bs/variables.less';
 @import '../bs/mixins.less';
 
+.collapsing {
+    .transition(height 0.7s ease-out);
+}
+
 .commentsFeed {
-    position: absolute;
+    position: relative;
     top: 0;
     left: 4px;
     right: 0;

diff --git a/public/style/main/mainPage.less b/public/style/main/mainPage.less
@@ -6,6 +6,7 @@
     position: relative;
     width: 100%;
     max-width: 100%;
+    display: flex;
 
     #mapContainer {
         position: relative;
@@ -14,14 +15,14 @@
     .mainL {
         position: relative;
         width: 83%;
+        flex: 1;
     }
 
     .mainR {
-        position: absolute;
+        position: relative;
         top: 0;
         right: 0;
         width: 17%;
-        height: 100%;
         box-shadow: -1px -5px 7px #333;
     }
 }

diff --git a/views/module/main/mainPage.pug b/views/module/main/mainPage.pug
@@ -2,4 +2,4 @@
     .mainL
         .mContainer.mHidden#mapContainer
         .mContainer.mHidden#bottomPanel
-    .mainR.mContainer.mHidden.mFadeIn#commentsFeed
+    .mainR.mContainer.mHidden.collapse#commentsFeed(data-bind="css: {in: isCommentFeedShownByDefault()}")
diff --git a/views/module/map/map.pug b/views/module/map/map.pug
@@ -81,3 +81,9 @@
                         .layerType(data-bind="css: {selected: type.selected()}, text: type.desc, click: function () {$parents[1].selectLayer(system.id, type.id)}")
                         // /ko
                     // /ko
+            //ko if: !embedded
+            span.tltp-wrap
+                .trtool.button.fringe(aria-describedby="showcomments" data-bind="click: toggleCommentsFeed, attr: {'aria-expanded': (commentFeedShown() ? 'true' : 'false')}" aria-controls="commentsFeed")
+                    span.glyphicon.glyphicon-comment
+                .tltp.tltp-bottom.tltp-hotizontal-right.tltp-animate-opacity(id="showcomments" role="tooltip" data-bind="text: (commentFeedShown() ? 'Скрыть комментарии' : 'Показать комментарии')")
+            // /ko