Public pages on external websites
=================================

The public contents of t-Point are reachable through the ``/public/``-Route (``/public/de`` for german contents).

To use the public contents of t-Point on your Organisation-Website, we provide the following integration methods:


'regular' Page-view
-------------------
+ The Bundle can be accessed via link `./public` where the default System-Lang is loaded.
+ Access the Bundle via `./public/{_locale}` to translate the page-contents

Access the Pages via normal Link:

.. code-block:: html

    https://demo.t-point.eu/public/projects/de
    https://demo.t-point.eu/public/events/de
    https://demo.t-point.eu/public/contacts/de
    https://demo.t-point.eu/public/reports/de

.. note::

    **https://demo.t-point.eu/** is used by default in this examples.

    Of course, you have to replace it with the the root-URL of your t-Point installation.


'iframe'-View
-------------

This is the easiest method to integrate. Use any URL from above and add ``?view=frame`` and embedd it as  ``<iframe>``

Differences to the "regular" Pages, when used with Frame-View:

- There are no navbar, navigation and other System-relating contents visible on the site.
- The Sub-Pages are opened in a new Popup-Window


Simply add the following line to your HTML-Code in your website:

**Caution**: If you use a CMS, make sure, that the content is inserted as (unformatted) HTML-Text

.. code-block:: html

    <iframe src="https://demo.t-point.eu/public/projects/de?view=frame"
        id="projectFrame" style="width: 100%; height: 400px; border: none;"></iframe>

If you want to see the whole iframe-content whithout the scrollbars, use the following:

.. code-block::html

    <iframe src="https://demo.t-point.eu/public/projects/de?view=frame"
        id="projectFrame"></iframe>
    <script type="text/javascript">
        $(function() {
            $('#projectFrame').load(function(){
                $(this).css('height', $(this).contents().height());
            });
        });
    </script>
    <style type="text/css">
        iframe {
            width: 100%;
            height: 300px;
            border:none;
        }
    </style>

Alternative non-jQuery method:

.. code-block:: html

    <iframe src="https://demo.t-point.eu/public/projects/de?view=frame"
        id="projectFrame" onload="iframeLoaded()"></iframe>
    <script>
        function iframeLoaded() {
            var iFrameID = document.getElementById('projectFrame');
            if(iFrameID) {
                iFrameID.style.height =
                    (iFrameID.contentWindow.document.body.offsetHeight+20) + "px";
            }
        }
    </script>

.. note::

    The "+20" is used to ensure the complete height of the body, if it is adapted via css (``margin``)

    JS-Sources: http://stackoverflow.com/a/9976309 & http://stackoverflow.com/a/9163087


JSON
----

For the use on public websites, the contents are available as JSON-Data. They can be loaded e.g. via 'curl' from external servers.

- In the public area, the main json page (``https://demo.t-point.eu/public/en.json``) shows the Json-links to the available informations.
- Use your perferered locale in the link, and add '.json'. example: ``./public/de.json``

You can insert the Contents of the Pages e.g. via JS (see: `stackoverflow`_) or any script-language you prefer.

The main URLs (with the important data visible) are listed here

.. code-block:: html

    https://demo.t-point.eu/public/projects/de.json
    https://demo.t-point.eu/public/events/de.json
    https://demo.t-point.eu/public/contacts/de.json
    https://demo.t-point.eu/public/reports/de.json

If you open this URLs (and there is some public content for each type), you can see some links to the sub-contents with the following Keys in each JSON-Object

- ``link``: Link to the destination-page with the detailed information
- ``inframe``: Link to content, displayed in a frame or popup
- ``json_detail``: Link to detailed JSON-Array of the current Object


JSONP
"""""

The Json URL can have a parameter **callback** to the URL as Query (e.g. ``?callback=jsonpFunction``). This works with all JSON-Resources.

Then, you can get the data from this source on a external page with the following code:

.. code-block:: html

    <script type="text/javascript">
        function getData(data) {
            console.log(data);
        }
    </script>
    <script src="https://demo.t-point.eu/public/projects/
        de.json?callback=getData"></script>


RSS
---

You can use the RSS-Feeds of the Data to read the Contents via Feed-Reader or implement them via Programming-Language (e.g. via `PHP`_)

The access-links to the feeds are the same as the json-Links (with suffix ``.rss``)

.. code-block:: html

    Projects:       https://demo.t-point.eu/public/projects/de.rss
    Events:         https://demo.t-point.eu/public/events/de.rss
    Contacts:       --- no RSS-Feed available - use the Json-Data!
    Reports:        https://demo.t-point.eu/public/reports/de.rss


Examples links show how to load the Feeds via javascript/jQuery on a webpage:

- http://code.tutsplus.com/tutorials/build-an-rss-feed-reader-with-jquery-and-jgfeed--net-7941
- http://www.surfing-waves.com/feed.htm
- http://code.tutsplus.com/tutorials/phonegap-build-a-feed-reader-project-structure--mobile-20265
- http://www.sitepoint.com/jquery-rss-feed-readers/

Additional Infos:

- The Feed is not accessible for Contact-Data
- The Feed contains Links to the 'Frame-View'-Detail-Page of the content.
- The Feed contains the Company Logo (which is used in the Page-Navbar of the system).


vCard
-----

You can download the vCard of all public Contacts. To reach this, you have different methods.

- Contact-List: click on the download Icon (|downloadIcon|) to get the vcf-file.
- Contact-Detail: click on the download Icon (|downloadIcon|)
- JSON-Data: The vCard-Content is embedded to the JSON-Response of ``https://demo.t-point.eu/public/contacts/de.json`` as vCard-key of each Contact.
- For further processing of Contact-Informations, the json_detail of each Contact contains the `formatted contact`_ as `JSON-LD`_ Object.


Links to the current Ressources
-------------------------------

When the System is installed properly, you can see the list of the 'real' links to your specific resources in the Admin-Section of the Bundle.
Log in to your Symfony-Instance and go to your Public section.
If you have the ``ROLE_ADMIN`` added to your User-Security, you can see a link in the left navigation called "**Admin-Links**" (https://demo.t-point.eu/public/admin).


.. _stackoverflow: http://stackoverflow.com/questions/9922101/get-json-data-from-external-url-and-display-it-in-a-div-as-plain-text
.. _formatted contact: http://schema.org/Organization
.. _JSON-LD: http://json-ld.org/
.. _PHP: http://www.w3schools.com/php/php_ajax_rss_reader.asp

.. |downloadIcon| image:: /images/download-icon.png
    :alt: download-icon