From 34c460f1626b4deade834b59bfcbb9c8af08935b Mon Sep 17 00:00:00 2001
From: andrpet <andrpet@gmail.com>
Date: Mon, 18 Jan 2016 17:22:00 +0100
Subject: [PATCH] datalet creator

---
 controllets/data-sevc-controllet/demo/index.html |   2 +-
 demo.html                                        | 598 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 2 files changed, 102 insertions(+), 498 deletions(-)
diff --git a/controllets/data-sevc-controllet/demo/index.html b/controllets/data-sevc-controllet/demo/index.html
index 1446650..782ad24 100755
--- a/controllets/data-sevc-controllet/demo/index.html
+++ b/controllets/data-sevc-controllet/demo/index.html
@@ -21,7 +21,7 @@
 <body>
 
     <!--<span data-l10n-id="name"></span>-->
-    <data-sevc-controllet localization="fr" id="dsc" deep-url="http://192.168.232.128/DEEalerProvider/DEEP/" datalets-list-url="http://192.168.232.128/DEEalerProvider/DEEP/datalets-list"></data-sevc-controllet>
+    <data-sevc-controllet localization="it" id="dsc" deep-url="http://172.16.15.77/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.77/DEEalerProvider/DEEP/datalets-list"></data-sevc-controllet>
 
     <script>
 
diff --git a/demo.html b/demo.html
index feee467..887db0b 100755
--- a/demo.html
+++ b/demo.html
@@ -1,77 +1,70 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta charset="UTF-8">
+
+    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
+
     <link rel="import"  href="bower_components/iron-component-page/iron-component-page.html">
-    <link rel="import"  href="bower_components/paper-drawer-panel/paper-drawer-panel.html">
-    <link rel="import"  href="bower_components/paper-menu/paper-menu.html">
     <link rel="import"  href="bower_components/paper-item/paper-item.html">
     <link rel="import"  href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
     <link rel="import"  href="bower_components/paper-icon-button/paper-icon-button.html">
-    <link rel="import" href="bower_components/paper-styles/color.html">
-    <link rel="import" href="bower_components/paper-input/paper-textarea.html">
-    <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
-    <link rel="import" href="bower_components/iron-ajax/iron-ajax.html">
-
-    <link rel="import" href="controllets/animated-button-container-controllet/animated-button-container-controllet.html">
-    <link rel="import" href="controllets/items-list-controllet/item-list-controllet.html">
-    <link rel="import" href="controllets/draggable-element-controllet/draggable-element-controllet.html">
-    <link rel="import" href="controllets/treeview-controllet/treeview-controllet.html">
-    <link rel="import" href="controllets/text-element-controllet/text-element-controllet.html">
+    <link rel="import"  href="bower_components/iron-flex-layout/iron-flex-layout.html">
 
-    <script type="text/javascript" src="datalets/shared_js/jquery-1.11.2.min.js"></script>
     <script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
-    <script src="controllets/shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
-    <script src="../DEEPCLIENT/js/deepClient.js"></script>
+    <script type="text/javascript" src="datalets/shared_js/jquery-1.11.2.min.js"></script>
     <script type="text/javascript" src="docs/js/editarea_0_8_2/edit_area/edit_area_full.js"></script>
 
-    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
-    <link rel="stylesheet" href="controllets/shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
-    <link rel="import" href="bower_components/paper-menu-button/paper-menu-button.html">
-    <meta charset="UTF-8">
-
 
     <script type="text/javascript">
