@things-factory/context-ui 6.1.66 → 6.1.70

package/client/bootstrap.js

@@ -1,62 +1,9 @@
-import '@operato/context/ox-title-bar.js'
-import '@operato/context/ox-page-action-context-bar.js'
-import '@operato/context/ox-context-toolbar.js'
-
-import { html } from 'lit-html'
-
-import { appendViewpart, TOOL_POSITION, VIEWPART_POSITION } from '@operato/layout'
-import { APPEND_APP_TOOL } from '@things-factory/apptool-base'
 import { store } from '@operato/shell'
 
-import { APPEND_CONTEXT_TOOL } from './actions/context.js'
 import context from './reducers/context'
 
 export default function bootstrap() {
   store.addReducers({
     context
   })
-
-  /* add title app-tool */
-  store.dispatch({
-    type: APPEND_APP_TOOL,
-    tool: {
-      name: 'title-bar',
-      template: html` <ox-title-bar></ox-title-bar> `,
-      position: TOOL_POSITION.CENTER
-    }
-  })
-
-  /*
-   * footerbar 에 append 하는 순서가 중요하다.
-   * footerbar는 아래에서 위로 올라가는 stack 형태의 순서이므로,
-   * context-toolbar가 먼저, 그리고 context-toolbar-overlay 가 나중에 올라간다.
-   */
-  appendViewpart({
-    name: 'context-toolbar',
-    viewpart: {
-      show: true,
-      template: html` <ox-context-toolbar></ox-context-toolbar> `
-    },
-    position: VIEWPART_POSITION.FOOTERBAR
-  })
-
-  appendViewpart({
-    name: 'context-toolbar-overlay',
-    viewpart: {
-      show: false,
-      hovering: 'next',
-      backdrop: true,
-      template: html``
-    },
-    position: VIEWPART_POSITION.FOOTERBAR
-  })
-
-  store.dispatch({
-    type: APPEND_CONTEXT_TOOL,
-    tool: {
-      template: html` <ox-page-action-context-bar></ox-page-action-context-bar> `,
-      position: TOOL_POSITION.CENTER,
-      context: 'actions'
-    }
-  })
 }

package/client/index.js

@@ -1 +1,84 @@
 export * from './actions/context'
+
+import '@operato/context/ox-title-bar.js'
+import '@operato/context/ox-page-action-context-bar.js'
+import '@operato/context/ox-context-toolbar.js'
+
+import { html } from 'lit-html'
+
+import { store, clientSettingStore } from '@operato/shell'
+import { appendViewpart, TOOL_POSITION, VIEWPART_POSITION } from '@operato/layout'
+import { isMobileDevice } from '@operato/utils'
+import { APPEND_APP_TOOL, APPEND_PAGE_TOOL } from '@things-factory/apptool-base'
+import { ADD_SETTING } from '@things-factory/setting-base'
+import { APPEND_CONTEXT_TOOL } from './actions/context.js'
+
+export async function setupContextUIPart({ 
+  titlebar = 'header',
+  contextToolbar = 'page-footer'
+}: { 
+  titlebar?: 'header' | 'page-header'
+  contextToolbar?: 'footer' | 'page-header' | 'page-footer'
+}) {
+
+  if (titlebar == 'header') {
+    /* add title app-tool */
+    store.dispatch({
+      type: APPEND_APP_TOOL,
+      tool: {
+        name: 'title-bar',
+        template: html` <ox-title-bar></ox-title-bar> `,
+        position: TOOL_POSITION.CENTER
+      }
+    })
+  } else if (titlebar == 'page-header') {
+    store.dispatch({
+      type: APPEND_PAGE_TOOL,
+      tool: {
+        name: 'title-bar',
+        template: html` <ox-title-bar></ox-title-bar> `,
+        position: TOOL_POSITION.FRONT
+      }
+    })
+  }
+
+  /*
+   * footerbar 에 append 하는 순서가 중요하다.
+   * footerbar는 아래에서 위로 올라가는 stack 형태의 순서이므로,
+   * context-toolbar가 먼저, 그리고 context-toolbar-overlay 가 나중에 올라간다.
+   */
+  if(contextToolbar) {
+    const position = contextToolbar == 'footer' ? VIEWPART_POSITION.FOOTERBAR 
+    : contextToolbar == 'page-header' ? VIEWPART_POSITION.PAGE_HEADERBAR 
+    : VIEWPART_POSITION.PAGE_FOOTERBAR
+
+    appendViewpart({
+      name: 'context-toolbar',
+      viewpart: {
+        show: true,
+        template: html` <ox-context-toolbar></ox-context-toolbar> `
+      },
+      position
+    })
+  
+    appendViewpart({
+      name: 'context-toolbar-overlay',
+      viewpart: {
+        show: false,
+        hovering: 'next',
+        backdrop: true,
+        template: html``
+      },
+      position
+    })
+  
+    store.dispatch({
+      type: APPEND_CONTEXT_TOOL,
+      tool: {
+        template: html` <ox-page-action-context-bar></ox-page-action-context-bar> `,
+        position: TOOL_POSITION.CENTER,
+        context: 'actions'
+      }
+    })
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/context-ui",
-  "version": "6.1.66",
+  "version": "6.1.70",
   "main": "dist-server/index.js",
   "browser": "client/index.js",
   "things-factory": true,
@@ -27,7 +27,7 @@
     "@material/mwc-icon": "^0.27.0",
     "@operato/context": "^1.1.19",
     "@operato/layout": "^1.1.15",
-    "@things-factory/apptool-base": "^6.1.66"
+    "@things-factory/apptool-base": "^6.1.68"
   },
-  "gitHead": "86447edc189a8432999c6dcfce0e32ee7dbd3e5f"
+  "gitHead": "c597a3f5a31397aa9132c5ad96dc64a2b13bbf23"
 }