-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(master-detail): improve the detection when we have to switch betw…
…een the master and detail view (by intercepting React updates) style(master-detail): rename "master/details" to "master/detail" to better match the names used by Facebook docs: update version number and changelog
- Loading branch information
1 parent
12823f4
commit 28898d3
Showing
11 changed files
with
167 additions
and
158 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| /* This file is part of Messenger UWP. | ||
| Copyright (C) 2019 Sylvain Bruyère | ||
| Messenger UWP is free software: you can redistribute it and/or modify | ||
| it under the terms of the GNU General Public License as published by | ||
| the Free Software Foundation, version 3. | ||
| Messenger UWP is distributed in the hope that it will be useful, | ||
| but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
| MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||
| GNU General Public License for more details. | ||
| You should have received a copy of the GNU General Public License | ||
| along with Messenger UWP. If not, see <https://www.gnu.org/licenses/>. */ | ||
|
|
||
|
|
||
| /* Property item */ | ||
| ._2zn1 { | ||
| line-height: normal !important; | ||
| height: auto !important; | ||
| padding: 8px 0px; | ||
| } | ||
|
|
||
| /* Property item content (title, details) */ | ||
| ._2zn1 > * { | ||
| margin: 3px 0px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
114 changes: 114 additions & 0 deletions
114
Messenger UWP/JavaScript/messenger-pwa/views/master-detail.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| // This file is part of Messenger UWP. | ||
| // Copyright (C) 2019 Sylvain Bruyère | ||
| // | ||
| // Messenger UWP is free software: you can redistribute it and/or modify | ||
| // it under the terms of the GNU General Public License as published by | ||
| // the Free Software Foundation, version 3. | ||
| // | ||
| // Messenger UWP is distributed in the hope that it will be useful, | ||
| // but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
| // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||
| // GNU General Public License for more details. | ||
| // | ||
| // You should have received a copy of the GNU General Public License | ||
| // along with Messenger UWP. If not, see <https://www.gnu.org/licenses/>. | ||
|
|
||
|
|
||
| MessengerPWA.Views.MasterDetail = (function () { | ||
| var self = {}; | ||
|
|
||
| var container = DOM.getByClass(MessengerPWA.Selectors.MASTER_DETAIL_CONTAINER); | ||
| var root = DOM.getByClass(MessengerPWA.Selectors.ROOT_CONTAINER); | ||
| var rootComponent = null; | ||
|
|
||
| /** | ||
| * Gets if the detail view has content or not. | ||
| */ | ||
| self.hasDetailView = function () { | ||
| return rootComponent.state.reasonState.detailView != null; | ||
| }; | ||
|
|
||
| /** | ||
| * Clears the detail view content. | ||
| * Based on a similar code for removing a conversation. | ||
| */ | ||
| function clearDetailView() { | ||
| rootComponent.setState(function (prevState) { | ||
| prevState.reasonState.activeThreadID = null; | ||
| prevState.reasonState.detailView = null; | ||
| prevState.reasonState.serverThreadID = null; | ||
| return prevState; | ||
| }, function () { | ||
| var url = getUrlWithoutThread(); | ||
| window.history.pushState(url, "", url); | ||
| updateViews(); | ||
| }); | ||
| } | ||
|
|
||
| /** | ||
| * Gets the current URL without the thread name, if existing. | ||
| */ | ||
| function getUrlWithoutThread() { | ||
| var url = window.location.href; | ||
| var index = url.indexOf("/t/"); | ||
| if (index > -1) | ||
| url = url.substring(0, index) + "/" + window.location.search; | ||
| return url; | ||
| } | ||
|
|
||
| /** | ||
| * Updates the displayed views. | ||
| */ | ||
| function updateViews() { | ||
| if (window.innerWidth < 700) { | ||
| if (self.hasDetailView()) { | ||
| container.classList.remove("master"); | ||
| container.classList.add("detail"); | ||
| } | ||
| else { | ||
| container.classList.add("master"); | ||
| container.classList.remove("detail"); | ||
| } | ||
| } | ||
| else { | ||
| container.classList.remove("master"); | ||
| container.classList.remove("detail"); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Triggered after the "MessengerReact" component update. | ||
| */ | ||
| function componentDidUpdate(prevProps, prevState) { | ||
| // If the detail view content appears. | ||
| if (prevState.reasonState.detailView == null && this.state.reasonState.detailView != null) { | ||
| // Ensures the info panel is closed and updates views. | ||
| MessengerPWA.Views.InfoPanel.hide(); | ||
| updateViews(); | ||
|
|
||
| Navigation.pushToStack(clearDetailView); | ||
| } | ||
| // If the detail view content disappears. | ||
| else if (prevState.reasonState.detailView != null && this.state.reasonState.detailView == null) { | ||
| Navigation.popFromStack(); | ||
| } | ||
| } | ||
|
|
||
| if (root && container) { | ||
| // Gets the root "MessengerReact" component. | ||
| rootComponent = ReactInternal.findClosestComponent(root); | ||
|
|
||
| // Intercepts the componentDidUpdate calls to know when the state changes. | ||
| var originalComponentDidUpdate = rootComponent.componentDidUpdate.bind(rootComponent); | ||
| rootComponent.componentDidUpdate = function (prevProps, prevState, snapshot) { | ||
| originalComponentDidUpdate(prevProps, prevState, snapshot); | ||
| componentDidUpdate.call(rootComponent, prevProps, prevState); | ||
| }; | ||
|
|
||
| clearDetailView(); | ||
|
|
||
| window.addEventListener("resize", updateViews, false); | ||
| } | ||
|
|
||
| return self; | ||
| })(); |
93 changes: 0 additions & 93 deletions
93
Messenger UWP/JavaScript/messenger-pwa/views/master-details.js
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.