Skip to content

Commit

Permalink
feat(dropdowntree): add dropdowntree wrapper
Browse files Browse the repository at this point in the history
  • Loading branch information
Arne Deruwe committed Jun 4, 2018
1 parent 511d070 commit 6e17a41
Show file tree
Hide file tree
Showing 8 changed files with 232 additions and 125 deletions.
2 changes: 1 addition & 1 deletion build/tasks/bindables.js
View file
Expand Up @@ -18,7 +18,7 @@ gulp.task('bindables:download', function () {
gulp.task('bindables:typedoc', function(){
console.log("NOTE: The 'jquery.d.ts' not found error is expected");

return gulp.src(['./build/tasks/kendo-ui.d.ts'])
return gulp.src(['./temp/kendo-ui.d.ts'])
.pipe(typedoc({
target: 'es6',
includeDeclarations: true,
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Expand Up @@ -54,7 +54,7 @@
"babel": "npm:babel-core@^5.8.22",
"babel-runtime": "npm:babel-runtime@^5.8.20",
"core-js": "npm:core-js@^2.1.3",
"polymer/mutationobservers": "^0.4.2",
"polymer/mutationobservers": "googlearchive/MutationObservers@^0.4.2",
"text": "systemjs/plugin-text@^0.0.4",
"traceur": "jmcriffey/bower-traceur@0.0.91",
"traceur-runtime": "jmcriffey/bower-traceur-runtime@0.0.91"
Expand Down Expand Up @@ -119,7 +119,7 @@
"require-dir": "^0.3.2",
"run-sequence": "^1.0.2",
"through2": "^2.0.0",
"typedoc": "^0.4.4",
"typedoc": "^0.11.1",
"typescript": "^2.4.1",
"vinyl": "^2.0.2",
"vinyl-paths": "^2.1.0",
Expand Down
6 changes: 3 additions & 3 deletions sample/index.html
View file
Expand Up @@ -18,9 +18,9 @@

<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.4.0/bluebird.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.2.1/chroma.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.2.621/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2018.2.516/js/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2018.2.516/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"></script>

<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
Expand Down
263 changes: 146 additions & 117 deletions sample/src/test/test.html
View file
@@ -1,119 +1,148 @@
<template>
<require from="aurelia-kendoui-bridge/listbox/listbox"></require>

<div id="example" role="application">
<div class="demo-section k-content wide">
<ak-list-box k-data-text-field="ContactName"
k-data-value-field="CustomerID"
k-data-source.bind="datasource"
k-draggable.bind="draggable"
k-drop-sources.bind="['selected']"
k-connect-with="selected"
k-toolbar.bind="toolbar">
<select id="optional" title="Optional">
</select>

<!-- unfortunately Aurelia's templating syntax is not supported here -->
<ak-template kendo-template.bind="true">
<span class="k-state-default" style="background-image: url('https://demos.telerik.com/kendo-ui/content/web/Customers/#:data.CustomerID#.jpg')"></span>
<span class="k-state-default">
<h3>#: data.ContactName #</h3>
<p>#: data.CompanyName #</p>
</span>
</ak-template>
</ak-list-box>

<ak-list-box k-data-text-field="ContactName"
k-data-value-field="CustomerID"
k-draggable.bind="draggable"
k-drop-sources.bind="['optional']"
k-connect-with="optional">
<select id="selected" title="Selected"></select>

<!-- unfortunately Aurelia's templating syntax is not supported here -->
<ak-template kendo-template.bind="true">
<span class="k-state-default" style="background-image: url('https://demos.telerik.com/kendo-ui/content/web/Customers/#:data.CustomerID#.jpg')"></span>
<span class="k-state-default">
<h3>#: data.ContactName #</h3>
<p>#: data.CompanyName #</p>
</span>
</ak-template>
</ak-list-box>
</div>
</div>

<style>
#example .demo-section {
max-width: none;
width: 695px;
}

#example .k-listbox {
width: 326px;
height: 310px;
}

#example .k-listbox:first-child {
width: 360px;
margin-right: 1px;
}

.k-ghost {
display:none!important;
}

.custom-placeholder {
opacity: 0.4;
}

#example .k-item {
line-height: 1em;
}

/* Material Theme padding adjustment*/

.k-material #example .k-item,
.k-material #example .k-item.k-state-hover,
.k-materialblack #example .k-item,
.k-materialblack #examplel .k-item.k-state-hover {
padding-left: 5px;
border-left: 0;
}

.k-item > span {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
margin: 20px 10px 10px 5px;
}

#example .k-item > span:first-child,
.k-item.k-drag-clue > span:first-child {
-moz-box-shadow: inset 0 0 30px rgba(0,0,0,.3);
-webkit-box-shadow: inset 0 0 30px rgba(0,0,0,.3);
box-shadow: inset 0 0 30px rgba(0,0,0,.3);
margin: 10px;
width: 50px;
height: 50px;
border-radius: 50%;
background-size: 100%;
background-repeat: no-repeat;
}

#example h3,
.k-item.k-drag-clue h3 {
font-size: 1.2em;
font-weight: normal;
margin: 0 0 1px 0;
padding: 0;
}

#example p {
margin: 0;
padding: 0;
font-size: .8em;
}
</style>
<require from="aurelia-kendoui-bridge/listbox/listbox"></require>
<require from="aurelia-kendoui-bridge/dropdowntree/dropdowntree">
</require>

<div id="example"
role="application">
<div class="demo-section k-content wide">
<ak-list-box k-data-text-field="ContactName"
k-data-value-field="CustomerID"
k-data-source.bind="datasource"
k-draggable.bind="draggable"
k-drop-sources.bind="['selected']"
k-connect-with="selected"
k-toolbar.bind="toolbar">
<select id="optional"
title="Optional">
</select>

<!-- unfortunately Aurelia's templating syntax is not supported here -->
<ak-template kendo-template.bind="true">
<span class="k-state-default"
style="background-image: url('https://demos.telerik.com/kendo-ui/content/web/Customers/#:data.CustomerID#.jpg')"></span>
<span class="k-state-default">
<h3>#: data.ContactName #</h3>
<p>#: data.CompanyName #</p>
</span>
</ak-template>
</ak-list-box>

<ak-list-box k-data-text-field="ContactName"
k-data-value-field="CustomerID"
k-draggable.bind="draggable"
k-drop-sources.bind="['optional']"
k-connect-with="optional">
<select id="selected"
title="Selected"></select>

<!-- unfortunately Aurelia's templating syntax is not supported here -->
<ak-template kendo-template.bind="true">
<span class="k-state-default"
style="background-image: url('https://demos.telerik.com/kendo-ui/content/web/Customers/#:data.CustomerID#.jpg')"></span>
<span class="k-state-default">
<h3>#: data.ContactName #</h3>
<p>#: data.CompanyName #</p>
</span>
</ak-template>
</ak-list-box>

<ak-drop-down-tree k-placeholder="select..."
k-checkboxes.bind="true"
k-value.two-way="chacked"
k-check-all.bind="true"
k-data-source.bind="[
{
text: 'Furniture', expanded: false, items: [
{ text: 'Tables & Chairs' },
{ text: 'Sofas' },
{ text: 'Occasional Furniture' }
]
},
{
text: 'Decor', items: [
{ text: 'Bed Linen' },
{ text: 'Curtains & Blinds' },
{ text: 'Carpets' }
]
}
]"></ak-drop-down-tree>
<div>${chacked}</div>
</div>
</div>

