@progress/kendo-ui
Version:
This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.
3 lines (2 loc) • 3.84 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("kendo.core.js")):"function"==typeof define&&define.amd?define(["exports","kendo.core.min"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).kendo=e.kendo||{},e.kendo._globals=e.kendo._globals||{},e.kendo._globals.Responsivepanel={}))}(this,(function(e){var t,n,o,i,s,a,l;t=window.kendo.jQuery,o="open",i="close",s="click"+(n=".kendoResponsivePanel")+" touchstart"+n+" touchend"+n,a=kendo.ui.Widget,l=a.extend({init:function(e,o){a.fn.init.call(this,e,o),this._guid="_"+kendo.guid(),this._toggleHandler=this._toggleButtonClick.bind(this),this._closeHandler=this._close.bind(this),t(document.documentElement).on(s,this.options.toggleButton,this._toggleHandler),this._registerBreakpoint(),this.options.content&&(kendo.destroy(this.element.children()),this.element.html(this.options.content)),this.element.addClass("k-rpanel k-rpanel-"+this.options.orientation+" "+this._guid),this._resizeHandler=this.resize.bind(this,!0),t(window).on("resize"+n,this._resizeHandler)},_mediaQuery:({breakpoint:e,guid:t,toggleButton:n})=>` (max-width: ${e-1}px) {.${t}.k-rpanel-animate.k-rpanel-left,.${t}.k-rpanel-animate.k-rpanel-right {-webkit-transition: -webkit-transform .2s ease-out;-ms-transition: -ms-transform .2s ease-out;transition: transform .2s ease-out;} .${t}.k-rpanel-top {overflow: hidden;}.${t}.k-rpanel-animate.k-rpanel-top {-webkit-transition: max-height .2s linear;-ms-transition: max-height .2s linear;transition: max-height .2s linear;}} (min-width: ${e}px) {${n} { display: none; } .${t}.k-rpanel-left { float: left; } .${t}.k-rpanel-right { float: right; } .${t}.k-rpanel-left, .${t}.k-rpanel-right {position: relative;-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);-webkit-transform: translateX(0) translateZ(0);-ms-transform: translateX(0) translateZ(0);transform: translateX(0) translateZ(0);} .k-ie9 .${t}.k-rpanel-left { left: 0; } .${t}.k-rpanel-top { max-height: none; }}`,_registerBreakpoint:function(){var e=this.options;this._registerStyle(this._mediaQuery({breakpoint:e.breakpoint,toggleButton:e.toggleButton,guid:this._guid}))},_registerStyle:function(e){var n=t("head,body")[0],o=document.createElement("style"),i=this.options.nonce;i&&o.setAttribute("nonce",i),n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))},options:{name:"ResponsivePanel",content:"",nonce:"",orientation:"left",toggleButton:".k-rpanel-toggle",breakpoint:640,autoClose:!0},events:[o,i],_resize:function(){this.element.removeClass("k-rpanel-animate k-rpanel-expanded"),t(document.documentElement).off(s,this._closeHandler)},_toggleButtonClick:function(e){e.preventDefault(),"touchend"!=e.type&&(this.element.hasClass("k-rpanel-expanded")?this.close():this.open())},open:function(){this.trigger(o)||(this.element.addClass("k-rpanel-animate k-rpanel-expanded"),this.options.autoClose&&t(document.documentElement).on(s,this._closeHandler))},close:function(){this.trigger(i)||(this.element.addClass("k-rpanel-animate").removeClass("k-rpanel-expanded"),t(document.documentElement).off(s,this._closeHandler))},_close:function(e){var n=e.isDefaultPrevented();t(e.target).closest(this.options.toggleButton+",.k-rpanel").length||n||this.close()},destroy:function(){a.fn.destroy.call(this),t(window).off("resize"+n,this._resizeHandler),t(document.documentElement).off(s,this._closeHandler)}}),kendo.ui.plugin(l);var r=kendo;e.__meta__={id:"responsive-panel",name:"Responsive Panel",category:"web",description:"The Responsive Panel widget allows a panel of content to be hidden on mobile devices, available through a toggle button.",depends:["core"]},e.default=r,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=kendo.responsivepanel.min.js.map