Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

This repo contains example code for ionic4. Get Step by Step tutorial of this repo examples using https://ampersandacademy.com/tutorials/ionic-framework-4

Stars: ✭ 37 (-86.14%)

Mutual labels: mobile, cordova, ionic

Ionic2 Reddit Reader

Ionic 2 Sample App

Stars: ✭ 128 (-52.06%)

Mutual labels: mobile, cordova, ionic

Swiped Events

Adds `swiped` events to the DOM in 0.7k of pure JavaScript

Stars: ✭ 249 (-6.74%)

Mutual labels: cordova, swipe, touch

React Easy Swipe

Easy handler for common swipe operations

Stars: ✭ 85 (-68.16%)

Mutual labels: mobile, swipe, touch

react-gallery-carousel

Mobile-friendly gallery carousel 🎠 with server side rendering, lazy loading, fullscreen, thumbnails, touch, mouse emulation, RTL, keyboard navigation and customisations.

Stars: ✭ 178 (-33.33%)

Mutual labels: touch, modal, swipe

Vuetify Swipeout

👆 A swipe out example built with Vue CLI 3 + Vuetify + Swiper.

Stars: ✭ 117 (-56.18%)

Mutual labels: mobile, swipe, touch

Ionic Collection

🤘 Looking for about Ionic Framework?

Stars: ✭ 101 (-62.17%)

Mutual labels: mobile, cordova, ionic

React Swipeable

React swipe event handler hook

Stars: ✭ 1,348 (+404.87%)

Mutual labels: mobile, swipe, touch

Slider

Touch swipe image slider/slideshow/gallery/carousel/banner mobile responsive bootstrap

Stars: ✭ 2,046 (+666.29%)

Mutual labels: mobile, swipe, touch

React Drag Drawer

A responsive mobile drawer that is draggable on mobile, and falls back to a modal on desktop

Stars: ✭ 135 (-49.44%)

Mutual labels: mobile, modal, touch

v-cupertino

A Vue 3 Wrapper for Cupertino Pane Library

Stars: ✭ 17 (-93.63%)

Mutual labels: cordova, ionic, touch

ionic-docker

An ionic image for CI

Stars: ✭ 56 (-79.03%)

Mutual labels: cordova, ionic

keyonic-v2

A Keycloak Mobile Implementation using Angular v4 and Ionic v3

Stars: ✭ 23 (-91.39%)

Mutual labels: cordova, ionic

cordova-plugin-crypto-file

Encrypts source files, works with cordova-plugin-ionic-webview

Stars: ✭ 29 (-89.14%)

Mutual labels: cordova, ionic

cordova-plugin-apkupdater

This plugin allows your Android app to download and install compressed updates without the Google Play Store.

Stars: ✭ 46 (-82.77%)

Mutual labels: cordova, ionic

todo-list

TodoList using Ionic2/3 & Firebase: * PWA * SSO Google plus. * Share list via QRcode. * Upload image from Camera or Storage. * Speech Recognition.

Stars: ✭ 18 (-93.26%)

Mutual labels: cordova, ionic

generator-angular-pro

AngularJS project generator for scalable, enterprise-grade web and mobile applications

Stars: ✭ 43 (-83.9%)

Mutual labels: cordova, ionic

View All Similar Projects ➔

Cupertino Panes

Cupertino Panes is multi-functional panes & boards with touch technologies.

Small. 5kb (minified and gzipped). No dependencies.
Accelerated. Hardware accelerated transitions and amazing native behavior.
Progressive. Useful for mobile/web/hybrid applications.

Right like in Apple Maps, Apple Stocks, Apple Music and other modern apps.

⭐ We appreciate your star, it helps!

Demonstration
Financial Contributors
Supporting platforms
Getting Started
Settings
Breakpoints
Z-Stack
Callbacks
Public Methods
Attributes
CSS Variables
Keyboard issues
Future Goals
Contributors
Changelog
License

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

Demonstration

Supporting platforms

Getting Started

Install via NPM

npm install cupertino-pane

Use from CDN

If you don't want to include Cupertino Pane files in your project, you may use it from CDN. The following files are available:

<script src="https://unpkg.com/cupertino-pane/dist/cupertino-pane.js"></script>
<script src="https://unpkg.com/cupertino-pane/dist/cupertino-pane.min.js"></script>

Include Files To App/Website

<!DOCTYPE html>
<html lang="en">
<body>
    ...
    <script src="path/to/cupertino-pane.min.js"></script>
