Skip to content

Commit df56138

Browse files
author
Olivier Giulieri
committed
Made the demo a SPA.
 + cleanups.
1 parent 0172e7b commit df56138

File tree

7 files changed

+124
-328
lines changed

7 files changed

+124
-328
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ evolutility's views have a Backbone model (to define the data) and also a UI-mod
2626
Evolutility provides 3 types of view
2727
* Views for one model: View, Edit, Mini (quick edit), JSON.
2828
* Views for a collection: List, Badges, Charts.
29-
* Views for actions on one record or a collection: Export, Filter (will add later Dashboards, Mass update, Clone...).
29+
* Views for actions on one model or a collection: Export, Filter (will add later Dashboards, Mass update, Clone...).
3030

3131
Web demo of [all views](http://evoluteur.github.io/evolutility/index.html)
3232

‎demo/SinglePageApp.html‎

Lines changed: 0 additions & 67 deletions
This file was deleted.

‎demo/contact.html‎

Lines changed: 0 additions & 65 deletions
This file was deleted.

‎demo/index.html‎

Lines changed: 88 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,18 @@
44
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
55
<meta name="viewport" content="width=device-width,initial-scale=1">
66

7+
<meta name="keywords" content="open source metadata UI SPA Backbone View Model Bootstrap" />
8+
<meta name="description" content="Evolutility :: Demo Single Page App" /></head>
9+
710
<link href="../dist/css/vendors.min.css" rel="stylesheet" />
811
<link href="../dist/css/demo.css" rel="stylesheet" />
912
<link href="../dist/css/evolutility.css" rel="stylesheet" />
1013

14+
<script src="demo-ui.min.js" type="text/javascript"></script>
1115
<script src="../dist/vendors.min.js" type="text/javascript"></script>
1216
<script src="../dist/evolutility.js" type="text/javascript"></script>
1317

14-
<script src="../js/demo.js" type="text/javascript"></script>
15-
<script src="demo-ui.min.js" type="text/javascript"></script>
16-
17-
<title>demos</title>
18+
<title id="headTitle">Evolutility.js Demo</title>
1819
</head>
1920

2021
<body>
@@ -27,49 +28,105 @@
2728
<li><a href="https://github.com/evoluteur/evolutility" target="_new">GitHub</a></li>
2829
</ul>
2930
<ul class="evo-head-links2">
30-
<li><a href="todo.html">todo</a></li>
31-
<li><a href="contact.html">addressbook</a></li>
32-
<li><a href="winecellar.html">wine cellar</a></li>
33-
<li><a href="test.html">test</a></li>
31+
<li><a href="#todo/badges" data-id="todo">todo</a></li>
32+
<li><a href="#contact" data-id="contact">addressbook</a></li>
33+
<li><a href="#winecellar" data-id="winecellar">wine cellar</a></li>
3434
</ul>
3535
<div class="clearfix"></div>
3636
</div>
3737

3838
<div class="evo-title2">
39-
<h1 id="title">Demos</h1>
39+
<h1 id="title">Demo</h1>
4040
</div>
4141

42-
<div class="evo-content">
42+
<div class="evo-content2">
43+
44+
<div id="evol" class="">
4345

44-
<p>These sample applications are not anything you haven't seen before.
45-
The interesting thing is that these different apps are in fact the same code with different UI-models
46-
and it did not require any hand coded Javascript or CSS to build them.
47-
</p>
46+
<p><br/>These sample applications are not anything you haven't seen before.
47+
The interesting thing is that these different apps are in fact the same code with different UI-models
48+
and it did not require any hand coded Javascript or CSS to build them.
49+
</p>
4850

49-
<ul class="">
50-
<li><a href="todo.html"><img src="pix/todo.gif" class="evo-icon-16">To Do</a></li>
51-
<li><a href="contact.html"><img src="pix/contact.gif" class="evo-icon-16">AddressBook</a></li>
52-
<li><a href="winecellar.html"><img src="pix/wine.gif" class="evo-icon-16">Wine cellar</a></li>
53-
</ul>
51+
<ul class="">
52+
<li><a href="#todo/badges" data-id="todo"><img src="pix/todo.gif" class="evo-icon-16">To Do</a></li>
53+
<li><a href="#contact/list" data-id="contact"><img src="pix/contact.gif" class="evo-icon-16">AddressBook</a></li>
54+
<li><a href="#winecellar/list" data-id="wine"><img src="pix/wine.gif" class="evo-icon-16">Wine cellar</a></li>
55+
</ul>
5456

55-
<p>For each Backbone model, a single UI-model defines all views.
56-
<br/>See the UI model for the sample apps: <a href="javascript:showUIdef2(todo_ui)">To Do</a>,
57-
<a href="javascript:showUIdef2(contacts_ui)">Addressbook</a>,
58-
<a href="javascript:showUIdef2(winecellar_ui)">Wine Cellar</a>.
59-
<small id="hide_def" style="display:none;"><a href="javascript:showUIdef2no(winecellar_ui)">[Hide]</a></small></p>
60-
</p>
61-
<div style="display:none;" id="uimodel"></div>
57+
<p>For each Backbone model, a single UI-model defines all views.
58+
See the UI model for the sample apps: <a href="javascript:showUIdef2(todo_ui)">To Do</a>,
59+
<a href="javascript:showUIdef2(contacts_ui)">Addressbook</a>,
60+
<a href="javascript:showUIdef2(winecellar_ui)">Wine Cellar</a>.
61+
<small id="hide_def" style="display:none;"><a href="javascript:showUIdef2no(winecellar_ui)">[Hide]</a></small></p>
62+
</p>
63+
<div style="display:none;" id="uimodel"></div>
6264

63-
<p>These examples can also all run as a <a href="SinglePageApp.html">Single Page App</a> with routing.</p>
65+
<p>The data for these demos is stored in your browser local storage
66+
(using <a href="https://github.com/jeromegn/Backbone.localStorage" target="bbls">Backbone.localStorage</a>).</p>
6467

65-
<p>The data for these demos is stored in your browser local storage
66-
(using <a href="https://github.com/jeromegn/Backbone.localStorage" target"bbls">Backbone.localStorage</a>).</p>
68+
<p>Evolutility.js is still a work in progress. Only Chrome is fully supported for now.</p>
6769

68-
<p>Evolutility.js is not finished yet. Only Chrome is fully supported for now.</p>
6970

70-
<p><br/>evolutility.js at <a href="https://github.com/evoluteur/evolutility" target="download">GitHub</a></p>
71+
</div>
72+
73+
74+
<div class="clearfix"></div>
7175

7276
</div>
77+
78+
<script>
79+
80+
$(document).ready(function(){
81+
// - create sample data if none is there
82+
createSampleDataIfEmpty(todo_ui, todo_data);
83+
createSampleDataIfEmpty(contacts_ui, contacts_data);
84+
createSampleDataIfEmpty(winecellar_ui, winecellar_data);
85+
86+
// - run shell which set demo
87+
new Evol.Shell({
88+
el:$('#evol'),
89+
uiModelsObj: {
90+
todo: todo_ui,
91+
contact: contacts_ui,
92+
winecellar: winecellar_ui//, test_ui
93+
}
94+
}).render();
95+
});
96+
97+
function showUIdef2(uiModel){
98+
var $ui=$('#uimodel');
99+
$ui.html(Evol.UI.input.textMJSON('uimodel2', uiModel, 10))
100+
.slideDown();
101+
$('#hide_def').show();
102+
}
103+
104+
function showUIdef2no(){
105+
$('#uimodel').slideUp();
106+
$('#hide_def').hide();
107+
}
108+
109+
function createSampleDataIfEmpty(uiModel, data){
110+
var lc = new Backbone.LocalStorage('evol-'+uiModel.id),
111+
M = Backbone.Model.extend({
112+
localStorage: lc
113+
}),
114+
Ms = Backbone.Collection.extend({
115+
model: M,
116+
localStorage: lc
117+
}),
118+
ms = new Ms();
119+
ms.fetch({
120+
success: function(collection){
121+
// TODO remove sample data
122+
if(collection.length===0){
123+
Evol.UI.insertCollection(collection, data);
124+
}
125+
}
126+
});
127+
}
128+
129+
</script>
73130
<div class="footer">&#169; 2014 Olivier Giulieri</div>
74131
</body>
75132

‎demo/todo.html‎

Lines changed: 0 additions & 65 deletions
This file was deleted.

0 commit comments

Comments
 (0)