=====
Usage
=====

This guide contains Javascript usage, see :ref:`Markup Guide` and :ref:`Themes` for Html and CSS usage.

In html file there are two nested div elements with class name *.rs-container* and *.rs-pq3d* which serve as the base container.

.. code-block:: html
   :linenos:

    <div class="rs-container">
      <div class="rs-pq3d">
      ...
      </div>
    </div>

To bootstrap the app in javascript, query *.rs-pq3d* element and pass it as an input argument to PhotoQueue constructor:

.. code-block:: javascript
 :linenos:

  var el = document.querySelector('.rs-pq3d');
  var pq3d = new PhotoQueue(el);

A second object argument filled with :ref:`configuration options<Configurations>` can be passed to the constructor:

.. code-block:: javascript
 :linenos:

  var pq3d = new PhotoQueue(el, {
    useMouseDrag:true,
    itemShadow:'0px 10px 15px 5px #222',
    shiftDistance:600,
    itemDistance:200,
    shiftMode:'spiral',
    roundCorner:10,
    viewAngleX:-12,
    viewAngleY:0,
    easing:'easeOutQuint',
    duration:1000
  });


API Methods
-----------

* **target(index)**

    Target an item, bring it to center front and show its title and description.
    *index*: The item index

* **next**

    Target the next item in current category

* **prev**

    Target the previous item in current category

Dispatched Events
-----------------

* **cload**
  
    Fire when a category is beginning to load

* **cloadcomplete**

    Fire when a category is finished loading

* **target**

    Fire when an item is being targeted

Examples
--------

Assign pq3d to window context then call its API methods:

.. code-block:: javascript
 :linenos:

  window.pq3d = pq3d; 
  
  // Target item with id: 1
  pq3d.target(1);
  // ...

  // Target next item
  pq3d.next();
  // ...

  // Target previous item
  pq3d.prev();

Add event listeners:

.. code-block:: javascript
 :linenos:

  // Trigger every time an item is targeted
  pq3d.addEventListener('target', function(e) {
    console.log(e.detail);
  });

  // Trigger when a category begins to load
  pq3d.addEventListener('cload', function(e) {
    console.log(e.detail);
  });

  // Trigger when a category finished loading
  pq3d.addEventListener('cloadcomplete', function(e) {
    console.log(e.detail);
  });