-        selected_component_url = "";
-
         $(document).ready(function () {
-            window.addEventListener("treeview-controllet_fileds-selected", DEEP._fieldsSelected, false);
-            window.addEventListener("items-list-controllet_item-selected", DEEP._dataletSelected, false);
-            window.addEventListener("draggable-element-controllet_content-dragged", DEEP._fieldsMapped, false);
-            window.addEventListener("text-element-controllet_content-changed", DEEP._textElementChanged, false);
-
             editAreaLoader.init({
-                id : "sbiricuda"       // textarea id
-                ,syntax: "html"          // syntax to be uses for highgliting
-                ,start_highlight: true      // to display with highlight mode on start-up
-                ,syntax: "html"
-                ,replace_tab_by_spaces: 4,
-                isEditable : false,
+                id : "sbiricuda",         // textarea id
+                syntax: "html",           // syntax to be uses for highgliting
+                start_highlight: true,    // to display with highlight mode on start-up
+                replace_tab_by_spaces: 4,
+                isEditable : false
             });
         });
+
+        var createHTML = function(e)
+        {
+            var dataletHTML = "";
+
+            dataletHTML = '<' + e.detail.data.datalet;
+
+            for (var property in e.detail.data.params) {
+                if (e.detail.data.params.hasOwnProperty(property)) {
+                    if(property != "_colorIndex")
+                        dataletHTML += ' ' + property + '="' + e.detail.data.params[property] + '"';
+                }
+            }
+
+            dataletHTML += ' fields=\'' + JSON.stringify(e.detail.data.fields) + '\'';
+            dataletHTML += ' data=\''   + e.detail.data.staticData + '\'>';
+            dataletHTML += '</'+e.detail.data.datalet+'>';
+
+            var dataletImport   = '\<script type="text/javascript" src="https://cdn.jsdelivr.net/webcomponentsjs/0.7.16/webcomponents-lite.min.js"\>\<\/script\>\n' +
+                                  '\<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"\>\<\/script\>\n' +
+                                  '<!-- REMOVE THE PREVIOUS SCRIPT TAGS IF YOUR PAGE ALREADY USES JQUERY AND POLYFILL LIBRARIES  -->\n';
+
+            var dataletLink     = '<link rel="import" href="http://deep.routetopa.eu/COMPONENTS/datalets/'+e.detail.data.datalet+'/'+e.detail.data.datalet+'.html" /> \n';
+
+            editAreaLoader.setValue("sbiricuda", dataletImport+dataletLink+dataletHTML);
+        }
+
     </script>
 
     <style>
+
         body {
             font-family: 'Roboto', sans-serif;
         }
 
-        .avatar
-        {
-            display: inline-block;
-            height: 0.5em;
-            width: 0.5em;
-            border-radius: 50%;
-            /*background: #3f51b5;*/
-            color: white;
-            line-height: 2em;
-            font-size: 1.87em;
-            text-align: center;
-            margin-right: 5px;
-        }
-
         #toolbar{
             background: #2196F3 ;
         }
+
         #logo{
             width: 56px;
             height: 56px;
@@ -81,90 +74,10 @@
             background-position: center center;
 
         }
-        .area_container
-        {
-            overflow: hidden;
-            margin : 0.8em;
-            padding : 0.8em;
-            border-width: 1em;
-            border-radius: 0.125rem;
-            box-shadow: 0.125em 0.125em 0.1125em 0.125em rgba(0, 0, 0, 0.25);
-        }
-
-        #visualization_slider_area
-        {
-            min-width: 566px;
-            height: 100px;
-        }
-        .content-card {
-            position: relative;
-            float: left;
-            margin: .2em;
-            width: 14%;
-            min-height: 100px;
-            height: 40%;
-            background: #fff;
-            -moz-border-radius: 0.125rem;
-            -webkit-border-radius: 0.125rem;
-            border-radius: 0.125rem;
-            box-shadow: 0 0.625em 0.5125em 0 rgba(0, 0, 0, 0.25);
-            -webkit-box-shadow: 0 0.625em 0.5125em 0 rgba(0, 0, 0, 0.25);
-            -moz-box-shadow: 0 0.625em 0.5125em 0 rgba(0, 0, 0, 0.25);
-            padding: 1em;
-        }
-
-        .content-selected{
-            position: relative;
-            float: left;
-            top : 5%;
-            margin : .2em;
-            width: 14%;
-            height: 40%;
-
-            background: #fff;
-            border-style: solid;
-            border-width: 0.03em;
-            -moz-border-radius: 0.125rem;; /* Firefox */
-            -webkit-border-radius: 0.125rem;; /* Safari, Chrome */
-            border-radius: 0.125rem;
-            box-shadow:         0 1.825em 1.7125em 0 rgba(0, 0, 0, 0.50);
-            -webkit-box-shadow: 0 1.825em 1.7125em 0 rgba(0, 0, 0, 0.50);
-            -moz-box-shadow:    0 1.825em 1.7125em 0 rgba(0, 0, 0, 0.50);
-            padding: 1em;
-        }
-
     </style>
 
 </head>
