Rework phenome plugin

Author: nolimits4web

src/phenome/components/app.jsx

@@ -1,6 +1,6 @@
 import Utils from '../utils/utils';
 import Mixins from '../utils/mixins';
-import f7Plugin from '../utils/plugin';
+import f7 from '../utils/f7';
 import RoutableModals from './routable-modals';
 
 export default {
@@ -48,6 +48,6 @@ export default {
       parentEl.style.height = '100%';
     }
 
-    f7Plugin.init(el, params, routes);
+    f7.init(el, params, routes);
   },
 };

src/phenome/components/routable-modals.jsx

@@ -1,6 +1,6 @@
 /* eslint array-callback-return: "off" */
 /* eslint consistent-return: "off" */
-import routers from '../utils/routers';
+import f7 from '../utils/f7';
 import events from '../utils/events';
 
 export default {
@@ -37,7 +37,7 @@ export default {
   componentWillUnmount() {
     const self = this;
     if (!self.routerData) return;
-    routers.modals = null;
+    f7.routers.modals = null;
     self.routerData = null;
     delete self.routerData;
   },
@@ -49,6 +49,6 @@ export default {
       el,
       component: self,
     };
-    routers.modals = self.routerData;
+    f7.routers.modals = self.routerData;
   },
 };

src/phenome/components/tab.jsx

@@ -1,7 +1,7 @@
 /* eslint array-callback-return: "off" */
 /* eslint consistent-return: "off" */
 import events from '../utils/events';
-import routers from '../utils/routers';
+import f7 from '../utils/f7';
 import Utils from '../utils/utils';
 import Mixins from '../utils/mixins';
 
@@ -74,7 +74,7 @@ export default {
       el.removeEventListener('tab:hide', self.onTabHideBound);
     }
     if (!self.routerData) return;
-    routers.tabs.splice(routers.tabs.indexOf(self.routerData), 1);
+    f7.routers.tabs.splice(f7.routers.tabs.indexOf(self.routerData), 1);
     self.routerData = null;
     delete self.routerData;
   },
@@ -93,7 +93,7 @@ export default {
         el,
         component: self,
       };
