1.4.0 (2023-09-04)
- modal: Super Simple Modals π₯ (9f7a910)
- core: custom transitions for present/destroy (ed7e4c2)
- settings: ion-content auto-disable scroll on present (#202)
- settings: parent instance as HTMLElement or string (#193) (56049ae)
- zStack: custom border radius for pushElement (#195) (1eb1f4c)
- fitHeight: calcFitHeight function fallback (#218) (bb89ff7)
- core: fast initialization (#186) (b36600b)
- fitHeight: remastered algorithm (#192) & test (e641a1b) (12b9f9a) (7340ff6) (42bccfa) (a62a2bd) (a4af25c)
- core: improved internal styles mechanics (#189) (23af735)
- fitHeight: improved pane height calculations (#186) (cb8eb05)
- keyboard: keyboard hero v3, v4 ((#215) (#208) (#203) (#188) (#187))
- keyboard: Keyboard improvements for non-cordova android with OSK (#200) (#188) (#187) (8549050)
- keyboard: Keyboard improvements for lower chrome versions (#200) (f23568b)
- types: zStack public methods (4c0f7d0)
- backdrop: pass MouseEvent to onBackdropTap callback (bc8d5ca)
- gestures: upper-than-top gestures unable to move pane by Y for disabled options (2f3280)
- draggable: able to move scrolled pane by draggable element (#184) (9e3eaaa)
- events: getEventClientYX can be undefined #214, #209 (1f283a3)
- events: ios OSK resizes body (#200) (0fc6fac)
- events: keyboard push based on transformY (#200) (e2108e5)
- fitHeight: deal with Ionic framework (029d625)
- fitHeight: calcFitHeight with fitScreenHeight (#192) (016c4d3)
- inverse: calcFitHeight for inverse pane cause animation swing (91359a0)
- modules: modules public methods typings, calcFitHeight fix (deb7de8)
- present: ionic cancel transitions on initialization (#216) (a944d32)
1.3.0 (2022-07-04)
- core: Events emitter and callbacks assignments (64788d0)
Callback enhanced and required simple updates.
All callbacks has been moved under events
key in settings dictionary.
Callbacks now can be assigned with on()
method.
- core: fully modularized (#174) (63b0cbb)
- core: modularized (#174) (07f9d74)
- modules: Horizontal module (#164) (176e327)
- modules: Inverse module (2436337)
- api: calcFitHeight method with animated in params (2327f3b)
- core: remastered
isHidden()
andhide()
methods - events: keyboard hero (#175)
- events: keyboard hero v2 (#175)(#176)
- desktop: text no-selectable, img no-draggable, grab cursor
- gesture: topperThanTop reducer cleared
- break: buildBreakpoint() clear on begin (#181) (e245bca)
- core: events attached before didPresent callback (#170) (5b49dc3)
- desktop: handle mouseleave events (8c6c81f)
- events: disable drag upperThanTop for full height top breakpoint (#171) (d048dbd)
- events: clear steps after fastSwipeClose (#180) (3558cf2)
- events: drag events emitted with position changes (#179) (c1aa175)
- events: hide-on-bottom attribute by recent position on touchend (4804af8)
- events: overscroll-behavior fix safari scroll bounce (c9c6a69)
- events: skipped touchstart event (#177) (4a878f0)
1.2.8 (2021-12-06)
- draggable: reduced zIndex to prevent overlapping (#169) (6196a4e)
- events: android fast drag was interpreted as tap event (#154) (ac7093e)
- events: fixed unexpected jumps on fast drag (1b0d082)
- events: prevent hidden pane to be visible on keyboard (#112) (bf34a24)
- events: touchmove position while transition (7c367a3)
- inverse:
calcFitHeight
for inverse pane cause animation swing (91359a0) - keyboard: detach resize from keyboard events (#112) (5d574d7)
- events: unlock mode show hidden pane on Android #159
- keyboard: fixed keyboard for fitHeight panes - #155
- core: add classes for transitions and z-stack
- gestures:
topperThanTop
gesture smooth on backward - gestures: scroll events remastered for smooth entry scrolls
- core: implemented proper UMD and EMS bundle system
- ci: async build and face typings with public-api
- events: default
touchAngle
is 45
- destroy: allow to destroy without DOM element (#163) (44a0d18)
- docs: commits standards and changelogs
- Functions
.present()
and.destroy()
enhanced to using Promise like functins. #144
await myPane.present({animate: true});
myPane.destroy({animate: true}).then(...);
- Fixed slow drag gesture with velocity when first
touchmove
not firing
- All Z-Stack and 3D Push properties was merged into
zStack
object. Readme
let settings = {
...
zStack: {
pushElements: string[];
minPushHeight?: number;
cardYOffset?: number;
cardZScale?: number;
cardContrast?: number;
stackZAngle?: number;
}
}
- 3D Push transitions and gestures now available as cumulative options with
pushElements
property. Define array of elements which will be pushed when main element execute transitions. All styles from all elements will be accumulated together.
let settings = {
...
zStack: {
pushElements: ['.card-1', '.card-2', '.card-3']
}
}
- Click to elements fixed with
.disableDrag()
method #140 - Fixed css variable
--cupertino-pane-icon-close-color
#139 - Fixed pane jump on drag with positive scroll from lower breakpoints #135
- Added
cssClass
property to settings. Pass custom class for.cupertino-pane-wrapper
here to style later, instead of picking custom class from your element. - Removed
darkmode
property andsetDarkmode()
method. Proper way you can style darkmode with variables:
body.dark {
--cupertino-pane-icon-close-color: #a8a7ae;
--cupertino-pane-background: #1c1c1d;
--cupertino-pane-color: #ffffff;
--cupertino-pane-shadow: 0 4px 16px rgb(0 0 0 / 12%);
--cupertino-pane-border-radius: 20px;
--cupertino-pane-move-background: #424246;
--cupertino-pane-destroy-button-background: #424246;
}
- 3 Panes live environment demo available
- CSS variables available Readme
- Fixed styles for few panes in single DOM #133
- Fixed with internal styles injector in DOM. Minified styles now injected once inside
<head>
tag. - Fixed backdrop with
{ animate:false }
- Keyboard will move pane up, only if focused element is child of Pane
window.resize
events are now automatically managed #127
- Fixed
currentBreak()
method - Fixed and improved keyboard events #125
- Added
.calcFitHeight()
method to re-calculate automatically heightfitHeight: true
, if this value was not proper calculated due DOM issues #123 - Added
maxFitHeight
property to settings to define maximum possible automatically calculated height #122
- Switched
resize
callback toorientationchange
callback for device orientation changes. Fixed issues regarding resize and keyboards. #125
- Added
fitHeight
property for usage pane without breakpoints. OnfitHeight: true
, pane height will automatically calculated before present. Then height will be applied as top breakpoint height, bottom and middle breakpoint will be disabled. See Bulletin demo on example. #113 - Added
fitScreenHeight
property. OnfitScreenHeight: true
, pane height will not be more than screen height.
- Button close renamed to button destroy to avoid confuses. Option renamed
buttonClose
->buttonDestroy
#116 window.resize
events and orientation changing now automatically reset breakpoints and pane to proper position. May be good using in pair withfitScreenHeight: true
#119
- Cordova keyboard hide if pane is hidden #112
- Improved
.preventDismiss()
method and gesture #87
const settings = {
...
onWillDismiss: (e) => {
if (e) {
console.log(e.prevented);
}
}
}
const myPane = new CupertinoPane('.cupertino-pane', settings);
myPane.present({animate: true});
myPane.preventDismiss(true);
- Fixed
setBreakpoints()
method for inversed pane #92 - Fixed
textarea
overflow scroll. Pane disallowed from drag if scroll available and target element is textarea #88 - Fixed horizontal scroll inside pane #102
- Fixed keyboard issues on Android devices with cordova webview
- Fixed drag event and stops laggy on drag pane with touchAngle option #102
- Fixed
onTransitionEnd
callback with top position #105 - Fixed
currentBreak()
detection foronDragEnd
callbac #106 - Fixed height calculation for overflow element #104
- Implemented auto-keyboard handler for cordova applications. Keyboard now will push pane for exact keyboard height. If you would like handle this part by yourself, set option
handleKeyboard: false
.
- Prevent dismiss demo available
- Added
preventDismiss()
method. Using in pair withonWillDismiss()
callback to prevent pane from destroy on custom conditions #82
const settings = {
...
onWillDismiss: () => {
if (disallowDismiss) {
drawer.preventDismiss();
}
}
}
- Z-Deminsion Stack demo available
- Added
fastSwipeClose
for close pane with fast drag to bottom direction #78 - Added
fastSwipeSensivity
property to regulate how long should a swipe event being for automaticaly swipe into next point #78 - Added
pushYOffset
property to realize Z-Deminsion Stack
- Added
moveToHeight(val: **number**)
method. Allow to move pane into exact height position. #73
- Removed excesive padding from inversed
top-to-bottom
overscrolls. #75
- Added
inverse
property which allows to usetop-to-bottom
direction. #58
let settings: CupertinoSettings = {
inverse: true
};
- Added
.setDarkMode({enable: true})
method, to helps maintain color scheme after pane initialization #68 - Added
.setBreakpoints(breakpoints: PaneBreaks)
method. Method updates breakpoints configuration for rendered Pane. #69 - Improved
lowerThanBottom
configuration and become accessable in default mode
- Fixed Commonjs bundle. No more line required on import:
<script>var exports = {"__esModule": true};</script>
- Property
offset
for breaks are not more under support. Renamed withheight
breaks: {
...
middle: {
enabled: true,
height: 400
}
}
- Added
upperThanTop
settings property - Added
touchMoveStopPropagation
settings property. Settrue
to prevent all move events behind pane and backdrop #55 - Added
bounce
property for breakpoints (transition in apple stocks style)
breaks: {
...
middle: {
enabled: true,
height: 400,
bounce: true
}
}
- Added
touchAngle
settings property which allow user set possible pane move angle. Helps to handle horizontal slider elements inside pane such asion-item-sliding
#23 - Added 3d push effect within
pushElement
andpushMinHeight
properties
const settings = {
...
parentElement: 'ion-tabs',
pushElement: 'app-home',
pushMinHeight: 350
}
- Improved drag top gesture
- Auto-preventing accidental unwanted clicks events during pane move gestures by
preventClicks
parameter - Close button touch area fixed
- Changelog created to keep user informed #47
- Better issues templates #48
- Show/Hide backdrop method #43
myPane.backdrop({show: true}); // show
myPane.backdrop({show: false}); // hide
- Element or selector on class creation #40
// String selector
new CupertinoPane('.cupertino-pane');
// HTML element
let element = document.querySelector('.cupertino-pane');
new CupertinoPane(element); // HTMLElement