@eeacms/volto-tabs-block 1.2.12 → 1.3.2

package/src/components/templates/default/schema.js

@@ -9,10 +9,36 @@ export default () => ({
     {
       id: 'menu',
       title: 'Menu',
-      fields: ['menuAlign', 'menuPosition'],
+      fields: [
+        'menuAlign',
+        'menuPosition',
+        'menuSize',
+        'menuColor',
+        'menuBorderless',
+        'menuCompact',
+        'menuFluid',
+        'menuInverted',
+        'menuPointing',
+        'menuSecondary',
+        'menuStackable',
+        'menuTabular',
+        'menuText',
+      ],
     },
   ],
   properties: {
+    description: {
+      title: 'Description',
+    },
+    menuPosition: {
+      title: 'Position',
+      choices: [
+        ['top', 'Top'],
+        ['bottom', 'Bottom'],
+        ['left side', 'Left side'],
+        ['right side', 'Right side'],
+      ],
+    },
     menuAlign: {
       title: 'Alignment',
       type: 'array',
@@ -22,20 +48,75 @@ export default () => ({
         ['right', 'Right'],
         ['space-between', 'Space between'],
       ],
-      default: 'left',
     },
-    menuPosition: {
-      title: 'Position',
-      type: 'array',
+    menuSize: {
+      title: 'Size',
       choices: [
-        ['inline', 'Inline'],
-        ['left side', 'Left side'],
-        ['right side', 'Right side'],
+        ['mini', 'Mini'],
+        ['tiny', 'Tiny'],
+        ['small', 'Small'],
+        ['large', 'Large'],
+        ['huge', 'Huge'],
+        ['massive', 'Masive'],
       ],
-      default: 'inline',
     },
-    description: {
-      title: 'Description',
+    menuColor: {
+      title: 'Color',
+      defaultValue: 'green',
+      choices: [
+        ['red', 'Red'],
+        ['orange', 'Orange'],
+        ['yellow', 'Yellow'],
+        ['olive', 'Olive'],
+        ['green', 'Green'],
+        ['teal', 'Teal'],
+        ['blue', 'Blue'],
+        ['violet', 'Violet'],
+        ['purple', 'Purple'],
+        ['pink', 'Pink'],
+        ['brown', 'Brown'],
+        ['grey', 'Grey'],
+        ['black', 'Black'],
+      ],
+    },
+    menuBorderless: {
+      title: 'Borderless',
+      type: 'boolean',
+    },
+    menuCompact: {
+      title: 'Compact',
+      type: 'boolean',
+      defaultValue: true,
+    },
+    menuFluid: {
+      title: 'Fluid',
+      type: 'boolean',
+      defaultValue: true,
+    },
+    menuInverted: {
+      title: 'Inverted',
+      type: 'boolean',
+    },
+    menuPointing: {
+      title: 'Pointing',
+      type: 'boolean',
+    },
+    menuSecondary: {
+      title: 'Secondary',
+      type: 'boolean',
+    },
+    menuStackable: {
+      title: 'Stackable',
+      type: 'boolean',
+    },
+    menuTabular: {
+      title: 'Tabular',
+      type: 'boolean',
+    },
+    menuText: {
+      title: 'Text',
+      type: 'boolean',
+      defaultValue: true,
     },
   },
   required: [],

package/src/components/templates/horizontal-responsive/View.jsx

@@ -0,0 +1,277 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { withRouter } from 'react-router';
+import cx from 'classnames';
+import { Menu, Tab, Container, Dropdown, Button } from 'semantic-ui-react';
+import config from '@plone/volto/registry';
+import { RenderBlocks } from '@plone/volto/components';
+import { TABS_BLOCK } from '@eeacms/volto-tabs-block/constants';
+import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
+import {
+  SimpleMarkdown,
+  getMenuPosition,
+  positionedOffset,
+  toggleItem,
+} from '@eeacms/volto-tabs-block/utils';
+
+import '@eeacms/volto-tabs-block/less/menu.less';
+
+const MenuItem = (props) => {
+  const { activeTab = null, tabs = {}, setActiveTab = () => {} } = props;
+  const { tabsTitle, tabsDescription, tab, index } = props;
+  const title = tabs[tab].title;
+  const tabIndex = index + 1;
+
+  const defaultTitle = `Tab ${tabIndex}`;
+
+  return (
+    <React.Fragment>
+      {index === 0 && (tabsTitle || tabsDescription) && (
+        <Menu.Item className="menu-title">
+          <SimpleMarkdown md={tabsTitle} defaultTag="##" className="title" />
+          <SimpleMarkdown md={tabsDescription} className="description" />
+        </Menu.Item>
+      )}
+      <Button
+        as="a"
+        className={cx('item', { active: tab === activeTab })}
+        item-data={tab}
+        onClick={() => {
+          if (activeTab !== tab) {
+            setActiveTab(tab);
+          }
+        }}
+      >
+        <span className={'menu-item-count'}>{tabIndex}</span>
+        <p className={'menu-item-text'}>{title || defaultTitle}</p>
+      </Button>
+    </React.Fragment>
+  );
+};
+
+const MenuWrapper = (props) => {
+  const {
+    data = {},
+    panes = [],
+    activeTab = null,
+    node = null,
+    screen = {},
+    tabs = {},
+    tabsList = [],
+    setActiveTab = () => {},
+  } = props;
+  const [open, setOpen] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!true || !node?.current) return;
+    const items = node.current.querySelectorAll(
+      '.ui.menu > .menu-wrapper > .item:not(.menu-title)',
+    );
+    const underlineDropdown = node.current.querySelector('.ui.dropdown');
+    if (!underlineDropdown) return;
+    const overflowOffset = positionedOffset(underlineDropdown, node.current);
+    if (!overflowOffset) {
+      return;
+    }
+    let anyHidden = false;
+    for (const item of items) {
+      const itemOffset = positionedOffset(item, node.current);
+      if (itemOffset) {
+        const hidden =
+          itemOffset.left + item.offsetWidth >= overflowOffset.left;
+        toggleItem(node.current, item, hidden);
+        anyHidden = anyHidden || hidden;
+      }
+    }
+    underlineDropdown.style.visibility = anyHidden ? '' : 'hidden';
+    if (!anyHidden && open) {
+      setOpen(false);
+    }
+  }, [screen, node, open, data.isResponsive]);
+
+  return (
+    <React.Fragment>
+      <div className="menu-wrapper">
+        {panes.map((pane, index) => (
+          <React.Fragment key={`menu-item-${index}-${pane.id}`}>
+            {pane.menuItem}
+          </React.Fragment>
+        ))}
+      </div>
+      <Dropdown
+        icon="ellipsis horizontal"
+        className="item"
+        pointing="top right"
+        open={open}
+        onOpen={() => setOpen(true)}
+        onClose={() => setOpen(false)}
+      >
+        <Dropdown.Menu>
+          {tabsList.map((underlineTab, underlineIndex) => {
+            const title = tabs[underlineTab].title;
+            const defaultTitle = `Tab ${underlineIndex + 1}`;
+
+            return (
+              <Dropdown.Item
+                hidden
+                key={`underline-tab-${underlineIndex}-${underlineTab}`}
+                underline-item-data={underlineTab}
+                active={underlineTab === activeTab}
+                onClick={() => {
+                  if (activeTab !== underlineTab) {
+                    setActiveTab(underlineTab);
+                  }
+                }}
+              >
+                <span className={'menu-item-count'}>{underlineIndex + 1}</span>
+                <p className={'menu-item-text'}>{title || defaultTitle}</p>
+              </Dropdown.Item>
+            );
+          })}
+        </Dropdown.Menu>
+      </Dropdown>
+    </React.Fragment>
+  );
+};
+
+const View = (props) => {
+  const [hashlinkOnMount, setHashlinkOnMount] = React.useState(false);
+  const {
+    metadata = {},
+    data = {},
+    tabsList = [],
+    tabs = {},
+    activeTabIndex = 0,
+    hashlink = {},
+    screen,
+    setActiveTab = () => {},
+  } = props;
+  const menuPosition = getMenuPosition(data);
+  const isContainer = data.align === 'full';
+  const tabsTitle = data.title;
+  const tabsDescription = data.description;
+
+  const schema = React.useMemo(
+    () =>
+      config.blocks.blocksConfig[TABS_BLOCK].templates?.['default']?.schema(
+        config,
+        props,
+      ) || {},
+    [props],
+  );
+
+  const getDataValue = React.useCallback(
+    (key) => {
+      return (
+        (schema.properties[key]?.value || data[key]) ??
+        schema.properties[key]?.defaultValue
+      );
+    },
+    [schema, data],
+  );
+
+  React.useEffect(() => {
+    const urlHash = props.location.hash.substring(1) || '';
+    if (
+      hashlink.counter > 0 ||
+      (hashlink.counter === 0 && urlHash && !hashlinkOnMount)
+    ) {
+      const id = hashlink.hash || urlHash || '';
+      const index = tabsList.indexOf(id);
+      const parentId = data.id || props.id;
+      const parent = document.getElementById(parentId);
+      const headerWrapper = document.querySelector('.header-wrapper');
+      const offsetHeight = headerWrapper?.offsetHeight || 0;
+      if (id !== parentId && index > -1 && parent) {
+        if (activeTabIndex !== index) {
+          setActiveTab(id);
+        }
+        props.scrollToTarget(parent, offsetHeight);
+      } else if (id === parentId && parent) {
+        props.scrollToTarget(parent, offsetHeight);
+      }
+    }
+    if (!hashlinkOnMount) {
+      setHashlinkOnMount(true);
+    }
+    /* eslint-disable-next-line */
+  }, [hashlink.counter]);
+
+  const panes = tabsList.map((tab, index) => {
+    return {
+      id: tab,
+      menuItem: (
+        <MenuItem
+          {...props}
+          key={tab}
+          tab={tab}
+          tabsList={tabsList}
+          index={index}
+          lastIndex={tabsList.length - 1}
+          tabsTitle={tabsTitle}
+          tabsDescription={tabsDescription}
+        />
+      ),
+      render: () => {
+        return (
+          <>
+            <Tab.Pane as={isContainer ? Container : undefined}>
+              <RenderBlocks
+                {...props}
+                metadata={metadata}
+                content={tabs[tab]}
+              />
+            </Tab.Pane>
+          </>
+        );
+      },
+    };
+  });
+
+  return (
+    <>
+      <Tab
+        activeIndex={activeTabIndex}
+        className="horizontal-responsive tabs"
+        menu={{
+          attached: menuPosition.attached,
+          borderless: getDataValue('menuBorderless'),
+          color: getDataValue('menuColor'),
+          compact: getDataValue('menuCompact'),
+          fluid: getDataValue('menuFluid'),
+          inverted: getDataValue('menuInverted'),
+          pointing: getDataValue('menuPointing'),
+          secondary: getDataValue('menuSecondary'),
+          size: getDataValue('menuSize'),
+          stackable: getDataValue('menuStackable'),
+          tabular: getDataValue('menuTabular'),
+          text: getDataValue('menuText'),
+          vertical: menuPosition.vertical,
+          className: cx(data.menuAlign, { container: isContainer }),
+          children: (
+            <MenuWrapper
+              {...props}
+              panes={panes}
+              menuPosition={menuPosition}
+              screen={screen}
+            />
+          ),
+        }}
+        menuPosition={menuPosition.direction}
+        panes={panes}
+        grid={{ paneWidth: 9, tabWidth: 3 }}
+      />
+    </>
+  );
+};
+
+export default compose(
+  connect((state) => {
+    return {
+      hashlink: state.hashlink,
+      screen: state.screen,
+    };
+  }),
+  withScrollToTarget,
+)(withRouter(View));

package/src/components/templates/horizontal-responsive/index.js

@@ -0,0 +1,4 @@
+import HorizontalResponsiveView from './View';
+import horizontalResponsiveSchema from './schema';
+
+export { HorizontalResponsiveView, horizontalResponsiveSchema };

package/src/components/templates/horizontal-responsive/schema.js

@@ -0,0 +1,123 @@
+export default () => ({
+  title: 'Default tabs block',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['description'],
+    },
+    {
+      id: 'menu',
+      title: 'Menu',
+      fields: [
+        'menuAlign',
+        'menuPosition',
+        'menuSize',
+        'menuColor',
+        'menuBorderless',
+        'menuCompact',
+        'menuFluid',
+        'menuInverted',
+        'menuPointing',
+        'menuSecondary',
+        'menuStackable',
+        'menuTabular',
+        'menuText',
+      ],
+    },
+  ],
+  properties: {
+    description: {
+      title: 'Description',
+    },
+    menuPosition: {
+      title: 'Position',
+      choices: [
+        ['top', 'Top'],
+        ['bottom', 'Bottom'],
+        ['left side', 'Left side'],
+        ['right side', 'Right side'],
+      ],
+    },
+    menuAlign: {
+      title: 'Alignment',
+      type: 'array',
+      choices: [
+        ['left', 'Left'],
+        ['center', 'Center'],
+        ['right', 'Right'],
+        ['space-between', 'Space between'],
+      ],
+    },
+    menuSize: {
+      title: 'Size',
+      choices: [
+        ['mini', 'Mini'],
+        ['tiny', 'Tiny'],
+        ['small', 'Small'],
+        ['large', 'Large'],
+        ['huge', 'Huge'],
+        ['massive', 'Masive'],
+      ],
+    },
+    menuColor: {
+      title: 'Color',
+      defaultValue: 'green',
+      choices: [
+        ['red', 'Red'],
+        ['orange', 'Orange'],
+        ['yellow', 'Yellow'],
+        ['olive', 'Olive'],
+        ['green', 'Green'],
+        ['teal', 'Teal'],
+        ['blue', 'Blue'],
+        ['violet', 'Violet'],
+        ['purple', 'Purple'],
+        ['pink', 'Pink'],
+        ['brown', 'Brown'],
+        ['grey', 'Grey'],
+        ['black', 'Black'],
+      ],
+    },
+    menuBorderless: {
+      title: 'Borderless',
+      type: 'boolean',
+    },
+    menuCompact: {
+      title: 'Compact',
+      type: 'boolean',
+      defaultValue: true,
+    },
+    menuFluid: {
+      title: 'Fluid',
+      type: 'boolean',
+      defaultValue: true,
+    },
+    menuInverted: {
+      title: 'Inverted',
+      type: 'boolean',
+    },
+    menuPointing: {
+      title: 'Pointing',
+      type: 'boolean',
+    },
+    menuSecondary: {
+      title: 'Secondary',
+      type: 'boolean',
+    },
+    menuStackable: {
+      title: 'Stackable',
+      type: 'boolean',
+    },
+    menuTabular: {
+      title: 'Tabular',
+      type: 'boolean',
+    },
+    menuText: {
+      title: 'Text',
+      type: 'boolean',
+      defaultValue: true,
+    },
+  },
+  required: [],
+});

