diff options
author | Maxime Quandalle <maxime@quandalle.com> | 2015-08-31 23:14:31 +0200 |
---|---|---|
committer | Maxime Quandalle <maxime@quandalle.com> | 2015-08-31 23:27:31 +0200 |
commit | 0ce381aa0a64de9a2165843dfe6ee493940f8c26 (patch) | |
tree | a8c48e79c58f1e651b45f74614be25477979de8c /client | |
parent | 549f8fee3aee3675ae2c04fa14b88f4a783df2c6 (diff) | |
download | wekan-0ce381aa0a64de9a2165843dfe6ee493940f8c26.tar.gz wekan-0ce381aa0a64de9a2165843dfe6ee493940f8c26.tar.bz2 wekan-0ce381aa0a64de9a2165843dfe6ee493940f8c26.zip |
Fix the horizontal canvas scrolling on card opening
Diffstat (limited to 'client')
-rw-r--r-- | client/components/boards/boardBody.js | 24 | ||||
-rw-r--r-- | client/components/cards/cardDetails.js | 30 | ||||
-rw-r--r-- | client/config/router.js | 18 |
3 files changed, 43 insertions, 29 deletions
diff --git a/client/components/boards/boardBody.js b/client/components/boards/boardBody.js index aa9d630d..fd9ee6bc 100644 --- a/client/components/boards/boardBody.js +++ b/client/components/boards/boardBody.js @@ -44,20 +44,10 @@ BlazeComponent.extendComponent({ this.draggingActive.set(bool); }, - scrollLeft: function(position) { - position = position || 0; - var $container = $(this.listsDom); - var containerWidth = $container.width(); - var currentScrollPosition = $container.scrollLeft(); - if (position < currentScrollPosition) { - $container.animate({ - scrollLeft: position - }); - } else if (position > currentScrollPosition + containerWidth) { - $container.animate({ - scrollLeft: Math.max(0, position - containerWidth) - }); - } + scrollLeft: function(position = 0) { + this.$('.js-lists').animate({ + scrollLeft: position + }); }, currentCardIsInThisList: function() { @@ -109,10 +99,12 @@ BlazeComponent.extendComponent({ Template.boardBody.onRendered(function() { var self = BlazeComponent.getComponentForElement(this.firstNode); - self.scrollLeft(); - self.listsDom = this.find('.js-lists'); + if (! Session.get('currentCard')) { + self.scrollLeft(); + } + // We want to animate the card details window closing. We rely on CSS // transition for the actual animation. self.listsDom._uihooks = { diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js index 5a7071e8..aba7254a 100644 --- a/client/components/cards/cardDetails.js +++ b/client/components/cards/cardDetails.js @@ -23,12 +23,32 @@ BlazeComponent.extendComponent({ this.componentParent().mouseHasEnterCardDetails = false; }, + scrollParentContainer: function() { + const cardPanelWidth = 510; + let bodyBoardComponent = this.componentParent(); + + let $cardContainer = bodyBoardComponent.$('.js-lists'); + let $cardView = this.$(this.firstNode()); + let cardContainerScroll = $cardContainer.scrollLeft(); + let cardContainerWidth = $cardContainer.width(); + + let cardViewStart = $cardView.offset().left; + let cardViewEnd = cardViewStart + cardPanelWidth; + + let offset = false; + if (cardViewStart < 0) { + offset = cardViewStart; + } else if(cardViewEnd > cardContainerWidth) { + offset = cardViewEnd - cardContainerWidth; + } + + if (offset) { + bodyBoardComponent.scrollLeft(cardContainerScroll + offset); + } + }, + onRendered: function() { - var bodyBoardComponent = this.componentParent(); - var additionalMargin = 550; - var $cardDetails = this.$(this.firstNode()); - var scollLeft = $cardDetails.offset().left + additionalMargin; - bodyBoardComponent.scrollLeft(scollLeft); + this.scrollParentContainer(); }, onDestroyed: function() { diff --git a/client/config/router.js b/client/config/router.js index a3d8897d..77b17b63 100644 --- a/client/config/router.js +++ b/client/config/router.js @@ -7,12 +7,12 @@ FlowRouter.route('/', { name: 'home', triggersEnter: [AccountsTemplates.ensureSignedIn], action: function() { - EscapeActions.executeAll(); - Filter.reset(); - Session.set('currentBoard', null); Session.set('currentCard', null); + Filter.reset(); + EscapeActions.executeAll(); + BlazeLayout.render('defaultLayout', { content: 'boardList' }); } }); @@ -21,15 +21,16 @@ FlowRouter.route('/b/:id/:slug', { name: 'board', action: function(params) { let currentBoard = params.id; + let previousBoard = Session.get('currentBoard'); + Session.set('currentBoard', currentBoard); + Session.set('currentCard', null); + // If we close a card, we'll execute again this route action but we don't // want to excape every current actions (filters, etc.) - if (Session.get('currentBoard') !== currentBoard) { + if (previousBoard !== currentBoard) { EscapeActions.executeAll(); } - Session.set('currentBoard', currentBoard); - Session.set('currentCard', null); - BlazeLayout.render('defaultLayout', { content: 'board' }); } }); @@ -37,10 +38,11 @@ FlowRouter.route('/b/:id/:slug', { FlowRouter.route('/b/:boardId/:slug/:cardId', { name: 'card', action: function(params) { - EscapeActions.executeUpTo('inlinedForm'); Session.set('currentBoard', params.boardId); Session.set('currentCard', params.cardId); + EscapeActions.executeUpTo('inlinedForm'); + BlazeLayout.render('defaultLayout', { content: 'board' }); } }); |