Skip to content

Commit

Permalink
Merge pull request #673 from kabalin/comments-panel
Browse files Browse the repository at this point in the history
Implement comments feed panel visibility control.
  • Loading branch information
kabalin authored Apr 20, 2024
2 parents 5bc7dc3 + ed98166 commit 2fb8d85
Show file tree
Hide file tree
Showing 8 changed files with 46 additions and 8 deletions.
5 changes: 3 additions & 2 deletions controllers/__tests__/comment.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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);
Expand Down
3 changes: 2 additions & 1 deletion public/js/lib/leaflet/extends/L.Google.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
19 changes: 19 additions & 0 deletions public/js/module/main/mainPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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());
},
},
{
Expand All @@ -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 () {
Expand All @@ -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;
},
});
});
8 changes: 7 additions & 1 deletion public/js/module/map/map.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
Expand Down
6 changes: 5 additions & 1 deletion public/style/main/commentsFeed.less
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
5 changes: 3 additions & 2 deletions public/style/main/mainPage.less
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
position: relative;
width: 100%;
max-width: 100%;
display: flex;

#mapContainer {
position: relative;
Expand All @@ -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;
}
}
Expand Down
2 changes: 1 addition & 1 deletion views/module/main/mainPage.pug
Original file line number Diff line number Diff line change
Expand Up @@ -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()}")
6 changes: 6 additions & 0 deletions views/module/map/map.pug
Original file line number Diff line number Diff line change
Expand Up @@ -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

0 comments on commit 2fb8d85

Please sign in to comment.