ftw.showroom 1.5.1

安装

将包添加到您的 setup.py 中作为依赖项

setup(...
      install_requires=[
        'ftw.showroom',
      ])

或添加到您的 buildout 配置中

[instance]
eggs += ftw.showroom

并重新运行 buildout。

安装通用设置配置文件。

兼容性

Plone 4.3

构建

重新构建库（resources/javascript.js）

grunt build

监视更改并自动重新构建包

grunt watch

或默认任务

grunt watch

测试

运行所有测试

npm test

或

grunt test

运行特定的测试

grunt test --grep="Name of your test"

链接

• Github: https://github.com/4teamwork/ftw.showroom

• 问题: https://github.com/4teamwork/ftw.showroom/issues

• Pypi: http://pypi.python.org/pypi/ftw.showroom

• 持续集成: https://jenkins.4teamwork.ch/search?q=ftw.showroom

版权

本包版权所有 4teamwork。

ftw.showroom 根据 GNU 通用公共许可证，版本 2 授权。

入门指南

客户端库依赖于 Grunt。假设您已经在系统上安装了 Node.js，请运行以下命令

sudo npm install -g grunt

要安装依赖项，请运行以下命令

npm install

使用 npm，您将获得以下包

• Grunt - JavaScript 任务运行器。

• Babel - ES6 转译器。

• Browserify - 依赖项打包器

• Karma - JavaScript 测试运行器。

• Jasmine - JavaScript 测试套件。

• Chai - JavaScript 断言库。

使用方法

运行以下命令以重新构建库

grunt build

运行以下命令以监视更改并触发重新构建

grunt

构建选项

有关 browserify 的更多信息，请参阅 https://github.com/substack/browserify-handbook。

源映射

Browserify 内置了对生成源映射的支持。默认情况下已启用，但您也可以禁用源映射。如果您尚未启用，请参阅 本文 在 Google Chrome 中启用源映射。

测试

运行所有测试

grunt test

运行特定的测试

grunt test --grep="Name of your test"

初始化

使用默认选项创建一个空的展示室实例

let showroom = Showroom();

展示室构造函数接受一个 NodeList 或一个 jQuery。项可以提供一个目标作为 HTML 数据属性（data-showroom-target）来定义项从中获取内容的端点。要使标题在覆盖层中可见，请提供一个标题作为 HTML 数据属性（data-showroom-title）。

<ul>
  <li class="item"
      data-showroom-target="http://target.com/1"
      data-showroom-title="title-1">
    <a>Item 1</a>
  </li>
  <li class="item"
      data-showroom-target="http://target.com/2"
      data-showroom-title="title-2">
    <a>Item 2</a>
  </li>
</ul>

let items = document.querySelectorAll(".item");
let showroom = Showroom(items);

或

let items = $(".item");
let showroom = Showroom(items);

配置

展示室提供以下选项。

事件

ftw.showroom在document上触发以下事件

要监听事件，请使用以下代码

$(document).on('showroom:item:shown', function (showroom) {
  // do something with the showroom/item
})

获取

默认获取函数使用每个项目提供的目标通过AJAX调用获取其内容。

function fetch(item) { return $.get(item.target); };

此函数可以被覆盖，见配置。

let showroom = Showroom(items,
  {
    fetch: (item) => { return "<p>Some other content</p>"; }
  }
);

渲染

默认渲染函数返回一个HTML字符串，使用默认的Handlebars模板，填充内部showroom数据、预取的内容和活动项。

function render(content) {
  return $.when(content).pipe((content) => {
    return $(template({ showroom: data, content: content, item: register.current }));
  });
}

此函数可以被覆盖，见配置。

let showroom = Showroom(items,
  {
    render: (content) => { return $(template()); }
  }
);

引用

如果您想打开由同一页面上多个元素引用的showroom项，则引用很有用。您只需添加showroom-reference类和data-showroom-target-item属性即可建立连接。 data-showroom-target-item属性包含一个id，该id引用页面上的showroom项。您必须通过手动设置data-showroom-id来与引用建立连接。

