| 1 | <!DOCTYPE html>
|
| 2 | <html lang="en">
|
| 3 | <head>
|
| 4 | <meta charset="utf-8">
|
| 5 | <title>Plumes - Lists</title>
|
| 6 |
|
| 7 | <meta name="viewport" content="width=device-width, initial-scale=1">
|
| 8 | <link rel="stylesheet" href="/public/plumes/plumes.css" type="text/css" />
|
| 9 | <style type="text/css">
|
| 10 | .example-mask {
|
| 11 | z-index: 99998;
|
| 12 | position: fixed;
|
| 13 | top: 0;
|
| 14 | left: 0;
|
| 15 | right: 0;
|
| 16 | bottom: 0;
|
| 17 | background: #fff;
|
| 18 | }
|
| 19 |
|
| 20 | .pl-grouped-list {
|
| 21 | position: fixed !important;
|
| 22 | top: 80px;
|
| 23 | left: 3rem;
|
| 24 | right: 3rem;
|
| 25 | bottom: 3rem;
|
| 26 | }
|
| 27 |
|
| 28 | .pl-grouped-list-item {
|
| 29 | font-size: 1.8rem;
|
| 30 | line-height: 3rem;
|
| 31 | background: white;
|
| 32 | }
|
| 33 |
|
| 34 | .country {
|
| 35 | font-size: 4rem;
|
| 36 | line-height: 5rem;
|
| 37 | text-transform: uppercase;
|
| 38 | color: #ff6600;
|
| 39 | }
|
| 40 |
|
| 41 | .area {
|
| 42 | font-size: 3.4rem;
|
| 43 | line-height: 4.6rem;
|
| 44 | }
|
| 45 |
|
| 46 | .department {
|
| 47 | font-size: 2rem;
|
| 48 | line-height: 3.6rem;
|
| 49 | }
|
| 50 |
|
| 51 | .canton {
|
| 52 | font-size: 1.6rem;
|
| 53 | line-height: 3rem;
|
| 54 | color: #999;
|
| 55 | }
|
| 56 | </style>
|
| 57 | </head>
|
| 58 | <body>
|
| 59 |
|
| 60 | <rv-require
|
| 61 | name="pl-layout-platform"
|
| 62 | src="../public/layouts/pl-layout-platform"
|
| 63 |
|
| 64 | data-bind-onloaded="onloaded"
|
| 65 | data-bind-apps="apps"
|
| 66 | data-bind-listitems="listitems"
|
| 67 | >
|
| 68 | <rv-partial target="mask-title">
|
| 69 | Lists <span class="accent">example</span>
|
| 70 | </rv-partial>
|
| 71 | <rv-partial target="message-title">
|
| 72 | Lists <span class="accent">example</span>
|
| 73 | </rv-partial>
|
| 74 | <rv-partial target="content">
|
| 75 |
|
| 76 | <rv-require
|
| 77 | name="pl-grouped-list"
|
| 78 | src="../public/lists/pl-grouped-list"
|
| 79 |
|
| 80 | data-bind-items="listitems"
|
| 81 | >
|
| 82 | <rv-partial target="itemTemplate" src="./lists-items-partial.html"></rv-partial>
|
| 83 | </rv-require>
|
| 84 |
|
| 85 | </rv-partial>
|
| 86 | </rv-require>
|
| 87 |
|
| 88 | <div class="example-mask"></div>
|
| 89 |
|
| 90 | <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
|
| 91 | <script type="text/javascript" src="http://cdn.ractivejs.org/latest/ractive.js"></script>
|
| 92 | <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ractive-require/0.5.4/ractive-require.js"></script>
|
| 93 | <script type="text/javascript" src="/public/plumes/plumes.js"></script>
|
| 94 |
|
| 95 | <script type="text/javascript">
|
| 96 | (function() {
|
| 97 | 'use strict';
|
| 98 |
|
| 99 | window.Ractive.Plumes.bootstrap(function(page) {
|
| 100 |
|
| 101 | page.set('apps', [{
|
| 102 | name: 'Plumes',
|
| 103 | select: function() {
|
| 104 | window.location.href = 'index.html';
|
| 105 | }
|
| 106 | }, {
|
| 107 | name: 'Example Login',
|
| 108 | select: function() {
|
| 109 | window.location.href = 'login.html';
|
| 110 | }
|
| 111 | }, {
|
| 112 | name: 'Example Lists',
|
| 113 | selected: true,
|
| 114 | select: function() {
|
| 115 | window.location.href = 'lists.html';
|
| 116 | }
|
| 117 | }]);
|
| 118 |
|
| 119 | page.set('listitems', [{
|
| 120 | label: 'France',
|
| 121 | country: true,
|
| 122 | items: [{
|
| 123 | label: 'Alsace',
|
| 124 | area: true,
|
| 125 | items: [{
|
| 126 | department: true,
|
| 127 | label: 'Bas-Rhin',
|
| 128 | items: [{
|
| 129 | label: 'Haguenau-Wissembourg',
|
| 130 | canton: true
|
| 131 | }, {
|
| 132 | label: 'Molsheim',
|
| 133 | canton: true
|
| 134 | }, {
|
| 135 | label: 'Saverne',
|
| 136 | canton: true
|
| 137 | }, {
|
| 138 | label: 'Sélestat-Erstein',
|
| 139 | canton: true
|
| 140 | }, {
|
| 141 | label: 'Strasbourg',
|
| 142 | canton: true
|
| 143 | }]
|
| 144 | }, {
|
| 145 | department: true,
|
| 146 | label: 'Haut-Rhin'
|
| 147 | }]
|
| 148 | }, {
|
| 149 | label: 'Aquitaine',
|
| 150 | area: true
|
| 151 | }, {
|
| 152 | label: 'Auvergne',
|
| 153 | area: true
|
| 154 | }, {
|
| 155 | label: 'Basse-Normandie',
|
| 156 | area: true
|
| 157 | }, {
|
| 158 | label: 'Bourgogne',
|
| 159 | area: true
|
| 160 | }, {
|
| 161 | label: 'Bretagne',
|
| 162 | area: true
|
| 163 | }, {
|
| 164 | label: 'Centre',
|
| 165 | area: true
|
| 166 | }, {
|
| 167 | label: 'Champagne-Ardenne',
|
| 168 | area: true
|
| 169 | }, {
|
| 170 | label: 'Corse',
|
| 171 | area: true
|
| 172 | }, {
|
| 173 | label: 'Franche-Comté',
|
| 174 | area: true
|
| 175 | }, {
|
| 176 | label: 'Guadeloupe',
|
| 177 | area: true
|
| 178 | }, {
|
| 179 | label: 'Guyane',
|
| 180 | area: true
|
| 181 | }, {
|
| 182 | label: 'Haute-Normandie',
|
| 183 | area: true
|
| 184 | }, {
|
| 185 | label: 'Île-de-France',
|
| 186 | area: true,
|
| 187 | items: [{
|
| 188 | label: '75 - Paris',
|
| 189 | department: true,
|
| 190 | items: [{
|
| 191 | label: 'Paris',
|
| 192 | canton: true
|
| 193 | }]
|
| 194 | }, {
|
| 195 | label: '77 - Seine-et-Marne',
|
| 196 | department: true,
|
| 197 | items: [{
|
| 198 | label: 'Fontainebleau',
|
| 199 | canton: true
|
| 200 | }, {
|
| 201 | label: 'Meaux',
|
| 202 | canton: true
|
| 203 | }, {
|
| 204 | label: 'Melun',
|
| 205 | canton: true
|
| 206 | }, {
|
| 207 | label: 'Provins',
|
| 208 | canton: true
|
| 209 | }, {
|
| 210 | label: 'Torcy',
|
| 211 | canton: true
|
| 212 | }]
|
| 213 | }, {
|
| 214 | label: '78 - Yvelines',
|
| 215 | department: true,
|
| 216 | items: [{
|
| 217 | label: 'Mantes-la-Jolie',
|
| 218 | canton: true
|
| 219 | }, {
|
| 220 | label: 'Rambouillet',
|
| 221 | canton: true
|
| 222 | }, {
|
| 223 | label: 'Saint-Germain-en-Laye',
|
| 224 | canton: true
|
| 225 | }, {
|
| 226 | label: 'Versailles',
|
| 227 | canton: true
|
| 228 | }]
|
| 229 | }, {
|
| 230 | label: '91 - Essonne',
|
| 231 | department: true
|
| 232 | }, {
|
| 233 | label: '92 - Hauts-de-Seine',
|
| 234 | department: true
|
| 235 | }, {
|
| 236 | label: '93 - Seine-Saint-Denis',
|
| 237 | department: true
|
| 238 | }, {
|
| 239 | label: '94 - Val-de-Marne',
|
| 240 | department: true
|
| 241 | }, {
|
| 242 | label: '95 - Val-d\'Oise',
|
| 243 | department: true
|
| 244 | }]
|
| 245 | }, {
|
| 246 | label: 'La Réunion',
|
| 247 | area: true
|
| 248 | }, {
|
| 249 | label: 'Languedoc-Roussillon',
|
| 250 | area: true
|
| 251 | }, {
|
| 252 | label: 'Limousin',
|
| 253 | area: true
|
| 254 | }, {
|
| 255 | label: 'Lorraine',
|
| 256 | area: true
|
| 257 | }, {
|
| 258 | label: 'Martinique',
|
| 259 | area: true
|
| 260 | }, {
|
| 261 | label: 'Mayotte',
|
| 262 | area: true
|
| 263 | }, {
|
| 264 | label: 'Midi-Pyrénées',
|
| 265 | area: true
|
| 266 | }, {
|
| 267 | label: 'Nord-Pas-de-Calais',
|
| 268 | area: true
|
| 269 | }, {
|
| 270 | label: 'Pays de la Loire',
|
| 271 | area: true
|
| 272 | }, {
|
| 273 | label: 'Picardie',
|
| 274 | area: true
|
| 275 | }, {
|
| 276 | label: 'Poitou-Charentes',
|
| 277 | area: true
|
| 278 | }, {
|
| 279 | label: 'Provence-Alpes-Côte d\'Azur',
|
| 280 | area: true
|
| 281 | }, {
|
| 282 | label: 'Rhône-Alpes',
|
| 283 | area: true
|
| 284 | }]
|
| 285 | }, {
|
| 286 | label: 'Austria',
|
| 287 | country: true
|
| 288 | }, {
|
| 289 | label: 'Belgium',
|
| 290 | country: true
|
| 291 | }, {
|
| 292 | label: 'Bulgaria',
|
| 293 | country: true
|
| 294 | }, {
|
| 295 | label: 'Croatia',
|
| 296 | country: true
|
| 297 | }, {
|
| 298 | label: 'Cyprus',
|
| 299 | country: true
|
| 300 | }, {
|
| 301 | label: 'Czech Republic',
|
| 302 | country: true
|
| 303 | }, {
|
| 304 | label: 'Denmark',
|
| 305 | country: true
|
| 306 | }, {
|
| 307 | label: 'Estonia',
|
| 308 | country: true
|
| 309 | }, {
|
| 310 | label: 'Finland',
|
| 311 | country: true
|
| 312 | }, {
|
| 313 | label: 'France',
|
| 314 | country: true
|
| 315 | }, {
|
| 316 | label: 'Germany',
|
| 317 | country: true
|
| 318 | }, {
|
| 319 | label: 'Greece',
|
| 320 | country: true
|
| 321 | }, {
|
| 322 | label: 'Hungary',
|
| 323 | country: true
|
| 324 | }, {
|
| 325 | label: 'Ireland',
|
| 326 | country: true
|
| 327 | }, {
|
| 328 | label: 'Italy',
|
| 329 | country: true
|
| 330 | }, {
|
| 331 | label: 'Latvia',
|
| 332 | country: true
|
| 333 | }, {
|
| 334 | label: 'Lithuania',
|
| 335 | country: true
|
| 336 | }, {
|
| 337 | label: 'Luxembourg',
|
| 338 | country: true
|
| 339 | }, {
|
| 340 | label: 'Malta',
|
| 341 | country: true
|
| 342 | }, {
|
| 343 | label: 'Netherlands',
|
| 344 | country: true
|
| 345 | }, {
|
| 346 | label: 'Poland',
|
| 347 | country: true
|
| 348 | }, {
|
| 349 | label: 'Portugal',
|
| 350 | country: true
|
| 351 | }, {
|
| 352 | label: 'Romania',
|
| 353 | country: true
|
| 354 | }, {
|
| 355 | label: 'Slovakia',
|
| 356 | country: true
|
| 357 | }, {
|
| 358 | label: 'Slovenia',
|
| 359 | country: true
|
| 360 | }, {
|
| 361 | label: 'Spain',
|
| 362 | country: true
|
| 363 | }, {
|
| 364 | label: 'Sweden',
|
| 365 | country: true
|
| 366 | }, {
|
| 367 | label: 'United Kingdom',
|
| 368 | country: true
|
| 369 | }]);
|
| 370 |
|
| 371 | page.set('onloaded', function() {
|
| 372 | $('.example-mask').remove();
|
| 373 | });
|
| 374 |
|
| 375 | page.require();
|
| 376 | });
|
| 377 |
|
| 378 | })();
|
| 379 | </script>
|
| 380 | </body>
|
| 381 | </html>
|