Welcome to the documentation of the Picturae Webkitchen components, on this website you can find information how to implement our components on your own website.

You can also try the demo to see how our application should behave. In case you have any questions you can contact us at contact@picturae.com.

Mediabank
Mediabank 2.0
Genealogie
Webexpo
Memorix Archives

Picturae Webkitchen - Genealogie

Genealogie - Getting Started

Javascript

To setup the genealogy component you need to include the follow scripts

CDN version:

    <!-- 3rd party JS -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-touch.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-resource.min.js"></script>
<script src="//code.angularjs.org/1.3.8/i18n/angular-locale_nl-nl.js"></script>
<script src="//cdn.jsdelivr.net/angular.ui-router/0.2.13/angular-ui-router.min.js"></script>
<script src="//cdn.jsdelivr.net/angular.ngtable/0.3.3/ng-table.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.3.0/js/ngDialog.min.js"></script>
<script src="//images.memorix.nl/topviewer/1.0/src/topviewer.compressed.js?v=1.0" type="text/javascript"></script>
<!-- Genealogy JS -->
<script src="http://webservices.picturae.pro/genealogy/dist/js/vendor/jsoneditor.min.js"></script>
<script src="http://webservices.picturae.pro/genealogy/dist/js/angular-slider.js"></script>
<script src="http://webservices.picturae.pro/genealogy/dist/js/partials/partials.min.js"></script>
<script src="http://webservices.picturae.pro/genealogy/dist/js/app.js"></script>

Picturae webservice version (contains compiled dependency file):

    
        <script src="//images.memorix.nl/topviewer/1.0/src/topviewer.compressed.js?v=1.0" type="text/javascript"></script>
        <!-- Genealogy JS -->
        <script src="http://webservices.picturae.pro/genealogy/dist/js/deps.min.js"></script>
        <script src="http://webservices.picturae.pro/genealogy/dist/js/partials/partials.min.js"></script>
        <script src="http://webservices.picturae.pro/genealogy/dist/js/app.js"></script>

CSS

The following css files are required for the default styling.

    <link rel="stylesheet" href="//webservices.picturae.pro/genealogy/dist/css/genealogy.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.3.0/css/ngDialog.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.3.0/css/ngDialog-theme-plain.min.css">

HTML

To initialize the application you will need to add a div with the following attributes

Replace {api-key} with the actual api key

    <div id="pic-genealogy"
    ui-view
    data-url="http://webservices.picturae.pro/genealogy/"
    data-api-key="{api-key}"
    data-pagination-rows="25"></div>

The base href to the root application must be added in the head of the html, so for example if the application lives in a /genealogy subdirectory the base href will be:

    <base href="http://domain.me/genealogy/" />

Help text

A default help text is provided in the application, it can happen that you want to override it with a custom text.

You can override the help text with the following attributes, replace {url-to-help} with an link to a html document.

    <div id="pic-genealogy"
    ui-view
    data-url="http://webservices.picturae.pro/genealogy/"
    data-api-key="{api-key}"
    data-pagination-rows="25"
    data-form-help-persons="{url-to-help}"
    data-form-help-deeds="{url-to-help}"
    data-form-help-registers="{url-to-help}"></div>

Navigation

There are 3 possible endpoints in the genealogy frontend

  • /persons a view of all persons in the data
  • /deeds a view of all deeds in the data
  • /registers a view of all registers in the data

You will need to add your own navigation to these parts, as example you can check out the sub pages on the demo page

Most of the time only one of the views will need to be shown, if this is the case you will need to redirect the application to the url ending with /person or /register / deed

IE 9 support

To support IE 9 the following script will need to be added to support cross domain requests

    <!--[if lte IE 9]>
    <script type="text/javascript" src="http://webservices.picturae.pro/genealogy/js/xdomain/xdomain.min.js"></script>
    <script>
        xdomain.slaves({
            "http://webservices.picturae.pro": "/genealogy/proxy.html"
        });
    </script>
<![endif]-->

Multilingual

It is possible to render the component in two languages en_GB and nl_NL. The data-language attribute should be set to ensure everything is rendered in that language.

Add the following data-attribute to the genealogy-element (described in the HTML section).

    
        data-language="nl_NL"

Date formatting

If you change the language of the application you might want to change the date formatting, this can be done with the data-date-format attribute

The format is based on angular date object more documentation can be found on https://docs.angularjs.org/api/ng/filter/date

    
        data-date-format="dd-MM-yyyy"

HTML 4 Mode

It is possible to force HTML 4 urls with a # instead of / (push state), this can be useful if you do not have the option to rewrite URL's on your server.

http://demo.webservices.picturae.pro/genealogie/deeds/0000b26c-76e8-0b20-9ebf-b9bb1776eae5?person=b6f26943-9741-dbde-f459-d853ea77243b
would become:
http://demo.webservices.picturae.pro/genealogie/#/deeds/0000b26c-76e8-0b20-9ebf-b9bb1776eae5?person=b6f26943-9741-dbde-f459-d853ea77243b

This should only be done as a last resort, as it's not possible to provide any server side fallback as everything behind the # is not passed to the server.

Add the following data-attribute to the genealogy-element (described in the HTML section).

    
        data-legacy-mode="true"

Social sharing

Note that enabling Pinterest's sharing requires their libraries to be additionally loaded:

    
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js" data-pin-build="parsePins"></script>