目前没有接口用于手动建立连接。但是，您必须调用showroom.refresh()来刷新引用。

<!-- The showroom item -->

<a href="#"
  class="showroom-item"
  data-showroom-id="your-unique-id"
  data-showroom-target="http://www.example.com"
  data-showroom-title="Example">Example<a/>

<!-- The reference (a link in that case) -->

<a class="showroom-reference"
   data-showroom-target-item="your-unique-id"></a>

API

Showroom.open

打开特定项。如果没有指定项，showroom将尝试显示商店中的第一个，否则它将不执行任何操作。

showroom.open();

或

showroom.open(item);

Showroom.close

通过隐藏元素关闭覆盖层。

showroom.close();

Showroom.next

打开项目队列中的下一个项。当指针到达最后一个项时，showroom将不执行任何操作。

showroom.next();

Showroom.prev

打开项目队列中的上一个项。当指针到达第一个项时，showroom将不执行任何操作。

showroom.prev();

Showroom.append

使用新项扩展当前项目队列。项目被附加到队列的末尾。指针不受影响。append方法接受NodeList或jQuery

let newItems = document.querySelectorAll(".newItems");
showroom.append(newItems);

或

let newItems = $(".newItems");
showroom.append(newItems);

Showroom.prepend

使用新项扩展当前项目队列，类似于append方法，但项目被附加到队列的末尾。指针不受影响。prepend方法接受NodeList或jQuery

let newItems = document.querySelectorAll(".newItems");
showroom.prepend(newItems);

或

let newItems = $(".newItems");
showroom.prepend(newItems);

Showroom.reset

使用新项重置当前项存储。覆盖层将关闭，指针设置为0。要清空项存储，请使用不带参数的重置。

let newItems = document.querySelectorAll(".newItems");
showroom.reset(newItems);

或

let newItems = document.querySelectorAll(".newItems");
showroom.reset();

Showroom.destroy

在销毁showroom后，将无法打开任何项。存储将重置，并移除标记类。覆盖层也将关闭。所有项都将丢失其data-showroom-id。

showroom.destroy();

Showroom.setTotal

更新总值并重新渲染打开的覆盖层。该方法仅允许数值。

showroom.setTotal(34);

Showroom.setOffset

更新偏移量。防止负偏移量。该方法仅允许数值。

showroom.setOffset(42);

Showroom.refresh

刷新展示厅参考。

showroom.refresh();

1.5.1 (2018-03-12)

• 1.5.0版本未正常工作，因为未执行dist命令。[mathias.leimgruber]

1.5.0 (2018-03-08)

• 引入“showroom:item:shown”事件

1.4.0 (2017-07-11)

• 引入渲染前钩子。[Kevin Bieri]

1.3.1 (2016-11-02)

• 引入卸载配置文件。[Kevin Bieri]

• 引入升级步骤。[Kevin Bieri]

• 清理版本锁定。[Kevin Bieri]

1.3.0 (2016-10-18)

• 使用事件委托重构事件绑定。由于这些更改，所有展示厅项目都必须有< cite>showroom-item类，因此不再需要手动刷新事件。[Kevin Bieri]

1.2.1 (2016-08-29)

• 防止register#set两次调用尾部。[Kevin Bieri]

1.2.0 (2016-08-23)

• 使模板可配置。[Kevin Bieri]

• 引入展示厅参考。[Kevin Bieri]

• 为展示厅提供偏移选项。偏移量添加到当前数字，允许显示批处理项的正确项目编号。[deiferni]

1.1.1 (2016-07-04)

• 修复无序列表样式。[Kevin Bieri]

1.1.0 (2016-06-27)

• 提供将项目添加到展示厅队列前的选项。[phgross]

1.0.0 (2016-05-24)

• 尚未更改