UNPKG

can

Version:

MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.

176 lines (165 loc) 4.59 kB
<style> .breadcrumb li { display: inline-block; padding: 5px 0px; } .breadcrumb li:before { content: ">"; font-weight: normal; } .breadcrumb li:hover { font-weight: bold; cursor: pointer; } .breadcrumb li:last-child { font-weight: bold; } .breadcrumb li:first-child:before { content: "" } .breadcrumb li:last-child:hover { text-decoration: none; cursor: default; } .options li { padding: 3px 5px; } .options li.checked { background-color: yellow; } #selected { margin-top: 20px; border-top: solid 1px silver; } #selected li{ padding-left: 10px; } </style> <div id='out'></div> <script id="app" type="text/stache"> <div><treecombo {items}='locations' title='Locations'/></div> </script> <script id="tree-combo-stash" type='text/stache'> <ul class='breadcrumb'> <li ($click)='emptyBreadcrumb()'>{{title}}</li> {{#each breadcrumb}} <li ($click)='updateBreadcrumb(.)'>{{title}}</li> {{/each}} </ul> <ul class='options'> <content> {{#selectableItems}} <li {{#isSelected}}class='active'{{/isSelected}} ($click)='toggle(.)'> <input type='checkbox' {{#isSelected(.)}}checked{{/isSelected}}/> {{title}} {{#if children.length}} <button class='showChildren' ($click)='showChildren(.,%event)'>+</button> {{/if}} </li> {{/selectableItems}} </content> </ul> </script> <script src="../../node_modules/steal/steal.js" main="@empty"></script> <script type='text/javascript'> steal("can/util", "can/component", "can/map/setter", "can/util/fixture", "can/model", "can/view/stache",function (can) { can.Component.extend({ tag: "treecombo", template: can.view("tree-combo-stash"), viewModel: { items: [], breadcrumb: [], selected: [], title: "@", selectableItems: function(){ var breadcrumb = this.attr("breadcrumb"); // if there's an item in the breadcrumb if(breadcrumb.attr('length')){ // return the last item's children return breadcrumb.attr(""+(breadcrumb.length-1)+'.children'); } else{ // return the top list of items return this.attr('items'); } }, showChildren: function( item, ev ) { ev.stopPropagation(); this.attr('breadcrumb').push(item); }, emptyBreadcrumb: function( ) { this.attr("breadcrumb").attr([], true); }, updateBreadcrumb: function( item ){ var breadcrumb = this.attr("breadcrumb"), index = breadcrumb.indexOf(item); breadcrumb.splice(index+1, breadcrumb.length - index- 1 ); }, toggle: function(item){ var selected = this.attr('selected'), index = selected.indexOf(item); if(index === -1 ){ selected.push(item); } else { selected.splice(index, 1); } }, isSelected: function(item){ return this.attr("selected").indexOf( item ) > -1; } } }); var base = new can.Map({ locations: [ { id: 1, title: "Midwest", children: [ { id: 5, title: "Illinois", children: [ { id: 23423, title: "Chicago"}, { id: 4563, title: "Springfield"}, { id: 4564, title: "Naperville"} ] }, { id: 6, title: "Wisconsin", children: [ { id: 232423, title: "Milwaulkee"}, { id: 45463, title: "Green Bay"}, { id: 45464, title: "Madison"} ] }] }, { id: 2, title: "East Coast", children: [ { id: 25, title: "New York", children: [ { id: 3413, title: "New York"}, { id: 4613, title: "Rochester"}, { id: 4516, title: "Syracuse"} ] }, { id: 6, title: "Pennsylvania", children: [ { id: 2362423, title: "Philadelphia"}, { id: 454663, title: "Harrisburg"}, { id: 454664, title: "Scranton"} ] }] }, { id: 3, title: "West Coast", children: [ { id: 75, title: "California", children: [ { id: 347813, title: "Los Angeles"}, { id: 463213, title: "Sunnyvale"}, { id: 457516, title: "San Diego"} ] }, { id: 66, title: "Oregon", children: [ { id: 23621, title: "Bend"}, { id: 1111, title: "Salem"}, { id: 45461, title: "Eugene"} ] }] }, { id: 4, title: "South", children: [ { id: 65, title: "Texas", children: [ { id: 343413, title: "Austin"}, { id: 463413, title: "Dalas"}, { id: 498516, title: "El Paso"} ] }, { id: 6, title: "Florida", children: [ { id: 2360, title: "Orlando"}, { id: 4540, title: "Tampa"}, { id: 4064, title: "Miami"} ] }] }] }); $("#out").html( can.view("app",base) ) ; }); </script>