-<body unresolved>
-
-<template id="DEEP" is="dom-bind">
-
-    <iron-ajax
-            auto
-            id="data_request"
-            url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=07843fc3-07e1-4c66-9be4-fed43ca4a26f"
-            verbose="true"
-            on-response="handleResponseData"
-            debounce-duration="300">
-    </iron-ajax>
-
-    <iron-ajax
-            id="datales_list_request"
-            auto
-            url={{datasetsList}}
-            handle-as="json"
-            on-response="handleResponseDatalets"
-            debounce-duration="300">
-    </iron-ajax>
-
-    <iron-ajax
-            id="selected_datalet_request"
-            url={{deepUrl}}
-            verbose="true"
-            on-response="handleSelectedDatalet"
-            debounce-duration="300">
-    </iron-ajax>
+<body>
 
     <paper-toolbar id="toolbar">
         <paper-menu-button>
@@ -175,380 +88,71 @@
             </paper-menu>
         </paper-menu-button>
         <span class="title">DatalEts-Ecosystem Provider - Datalet Creator</span>
-        <a href="http://routetopa.eu/" target="_blank"><paper-icon-button id="logo" ></paper-icon-button></a>
+        <a href="http://routetopa.eu/" target="_blank"><paper-icon-button id="logo"></paper-icon-button></a>
     </paper-toolbar>