</body>
</html>

Add HTML Layout

<div class="cupertino-pane">
    <h1>Header</h1>
    <div class="content">Content</div>    
</div>

Additional CSS Styles

.cupertino-pane {
    margin: 20px;
}

Initialize Cupertino Pane

<body>
  ...
  <script>
  window.onload = function () {
    var myPane = new CupertinoPane(
      '.cupertino-pane', // Pane container selector
      { 
        parentElement: 'body', // Parent container
        breaks: {
            middle: { enabled: true, height: 300, bounce: true },
            bottom: { enabled: true, height: 80 },
        },
        onDrag: () => console.log('Drag event')
      }
    );
    myPane.present({animate: true});
  };
  </script>
</body>

jQuery example

$(document).ready(function () {
  //initialize pane when document ready
  var myPane = new CupertinoPane('.cupertino-pane', { /* ... */ });
  myPane.present({animate: true});
});

As an ES module

Cupertino Pane package comes with ES module version which can be used where supported or with bundlers like Webpack or Rollup:

import { CupertinoPane, CupertinoSettings } from 'cupertino-pane';

let settings: CupertinoSettings = { /* ... */ };
let myPane = new CupertinoPane('.cupertino-pane', settings);
    myPane.present({animate: true});

Class creation

You can pass html element or string selector to class constructor

// String selector
new CupertinoPane('.cupertino-pane');

// HTML element
let element = document.querySelector('.cupertino-pane');
new CupertinoPane(element); // HTMLElement

Settings

Common configuration

Property	Type	Default	Description
inverse	`boolean`	false	On `true` will change pane direction from `bottom-to-top` to `top-to-bottom`
parentElement	`string`	Parent element selector	Element selector where pane will rendered
followerElement	`string`	Follower element selector	Element with selector will following pane transitions
cssClass	`string`	null	Additional classes to apply for wrapper to stylize different panes
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
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
animationType	`string`	'ease'	Base transition timing function
animationDuration	`number`	300	Transition property duration
bottomClose	`boolean`	false	Close pane with drag to bottom breakpoint
fastSwipeClose	`boolean`	false	Close pane with fast drag to bottom direction
fastSwipeSensivity	`number`	3	Increase value and fast swipes become heavier
freeMode	`boolean`	false	On `true` will remove automatical magnetic effects to near breakpoint
lowerThanBottom	`boolean`	true	By default allow user to drag pane lower than bottom position. On `false` will automatically place pane to bottom position on lower than bottom attemption
upperThanTop	`boolean`	false	Allow user to drag pane upper than maximum top position. Useful with bulletin style without overflow-y
touchAngle	`number`	null	Allowable angle (in degrees) to trigger touch move
buttonDestroy	`boolean`	true	Determinate whetever close button will render or not
bottomOffset	`number`	0	Margin bottom for pane from screen bottom point
topperOverflow	`boolean`	true	Ability to scroll content inside pane if topper point reached
topperOverflowOffset	`number`	0	Offset from screen bottom to the end of overflow content
showDraggable	`boolean`	true	Render rectangular shape on the top of pane
draggableOver	`boolean`	true	Render rectangular shape over a pane
clickBottomOpen	`boolean`	true	If bottom position reached, simple click to pane will open pane to the next upper point
dragBy	`string[]`	null	Array of selectors for whom elements drag events will be attached. By default drag events attached to pane element. If you are about to drag only with draggable component set option to ['.pane .draggable']
preventClicks	`boolean`	true	Prevent accidental unwanted clicks events during move gestures
handleKeyboard	`boolean`	true	Pane will be pushed up on open keyboard (only for cordova/capacitor/phonegap applications)
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

const pane = new CupertinoPane('.cupertino-pane', { 
  breaks: {
    top: { // Topper point that pane can reach
      enabled: true, // Enable or disable breakpoint
      height: 700, // Pane breakpoint height
      bounce: true // Bounce pane on transition
    },
    middle: { ... },
    bottom: { ... }
  }
});

Bottom and middle heights normalized accross devices by default

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

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 | | ---- | ---- | ----------- | | onDidDismiss | void: () => {} | Call after pane will dissapeared | | onWillDismiss | void: () => {} | Call before pane will dissapeared | | onDidPresent | void: () => {} | Call after pane will present | | onWillPresent | void: () => {} | Call before panel will present | | onDragStart | void: () => {} | Call when detect user drag event on pane | | onDrag | void: () => {} | Call executes on each new position of pane | | onDragEnd | void: () => {} | Executes when drag event complete | | onBackdropTap | void: () => {} | Call when user tap backdrop overlay | | onTransitionStart | void: () => {} | Executes before auto transition and animation start | | onTransitionEnd | void: () => {} | Executes when transition and animation complete |

