Blame view

demo.html 5.75 KB
c2589de4   Luigi Serra   added demo page
1
2
3
  <!DOCTYPE html>

  <html lang="en">

  <head>

34c460f1   Andrea Petta   datalet creator
4
5
6
7
      <meta charset="UTF-8">

  

      <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

  

8d261aa1   Renato De Donato   creator
8
9
10
      <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>

  

c2589de4   Luigi Serra   added demo page
11
      <link rel="import"  href="bower_components/iron-component-page/iron-component-page.html">

c2589de4   Luigi Serra   added demo page
12
      <link rel="import"  href="bower_components/paper-icon-button/paper-icon-button.html">

c2589de4   Luigi Serra   added demo page
13
  

c2589de4   Luigi Serra   added demo page
14
15
      <script type="text/javascript" src="docs/js/editarea_0_8_2/edit_area/edit_area_full.js"></script>

  

c2589de4   Luigi Serra   added demo page
16
      <script type="text/javascript">

c2589de4   Luigi Serra   added demo page
17
          $(document).ready(function () {

c2589de4   Luigi Serra   added demo page
18
              editAreaLoader.init({

8d261aa1   Renato De Donato   creator
19
                  id : "text_area",         // textarea id

34c460f1   Andrea Petta   datalet creator
20
21
22
23
                  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

c2589de4   Luigi Serra   added demo page
24
25
              });

          });

34c460f1   Andrea Petta   datalet creator
26
27
28
29
30
31
32
33
34
35
  

          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")

39b76991   Andrea Petta   datalet creator
36
                          dataletHTML += ' ' + property + '=\'' + e.detail.data.params[property] + '\'';

34c460f1   Andrea Petta   datalet creator
37
38
39
40
                  }

              }

  

              dataletHTML += ' fields=\'' + JSON.stringify(e.detail.data.fields) + '\'';

84bd79ae   Andrea Petta   datalet creator fix
41
              //dataletHTML += ' data=\''   + e.detail.data.staticData + '\'>';

39b76991   Andrea Petta   datalet creator
42
              dataletHTML += '>';

34c460f1   Andrea Petta   datalet creator
43
44
45
46
47
48
              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';

  

990613ce   Andrea Petta   plugin update
49
              var dataletLink     = '<link rel="import" href="http://deep.routetopa.eu/deep_1_7/COMPONENTS/datalets/'+e.detail.data.datalet+'/'+e.detail.data.datalet+'.html" /> \n';

34c460f1   Andrea Petta   datalet creator
50
  

8d261aa1   Renato De Donato   creator
51
              editAreaLoader.setValue("text_area", dataletImport+dataletLink+dataletHTML);

34c460f1   Andrea Petta   datalet creator
52
53
          }

  

c2589de4   Luigi Serra   added demo page
54
55
      </script>

  

8d261aa1   Renato De Donato   creator
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
      <style is="custom-style">

  

          #creator_container {

              width: 100%;

              height: 100%;

          }

  

          #creator_container * {

              font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;

              font-size: 16px;

              line-height: 24px;

          }

  

          #text_container {

              padding: 8px;

              background: #BBDEFB;

  

              margin-top: 8px;

          }

  

          #controllet_iframe {

              height: 100%;

              width: 100%;

          }

  

          #iframe_container {

              border: 2px solid #BBDEFB;

              border-top: 0;

              width: calc(100% - 4px);

              height: 698px;

          }

34c460f1   Andrea Petta   datalet creator
87
  

8d261aa1   Renato De Donato   creator
88
89
          #toolbar {

              background: #2196F3;

d961810b   lucvic   Updated demo page
90
91
          }

  

8d261aa1   Renato De Donato   creator
92
93
          .title {

              font-weight: 700 !important;

c2589de4   Luigi Serra   added demo page
94
          }

34c460f1   Andrea Petta   datalet creator
95
  

c2589de4   Luigi Serra   added demo page
96
          #logo{

8d261aa1   Renato De Donato   creator
97
98
99
              width: 64px;

              height: 64px;

              background-image: url("http://spod.routetopa.eu/ow_static/themes/spod_theme_matter/images/logo.png");

c2589de4   Luigi Serra   added demo page
100
101
              background-repeat: no-repeat;

              background-position: center center;

8d261aa1   Renato De Donato   creator
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
          }

  

          paper-icon-button {

              --paper-icon-button-ink-color: #FFFFFF;

              height: 48px;

              width: 48px;

              padding: 8px;

          }

  

          a {

              color: #FFFFFF;

              text-decoration: none;

          }

          #text_area_container {

              width: 100%;

              height: calc(100vh - 884px);

              min-height: 192px;

c2589de4   Luigi Serra   added demo page
119
  

8d261aa1   Renato De Donato   creator
120
121
              margin-top: 8px;

              /*background: red;*/

c2589de4   Luigi Serra   added demo page
122
          }

8d261aa1   Renato De Donato   creator
123
124
125
126
127
128
129
130
  

          #text_area {

              width: calc(100% - 18px);

              height: calc(100% - 18px);

              margin: 0;

              padding: 8px;

          }

  

c2589de4   Luigi Serra   added demo page
131
132
133
      </style>

  

  </head>

34c460f1   Andrea Petta   datalet creator
134
  <body>

c2589de4   Luigi Serra   added demo page
135
  

8d261aa1   Renato De Donato   creator
136
137
138
139
140
141
142
143
144
145
      <div id="creator_container">

  

          <paper-toolbar id="toolbar">

              <a href="http://routetopa.eu/" target="_blank"><paper-icon-button id="logo" title="ROUTE-TO PA European Project"></paper-icon-button></a>

              <span class="title">DatalEts-Ecosystem Provider - Datalet Creator</span>

              <a href="docs/docs.html" target="_blank"><paper-icon-button icon="description" title="DEEP Documentation"></paper-icon-button></a>

              <a href="http://routetopa.eu/" target="_blank"><paper-icon-button icon="forward" title="ROUTE-TO PA European Project"></paper-icon-button></a>

          </paper-toolbar>

  

          <div id="text_container">

34c460f1   Andrea Petta   datalet creator
146
147
148
149
              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.

8d261aa1   Renato De Donato   creator
150
          </div>

c2589de4   Luigi Serra   added demo page
151
  

8d261aa1   Renato De Donato   creator
152
153
154
          <div id="iframe_container">

              <iframe id="controllet_iframe" frameborder="0" src="./controllet.html"></iframe>

          </div>

c2589de4   Luigi Serra   added demo page
155
  

8d261aa1   Renato De Donato   creator
156
157
158
159
          <div id="text_area_container">

              <textarea id="text_area">Copy and paste this code to inject the datalet in you page.</textarea>

          </div>

      </div>

c2589de4   Luigi Serra   added demo page
160
161
  

  </body>

bfa40fa6   Luigi Serra   demo page updates
162
  </html>