-    <div id="main_content">
-        <div class="vertical justified layout" style="margin-top: 40px;">
-
-            <div class="horizontal layout area_container">
-                <p>
-                    Using this page you can create a Datalet, a off-the-shelf, reusable web-component able to load,
-                    query, filter, and visualise any dataset content (e.g. through HighCharts Javascript library).
-                    Datalet are reusable since they can be placed in every web page, like institutional web-sites,
-                    blogs, forums and so on, without any knowledge on how it effectively is implemented.
-                </p>
-            </div>
-
-            <div class="horizontal layout">
-                <paper-textarea style="width: 80%;margin-top: 8px;" id="data_url" label="Dataset api data url" floatingLabel value="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=07843fc3-07e1-4c66-9be4-fed43ca4a26f" on-change="_textElementChanged"></paper-textarea>
-                <paper-dropdown-menu style="width: 20%;" id="datasets-sources" label="Example datasets">
-                    <paper-menu class="dropdown-content">
-                        <template is="dom-repeat" items="[[Datasets.names]]" as="dataset" index-as="i">
-                            <paper-item id="[[i]]" on-tap="_datasourceSelected">[[dataset]]</paper-item>
-                        </template>
-                    </paper-menu>
-                </paper-dropdown-menu>
-            </div>
-
-            <div class="horizontal layout">
-
-                <div style="position:relative;width: 50%;min-height: 40vh;max-height: 40vh;" id="fields_placeholder" class="area_container flexchild" style="min-width:300px">
-                    <treeview-controllet id="fields_treeview"></treeview-controllet>
-                </div>
-
-                <div style="position:relative;width: 50%;min-height: 40vh;max-height: 40vh;" id="table_fields_container" class="area_container flex2child">
-                    <div id="table_component_place_holder"></div>
-                </div>
-
-            </div>
-
-            <div class="horizontal layout">
-
-                <div style="position:relative;width: 50%;min-height: 80vh;max-height: 80vh;" id="datalet_params_main_placeholder" class="area_container flexchild" style="min-width:300px">
-                    <div class="">
-                        <div id="visualization_slider_area" class="area_container"></div>
-                        <div id="fields_mapping_area" class="area_container horizontal layout">
-
-                            <div id="selected_fields_main_container" class="field-mapping-card" style="position:relative;width: 50%;min-height: 40vh;max-height: 40vh;">
-                                <div class="title">
-                                    <div class="medium">Selected fields</div>
-                                </div>
-                                <div id="selected_fields_container" class="area_container"></div>
-                            </div>
-
-                            <div id="idm_fields_main_container" class="field-mapping-card" style="position:relative;width: 50%;min-height: 40vh;max-height: 40vh;">
-                                <div class="title">
-                                    <div class="medium">Datalet fields</div>
-                                </div>
-                                <div id="datalet_idm_fields_container" class="area_container"></div>
-                            </div>
-                        </div>
-                        <div id="idm_layout_main_container" class="area_container" style="position:relative;min-height: 20vh;max-height: 20vh;">
-                            <div class="title">
-                                <div class="medium">Layout fields</div>
-                            </div>
-                            <div id="idm_layout_container" class="area_container"></div>
-                        </div>
-                    </div>
-
-                </div>
-
-                <div style="position:relative;width: 50%;min-height: 80vh;max-height: 80vh;" id="datalet_main_container" class="area_container flex2child">
-                </div>
-
-            </div>
-
-            <div class="horizontal layout">
-                <div id="code_area" style="position:relative;width: 100%;min-height: 20vh;max-height: 20vh;" class="area_container flex2child">
-                    <textarea id="sbiricuda" style="position:relative;width: 100%;min-height: 20vh;max-height: 20vh;" style="" rows="4" cols="50">
-                       Copy and paste this code to inject the datalet in you page.
-                    </textarea>
-                </div>
-            </div>
-
-        </div>
 
+    <div class="">
+        <p>
+            Using this page you can create a Datalet, a off-the-shelf, reusable web-component able to load,
+            query, filter, and visualise any dataset content (e.g. through HighCharts Javascript library).
+            Datalet are reusable since they can be placed in every web page, like institutional web-sites,
+            blogs, forums and so on, without any knowledge on how it effectively is implemented.
+        </p>
     </div>
