breadcrumbs

src/css/_variables.scss

@@ -16,6 +16,7 @@ $topBarHeight: 40px;
 $projectBarWidth: 35px;
 $projectPanelWidth: 13%;
 $projectPanelMinWidth: 150px;
+$viewsPanelWidth: 15%; // 15% is grapesjs default
 $transitionSpeedMedium: .35s;
 $transitionSpeedSlow: .5s;
 $prefix: 'gjs-';

src/css/footer.scss

@@ -0,0 +1,11 @@
+@use "variables" as *;
+// Footer is sticky at the bottom of the stage
+.gjs-pn-footer {
+  bottom: 0;
+  left: $projectBarWidth;
+  right: $viewsPanelWidth;
+  border-top: 1px solid #dee2e6;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}

src/css/grapesjs.scss

@@ -34,14 +34,17 @@
   left: auto;
 }
 .#{$cv-prefix}canvas {
-  width: calc(85% - $projectBarWidth);
+  width: calc(100% - $viewsPanelWidth - $projectBarWidth);
 }
 .#{$pn-prefix}devices-c {
   display: flex;
   .#{$prefix}device-label {
     display: none;
   }
 }
+.#{$pn-prefix}views-container {
+  width: $viewsPanelWidth;
+}
 
 /*
 */

src/css/index.scss

@@ -5,6 +5,7 @@
 /* Silex styles imports */
 @use "silex";
 @use "loader";
+@use "footer";
 @use "dialog";
 @use "grapesjs";
 @use "project-bar";

src/css/project-bar.scss

@@ -21,7 +21,7 @@ iframe.enable-squeeze.silex-squeeze-left {
       flex: 1;
     }
     .#{$pn-prefix}btn {
-      margin: 5px 0 0;
+      margin: 5px 0 5px 0px;
       padding: 5px;
       &.#{$pn-prefix}active {
         background-color: $lighterPrimaryColor;

src/ts/client/grapesjs/breadcrumbs.ts

@@ -0,0 +1,79 @@
+import { onFooter } from "./footer";
+
+export default function (editor, options) {
+  let breadcrumbsContainer
+  onFooter(footer => {
+    // Initialize the breadcrumbs container
+    breadcrumbsContainer = document.createElement('div');
+    breadcrumbsContainer.id = 'breadcrumbs-container';
+    footer.prepend(breadcrumbsContainer);
+    // Add breadcrumbs styles
+    const breadcrumbsStyles = document.createElement('style');
+    breadcrumbsStyles.innerHTML = `
+      #breadcrumbs-container {
+        display: flex;
+        align-items: center;
+        height: 100%;
+        padding: 0 10px;
+        font-size: 12px;
+        color: #999;
+      }
+      #breadcrumbs-container h3 {
+        margin: 0;
+      }
+      #breadcrumbs-container .breadcrumb {
+        margin: 5px;
+        font-size: large;
+        line-height: 1;
+        cursor: pointer;
+      }
+      #breadcrumbs-container .breadcrumb span {
+        text-decoration: underline;
+      }
+      #breadcrumbs-container .breadcrumb::after {
+        content: "➔";
+        margin-left: 10px;
+      }
+
+      #breadcrumbs-container .breadcrumb:last-child::after {
+        content: "";
+      }
+    `;
+    footer.prepend(breadcrumbsStyles);
+    renderBreadcrumbs();
+  })
+  // Append the breadcrumbs container to the editor's container
+
+  editor.on('component:selected style', () => renderBreadcrumbs());
+  function renderBreadcrumbs() {
+    let component = editor.getSelected() ?? editor.Pages.getSelected().getMainComponent()
+
+    if(!breadcrumbsContainer) return
+
+    // Clear the breadcrumbs container
+    breadcrumbsContainer.innerHTML = '';
+
+    // Traverse up the tree of components, prepending each to the breadcrumbs
+    while (component) {
+      const breadcrumb = createBreadcrumb(component);
+      breadcrumbsContainer.prepend(breadcrumb);
+      console.log(component, component.tagName);
+      component = component.parent();
+    }
+
+    // Label
+    const label = document.createElement('span');
+    label.innerHTML = '<h3>Selection:&nbsp;</h3>';
+    breadcrumbsContainer.prepend(label);
+  }
+  function createBreadcrumb(component) {
+    const breadcrumb = document.createElement('span');
+    const model = component.model;
+    breadcrumb.onclick = () => {
+      editor.select(component);
+    };
+    breadcrumb.classList.add('breadcrumb');
+    breadcrumb.innerHTML = `<span>${component.get('tagName')}${component.getClasses().length ? `.${component.getClasses().join('.')}` : ''}</span>`;
+    return breadcrumb
+  }
+}