Public Methods

present({animate: boolean = false})

Will render pane DOM and show pane with setted params.

myPane.present();

moveToBreak('top' | 'middle' | 'bottom')

Will change pane position with animation to selected breakpoint.

myPane.moveToBreak('top');

moveToHeight(val: number)

Will move pane to exact height with animation. Breakpoints will saved.

myPane.moveToHeight(575);

hide()

Dissappear pane from screen, still keep pane in DOM.

myPane.hide();

destroy({animate: boolean = false})

Remove pane from DOM and clear styles

myPane.destroy();

isHidden()

Determinate if pane position was moved out of screen, but pane still exist in DOM. true - in DOM but not visible, false - in DOM and visible, null - not rendered

if (myPane.isHidden()) {
    myPane.moveToBreak('top');
}

currentBreak()

Method return current break position in text format ('top' | 'middle' | 'bottom)

if (myPane.currentBreak() === 'top') {
    myPane.moveToBreak('bottom');
}

disableDrag()

Method disable any drag actions for pane

myPane.disableDrag();

enableDrag()

Method enable any drag actions for pane

myPane.enableDrag();

backdrop({show: boolean = true})

Show/Hide backdrop method

myPane.backdrop({show: true}); // show
myPane.backdrop({show: false}); // hide

setBreakpoints(breakpoints: PaneBreaks)

Method updates breakpoints configuration for rendered Pane

myPane.setBreakpoints({
  top: {
      enabled: true,
      height: 700,
      bounce: true
  },
  middle: { ... },
  bottom: { ... }
});

preventDismiss(boolean = false)

Use this method to prevent dismiss events. Use onWillDismiss() callback to listen if dismiss event prevented.

const settings = {
  ...
  onWillDismiss: (e) => {
    if (e) {
      console.log(e.prevented);
    }
  }
}

const myPane = new CupertinoPane('.cupertino-pane', settings);
myPane.present({animate: true});
myPane.preventDismiss(true);

calcFitHeight()

Force re-calculate height for fitHeight: true in cases when height was calculated not properly.

myPane.calcFitHeight();

Attributes

hide-on-bottom

Set for element to automaticaly hide on reach bottom breakpoint.

<div class="cupertino-pane">
    <h1>Header</h1>
    <div class="content" hide-on-bottom>Content</div>    
</div>

overflow-y

Set for element with overflow ability. By default using for full pane area, but in some cases good useful with header.

<div class="cupertino-pane">
    <h1>Header</h1>
    <div class="content" overflow-y>Content</div>    
</div>

CSS Variables

Variable	Default
--cupertino-pane-background	`#ffffff`
--cupertino-pane-color	`#333333`
--cupertino-pane-shadow	`#0 4px 16px rgba(0,0,0,.12)`
--cupertino-pane-border-radius	`#20px`
--cupertino-pane-move-background	`#c0c0c0`
--cupertino-pane-destroy-button-background	`#ebebeb`
--cupertino-pane-icon-close-color	`#7a7a7e`

Keyboard issues

Inputs and textareas in pane may push mobile keyboard on devices, and close pane visibility. Next cases describe how to proper handle this issues.

Browser/WebView

User's must use input focus/blur callback's to handle keyboard. Example:

<input onfocus="keyboardOpen()" onblur="keyboardClose()" />

function keyboardOpen () {
  pane.moveToBreak('top'); // or moveToHeight(current + keyboardHeight);
}
function keyboardClose () {
  pane.moveToBreak('middle'); // or moveToHeight(current - keyboardHeight);
}

Cordova/Phonegap/Capacitor

By default, we are now handle keyboard in hybrid mobile applications and push pane to exact keyboard height. If you would like handle this part by yourself, set option handleKeyboard: false.

Future Goals

Project under regularly maintanance and bug fixes. All new features and new investigations moved to open collective Goals

Contributors

We are welcome contributions of all kinds from anyone. Please review the contributing guideline.

License

Licensed under the MIT License. View license.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].

Stars: ✭ 267

Visit Git Page 🔗Visit User Page 🔗Visit Issues Page (0) 🔗