ftw.showroom 1.1.0

Installation

Add the package as dependency to your setup.py:

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

or to your buildout configuration:

[instance]
eggs += ftw.showroom

and rerun buildout.

Install the Generic Setup profile.

Compatibility

Plone 4.3

Links

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

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

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

• Continuous integration: https://jenkins.4teamwork.ch/search?q=ftw.showroom

Copyright

This package is copyright by 4teamwork.

ftw.showroom is licensed under GNU General Public License, version 2.

Getting Started

The client library depends on Grunt. Assuming you already have Node.js installed on your system, run the following command:

sudo npm install -g grunt

To install the dependencies, run the following command:

npm install

And with npm you get the following packages:

• Grunt - JavaScript task runner.

• Babel - ES6 Transpiler.

• Browserify - Dependency Bundler

• Karma - JavaScript test runner.

• Jasmine - JavaScript test suite.

• Chai - JavaScript Assertion Library.

Usage

Run the following command to re-build the library:

grunt build

Run the following command to watch for changes which trigger a rebuild:

grunt

Build options

See https://github.com/substack/browserify-handbook for more information about browserify.

Source Maps

Browserify comes with a built-in support to generate source maps. It is already enabled by default, but feel free to disable source maps. Refer to this article to enable source maps in Google Chrome, if you haven’t already done so.

Tests

Run all tests

grunt test

Run a specific test

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

Initialization

Creates an empty showroom instance with default options

let showroom = Showroom();

The showroom constructor accepts a NodeList or a jQuery. The items can provide a target as an HTML data attribute (data-showroom-target) to define the endpoint where the item will fetch its content from. To make a title visible in the overlay provide a title as an HTML data attribute (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);

or

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

Configuration

The showrooms provide the following options.

Fetching

The default fetching function uses the target provided by each item to make an AJAX call to retrieve its content.

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

This function can be overridden, see Configuration.

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

Rendering

The default rendering function returns an HTML string using the default Handlebars template padding the internal showroom data, the prefeteched content and the active item.

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

This function can be overridden, see Configuration.

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

API

Showroom.open

Opens a specific item. If no item is specified the showroom tries to show the first in the store otherwise it does nothing.

showroom.open();

or

showroom.open(item);

Showroom.close

Closes the overlay by hiding the element.

showroom.close();

Showroom.next

Opens the next item in the item queue. When the pointer reaches the last item the showroom does nothing.

showroom.next();

Showroom.prev

Opens the previous item in the item queue. When the pointer reaches the first item the showroom does nothing.

showroom.prev();

Showroom.append

Extend the current item queue with new items. The items are appended at the end of the queue. The pointer remains unaffected. The append method accepts a NodeList or a jQuery

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

or

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

Showroom.prepend

Extend the current item queue with new items, similar to the append method, but the items are prepended at the beginning of the queue. The pointer remains unaffected. The prepend method accepts a NodeList or a jQuery

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

or

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

Showroom.reset

Reset the current item store with new items. The overlay will be closed and the pointer set to 0. To empty the item store reset with no arguments.

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

or

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

Showroom.destroy

After destroying the showroom is no longer able to open any items. The store will be reset and the marker class removed. The overlay will be closed as well. All items will loose their data-showroom-id.

showroom.destroy();

Showroom.setTotal

Updates the total value and rerenders the opened overlay. The method does only allow numeric values.

showroom.setTotal(34);

1.1.0 (2016-06-27)

• Provide option to prepend items to the showroom queue. [phgross]

1.0.0 (2016-05-24)

• Nothing changed yet