From ed98166e417eb27592553898154c67ea1667ad52 Mon Sep 17 00:00:00 2001 From: Ruslan Kabalin Date: Sat, 6 Apr 2024 17:13:44 +0100 Subject: [PATCH] Implement comments feed panel visibility control. Closes #674 --- controllers/__tests__/comment.test.js | 5 +++-- public/js/lib/leaflet/extends/L.Google.js | 3 ++- public/js/module/main/mainPage.js | 19 +++++++++++++++++++ public/js/module/map/map.js | 8 +++++++- public/style/main/commentsFeed.less | 6 +++++- public/style/main/mainPage.less | 5 +++-- views/module/main/mainPage.pug | 2 +- views/module/map/map.pug | 6 ++++++ 8 files changed, 46 insertions(+), 8 deletions(-) diff --git a/controllers/__tests__/comment.test.js b/controllers/__tests__/comment.test.js index 01fcf1e9f..273b55c75 100644 --- 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 index 58e1b7e7f..f1ec4aa66 100644 --- 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®ion=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 index ba03cb565..aea4d4c97 100644 --- 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 index 93c0fc5c0..1a68b2eb9 100644 --- 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 index ade0b1485..44dc61c76 100644 --- 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 index be302300e..2ee07cf79 100644 --- 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 index 43703a081..dad6469c6 100644 --- 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 index f645311fa..9be8a7016 100644 --- 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