diff --git a/bower.json b/bower.json index f7c3f0f..f632163 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "knockout-kendo", - "version": "0.8.0", + "version": "0.8.1", "main": "build/knockout-kendo.min.js", "dependencies": { "knockout": ">= 2.0" diff --git a/build/knockout-kendo.js b/build/knockout-kendo.js index d890952..d90c9c6 100644 --- a/build/knockout-kendo.js +++ b/build/knockout-kendo.js @@ -1,5 +1,5 @@ /* - * knockout-kendo 0.8.0 + * knockout-kendo 0.8.1 * Copyright © 2013 Ryan Niemeyer & Telerik * * Licensed under the Apache License, Version 2.0 (the "License"); @@ -221,7 +221,7 @@ ko.kendo.BindingFactory = function() { } }, disposeWhenNodeIsRemoved: element - }).extend({ throttle: 1 }); + }).extend({ throttle: (options.throttle || options.throttle === 0) ? options.throttle : 1 }); //if option is not observable, then dispose up front after executing the logic once if (!ko.isObservable(options[prop])) { @@ -249,10 +249,14 @@ ko.kendo.BindingFactory = function() { //bind to a single event this.handleOneEvent = function(eventName, eventConfig, options, element, widget, childProp, context) { - var handler; + var handler = typeof eventConfig === "function" ? eventConfig : options[eventConfig.call]; - //not an observable, use function as handler with normal KO args - if (eventConfig.call && typeof options[eventConfig.call] === "function") { + //call a function defined directly in the binding definition, supply options that were passed to the binding + if (typeof eventConfig === "function") { + handler = handler.bind(context.$data, options); + } + //use function passed in binding options as handler with normal KO args + else if (eventConfig.call && typeof options[eventConfig.call] === "function") { handler = options[eventConfig.call].bind(context.$data, context.$data); } //option is observable, determine what to write to it @@ -317,6 +321,7 @@ var extendAndRedraw = function(prop) { }; }; + //library is in a closure, use this private variable to reduce size of minified file var createBinding = ko.kendo.bindingFactory.createBinding.bind(ko.kendo.bindingFactory); @@ -648,20 +653,23 @@ createBinding({ max: function(newMax) { this.options.max = newMax; //make sure current value is still valid - if (this.value() > newMax) { + var value = this.value(); + if ((value || value === 0) && value > newMax) { this.value(newMax); } }, min: function(newMin) { this.options.min = newMin; //make sure that current value is still valid - if (this.value() < newMin) { + var value = this.value(); + if ((value || value === 0) && value < newMin ) { this.value(newMin); } } } }); + createBinding({ name: "kendoPanelBar", async: true @@ -672,7 +680,8 @@ createBinding({ parent: "kendoPanelBar", watch: { enabled: ENABLE, - expanded: [EXPAND, COLLAPSE] + expanded: [EXPAND, COLLAPSE], + selected: [SELECT] }, childProp: "item", events: { @@ -683,6 +692,10 @@ createBinding({ collapse: { writeTo: EXPANDED, value: false + }, + select: { + writeTo: SELECTED, + value: VALUE } }, async: true @@ -734,6 +747,44 @@ createBinding({ } }); +createBinding({ + name: "kendoSortable", + defaultOption: DATA, + events: { + end: function(options, e) { + var dataKey = "__ko_kendo_sortable_data__", + data = e.action !== "receive" ? ko.dataFor(e.item[0]) : e.draggableEvent[dataKey], + items = options.data, + underlyingArray = options.data; + + //remove item from its original position + if (e.action === "sort" || e.action === "remove") { + underlyingArray.splice(e.oldIndex, 1); + + //keep track of the item between remove and receive + if (e.action === "remove") { + e.draggableEvent[dataKey] = data; + } + } + + //add the item to its new position + if (e.action === "sort" || e.action === "receive") { + underlyingArray.splice(e.newIndex, 0, data); + + //clear the data we passed + delete e.draggableEvent[dataKey]; + + //we are moving the item ourselves via the observableArray, cancel the draggable and hide the animation + $(e.draggableEvent.target).hide(); + e.preventDefault(); + } + + //signal that the observableArray has changed now that we are done changing the array + items.valueHasMutated(); + } + } +}); + createBinding({ name: "kendoSplitter", async: true diff --git a/build/knockout-kendo.min.js b/build/knockout-kendo.min.js index 50b75df..647cc92 100644 --- a/build/knockout-kendo.min.js +++ b/build/knockout-kendo.min.js @@ -1,5 +1,5 @@ /* - * knockout-kendo 0.8.0 + * knockout-kendo 0.8.1 * Copyright © 2013 Ryan Niemeyer & Telerik * * Licensed under the Apache License, Version 2.0 (the "License"); @@ -14,4 +14,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -!function(a){"function"==typeof require&&"object"==typeof exports&&"object"==typeof module?a(require("knockout"),require("jquery"),require("kendo")):"function"==typeof define&&define.amd?define(["knockout","jquery","kendo"],a):a(window.ko,window.jQuery,window.kendo)}(function(a,b,c,d){c=c||window.kendo,a.kendo=a.kendo||{},a.kendo.BindingFactory=function(){var e=this;this.createBinding=function(c){if(b()[c.parent||c.name]){var d={};d.init=function(a,b,f,g,h){var i=e.buildOptions(c,b);return i.async===!0||c.async===!0&&i.async!==!1?void setTimeout(function(){d.setup(a,i,h)},0):(d.setup(a,i,h),i&&i.useKOTemplates?{controlsDescendantBindings:!0}:void 0)},d.setup=function(d,f,g){var h,i=b(d);e.setupTemplates(c.templates,f,d,g),h=e.getWidget(c,f,i),e.handleEvents(f,c,d,h,g),e.watchValues(h,f,c,d),h.destroy&&a.utils.domNodeDisposal.addDisposeCallback(d,function(){h.destroy()})},d.options={},d.widgetConfig=c,a.bindingHandlers[c.bindingName||c.name]=d}},this.buildOptions=function(b,d){var e=b.defaultOption,f=a.utils.extend({},a.bindingHandlers[b.name].options),g=a.utils.unwrapObservable(d());return g instanceof c.data.DataSource||"object"!=typeof g||null===g||e&&!(e in g)?f[e]=d():a.utils.extend(f,g),f};var f=function(b,c){return function(d){return a.renderTemplate(b,c.createChildContext(d._raw&&d._raw()||d))}};this.setupTemplates=function(b,c,d,e){var g,h,i,j;if(b&&c&&c.useKOTemplates){for(g=0,h=b.length;h>g;g++)i=b[g],c[i]&&(c[i]=f(c[i],e));j=c.dataBound,c.dataBound=function(){a.memoization.unmemoizeDomNodeAndDescendants(d),j&&j.apply(this,arguments)}}},this.unwrapOneLevel=function(b){var d,e={};if(b)if(b instanceof c.data.DataSource)e=b;else if("object"==typeof b)for(d in b)e[d]=a.utils.unwrapObservable(b[d]);return e},this.getWidget=function(b,c,d){var e;if(b.parent){var f=d.closest("[data-bind*='"+b.parent+":']");e=f.length?f.data(b.parent):null}else e=d[b.name](this.unwrapOneLevel(c)).data(b.name);return a.isObservable(c.widget)&&c.widget(e),e},this.watchValues=function(a,b,c,d){var f,g=c.watch;if(g)for(f in g)g.hasOwnProperty(f)&&e.watchOneValue(f,a,b,c,d)},this.watchOneValue=function(c,e,f,g,h){var i=a.computed({read:function(){var i,j,k=g.watch[c],l=a.utils.unwrapObservable(f[c]),m=g.parent?[h]:[];b.isArray(k)?k=e[l?k[0]:k[1]]:"string"==typeof k?k=e[k]:j=!0,k&&f[c]!==d&&(j?m.push(l,f):(i=k.apply(e,m),m.push(l)),(j||i!==l)&&k.apply(e,m))},disposeWhenNodeIsRemoved:h}).extend({throttle:1});a.isObservable(f[c])||i.dispose()},this.handleEvents=function(a,b,c,d,f){var g,h,i=b.events;if(i)for(g in i)i.hasOwnProperty(g)&&(h=i[g],"string"==typeof h&&(h={value:h,writeTo:h}),e.handleOneEvent(g,h,a,c,d,b.childProp,f))},this.handleOneEvent=function(b,c,d,e,f,g,h){var i;c.call&&"function"==typeof d[c.call]?i=d[c.call].bind(h.$data,h.$data):c.writeTo&&a.isWriteableObservable(d[c.writeTo])&&(i=function(a){var b,f;g&&a[g]&&a[g]!==e||(b=c.value,f="string"==typeof b&&this[b]?this[b](g&&e):b,d[c.writeTo](f))}),i&&f.bind(b,i)}},a.kendo.bindingFactory=new a.kendo.BindingFactory,a.kendo.setDataSource=function(b,d,e){var f,g;return d instanceof c.data.DataSource?void b.setDataSource(d):(e&&e.useKOTemplates||(f=a.mapping&&d&&d.__ko_mapping__,g=d&&f?a.mapping.toJS(d):a.toJS(d)),void b.dataSource.data(g||d))},function(){var a=c.data.ObservableArray.fn.wrap;c.data.ObservableArray.fn.wrap=function(b){var c=a.apply(this,arguments);return c._raw=function(){return b},c}}();var e=function(b){return function(c){c&&(a.utils.extend(this.options[b],c),this.redraw(),this.value(.001+this.value()))}},f=a.kendo.bindingFactory.createBinding.bind(a.kendo.bindingFactory),g="clicked",h="close",i="collapse",j="content",k="data",l="enable",m="expand",n="expanded",o="error",p="filter",q="info",r="isOpen",s="max",t="min",u="open",v="palette",w="readonly",x="search",y="selected",z="success",A="size",B="title",C="value",D="values",E="warning";f({name:"kendoAutoComplete",events:{change:C,open:{writeTo:r,value:!0},close:{writeTo:r,value:!1}},watch:{enabled:l,search:[x,h],data:function(b){a.kendo.setDataSource(this,b)},value:C}}),f({name:"kendoButton",defaultOption:g,events:{click:{call:g}},watch:{enabled:l}}),f({name:"kendoCalendar",defaultOption:C,events:{change:C},watch:{max:s,min:t,value:C}}),f({name:"kendoColorPicker",events:{change:C,open:{writeTo:r,value:!0},close:{writeTo:r,value:!1}},watch:{enabled:l,value:C,color:C,palette:v}}),f({name:"kendoComboBox",events:{change:C,open:{writeTo:r,value:!0},close:{writeTo:r,value:!1}},watch:{enabled:l,isOpen:[u,h],data:function(b){a.kendo.setDataSource(this,b)},value:C}}),f({name:"kendoDatePicker",defaultOption:C,events:{change:C,open:{writeTo:r,value:!0},close:{writeTo:r,value:!1}},watch:{enabled:l,max:s,min:t,value:C,isOpen:[u,h]}}),f({name:"kendoDateTimePicker",defaultOption:C,events:{change:C,open:{writeTo:r,value:!0},close:{writeTo:r,value:!1}},watch:{enabled:l,max:s,min:t,value:C,isOpen:[u,h]}}),f({name:"kendoDropDownList",events:{change:C,open:{writeTo:r,value:!0},close:{writeTo:r,value:!1}},watch:{enabled:l,isOpen:[u,h],data:function(b){a.kendo.setDataSource(this,b),b.length&&this.options.optionLabel&&this.select()<0&&this.select(0)},value:C}}),f({name:"kendoEditor",defaultOption:C,events:{change:C},watch:{enabled:l,value:C}}),f({name:"kendoGrid",defaultOption:k,watch:{data:function(b,c){a.kendo.setDataSource(this,b,c)}},templates:["rowTemplate","altRowTemplate"]}),f({name:"kendoListView",defaultOption:k,watch:{data:function(b,c){a.kendo.setDataSource(this,b,c)}},templates:["template"]}),f({name:"kendoMaskedTextBox",defaultOption:C,events:{change:C},watch:{enabled:l,isReadOnly:w,value:C}}),f({name:"kendoMenu",async:!0}),f({name:"kendoMenuItem",parent:"kendoMenu",watch:{enabled:l,isOpen:[u,h]},async:!0}),f({name:"kendoMultiSelect",events:{change:C,open:{writeTo:r,value:!0},close:{writeTo:r,value:!1}},watch:{enabled:l,search:[x,h],data:function(b){a.kendo.setDataSource(this,b)},value:C}});var F=function(a,b){b||0===b?this.show(b,a):this.hide()};f({name:"kendoNotification",watch:{error:function(a){F.call(this,o,a)},info:function(a){F.call(this,q,a)},success:function(a){F.call(this,z,a)},warning:function(a){F.call(this,E,a)}}}),f({name:"kendoNumericTextBox",defaultOption:C,events:{change:C},watch:{enabled:l,value:C,max:function(a){this.options.max=a,this.value()>a&&this.value(a)},min:function(a){this.options.min=a,this.value()g;g++)i=b[g],c[i]&&(c[i]=f(c[i],e));j=c.dataBound,c.dataBound=function(){a.memoization.unmemoizeDomNodeAndDescendants(d),j&&j.apply(this,arguments)}}},this.unwrapOneLevel=function(b){var d,e={};if(b)if(b instanceof c.data.DataSource)e=b;else if("object"==typeof b)for(d in b)e[d]=a.utils.unwrapObservable(b[d]);return e},this.getWidget=function(b,c,d){var e;if(b.parent){var f=d.closest("[data-bind*='"+b.parent+":']");e=f.length?f.data(b.parent):null}else e=d[b.name](this.unwrapOneLevel(c)).data(b.name);return a.isObservable(c.widget)&&c.widget(e),e},this.watchValues=function(a,b,c,d){var f,g=c.watch;if(g)for(f in g)g.hasOwnProperty(f)&&e.watchOneValue(f,a,b,c,d)},this.watchOneValue=function(c,e,f,g,h){var i=a.computed({read:function(){var i,j,k=g.watch[c],l=a.utils.unwrapObservable(f[c]),m=g.parent?[h]:[];b.isArray(k)?k=e[l?k[0]:k[1]]:"string"==typeof k?k=e[k]:j=!0,k&&f[c]!==d&&(j?m.push(l,f):(i=k.apply(e,m),m.push(l)),(j||i!==l)&&k.apply(e,m))},disposeWhenNodeIsRemoved:h}).extend({throttle:1});a.isObservable(f[c])||i.dispose()},this.handleEvents=function(a,b,c,d,f){var g,h,i=b.events;if(i)for(g in i)i.hasOwnProperty(g)&&(h=i[g],"string"==typeof h&&(h={value:h,writeTo:h}),e.handleOneEvent(g,h,a,c,d,b.childProp,f))},this.handleOneEvent=function(b,c,d,e,f,g,h){var i;c.call&&"function"==typeof d[c.call]?i=d[c.call].bind(h.$data,h.$data):c.writeTo&&a.isWriteableObservable(d[c.writeTo])&&(i=function(a){var b,f;g&&a[g]&&a[g]!==e||(b=c.value,f="string"==typeof b&&this[b]?this[b](g&&e):b,d[c.writeTo](f))}),i&&f.bind(b,i)}},a.kendo.bindingFactory=new a.kendo.BindingFactory,a.kendo.setDataSource=function(b,d,e){var f,g;return d instanceof c.data.DataSource?void b.setDataSource(d):(e&&e.useKOTemplates||(f=a.mapping&&d&&d.__ko_mapping__,g=d&&f?a.mapping.toJS(d):a.toJS(d)),void b.dataSource.data(g||d))},function(){var a=c.data.ObservableArray.fn.wrap;c.data.ObservableArray.fn.wrap=function(b){var c=a.apply(this,arguments);return c._raw=function(){return b},c}}();var e=function(b){return function(c){c&&(a.utils.extend(this.options[b],c),this.redraw(),this.value(.001+this.value()))}},f=a.kendo.bindingFactory.createBinding.bind(a.kendo.bindingFactory),g="clicked",h="close",i="collapse",j="content",k="data",l="enable",m="expand",n="expanded",o="error",p="filter",q="info",r="isOpen",s="max",t="min",u="open",v="palette",w="readonly",x="search",y="selected",z="success",A="size",B="title",C="value",D="values",E="warning";f({name:"kendoAutoComplete",events:{change:C,open:{writeTo:r,value:!0},close:{writeTo:r,value:!1}},watch:{enabled:l,search:[x,h],data:function(b){a.kendo.setDataSource(this,b)},value:C}}),f({name:"kendoButton",defaultOption:g,events:{click:{call:g}},watch:{enabled:l}}),f({name:"kendoCalendar",defaultOption:C,events:{change:C},watch:{max:s,min:t,value:C}}),f({name:"kendoColorPicker",events:{change:C,open:{writeTo:r,value:!0},close:{writeTo:r,value:!1}},watch:{enabled:l,value:C,color:C,palette:v}}),f({name:"kendoComboBox",events:{change:C,open:{writeTo:r,value:!0},close:{writeTo:r,value:!1}},watch:{enabled:l,isOpen:[u,h],data:function(b){a.kendo.setDataSource(this,b)},value:C}}),f({name:"kendoDatePicker",defaultOption:C,events:{change:C,open:{writeTo:r,value:!0},close:{writeTo:r,value:!1}},watch:{enabled:l,max:s,min:t,value:C,isOpen:[u,h]}}),f({name:"kendoDateTimePicker",defaultOption:C,events:{change:C,open:{writeTo:r,value:!0},close:{writeTo:r,value:!1}},watch:{enabled:l,max:s,min:t,value:C,isOpen:[u,h]}}),f({name:"kendoDropDownList",events:{change:C,open:{writeTo:r,value:!0},close:{writeTo:r,value:!1}},watch:{enabled:l,isOpen:[u,h],data:function(b){a.kendo.setDataSource(this,b),b.length&&this.options.optionLabel&&this.select()<0&&this.select(0)},value:C}}),f({name:"kendoEditor",defaultOption:C,events:{change:C},watch:{enabled:l,value:C}}),f({name:"kendoGrid",defaultOption:k,watch:{data:function(b,c){a.kendo.setDataSource(this,b,c)}},templates:["rowTemplate","altRowTemplate"]}),f({name:"kendoListView",defaultOption:k,watch:{data:function(b,c){a.kendo.setDataSource(this,b,c)}},templates:["template"]}),f({name:"kendoMaskedTextBox",defaultOption:C,events:{change:C},watch:{enabled:l,isReadOnly:w,value:C}}),f({name:"kendoMenu",async:!0}),f({name:"kendoMenuItem",parent:"kendoMenu",watch:{enabled:l,isOpen:[u,h]},async:!0}),f({name:"kendoMultiSelect",events:{change:C,open:{writeTo:r,value:!0},close:{writeTo:r,value:!1}},watch:{enabled:l,search:[x,h],data:function(b){a.kendo.setDataSource(this,b)},value:C}});var F=function(a,b){b||0===b?this.show(b,a):this.hide()};f({name:"kendoNotification",watch:{error:function(a){F.call(this,o,a)},info:function(a){F.call(this,q,a)},success:function(a){F.call(this,z,a)},warning:function(a){F.call(this,E,a)}}}),f({name:"kendoNumericTextBox",defaultOption:C,events:{change:C},watch:{enabled:l,value:C,max:function(a){this.options.max=a,this.value()>a&&this.value(a)},min:function(a){this.options.min=a,this.value()" + }); + + //additional kendoSortable cases +}); \ No newline at end of file diff --git a/spec/runner.html b/spec/runner.html index 62d938b..55598b4 100644 --- a/spec/runner.html +++ b/spec/runner.html @@ -39,6 +39,7 @@ + diff --git a/src/knockout-kendo-core.js b/src/knockout-kendo-core.js index 8cfae4d..dc5bba6 100644 --- a/src/knockout-kendo-core.js +++ b/src/knockout-kendo-core.js @@ -189,7 +189,7 @@ ko.kendo.BindingFactory = function() { } }, disposeWhenNodeIsRemoved: element - }).extend({ throttle: 1 }); + }).extend({ throttle: (options.throttle || options.throttle === 0) ? options.throttle : 1 }); //if option is not observable, then dispose up front after executing the logic once if (!ko.isObservable(options[prop])) { @@ -217,10 +217,14 @@ ko.kendo.BindingFactory = function() { //bind to a single event this.handleOneEvent = function(eventName, eventConfig, options, element, widget, childProp, context) { - var handler; + var handler = typeof eventConfig === "function" ? eventConfig : options[eventConfig.call]; - //not an observable, use function as handler with normal KO args - if (eventConfig.call && typeof options[eventConfig.call] === "function") { + //call a function defined directly in the binding definition, supply options that were passed to the binding + if (typeof eventConfig === "function") { + handler = handler.bind(context.$data, options); + } + //use function passed in binding options as handler with normal KO args + else if (eventConfig.call && typeof options[eventConfig.call] === "function") { handler = options[eventConfig.call].bind(context.$data, context.$data); } //option is observable, determine what to write to it @@ -283,4 +287,4 @@ var extendAndRedraw = function(prop) { this.value(0.001 + this.value()); } }; -}; \ No newline at end of file +}; diff --git a/src/knockout-kendo.js b/src/knockout-kendo.js index 7c29067..3a1ac14 100644 --- a/src/knockout-kendo.js +++ b/src/knockout-kendo.js @@ -60,6 +60,8 @@ kendo = kendo || window.kendo; //import "knockout-kendoSlider.js" +//import "knockout-kendoSortable.js" + //import "knockout-kendoSplitter.js" //import "knockout-kendoTabStrip.js" diff --git a/src/knockout-kendoNumericTextBox.js b/src/knockout-kendoNumericTextBox.js index 552dc72..3188012 100644 --- a/src/knockout-kendoNumericTextBox.js +++ b/src/knockout-kendoNumericTextBox.js @@ -10,16 +10,18 @@ createBinding({ max: function(newMax) { this.options.max = newMax; //make sure current value is still valid - if (this.value() > newMax) { + var value = this.value(); + if ((value || value === 0) && value > newMax) { this.value(newMax); } }, min: function(newMin) { this.options.min = newMin; //make sure that current value is still valid - if (this.value() < newMin) { + var value = this.value(); + if ((value || value === 0) && value < newMin ) { this.value(newMin); } } } -}); \ No newline at end of file +}); diff --git a/src/knockout-kendoPanelBar.js b/src/knockout-kendoPanelBar.js index 08dfef6..751d6c6 100644 --- a/src/knockout-kendoPanelBar.js +++ b/src/knockout-kendoPanelBar.js @@ -8,7 +8,8 @@ createBinding({ parent: "kendoPanelBar", watch: { enabled: ENABLE, - expanded: [EXPAND, COLLAPSE] + expanded: [EXPAND, COLLAPSE], + selected: [SELECT] }, childProp: "item", events: { @@ -19,6 +20,10 @@ createBinding({ collapse: { writeTo: EXPANDED, value: false + }, + select: { + writeTo: SELECTED, + value: VALUE } }, async: true diff --git a/src/knockout-kendoSortable.js b/src/knockout-kendoSortable.js new file mode 100644 index 0000000..798cfea --- /dev/null +++ b/src/knockout-kendoSortable.js @@ -0,0 +1,37 @@ +createBinding({ + name: "kendoSortable", + defaultOption: DATA, + events: { + end: function(options, e) { + var dataKey = "__ko_kendo_sortable_data__", + data = e.action !== "receive" ? ko.dataFor(e.item[0]) : e.draggableEvent[dataKey], + items = options.data, + underlyingArray = options.data; + + //remove item from its original position + if (e.action === "sort" || e.action === "remove") { + underlyingArray.splice(e.oldIndex, 1); + + //keep track of the item between remove and receive + if (e.action === "remove") { + e.draggableEvent[dataKey] = data; + } + } + + //add the item to its new position + if (e.action === "sort" || e.action === "receive") { + underlyingArray.splice(e.newIndex, 0, data); + + //clear the data we passed + delete e.draggableEvent[dataKey]; + + //we are moving the item ourselves via the observableArray, cancel the draggable and hide the animation + $(e.draggableEvent.target).hide(); + e.preventDefault(); + } + + //signal that the observableArray has changed now that we are done changing the array + items.valueHasMutated(); + } + } +}); \ No newline at end of file