evolutility - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

bower.json

 {
   "name": "evolutility",
-  "version": "0.3.3",
+  "version": "0.5",
   "dependencies": {
@@ -9,2 +9,3 @@ "jquery": "2.1.1",
     "underscore": "1.8.2",
+    "d3": "3.5.5",
     "bootstrap": "v3.3.2",
@@ -11,0 +12,0 @@ "bootstrap-datepicker": "1.3.1",

demo/demo-data.min.js

@@ -1,2 +0,2 @@
-/* evolutility v0.4 sample UI-models and data: todo, addressbook, wine cellar. */
- var uiModels=uiModels||{};uiModels.todo_data=[{id:"1",title:"Add routing to Evolutility",priority:"2",category:"others",complete:!1,notes:"Use Backbone router."},{id:"2",title:"Fix open bugs",duedate:"2014-07-25",priority:"3",category:"work",complete:!1,notes:"bla bla"},{id:"3",title:"Testing App",duedate:"2014-06-11",priority:"3",category:"work",complete:!1,notes:"test"},{id:"4",title:"Prepare demo",duedate:"2014-05-12",priority:"1",category:"work",complete:!1,notes:"Check this out"},{id:"5",title:"Test latest code",priority:"5",category:"misc",complete:!0,notes:"notes for my test todo task."},{id:"6",title:"Car wash",priority:"4",category:"work",complete:!1},{id:"7",title:"Watch Inception",duedate:"2014-01-10",priority:"5",category:"fun",complete:!0},{id:"8",title:"Test TODO",duedate:"2015-01-01",priority:"1",category:"work",complete:!0,notes:"Test TODO "},{id:"9",title:"Car wash",priority:"4",category:"work",complete:!1},{id:"10",title:"French translation",priority:"4",category:"work"},{id:"11",title:"Italian translation",priority:"4",category:"work"},{id:"12",title:"Chinese translation",priority:"4",category:"work"},{id:"13",title:"Japanese translation",priority:"4",category:"work"},{id:"14",title:"German translation",priority:"4",category:"work"},{id:"15",title:"Russian translation",priority:"4",category:"work"},{id:"16",title:"Polish translation",priority:"4",category:"work"},{id:"17",title:"Klingon translation",priority:"4",category:"work"},{id:"18",title:"Code optimization",duedate:"2015-01-01",priority:"4",category:"work",complete:!1},{id:"19",title:"Setup demo server",priority:"2",category:"work",complete:!1},{id:"20",title:"Add sample data",duedate:"2014-04-23",priority:"3",category:"work",complete:!0},{id:"21",title:"Make proposal",priority:"2",category:"misc",complete:!1},{id:"22",title:"Checkout cool restaurant",priority:"3",category:"home",complete:!1},{id:"23",title:"Kill the vampires",priority:"3",category:"others"}];var uiModels=uiModels||{};uiModels.contact_data=[{id:"1",lastname:"Smallwood",firstname:"Diane",jobtitle:"Director",company:"EasyDoesIt",email:"[e-mail]",phone:"415 234 4323",phonehome:"415 378 3577",phonecell:"415 135 3454",web:"http://EasyDoesIt.com",address1:"12, Liverpool Street",city:"San Francisco",state:"CA",zip:"94123",country:"US",category:"4"},{id:"2",lastname:"Shackleford ",firstname:"Rusty ",email:"[e-mail]",address1:"123 Main Street",city:"Dallas",state:"TX",country:"US",category:"3"},{id:"3",lastname:"Inoue",firstname:"Akemi",jobtitle:"QA Engineer",company:"Testing evol-utility",email:"[e-mail]",phone:"423 233 3523",phonehome:"423 523 4523",address1:"5665 Poplar Street",city:"San Jose",state:"CA",zip:"93112",country:"US",category:"3"},{id:"4",lastname:"Reina Moyano",firstname:"Sergio",jobtitle:"Mr",company:"Innova Creaciones",email:"[e-mail]",phone:"411 444 2222",phonehome:"411 576 4566",phonecell:"411 579 4566",fax:"411 444 2224",address1:"654 Union Street",address2:"#203",city:"San Francisco",state:"CA",zip:"94567",country:"US",category:"3"},{id:"5",lastname:"Paulus",firstname:"Henry",company:"TEST the TEST",phone:"652 491 2345",address1:"1234 That Street",city:"San Mateo",state:"CA",zip:"94401",country:"US",category:"2"},{id:"6",lastname:"Dupond",firstname:"Patrick",jobtitle:"Sales Manager",company:"Au Bon Pain",email:"[e-mail]",phone:"45 456 414 45",url:"http://aubonpain.fr",city:"Paris",country:"FR",category:"1"},{id:"12",lastname:"Giulieri",firstname:"Olivier",company:"Evolutility",city:"San Mateo",email:"[e-mail]",url:"http://www.evol-utility.org"},{id:"14",lastname:"Martin",firstname:"Mary",jobtitle:"President",company:"Acme Corp",email:"[e-mail]",phone:"444 580 7007",phonehome:"449 512 0230",phonecell:"589 499 2065",address1:"123 Redville Lane",city:"Musnonville",state:"NH",zip:"03434",category:"1"},{id:"15",lastname:"Munar",firstname:"Roman",jobtitle:"Mr",company:"Informatics",email:"[e-mail]",phone:"322 234 5143",phonehome:"322 784 3453",phonecell:"322 538 2568",fax:"322 234 5345",url:"http://roman.munar.com",address1:"Washington",address2:"Buendia",city:"Makati",state:"",zip:"1300",country:"PH",category:"3"},{id:"16",lastname:"Smith",firstname:"George",company:"Blabla",email:"[e-mail]",web:"http://www.blabla.com",phone:"415 123 1234",phonecell:"415 789 4556",address1:"768 5th Ave",city:"San Francisco",state:"CA",zip:"93123",country:"US",category:"1"},{id:"17",lastname:"Kumar",firstname:"Madhukar",jobtitle:"CEO",company:"CoolWeb",email:"[e-mail]",web:"http://www.coolweb.com",phone:"7225 8252",phonecell:"7325 8245",address1:"434 Cool Place",city:"Bengaluru",country:"IN",category:"4"}];var uiModels=uiModels||{};uiModels.winecellar_data=[{name:"Macrostie",label_img:"wine/macrostie.gif",vintage:2008,winery:"Mc Williams",bsize:"750",type:"red",price:20,grape:"chard",appellation:"",country:"US",region:"Sonoma",area:"",buying_date:"2008-05-12",value:24,purchased:24,remaining:16,notes:"",drink_from:2009,drink_to:2020,peak_from:2014,peak_to:2017,meal:"",score:"",score_parker:null,score_winespectator:null,comments:"",degustations:[{ddate:"2008-05-08",robe:"light",nose:"fruity",taste:"fruity",notes:"too young"},{ddate:"2011-03-10",robe:"light",nose:"light fruit",taste:"",notes:""},{ddate:"2012-12-12",robe:"light",nose:"light fruit",taste:"",notes:"Great"}]},{name:"Château d'Yquem",label_img:"wine/yquem.gif",vintage:2012,winery:"Lur Saluces",bsize:"750",type:"white",grape:"sem",price:399,value:460,drink_from:2012,drink_to:2017,purchased:3,remaining:1,country:"FR",region:"Bordeaux",area:"Sauternes and Barsac",score_parker:92,score_winespectator:94,degustations:[{ddate:"2012-04-23",robe:"golden",nose:"fruity",taste:"incredible"},{ddate:"2013-24-12",robe:"clear",nose:"strong and sweet",taste:"outstanding"}]},{name:"Château St Jean",label_img:"wine/stjean.gif",vintage:2008,winery:"Ch St Jean",bsize:"750",type:"red",price:34,value:32,purchased:12,remaining:5,drink_from:2009,grape:"shiraz",country:"FR",score_parker:68,score_winespectator:72,degustations:[{ddate:"2013-24-12",robe:"thick",nose:"strong",taste:"good",notes:"Great w/ beef."}]},{name:"Vine Cliff",label_img:"wine/vinecliff.gif",vintage:2013,winery:"Vine Cliff",bsize:"750",type:"red",price:28,drink_from:2014,grape:"merlo",country:"US",score_parker:67,score_winespectator:62,degustations:[{ddate:"2013-05-05",robe:"light",nose:"strong",taste:"good"},{ddate:"2013-08-05",robe:"light",nose:"strong",taste:"good"},{ddate:"2013-08-18",robe:"light",nose:"strong",taste:"ok"}]},{name:"Château Montelena",label_img:"wine/montelena.gif",vintage:2005,winery:"Château Montelena",bsize:"1500",grape:"merlo",type:"red",drink_from:2005,region:"California",price:62,value:32,purchased:12,remaining:8,country:"US",score_parker:64,score_winespectator:64,degustations:[{ddate:"2012-05-05",nose:"strong+",taste:"excellent"},{ddate:"2013-05-05",robe:"rich",nose:"strong",taste:"very good"}]}];var uiModels=uiModels||{};uiModels.comics_data=[{title:"Do Androids Dream Of Electric Sheep?",genre:"sf",authors:"Philip K Dick, Tony Parker",complete:!0,finished:!0,have:"1-6",haveNb:6,serieNb:6,language:"EN",notes:"",pix:"comics/androitsheep1.jpeg"},{title:"Saga",genre:"sf",authors:"Brian K. Vaughan and Fiona Staples",complete:!1,finished:!1,have:"1-3",haveNb:3,serieNb:4,language:"EN",notes:"",pix:"comics/saga1.jpeg"},{title:"Alim le Tanneur",genre:"hf",authors:"Wilfrid Lupano, Virginie Augustin",complete:!0,finished:!0,have:"1-4",haveNb:4,serieNb:4,language:"FR",notes:"",pix:"comics/alim1.jpg"},{title:"La Caste des Meta-Barons",genre:"sf",authors:"Alexandro Jodorowsky et Juan Gimenez",complete:!1,finished:!0,have:"1-5",haveNb:5,serieNb:8,language:"FR",notes:"",pix:"comics/metabaron1.jpeg"},{title:"Garulfo",genre:"humor",have:"1-6",haveNb:6,serieNb:6,lang:"FR",authors:"Alain Ayroles et Bruno Maïorana",complete:!0,finished:!0,notes:"",pix:"comics/garulfo1.jpeg"},{title:"Lanfeust de Troy",genre:"hf",authors:"Didier Tarquin, Christophe Arleston",complete:!0,finished:!0,have:"1-8",haveNb:8,serieNb:8,language:"FR",notes:"",pix:"comics/lanfeust1.jpeg"},{title:"Salammbo",genre:"fantasy",authors:"Philippe Druillet et Gustave Flaubert",complete:!0,finished:!0,have:"1-3",haveNb:3,serieNb:3,language:"FR",notes:"",pix:"comics/salammbo1.jpeg"},{title:"Blacksad",genre:"pol",authors:"Juan Díaz Canales et Juanjo Guarnido",complete:!0,finished:!1,have:"1-4",haveNb:4,serieNb:4,language:"FR",notes:"",pix:"comics/blacksad1.jpeg"},{title:"Carmen McCallum",genre:"sf",authors:"Fred Duval et Gess",complete:!1,finished:!1,have:"1-5",haveNb:5,serieNb:12,language:"FR",notes:"",pix:"comics/carmenmc1.jpeg"},{title:"Code McCallum",genre:"sf",authors:"Fred Duval et Didier Cassegrain",complete:!0,finished:!0,have:"5",haveNb:5,serieNb:5,language:"FR",notes:"",pix:"comics/codemc1.jpeg"},{title:"La Nef des Fous",genre:"nocat",authors:"Turf",complete:!0,finished:!0,have:"1-7",haveNb:7,serieNb:7,language:"FR",notes:"",pix:"comics/neffous1.jpeg"},{title:"La Quete de l'Oiseau du Temps",genre:"hf",authors:"Serge Le Tendre et Régis Loisel",complete:!0,finished:!0,have:"1-4",haveNb:4,serieNb:4,language:"FR",notes:"",pix:"comics/quete1.jpeg"},{title:"Le Lama Blanc",genre:"adv",authors:"Alejandro Jodorowsky et Georges Bess",complete:!0,finished:!0,have:"1-6",haveNb:6,serieNb:6,language:"FR",notes:"",pix:"comics/lama1.jpeg"},{title:"Le Surfer d'Argent",genre:"sh",authors:"Moebius, Stan Lee",complete:!0,finished:!0,have:"1",haveNb:1,serieNb:1,language:"FR",notes:"",pix:"comics/surfer.jpeg"},{title:"L'Incal",genre:"sf",authors:"Moebius et Alexandro Jodorowsky",complete:!0,finished:!0,have:"1-6",haveNb:6,serieNb:6,language:"FR",notes:"",pix:"comics/incal1.jpeg"},{title:"Ou le regard ne porte pas",genre:"",authors:"Pont et Abolin",complete:!0,finished:!0,have:"1,2",haveNb:2,serieNb:2,language:"FR",notes:"",pix:"comics/regard1.jpeg"},{title:"Péma Ling",genre:"hist",authors:"Georges Bess",complete:!0,finished:!0,have:"1-5",haveNb:5,serieNb:5,language:"FR",notes:"",pix:"comics/pemaling1.jpeg"},{title:"Sky Doll",genre:"fantasy",authors:"Alessandro Barbucci et Barbara Canepa",complete:!0,finished:!0,have:"1-3",haveNb:3,serieNb:3,language:"FR",notes:"",pix:"comics/skydoll1.jpeg"},{title:"Ronin",genre:"sf",authors:"Franck Miller",complete:!0,finished:!0,have:"",haveNb:null,serieNb:null,language:"EN",notes:"",pix:"comics/ronin.jpeg"},{title:"Rising Stars",genre:"sh",authors:"Joe Michael Straczynski, Christian Zanier, Keu Cha et Ken Lashley",complete:!0,finished:!0,have:"1",haveNb:1,serieNb:1,language:"EN",notes:"",pix:"comics/risingstars.jpeg"},{title:"Le Fleau des Dieux",genre:"sf",authors:"Valérie Mangin et Aleksa Gajic",complete:!0,finished:!0,have:"1-6",haveNb:6,serieNb:6,language:"FR",notes:"",pix:"comics/fleaudieux1.jpeg"},{title:"The Shaolin Cowboy",genre:"fantasy",authors:"",complete:!0,finished:!0,have:"1",haveNb:1,serieNb:1,language:"EN",notes:"",pix:"comics/shaolin-cowboy.jpeg"},{title:"Tales of an Imperfect Future",genre:"sf",authors:"Alfonso Font",complete:!0,finished:!0,have:"1",haveNb:1,serieNb:1,language:"EN",notes:"",pix:"comics/imperfect-future.jpeg"},{title:"Ghost in the Shell",genre:"sf",authors:"Masamune Shirow",complete:!1,finished:!0,have:"1",haveNb:1,serieNb:2,language:"EN",notes:"",pix:"comics/ghost-in-the-shell.jpeg"}];
+/* evolutility v0.5 sample UI-models and data: todo, addressbook, wine cellar. */
+ var uiModels=uiModels||{};uiModels.todo_data=[{id:"1",title:"Release Evolutility v1",priority:"3",category:"others",complete:!1,description:"10 generic views + a ui-modeling language.",notes:""},{id:"2",title:"Fix open bugs",duedate:"2014-07-25",priority:"3",category:"work",complete:!1,description:"bla bla"},{id:"3",title:"Testing App",duedate:"2014-06-11",priority:"3",category:"work",complete:!1,description:"test"},{id:"4",title:"Prepare demo",duedate:"2014-05-12",priority:"1",category:"work",complete:!1,description:"Check this out"},{id:"5",title:"Test latest code",priority:"5",category:"misc",complete:!0,description:"notes for my test todo task."},{id:"6",title:"Car wash",priority:"4",category:"work",complete:!1},{id:"7",title:"Watch Inception",duedate:"2014-01-10",priority:"5",category:"fun",complete:!0},{id:"8",title:"Test TODO",duedate:"2015-01-01",priority:"1",category:"work",complete:!0,description:"Test TODO "},{id:"9",title:"Car wash",priority:"4",category:"work",complete:!1},{id:"10",title:"French translation",priority:"4",category:"work"},{id:"11",title:"Italian translation",priority:"4",category:"work"},{id:"12",title:"Chinese translation",priority:"4",category:"work"},{id:"13",title:"Japanese translation",priority:"4",category:"work"},{id:"14",title:"German translation",priority:"4",category:"work"},{id:"15",title:"Russian translation",priority:"4",category:"work"},{id:"16",title:"Polish translation",priority:"4",category:"work"},{id:"17",title:"Klingon translation",priority:"4",category:"work"},{id:"18",title:"Code optimization",duedate:"2015-01-01",priority:"4",category:"work",complete:!1},{id:"19",title:"Setup demo server",priority:"2",category:"work",complete:!1},{id:"20",title:"Add sample data",duedate:"2014-04-23",priority:"3",category:"work",complete:!0},{id:"21",title:"Make proposal",priority:"2",category:"misc",complete:!1},{id:"22",title:"Checkout cool restaurant",priority:"3",category:"home",complete:!1},{id:"23",title:"Kill the vampires",priority:"3",category:"others"}];var uiModels=uiModels||{};uiModels.contact_data=[{id:"1",lastname:"Smallwood",firstname:"Diane",jobtitle:"Director",company:"EasyDoesIt",email:"[e-mail]",phone:"415 234 4323",phonehome:"415 378 3577",phonecell:"415 135 3454",web:"http://EasyDoesIt.com",address1:"12, Liverpool Street",city:"San Francisco",state:"CA",zip:"94123",country:"US",category:"4"},{id:"2",lastname:"Shackleford ",firstname:"Rusty ",email:"[e-mail]",address1:"123 Main Street",city:"Dallas",state:"TX",country:"US",category:"3"},{id:"3",lastname:"Inoue",firstname:"Akemi",jobtitle:"QA Engineer",company:"Testing evol-utility",email:"[e-mail]",phone:"423 233 3523",phonehome:"423 523 4523",address1:"5665 Poplar Street",city:"San Jose",state:"CA",zip:"93112",country:"US",category:"3"},{id:"4",lastname:"Reina Moyano",firstname:"Sergio",jobtitle:"Mr",company:"Innova Creaciones",email:"[e-mail]",phone:"411 444 2222",phonehome:"411 576 4566",phonecell:"411 579 4566",fax:"411 444 2224",address1:"654 Union Street",address2:"#203",city:"San Francisco",state:"CA",zip:"94567",country:"US",category:"3"},{id:"5",lastname:"Paulus",firstname:"Henry",company:"TEST the TEST",phone:"652 491 2345",address1:"1234 That Street",city:"San Mateo",state:"CA",zip:"94401",country:"US",category:"2"},{id:"6",lastname:"Dupond",firstname:"Patrick",jobtitle:"Sales Manager",company:"Au Bon Pain",email:"[e-mail]",phone:"45 456 414 45",url:"http://aubonpain.fr",city:"Paris",state:"",country:"FR",category:"1"},{id:"7",lastname:"Giulieri",firstname:"Olivier",company:"Evolutility",city:"San Mateo",state:"",email:"[e-mail]",url:"http://www.evol-utility.org"},{id:"8",lastname:"Martin",firstname:"Mary",jobtitle:"President",company:"Acme Corp",email:"[e-mail]",phone:"444 580 7007",phonehome:"449 512 0230",phonecell:"589 499 2065",address1:"123 Redville Lane",city:"Musnonville",state:"NH",zip:"03434",category:"1"},{id:"9",lastname:"Munar",firstname:"Roman",jobtitle:"Mr",company:"Informatics",email:"[e-mail]",phone:"322 234 5143",phonehome:"322 784 3453",phonecell:"322 538 2568",fax:"322 234 5345",url:"http://roman.munar.com",address1:"Washington",address2:"Buendia",city:"Makati",state:"",zip:"1300",country:"PH",category:"3"},{id:"10",lastname:"Smith",firstname:"George",company:"Blabla",email:"[e-mail]",web:"http://www.blabla.com",phone:"415 123 1234",phonecell:"415 789 4556",address1:"768 5th Ave",city:"San Francisco",state:"CA",zip:"93123",country:"US",category:"1"},{id:"11",lastname:"Kumar",firstname:"Madhukar",jobtitle:"CEO",company:"CoolWeb",email:"[e-mail]",web:"http://www.coolweb.com",phone:"7225 8252",phonecell:"7325 8245",address1:"434 Cool Place",city:"Bengaluru",state:"",country:"IN",category:"4"},{id:"12",lastname:"Cheng",firstname:"Chris",jobtitle:"CTO",company:"MyGreatCorporation",email:"[e-mail]",phonecell:"650 234 8245",city:"Sunnyvalle",state:"CA",country:"US",category:"4"}];var uiModels=uiModels||{};uiModels.winecellar_data=[{name:"Macrostie",label_img:"wine/macrostie.gif",vintage:2008,winery:"Mc Williams",bsize:"750",type:"red",price:20,grape:"chard",country:"US",region:"Sonoma",buying_date:"2008-05-12",value:24,purchased:24,remaining:16,drink_from:2009,drink_to:2020,peak_from:2014,peak_to:2017,degustations:[{ddate:"2008-05-08",robe:"light",nose:"fruity",taste:"fruity",notes:"too young"},{ddate:"2011-03-10",robe:"light",nose:"light fruit",taste:"",notes:""},{ddate:"2012-12-12",robe:"light",nose:"light fruit",taste:"",notes:"Great"}]},{name:"Château d'Yquem",label_img:"wine/yquem.gif",vintage:2012,winery:"Lur Saluces",bsize:"750",type:"white",grape:"sem",buying_date:"2012-12-12",price:399,value:460,drink_from:2012,drink_to:2017,purchased:3,remaining:1,country:"FR",region:"Bordeaux",area:"Sauternes and Barsac",score_parker:92,score_winespectator:94,degustations:[{ddate:"2013-04-23",robe:"golden",nose:"fruity",taste:"incredible"},{ddate:"2013-05-12",robe:"clear",nose:"strong and sweet",taste:"outstanding"}]},{name:"Château St Jean",label_img:"wine/stjean.gif",vintage:2008,winery:"Ch St Jean",bsize:"750",type:"red",price:34,value:32,purchased:12,remaining:5,drink_from:2009,grape:"shiraz",country:"FR",score_parker:68,score_winespectator:72,degustations:[{ddate:"2013-24-12",robe:"thick",nose:"strong",taste:"good",notes:"Great w/ beef."}]},{name:"Vine Cliff",label_img:"wine/vinecliff.gif",vintage:2013,winery:"Vine Cliff",bsize:"750",type:"red",buying_date:"2013-05-05",price:28,drink_from:2014,grape:"merlo",country:"US",score_parker:67,score_winespectator:62,degustations:[{ddate:"2013-05-05",robe:"light",nose:"strong",taste:"good"},{ddate:"2013-08-05",robe:"light",nose:"strong",taste:"good"},{ddate:"2013-08-18",robe:"light",nose:"strong",taste:"ok"}]},{name:"Château Montelena",label_img:"wine/montelena.gif",vintage:2005,winery:"Château Montelena",bsize:"1500",grape:"merlo",type:"red",drink_from:2005,region:"California",price:62,value:32,purchased:12,remaining:8,country:"US",score_parker:64,score_winespectator:64,degustations:[{ddate:"2012-05-05",nose:"strong+",taste:"excellent"},{ddate:"2013-10-22",robe:"rich",nose:"strong",taste:"very good"}]}];var uiModels=uiModels||{};uiModels.comics_data=[{title:"Do Androids Dream Of Electric Sheep?",genre:"sf",authors:"Philip K Dick, Tony Parker",complete:!0,finished:!0,have:"1-6",haveNb:6,serieNb:6,language:"EN",notes:"",pix:"comics/androitsheep1.jpeg"},{title:"Saga",genre:"sf",authors:"Brian K. Vaughan and Fiona Staples",complete:!1,finished:!1,have:"1-3",haveNb:3,serieNb:4,language:"EN",notes:"",pix:"comics/saga1.jpeg"},{title:"Alim le Tanneur",genre:"hf",authors:"Wilfrid Lupano, Virginie Augustin",complete:!0,finished:!0,have:"1-4",haveNb:4,serieNb:4,language:"FR",notes:"",pix:"comics/alim1.jpg"},{title:"La Caste des Meta-Barons",genre:"sf",authors:"Alexandro Jodorowsky et Juan Gimenez",complete:!1,finished:!0,have:"1-5",haveNb:5,serieNb:8,language:"FR",notes:"",pix:"comics/metabaron1.jpeg"},{title:"Garulfo",genre:"humor",have:"1-6",haveNb:6,serieNb:6,lang:"FR",authors:"Alain Ayroles et Bruno Maïorana",complete:!0,finished:!0,notes:"",pix:"comics/garulfo1.jpeg"},{title:"Lanfeust de Troy",genre:"hf",authors:"Didier Tarquin, Christophe Arleston",complete:!0,finished:!0,have:"1-8",haveNb:8,serieNb:8,language:"FR",notes:"",pix:"comics/lanfeust1.jpeg"},{title:"Salammbo",genre:"fantasy",authors:"Philippe Druillet et Gustave Flaubert",complete:!0,finished:!0,have:"1-3",haveNb:3,serieNb:3,language:"FR",notes:"",pix:"comics/salammbo1.jpeg"},{title:"Blacksad",genre:"pol",authors:"Juan Díaz Canales et Juanjo Guarnido",complete:!0,finished:!1,have:"1-4",haveNb:4,serieNb:4,language:"FR",notes:"",pix:"comics/blacksad1.jpeg"},{title:"Carmen McCallum",genre:"sf",authors:"Fred Duval et Gess",complete:!1,finished:!1,have:"1-5",haveNb:5,serieNb:12,language:"FR",notes:"",pix:"comics/carmenmc1.jpeg"},{title:"Code McCallum",genre:"sf",authors:"Fred Duval et Didier Cassegrain",complete:!0,finished:!0,have:"5",haveNb:5,serieNb:5,language:"FR",notes:"",pix:"comics/codemc1.jpeg"},{title:"La Nef des Fous",genre:"nocat",authors:"Turf",complete:!0,finished:!0,have:"1-7",haveNb:7,serieNb:7,language:"FR",notes:"",pix:"comics/neffous1.jpeg"},{title:"La Quete de l'Oiseau du Temps",genre:"hf",authors:"Serge Le Tendre et Régis Loisel",complete:!0,finished:!0,have:"1-4",haveNb:4,serieNb:4,language:"FR",notes:"",pix:"comics/quete1.jpeg"},{title:"Le Lama Blanc",genre:"adv",authors:"Alejandro Jodorowsky et Georges Bess",complete:!0,finished:!0,have:"1-6",haveNb:6,serieNb:6,language:"FR",notes:"",pix:"comics/lama1.jpeg"},{title:"Le Surfer d'Argent",genre:"sh",authors:"Moebius, Stan Lee",complete:!0,finished:!0,have:"1",haveNb:1,serieNb:1,language:"FR",notes:"",pix:"comics/surfer.jpeg"},{title:"L'Incal",genre:"sf",authors:"Moebius et Alexandro Jodorowsky",complete:!0,finished:!0,have:"1-6",haveNb:6,serieNb:6,language:"FR",notes:"",pix:"comics/incal1.jpeg"},{title:"Ou le regard ne porte pas",genre:"",authors:"Pont et Abolin",complete:!0,finished:!0,have:"1,2",haveNb:2,serieNb:2,language:"FR",notes:"",pix:"comics/regard1.jpeg"},{title:"Péma Ling",genre:"hist",authors:"Georges Bess",complete:!0,finished:!0,have:"1-5",haveNb:5,serieNb:5,language:"FR",notes:"",pix:"comics/pemaling1.jpeg"},{title:"Sky Doll",genre:"fantasy",authors:"Alessandro Barbucci et Barbara Canepa",complete:!0,finished:!0,have:"1-3",haveNb:3,serieNb:3,language:"FR",notes:"",pix:"comics/skydoll1.jpeg"},{title:"Ronin",genre:"sf",authors:"Franck Miller",complete:!0,finished:!0,have:"1",haveNb:1,serieNb:1,language:"EN",notes:"",pix:"comics/ronin.jpeg"},{title:"Rising Stars",genre:"sh",authors:"Joe Michael Straczynski, Christian Zanier, Keu Cha et Ken Lashley",complete:!0,finished:!0,have:"1",haveNb:1,serieNb:1,language:"EN",notes:"",pix:"comics/risingstars.jpeg"},{title:"Le Fleau des Dieux",genre:"sf",authors:"Valérie Mangin et Aleksa Gajic",complete:!0,finished:!0,have:"1-6",haveNb:6,serieNb:6,language:"FR",notes:"",pix:"comics/fleaudieux1.jpeg"},{title:"The Shaolin Cowboy",genre:"fantasy",authors:"Geof Darrow and Lana and Andy Wachowski",complete:!0,finished:!0,have:"1",haveNb:1,serieNb:1,language:"EN",notes:"",pix:"comics/shaolin-cowboy.jpeg"},{title:"Tales of an Imperfect Future",genre:"sf",authors:"Alfonso Font",complete:!0,finished:!0,have:"1",haveNb:1,serieNb:1,language:"EN",notes:"",pix:"comics/imperfect-future.jpeg"},{title:"Ghost in the Shell",genre:"sf",authors:"Masamune Shirow",complete:!1,finished:!0,have:"1",haveNb:1,serieNb:2,language:"EN",notes:"",pix:"comics/ghost-in-the-shell.jpeg"}];

demo/demo.js

@@ -12,5 +12,17 @@ /*! ***************************************************************************
 
-//TODO consolidate this code
 var uidef=null;
 
+var ViewDescriptions = {
+ 'browse': {name: 'Browse', desc: 'The "Browse" view shows all fields for viewing (in read only mode). Fields are grouped in panels and tabs.'},
+ 'edit': {name: 'Edit', desc: 'The "Edit" view shows all fields for edition to create or update models. It automatically performs validation based on the UI-model and supports the Master-Details pattern (nested collections). Fields are grouped in panels and tabs.'},
+ 'mini': {name: 'Mini (quick-edit)', desc: 'The "Mini" (quick-edit) view only shows important fields (required or showing as a column in grids). Fields are grouped in a single panel.'},
+ 'json': {name: 'JSON', desc: 'The "JSON" view shows the JSON representation of the data.'},
+ 'list': {name: 'List', desc: 'The "List" view gives a tabular view of a collection with paging.'},
+ 'cards': {name: 'Cards', desc: 'The "Cards" Shows records side by side as cards.'},
+ 'bubbles': {name: 'Bubbles', desc: 'The "Bubbles" view displays the data as bubbles with controls to group them and set their color and size (this view uses D3.js).'},
+ 'charts': {name: 'Charts', desc: 'The "Charts" view draws charts about the collection.'},
+ 'filter': {name: 'Filter', desc: 'The "Filter" view is used to build a structured query to filter a collection.'},
+ 'export': {name: 'Export', desc: 'The "Export" view let\'s you define export options and preview the collection export in different data formats (CSV, TAB, HTML, XML, SQL and JSON).'}
+};
+
 function createSampleDataIfEmpty(entityName){
@@ -40,3 +52,3 @@ var lc = new Backbone.LocalStorage('evol-'+entityName),
     }
-    $('#uimodel').html(Evol.UI.input.textMJSON('uimodel2', uiModel, 10))
+    $('#uimodel').html(Evol.UI.input.textMJSON('uimodel2', uiModel, 12))
         .slideDown();
@@ -49,41 +61,1 @@ $('#hide_def').show();
 }
-function setDemo(uiModel, localStorage, data, style){
-    var M = Backbone.Model.extend({
-            localStorage: new Backbone.LocalStorage(localStorage)
-        }),
-        Ms = Backbone.Collection.extend({
-            model: M,
-            localStorage: new Backbone.LocalStorage(localStorage)
-        });
-
-    var ms = new Ms();
-    ms.fetch({
-        success: function(collection){
-            // TODO remove sample data
-            if(collection.length===0){
-                Evol.UI.insertCollection(collection, data);
-            }
-            var m = ms.at(0),
-                el =$('#evol'),
-                vw = new Evol.ViewToolbar({
-                    el: el,
-                    mode: 'one',
-                    style: style,// || 'panel-primary',
-                    customize:false,
-                    model: m,
-                    modelClass: M,
-                    collection: ms,
-                    collectionClass: Ms,
-                    uiModel: uiModel,
-                    pageSize: 20,
-                    titleSelector: '#title'
-                }).render();
-
-            $('#recs > a').on('click', function(evt){
-                var id=$(evt.currentTarget).index();
-                vw.setModel(ms.get(id));
-            })
-        }
-    });
-
-}

Gruntfile.js

@@ -26,4 +26,3 @@ module.exports = function (grunt) {
                     // D3.js
-                    //'bower_components/d3/d3.js',
-
+                    'bower_components/d3/d3.js',
                     // jQuery & jQuery UI
@@ -44,4 +43,4 @@ 'bower_components/jquery/dist/jquery.js',
                     'bower_components/bootstrap/js/dropdown.js',
-                    //'bower_components/bootstrap/js/tooltip.js',
-                    //'bower_components/bootstrap/js/popover.js',
+                    'bower_components/bootstrap/js/tooltip.js',
+                    'bower_components/bootstrap/js/popover.js',
                     //'bower_components/bootstrap/js/carousel.js',
@@ -65,2 +64,3 @@
                     'js/dico.js',
+                    'js/d3-*.js',
 
@@ -72,3 +72,4 @@ 'js/many.js',
                     '!js/one-wizard.js', // NOT ! here
-                    'js/action.js',
+
+                    //'js/action.js',
                     'js/action-*.js',
@@ -78,3 +79,3 @@
                     'js/toolbar.js',
-                    'js/shell.js'
+                    'js/app.js'
                     //'js/ui-models/dico/field.js',
@@ -122,2 +123,3 @@ //'js/ui-models/dico/field-popup.js',
             dev: [
+
                 // --- tools ---
@@ -124,0 +126,0 @@ 'Gruntfile.js',

js/action-export.js

@@ -93,9 +93,8 @@ /*! ***************************************************************************
 
-        h.push('<div class="evol-xpt-form"><div class="evol-xpt-flds">',
-            '<div><label>', i18nXpt.xpFields, '</label></div>',
-            '<fieldset class="checkbox">'
-        );
+        h.push('<div class="evol-xpt-form"><div class="evol-xpt-flds">'+
+            '<div><label>'+i18nXpt.xpFields+'</label></div>'+
+            '<fieldset class="checkbox">');
 
         //### list of columns to export #########################################
-        h.push('<div><label><input type="checkbox" value="1" id="showID">', i18nXpt.IDkey, '</label></div>');
+        h.push('<div><label><input type="checkbox" value="1" id="showID">'+i18nXpt.IDkey+'</label></div>');
         _.each(fields, function(f, idx){
@@ -107,3 +106,3 @@ var fLabel = f.labelexport || f.label || f.labellist,
             }
-            h.push('<div><label><input type="checkbox" value="1" id="', fID, '" checked="checked">', fLabel, '</label></div>');
+            h.push('<div><label><input type="checkbox" value="1" id="'+fID+'" checked="checked">'+fLabel+'</label></div>');
             if (idx === 10 && useMore){
@@ -125,31 +124,31 @@ h.push(EvoExport.html_more2(i18nXpt.allFields));
                 });
-        h.push('<label for="', fId, '">', i18nXpt.format, '</label>');
+        h.push('<label for="'+fId+'">'+i18nXpt.format+'</label>');
         h.push(uiInput.select(fId, '', 'evol-xpt-format', false, formatsList));
         fId = 'xptFLH';
-        h.push('<div class="evol-xpt-opts">',
+        h.push('<div class="evol-xpt-opts">'+
             //# field (shared b/w formats - header #######
-            '<div class="evol-FLH clearfix">',
-            '<label>', uiInput.checkbox(fId, true), i18nXpt.firstLine, '</label>',
+            '<div class="evol-FLH clearfix">'+
+            '<label>'+uiInput.checkbox(fId, true)+i18nXpt.firstLine+'</label>'+
             //##### CSV, TAB - First line for field names #######
-            '</div><div id="xptCSV">',
+            '</div><div id="xptCSV">'+
             //# field - separator
             //# - csv - any separator #######
-            '<div data-id="csv2" class="evol-w120">',
-            eUI.fieldLabel('separator', i18nXpt.separator),
-            uiInput.text('separator', ',', '0'),
-            '</div>', // </div>
+            '<div data-id="csv2" class="evol-w120">'+
+            eUI.fieldLabel('separator', i18nXpt.separator)+
+            uiInput.text('separator', ',', '0')+
+            '</div>'+ // </div>
         '</div>');
         _.each(formats, function(f){
-            h.push('<div id="xpt', f, '" style="display:none;"></div>');
+            h.push('<div id="xpt'+f+'" style="display:none;"></div>');
         });
-        h.push('</div>',
+        h.push('</div>'+
             //# Preview #######
-            '<label>',i18nXpt.preview,'</label><div class="evol-xpt-preview">',
+            '<label>'+i18nXpt.preview+'</label><div class="evol-xpt-preview">'+
             // ## Samples
-            '<textarea class="evol-xpt-val form-control"></textarea>',
-            '</div></div></div></div>',
+            '<textarea class="evol-xpt-val form-control"></textarea>'+
+            '</div></div></div></div>'+
             // ## Download button
-            '<div class="evol-buttons form-actions">',
-                eUI.button('cancel', i18n.bCancel, 'btn-default'),
-                eUI.button('export', i18nXpt.DownloadEntity.replace('{0}', this.uiModel.entities), 'btn btn-primary'),
+            '<div class="evol-buttons form-actions">'+
+                eUI.button('cancel', i18n.bCancel, 'btn-default')+
+                eUI.button('export', i18nXpt.DownloadEntity.replace('{0}', this.uiModel.entities), 'btn btn-primary')+
             '</div>'
@@ -237,3 +236,3 @@ );
                         if(showID){
-                            h.push('ID', sep);
+                            h.push('ID'+sep);
                         }
@@ -251,3 +250,3 @@ _.each(flds, function(f, idx){
                         if(showID){
-                            h.push(m.id, sep);
+                            h.push(m.id+sep);
                         }
@@ -261,3 +260,3 @@ _.each(flds, function(f, idx){
                                 }else if((f.type==fts.text || f.type==fts.textml) && (mv.indexOf(',')>-1)){ // || f.type==fts.list
-                                    h.push('"', mv.replace('"', '\\"'), '"');
+                                    h.push('"'+mv.replace('"', '\\"')+'"');
                                 }else{
@@ -285,3 +284,3 @@ h.push(mv);
                         _.each(flds, function(f){
-                            h.push('<th>', f.label, '</th>');
+                            h.push('<th>'+f.label+'</th>');
                         });
@@ -294,3 +293,3 @@ h.push('\n</tr>\n');
                         if(showID){
-                            h.push('<td>', m.id, '</td>');
+                            h.push('<td>'+m.id+'</td>');
                         }
@@ -300,3 +299,3 @@ _.each(flds, function(f){
                             if (!_.isUndefined(mj) && mj!=='') {
-                                h.push('<td>', mj, '</td>');
+                                h.push('<td>'+mj+'</td>');
                             } else {
@@ -327,3 +326,3 @@ h.push('<td></td>');
                         sqlTable = this.$('#table').val().replace(/ /g,'_'),
-                        sql = ['INSERT INTO ', sqlTable, ' ('];
+                        sql = ['INSERT INTO '+sqlTable+' ('];
 
@@ -349,3 +348,3 @@ if(sqlTable===''){
                     if(optIdInsert){
-                        h.push('SET IDENTITY_INSERT ', sqlTable, ' ON;\n');
+                        h.push('SET IDENTITY_INSERT '+sqlTable+' ON;\n');
                     }
@@ -383,3 +382,3 @@ // -- data
                                     }else{
-                                        h.push('"', eDico.HTMLField4Many(f, fValue, Evol.hashLov, '').replace(/"/g, '""'), '"');
+                                        h.push('"'+eDico.fieldHTML_ReadOny(f, fValue, Evol.hashLov, '').replace(/"/g, '""')+'"');
                                     }
@@ -391,3 +390,3 @@ break;
                                     }else{
-                                        h.push('"', fValue.replace(/"/g, '""'), '"');
+                                        h.push('"'+fValue.replace(/"/g, '""')+'"');
                                     }
@@ -404,3 +403,3 @@ }
                     if(optIdInsert){
-                        h.push('SET IDENTITY_INSERT ', sqlTable, ' OFF;\n');
+                        h.push('SET IDENTITY_INSERT '+sqlTable+' OFF;\n');
                     }
@@ -416,5 +415,5 @@ if(optTransaction){
                     _.every(data, function(m, idx){
-                        h.push('<', elemName, ' ');
+                        h.push('<'+elemName+' ');
                         if(showID){
-                            h.push('ID="', m.id, '" ');
+                            h.push('ID="'+m.id+'" ');
                         }
@@ -433,3 +432,3 @@ _.each(flds, function(f){
                         });
-                        h.push('></', elemName, '>\n');
+                        h.push('></'+elemName+'>\n');
                         return idx<maxItem;
@@ -436,0 +435,0 @@ });

js/action-filter.js

@@ -77,15 +77,14 @@ /*! ***************************************************************************
             e=this.$el,
-            h=[];
+            h='';
 
-        h.push(Evol.UI.html.buttonClose+'<div class="evo-zfilters"></div>',
-            '<a class="evo-bNew btn btn-primary" href="javascript:void(0)">',evoLang.bNewCond,'</a>');
+        h+=Evol.UI.html.buttonClose+'<div class="evo-zfilters"></div>'+
+            '<a class="evo-bNew btn btn-primary" href="javascript:void(0)">'+evoLang.bNewCond+'</a>';
         if(this.submitButton){
-            h.push('<a class="evo-bSubmit btn btn-primary" href="javascript:void(0)">',evoLang.bSubmit,'</a>');
+            h+='<a class="evo-bSubmit btn btn-primary" href="javascript:void(0)">'+evoLang.bSubmit+'</a>';
         }
-        h.push('<div class="evo-editFilter"></div>',
-            '<a class="evo-bAdd btn btn-primary" style="display:none;" href="javascript:void(0)">',evoLang.bAddCond,'</a>',
-            '<a class="evo-bDel btn btn-default" style="display:none;" href="javascript:void(0)">',evoLang.bCancel,'</a>');
+        h+='<div class="evo-editFilter"></div>'+
+            '<a class="evo-bAdd btn btn-primary" style="display:none;" href="javascript:void(0)">'+evoLang.bAddCond+'</a>'+
+            '<a class="evo-bDel btn btn-default" style="display:none;" href="javascript:void(0)">'+evoLang.bCancel+'</a>';
+        e.html(h);
         this._step=0;
-        //this._renderMenu(h);
-        e.html(h.join(''));
         if(this.submitReady){
@@ -299,9 +298,10 @@ this._hValues=$('<span></span>').appendTo(e);
                 var fields=this.fields,
-                    h=['<select id="field" class="form-control"><option value=""></option>'];
+                    f,
+                    h='<select id="field" class="form-control"><option value=""></option>';
                 for (var i=0,iMax=fields.length;i<iMax;i++){
-                    var f=fields[i];
-                    h.push(uiInput.option(f.id,f.label || f.labellist));
+                    f=fields[i];
+                    h+=uiInput.option(f.id,f.label || f.labellist);
                 }
-                h.push('</select>');
-                this._fList=h.join('');
+                h+='</select>';
+                this._fList=h;
             }
@@ -322,16 +322,16 @@ $(this._fList).appendTo(this._editor).focus();
         if(this._step<2){
-            var h=[];
+            var h='';
             switch (fType){
                 case fts.lov:
-                    //h.push(evoLang.sInList);
-                    h.push(uiInput.hidden('operator',fOps.sInList));
+                    //h+=evoLang.sInList;
+                    h+=uiInput.hidden('operator',fOps.sInList);
                     this._operator=fOps.sInList;
                     break;
                 case fts.bool:
-                    //h.push(evoLang.sEqual);
-                    h.push(uiInput.hidden('operator', fOps.sEqual));
+                    //h+=evoLang.sEqual;
+                    h+=uiInput.hidden('operator', fOps.sEqual);
                     this._operator=fOps.sEqual;
                     break;
                 default:
-                    h.push(uiInput.selectBegin('operator', '', true));
+                    h+=uiInput.selectBegin('operator', '', true);
                     switch (fType){
@@ -342,11 +342,11 @@ case fts.date:
                             if (fType==fts.time){
-                                h.push(fOption(fOps.sEqual, evoLang.sAt),
-                                    fOption(fOps.sNotEqual, evoLang.sNotAt));
+                                h+=fOption(fOps.sEqual, evoLang.sAt)+
+                                    fOption(fOps.sNotEqual, evoLang.sNotAt);
                             }else{
-                                h.push(fOption(fOps.sEqual, evoLang.sOn),
-                                    fOption(fOps.sNotEqual, evoLang.sNotOn));
+                                h+=fOption(fOps.sEqual, evoLang.sOn)+
+                                    fOption(fOps.sNotEqual, evoLang.sNotOn);
                             }
-                            h.push(fOption(fOps.sGreater, evoLang.sAfter),
-                                fOption(fOps.sSmaller, evoLang.sBefore),
-                                fOption(fOps.sBetween, evoLang.sBetween));
+                            h+=fOption(fOps.sGreater, evoLang.sAfter)+
+                                fOption(fOps.sSmaller, evoLang.sBefore)+
+                                fOption(fOps.sBetween, evoLang.sBetween);
                             break;
@@ -356,19 +356,19 @@ case fts.int:
                         case fts.money:
-                            h.push(fOption(fOps.sEqual, evoLang.sNumEqual),
-                                fOption(fOps.sNotEqual, evoLang.sNumNotEqual),
-                                fOption(fOps.sGreater, evoLang.sGreater),
-                                fOption(fOps.sSmaller, evoLang.sSmaller));
+                            h+=fOption(fOps.sEqual, evoLang.sNumEqual)+
+                                fOption(fOps.sNotEqual, evoLang.sNumNotEqual)+
+                                fOption(fOps.sGreater, evoLang.sGreater)+
+                                fOption(fOps.sSmaller, evoLang.sSmaller);
                             break;
                         default:
-                            h.push(fOption(fOps.sEqual, evoLang.sEqual),
-                                fOption(fOps.sNotEqual, evoLang.sNotEqual),
-                                fOption(fOps.sStart, evoLang.sStart),
-                                fOption(fOps.sContain, evoLang.sContain),
-                                fOption(fOps.sFinish, evoLang.sFinish));
+                            h+=fOption(fOps.sEqual, evoLang.sEqual)+
+                                fOption(fOps.sNotEqual, evoLang.sNotEqual)+
+                                fOption(fOps.sStart, evoLang.sStart)+
+                                fOption(fOps.sContain, evoLang.sContain)+
+                                fOption(fOps.sFinish, evoLang.sFinish);
                     }
-                    h.push(fOption(fOps.sIsNull, evoLang.sIsNull),
-                        fOption(fOps.sIsNotNull, evoLang.sIsNotNull));
-                    h.push('</select>');
+                    h+=fOption(fOps.sIsNull, evoLang.sIsNull)+
+                        fOption(fOps.sIsNotNull, evoLang.sIsNotNull)+
+                        '</select>';
             }
-            this._editor.append(h.join(''));
+            this._editor.append(h);
         }
@@ -393,17 +393,16 @@ if(cond && fType!=fts.lov){
                 if(this._step<3){
-                    var h=[];
+                    var h='';
                     opBetween=opVal==fOps.sBetween;
                     switch (fType){
                         case fts.lov:// TODO use "section"?
-                            h.push(
-                                '<section id="value">',
-                                (this._field.list.length>7)?'(<input type="checkbox" id="checkAll" value="1"/><label for="checkAll">All</label>) ':'',
-                                uiInput.checkboxLOV(this._field.list),
-                                '</section>');
+                            h+='<section id="value">'+
+                                ((this._field.list.length>7)?'(<input type="checkbox" id="checkAll" value="1"/><label for="checkAll">All</label>) ':'')+
+                                uiInput.checkboxLOV(this._field.list)+
+                                '</section>';
                             break;
                         case fts.bool:
-                            h.push('<span id="value">',
-                                uiInput.radio('value', '1', evoLang.yes, v!='0', 'value1'),
-                                uiInput.radio('value', '0', evoLang.no, v=='0', 'value0'),
-                                '</span>');
+                            h+='<span id="value">'+
+                                uiInput.radio('value', '1', evoLang.yes, v!='0', 'value1')+
+                                uiInput.radio('value', '0', evoLang.no, v=='0', 'value0')+
+                                '</span>';
                             break;
@@ -417,6 +416,6 @@ case fts.date:
                             var iType=(fType==fts.date)?'text':fType;
-                            h.push('<input id="value" type="',iType,'" class="form-control"/>');
+                            h+='<input id="value" type="'+iType+'" class="form-control"/>';
                             if(opBetween){
-                                h.push('<span class="as-Txt">',evoLang.opAnd,' </span>',
-                                    '<input id="value2" type="',iType,'" class="form-control"/>');
+                                h+='<span class="as-Txt">'+evoLang.opAnd+' </span>'+
+                                    '<input id="value2" type="'+iType+'" class="form-control"/>';
                             }
@@ -426,6 +425,6 @@ addOK=false;
                         default:
-                            h.push('<input id="value" type="text" class="form-control"/>');
+                            h+='<input id="value" type="text" class="form-control"/>';
                             addOK=false;
                     }
-                    editor.append(h.join(''));
+                    editor.append(h);
                     if(fType==fts.date){// TODO add datepicker widget to build and uncomment this
@@ -545,11 +544,12 @@ editor.find('#value,#value2').datepicker({dateFormat:this.dateFormat});
 
-    _hiddenValue: function(h, filter, idx){
+    _hiddenValue: function(filter, idx){
         var fHidden=uiInput.hidden,
-            v2=filter.value.value2;
-        h.push(fHidden('fld-'+idx, filter.field.value),
-            fHidden('op-'+idx, filter.operator.value),
-            fHidden('val-'+idx, filter.value.value));
+            v2=filter.value.value2,
+            h=fHidden('fld-'+idx, filter.field.value)+
+                fHidden('op-'+idx, filter.operator.value)+
+                fHidden('val-'+idx, filter.value.value);
         if(v2){
-            h.push(fHidden('val2-'+idx, v2));
+            h+=fHidden('val2-'+idx, v2);
         }
+        return h;
     },
@@ -560,8 +560,8 @@
             iMax=vs.length,
-            h=[uiInput.hidden('elem', iMax)];
+            h=uiInput.hidden('elem', iMax);
         for(var i=0;i<iMax;i++){
-            this._hiddenValue(h, vs[i], i+1);
+            h+=this._hiddenValue(vs[i], i+1);
         }
         //h.push('&label=',encodeURIComponent(this.valText()));
-        this._hValues.html(h.join(''));
+        this._hValues.html(h);
     },
@@ -668,2 +668,3 @@
         this.$el.trigger('close.filter');
+        this.clear();
     }
@@ -670,0 +671,0 @@

js/dico.js

@@ -32,4 +32,4 @@ /*! ***************************************************************************
             list: 'list', // many values for one field (behave like tags - return an array of strings)
-            //html:'html',
-            formula:'formula',
+            html: 'html',
+            formula:'formula', // soon to be a field attribute rather than a field type
             email: 'email',
@@ -50,10 +50,10 @@ pix: 'image',
 
-    fieldOneEdit: {// h, f, fid, fv, iconsPath
-        field: function (h, f, fType, fid, fv) {
-            h.push(uiInput[fType](fid, fv, f, null));
+    fieldOneEdit: {// f, fid, fv, iconsPath
+        field: function (f, fType, fid, fv) {
+            return uiInput[fType](fid, fv, f, null);
         },
-        text: function (h, f, fid, fv) {
-            h.push(uiInput.text(fid, fv, f, null));
+        text: function (f, fid, fv) {
+            return uiInput.text(fid, fv, f, null);
         },
-        textmultiline: function (h, f, fid, fv) {
+        textmultiline: function (f, fid, fv) {
             // fv = _.escape(fv);
@@ -68,62 +68,67 @@ if (f.height === null) {
             }
-            h.push(uiInput.textM(fid, fv, f.maxlength, f.height));
+            return uiInput.textM(fid, fv, f.maxlength, f.height);
         },
-        // html:
-        boolean: function (h, f, fid, fv) {
-            h.push(uiInput.checkbox(fid, fv));
+        html: function (f, fid, fv) {
+            // TODO
+            return this.textmultiline(f, fid, fv);
         },
-        integer: function (h, f, fid, fv) {
-            h.push(uiInput.textInt(fid, fv, f.max, f.min));
+        boolean: function (f, fid, fv) {
+            return uiInput.checkbox(fid, fv);
         },
-        decimal: function (h, f, fid, fv) {
+        integer: function (f, fid, fv) {
+            return uiInput.textInt(fid, fv, f.max, f.min);
+        },
+        decimal: function (f, fid, fv) {
             //todo
-            h.push(uiInput.textInt(fid, fv, f.max, f.min));
+            return uiInput.textInt(fid, fv, f.max, f.min);
         },
-        money: function (h, f, fid, fv) {
-            h.push('<div class="input-group">', uiInput.typeFlag('$'),
-                uiInput.textInt(fid, fv), '</div>');
+        money: function (f, fid, fv) {
+            return '<div class="input-group">'+uiInput.typeFlag('$')+
+                uiInput.textInt(fid, fv)+'</div>';
         },
-        date: function (h, f, fid, fv) {
-            h.push(uiInput.date(fid, fv));
+        date: function (f, fid, fv) {
+            return uiInput.date(fid, fv);
         },
-        datetime: function (h, f, fid, fv) {
-            h.push(uiInput.dateTime(fid, fv));
+        datetime: function (f, fid, fv) {
+            return uiInput.dateTime(fid, fv);
         },
-        time: function (h, f, fid, fv) {
-            h.push(uiInput.time(fid, fv));
+        time: function (f, fid, fv) {
+            return uiInput.time(fid, fv);
         },
-        lov: function (h, f, fid, fv) {
-            h.push(uiInput.select(fid, fv, '', true, f.list));
+        lov: function (f, fid, fv) {
+            return uiInput.select(fid, fv, '', true, f.list);
         },
-        list: function (h, f, fid, fv) { // fv is an array. will use select2
-            h.push('<div id="', fid, '" class="w-100 form-control"></div>');
+        list: function (f, fid, fv) { // fv is an array. will use select2
+            return '<div id="'+fid+'" class="w-100 form-control"></div>';
         },
-        email: function (h, f, fid, fv) {
-            h.push('<div class="input-group">', uiInput.typeFlag(i18n.sgn_email),
-                uiInput.text(fid, fv, f),
-                '</div>');
+        email: function (f, fid, fv) {
+            return '<div class="input-group">'+uiInput.typeFlag(i18n.sgn_email)+
+                uiInput.text(fid, fv, f)+
+                '</div>';
         },
-        url: function (h, f, fid, fv) {
-            h.push(uiInput.text(fid, fv, f));
+        url: function (f, fid, fv) {
+            return uiInput.text(fid, fv, f);
             //fv!==''?EvoUI.link(fid,'',fv):''
         },
-        //doc: function(h, f, fid, fv, iconsPath){
+        //doc: function(f, fid, fv, iconsPath){
         //},
-        image: function(h, f, fid, fv, iconsPath){
+        image: function(f, fid, fv, iconsPath){
+            var h='';
             if(fv!==''){
-                h.push('<img src="',(fv.substr(0, 2)==='..')?fv:iconsPath + fv,'" class="img-thumbnail">');
+                h+='<img src="'+((fv.substr(0, 2)==='..')?fv:iconsPath + fv)+'" class="img-thumbnail">';
             }else{
-                h.push('<p class="">',i18n.nopix,'</p>');
+                h+='<p class="">'+i18n.nopix+'</p>';
             }
-            h.push(uiInput.text(fid, fv, f, null));
+            h+=uiInput.text(fid, fv, f, null);
+            return h;
         },
-        color: function(h, f, fid, fv){
-            //h.push('<div id="',fid, '" class="form-control">',fv,'</div>');
-            h.push(uiInput.color(fid, fv));
+        color: function(f, fid, fv){
+            //return '<div id="',fid, '" class="form-control">',fv,'</div>');
+            return uiInput.color(fid, fv);
         },
-        hidden: function(h, f, fid, fv){
-            h.push(uiInput.hidden(fid, fv));
+        hidden: function(f, fid, fv){
+            return uiInput.hidden(fid, fv);
         },
-        formula: function(h, f, fid, fv){
-            h.push('<div class="evol-truncate">'+uiInput.text(fid, fv, f, null)+'</div>');
+        formula: function(f, fid, fv){
+            return '<div class="evol-ellipsis">'+uiInput.text(fid, fv, f, null)+'</div>';
         }
@@ -198,4 +203,8 @@ },
 
+    clearCacheLOV: function(){
+        Evol.hashLov={};
+    },
+
     viewIsOne: function(viewName){
-        return viewName==='new' || viewName==='edit' || viewName==='view' || viewName==='json';
+        return viewName==='new' || viewName==='edit' || viewName==='browse' || viewName==='json';
     },
@@ -207,5 +216,7 @@ viewIsMany: function(viewName){
     fieldInCharts: function (f) {
-        return (_.isUndefined(f.viewcharts) || f.viewcharts) && 
-            (f.type===fts.lov || f.type===fts.bool || f.type===fts.int || f.type===fts.money);
+        return (_.isUndefined(f.viewcharts) || f.viewcharts) && Evol.Dico.fieldChartable(f);
     },
+    fieldChartable: function (f) {
+        return  f.type===fts.lov || f.type===fts.bool || f.type===fts.int || f.type===fts.money;
+    },
 
@@ -279,3 +290,2 @@ isNumberType: function(fType){
         collectCollecs(uiModel);
-
         return ls;
@@ -399,3 +409,3 @@ },
 
-    HTMLField4Many: function(f, v, hashLov, iconsPath){
+    fieldHTML_ReadOny: function(f, v, hashLov, iconsPath){
         switch(f.type){
@@ -459,61 +469,50 @@ case fts.bool:
 
-    HTMLField4One: function(fld, fid, fv, mode, iconsPath, skipLabel){
-        var h=[];
+    fieldHTML: function(fld, fid, fv, mode, iconsPath, skipLabel){
+        var h='';
         // --- field label ---
-        if(mode==='mini'){
-            var fwidth=fld.width;
-            fld.width=100;
-            h.push('<div class="evol-mini-label">', this.HTMLFieldLabel(fld, mode),
-                '</div><div class="evol-mini-content">');
-        }else if(!skipLabel){
-            h.push(this.HTMLFieldLabel(fld, mode || 'edit'));
+        if(!skipLabel){
+            h+=this.HTMLFieldLabel(fld, mode || 'edit');
         }
         // --- field value ---
-        if(fld.readonly || mode==='view'){
-            h.push('<div class="disabled evo-rdonly" id="',fid);
+        if(fld.readonly || mode==='browse'){
+            h+='<div class="disabled evo-rdonly" id="'+fid;
             if(fld.type===fts.textml && fld.height>1){
-                h.push('" style="height:', fld.height, 'em;overflow-y: auto;');
+                h+='" style="height:'+fld.height+'em;overflow-y: auto;';
             }
-            h.push('">');
+            h+='">';
             switch (fld.type) {
                 case fts.formula:
                     // TODO: in one.js or here?
-                    h.push('<div id="',fid, '" class="form-control evol-truncate">',fld.formula(),'</div>');
+                    h+='<div id="'+fid+'" class="form-control evol-ellipsis">'+fld.formula()+'</div>';
                     break;
                 case fts.color: // TODO is the color switch necessary?
-                    //h.push(uiInput.colorBox(fid, fv), fv);
-                    h.push('<div id="',fid, '" class="form-control">',fv,'</div>');
+                    //h+=uiInput.colorBox(fid, fv)+fv;
+                    h+='<div id="'+fid+'" class="form-control">'+fv+'</div>';
                     break;
                 case fts.email:
-                    h.push(eUI.linkEmail(fid, fv));
+                    h+=eUI.linkEmail(fid, fv);
                     break;
                 case fts.url:
-                    h.push(eUI.link(fid, fv, fv, fid));
+                    h+=eUI.link(fid, fv, fv, fid);
                     break;
                 default:
-                    h.push(this.HTMLField4Many(fld, fv, {}, iconsPath));
+                    h+=this.fieldHTML_ReadOny(fld, fv, {}, iconsPath);
             }
-            h.push('&nbsp;</div>');
+            h+='&nbsp;</div>';
         }else{
-            Evol.Dico.fieldOneEdit[fld.type](h, fld, fid, fv, iconsPath);
+            h+=Evol.Dico.fieldOneEdit[fld.type](fld, fid, fv, iconsPath);
         }
-        if(mode==='mini'){
-            h.push('</div>');
-            fld.width=fwidth;
-        }
-        return h.join('');
+        return h;
     },
 
     HTMLFieldLabel: function (fld, mode) {
-        var h=[];
-        h.push('<div class="evol-field-label" id="', fld.id, '-lbl"><label class="control-label ',fld.csslabel?fld.csslabel:'','" for="', fld.id, '">',
-            fld.label);
-        if (mode != 'view' && fld.required){
-            h.push(eUI.html.required);
+        var h='<div class="evol-field-label" id="'+fld.id+'-lbl"><label class="control-label '+(fld.csslabel?fld.csslabel:'')+'" for="'+fld.id+'">'+fld.label;
+        if (mode != 'browse' && fld.required){
+            h+=eUI.html.required;
         }
         if (fld.help && fld.help!==''){
-            h.push(eUI.icon('question-sign', ''));
+            h+=eUI.icon('question-sign', '');
         }
-        h.push('</label></div>');
-        return h.join('');
+        h+='</label></div>';
+        return h;
     },
@@ -551,4 +550,3 @@
 
-    sortingText: function(fid){
-            //return (modelA.get(fid)||'').localeCompare(modelB.get(fid)||'');
+    sortingNumber: function(fid){
         return function(modelA, modelB) {
@@ -564,3 +562,19 @@ if(modelA[fid]<modelB[fid]){
     },
+    sortingNumberDesc: function(fid){
+        return function(modelA, modelB) {
+            if(modelA[fid]>modelB[fid]){
+                return 1;
+            }
+            if(modelB[fid]>modelA[fid]){
+                return -1;
+            }
+            return 0;
+        };
+    },
 
+    sortingText: function(fid){
+        //return (modelA.get(fid)||'').localeCompare(modelB.get(fid)||'');
+        return this.sortingNumber(fid);
+    },
+
     getRoute: function(){
@@ -591,2 +605,3 @@ var cURL=window.location.href,
 };
+
 }();

js/i18n/EN.js

@@ -30,3 +30,3 @@ //   Evolutility Localization Library ENGLISH
     View:'View',
-    bView:'View',
+    bBrowse:'Browse',
     bEdit:'Edit',
@@ -51,3 +51,3 @@ bMini: 'Mini', // 'Quick Edit'
     bFilter: 'Filter',
-    //bBubbles: 'Bubbles',
+    bBubbles: 'Bubbles',
     bCards: 'Cards',
@@ -94,2 +94,7 @@ bJSON: 'JSON',
 
+    // --- data visualization ---
+    vizGroupBy: 'Group by:',
+    vizColorBy: 'Color by:',
+    vizSizeBy: 'Size by:',
+    
     // --- status ---
@@ -96,0 +101,0 @@ status:{

js/many-cards.js

@@ -17,13 +17,11 @@ /*! ***************************************************************************
     _render: function (models) {
-        var h = [],
-            pSize = this.pageSize || 50,
+        var pSize = this.pageSize || 50,
             pSummary = this.pageSummary(0, pSize, models.length);
 
-        h.push('<div class="evol-many-cards"><div class="evol-cards-body">');
-        this._HTMLbody(h, this.getFields(), pSize, this.uiModel.icon, 0, this.selectable);
-        h.push('</div>', Evol.UI.html.clearer);
-        this._HTMLpagination(h, 0, pSize, models.length);
-        h.push('<div class="evo-many-summary">', pSummary, '</div>',
+        this.$el.html('<div class="evol-many-cards"><div class="evol-cards-body">'+
+            this._HTMLbody(this.getFields(), pSize, this.uiModel.icon, 0, this.selectable)+
+            '</div>'+Evol.UI.html.clearer+
+            this._HTMLpagination(0, pSize, models.length)+
+            '<div class="evo-many-summary">'+pSummary+'</div>'+
             '</div>');
-        this.$el.html(h.join(''));
         return this;
@@ -36,3 +34,3 @@ },
 
-    HTMLItem: function(h, fields, model, icon, selectable, route){
+    HTMLItem: function(h, fields, model, icon, selectable, route, isTooltip){
         var that = this,
@@ -43,3 +41,7 @@ v,
 
-        h.push('<div class="panel ',this.style,'">');
+        if(isTooltip){
+            h.push('<div class="evol-bubble-tooltip">');
+        }else{
+            h.push('<div class="panel '+this.style+'">');
+        }
         _.each(fields, function(f, idx){
@@ -55,3 +57,3 @@ if(f.value){
             if (idx === 0) {
-                h.push('<div data-mid="', model.id, '">');
+                h.push('<div data-mid="'+model.id+'">');
                 // Item badge
@@ -69,8 +71,9 @@ var bf=that.uiModel.badge;
                 // Item title
-                h.push('<h4>',
-                    selectable?that._HTMLCheckbox(model.id):'',
-                    Evol.Dico.HTMLFieldLink('fg-'+f.id, f, v, icon, !link, route?route+model.id:null),
+                h.push('<h4>'+
+                    (selectable?that._HTMLCheckbox(model.id):'')+
+                    Evol.Dico.HTMLFieldLink('fg-'+f.id, f, v, icon, !link, route?route+model.id:null)+
                     '</h4></div>');
             }else{
-                h.push('<div><label>', f.labelcards?f.labelcards:f.label,':</label> ', v, '</div>');
+                h.push('<div '+ (f.type=='email'?'class="evol-ellipsis"':'') +'><label>'+
+                    (f.labelcards?f.labelcards:f.label)+':</label> '+v+'</div>');
             }
@@ -77,0 +80,0 @@ });

js/many-charts.js

@@ -32,17 +32,16 @@ /*! ***************************************************************************
     render: function () {
-        var h = [];
         this.entityName=Evol.UI.capitalize(this.uiModel.entities);
         if(this.collection && this.collection.length>0){
-            h.push('<div class="evol-many-', this.viewName, '">');
-            this._HTMLcharts(h, this.style, this.sizes);
-            h.push('</div>');
+            this.$el.html('<div class="evol-many-'+this.viewName+'">'+
+                this._HTMLcharts(this.style || 'panel-info', this.sizes)+
+                '</div>');
         }else{
-            h.push(Evol.UI.HTMLMsg(Evol.i18n.nodata, '', 'info'));
+            this.$el.html(Evol.UI.HTMLMsg(Evol.i18n.nodata, '', 'info'));
         }
-        this.$el.html(h.join(''));
         return this.setTitle();
     },
 
-    _HTMLcharts: function (h, style, sizes) {
-        var EvoUI = Evol.UI,
+    _HTMLcharts: function (style, sizes) {
+        var h='',
+            EvoUI = Evol.UI,
             EvoDico = Evol.Dico,
@@ -106,5 +105,5 @@ i18n = Evol.i18n,
                 chartType = f.typechart || (f.type===fTypes.lov ? 'pie':'bars');
-                h.push('<div class="evol-chart-holder panel '+style+'">');
-                h.push('<div class="glyphicon glyphicon-cog evo-chart-config pull-right" data-id="'+f.id+'" data-ctype="'+chartType+'"></div>');
-                h.push('<div class="chart-holder">');
+                h+='<div class="evol-chart-holder panel '+style+'">'+
+                    '<div class="glyphicon glyphicon-cog evo-chart-config pull-right" data-id="'+f.id+'" data-ctype="'+chartType+'"></div>'+
+                    '<div class="chart-holder">';
                 cData[f.id] = {
@@ -118,13 +117,14 @@ field: f,
                 if(chartType==='pie'){
-                    h.push(EvoUI.Charts.Pie(f.labelcharts?f.labelcharts:i18n.getLabel('charts.aByB', entityName, f.label), data, labels, style, sizes));
+                    h+=EvoUI.Charts.Pie(f.labelcharts?f.labelcharts:i18n.getLabel('charts.aByB', entityName, f.label), data, labels, style, sizes);
                 }else if(chartType==='bars'){
-                    h.push(EvoUI.Charts.Bars(f.labelcharts?f.labelcharts:i18n.getLabel('charts.aB', entityName, f.label), data, labels, style, sizes));
+                    h+=EvoUI.Charts.Bars(f.labelcharts?f.labelcharts:i18n.getLabel('charts.aB', entityName, f.label), data, labels, style, sizes);
                 }
-                h.push('</div><br></div>');
+                h+='</div><br></div>';
             });
             this._cData=cData;
         }else{
-            h.push(EvoUI.HTMLMsg(i18n.nochart, i18n.badchart));
+            h+=EvoUI.HTMLMsg(i18n.nochart, i18n.badchart);
         }
-        h.push(EvoUI.html.clearer);
+        h+=EvoUI.html.clearer;
+        return h;
     },
@@ -131,0 +131,0 @@

js/many-list.js

@@ -21,3 +21,3 @@ /*! ***************************************************************************
     _render: function (models) {
-        var h = [],
+        var h = '',
             that = this,
@@ -28,17 +28,17 @@ fields = this.getFields(),
 
-        h.push('<div class="evol-many-list">',
-            '<table class="table table-bordered', link?' table-hover':'', '"><thead><tr>');
+        h+='<div class="evol-many-list">'+
+            '<table class="table table-bordered'+(link?' table-hover':'')+'"><thead><tr>';
         if(this.selectable){
-            h.push('<th class="list-td-sel">', this._HTMLCheckbox('cbxAll'), '</th>');
+            h+='<th class="list-td-sel">'+this._HTMLCheckbox('cbxAll')+'</th>';
         }
         _.each(fields, function(field){
-            that._HTMLlistHeader(h, field);
+            h+=that._HTMLlistHeader(field);
         });
-        h.push('</tr></thead><tbody>');
-        this._HTMLbody(h, fields, pSize, this.uiModel.icon, 0, this.selectable);
-        h.push('</tbody></table>');
-        this._HTMLpagination(h, 0, pSize, models.length);
-        h.push('<div class="evo-many-summary">', this.pageSummary(this.pageIndex, pSize, models.length), '</div>',
-            '</div>');
-        this.$el.html(h.join(''));
+        h+='</tr></thead><tbody>'+
+            this._HTMLbody(fields, pSize, this.uiModel.icon, 0, this.selectable)+
+            '</tbody></table>'+
+            this._HTMLpagination(0, pSize, models.length)+
+            '<div class="evo-many-summary">'+this.pageSummary(this.pageIndex, pSize, models.length)+'</div>'+
+            '</div>';
+        this.$el.html(h);
     },
@@ -57,5 +57,5 @@
 
-        h.push('<tr data-mid="', model.id, '">');
+        h.push('<tr data-mid="'+model.id+'">');
         if(selectable){
-            h.push('<td class="list-td-sel">', this._HTMLCheckbox(model.id), '</td>');
+            h.push('<td class="list-td-sel">'+this._HTMLCheckbox(model.id)+'</td>');
         }
@@ -84,5 +84,7 @@ _.each(fields, function(f, idx){
             if(f.type===ft.textml){
-                h.push('<td class="evol-ellipsis">', v, '</td>');
+                h.push('<td class="evol-ellipsis">'+v+'</td>');
+            }else if(Evol.Dico.isNumberType(f.type)){
+                h.push('<td class="evol-r-align">'+v+'</td>');
             }else{
-                h.push('<td>', v, '</td>');
+                h.push('<td>'+v+'</td>');
             }
@@ -93,12 +95,13 @@ });
 
-    _HTMLlistHeader: function (h, f) {
-        h.push('<th><span id="', f.id, '-lbl">',
-            f.labellist || f.labelmany || f.label);
+    _HTMLlistHeader: function (f) {
+        var h='<th><span id="'+f.id+'-lbl">'+
+            (f.labellist || f.labelmany || f.label);
         if(f.sortable!==false){
-            h.push('<span class="evol-sort-icons" data-fid="', f.id, '">',
-                Evol.UI.icon('chevron-up'),//'sort-by-alphabet'
-                Evol.UI.icon('chevron-down'),//'sort-by-alphabet-alt'
-                '</span>');
+            h+='<span class="evol-sort-icons" data-fid="'+f.id+'">'+
+                Evol.UI.icon('chevron-up')+//'sort-by-alphabet'
+                Evol.UI.icon('chevron-down')+//'sort-by-alphabet-alt'
+                '</span>';
         }
-        h.push('</span></th>');
+        h+='</span></th>';
+        return h;
     }
@@ -105,0 +108,0 @@

js/many.js

@@ -90,4 +90,5 @@ /*! ***************************************************************************
 
-    _HTMLbody: function (h, fields, pSize, icon, pageIdx, selectable) {
-        var models = this.collection.models,
+    _HTMLbody: function (fields, pSize, icon, pageIdx, selectable) {
+        var h =[],
+            models = this.collection.models,
             model,
@@ -106,2 +107,3 @@ r,
         }
+        return h.join('');
     },
@@ -114,5 +116,13 @@
     _HTMLField: function (f, v) {
-        var fv = eDico.HTMLField4Many(f, v, Evol.hashLov, this.iconsPath || '');
-        if (f.type === 'list') {
-            return _.escape(fv);
+        var that=this,
+            fv;
+        if(f.type==='formula'){
+            fv = '<div class="disabled evo-rdonly evol-ellipsis">' +
+                (this.model?f.formula(this.model):'') +
+                '</div>';
+        }else{
+            fv = eDico.fieldHTML_ReadOny(f, v, Evol.hashLov, this.iconsPath || '');
+            if (f.type === 'list') {
+                return _.escape(fv);
+            }
         }
@@ -190,7 +200,4 @@ return fv;
 
-        this._HTMLbody(h, fields, pSize, this.uiModel.icon, pageIdx, this.selectable);
-        this._$body().html(h.join(''));
-        h = [];
-        this._HTMLpaginationBody(h, pageIdx, pSize, collecLength);
-        this.$('.evo-pagination').html(h.join(''));
+        this._$body().html(this._HTMLbody(fields, pSize, this.uiModel.icon, pageIdx, this.selectable));
+        this.$('.evo-pagination').html(this._HTMLpaginationBody(pageIdx, pSize, collecLength));
         this.$('.evo-many-summary').html(pSummary);
@@ -256,11 +263,13 @@ this.pageIndex = pageIdx;
 
-    _HTMLpagination: function (h, pIdx, pSize, cSize) {
+    _HTMLpagination: function (pIdx, pSize, cSize) {
         if (cSize > pSize) {
-            h.push('<ul class="evo-pagination pagination pagination-sm">');
-            this._HTMLpaginationBody(h, pIdx, pSize, cSize);
-            h.push('</ul>');
+            return '<ul class="evo-pagination pagination pagination-sm">'+
+                this._HTMLpaginationBody(pIdx, pSize, cSize)+
+                '</ul>';
         }
+        return '';
     },
 
-    _HTMLpaginationBody: function (h, pIdx, pSize, cSize) {
+    _HTMLpaginationBody: function (pIdx, pSize, cSize) {
+        var h='';
         if (cSize > pSize) {
@@ -271,4 +280,4 @@ var nbPages = Math.ceil(cSize / pSize),
                 bPage = function(id){
-                    h.push('<li', pId===id?' class="active"':'',
-                        ' data-id="', id, '"><a href="javascript:void(0)">', id, '</a></li>');
+                    h+='<li'+(pId===id?' class="active"':'')+
+                        ' data-id="'+id+'"><a href="javascript:void(0)">'+id+'</a></li>';
                 },
@@ -281,7 +290,7 @@ bPageRange = function(pStart, pEnd){
                 bGap = function(){
-                    h.push('<li class="disabled"><a href="javascript:void(0)">...</a></li>');
+                    h+='<li class="disabled"><a href="javascript:void(0)">...</a></li>';
                 };
-            h.push('<li data-id="prev"',
-                (pId===1)?' class="disabled"':'',
-                '><a href="javascript:void(0)">&laquo;</a></li>');
+            h+='<li data-id="prev"'+
+                ((pId===1)?' class="disabled"':'')+
+                '><a href="javascript:void(0)">&laquo;</a></li>';
             bPage(1);
@@ -304,6 +313,7 @@ if(pId>4 && nbPages>6){
             }
-            h.push('<li data-id="next"',
-                (nbPages > pId) ? '' : ' class="disabled"',
-                '><a href="javascript:void(0)">&raquo;</a></li>');
+            h+='<li data-id="next"'+
+                ((nbPages > pId) ? '' : ' class="disabled"')+
+                '><a href="javascript:void(0)">&raquo;</a></li>';
         }
+        return h;
     },
@@ -345,3 +355,3 @@
         if (router) {
-            route = '#' + this.uiModel.id + '/view/';
+            route = '#' + this.uiModel.id + '/browse/';
         }
@@ -348,0 +358,0 @@ return route;

js/one-json.js

@@ -21,15 +21,13 @@ /*! ***************************************************************************
     render: function () {
-        var h = [],
-            eUI=Evol.UI;
+        var eUI=Evol.UI;
         if(this.model){
-            var jsonStr=JSON.stringify(this.model, null, 2);
+            var h = [],
+                jsonStr=JSON.stringify(this.model, null, 2);
 
-            h.push(
-                eUI.label('uimjson', 'JSON'),
-                eUI.input.textMJSON('uimjson', jsonStr, 16));
+            h.push(eUI.label('uimjson', 'JSON')+eUI.input.textMJSON('uimjson', jsonStr, 16));
             this._renderButtons(h, 'json');
+            this.$el.html(h.join(''));
         }else{
-            h.push(eUI.HTMLMsg(Evol.i18n.nodata, '', 'info'));
+            this.$el.html(eUI.HTMLMsg(Evol.i18n.nodata, '', 'info'));
         }
-        this.$el.html(h.join(''));
         this.setData(this.model);
@@ -36,0 +34,0 @@ //this.custOn=false;

js/one-mini.js

@@ -12,4 +12,9 @@ /*! ***************************************************************************
 
-Evol.ViewOne.Mini = Evol.ViewOne.Edit.extend({
+Evol.ViewOne.Mini = function(){
 
+    var eUI = Evol.UI,
+        fts = Evol.Dico.fieldTypes;
+
+return Evol.ViewOne.Edit.extend({
+
     events: { // TODO same as ViewOne ?
@@ -26,8 +31,9 @@ 'click > .evol-buttons > button': 'click_button',
 
-    fieldsetFilter: function(m){
-        return m.required || m.viewmany || m.viewmini;
+    fieldsetFilter: function(f){
+        return (f.required || f.viewmany || f.viewmini) && f.type!='formula';
     },
 
     _render: function (h, mode) {
-        // EDIT and VIEW forms
+        // TODO browse mode
+        // in EDIT and BROWSE modes
         var miniUIModel= {
@@ -43,4 +49,30 @@ type: 'panel',
         this._renderButtons(h, mode);
+    },
+
+    _renderPanel: function (h, p, mode, visible) {
+        var that = this,
+            iconsPath = this.iconsPath;
+            
+        h.push('<div data-p-width="100%" class="evol-pnl evol-p-mini">'+
+            eUI.HTMLPanelBegin(p, this.style||'panel-default')+
+            '<fieldset data-pid="'+p.id+(p.readonly?'" disabled>':'">'));
+        _.each(p.elements, function (elem) {
+            if(elem.type==fts.hidden){
+                h.push(eUI.input.hidden(that.fieldViewId(elem.id), that.getModelFieldValue(elem.id, elem.defaultvalue, mode)));
+            }else{
+                h.push('<div class="pull-left evol-fld w-100">'+
+                    '<div class="evol-mini-label">'+Evol.Dico.HTMLFieldLabel(elem, mode)+
+                    '</div><div class="evol-mini-content">');
+                that.renderField(h, elem, mode, iconsPath, true);
+                h.push("</div></div>");
+            }
+        });
+        h.push('</fieldset>'+
+            eUI.HTMLPanelEnd()+
+            '</div>');
+        return this;
     }
 
 });
+
+}();

js/one.js

@@ -102,2 +102,15 @@ /*! ***************************************************************************
 
+    setMode: function(mode) {
+        var pMode=this.mode;
+        if(mode!=pMode){
+            this.mode = mode;
+            return this
+                .render();
+        }
+    },
+
+    getMode:function() {
+        return this.mode;
+    },
+
     setModel: function(model) {
@@ -132,3 +145,3 @@ this.model = model;
         if(this.model){
-            if(this.model.isNew()){
+            if(this.model.isNew && this.model.isNew()){
                 return i18n.getLabel('NewEntity', this.uiModel.entity);
@@ -216,3 +229,3 @@ }
                         case fts.email:
-                            $f.html(eDico.HTMLField4Many(f, _.isUndefined(fv)?'':fv, Evol.hashLov, iconsPath) + ' ');
+                            $f.html(eDico.fieldHTML_ReadOny(f, _.isUndefined(fv)?'':fv, Evol.hashLov, iconsPath) + ' ');
                             break;*/
@@ -223,3 +236,3 @@ case fts.formula:
                         default:
-                            $f.text(eDico.HTMLField4Many(f, _.isUndefined(fv)?'':fv, Evol.hashLov, iconsPath) + ' ');
+                            $f.text(eDico.fieldHTML_ReadOny(f, _.isUndefined(fv)?'':fv, Evol.hashLov, iconsPath) + ' ');
                     }
@@ -258,3 +271,3 @@ }else{
                     var h=[];
-                    that._renderPanelListBody(h, sc, fv, sc.readonly?'view':'edit');
+                    that._renderPanelListBody(h, sc, fv, sc.readonly?'browse':'edit');
                     that.$('[data-pid="'+sc.id+'"] tbody')
@@ -389,2 +402,3 @@ .html(h.join(''));
         this._subCollecs = this._subCollecsOK = false;
+        //Evol.Dico.clearCacheLOV();
         return this;
@@ -501,5 +515,5 @@ },
     _renderButtons: function (h, mode) {
-        h.push(eUI.html.clearer,
-            '<div class="evol-buttons panel panel-info">',
-            eUI.button('cancel', i18n.bCancel, 'btn-default'),
+        h.push(eUI.html.clearer+
+            '<div class="evol-buttons panel '+this.options.style+'">'+
+            eUI.button('cancel', i18n.bCancel, 'btn-default')+
             eUI.button('save', i18n.bSave, 'btn-primary'));
@@ -513,10 +527,9 @@ if (this.model && this.model.isNew() && this.button_addAnother && mode!=='json') {
     _render: function (h, mode) {
-        // EDIT and VIEW forms
+        // forms to EDIT and BROWSE
         var that=this,
             iTab = -1,
             iPanel = -1,
-            elems = this.uiModel.elements,
-            iMax1 = elems.length - 1;
+            elems = this.uiModel.elements;
 
-        h.push('<div class="evo-one-',mode,'">');
+        h.push('<div class="evo-one-'+mode+'">');
         _.each(elems, function(p, idx){
@@ -530,11 +543,8 @@ if(p.type==='tab'){
                     h.push(eUI.html.clearer);
-                    that._renderTabs(h, elems);
+                    that._renderTabTitles(h, elems);
                     h.push('<div class="tab-content">');
                 }
                 iTab++;
-                h.push('<div id="evol-tab-', idx, '" class="tab-pane', (iTab === 0 ? ' active">' : '">'));
+                h.push('<div id="evol-tab-'+idx+'" class="tab-pane'+(iTab === 0 ? ' active">' : '" style="display:none;">'));
                 that._renderTab(h, p, mode);
-                if (iTab == iMax1) {
-                    h.push('</div>');
-                }
             }else{
@@ -555,2 +565,5 @@ if (iPanel < 0) {
         });
+        if (iTab > 0) {
+            h.push('</div>');
+        }
         if (iPanel > 0) {
@@ -563,3 +576,3 @@ h.push('</div>');
 
-    _renderTabs: function (h, tabs) {
+    _renderTabTitles: function (h, tabs) {
         var isFirst = true;
@@ -570,7 +583,7 @@ h.push('<ul class="nav nav-tabs evol-tabs">');
                 if (isFirst) {
-                    h.push('<li class="active ', tab.csslabel||'', '">');
+                    h.push('<li class="active '+(tab.csslabel||'')+'">');
                     isFirst = false;
                 } else {
                     if(tab.csslabel){
-                        h.push('<li class="', tab.csslabel, '">');
+                        h.push('<li class="'+tab.csslabel+'">');
                     }else{
@@ -580,3 +593,3 @@ h.push('<li>');
                 }
-                h.push('<a href="#evol-tab-', idx, '">', tab.label, '</a></li>');
+                h.push('<a href="#evol-tab-'+idx+'">'+tab.label+'</a></li>');
             }
@@ -589,3 +602,3 @@ });
         var that = this;
-        h.push('<div class="evol-pnls ',tab.css||'','">');
+        h.push('<div class="evol-pnls '+(tab.css||'')+'">');
         _.each(tab.elements, function (uip) {
@@ -598,3 +611,3 @@ if (uip.type === 'panel-list') {
         });
-        h.push(eUI.html.clearer, '</div></div>'); // TODO 2 div?
+        h.push(eUI.html.clearer+'</div></div>'); // TODO 2 div?
     },
@@ -605,42 +618,26 @@
             iconsPath = this.iconsPath;
+
         if(mode==='wiz'){
             var hidden= _.isUndefined(visible)?false:!visible;
-            h.push('<div data-p-width="100" class="evol-pnl evo-p-wiz" style="width:100%;',hidden?'display:none;':'','">');
+            h.push('<div data-p-width="100" class="evol-pnl evo-p-wiz" style="width:100%;'+(hidden?'display:none;':'')+'">');
         }else{
-            h.push('<div data-p-width="', p.width, '" class="evol-pnl');
-            if(mode==='mini'){
-                h.push(' evol-p-mini">');
-            }else{
-                h.push(' pull-left" style="width:', p.width, '%">');
-            }
+            h.push('<div data-p-width="'+p.width+'" class="evol-pnl pull-left" style="width:'+p.width+'%">');
         }
         h.push(eUI.HTMLPanelBegin(p, this.style||'panel-default'),
-            '<fieldset data-pid="', p.id, p.readonly?'" disabled>':'">');
-        if(mode==='mini'){
-            _.each(p.elements, function (elem) {
+            '<fieldset data-pid="'+p.id+(p.readonly?'" disabled>':'">'));
+        _.each(p.elements, function (elem) {
+            if(elem.type=='panel-list'){
+                that._renderPanelList(h, elem, elem.readonly?'browse':mode);
+            }else{
                 if(elem.type==fts.hidden){
                     h.push(uiInput.hidden(that.fieldViewId(elem.id), that.getModelFieldValue(elem.id, elem.defaultvalue, mode)));
                 }else{
-                    h.push('<div class="pull-left evol-fld w-100">');
+                    h.push('<div style="width:'+parseInt(elem.width||100, 10)+'%" class="pull-left evol-fld">');
                     that.renderField(h, elem, mode, iconsPath);
                     h.push("</div>");
                 }
-            });
-        }else{
-            _.each(p.elements, function (elem) {
-                if(elem.type=='panel-list'){
-                    that._renderPanelList(h, elem, elem.readonly?'view':mode);
-                }else{
-                    if(elem.type==fts.hidden){
-                        h.push(uiInput.hidden(that.fieldViewId(elem.id), that.getModelFieldValue(elem.id, elem.defaultvalue, mode)));
-                    }else{
-                        h.push('<div style="width:', parseInt(elem.width||100, 10), '%" class="pull-left evol-fld">');
-                        that.renderField(h, elem, mode, iconsPath);
-                        h.push("</div>");
-                    }
-                }
-            });
-        }
-        h.push('</fieldset>',
-            eUI.HTMLPanelEnd(),
+            }
+        });
+        h.push('</fieldset>'+
+            eUI.HTMLPanelEnd()+
             '</div>');
@@ -651,10 +648,10 @@ return this;
     _renderPanelList: function (h, p, mode) {
-        var isEditable = p.readonly?false:(mode!=='view'),
-            vMode=isEditable?mode:'view';
+        var isEditable = p.readonly?false:(mode!=='browse'),
+            vMode=isEditable?mode:'browse';
 
-        h.push('<div style="width:', p.width, '%" class="evol-pnl pull-left" data-pid="', p.id, '">',
+        h.push('<div style="width:'+p.width+'%" class="evol-pnl pull-left" data-pid="'+p.id+'">',
             eUI.HTMLPanelBegin(p, this.style),
-            '<table class="table" data-mid="', (p.attribute || p.id), '"><thead><tr>');
+            '<table class="table" data-mid="'+(p.attribute || p.id)+'"><thead><tr>');
         _.each(p.elements, function (elem) {
-            h.push('<th>', elem.label, (isEditable && elem.required)?eUI.html.required:'', '</th>');
+            h.push('<th>'+elem.label+((isEditable && elem.required)?eUI.html.required:'')+'</th>');
         });
@@ -683,3 +680,3 @@ if(vMode==='edit'){
                 _.each(vs, function(row, idx){
-                    h.push('<tr data-idx="', idx, '">');
+                    h.push('<tr data-idx="'+idx+'">');
                     if(editable){
@@ -694,8 +691,8 @@ that._TDsFieldsEdit(h, uiPnl.elements, row);
                                 if(f.type===fts.bool || f.type===fts.lov){
-                                    h.push(eDico.HTMLField4Many(f, row[f.id], Evol.hashLov, iconsPath));
+                                    h.push(eDico.fieldHTML_ReadOny(f, row[f.id], Evol.hashLov, iconsPath));
                                 }else{
-                                    h.push(_.escape(eDico.HTMLField4Many(f, row[f.id], Evol.hashLov, iconsPath)));
+                                    h.push(_.escape(eDico.fieldHTML_ReadOny(f, row[f.id], Evol.hashLov, iconsPath)));
                                 }
                             }else{
-                                h.push(_.escape(eDico.HTMLField4Many(f, '', Evol.hashLov, iconsPath)));
+                                h.push(_.escape(eDico.fieldHTML_ReadOny(f, '', Evol.hashLov, iconsPath)));
                             }
@@ -728,7 +725,9 @@ h.push('</td>');
             }
-            h.push('<td>', eDico.HTMLField4One(f, f.id, fv, 'edit-details', iconPath, true), '</td>');
+            h.push('<td>'+
+                eDico.fieldHTML(f, f.id, fv, 'edit-details', iconPath, true)+
+                '</td>');
         });
     },
 
-    renderField: function (h, f, mode, iconsPath) {
+    renderField: function (h, f, mode, iconsPath, skipLabel) {
         var fv='';
@@ -739,7 +738,8 @@ if(this.model && this.model.has(f.id)){
         if(f.type==='formula'){
-            h.push('<div id="',this.fieldViewId(f.id), '" class="disabled evo-rdonly evol-truncate">', 
-                (this.model?f.formula(this.model):''), 
+            h.push(Evol.Dico.HTMLFieldLabel(f, mode || 'edit')+
+                '<div id="'+this.fieldViewId(f.id)+'" class="disabled evo-rdonly evol-ellipsis">'+
+                (this.model?f.formula(this.model):'')+
                 '</div>');
         }else{
-            h.push(eDico.HTMLField4One(f, this.fieldViewId(f.id), fv, mode, iconsPath));
+            h.push(eDico.fieldHTML(f, this.fieldViewId(f.id), fv, mode, iconsPath, skipLabel));
         }
@@ -1050,3 +1050,9 @@ return this;
         evt.stopImmediatePropagation();
-        this.$el.trigger('action', bId);
+        if(bId==='save'){
+            if(this.validate()){
+                this.$el.trigger('action', bId);
+            }
+        }else{
+            this.$el.trigger('action', bId);
+        }
     },
@@ -1156,4 +1162,4 @@
             this._TDsFieldsEdit(h, elems, {});
-            h.push('<td class="evo-td-plusminus">',
-                eUI.buttonsPlusMinus(),
+            h.push('<td class="evo-td-plusminus">'+
+                eUI.buttonsPlusMinus()+
                 '</td></tr>');
@@ -1160,0 +1166,0 @@ $(h.join('')).insertAfter(tr);

js/toolbar.js

@@ -13,4 +13,12 @@ /*! ***************************************************************************
 Evol.viewClasses = {
+    getClass: function(className){
+        var cn=Evol.viewClasses;
+        if(cn[className]){
+            return cn[className];
+        }else{
+            return cn.list;
+        }
+    },
     // --- One ---
-    'view': Evol.ViewOne.View,
+    'browse': Evol.ViewOne.Browse,
     'edit': Evol.ViewOne.Edit,
@@ -22,3 +30,3 @@ 'mini': Evol.ViewOne.Mini,
     'cards': Evol.ViewMany.Cards,
-    //'bubbles': Evol.ViewMany.Bubbles,
+    'bubbles': Evol.ViewMany.Bubbles,
     'charts': Evol.ViewMany.Charts,
@@ -45,4 +53,6 @@ // --- Action ---
         //'selection.many >div': 'click_select',
+        'click .evo-search>.btn': 'click_search',
+        'keyup .evo-search>input': 'key_search',
         'change.tab >div': 'change_tab',
-        'action >div': 'action_view',
+        'action >div': 'click_action',
         'status >div': 'status_update',
@@ -57,4 +67,7 @@ 'change.filter >div': 'change_filter',
         toolbar: true,
+        readonly: false,
         //router:...,
         defaultView: 'list',
+        defaultViewOne: 'browse',
+        defaultViewMany: 'list',
         style: 'panel-info',
@@ -67,9 +80,10 @@ display: 'label', // tooltip, text, icon, none
                 {id: 'list', label: i18n.bList, icon:'th-list', n:'x'},
-                {id: 'new', label: i18n.bNew, icon:'plus', n:'x'}
+                {id: 'new', label: i18n.bNew, icon:'plus', n:'x', readonly:false}
             ],
                 //linkOpt2h('selections','','star');
             actions:[
-                {id:'edit', label: i18n.bEdit, icon:'edit', n:'1'},
-                {id:'save', label: i18n.bSave, icon:'floppy-disk', n:'1'},
-                {id:'del', label: i18n.bDelete, icon:'trash', n:'1'},
+                //{id:'browse', label: i18n.bBrowse, icon:'eye', n:'1', readonly:false},
+                {id:'edit', label: i18n.bEdit, icon:'edit', n:'1', readonly:false},
+                {id:'save', label: i18n.bSave, icon:'floppy-disk', n:'1', readonly:false},
+                {id:'del', label: i18n.bDelete, icon:'trash', n:'1', readonly:false},
                 {id:'filter', label: i18n.bFilter, icon:'filter',n:'n'},
@@ -86,13 +100,14 @@ //{id:'group',label: i18n.bGroup, icon:'resize-horizontal',n:'n'},
                 // -- views ONE ---
-                {id:'view', label: i18n.bView, icon:'file',n:'1'},// // ReadOnly
-                {id:'edit', label: i18n.bEdit, icon:'th',n:'1'},// // All Fields
-                {id:'mini', label: i18n.bMini, icon:'th-large',n:'1'},// // Important Fields only
+                {id:'browse', label: i18n.bBrowse, icon:'eye-open',n:'1'},// // ReadOnly
+                {id:'edit', label: i18n.bEdit, icon:'edit',n:'1', readonly:false},// // All Fields for editing
+                {id:'mini', label: i18n.bMini, icon:'th-large',n:'1', readonly:false},// // Important Fields only
                 //{id:'wiz',label: i18n.bWizard, icon:'arrow-right',n:'1'},
-                {id:'json', label: i18n.bJSON, icon:'barcode',n:'1'},
+                {id:'json', label: i18n.bJSON, icon:'barcode',n:'1', readonly:false},
                 // -- views MANY ---
                 {id:'list', label: i18n.bList, icon:'th-list',n:'n'},
                 {id:'cards', label: i18n.bCards, icon:'th-large',n:'n'},
-                //{id:'bubbles', label: i18n.bBubbles, icon:'adjust',n:'n'},
+                {id:'bubbles', label: i18n.bBubbles, icon:'adjust',n:'n'},
                 {id:'charts', label: i18n.bCharts, icon:'stats',n:'n'}
-            ]
+            ],
+            search: false
         }
@@ -110,3 +125,3 @@ },
         this.$el.html(this._toolbarHTML());
-        this.setView(this.defaultView || 'list', false);
+        this.setView(this.defaultViewMany, false);
         //this.$('[data-toggle="tooltip"]').tooltip();
@@ -118,3 +133,4 @@ this.$('.dropdown-toggle').dropdown();
     _toolbarHTML: function(){
-        var h='',
+        var h,
+            isReadOnly=this.readonly!==false,
             that=this,
@@ -127,22 +143,31 @@ eUIm=eUI.menu,
 
-        function menuItem (m){
-            h+=eUIm.hItem(m.id, m.label, m.icon, m.n);
+        function menuItem (m, noLabel){
+            return eUIm.hItem(m.id, noLabel?'':m.label, m.icon, m.n);
         }
-        function menuItems (ms){
-            _.forEach(ms, function(m){
-                menuItem(m);
-            });
+        function menuItems (ms, noLabel){
+            return _.map(ms, function(m){
+                if(isReadOnly && m.readonly===false){
+                    return null;
+                }
+                return menuItem(m, noLabel);
+            }).join('');
         }
 
-        h+='<div class="evo-toolbar"><ul class="nav nav-pills pull-left" data-id="main">';
-        menuItems(tb.always);
-        h+=menuDeviderH;
-        menuItems(tb.actions);
+        h='<div class="evo-toolbar"><ul class="nav nav-pills pull-left" data-id="main">'+
+            menuItems(tb.always)+
+            menuDeviderH+
+            menuItems(tb.actions);
         if(this.toolbar){
             h+='</ul><ul class="nav nav-pills pull-right" data-id="views">'+
                 '<li class="evo-tb-status" data-cardi="n"></li>';
+                if(tb.search){
+                    h+='<li><div class="input-group evo-search">'+
+                        '<input class="evo-field form-control" type="text" maxlength="100">'+
+                        '<span class="btn input-group-addon glyphicon glyphicon-search"></span>'+
+                    '</div></li>';
+                }
             //h+=eUIm.hBegin('views','li','eye-open');
-            menuItems(tb.prevNext);
+            h+=menuItems(tb.prevNext);
             h+=menuDeviderH;
-            menuItems(tb.views);
+            h+=menuItems(tb.views, true);
             //h+=menuDeviderH;
@@ -159,2 +184,3 @@ //h+=eUIm.hItem('customize','','wrench', 'x', 'Customize');
              } */
+
         }
@@ -172,2 +198,7 @@ h+='</ul>'+eUI.html.clearer+'</div>';
 
+    clearViews: function(keep){
+        //div data-vid="evolw-edit"
+        $('[data-vid=evolw-*]').remove();
+    },
+
     isDirty:function(){
@@ -187,3 +218,3 @@ // -- true if current view had unsaved values
         if(viewName==='new'){
-            viewName=(this._prevViewOne && this._prevViewOne!='view' && this._prevViewOne!='json')?this._prevViewOne:'edit';
+            viewName=(this._prevViewOne && this._prevViewOne!='browse' && this._prevViewOne!='json')?this._prevViewOne:'edit';
             this.setView(viewName, false, true);
@@ -197,2 +228,3 @@ this.model=new this.modelClass();
         }else{
+            var ViewClass = Evol.viewClasses.getClass(viewName);
             if($v.length){
@@ -251,3 +283,4 @@ // -- view already exists and was rendered
                     titleSelector: this.titleSelector,
-                    router: this.router
+                    router: this.router//,
+                    //iconsPath: this.iconsPath || ''
                 };
@@ -259,4 +292,4 @@ this.$('[data-id="new"]').show();
                     //fieldsetFilter
-                    vw = new Evol.viewClasses[viewName](config)
-                        .render();
+                    vw = new ViewClass(config)
+                                .render();
                     this._prevViewMany=viewName;
@@ -273,7 +306,7 @@ vw.setTitle();
                             config.sampleMaxSize = config.pageSize;
-                            vw = new Evol.ViewAction.Export(config).render();
+                            vw = new ViewClass(config).render();
                             $v.addClass('panel panel-info')
                                 .slideDown();
                             break;
-                        // --- one --- view, edit, mini, json, wiz
+                        // --- one --- browse, edit, mini, json, wiz
                         default :
@@ -286,3 +319,3 @@ var vwPrev = null,
                             }
-                            vw = new Evol.viewClasses[viewName](config).render();
+                            vw = new ViewClass(config).render();
                             this._prevViewOne=viewName;
@@ -391,3 +424,3 @@ this._keepTab(viewName);
      _keepTab: function(viewName){
-         if(this.tabId && (viewName=='view'||viewName=='edit')){
+         if(this.tabId && (viewName=='browse'||viewName=='edit')){
             this.curView.setTab(this.tabId);
@@ -472,4 +505,4 @@ }
                 tbBs.prevNext.show();
-                setVisible(tbBs.save, mode!=='view');
-                setVisible(tbBs.edit, mode==='view');
+                setVisible(tbBs.save, mode!=='browse');
+                setVisible(tbBs.edit, mode==='browse');
             }
@@ -559,3 +592,3 @@ setVisible(tbBs.manys.filter('[data-id="group"]'), mode==='cards');
             if(this.curView.cardinality!='1'){
-                this.setView('view');//(this._prevViewOne || 'edit');
+                this.setView('browse');//(this._prevViewOne || 'edit');
             }
@@ -668,4 +701,4 @@ this.curView.setModel(m);
         var vw=this.curView;
-        if(vw.viewName=='view'){
-            if(this._prevViewOne!=='view' && this._prevViewOne!=='json'){
+        if(vw.viewName=='browse'){
+            if(this._prevViewOne!=='browse' && this._prevViewOne!=='json'){
                 this.setView(this._prevViewOne);
@@ -771,7 +804,7 @@ }else{
 
-    action_view: function(evt, actionId){
+    click_action: function(evt, actionId){
         switch(actionId){
             case 'cancel':
                 if(this.curView.cardinality==='1' && !this.model.isNew){
-                    this.setView(this._prevViewOne || 'view');
+                    this.setView(this._prevViewOne || 'browse');
                 }else{
@@ -952,4 +985,48 @@ this.setView(this._prevViewMany || 'list');
         this._trigger('filter.change');
-    }
-    /*
+    }/*
+    
+    click_search: function(evt){
+        var that=this,
+            searchString=$('.evo-search>input').val().toLowerCase(), 
+            searchFunction = function(sString){
+                return function(model){
+                    return that.uiModel.searchfn(model, sString);
+                };
+            },
+            collec;
+
+        this._searchString = searchString;
+        if(searchString){
+            var models=(this.collection||this.model.collection).models
+                    .filter(searchFunction(searchString));
+                    //return that.uiModel.searchin(searchString);
+            if(this.collectionClass){
+                collec=new this.collectionClass(models);
+            }else{
+                collec=new Backbone.Collection(models);
+            }
+            this._filteredCollection=collec;
+            this.setStatus(collec.length+' / '+this.collection.length+' '+this.uiModel.entities);
+        }else{
+            collec=this.collection;
+            this._filteredCollection=null;
+            this.setStatus(collec.length+' '+this.uiModel.entities);
+        }
+        this.pageIndex=0;
+        if(this.curView.setCollection){
+            this.curView.setCollection(collec);
+        }else{
+            this.curView.setModel(collec).get(0);
+        }
+        
+        this.updateNav();
+        this._trigger('search');
+    },
+
+    key_search: function(evt){
+        if(evt.keyCode===13){
+            this.click_search(evt);
+        }
+    },
+
     click_selection: function(evt, ui){
@@ -956,0 +1033,0 @@ var status=this.$('.evo-toolbar .evo-tb-status'),

js/ui-models/apps/comics.data.js

@@ -242,5 +242,5 @@ var uiModels = uiModels || {};
   "finished": true,
-  "have": "",
-  "haveNb": null,
-  "serieNb": null,
+  "have": "1",
+  "haveNb": 1,
+  "serieNb": 1,
   "language": "EN",
@@ -279,3 +279,3 @@ "notes": "",
   "genre": "fantasy",
-  "authors": "",
+  "authors": "Geof Darrow and Lana and Andy Wachowski",
   "complete": true,
@@ -282,0 +282,0 @@ "finished": true,

js/ui-models/apps/comics.js

@@ -6,4 +6,4 @@ var uiModels = uiModels || {};
     label: 'Graphic Novels',
-    entity: 'graphic novel',
-    entities: 'graphic novels',
+    entity: 'graphic novel serie',
+    entities: 'graphic novel series',
     //icon: 'serie.gif',
@@ -28,15 +28,14 @@ leadfield:'title',
                     list: [
-                        {id: 'adv', text: 'Aventure'},
-                        {id: 'conte', text: 'Conte'},
-                        {id: 'eros', text: 'Erotique'},
-                        {id: 'fantasy', text: 'Fantastique'},
+                        {id: 'adv', text: 'Adventure'},
+                        {id: 'conte', text: 'Fairy tale'},
+                        {id: 'eros', text: 'Erotic'},
+                        {id: 'fantasy', text: 'Fantastic'},
                         {id: 'hf', text: 'Heroic Fantasy'},
-                        {id: 'hist', text: 'Historique'},
-                        {id: 'humor', text: 'Humour'},
-                        {id: 'nocat', text: 'Inclassable'},
-                        {id: 'youth', text: 'Jeunesse'},
-                        {id: 'pol', text: 'Policier / Thriller'},
-                        {id: 'rg', text: 'Roman graphique'},
+                        {id: 'hist', text: 'Historic'},
+                        {id: 'humor', text: 'Humor'},
+                        {id: 'nocat', text: 'One of a kind'},
+                        {id: 'youth', text: 'Youth'},
+                        {id: 'pol', text: 'Thriller'},
                         {id: 'sf', text: 'Science-fiction'},
-                        {id: 'sh', text: 'Super Héros'},
+                        {id: 'sh', text: 'Super Heros'},
                         {id: 'wwest', text: 'Western'} 
@@ -57,12 +56,2 @@ ]
                 {
-                    id:'amazon', label:'Amazon', type:'formula', width:100, css:'evol-truncate',
-                    formula:function(m){
-                        var link=m.get('language')=='FR' ?
-                            'http://www.amazon.fr/s/ref=sr_nr_n_1?keywords='
-                            :'http://www.amazon.com/s/ref=nb_sb_noss?url=search-alias%3Dstripbooks&field-keywords=';
-                        link+=encodeURI(m.get('title')+' '+m.get('authors'));
-                        return '<a target="a" href="'+link+'">'+link+'</a>';
-                    }
-                },
-                {
                     id: 'serieNb', attribute: 'serieNb', type: 'integer', width: 15, viewmany: false,
@@ -88,2 +77,12 @@ label: 'Albums', viewcharts:false
                 {
+                    id:'amazon', label:'Amazon', type:'formula', width:100, css:'evol-ellipsis',
+                    formula:function(m){
+                        var link=m.get('language')=='FR' ?
+                            'http://www.amazon.fr/s/ref=sr_nr_n_1?keywords='
+                            :'http://www.amazon.com/s/ref=nb_sb_noss?field-keywords=';
+                        link+=encodeURI(m.get('title')+' '+m.get('authors'));
+                        return '<a target="a" href="'+link+'">'+link+'</a>';
+                    }
+                },
+                {
                     id: 'notes', attribute: 'notes', type: 'textmultiline', label: 'Notes', maxlength: 1000,
@@ -90,0 +89,0 @@ width: 100, height: 6, viewmany: false

js/ui-models/apps/contacts.data.js

@@ -84,6 +84,7 @@ var uiModels = uiModels || {};
     city: 'Paris',
+    state: '',
     country: 'FR',
     category: '1'
 }, {
-    id: '12',
+    id: '7',
     lastname: 'Giulieri',
@@ -93,6 +94,7 @@ firstname: 'Olivier',
     city: 'San Mateo',
+    state: '',
     email: '[e-mail]',
     url: 'http://www.evol-utility.org'
 }, {
-    id: '14',
+    id: '8',
     lastname: 'Martin',
@@ -112,3 +114,3 @@ firstname: 'Mary',
 }, {
-    id: '15',
+    id: '9',
     lastname: 'Munar',
@@ -132,3 +134,3 @@ firstname: 'Roman',
 }, {
-    id: '16',
+    id: '10',
     lastname: 'Smith',
@@ -148,3 +150,3 @@ firstname: 'George',
 }, {
-    id: '17',
+    id: '11',
     lastname: 'Kumar',
@@ -160,4 +162,17 @@ firstname: 'Madhukar',
     city: 'Bengaluru',
+    state: '',
     country: 'IN',
     category: '4'
+}, {
+    id: '12',
+    lastname: 'Cheng',
+    firstname: 'Chris',
+    jobtitle: 'CTO',
+    company: 'MyGreatCorporation',
+    email: '[e-mail]',
+    phonecell: '650 234 8245',
+    city: 'Sunnyvalle',
+    state: 'CA',
+    country: 'US',
+    category: '4'
 }];

js/ui-models/apps/todo.data.js

 var uiModels = uiModels || {};
 uiModels.todo_data = [
-    {id: '1', title: 'Add routing to Evolutility', priority: '2', category: 'others', complete: false, notes: 'Use Backbone router.'},
-    {id: '2', title: 'Fix open bugs', duedate: '2014-07-25', priority: '3', category: 'work', complete: false, notes: 'bla bla'},
-    {id: '3', title: 'Testing App', duedate: '2014-06-11', priority: '3', category: 'work', complete: false, notes: 'test'},
-    {id: '4', title: 'Prepare demo', duedate: '2014-05-12', priority: '1', category: 'work', complete: false, notes: 'Check this out'},
-    {id: '5', title: 'Test latest code', priority: '5', category: 'misc', complete: true, notes: 'notes for my test todo task.'},
+    {id: '1', title: 'Release Evolutility v1', priority: '3', category: 'others', complete: false, description: '10 generic views + a ui-modeling language.', notes:''},
+    {id: '2', title: 'Fix open bugs', duedate: '2014-07-25', priority: '3', category: 'work', complete: false, description: 'bla bla'},
+    {id: '3', title: 'Testing App', duedate: '2014-06-11', priority: '3', category: 'work', complete: false, description: 'test'},
+    {id: '4', title: 'Prepare demo', duedate: '2014-05-12', priority: '1', category: 'work', complete: false, description: 'Check this out'},
+    {id: '5', title: 'Test latest code', priority: '5', category: 'misc', complete: true, description: 'notes for my test todo task.'},
     {id: '6', title: 'Car wash', priority: '4', category: 'work', complete: false},
     {id: '7', title: 'Watch Inception', duedate: '2014-01-10', priority: '5', category: 'fun', complete: true},
-    {id: '8', title: 'Test TODO', duedate: '2015-01-01', priority: '1', category: 'work', complete: true, notes: 'Test TODO '},
+    {id: '8', title: 'Test TODO', duedate: '2015-01-01', priority: '1', category: 'work', complete: true, description: 'Test TODO '},
     {id: '9', title: 'Car wash', priority: '4', category: 'work', complete: false},
@@ -12,0 +12,0 @@ {id: '10', title: 'French translation', priority: '4', category: 'work'},

js/ui-models/apps/todo.js

@@ -16,3 +16,3 @@ var uiModels = uiModels || {};
                     id: 'title', attribute: 'title', type: 'text', label: 'Title', required: true,
-                    placeholder: 'Call John',
+                    //placeholder: 'Call John',
                     maxlength: 255,
@@ -60,7 +60,13 @@ width: 100, viewmany: true
         {
-            type: 'panel', label: 'Notes', width: 100,
+            type: 'panel', label: 'Task Description', label2:'and Notes', width: 100,
             elements: [
                 {
+                    id: 'description', attribute: 'description', type: 'textmultiline', 
+                    label: 'Description', 
+                    maxlength: 1000,
+                    width: 62, height: 5, viewmany: false
+                },
+                {
                     id: 'notes', attribute: 'notes', type: 'textmultiline', label: 'Notes', maxlength: 1000,
-                    width: 100, height: 6, viewmany: false
+                    width: 38, height: 5, viewmany: false
                 }
@@ -67,0 +73,0 @@ ]

js/ui-models/apps/winecellar.data.js

 var uiModels = uiModels || {};
 uiModels.winecellar_data = [
     {
-        "name": "Macrostie",
-        "label_img": "wine/macrostie.gif",
-        "vintage": 2008,
-        "winery": "Mc Williams",
-        "bsize": "750",
-        "type": "red",
-        "price": 20,
-        "grape": "chard",
-        "appellation": "",
-        "country": "US",
-        "region": "Sonoma",
-        "area": "",
-        "buying_date": "2008-05-12",
-        "value": 24,
-        "purchased": 24,
-        "remaining": 16,
-        "notes": "",
-        "drink_from": 2009,
-        "drink_to": 2020,
-        "peak_from": 2014,
-        "peak_to": 2017,
-        "meal": "",
-        "score": "",
-        "score_parker": null,
-        "score_winespectator": null,
-        "comments": "",
-        "degustations": [
+        name: "Macrostie",
+        label_img: "wine/macrostie.gif",
+        vintage: 2008,
+        winery: "Mc Williams",
+        bsize: "750",
+        type: "red",
+        price: 20,
+        grape: "chard",
+        country: "US",
+        region: "Sonoma",
+        buying_date: "2008-05-12",
+        value: 24,
+        purchased: 24,
+        remaining: 16,
+        drink_from: 2009,
+        drink_to: 2020,
+        peak_from: 2014,
+        peak_to: 2017,
+        degustations: [
             {
@@ -62,2 +54,3 @@ "ddate": "2008-05-08",
         grape: "sem",
+        buying_date: "2012-12-12",
         price: 399,
@@ -76,3 +69,3 @@ value: 460,
             {
-                ddate: '2012-04-23',
+                ddate: '2013-04-23',
                 robe: 'golden',
@@ -83,3 +76,3 @@ nose: 'fruity',
             {
-                ddate: '2013-24-12',
+                ddate: '2013-05-12',
                 robe: 'clear',
@@ -124,2 +117,3 @@ nose: 'strong and sweet',
         type: 'red',
+        buying_date: "2013-05-05",
         price: 28,
@@ -176,3 +170,3 @@ drink_from: 2014,
             {
-                ddate: '2013-05-05',
+                ddate: '2013-10-22',
                 robe: 'rich',
@@ -179,0 +173,0 @@ nose: 'strong',

js/ui.js

@@ -13,2 +13,3 @@ /*! ***************************************************************************
 Evol.ViewAction = {};
+Evol.Version = '0.5';
 
@@ -43,8 +44,9 @@ Evol.UI = {
         text: function (id, value, fd, css) {
-            var fCss= 'evo-field form-control ' + (css || ''),
-                h = '<input type="text" id="'+id+'" value="'+value;
+            var h = '<input type="text" id="'+id;
             if(value.indexOf('"')>-1){
                 value=value.replace(/"/g,'\"');
             }
+            h+='" value="'+value;
             if(fd) {
+                h+='" class="evo-field form-control '+(css || '');
                 // properties mapping to html attributes
@@ -60,5 +62,2 @@ _.each(['id', 'min', 'max', 'maxlength', 'placeholder'], function (item) { // 'max-width', 'min-width',
                 }
-                if(fCss){
-                    h+='" class="'+fCss;
-                }
             }
@@ -85,4 +84,4 @@ h+='">';
         },
-        textMJSON: function (id, fVobj, height) {
-            return '<textarea id="'+id+'" rows="'+height+'" class="evol-json evo-field form-control">'+
+        textMJSON: function (id, fVobj, height, disabled) {
+            return '<textarea id="'+id+'" rows="'+height+'" class="evol-json evo-field form-control"'+(disabled?' disabled':'')+'>'+
                 _.escape(JSON.stringify(fVobj, null, '\t'))+'</textarea>';
@@ -342,2 +341,3 @@ },
             '<h3 class="panel-title">'+p.label+'</h3>'+
+            (p.label2?'<div class="evol-subtitle">'+p.label2+'</div>' : '')+
             (p.help?'<p class="evo-panel-help">'+p.help+'</p>':'')+
@@ -344,0 +344,0 @@ '</div>';

package.json

 {
   "name": "evolutility",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "copyright": "(c) 2015 Olivier Giulieri",
@@ -26,2 +26,3 @@ "license": "AGPL-3.0",
     "keywords": [
+        "MDA",
         "MDDA",
@@ -32,4 +33,5 @@ "metadata",
         "UI",
+        "D3",
         "Backbone"
     ]
 }

README.md

@@ -29,7 +29,7 @@ # Evolutility.js
 
-All views for a Backbone model and collection are defined by only one UI-Model acting as a single source of truth for the definition of all UI elements across views.
+All views for a Backbone model and collection share a single UI-Model which defines of all UI elements across views in a simple declarative way.
 
 Evolutility provides 3 types of view
-* Views for a model: View, Edit, Mini (quick edit), JSON.
-* Views for a collection: List, Cards, Charts.
+* Views for a model: Browse, Edit, Mini (quick edit), JSON.
+* Views for a collection: List, Cards, Bubbles, Charts.
 * Views for actions on a model or collection: Export, Filter.
@@ -40,7 +40,12 @@
 ## Views for One model
-### View
+### Browse
 Shows all fields for viewing (read only). Fields are grouped in panels and tabs.
-![screenshot 1](https://raw.githubusercontent.com/evoluteur/evolutility/master/doc/screenshots/one-view.png)
+
+![screenshot 1](https://raw.githubusercontent.com/evoluteur/evolutility/master/doc/screenshots/one-browse.gif)
 ```javascript
-var vw = new Evol.ViewOne.View(myConfig);
+var vw = new Evol.ViewOne.Browse({
+            el: myElement,
+            uiModel: myUIModel,
+            model: myModel
+        });
 ```
@@ -51,17 +56,32 @@ ### Edit
 Fields are grouped in panels and tabs.
-![screenshot 1](https://raw.githubusercontent.com/evoluteur/evolutility/master/doc/screenshots/one-edit.png)
+
+![screenshot 1](https://raw.githubusercontent.com/evoluteur/evolutility/master/doc/screenshots/one-edit.gif)
 ```javascript
-var vw = new Evol.ViewOne.Edit(myConfig);
+var vw = new Evol.ViewOne.Edit({
+            el: myElement,
+            uiModel: myUIModel,
+            model: myModel
+        });
 ```
 ### Mini (Quick Edit)
 Only shows important fields (required or showing as a column in grids). Fields are grouped in a single panel.
-![screenshot 1](https://raw.githubusercontent.com/evoluteur/evolutility/master/doc/screenshots/one-mini.png)
+
+![screenshot 1](https://raw.githubusercontent.com/evoluteur/evolutility/master/doc/screenshots/one-mini.gif)
 ```javascript
-var vw = new Evol.ViewOne.Mini(myConfig);
+var vw = new Evol.ViewOne.Mini({
+            el: myElement,
+            uiModel: myUIModel,
+            model: myModel
+        });
 ```
 ### JSON
 JSON representation of the data.
-![screenshot 1](https://raw.githubusercontent.com/evoluteur/evolutility/master/doc/screenshots/one-json.png)
+
+![screenshot 1](https://raw.githubusercontent.com/evoluteur/evolutility/master/doc/screenshots/one-json.gif)
 ```javascript
-var vw = new Evol.ViewOne.JSON(myConfig);
+var vw = new Evol.ViewOne.JSON({
+            el: myElement,
+            uiModel: myUIModel,
+            model: myModel
+        });
 ```
@@ -72,17 +92,44 @@
 Gives a tabular view of a collection with paging.
-![screenshot 1](https://raw.githubusercontent.com/evoluteur/evolutility/master/doc/screenshots/many-list.png)
+
+![screenshot 1](https://raw.githubusercontent.com/evoluteur/evolutility/master/doc/screenshots/many-list.gif)
 ```javascript
-var vw = new Evol.ViewMany.List(myConfig);
+var vw = new Evol.ViewMany.List({
+            el: myElement,
+            uiModel: myUIModel,
+            colllection: myCollection
+        });
 ```
 ### Cards
 Shows records side by side as cards.
-![screenshot 1](https://raw.githubusercontent.com/evoluteur/evolutility/master/doc/screenshots/many-cards.png)
+
+![screenshot 1](https://raw.githubusercontent.com/evoluteur/evolutility/master/doc/screenshots/many-cards.gif)
 ```javascript
-var vw = new Evol.ViewMany.Cards(myConfig);
+var vw = new Evol.ViewMany.Cards({
+            el: myElement,
+            uiModel: myUIModel,
+            colllection: myCollection
+        });
 ```
+### Bubbles
+The "Bubbles" view displays the data as bubbles with controls to group them and set their color and size (this view uses D3.js). 
+    A tooltip with the Card view of the item show on mouse over.
+
+![screenshot 1](https://raw.githubusercontent.com/evoluteur/evolutility/master/doc/screenshots/many-bubbles.gif)
+```javascript
+var vw = new Evol.ViewMany.Bubbles({
+            el: myElement,
+            uiModel: myUIModel,
+            colllection: myCollection
+        });
+```
 ### Charts
 Draws charts about the collection.
-![screenshot 1](https://raw.githubusercontent.com/evoluteur/evolutility/master/doc/screenshots/many-charts.png)
+
+![screenshot 1](https://raw.githubusercontent.com/evoluteur/evolutility/master/doc/screenshots/many-charts.gif)
 ```javascript
-var vw = new Evol.ViewMany.Charts(myConfig);
+var vw = new Evol.ViewMany.Charts({
+            el: myElement,
+            uiModel: myUIModel,
+            colllection: myCollection
+        });
 ```
@@ -94,11 +141,20 @@
 View to define export options and preview the collection export in different data formats (CSV, TAB, HTML, XML, SQL and JSON).
-![screenshot 1](https://raw.githubusercontent.com/evoluteur/evolutility/master/doc/screenshots/action-export.png)
+
+![screenshot 1](https://raw.githubusercontent.com/evoluteur/evolutility/master/doc/screenshots/action-export.gif)
 ```javascript
-var vw = new Evol.ViewAction.Export(myConfig);
+var vw = new Evol.ViewAction.Export({
+            el: myElement,
+            uiModel: myUIModel,
+            colllection: myCollection
+        });
 ```
 ### Filter
 View used to build a structured query to filter a collection.
-![screenshot 1](https://raw.githubusercontent.com/evoluteur/evolutility/master/doc/screenshots/action-filter.png)
+
+![screenshot 1](https://raw.githubusercontent.com/evoluteur/evolutility/master/doc/screenshots/action-filter.gif)
 ```javascript
-var vw = new Evol.ViewAction.Filter(myConfig);
+var vw = new Evol.ViewAction.Filter({
+            el: myElement,
+            uiModel: myUIModel
+        });
 ```
@@ -130,10 +186,13 @@
                 {
-                    id: 'title', type: 'text', label: 'Title', required: true,
-                    maxlength: 255, width: 100, viewmany: true
+                    id: 'title', type: 'text', label: 'Title', 
+                    required: true, maxlength: 255, 
+                    width: 100, viewmany: true
                 },
                 {
-                    id: 'duedate', type: 'date', label: 'Due Date', width: 62, viewmany: true
+                    id: 'duedate', type: 'date', label: 'Due Date', 
+                    width: 62, viewmany: true
                 },
                 {
-                    id: 'category', type: 'lov', label: 'Category', width: 38, viewmany: true,
+                    id: 'category', type: 'lov', label: 'Category', 
+                    width: 38, viewmany: true,
                     list: [
@@ -164,3 +223,4 @@ {id: 'home', text: 'Home'},
                 {
-                    id: 'complete', type: 'boolean', label: 'Complete', width: 100, viewmany: true
+                    id: 'complete', type: 'boolean', label: 'Complete', 
+                    width: 100, viewmany: true
                 }
@@ -172,4 +232,7 @@ ]
             elements: [
-                {id: 'notes', type: 'textmultiline', label: 'Notes', maxlength: 1000,
-                    width: 100, height: 6, viewmany: false }
+                {
+                    id: 'notes', type: 'textmultiline', label: 'Notes', 
+                    maxlength: 1000,
+                    width: 100, height: 6, viewmany: false 
+                }
             ]
@@ -186,3 +249,4 @@ }
 [AddressBook](http://github.com/evoluteur/evolutility/blob/master/js/ui-models/apps/contacts.js),
-[Wine Cellar](http://github.com/evoluteur/evolutility/blob/master/js/ui-models/apps/winecellar.js).
+[Wine Cellar](http://github.com/evoluteur/evolutility/blob/master/js/ui-models/apps/winecellar.js),
+[Graphic Novels](http://github.com/evoluteur/evolutility/blob/master/js/ui-models/apps/comics.js).
 
@@ -199,2 +263,3 @@ With Evolutility, a single UI-model defines a full single page applications (SPA) to view, edit, filter and export a Backbone model or collection.
 [jQuery] (http://jquery.com),
+[D3.js] (http://d3js.org),
 [Bootstrap] (http://getbootstrap.com/),
@@ -208,3 +273,3 @@ [Bootstrap-datepicker] (http://eternicode.github.io/bootstrap-datepicker/),
 
-Some documentation is in progress at [this page] (http://evoluteur.github.io/evolutility/doc/index.html).
+The (beginning of a) [documentation](http://evoluteur.github.io/evolutility/doc/index.html) is in progress: [ui-models](http://evoluteur.github.io/evolutility/doc/ui-model.html) and [views](http://evoluteur.github.io/evolutility/doc/views.html).
 
@@ -211,0 +276,0 @@ ## Previous incarnation

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

136

increased by4.62%

Lines of code

18609

increased by13.3%

Number of lines in readme file

276

increased by30.81%

Worsened metrics

Total package byte prevSize

2287479

decreased by-12.48%

Number of medium supply chain risk alerts

8

increased by33.33%

No dependency changes