issue + 1.2.6 release

tech-systems · Mar 18, 2021 · 93ce9aa · 93ce9aa
1 parent b7d035f
commit 93ce9aa
Show file tree

Hide file tree

Showing 13 changed files with 100 additions and 58 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,44 @@
 # Change Log
 All notable changes to this project will be documented in this file.
 
+## [1.2.6] - 2021-03-18
+
+### BREAKING CHANGES
+- All Z-Stack and 3D Push properties was merged into `zStack` object. [Readme](https://github.com/roman-rr/cupertino-pane/blob/master/README.md#z-stack)
+
+```js
+let settings = {
+  ...
+  zStack: {
+    pushElements: string[];
+    minPushHeight?: number;
+    cardYOffset?: number;
+    cardZScale?: number;
+    cardContrast?: number;
+    stackZAngle?: number;
+  }
+}
+```
+
+### Extra 
+- [Advanced Z-stack available](https://output.jsbin.com/benidub)
+
+### Features
+- 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.
+```js
+let settings = {
+  ...
+  zStack: {
+    pushElements: ['.card-1', '.card-2', '.card-3']
+  }
+}
+```
+
+### Bug Fixes
+- Click to elements fixed with `.disableDrag()` method [#140](https://github.com/roman-rr/cupertino-pane/issues/140)
+- Fixed css variable `--cupertino-pane-icon-close-color` [#139](https://github.com/roman-rr/cupertino-pane/issues/139)
+- Fixed pane jump on drag with positive scroll from lower breakpoints [#135](https://github.com/roman-rr/cupertino-pane/issues/135)
+
 ## [1.2.5] - 2021-02-20
 
 ### BREAKING CHANGES
@@ -23,9 +61,9 @@ body.dark {
 - 3 Panes live environment [demo available](https://jsbin.com/xavifaf)
 
 ### Features
-- CSS variables available [Readme](https://github.com/roman-rr/cupertino-pane/blob/master/CHANGELOG.md#css-variables)
+- CSS variables available [Readme](https://github.com/roman-rr/cupertino-pane/blob/master/README.md#css-variables)
 
-### Bug Fixed
+### Bug Fixes
 - Fixed styles for few panes in single DOM [#133](https://github.com/roman-rr/cupertino-pane/issues/133)
 - Fixed with internal styles injector in DOM. Minified styles now injected once inside `<head>` tag. 
 - Fixed backdrop with `{ animate:false }`

diff --git a/README.md b/README.md
@@ -31,6 +31,9 @@ Cupertino Panes is multi-functional panes & boards with touch technologies. <br>
 * [Supporting platforms](#supporting-platforms)
 * [Getting Started](#getting-started)
 * [Settings](#settings)
+* [Breakpoints](#breakpoints)
+* [Z-Stack](#z-stack)
+* [Callbacks](#callback)
 * [Public Methods](#public-methods)
 * [Attributes](#attributes)
 * [CSS Variables](#css-variables)
@@ -65,14 +68,15 @@ Support this project with your organization. Your logo will show up here with a
 
 ## Demonstration
 - [Base live](https://output.jsbin.com/fuhisey)
+- [Overflow top live](https://output.jsbin.com/baguroy)
+- [Z-stack full live](https://output.jsbin.com/benidub)
+- [Z-Stack simple live](https://output.jsbin.com/daqihir)
+- [3D Push live](https://output.jsbin.com/vidaqa)
 - [3 Panes live](https://jsbin.com/xavifaf)
-- [Z-Stack live](https://output.jsbin.com/wedegox)
+- [Overflow top-middle live](https://output.jsbin.com/piwecad)
 - [Draggable over live](https://jsbin.com/hamedec)
 - [Prevent dismiss live](https://output.jsbin.com/keravam)
 - [Top-to-bottom live](https://output.jsbin.com/muhabuf)
-- [3D Push live](https://output.jsbin.com/tutegad)
-- [Overflow top live](https://output.jsbin.com/baguroy)
-- [Overflow top-middle live](https://output.jsbin.com/piwecad)
 - [Follower live](https://output.jsbin.com/xogavec)
 - [Apple Clips live](https://output.jsbin.com/luqaxud)
 - [Bulletin live](https://output.jsbin.com/maqigod)
@@ -192,9 +196,6 @@ new CupertinoPane(element); // HTMLElement
 | **fitHeight** | `boolean` | 'false' | Automatically calc and define content height as top breakpoint. Middle and bottom breakpoint will be disabled |
 | **maxFitHeight** | `number` | 'null' | Define a maximum possible automatically calculated height with `fitHeight` property |
 | **fitScreenHeight** | `boolean` | 'true' | On `true` will automatically adjust pane maximum height to screen height |
-| **pushElement** | `string` | Push element selector | DOM Element will be pushed and scaled |
-| **pushMinHeight** | `number` | Most bottom available point | Height from which 3d push effect will be started |
-| **pushYOffset** | `number` | Negative margin value to place pushed element upper |
 | **initialBreak** | `'top' \| 'middle' \| 'bottom'` | 'middle' | Initial pane position |
 | **backdrop** | `boolean` | false | Dimmed overlay will rendered with pane if `true` |
 | **backdropOpacity** | `number` | 0.4 | Dimmed overlay opacity value |
@@ -220,6 +221,7 @@ new CupertinoPane(element); // HTMLElement
 | **touchMoveStopPropagation** | `boolean` | false | If enabled, then propagation of "touchmove" will be stopped |
 | **simulateTouch** | `boolean` | true | Simulate touch events for Desktop |
 | **passiveListeners** | `boolean` | true | (Indicates that the function specified by listener will never call preventDefault()) |
+
 ### Breakpoints
 Package now supports 3 base breakpoints
 ```javascript
@@ -241,6 +243,26 @@ Default top height: `window.screen.height - (135 * 0.35)`
 
 Add property `bounce` to break and enjoy transitions in apple stocks style with `cubic-bezier(0.175, 0.885, 0.370, 1.120)`
 
+### Z-Stack
+Configuration for 3D push effects and z-stack
+```js
+let settings = {
+  ...
+  zStack: {
+    pushElements: ['.card-1', '.main-content'],
+    pushYOffset: 10
+  }
+}
+```
+| Property | Type | Default | Description |
+| - | - | - | - |
+| **pushElements** | `string[]` | null | DOM Element will be pushed and scaled |
+| **minPushHeight** | `number` | null | Height from which 3d push effect will be started |
+| **cardYOffset** | `number` | null | Margin value to place pushed elements upper |
+| **cardZScale** | `number` | 0.93 | Scale value for each pushed element |
+| **cardContrast** | `number` | 0.85 | Contrast value for each pushed element |
+| **stackZAngle** | `number` | 160 | Value from 0 to 3000 that define angle of z-stack in common. 0 - 150 positive expontial angle. 150 - 170 = 45 degree angle. 200 - 3000 negative exponential angle |
+
 ### Callbacks
 The function that executes when the event fires.
 | Name | Type | Description |
@@ -399,20 +421,8 @@ By default, we are now handle keyboard in hybrid mobile applications and push pa
 If you would like handle this part by yourself, set option `handleKeyboard: false`.
 
 ## Future Goals
-- [Enhancement] Z-stack with N cards and proper transitions
-- [Feature] Chevron-up draggable
-- [Accurance] Draw experiment application (Normal/TimeStamp/Native) - Native Touch Plugin
-- [Showcase] Touchmove - Z-angle deviation <!-- https://dribbble.com/shots/15220605-Weather-Forecast -->
-- [Platforms] C++ QT version (low lewel programming)
-- [Platforms] C# Blazor (low lewel programming)
-- [Feature] R-Pane (Rectangular pane - safari video frame example)
-- [Feature] iPad slideover
-- [Platforms] RN - bridge to existed swift panes
-- [Platforms] Expo wrapper + Example + Twitter
-- [Docs] (Traffic + Carbon ads) -> Docs engine <!-- Ask Vladimir first + check https://github.com/denoland/doc_website https://github.com/ionic-team/ionic-docs (Swiper, F7, Netlify, Gatsby, DO, GH pages) -->
-- [Showcase] No background - glow for view + (collaboration with arwes)
-- [Showcase] Materials (glass/metal/blur) <!-- https://codepen.io/TurkAysenur/full/ZEpxeYm + glass + metal three -->
-- [Showcase] Apple Music F7
+Project under regularly maintanance and bug fixes. 
+All **new features** and **new investigations** moved to open collective (Goals)[https://opencollective.com/cupertino-pane/conversations/all-goals-and-featured-packages-o60ddaqg]
 
 ## Contributors
 We are welcome contributions of all kinds from anyone. 

diff --git a/dist/cupertino-pane.esm.bundle.js b/dist/cupertino-pane.esm.bundle.js
diff --git a/dist/cupertino-pane.esm.bundle.js.map b/dist/cupertino-pane.esm.bundle.js.map
diff --git a/dist/cupertino-pane.js b/dist/cupertino-pane.js