<style>
#example .demo-section {
max-width: none;
width: 695px;
}

#example .k-listbox {
width: 326px;
height: 310px;
}

#example .k-listbox:first-child {
width: 360px;
margin-right: 1px;
}

.k-ghost {
display: none !important;
}

.custom-placeholder {
opacity: 0.4;
}

#example .k-item {
line-height: 1em;
}

/* Material Theme padding adjustment*/

.k-material #example .k-item,
.k-material #example .k-item.k-state-hover,
.k-materialblack #example .k-item,
.k-materialblack #examplel .k-item.k-state-hover {
padding-left: 5px;
border-left: 0;
}

.k-item>span {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
margin: 20px 10px 10px 5px;
}

#example .k-item>span:first-child,
.k-item.k-drag-clue>span:first-child {
-moz-box-shadow: inset 0 0 30px rgba(0, 0, 0, .3);
-webkit-box-shadow: inset 0 0 30px rgba(0, 0, 0, .3);
box-shadow: inset 0 0 30px rgba(0, 0, 0, .3);
margin: 10px;
width: 50px;
height: 50px;
border-radius: 50%;
background-size: 100%;
background-repeat: no-repeat;
}

#example h3,
.k-item.k-drag-clue h3 {
font-size: 1.2em;
font-weight: normal;
margin: 0 0 1px 0;
padding: 0;
}

#example p {
margin: 0;
padding: 0;
font-size: .8em;
}
</style>
</template>

0 comments on commit 6e17a41

Please sign in to comment.