From e086b26bb149f7cc6a8b3693697c003ddfba500c Mon Sep 17 00:00:00 2001 From: kendo-bot Date: Mon, 29 Jul 2024 04:19:06 +0000 Subject: [PATCH] Sync with Kendo UI Professional --- VERSION | 2 +- .../grid/editing/toggle-edit-mode.md | 118 +++++ docs/api/javascript/kendo.md | 23 - docs/controls/pivotgridv2/binding/overview.md | 2 +- docs/knowledge-base/shorten-chart-labels.md | 2 + .../treeview-contextmenu-edit-node-text.md | 5 +- .../sass-themes/font-icons.md | 1 + src/kendo.calendar.js | 3 +- src/kendo.core.js | 37 +- src/kendo.draganddrop.js | 2 +- src/kendo.fx.js | 476 ++++++------------ src/kendo.popup.js | 3 +- src/kendo.window.js | 14 +- tests/fx/animation.js | 67 ++- 14 files changed, 319 insertions(+), 436 deletions(-) create mode 100644 docs-aspnet/html-helpers/data-management/grid/editing/toggle-edit-mode.md diff --git a/VERSION b/VERSION index e7fded56685..4c7466e2372 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -{ "year": 2024, "release": 2, "smallRelease": true } +{ "year": 2024, "release": 3, "smallRelease": false } diff --git a/docs-aspnet/html-helpers/data-management/grid/editing/toggle-edit-mode.md b/docs-aspnet/html-helpers/data-management/grid/editing/toggle-edit-mode.md new file mode 100644 index 00000000000..69a95d13893 --- /dev/null +++ b/docs-aspnet/html-helpers/data-management/grid/editing/toggle-edit-mode.md @@ -0,0 +1,118 @@ +--- +title: Toggle Edit Mode +page_title: Toggle Edit Mode +description: "Learn how to toggle the edit mode of the Telerik UI for {{ site.framework }} Grid." +position: 7 +slug: toggle_edit_mode_grid +--- + + +# Toggle Edit Mode + +As of the R3 2024 release, the {{ site.product }} Grid enables you to toggle its editable state. The feature provides the ability to switch the Grid between Readonly and Editable mode. The Grid can be initialized in either of the states and they can be toggled on the client-side, depending on the application logic. + +For a runnable example, refer to the [Grid Toggle Edit Mode demo](https://demos.telerik.com/{{ site.platform }}/grid/toggle-edit-mode). + +## Setting the Readonly Mode + +To enable the Readonly mode, use the `Editable.Readonly()` configuration method. + +```HtmlHelper + @(Html.Kendo().Grid() + .Name("grid") + .Columns(columns => + { + columns.Bound(p => p.ProductName); + columns.Bound(p => p.UnitPrice).Width(140); + columns.Bound(p => p.UnitsInStock).Width(140); + columns.Bound(p => p.Discontinued).Width(100); + columns.Command(command => + { + command.Edit(); + command.Destroy(); + }).Width(150); + }) + .ToolBar(toolbar => + { + toolbar.Create(); + }) + .Editable(editable => editable + .Mode(GridEditMode.InLine) + .Readonly(true) + ) + .DataSource(dataSource => dataSource + .Ajax() + .PageSize(20) + .ServerOperation(false) + .Model(model => model.Id(p => p.ProductID)) + .Create("Editing_Create", "Grid") + .Read("Editing_Read", "Grid") + .Update("Editing_Update", "Grid") + .Destroy("Editing_Destroy", "Grid") + ) + ) +``` +{% if site.core %} +```TagHelper + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` +{% endif %} + +## Toggling the Edit Mode + +The {{ site.product }} Grid allows you to programmatically alter the editable state of the component through the following methods: + +* [`disableEditing()`](/api/javascript/ui/grid/methods/disableediting)—Disables editing operations. +* [`enableEditing()`](/api/javascript/ui/grid/methods/enableediting)—Enables editing operations. + + +```JavaScript + $(document).ready(function(){ + // Determine whether either of the methods should be invoked. + $("#grid").getKendoGrid().disableEditing(); + $("#grid").getKendoGrid().enableEditing(); + }) +``` + +## See Also + +* [Toggle Edit Mode of the Grid HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/toggle-edit-mode) +* [Server-Side API](/api/grid) +* [Client-Side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid) \ No newline at end of file diff --git a/docs/api/javascript/kendo.md b/docs/api/javascript/kendo.md index 3913482c310..385d1623240 100644 --- a/docs/api/javascript/kendo.md +++ b/docs/api/javascript/kendo.md @@ -1209,29 +1209,6 @@ Returns `true` if the browser supports input placeholders. ##### zoomLevel `Number` *(default: 1)* Returns the current zoom level on a mobile browser (returns 1 on desktop). -### support.transforms `Object` -Returns a number of browser specific transformation properties - -#### support.transforms -##### transforms.css `String` -Returns the CSS prefix of the current browser proprietary transform properties. E.g. "-webkit-", "-moz-", "-o-", "-ms-" - -##### transforms.prefix `String` -Returns the JavaScript prefix of the current browser proprietary transform properties. E.g. "webkit", "Moz", "O", "ms" - -### support.transitions `Object` -Returns a number of browser specific transition properties - -#### support.transitions -##### transitions.css `String` -Returns the CSS prefix of the current browser proprietary transition properties. E.g. "-webkit-", "-moz-", "-o-", "-ms-" - -##### transitions.prefix `String` -Returns the JavaScript prefix of the current browser proprietary transition properties. E.g. "webkit", "Moz", "O", "ms" - -##### transitions.event `String` -Returns the transition end event name in the current browser. E.g. "webkitTransitionEnd", "transitionend", "oTransitionEnd" - ### support.mobileOS `Object` Returns a number of properties that identify the current mobile browser. Parses navigator.userAgent to do it. False on desktop. diff --git a/docs/controls/pivotgridv2/binding/overview.md b/docs/controls/pivotgridv2/binding/overview.md index 05fb63c910d..f75629dff4c 100644 --- a/docs/controls/pivotgridv2/binding/overview.md +++ b/docs/controls/pivotgridv2/binding/overview.md @@ -25,7 +25,7 @@ For more information on binding the PivotGridV2 to data over an OLAP cube, refer The local data binding allows the PivotGridV2 to read data from a JavaScript array. -For more information on binding the PivotGridV2 to local data, refer to the [Local Binding]({$ slug localbinding_kendoui_pivotgridv2 %}) article. +For more information on binding the PivotGridV2 to local data, refer to the [Local Binding](https://docs.telerik.com/kendo-ui/controls/pivotgridv2/binding/local-binding) article. ## See Also diff --git a/docs/knowledge-base/shorten-chart-labels.md b/docs/knowledge-base/shorten-chart-labels.md index 2a0a2a77412..d955788ea44 100644 --- a/docs/knowledge-base/shorten-chart-labels.md +++ b/docs/knowledge-base/shorten-chart-labels.md @@ -73,6 +73,8 @@ The following example demonstrates how to shorten long Chart labels and turn the value = value.substring(0, 10); return value + "..."; } + + return value; } ``` diff --git a/docs/knowledge-base/treeview-contextmenu-edit-node-text.md b/docs/knowledge-base/treeview-contextmenu-edit-node-text.md index d6067f45d69..e320d3ef8e1 100644 --- a/docs/knowledge-base/treeview-contextmenu-edit-node-text.md +++ b/docs/knowledge-base/treeview-contextmenu-edit-node-text.md @@ -59,9 +59,9 @@ How can I edit the text of a TreeView node by using a context menu? $("#menu").kendoContextMenu({ target: "#treeview", - filter: ".k-in", + filter: ".k-treeview-leaf", select: function (e) { - var node = $("#treeview").getKendoTreeView().dataItem($(e.target).closest(".k-item")); + var node = $("#treeview").getKendoTreeView().dataItem($(e.target).closest(".k-treeview-item")); // create and open Window $("
") .html(editTemplate({ node: node })) @@ -79,7 +79,6 @@ How can I edit the text of a TreeView node by using a context menu? var dialog = $(e.currentTarget).closest("[data-role=window]").getKendoWindow(); var textbox = dialog.element.find(".k-textbox"); - debugger; node.set("text", textbox.val()); dialog.close(); diff --git a/docs/styles-and-layout/sass-themes/font-icons.md b/docs/styles-and-layout/sass-themes/font-icons.md index 648991019f8..569a3402afc 100644 --- a/docs/styles-and-layout/sass-themes/font-icons.md +++ b/docs/styles-and-layout/sass-themes/font-icons.md @@ -121,6 +121,7 @@ To set the icon color, use the `color` CSS property. To accommodate an icon in your application, flip it by using the `k-flip-h` and `k-flip-v` predefined CSS classes. ```dojo + diff --git a/src/kendo.calendar.js b/src/kendo.calendar.js index 032a5216a3e..1ea71b2e868 100644 --- a/src/kendo.calendar.js +++ b/src/kendo.calendar.js @@ -25,8 +25,7 @@ let __meta__ = { extractFormat = kendo._extractFormat, template = kendo.template, getCulture = kendo.getCulture, - transitions = kendo.support.transitions, - transitionOrigin = transitions ? transitions.css + "transform-origin" : "", + transitionOrigin = "transform-origin", cellTemplate = template((data) => `${data.value}`), emptyCellTemplate = template(() => ''), otherMonthCellTemplate = template(() => ' '), diff --git a/src/kendo.core.js b/src/kendo.core.js index 0011b9410d3..9942fea1ba5 100644 --- a/src/kendo.core.js +++ b/src/kendo.core.js @@ -1852,7 +1852,7 @@ function pad(number, digits, end) { })(); function getShadows(element) { - var shadow = element.css(kendo.support.transitions.css + "box-shadow") || element.css("box-shadow"), + var shadow = element.css("box-shadow"), radius = shadow ? shadow.match(boxShadowRegExp) || [ 0, 0, 0, 0, 0 ] : [ 0, 0, 0, 0, 0 ], blur = math.max((+radius[3]), +(radius[4] || 0)); @@ -2192,41 +2192,16 @@ function pad(number, digits, end) { support.touch = "ontouchstart" in window; - var docStyle = document.documentElement.style; - var transitions = support.transitions = false, - transforms = support.transforms = false, - elementProto = "HTMLElement" in window ? HTMLElement.prototype : []; + let docStyle = document.documentElement.style; + let elementProto = "HTMLElement" in window ? HTMLElement.prototype : []; + // Transforms and Transitions - no longer required, however these were public properties in the past. + // It is possible some customers may have used them so keep them for the time being. + support.transforms = support.transitions = { css: "", prefix: "", event: "transitionend" }; support.hasHW3D = ("WebKitCSSMatrix" in window && "m11" in new window.WebKitCSSMatrix()) || "MozPerspective" in docStyle || "msPerspective" in docStyle; support.cssFlexbox = ("flexWrap" in docStyle) || ("WebkitFlexWrap" in docStyle) || ("msFlexWrap" in docStyle); - each([ "Moz", "webkit", "O", "ms" ], function() { - var prefix = this.toString(), - hasTransitions = typeof table.style[prefix + "Transition"] === STRING; - - if (hasTransitions || typeof table.style[prefix + "Transform"] === STRING) { - var lowPrefix = prefix.toLowerCase(); - - transforms = { - css: (lowPrefix != "ms") ? "-" + lowPrefix + "-" : "", - prefix: prefix, - event: (lowPrefix === "o" || lowPrefix === "webkit") ? lowPrefix : "" - }; - - if (hasTransitions) { - transitions = transforms; - transitions.event = transitions.event ? transitions.event + "TransitionEnd" : "transitionend"; - } - - return false; - } - }); - table = null; - - support.transforms = transforms; - support.transitions = transitions; - support.devicePixelRatio = window.devicePixelRatio === undefined ? 1 : window.devicePixelRatio; try { diff --git a/src/kendo.draganddrop.js b/src/kendo.draganddrop.js index 96cecfec99f..ca8053e1d18 100644 --- a/src/kendo.draganddrop.js +++ b/src/kendo.draganddrop.js @@ -405,7 +405,7 @@ var __meta__ = { } }); - var TRANSFORM_STYLE = support.transitions.prefix + "Transform", + var TRANSFORM_STYLE = "transform", translate; diff --git a/src/kendo.fx.js b/src/kendo.fx.js index dfbc1a55782..ce3b3c5d1b5 100644 --- a/src/kendo.fx.js +++ b/src/kendo.fx.js @@ -1,6 +1,6 @@ import "./kendo.core.js"; -var __meta__ = { +let __meta__ = { id: "fx", name: "Effects", category: "framework", @@ -9,27 +9,17 @@ var __meta__ = { }; (function($, undefined) { - var kendo = window.kendo, + let kendo = window.kendo, fx = kendo.effects, each = $.each, extend = $.extend, support = kendo.support, - browser = support.browser, - transforms = support.transforms, - transitions = support.transitions, - scaleProperties = { scale: 0, scalex: 0, scaley: 0, scale3d: 0 }, - translateProperties = { translate: 0, translatex: 0, translatey: 0, translate3d: 0 }, - hasZoom = (typeof document.documentElement.style.zoom !== "undefined") && !transforms, matrix3dRegExp = /matrix3?d?\s*\(.*,\s*([\d\.\-]+)\w*?,\s*([\d\.\-]+)\w*?,\s*([\d\.\-]+)\w*?,\s*([\d\.\-]+)\w*?/i, - cssParamsRegExp = /^(-?[\d\.\-]+)?[\w\s]*,?\s*(-?[\d\.\-]+)?[\w\s]*/i, translateXRegExp = /translatex?$/i, oldEffectsRegExp = /(zoom|fade|expand)(\w+)/, singleEffectRegExp = /(zoom|fade|expand)/, - unitRegExp = /[xy]$/i, transformProps = ["perspective", "rotate", "rotatex", "rotatey", "rotatez", "rotate3d", "scale", "scalex", "scaley", "scalez", "scale3d", "skew", "skewx", "skewy", "translate", "translatex", "translatey", "translatez", "translate3d", "matrix", "matrix3d"], transform2d = ["rotate", "scale", "scalex", "scaley", "skew", "skewx", "skewy", "translate", "translatex", "translatey", "matrix"], - transform2units = { "rotate": "deg", scale: "", skew: "px", translate: "px" }, - cssPrefix = transforms.css, round = Math.round, BLANK = "", PX = "px", @@ -41,13 +31,13 @@ var __meta__ = { ORIGIN = "origin", ABORT_ID = "abortId", OVERFLOW = "overflow", - TRANSLATE = "translate", POSITION = "position", COMPLETE_CALLBACK = "completeCallback", - TRANSITION = cssPrefix + "transition", - TRANSFORM = cssPrefix + "transform", - BACKFACE = cssPrefix + "backface-visibility", - PERSPECTIVE = cssPrefix + "perspective", + TRANSITIONEND = "transitionend", + TRANSITION = "transition", + TRANSFORM = "transform", + BACKFACE = "backface-visibility", + PERSPECTIVE = "perspective", DEFAULT_PERSPECTIVE = "1500px", TRANSFORM_PERSPECTIVE = "perspective(" + DEFAULT_PERSPECTIVE + ")", directions = { @@ -107,65 +97,24 @@ var __meta__ = { extend($.fn, { kendoStop: function(clearQueue, gotoEnd) { - if (transitions) { - return fx.stopQueue(this, clearQueue || false, gotoEnd || false); - } else { - return this.stop(clearQueue, gotoEnd); - } + return fx.stopQueue(this, clearQueue || false, gotoEnd || false); } }); - /* jQuery support for all transform animations (FF 3.5/3.6, Opera 10.x, IE9 */ - - if (transforms && !transitions) { - each(transform2d, function(idx, value) { - $.fn[value] = function(val) { - if (typeof val == "undefined") { - return animationProperty(this, value); - } else { - var that = $(this)[0], - transformValue = value + "(" + val + transform2units[value.replace(unitRegExp, "")] + ")"; - - if (that.style.cssText.indexOf(TRANSFORM) == -1) { - $(this).css(TRANSFORM, transformValue); - } else { - that.style.cssText = that.style.cssText.replace(new RegExp(value + "\\(.*?\\)", "i"), transformValue); - } - } - return this; - }; - - $.fx.step[value] = function(fx) { - $(fx.elem)[value](fx.now); - }; - }); - - var curProxy = $.fx.prototype.cur; - $.fx.prototype.cur = function() { - if (transform2d.indexOf(this.prop) != -1) { - return parseFloat($(this.elem)[this.prop]()); - } - - return curProxy.apply(this, arguments); - }; - } - kendo.toggleClass = function(element, classes, options, add) { if (classes) { classes = classes.split(" "); - if (transitions) { - options = extend({ - exclusive: "all", - duration: 400, - ease: "ease-out" - }, options); - - element.css(TRANSITION, options.exclusive + " " + options.duration + "ms " + options.ease); - setTimeout(function() { - element.css(TRANSITION, "").css(HEIGHT); - }, options.duration); // TODO: this should fire a kendoAnimate session instead. - } + options = extend({ + exclusive: "all", + duration: 400, + ease: "ease-out" + }, options); + + element.css(TRANSITION, options.exclusive + " " + options.duration + "ms " + options.ease); + setTimeout(function() { + element.css(TRANSITION, "").css(HEIGHT); + }, options.duration); // TODO: this should fire a kendoAnimate session instead. each(classes, function(idx, value) { element.toggleClass(value, add); @@ -240,7 +189,7 @@ var __meta__ = { for (key in properties) { lowerKey = key.toLowerCase(); - isTransformed = transforms && transformProps.indexOf(lowerKey) != -1; + isTransformed = transformProps.indexOf(lowerKey) != -1; if (!support.hasHW3D && isTransformed && transform2d.indexOf(lowerKey) == -1) { delete properties[key]; @@ -262,137 +211,129 @@ var __meta__ = { return cssValues; } - if (transitions) { - extend(fx, { - transition: function(element, properties, options) { - var css, - delay = 0, - oldKeys = element.data("keys") || [], - timeoutID; - - options = extend({ - duration: 200, - ease: "ease-out", - complete: null, - exclusive: "all" - }, - options - ); - - var stopTransitionCalled = false; - - var stopTransition = function() { - if (!stopTransitionCalled) { - stopTransitionCalled = true; - - if (timeoutID) { - clearTimeout(timeoutID); - timeoutID = null; - } - - element + extend(fx, { + transition: function(element, properties, options) { + let css, + delay = 0, + oldKeys = element.data("keys") || [], + timeoutID; + + options = extend({ + duration: 200, + ease: "ease-out", + complete: null, + exclusive: "all" + }, + options + ); + + let stopTransitionCalled = false; + + let stopTransition = function() { + if (!stopTransitionCalled) { + stopTransitionCalled = true; + + if (timeoutID) { + clearTimeout(timeoutID); + timeoutID = null; + } + + element .removeData(ABORT_ID) .dequeue() .css(TRANSITION, "") .css(TRANSITION); - options.complete.call(element); - } - }; - - options.duration = $.fx ? $.fx.speeds[options.duration] || options.duration : options.duration; - - css = normalizeCSS(element, properties); + options.complete.call(element); + } + }; - $.merge(oldKeys, keys(css)); + options.duration = $.fx ? $.fx.speeds[options.duration] || options.duration : options.duration; - if ($.hasOwnProperty("uniqueSort")) { - element - .data("keys", $.uniqueSort(oldKeys)) - .height(); - } else { - element - .data("keys", $.unique(oldKeys)) - .height(); - } + css = normalizeCSS(element, properties); - element.css(TRANSITION, options.exclusive + " " + options.duration + "ms " + options.ease).css(TRANSITION); - element.css(css).css(TRANSFORM); - - /** - * Use transitionEnd event for browsers who support it - but duplicate it with setTimeout, as the transitionEnd event will not be triggered if no CSS properties change. - * This should be cleaned up at some point (widget by widget), and refactored to widgets not relying on the complete callback if no transition occurs. - * - * For IE9 and below, resort to setTimeout. - */ - if (transitions.event) { - element.one(transitions.event, stopTransition); - if (options.duration !== 0) { - delay = 500; - } - } + $.merge(oldKeys, keys(css)); - timeoutID = setTimeout(stopTransition, options.duration + delay); - element.data(ABORT_ID, timeoutID); - element.data(COMPLETE_CALLBACK, stopTransition); - }, + if ($.hasOwnProperty("uniqueSort")) { + element + .data("keys", $.uniqueSort(oldKeys)) + .height(); + } else { + element + .data("keys", $.unique(oldKeys)) + .height(); + } - stopQueue: function(element, clearQueue, gotoEnd) { - var cssValues, - taskKeys = element.data("keys"), - retainPosition = (!gotoEnd && taskKeys), - completeCallback = element.data(COMPLETE_CALLBACK); + element.css(TRANSITION, options.exclusive + " " + options.duration + "ms " + options.ease).css(TRANSITION); + element.css(css).css(TRANSFORM); + + /** + * Use transitionEnd event for browsers who support it - but duplicate it with setTimeout, as the transitionEnd event will not be triggered if no CSS properties change. + * This should be cleaned up at some point (widget by widget), and refactored to widgets not relying on the complete callback if no transition occurs. + * + * For IE9 and below, resort to setTimeout. + */ + element.one(TRANSITIONEND, stopTransition); + if (options.duration !== 0) { + delay = 500; + } - if (retainPosition) { - cssValues = kendo.getComputedStyles(element[0], taskKeys); - } + timeoutID = setTimeout(stopTransition, options.duration + delay); + element.data(ABORT_ID, timeoutID); + element.data(COMPLETE_CALLBACK, stopTransition); + }, - if (completeCallback) { - completeCallback(); - } + stopQueue: function(element, clearQueue, gotoEnd) { + var cssValues, + taskKeys = element.data("keys"), + retainPosition = (!gotoEnd && taskKeys), + completeCallback = element.data(COMPLETE_CALLBACK); - if (retainPosition) { - element.css(cssValues); - } + if (retainPosition) { + cssValues = kendo.getComputedStyles(element[0], taskKeys); + } - return element - .removeData("keys") - .stop(clearQueue); + if (completeCallback) { + completeCallback(); } - }); - } - function animationProperty(element, property) { - if (transforms) { - var transform = element.css(TRANSFORM); - if (transform == NONE) { - return property == "scale" ? 1 : 0; + if (retainPosition) { + element.css(cssValues); } - var match = transform.match(new RegExp(property + "\\s*\\(([\\d\\w\\.]+)")), - computed = 0; + return element + .removeData("keys") + .stop(clearQueue); + } + }); - if (match) { - computed = parseInteger(match[1]); - } else { - match = transform.match(matrix3dRegExp) || [0, 0, 0, 0, 0]; - property = property.toLowerCase(); - - if (translateXRegExp.test(property)) { - computed = parseFloat(match[3] / match[2]); - } else if (property == "translatey") { - computed = parseFloat(match[4] / match[2]); - } else if (property == "scale") { - computed = parseFloat(match[2]); - } else if (property == "rotate") { - computed = parseFloat(Math.atan2(match[2], match[1])); - } - } + function animationProperty(element, property) { + let transform = element.css(TRANSFORM); + if (transform == NONE) { + return property == "scale" ? 1 : 0; + } + + let match = transform.match(new RegExp(property + "\\s*\\(([\\d\\w\\.]+)")), + computed = 0; - return computed; + if (match) { + computed = parseInteger(match[1]); } else { - return parseFloat(element.css(property)); + match = transform.match(matrix3dRegExp) || [0, 0, 0, 0, 0]; + property = property.toLowerCase(); + + if (translateXRegExp.test(property)) { + computed = parseFloat(match[3] / match[2]); + } else if (property == "translatey") { + computed = parseFloat(match[4] / match[2]); + } else if (property == "scale") { + computed = parseFloat(match[2]); + } else if (property == "rotate") { + computed = parseFloat(Math.atan2(match[2], match[1])); + } } + + return computed; } var EffectSet = kendo.Class.extend({ @@ -406,7 +347,7 @@ var __meta__ = { }, run: function(effects) { - var that = this, + let that = this, effect, idx, jdx, length = effects.length, @@ -452,7 +393,7 @@ var __meta__ = { extend(start, { display: element.data("olddisplay") || "block" }); } - if (transforms && !options.reset) { + if (!options.reset) { target = element.data("targetTransform"); if (target) { @@ -462,10 +403,6 @@ var __meta__ = { start = normalizeCSS(element, start); - if (transforms && !transitions) { - start = strip3DTransforms(start); - } - element.css(start) .css(TRANSFORM); // Nudge @@ -514,7 +451,7 @@ var __meta__ = { }, complete: function() { - var that = this, + let that = this, idx = 0, element = that.element, options = that.options, @@ -531,10 +468,6 @@ var __meta__ = { this.restoreCallback(); - if (hasZoom && !transforms) { - setTimeout(this.restoreCallback.bind(this), 0); // Again jQuery callback in IE8- - } - for (; idx < length; idx ++) { effects[idx].teardown(); } @@ -581,97 +514,13 @@ var __meta__ = { extend(fx, { animate: function(elements, properties, options) { - var useTransition = options.transition !== false; + let useTransition = options.transition !== false; delete options.transition; - if (transitions && "transition" in fx && useTransition) { + if ("transition" in fx && useTransition) { fx.transition(elements, properties, options); } else { - if (transforms) { - elements.animate(strip3DTransforms(properties), { queue: false, show: false, hide: false, duration: options.duration, complete: options.complete }); // Stop animate from showing/hiding the element to be able to hide it later on. - } else { - elements.each(function() { - var element = $(this), - multiple = {}; - - each(transformProps, function(idx, value) { // remove transforms to avoid IE and older browsers confusion - var params, - currentValue = properties ? properties[value] + " " : null; // We need to match - - if (currentValue) { - var single = properties; - - if (value in scaleProperties && properties[value] !== undefined) { - params = currentValue.match(cssParamsRegExp); - if (transforms) { - extend(single, { scale: +params[0] }); - } - } else { - if (value in translateProperties && properties[value] !== undefined) { - var position = element.css(POSITION), - isFixed = (position == "absolute" || position == "fixed"); - - if (!element.data(TRANSLATE)) { - if (isFixed) { - element.data(TRANSLATE, { - top: parseCSS(element, "top") || 0, - left: parseCSS(element, "left") || 0, - bottom: parseCSS(element, "bottom"), - right: parseCSS(element, "right") - }); - } else { - element.data(TRANSLATE, { - top: parseCSS(element, "marginTop") || 0, - left: parseCSS(element, "marginLeft") || 0 - }); - } - } - - var originalPosition = element.data(TRANSLATE); - - params = currentValue.match(cssParamsRegExp); - if (params) { - - var dX = value == TRANSLATE + "y" ? +null : +params[1], - dY = value == TRANSLATE + "y" ? +params[1] : +params[2]; - - if (isFixed) { - if (!isNaN(originalPosition.right)) { - if (!isNaN(dX)) { extend(single, { right: originalPosition.right - dX }); } - } else { - if (!isNaN(dX)) { extend(single, { left: originalPosition.left + dX }); } - } - - if (!isNaN(originalPosition.bottom)) { - if (!isNaN(dY)) { extend(single, { bottom: originalPosition.bottom - dY }); } - } else { - if (!isNaN(dY)) { extend(single, { top: originalPosition.top + dY }); } - } - } else { - if (!isNaN(dX)) { extend(single, { marginLeft: originalPosition.left + dX }); } - if (!isNaN(dY)) { extend(single, { marginTop: originalPosition.top + dY }); } - } - } - } - } - - if (!transforms && value != "scale" && value in single) { - delete single[value]; - } - - if (single) { - extend(multiple, single); - } - } - }); - - if (browser.msie) { - delete multiple.scale; - } - - element.animate(multiple, { queue: false, show: false, hide: false, duration: options.duration, complete: options.complete }); // Stop animate from showing/hiding the element to be able to hide it later on. - }); - } + elements.animate(strip3DTransforms(properties), { queue: false, show: false, hide: false, duration: options.duration, complete: options.complete }); // Stop animate from showing/hiding the element to be able to hide it later on. } } }); @@ -730,7 +579,7 @@ var __meta__ = { return this.compositeRun(); } - var that = this, + let that = this, element = that.element, idx = 0, restore = that.restore, @@ -765,20 +614,14 @@ var __meta__ = { extend(start, { display: element.data("olddisplay") || "block" }); } - if (transforms) { - target = element.data("targetTransform"); + target = element.data("targetTransform"); - if (target) { - start = extend(target, start); - } + if (target) { + start = extend(target, start); } start = normalizeCSS(element, start); - if (transforms && !transitions) { - start = strip3DTransforms(start); - } - element.css(start).css(TRANSFORM); // Trick webkit into re-rendering that.setup(); @@ -812,7 +655,7 @@ var __meta__ = { }, _complete: function() { - var that = this, + let that = this, element = that.element; element @@ -825,10 +668,6 @@ var __meta__ = { element.data("olddisplay", element.css("display")).hide(); } - if (hasZoom && !transforms) { - setTimeout(that.restoreCallback.bind(that), 0); // Again jQuery callback in IE8- - } - that.teardown(); }, @@ -887,7 +726,7 @@ var __meta__ = { }, prepare: function(start, end) { - var that = this, + let that = this, tmp, element = that.element, outerWidth = kendo._outerWidth, @@ -903,13 +742,8 @@ var __meta__ = { end = tmp; } - if (transforms) { - start[direction.transition] = startValue; - end[direction.transition] = endValue; - } else { - start[direction.property] = startValue; - end[direction.property] = endValue; - } + start[direction.transition] = startValue; + end[direction.transition] = endValue; } }); @@ -1020,19 +854,15 @@ var __meta__ = { createEffect("slideTo", { prepare: function(start, end) { - var that = this, + let that = this, element = that.element, options = that.options, offset = options.offset.split(","), reverse = that._reverse; - if (transforms) { - end.translatex = !reverse ? offset[0] : 0; - end.translatey = !reverse ? offset[1] : 0; - } else { - end.left = !reverse ? offset[0] : 0; - end.top = !reverse ? offset[1] : 0; - } + end.translatex = !reverse ? offset[0] : 0; + end.translatey = !reverse ? offset[1] : 0; + element.css("left"); } }); @@ -1375,7 +1205,7 @@ var __meta__ = { container .removeClass("k-fx-end") .removeClass(this._containerClass()) - .off(transitions.event, this.completeProxy); + .off(TRANSITIONEND, this.completeProxy); this._previous.hide().removeClass("k-fx-current"); this.element.removeClass("k-fx-next"); @@ -1397,7 +1227,7 @@ var __meta__ = { return this.compositeRun(); } - var that = this, + let that = this, element = that.element, previous = that._previous, container = element.parents().filter(previous.parents()).first(), @@ -1424,26 +1254,22 @@ var __meta__ = { container.css(OVERFLOW, "hidden"); } - if (!transitions) { - this.complete(); - } else { - element.addClass("k-fx-hidden"); + element.addClass("k-fx-hidden"); - container.addClass(this._containerClass()); + container.addClass(this._containerClass()); - this.completeProxy = this.complete.bind(this); - container.on(transitions.event, this.completeProxy); + this.completeProxy = this.complete.bind(this); + container.on(TRANSITIONEND, this.completeProxy); + kendo.animationFrame(function() { + element.removeClass("k-fx-hidden").addClass("k-fx-next"); + previous.css("display", "").addClass("k-fx-current"); + that._before(previous, element); kendo.animationFrame(function() { - element.removeClass("k-fx-hidden").addClass("k-fx-next"); - previous.css("display", "").addClass("k-fx-current"); - that._before(previous, element); - kendo.animationFrame(function() { - container.removeClass("k-fx-start").addClass("k-fx-end"); - that._after(previous, element); - }); + container.removeClass("k-fx-start").addClass("k-fx-end"); + that._after(previous, element); }); - } + }); return deferred.promise(); }, diff --git a/src/kendo.popup.js b/src/kendo.popup.js index 4b29bd25d29..0919e9046af 100644 --- a/src/kendo.popup.js +++ b/src/kendo.popup.js @@ -39,8 +39,7 @@ var __meta__ = { DOCUMENT_ELEMENT = $(document.documentElement), WINDOW = $(window), SCROLL = "scroll", - cssPrefix = support.transitions.css, - TRANSFORM = cssPrefix + "transform", + TRANSFORM = "transform", extend = $.extend, NS = ".kendoPopup", styles = ["font-size", diff --git a/src/kendo.window.js b/src/kendo.window.js index 03817d94bc5..b030b885879 100644 --- a/src/kendo.window.js +++ b/src/kendo.window.js @@ -2143,15 +2143,11 @@ import "./kendo.html.button.js"; position.top = constrain(top, wnd.minTop, wnd.maxTop); } - if (kendo.support.transforms) { - $(wnd.wrapper).css( - "transform", "translate(" + - (position.left - wnd.initialPointerPosition.left) + "px, " + - (position.top - wnd.initialPointerPosition.top) + "px)" - ); - } else { - $(wnd.wrapper).css(position); - } + $(wnd.wrapper).css( + "transform", "translate(" + + (position.left - wnd.initialPointerPosition.left) + "px, " + + (position.top - wnd.initialPointerPosition.top) + "px)" + ); }, diff --git a/tests/fx/animation.js b/tests/fx/animation.js index d1c80a458de..843ce8ee114 100644 --- a/tests/fx/animation.js +++ b/tests/fx/animation.js @@ -1,42 +1,37 @@ (function() { var animate = kendo.animate, - transforms = kendo.support.transforms, matrix3dRegExp = /matrix3?d?\s*\(.*,\s*([\d\.\-]+)\w*?,\s*([\d\.\-]+)\w*?,\s*([\d\.\-]+)\w*?,\s*([\d\.\-]+)\w*?/i, translateXRegExp = /translatex?$/i, - TRANSFORM = kendo.support.transforms.css + "transform", + TRANSFORM = "transform", span; function animationProperty(element, property) { - if (transforms) { - var transform = element.css(TRANSFORM); - if (transform == "none") { - return property == "scale" ? 1 : 0; - } + var transform = element.css(TRANSFORM); + if (transform == "none") { + return property == "scale" ? 1 : 0; + } - var match = transform.match(new RegExp(property + "\\s*\\(([\\d\\w\\.]+)")), - computed = 0; - - if (match) { - computed = parseInt(match[1], 10); - } else { - match = transform.match(matrix3dRegExp) || [0, 0, 0, 0, 0]; - property = property.toLowerCase(); - - if (translateXRegExp.test(property)) { - computed = parseFloat(match[3] / match[2]); - } else if (property == "translatey") { - computed = parseFloat(match[4] / match[2]); - } else if (property == "scale") { - computed = parseFloat(match[2]); - } else if (property == "rotate") { - computed = parseFloat(Math.atan2(match[2], match[1])); - } - } + var match = transform.match(new RegExp(property + "\\s*\\(([\\d\\w\\.]+)")), + computed = 0; - return computed; + if (match) { + computed = parseInt(match[1], 10); } else { - return element.css(property); + match = transform.match(matrix3dRegExp) || [0, 0, 0, 0, 0]; + property = property.toLowerCase(); + + if (translateXRegExp.test(property)) { + computed = parseFloat(match[3] / match[2]); + } else if (property == "translatey") { + computed = parseFloat(match[4] / match[2]); + } else if (property == "scale") { + computed = parseFloat(match[2]); + } else if (property == "rotate") { + computed = parseFloat(Math.atan2(match[2], match[1])); + } } + + return computed; } describe("kendo.animate", function() { @@ -295,19 +290,17 @@ span.css({ position: "absolute", display: "block", left: 10, width: 10 }); var position = 1; - if (transforms) { - span.css(TRANSFORM, "translateX(10px)"); - } + span.css(TRANSFORM, "translateX(10px)"); span.kendoAnimate({ effects: "slideIn:right", duration: 20, init: function() { - position = (transforms ? animationProperty(span, "translateX") : span.offset().left); + position = animationProperty(span, "translateX"); }, complete: function() { assert.isOk(position == -span.width()); - assert.isOk((transforms ? animationProperty(span, "translateX") : span.offset().left) === 0); + assert.isOk(animationProperty(span, "translateX") === 0); done(); } }); @@ -317,19 +310,17 @@ span.css({ position: "absolute", display: "block", top: 10 }); var position = 1; - if (transforms) { - span.css(TRANSFORM, "translateY(10px)"); - } + span.css(TRANSFORM, "translateY(10px)"); span.kendoAnimate({ effects: "slideIn:down", duration: 20, init: function() { - position = (transforms ? animationProperty(span, "translateY") : span.offset().top); + position = animationProperty(span, "translateY"); }, complete: function() { assert.isOk(position == -span.height()); - assert.isOk((transforms ? animationProperty(span, "translateY") : span.offset().top) === 0); + assert.isOk(animationProperty(span, "translateY") === 0); done(); } });