refactor dialogs to be individually async (#206)

This commit is contained in:
Nolan Lawson 2018-04-21 09:56:53 -07:00 committed by GitHub
parent 1151a3be4b
commit 12131bd807
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 66 additions and 46 deletions

View file

@ -123,7 +123,8 @@
], ],
"ignore": [ "ignore": [
"dist", "dist",
"routes/_utils/asyncModules.js" "routes/_utils/asyncModules.js",
"routes/_components/dialog/asyncDialogs.js"
] ]
}, },
"esm": { "esm": {

View file

@ -113,7 +113,7 @@
import { store } from '../../_store/store' import { store } from '../../_store/store'
import { slide } from 'svelte-transitions' import { slide } from 'svelte-transitions'
import { postStatus, insertHandleForReply, setReplySpoiler, setReplyVisibility } from '../../_actions/compose' import { postStatus, insertHandleForReply, setReplySpoiler, setReplyVisibility } from '../../_actions/compose'
import { importDialogs } from '../../_utils/asyncModules' import { importShowComposeDialog } from '../dialog/asyncDialogs'
import { classname } from '../../_utils/classname' import { classname } from '../../_utils/classname'
export default { export default {
@ -189,8 +189,8 @@
if (sticky) { if (sticky) {
// when the button is sticky, we're scrolled down the home timeline, // when the button is sticky, we're scrolled down the home timeline,
// so we should launch a new compose dialog // so we should launch a new compose dialog
let dialogs = await importDialogs() let showComposeDialog = await importShowComposeDialog()
dialogs.showComposeDialog() showComposeDialog()
} else { } else {
// else we're actually posting a new toot // else we're actually posting a new toot
this.doPostStatus() this.doPostStatus()

View file

@ -46,7 +46,7 @@
<script> <script>
import IconButton from '../IconButton.html' import IconButton from '../IconButton.html'
import { store } from '../../_store/store' import { store } from '../../_store/store'
import { importDialogs } from '../../_utils/asyncModules' import { importShowEmojiDialog, importShowPostPrivacyDialog } from '../dialog/asyncDialogs'
import { doMediaUpload } from '../../_actions/media' import { doMediaUpload } from '../../_actions/media'
import { toggleContentWarningShown } from '../../_actions/contentWarnings' import { toggleContentWarningShown } from '../../_actions/contentWarnings'
import ComposeAutosuggest from './ComposeAutosuggest.html' import ComposeAutosuggest from './ComposeAutosuggest.html'
@ -70,9 +70,9 @@
store: () => store, store: () => store,
methods: { methods: {
async onEmojiClick () { async onEmojiClick () {
let dialogs = await importDialogs()
let { realm } = this.get() let { realm } = this.get()
dialogs.showEmojiDialog(realm) let showEmojiDialog = await importShowEmojiDialog()
showEmojiDialog(realm)
}, },
onMediaClick () { onMediaClick () {
this.refs.input.click() this.refs.input.click()
@ -83,9 +83,9 @@
doMediaUpload(realm, file) doMediaUpload(realm, file)
}, },
async onPostPrivacyClick () { async onPostPrivacyClick () {
let dialogs = await importDialogs()
let { realm } = this.get() let { realm } = this.get()
dialogs.showPostPrivacyDialog(realm) let showPostPrivacyDialog = await importShowPostPrivacyDialog()
showPostPrivacyDialog(realm)
}, },
onContentWarningClick () { onContentWarningClick () {
let { realm } = this.get() let { realm } = this.get()

View file

@ -0,0 +1,31 @@
export const importShowAccountProfileOptionsDialog = () => import(
/* webpackChunkName: 'showAccountProfileOptionsDialog' */ './creators/showAccountProfileOptionsDialog'
).then(mod => mod.default)
export const importShowComposeDialog = () => import(
/* webpackChunkName: 'showComposeDialog' */ './creators/showComposeDialog'
).then(mod => mod.default)
export const importShowConfirmationDialog = () => import(
/* webpackChunkName: 'showConfirmationDialog' */ './creators/showConfirmationDialog'
).then(mod => mod.default)
export const importShowEmojiDialog = () => import(
/* webpackChunkName: 'showEmojiDialog' */ './creators/showEmojiDialog'
).then(mod => mod.default)
export const importShowImageDialog = () => import(
/* webpackChunkName: 'showImageDialog' */ './creators/showImageDialog'
).then(mod => mod.default)
export const importShowPostPrivacyDialog = () => import(
/* webpackChunkName: 'showPostPrivacyDialog' */ './creators/showPostPrivacyDialog'
).then(mod => mod.default)
export const importShowStatusOptionsDialog = () => import(
/* webpackChunkName: 'showStatusOptionsDialog' */ './creators/showStatusOptionsDialog'
).then(mod => mod.default)
export const importShowVideoDialog = () => import(
/* webpackChunkName: 'showVideoDialog' */ './creators/showVideoDialog'
).then(mod => mod.default)

View file

@ -10,7 +10,7 @@
import ModalDialog from './ModalDialog.html' import ModalDialog from './ModalDialog.html'
import { store } from '../../../_store/store' import { store } from '../../../_store/store'
import GenericDialogList from './GenericDialogList.html' import GenericDialogList from './GenericDialogList.html'
import { importDialogs } from '../../../_utils/asyncModules' import { importShowComposeDialog } from '../asyncDialogs'
import { createDialogId } from '../helpers/createDialogId' import { createDialogId } from '../helpers/createDialogId'
import { show } from '../helpers/showDialog' import { show } from '../helpers/showDialog'
import { close } from '../helpers/closeDialog' import { close } from '../helpers/closeDialog'
@ -103,8 +103,8 @@ export default {
this.store.setComposeData('dialog', { this.store.setComposeData('dialog', {
text: `@${acct} ` text: `@${acct} `
}) })
let dialogs = await importDialogs() let showComposeDialog = await importShowComposeDialog()
dialogs.showComposeDialog() showComposeDialog()
this.close() this.close()
}, },
async onFollowClicked () { async onFollowClicked () {

View file

@ -2,7 +2,7 @@ import AccountProfileOptionsDialog from '../components/AccountProfileOptionsDial
import { createDialogElement } from '../helpers/createDialogElement' import { createDialogElement } from '../helpers/createDialogElement'
import { createDialogId } from '../helpers/createDialogId' import { createDialogId } from '../helpers/createDialogId'
export function showAccountProfileOptionsDialog (account, relationship, verifyCredentials) { export default function showAccountProfileOptionsDialog (account, relationship, verifyCredentials) {
let dialog = new AccountProfileOptionsDialog({ let dialog = new AccountProfileOptionsDialog({
target: createDialogElement(), target: createDialogElement(),
data: { data: {

View file

@ -2,7 +2,7 @@ import ComposeDialog from '../components/ComposeDialog.html'
import { createDialogElement } from '../helpers/createDialogElement' import { createDialogElement } from '../helpers/createDialogElement'
import { createDialogId } from '../helpers/createDialogId' import { createDialogId } from '../helpers/createDialogId'
export function showComposeDialog () { export default function showComposeDialog () {
let dialog = new ComposeDialog({ let dialog = new ComposeDialog({
target: createDialogElement(), target: createDialogElement(),
data: { data: {

View file

@ -2,7 +2,7 @@ import ConfirmationDialog from '../components/ConfirmationDialog.html'
import { createDialogElement } from '../helpers/createDialogElement' import { createDialogElement } from '../helpers/createDialogElement'
import { createDialogId } from '../helpers/createDialogId' import { createDialogId } from '../helpers/createDialogId'
export function showConfirmationDialog (options) { export default function showConfirmationDialog (options) {
let dialog = new ConfirmationDialog({ let dialog = new ConfirmationDialog({
target: createDialogElement(), target: createDialogElement(),
data: Object.assign({ data: Object.assign({

View file

@ -2,7 +2,7 @@ import EmojiDialog from '../components/EmojiDialog.html'
import { createDialogElement } from '../helpers/createDialogElement' import { createDialogElement } from '../helpers/createDialogElement'
import { createDialogId } from '../helpers/createDialogId' import { createDialogId } from '../helpers/createDialogId'
export function showEmojiDialog (realm) { export default function showEmojiDialog (realm) {
let emojiDialog = new EmojiDialog({ let emojiDialog = new EmojiDialog({
target: createDialogElement(), target: createDialogElement(),
data: { data: {

View file

@ -2,7 +2,7 @@ import ImageDialog from '../components/ImageDialog.html'
import { createDialogElement } from '../helpers/createDialogElement' import { createDialogElement } from '../helpers/createDialogElement'
import { createDialogId } from '../helpers/createDialogId' import { createDialogId } from '../helpers/createDialogId'
export function showImageDialog (poster, src, type, width, height, description) { export default function showImageDialog (poster, src, type, width, height, description) {
let imageDialog = new ImageDialog({ let imageDialog = new ImageDialog({
target: createDialogElement(), target: createDialogElement(),
data: { data: {

View file

@ -2,7 +2,7 @@ import PostPrivacyDialog from '../components/PostPrivacyDialog.html'
import { createDialogElement } from '../helpers/createDialogElement' import { createDialogElement } from '../helpers/createDialogElement'
import { createDialogId } from '../helpers/createDialogId' import { createDialogId } from '../helpers/createDialogId'
export function showPostPrivacyDialog (realm) { export default function showPostPrivacyDialog (realm) {
let dialog = new PostPrivacyDialog({ let dialog = new PostPrivacyDialog({
target: createDialogElement(), target: createDialogElement(),
data: { data: {

View file

@ -2,7 +2,7 @@ import StatusOptionsDialog from '../components/StatusOptionsDialog.html'
import { createDialogElement } from '../helpers/createDialogElement' import { createDialogElement } from '../helpers/createDialogElement'
import { createDialogId } from '../helpers/createDialogId' import { createDialogId } from '../helpers/createDialogId'
export function showStatusOptionsDialog (statusId) { export default function showStatusOptionsDialog (statusId) {
let dialog = new StatusOptionsDialog({ let dialog = new StatusOptionsDialog({
target: createDialogElement(), target: createDialogElement(),
data: { data: {

View file

@ -2,7 +2,7 @@ import VideoDialog from '../components/VideoDialog.html'
import { createDialogElement } from '../helpers/createDialogElement' import { createDialogElement } from '../helpers/createDialogElement'
import { createDialogId } from '../helpers/createDialogId' import { createDialogId } from '../helpers/createDialogId'
export function showVideoDialog (poster, src, width, height, description) { export default function showVideoDialog (poster, src, width, height, description) {
let videoDialog = new VideoDialog({ let videoDialog = new VideoDialog({
target: createDialogElement(), target: createDialogElement(),
data: { data: {

View file

@ -1,8 +0,0 @@
export * from './creators/showConfirmationDialog'
export * from './creators/showImageDialog'
export * from './creators/showVideoDialog'
export * from './creators/showEmojiDialog'
export * from './creators/showPostPrivacyDialog'
export * from './creators/showStatusOptionsDialog'
export * from './creators/showComposeDialog'
export * from './creators/showAccountProfileOptionsDialog'

View file

@ -106,7 +106,7 @@
</style> </style>
<script> <script>
import IconButton from '../IconButton.html' import IconButton from '../IconButton.html'
import { importDialogs } from '../../_utils/asyncModules' import { importShowAccountProfileOptionsDialog } from '../dialog/asyncDialogs'
const numberFormat = new Intl.NumberFormat('en-US') const numberFormat = new Intl.NumberFormat('en-US')
@ -122,8 +122,8 @@
methods: { methods: {
async onMoreOptionsClick () { async onMoreOptionsClick () {
let { account, relationship, verifyCredentials } = this.get() let { account, relationship, verifyCredentials } = this.get()
let dialogs = await importDialogs() let showAccountProfileOptionsDialog = await importShowAccountProfileOptionsDialog()
dialogs.showAccountProfileOptionsDialog(account, relationship, verifyCredentials) showAccountProfileOptionsDialog(account, relationship, verifyCredentials)
} }
}, },
components: { components: {

View file

@ -98,7 +98,7 @@
</style> </style>
<script> <script>
import { DEFAULT_MEDIA_WIDTH, DEFAULT_MEDIA_HEIGHT, ONE_TRANSPARENT_PIXEL } from '../../_static/media' import { DEFAULT_MEDIA_WIDTH, DEFAULT_MEDIA_HEIGHT, ONE_TRANSPARENT_PIXEL } from '../../_static/media'
import { importDialogs } from '../../_utils/asyncModules' import { importShowVideoDialog, importShowImageDialog } from '../dialog/asyncDialogs'
import { mouseover } from '../../_utils/events' import { mouseover } from '../../_utils/events'
import NonAutoplayGifv from '../NonAutoplayGifv.html' import NonAutoplayGifv from '../NonAutoplayGifv.html'
import PlayVideoIcon from '../PlayVideoIcon.html' import PlayVideoIcon from '../PlayVideoIcon.html'
@ -143,14 +143,14 @@
methods: { methods: {
async onClickPlayVideoButton () { async onClickPlayVideoButton () {
let { previewUrl, url, modalWidth, modalHeight, description } = this.get() let { previewUrl, url, modalWidth, modalHeight, description } = this.get()
let dialogs = await importDialogs() let showVideoDialog = await importShowVideoDialog()
dialogs.showVideoDialog(previewUrl, url, showVideoDialog(previewUrl, url,
modalWidth, modalHeight, description) modalWidth, modalHeight, description)
}, },
async onClickShowImageButton () { async onClickShowImageButton () {
let { previewUrl, url, modalWidth, modalHeight, description, type } = this.get() let { previewUrl, url, modalWidth, modalHeight, description, type } = this.get()
let dialogs = await importDialogs() let showImageDialog = await importShowImageDialog()
dialogs.showImageDialog(previewUrl, url, type, showImageDialog(previewUrl, url, type,
modalWidth, modalHeight, description) modalWidth, modalHeight, description)
} }
}, },

View file

@ -47,7 +47,7 @@
import { registerClickDelegates } from '../../_utils/delegate' import { registerClickDelegates } from '../../_utils/delegate'
import { setFavorited } from '../../_actions/favorite' import { setFavorited } from '../../_actions/favorite'
import { setReblogged } from '../../_actions/reblog' import { setReblogged } from '../../_actions/reblog'
import { importDialogs } from '../../_utils/asyncModules' import { importShowStatusOptionsDialog } from '../dialog/asyncDialogs'
import { updateProfileAndRelationship } from '../../_actions/accounts' import { updateProfileAndRelationship } from '../../_actions/accounts'
import { FAVORITE_ANIMATION, REBLOG_ANIMATION } from '../../_static/animations' import { FAVORITE_ANIMATION, REBLOG_ANIMATION } from '../../_static/animations'
import { on } from '../../_utils/eventBus' import { on } from '../../_utils/eventBus'
@ -109,9 +109,9 @@
e.stopPropagation() e.stopPropagation()
let { originalStatusId, originalAccountId } = this.get() let { originalStatusId, originalAccountId } = this.get()
let updateRelationshipPromise = updateProfileAndRelationship(originalAccountId) let updateRelationshipPromise = updateProfileAndRelationship(originalAccountId)
let dialogs = await importDialogs() let showStatusOptionsDialog = await importShowStatusOptionsDialog()
await updateRelationshipPromise await updateRelationshipPromise
dialogs.showStatusOptionsDialog(originalStatusId) showStatusOptionsDialog(originalStatusId)
}, },
onPostedStatus (realm, inReplyToUuid) { onPostedStatus (realm, inReplyToUuid) {
let { let {

View file

@ -95,7 +95,7 @@
import SettingsLayout from '../../../_components/settings/SettingsLayout.html' import SettingsLayout from '../../../_components/settings/SettingsLayout.html'
import ExternalLink from '../../../_components/ExternalLink.html' import ExternalLink from '../../../_components/ExternalLink.html'
import Avatar from '../../../_components/Avatar.html' import Avatar from '../../../_components/Avatar.html'
import { importDialogs } from '../../../_utils/asyncModules' import { importShowConfirmationDialog } from '../../../_components/dialog/asyncDialogs'
import { import {
changeTheme, changeTheme,
switchToInstance, switchToInstance,
@ -137,8 +137,8 @@
e.preventDefault() e.preventDefault()
let { instanceName } = this.get() let { instanceName } = this.get()
let dialogs = await importDialogs() let showConfirmationDialog = await importShowConfirmationDialog()
dialogs.showConfirmationDialog({ showConfirmationDialog({
text: `Log out of ${instanceName}?`, text: `Log out of ${instanceName}?`,
onPositive () { onPositive () {
logOutOfInstance(instanceName) logOutOfInstance(instanceName)

View file

@ -22,10 +22,6 @@ export const importWebSocketClient = () => import(
/* webpackChunkName: '@gamestdio/websocket' */ '@gamestdio/websocket' /* webpackChunkName: '@gamestdio/websocket' */ '@gamestdio/websocket'
).then(mod => mod.default) ).then(mod => mod.default)
export const importDialogs = () => import(
/* webpackChunkName: 'dialogs' */ '../_components/dialog/dialogs.js'
)
export const importVirtualList = () => import( export const importVirtualList = () => import(
/* webpackChunkName: 'VirtualList.html' */ '../_components/virtualList/VirtualList.html' /* webpackChunkName: 'VirtualList.html' */ '../_components/virtualList/VirtualList.html'
).then(mod => mod.default) ).then(mod => mod.default)