-      routers.tabs.push(self.routerData);
+      f7.routers.tabs.push(self.routerData);
     });
   },
   methods: {

src/phenome/components/view.jsx

@@ -1,6 +1,6 @@
 /* eslint array-callback-return: "off" */
 /* eslint consistent-return: "off" */
-import routers from '../utils/routers';
+import f7 from '../utils/f7';
 import events from '../utils/events';
 import Utils from '../utils/utils';
 import Mixins from '../utils/mixins';
@@ -138,18 +138,18 @@ export default {
 
     self.setState({ pages: [] });
 
-    self.$f7ready((f7) => {
+    self.$f7ready((f7Instance) => {
       if (!self.props.init) return;
       self.routerData = {
         el,
         component: self,
         instance: null,
       };
-      routers.views.push(self.routerData);
+      f7.routers.views.push(self.routerData);
       // phenome-vue-next-line
-      self.routerData.instance = f7.views.create(el, Utils.noUndefinedProps(self.$options.propsData || {}));
+      self.routerData.instance = f7Instance.views.create(el, Utils.noUndefinedProps(self.$options.propsData || {}));
       // phenome-react-next-line
-      self.routerData.instance = f7.views.create(el, Utils.noUndefinedProps(self.props));
+      self.routerData.instance = f7Instance.views.create(el, Utils.noUndefinedProps(self.props));
       self.f7View = self.routerData.instance;
     });
   },
@@ -167,7 +167,7 @@ export default {
 
     if (!self.props.init) return;
     if (self.f7View && self.f7View.destroy) self.f7View.destroy();
-    routers.views.splice(routers.views.indexOf(self.routerData), 1);
+    f7.routers.views.splice(f7.routers.views.indexOf(self.routerData), 1);
     self.routerData = null;
     delete self.routerData;
   },

src/phenome/utils/components-router.js

@@ -1,5 +1,5 @@
 /* eslint no-underscore-dangle: "off" */
-import routers from './routers';
+import f7 from './f7';
 import events from './events';
 import Utils from './utils';
 
@@ -11,7 +11,7 @@ export default {
       const router = this;
       const el = routerEl;
       let routerComponent;
-      routers.views.forEach((data) => {
+      f7.routers.views.forEach((data) => {
         if (data.el && data.el === routerEl) {
           routerComponent = data.component;
         }
@@ -52,7 +52,7 @@ export default {
       if (!$pageEl) return;
       const router = this;
       let routerComponent;
-      routers.views.forEach((data) => {
+      f7.routers.views.forEach((data) => {
         if (data.el && data.el === router.el) {
           routerComponent = data.component;
         }
@@ -85,7 +85,7 @@ export default {
       if (!tabEl) reject();
 
       let tabsComponent;
-      routers.tabs.forEach((tabData) => {
+      f7.routers.tabs.forEach((tabData) => {
         if (tabData.el && tabData.el === tabEl) {
           tabsComponent = tabData.component;
         }
@@ -124,7 +124,7 @@ export default {
       if (!tabEl) return;
 
       let tabComponent;
-      routers.tabs.forEach((tabData) => {
+      f7.routers.tabs.forEach((tabData) => {
         if (tabData.el && tabData.el === tabEl) {
           tabComponent = tabData.component;
         }
@@ -138,8 +138,8 @@ export default {
     },
     modalComponentLoader(rootEl, component, componentUrl, options, resolve, reject) {
       const router = this;
-      const modalsComponent = routers.modals && routers.modals.component;
-      const modalsComponentEl = routers.modals && routers.modals.el;
+      const modalsComponent = f7.routers.modals && f7.routers.modals.component;
+      const modalsComponentEl = f7.routers.modals && f7.routers.modals.el;
 
       if (!modalsComponent || !modalsComponent.state.modals) {
         reject();
@@ -173,7 +173,7 @@ export default {
       modalsComponent.setState({ modals: modalsComponent.state.modals });
     },
     removeModal(modalEl) {
-      const modalsComponent = routers.modals && routers.modals.component;
+      const modalsComponent = f7.routers.modals && f7.routers.modals.component;
       if (!modalsComponent) return;
 
       let modalDataToRemove;

src/phenome/utils/f7.js

@@ -0,0 +1,30 @@
+import Utils from './utils';
+import events from './events';
+
+const f7 = {
+  instance: null,
+  Framework7: null,
+  init(rootEl, params = {}, routes) {
+    const f7Params = Utils.extend({}, params, {
+      root: rootEl,
+    });
+    if (routes && routes.length && !f7Params.routes) f7Params.routes = routes;
+
+    f7.instance = new f7.Framework7(f7Params);
+    events.emit('ready', f7.instance);
+  },
+  ready(callback) {
+    if (!callback) return;
+    if (f7.instance) callback(f7.instance);
+    else {
+      events.once('ready', callback);
+    }
+  },
+  routers: {
+    views: [],
+    tabs: [],
+    modals: null,
+  },
+};
+
+export default f7;

src/phenome/utils/plugin.js

@@ -1,29 +1,14 @@
 // IMPORT_LIBRARY
 // IMPORT_COMPONENTS
 /* eslint no-underscore-dangle: "off" */
-import Utils from './utils';
 import componentsRouter from './components-router';
-import routers from './routers';
-import events from './events';
+import f7 from './f7';
 
 const Plugin = {
   name: 'phenomePlugin',
-  Framework7: null,
-  instance: null,
-  events,
-  routers,
-  init(rootEl, params = {}, routes) {
-    const f7Params = Utils.extend({}, params, {
-      root: rootEl,
-    });
-    if (routes && routes.length && !f7Params.routes) f7Params.routes = routes;
-
-    Plugin.instance = new Plugin.Framework7(f7Params);
-    Plugin.events.emit('ready', Plugin.instance);
-  },
-  install(params) {
+  install(params = {}) {
     const Framework7 = this;
-    Plugin.Framework7 = Framework7;
+    f7.Framework7 = Framework7;
 
     const Extend = EXTEND; // eslint-disable-line
     const compiler = COMPILER; // eslint-disable-line
@@ -34,7 +19,7 @@ const Plugin = {
     // Define protos
     Object.defineProperty(Extend.prototype, '$f7', {
       get() {
-        return Plugin.instance;
+        return f7.instance;
       },
     });
 
@@ -49,14 +34,14 @@ const Plugin = {
     Object.defineProperty(Extend.prototype, '$theme', {
       get() {
         return {
-          ios: Plugin.instance ? Plugin.instance.theme === 'ios' : $theme.ios,
-          md: Plugin.instance ? Plugin.instance.theme === 'md' : $theme.md,
+          ios: f7.instance ? f7.instance.theme === 'ios' : $theme.ios,
+          md: f7.instance ? f7.instance.theme === 'md' : $theme.md,
         };
       },
     });
 
     function f7ready(callback) {
-      Plugin.ready(callback);
+      f7.ready(callback);
     }
     Extend.prototype.Dom7 = Framework7.$;
     Extend.prototype.$$ = Framework7.$;
@@ -117,13 +102,6 @@ const Plugin = {
     // Extend F7 Router
     Framework7.Router.use(componentsRouter);
   },
-  ready(callback) {
-    if (!callback) return;
-    if (Plugin.instance) callback(Plugin.instance);
-    else {
-      events.once('ready', callback);
-    }
-  },
 };
 
 export default Plugin;