-</template>
-<script>
-
-    //DEEP.deepUrl = "http://deep.routetopa.eu/DEEP/";
-    //DEEP.datasetsList = "http://deep.routetopa.eu/DEEP/datalets-list";
-    DEEP.deepUrl = "http://192.168.164.128/DatalEts-Ecosystem-Provider/DEEP/";
-    DEEP.datasetsList = "http://192.168.164.128/DatalEts-Ecosystem-Provider/DEEP/datalets-list";
-
-    DEEP.Datasets = {
-        names:[
-            'Italy - Consuntivo entrate 2009',
-            'Italy - Consuntivo entrate 2010',
-            'Italy - Consuntivo entrate 2011',
-            'Italy - Consuntivo entrate 2012',
-            'Italy - Consuntivo entrate 2014',
-            'Holland - Vestigingen register gemeente Groningen',
-            'Holland - Woonruimte gemeente Groningen',
-            'Ireland - SDCC Traffic Cameras',
-            'Ireland - Derelict Site Register',
-            'Ireland - Dublin City Council Commencement Notices',
-            'Ireland - Dublin City Council Planning Applications',
-            'Ireland - Dun Laoghaire-Rathdown County Council Planning Application 2008-2014',
-            'Ireland - Fingal Council Planning Applications for last 7 years',
-            'Ireland - Planning Register',
-            'Ireland - Fingal Development Plan 2011-2017 Record of Protected Structures',
-            'Bubble example',
-            'Issy -  3d pie chart'
-        ],
-        urls: [
-            'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=07843fc3-07e1-4c66-9be4-fed43ca4a26f',
-            'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=48a4db73-d3d4-4639-bbc2-9c797d0e6cda',
-            'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=a14cc2fb-0c24-48d7-9370-834045797d89',
-            'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fb32fcb6-5e44-4e52-b132-01c6540ddbee',
-            'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=0cb600fc-19ad-4aaf-9794-1e6ea851840a',
-            'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ba554c1f-02a7-4d76-b449-fb9daa1f8bfd',
-            'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=af7b3916-4347-469a-8354-3c2d559bd92f',
-            'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52',
-            'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fcbee83e-3d3d-4303-a568-24dd33d02adc',
-            'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ee00de68-f2e4-482f-a003-3c0561351075',
-            'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2f4a9d44-b52f-4c8b-a5db-d8f4a676d81e',
-            'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=c479f061-9638-489d-ac55-0c68765548ff',
-            'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=d29a477a-4734-43ef-8002-048c8640d441',
-            'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2b23f32d-e27e-4eef-af1e-27e05103df7d',
-            'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=5ea813bc-fdf9-4edb-b3b1-0142b593d5c6',
-            'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=0cb600fc-19ad-4aaf-9794-1e6ea851840a',
-            "https://data.issy.com/api/records/1.0/search?dataset=flux-rss-des-offres-demplois-a-issy-les-moulineaux&sort=published&facet=published&refine.published=2015%2F10"
-        ]
-    };
-
-    DEEP.selected_fields = undefined;
-
-    DEEP.handleResponseData = function(e){
-        DEEP.$.fields_treeview.init(e.detail.response);
-        $("#fields_placeholder").perfectScrollbar();
-        $("#table_fields_container").perfectScrollbar();
-    };
-
-    DEEP.handleResponseDatalets = function(e){
-        DEEP.datalets_list = new Array();
-        for(var i=0;i < e.detail.response.length;i++){
-            var datalet_info = { name : e.detail.response[i].name ,
-                image : e.detail.response[i].url + e.detail.response[i].name + ".png"
-            };
-
-            DEEP.datalets_list.push(datalet_info);
-        }
 
-        DEEP.$.visualization_slider_area.innerHTML = '<animated-button-container-controllet height="300" width="450" icon="assessment" icon-width="64" icon-height="64" background-button-color="#2196F3">' +
-                                                         '<items-list-controllet' +
-                                                         ' replace-string="-datalet"' +
-                                                         ' items=\'' + JSON.stringify(DEEP.datalets_list) + '\'>' +
-                                                         '</items-list-controllet>' +
-                                                     '</animated-button-container-controllet>';
-    };
-
-    DEEP.handleSelectedDatalet = function(e){
-
-        var response = e.detail.response;
-        DEEP.$.datalet_idm_fields_container.innerHTML = "";
-        DEEP.$.idm_layout_container.innerHTML = "";
-
-        var input;
-        var layouts = jQuery.extend(true, {}, response.idm.inputs.layouts);
-
-        if(response.idm.inputs.input.constructor == Object) {
-            if(response.idm.inputs.input.selection == "*")
-            {
-                var fields = this.$.selected_fields_container.querySelectorAll('draggable-element-controllet');
-                input = response.idm.inputs.input;
-                response.idm.inputs.input = new Array();
-                for(var i=0;i<fields.length;i++){
-                    var newInput = jQuery.extend(true, {}, input);
-                    newInput.name = input.name + ' ' + (i + 1);
-                    response.idm.inputs.input.push(newInput);
-                }
-            }
-        }
-
-        var heading;
-        var id;
-
-        for(var i =0; i < response.idm.inputs.input.length; i++) {
-            var html = '<draggable-element-controllet is-target="true" ';
-            input = response.idm.inputs.input[i];
-
-            heading = ' heading="' + input.name + '"';
-            id = ' id="' + (i + 1) + '"';
-
-            html += heading + id;
-            html += ' description="' + input.description + '"' +
-                    ' number="' + (i + 1) + '"';
-
-            if(DEEP.selected_fields != undefined) {
-                if(this.selected_fields[i] != undefined) {
-                    html += ' value="' + this.selected_fields[i] + '"' +
-                            ' label="' + this.selected_fields[i].split(",")[this.selected_fields[i].split(",").length - 1] + '"';
-                }
-            }
-
-            html += '></draggable-element-controllet>';
-            this.$.datalet_idm_fields_container.innerHTML += html;
-
-        }
-
-        if(layouts.input != undefined) {
-            if(layouts.input.constructor == Object){
-                layouts.input = new Array(jQuery.extend(true, {}, layouts.input));
-            }
-
-            html = '<text-element-controllet ';
-            for (var i = 0; i < layouts.input.length; i++) {
-                html += '<text-element-controllet heading="' + layouts.input[i].name + '" ' +
-                        'description="' + layouts.input[i].description + '" ' +
-                        'number="' + (i + 1) + '" ';
-
-                html += '></text-element-controllet>';
-            }
-            DEEP.$.idm_layout_container.innerHTML = html;
-        }
-
-        if(DEEP.selected_fields != undefined) DEEP.generateDataletPreview();
-
-        $("#selected_fields_main_container").perfectScrollbar();
-        $("#idm_fields_main_container").perfectScrollbar();
-        $("#idm_layout_main_container").perfectScrollbar();
-        $("#datalet_params_main_placeholder").perfectScrollbar();
-    };
-
-    DEEP._urlChanged = function(event){
-        DEEP.$.data_request.url = event.target.value;
-        DEEP.$.data_request.generateRequest();
-        DEEP.$.table_component_place_holder.innerHTML = "";
-    };
-
-    DEEP._datasourceSelected = function(event){
-        DEEP.$.data_url.value = DEEP.Datasets.urls[parseInt(event.target.id)];
-        DEEP.$.data_request.url = DEEP.Datasets.urls[parseInt(event.target.id)];
-        DEEP.$.data_request.generateRequest();
-        DEEP.$.table_component_place_holder.innerHTML = "";
-    };
-
-    DEEP._fieldsSelected  = function(e){
-
-        DEEP.$.selected_fields_container.innerHTML = "";
-        for(var i=0;i<e.detail.fields.length;i++) {
-            DEEP.$.selected_fields_container.innerHTML += '<draggable-element-controllet identifier="' + e.detail.fields[i] +
-                    '" label="' + e.detail.fields[i].split(",")[e.detail.fields[i].split(",").length -1] +
-                    '"></draggable-element-controllet><br>';
-        }
-
-        ComponentService.deep_url = DEEP.deepUrl;
-
-        ComponentService.getComponent({
-            component   : "datatable-datalet",
-            params      :{
-                'data-url' : DEEP.$.data_url.value
-            },
-            fields      : e.detail.fields,
-            placeHolder :  DEEP.$.table_component_place_holder
-        });
-
-    };
-
-    DEEP._dataletSelected = function(e){
-        DEEP.selected_datalet = e.detail.datalet;
-        DEEP.$.selected_datalet_request.url = DEEP.deepUrl + e.detail.datalet;
-        DEEP.$.selected_datalet_request.generateRequest();
-    };
-
-    DEEP._fieldsMapped = function(e){
-        DEEP.generateDataletPreview();
-    };
-
-    DEEP.timer = 0;
-    DEEP._textElementChanged = function(e){
-        clearTimeout (DEEP.timer);
-        DEEP.timer = setTimeout(DEEP.generateDataletPreview, 1500);
-    };
-
-    DEEP.getXMLHttpRequest =  function()
-    {
-        if (window.XMLHttpRequest) {
-            return new XMLHttpRequest();
-        }
-        else {
-            try {
-                return new ActiveXObject("MSXML2.XMLHTTP.3.0");
-            }
-            catch(ex) {
-                return null;
-            }
-        }
-    };
-
-    DEEP.generateDataletPreview = function(){
-
-        var input_mapped_fields = Polymer.dom(DEEP.$.datalet_idm_fields_container).querySelectorAll('draggable-element-controllet[is-target=true]');
-        DEEP.selected_fields = Array();
-
-        for (var i = 0; i < input_mapped_fields.length; i++) {
-            if (input_mapped_fields[i].value != "") {
-                DEEP.selected_fields.push(input_mapped_fields[i].value);
-            }
-        }
-
-        var input_layouts_fields = Polymer.dom(DEEP.$.idm_layout_container).querySelectorAll('text-element-controllet');
-        DEEP.params_fields = {'data-url' : DEEP.$.data_url.value};
-
-        for (var i = 0; i < input_layouts_fields.length; i++) {
-            if (input_layouts_fields[i].value != "") {
-                DEEP.params_fields[input_layouts_fields[i].heading]  =  input_layouts_fields[i].value;
-            }
-        }
-
-        ComponentService.deep_url = DEEP.deepUrl;
-        ComponentService.getComponent({
-            component   : DEEP.selected_datalet,
-            params      : DEEP.params_fields,
-            fields      : DEEP.selected_fields,
-            placeHolder : DEEP.$.datalet_main_container
-        });
-
-        var request = DEEP.getXMLHttpRequest();
-
-        request.onreadystatechange = function(){
-            if(request.readyState == 4){
-                try {
-                    var resp = JSON.parse(request.response);
-                    var link = '<link rel="import" href="' + resp.bridge_link + resp.component_link +'">\n';
-
-                    //Build datalet injecting html code
-                    var datalet_code = link + '<' + DEEP.selected_datalet;
-                    var keys = Object.keys(DEEP.params_fields);
-                    for(var i = 0; i < keys.length; i++){
-                        datalet_code += ' ' + keys[i] + '=\'' + DEEP.params_fields[keys[i]] +'\'';
-                    }
-                    datalet_code += " fields='" + JSON.stringify(DEEP.selected_fields) + "'></" + DEEP.selected_datalet + ">";
-
-                    //'<!-- ADD THE POLYFILL TO YOUR PAGE - https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.14/webcomponents.min.js -->\n'
-
-                    DEEP.$.code_area.innerHTML = '<textarea id="sbiricuda" style="position:relative;width: 100%;min-height: 20vh;max-height: 20vh;" style="" rows="4" cols="50" autofocus="false">' +
-                            '\<script type="text/javascript" src="https://cdn.jsdelivr.net/webcomponentsjs/0.7.16/webcomponents-lite.min.js"\>\<\/script\>\n' +
-                            '\<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"\>\<\/script\>\n' +
-                            '<!-- REMOVE THE PREVIOUS SCRIPT TAGS IF YOUR PAGE ALREADY USES JQUERY AND POLYFILL LIBRARIES  -->\n'
-                            + datalet_code +
-                            '</textarea>';
-
-                    editAreaLoader.init({
-                        id : "sbiricuda"       // textarea id
-                        ,syntax: "html"          // syntax to be uses for highgliting
-                        ,start_highlight: true      // to display with highlight mode on start-up
-                        ,syntax: "html"
-                        ,replace_tab_by_spaces: 4,
-                        isEditable : false,
-                    });
-
-                } catch (e){
-                    var resp = {
-                        status: 'error',
-                        data: 'Unknown error occurred: [' + request.response + ']'
-                    };
-                }
-            }};
-
-        request.open('GET', DEEP.deepUrl + DEEP.selected_datalet);
-        request.send();
-
-    };
+    <iframe style="width:100%; height:62vh" frameborder="0" srcdoc='
+        <head>
+            <script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
+            <script type="text/javascript" src="datalets/shared_js/jquery-1.11.2.min.js"></script>
+            <link rel="import" href="controllets/data-sevc-controllet/data-sevc-controllet.html" />
+            <script src="controllets/shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
+            <link rel="stylesheet" href="controllets/shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
+            <script type="text/javascript">
+                $(document).ready(function () {
+
+                    var datasets = [
+                        {decription:"", name:"Italy - Consuntivo entrate 2009", url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=07843fc3-07e1-4c66-9be4-fed43ca4a26f"},
+                        {decription:"", name:"Italy - Consuntivo entrate 2010",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=48a4db73-d3d4-4639-bbc2-9c797d0e6cda"},
+                        {decription:"", name:"Italy - Consuntivo entrate 2011",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=a14cc2fb-0c24-48d7-9370-834045797d89"},
+                        {decription:"", name:"Italy - Consuntivo entrate 2012",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fb32fcb6-5e44-4e52-b132-01c6540ddbee"},
+                        {decription:"", name:"Italy - Consuntivo entrate 2014",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=0cb600fc-19ad-4aaf-9794-1e6ea851840a"},
+                        {decription:"", name:"Holland - Vestigingen register gemeente Groningen",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ba554c1f-02a7-4d76-b449-fb9daa1f8bfd"},
+                        {decription:"", name:"Holland - Woonruimte gemeente Groningen",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=af7b3916-4347-469a-8354-3c2d559bd92f"},
+                        {decription:"", name:"Ireland - SDCC Traffic Cameras",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52"},
+                        {decription:"", name:"Ireland - Derelict Site Register",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fcbee83e-3d3d-4303-a568-24dd33d02adc"},
+                        {decription:"", name:"Ireland - Dublin City Council Commencement Notices",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ee00de68-f2e4-482f-a003-3c0561351075"},
+                        {decription:"", name:"Ireland - Dublin City Council Planning Applications",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2f4a9d44-b52f-4c8b-a5db-d8f4a676d81e"},
+                        {decription:"", name:"Ireland - Dun Laoghaire-Rathdown County Council Planning Application 2008-2014",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=c479f061-9638-489d-ac55-0c68765548ff"},
+                        {decription:"", name:"Ireland - Fingal Council Planning Applications for last 7 years",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=d29a477a-4734-43ef-8002-048c8640d441"},
+                        {decription:"", name:"Ireland - Planning Register",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2b23f32d-e27e-4eef-af1e-27e05103df7d"},
+                        {decription:"", name:"Ireland - Fingal Development Plan 2011-2017 Record of Protected Structures",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=5ea813bc-fdf9-4edb-b3b1-0142b593d5c6"},
+                        {decription:"", name:"Bubble example",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=0cb600fc-19ad-4aaf-9794-1e6ea851840a"},
+                        {decription:"", name:"Issy -  3d pie chart", url:"https://data.issy.com/api/records/1.0/search?dataset=flux-rss-des-offres-demplois-a-issy-les-moulineaux&sort=published&facet=published&refine.published=2015%2F10"}
+                    ];
+
+                    var dsc = document.getElementById("dsc");
+                    dsc.setAttribute("datasets", JSON.stringify(datasets));
+
+                    window.addEventListener("data-sevc-controllet.dataletCreated", function(e){parent.createHTML(e);});
+
+                });
+            </script>
+        </head>
+        <body>
+            <data-sevc-controllet localization="en" id="dsc" deep-url="http://deep.routetopa.eu/DEEP/" datalets-list-url="http://deep.routetopa.eu/DEEP/datalets-list"></data-sevc-controllet>
+        </body>
+    '>
+    </iframe>
+
+    <div id="code_area">
+        <textarea id="sbiricuda" style="position:relative;width: 100%;min-height: 15vh;max-height: 15vh;" style="" rows="4" cols="50">
+Copy and paste this code to inject the datalet in you page.
+        </textarea>
+    </div>
 
-</script>
+    <!--<div>
+        <textarea style="width: 90%; margin-left:10px; height: 110px"  id="code-textarea"></textarea>
+    </div>-->
 
 </body>
 </html>
\ No newline at end of file
--
libgit2 0.21.4

