feat(svelte): support open-in functionality with svelte components router

nolimits4web · nolimits4web · commit e03477e8cf40 · 2021-10-05T12:18:20.000+03:00
diff --git a/scripts/build-svelte.js b/scripts/build-svelte.js
@@ -13,6 +13,9 @@ async function buildSvelte(cb) {
   const buildPath = getOutput();
 
   const files = fs.readdirSync('src/svelte/components').filter((file) => file.indexOf('.d.ts') < 0);
+  const svelteShared = fs
+    .readdirSync('src/svelte/shared')
+    .filter((file) => file.indexOf('.svelte') > 0);
   const componentImports = [];
   const componentExports = [];
   const svelteComponents = [];
@@ -47,6 +50,9 @@ async function buildSvelte(cb) {
       `${buildPath}/svelte/components/${fileName}`,
     );
   });
+  svelteShared.forEach((fileName) => {
+    fs.copyFileSync(`src/svelte/shared/${fileName}`, `${buildPath}/svelte/shared/${fileName}`);
+  });
 
   const esmContent = fs.readFileSync(`${buildPath}/svelte/framework7-svelte.js`, 'utf-8');
 
diff --git a/src/react/shared/router-open-in.jsx b/src/react/shared/router-open-in.jsx
@@ -70,7 +70,6 @@ export const routerOpenIn = (router, url, options) => {
     const parts = options.openIn.split(':');
     const side = parts[1] || 'left';
     const effect = parts[2] || 'cover';
-    params.targetEl = options.clickedEl || options.targetEl;
     params.component = function DynamicPanel() {
       return (
         <Panel side={side} effect={effect} className="panel-router-open-in" data-url={url}>
diff --git a/src/svelte/shared/components-router.js b/src/svelte/shared/components-router.js
@@ -1,6 +1,7 @@
 /* eslint no-underscore-dangle: "off" */
 import { app } from './f7';
 import { extend, getComponentId } from './utils';
+import { routerOpenIn } from './router-open-in';
 
 const getChildrenArray = (el) => {
   const arr = [];
@@ -18,6 +19,9 @@ const hasSameChildren = (childrenBefore, childrenAfter) => {
 
 export default {
   proto: {
+    openIn(router, navigateUrl, options) {
+      return routerOpenIn(router, navigateUrl, options);
+    },
     pageComponentLoader({ routerEl, component, options, resolve, reject }) {
       const router = this;
       const routerId = router.id;
diff --git a/src/svelte/shared/router-open-in-component.svelte b/src/svelte/shared/router-open-in-component.svelte
@@ -0,0 +1,41 @@
+<script>
+  import Popup from '../components/popup.svelte';
+  import View from '../components/view.svelte';
+  import LoginScreen from '../components/login-screen.svelte';
+  import Sheet from '../components/sheet.svelte';
+  import Popover from '../components/popover.svelte';
+  import Panel from '../components/panel.svelte';
+
+  export let openIn;
+  export let url;
+  export let viewSelector;
+  export let targetEl;
+  export let side;
+  export let effect;
+</script>
+
+{#if openIn === 'popup'}
+  <Popup className="popup-router-open-in" data-url={url}>
+    <View linksView={viewSelector} {url} ignoreOpenIn />
+  </Popup>
+{/if}
+{#if openIn === 'loginScreen'}
+  <LoginScreen className="login-screen-router-open-in" data-url={url}>
+    <View linksView={viewSelector} {url} ignoreOpenIn />
+  </LoginScreen>
+{/if}
+{#if openIn === 'sheet'}
+  <Sheet className="sheet-modal-router-open-in" data-url={url}>
+    <View linksView={viewSelector} {url} ignoreOpenIn />
+  </Sheet>
+{/if}
+{#if openIn === 'popover'}
+  <Popover className="popover-router-open-in" {targetEl} data-url={url}>
+    <View linksView={viewSelector} {url} ignoreOpenIn />
+  </Popover>
+{/if}
+{#if openIn.indexOf('panel') === 0}
+  <Panel {side} {effect} className="panel-router-open-in" data-url={url}>
+    <View linksView={viewSelector} {url} ignoreOpenIn />
+  </Panel>
+{/if}
diff --git a/src/svelte/shared/router-open-in.js b/src/svelte/shared/router-open-in.js
@@ -0,0 +1,46 @@
+import RouterOpenInComponent from './router-open-in-component.svelte';
+
+export const routerOpenIn = (router, url, options) => {
+  const navigateOptions = {
+    url,
+    route: {
+      path: url,
+      options: {
+        ...options,
+        openIn: undefined,
+        props: {
+          ...(options.props || {}),
+          url,
+          openIn: options.openIn,
+          viewSelector: router.view.selector,
+        },
+      },
+    },
+  };
+
+  const params = {
+    ...options,
+  };
+  params.component = RouterOpenInComponent;
+  if (options.openIn === 'popup') {
+    navigateOptions.route.popup = params;
+  }
+  if (options.openIn === 'loginScreen') {
+    navigateOptions.route.loginScreen = params;
+  }
+  if (options.openIn === 'sheet') {
+    navigateOptions.route.sheet = params;
+  }
+  if (options.openIn === 'popover') {
+    params.targetEl = options.clickedEl || options.targetEl;
+    navigateOptions.route.popover = params;
+    navigateOptions.route.options.props.targetEl = params.targetEl;
+  }
+  if (options.openIn.indexOf('panel') >= 0) {
+    const parts = options.openIn.split(':');
+    navigateOptions.route.options.props.side = parts[1] || 'left';
+    navigateOptions.route.options.props.effect = parts[2] || 'cover';
+    navigateOptions.route.panel = params;
+  }
+  return router.navigate(navigateOptions);
+};
diff --git a/src/vue/shared/router-open-in.js b/src/vue/shared/router-open-in.js
@@ -76,7 +76,6 @@ export const routerOpenIn = (router, url, options) => {
     const parts = options.openIn.split(':');
     const side = parts[1] || 'left';
     const effect = parts[2] || 'cover';
-    params.targetEl = options.clickedEl || options.targetEl;
     params.component = {
       setup() {
         return () =>