package/src/index.js

@@ -2,9 +2,11 @@ import { TabsEdit, TabsView } from '@eeacms/volto-tabs-block/components';
 import {
   DefaultEdit,
   DefaultView,
+  HorizontalResponsiveView,
   HorizontalCarouselView,
   VerticalCarouselView,
   defaultSchema,
+  horizontalResponsiveSchema,
   carouselSchema,
 } from '@eeacms/volto-tabs-block/components';
 import { layoutSchema } from '@eeacms/volto-tabs-block/components';
@@ -37,6 +39,12 @@ export default (config) => {
         view: DefaultView,
         schema: defaultSchema,
       },
+      'horizontal-responsive': {
+        title: 'Horizontal responsive',
+        edit: DefaultEdit,
+        view: HorizontalResponsiveView,
+        schema: horizontalResponsiveSchema,
+      },
       carousel: {
         title: 'Carousel horizontal',
         edit: DefaultEdit,

package/src/less/carousel.less

@@ -7,12 +7,6 @@
 .loadAddonVariables();
 
 .tabs-block {
-  > .styled {
-    display: flex !important;
-    flex: 1;
-    flex-flow: column;
-  }
-
   .slick-slider {
     z-index: 2;
     display: flex !important;
@@ -97,6 +91,7 @@
   }
 
   .slick-arrows {
+    z-index: 3;
     display: flex;
     flex-direction: row;
     justify-content: center;

package/src/less/edit.less

@@ -0,0 +1,140 @@
+@type: 'extra';
+@element: 'custom';
+
+@import (multiple, reference, optional) '../../theme.config';
+
+@borderColor: rgba(120, 192, 215, 0.75);
+
+.inner.tabs_block {
+  margin-bottom: 0;
+
+  .tabs_block {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+    margin-bottom: 0;
+  }
+}
+
+.styled.screen-height {
+  .tabs-block {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+
+    > .default.tabs {
+      flex: 1;
+    }
+
+    > .styled {
+      > .default.tabs {
+        flex: 1;
+      }
+    }
+  }
+}
+
+/**
+ ** Edit form style
+ **/
+.tabs-block {
+  [data-rbd-draggable-context-id] {
+    margin-bottom: 0;
+  }
+
+  .blocks-form {
+    width: 100%;
+    // padding-bottom: 0.1rem;
+  }
+
+  .block-wrapper {
+    &:not(:last-child) {
+      margin-bottom: 2rem;
+    }
+  }
+
+  .block {
+    .block-add-button,
+    .delete-button {
+      display: none;
+    }
+
+    .block.selected::before {
+      border-top-left-radius: 0;
+    }
+  }
+
+  .block .block:not(.inner)::before {
+    z-index: 0;
+    pointer-events: none;
+  }
+
+  .block.wrapper.multiSelected {
+    .block .block::before {
+      z-index: 1;
+      background-color: rgba(120, 192, 215, 0.375);
+    }
+  }
+
+  .blocks-form {
+    margin-top: 0.5rem;
+  }
+
+  .blocks-chooser {
+    right: 0;
+    left: auto;
+    margin-top: 3rem;
+  }
+
+  .block-toolbar {
+    position: absolute;
+    z-index: 3;
+    right: -9px;
+    display: flex;
+    border: none;
+    border: 1px solid @borderColor;
+    border-bottom: 1px solid @pageBackground;
+    margin-top: -45px;
+    background-color: @pageBackground;
+    border-top-left-radius: 1rem;
+    border-top-right-radius: 1rem;
+
+    .ui.basic.button {
+      padding: 8px 5px;
+    }
+
+    .ui.basic.button:hover {
+      background: transparent !important;
+    }
+  }
+}
+
+.drag-drop-list-widget {
+  .tabs-area {
+    padding: 1em 0;
+
+    [data-rbd-draggable-context-id] {
+      margin-bottom: 0.3em;
+    }
+
+    .drag.handle.wrapper {
+      min-height: auto;
+    }
+
+    .tab-area {
+      display: flex;
+
+      .label {
+        flex-grow: 2;
+        padding-left: 1em;
+      }
+
+      button {
+        flex-grow: 0;
+      }
+    }
+
+    button {
+      cursor: pointer;
+    }
+  }
+}