src/ts/client/grapesjs/footer.ts

@@ -0,0 +1,27 @@
+// Styles are in: src/scss/footer.scss
+let _onFooter = []
+let footer
+export default function (editor, options) {
+  const panel = editor.Panels.addPanel({
+    id: 'footer',
+    visible: true,
+    buttons: [{
+      id: 'myNewButton',
+      className: 'someClass',
+      command: 'someCommand',
+      attributes: { title: 'Some title' },
+      active: false,
+
+    }],
+  })
+  setTimeout(() => {
+    footer = panel.view?.el
+    _onFooter.forEach(cbk => cbk(footer))
+    _onFooter = []
+  })
+}
+
+export function onFooter(fn) {
+  if(footer) fn(footer)
+  else _onFooter.push(fn)
+}

src/ts/client/grapesjs/index.ts

@@ -36,6 +36,8 @@ import loadingPlugin from '@silexlabs/grapesjs-loading'
 import fontsDialogPlugin, { cmdOpenFonts } from '@silexlabs/grapesjs-fonts'
 import symbolDialogsPlugin, { cmdPromptAddSymbol } from './symbolDialogs'
 import loginDialogPlugin, { LoginDialogOptions, cmdLogout } from './LoginDialog'
+import footerPlugin from './footer'
+import breadcrumbsPlugin from './breadcrumbs'
 
 import { pagePanelPlugin, cmdTogglePages, cmdAddPage } from './page-panel'
 import { newPageDialog, cmdOpenNewPageDialog } from './new-page-dialog'
@@ -71,6 +73,8 @@ const plugins = [
   {name: './storage', value: storagePlugin},
   {name: './LoginDialog', value: loginDialogPlugin},
   {name: '@silexlabs/grapesjs-loading', value: loadingPlugin},
+  {name: './breadcrumbs', value: breadcrumbsPlugin},
+  {name: './footer', value: footerPlugin},
 ]
 // Check that all plugins are loaded correctly
 plugins

src/ts/client/grapesjs/project-bar.ts

@@ -27,7 +27,7 @@ export const projectBarPlugin = (editor, opts) => {
     visible  : false,
   })
   // create the project bar panel in grapesjs
-  const projectBarPanel = editor.Panels.addPanel({
+  editor.Panels.addPanel({
     id: panelId,
     buttons: opts.panels,
     visible  : true,

src/ts/plugins/client/website-info.ts

@@ -53,7 +53,6 @@ export default async function(config) {
   })
 
   config.on(ClientEvent.GRAPESJS_END, async ({editor}) => {
-    console.log('GRAPESJS_END', editor)
     // Detect when the page changes
     editor.on('page:select', async () => {
       displayWebsiteMeta()
@@ -76,7 +75,6 @@ export default async function(config) {
     })()
     // Get the current page
     const currentPage = config.getEditor().Pages?.getSelected()
-    console.log('currentPage', currentPage.get('name'), currentPage.get('type'))
     // Display the website meta data
     container.innerHTML = `
         ${websiteMeta?.imageUrl ? `<div class="gjs-website-meta-image" style="background: url(${websiteMeta?.imageUrl});"></div>` : ''}