目录设计器

建筑目录的反应设计编辑器,以及任何网站上显示这些目录的取景器.

• 设计编辑器 : 创建和编辑目录页面.
• 目录查看器 : 显示已完成目录,或者作为反应组件,或者使用脚本标记.

编辑器和观看器使用 单独的许可密钥。编辑器键只打开编辑器,而取景器键只打开取景器。 缺少或错误的密钥会显示一个错误消息而不是组件 .

安装

npm install @anubhav1ks/catalogue-designer
# or
yarn add @anubhav1ks/catalogue-designer

同伴依赖性 : react 财务报告和审定财务报表 react-dom (18) CKEditor与软件包一起被自动安装.

设计编辑器

import DesignEditor, { DesignEditorContext } from '@anubhav1ks/catalogue-designer';
import '@anubhav1ks/catalogue-designer/css/design-editor.css';

export default function App() {
  return (
    <DesignEditorContext.Provider
      value={{
        viewerScriptUrl: 'https://your-site.com/catalogue-viewer.js',
        viewerLicenseKey: 'YOUR-VIEWER-LICENSE-KEY',
      }}
    >
      <div style={{ height: '100vh' }}>
        <DesignEditor
          licenseKey="YOUR-EDITOR-LICENSE-KEY"
          value={design}
          onChange={(next) => save(next)}
        />
      </div>
    </DesignEditorContext.Provider>
  );
}

编辑道具

编辑器设置( E)DesignEditorContext(中文(简体) )

其他出口: usePlan, (中文(简体) ), DEFAULT_PLAN_CONFIG, (中文(简体) ), clearSavedDesign, (中文(简体) ), designStorageKey, (中文(简体) ), parseCatalogueJson。 。 。 .

目录查看器

从编辑器下载目录 JSON (预览并嵌入 — 下载目录 JSON)并传于观者.

观众填充 集装箱的宽度和高度100%,因此给予母元素一个高度.

反应

import { CatalogueViewer } from '@anubhav1ks/catalogue-designer/viewer';

<div style={{ height: 600 }}>
  <CatalogueViewer
    licenseKey="YOUR-VIEWER-LICENSE-KEY"
    design={catalogue}
    type="full"
    inView={true}
  />
</div>;

单视图

只显示页面,一次一个,没有工具栏、箭头或缩略图。 访客通过刷取来更改页面,有箭头键,或者在页面上有链接.

<div style={{ height: 600 }}>
  <CatalogueViewer
    licenseKey="YOUR-VIEWER-LICENSE-KEY"
    design={catalogue}
    type="single"
    inView={true}
    startPage={0}
  />
</div>

动画和录像inView(中文(简体) )

• inView={true} 播放页面动画和自动播放视频.
• inView={false} 停止动画并暂停所有视频和音频,包括YouTube嵌入.

使用它来暂停访问者无法看到的目录,例如在旋转木马或滚动列表中:

const [visible, setVisible] = useState(false);
const ref = useRef<HTMLDivElement>(null);

useEffect(() => {
  const io = new IntersectionObserver(([entry]) => setVisible(entry.isIntersecting));
  if (ref.current) io.observe(ref.current);
  return () => io.disconnect();
}, []);

<div ref={ref} style={{ height: 500 }}>
  <CatalogueViewer
    licenseKey="YOUR-VIEWER-LICENSE-KEY"
    design={catalogue}
    type="single"
    inView={visible}
  />
</div>;

页面跳转链接( E)onPageJump(中文(简体) )

默认情况下,页面上的页面跳转链接(下个,上个,上个,上个,上个)会翻转收看者自己的页面. 过 onPageJump 比如当你的旋转木马的每张幻灯片 都是自己的取景器时:

<CatalogueViewer
  licenseKey="YOUR-VIEWER-LICENSE-KEY"
  design={catalogue}
  type="single"
  startPage={index}
  inView={index === activeSlide}
  onPageJump={(page) => setActiveSlide(page)}
/>

page 以 0 为基础,并已仅限于目录的页面。 第二个论点是链接的原件 目标:页码,或 'prev', (中文(简体) ), 'next', (中文(简体) ), 'first' 或者说 'last'。 。 。 .

查看器道具

脚本标签( 无反应)

添加 catalogue-viewer.js (从) dist/在你的页面。 每个元素 data-catalogue-src 或者说 data-catalogue 成为观众.

<div
  data-catalogue-src="/catalogue.json"
  data-license-key="YOUR-VIEWER-LICENSE-KEY"
  data-type="single"
  data-in-view="true"
  style="height: 600px"
></div>
<script src="https://your-site.com/catalogue-viewer.js" defer></script>

也可以将JSON放入元素中:

<div data-catalogue data-license-key="YOUR-VIEWER-LICENSE-KEY" data-height="700">
  <script type="application/json">
    { ...catalogue JSON... }
  </script>
</div>

如果元素没有高度,则得到640px.

Java 脚本 API

const viewer = window.CatalogueViewer.mount(element, {
  licenseKey: 'YOUR-VIEWER-LICENSE-KEY',
  src: '/catalogue.json',
  type: 'full',
});

viewer.update({ inView: false }); // change any prop later
viewer.unmount();

window.CatalogueViewer.autoMount(); // mount elements added to the page later