diff --git a/README.md b/README.md index 35fd662..2b2df68 100644 --- a/README.md +++ b/README.md @@ -39,7 +39,7 @@ var packages = { ## Changelog -See the [releases page](https://github.com/arkon/ng-sidebar/releases) in the GitHub repo. +See the [releases page](https://github.com/arkon/ng-sidebar/releases) on GitHub. ## Usage @@ -57,7 +57,8 @@ import { SidebarModule } from 'ng-sidebar'; class AppModule {} ``` -In your app component, simply use add a `` wrapper, then place your ``(s) and content within it: +In your app component, simply use add a `` wrapper, then place your ``(s) and content within it. +Your page content should be in some container with a `ng-sidebar-content` attribute. ```typescript @Component({ @@ -72,7 +73,9 @@ In your app component, simply use add a `` wrapper, then p - +
+ +
` @@ -120,7 +123,7 @@ The sidebar has a few public functions: Various class names are attached to the sidebar and container for easier styling. -If you are using Angular 2's default emulated view encapsulation, you may have to use the `>>>` selector to target the sidebar's classes. Check out [Angular's documentation](https://angular.io/docs/ts/latest/guide/component-styles.html#!#-deep-) for more details. Note that the `/deep/` selector [will soon be deprecated](https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/68qSZM5QMRQ/pT2YCqZSomAJ). +If you are using Angular's default emulated view encapsulation, you may have to use the `>>>` selector to target the sidebar's classes. Check out [Angular's documentation](https://angular.io/guide/component-styles#deep) for more details. Note that the `/deep/` selector [will soon be deprecated](https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/68qSZM5QMRQ/pT2YCqZSomAJ). ### Sidebar @@ -150,8 +153,8 @@ If you are using Angular 2's default emulated view encapsulation, you may have t | Class name | Description | | ---------- | ----------- | -| `ng-sidebar-container--animate` | When `animate` is `true` for the container. | | `ng-sidebar__content` | Class of the wrapper `div` for the page content. | +| `ng-sidebar__content--animate` | When `animate` is `true` for the container. | @@ -163,7 +166,7 @@ If you are using Angular 2's default emulated view encapsulation, you may have t | Property name | Type | Default | Description | | ------------- | ---- | ------- | ----------- | -| sidebarContentClass | string | | Additional class name on the `div` wrapping the page contents. | +| contentClass | string | | Additional class name on the `div` wrapping the page contents. | | backdropClass | string | | Additional class name on the overlay element. | | showBackdrop | boolean | `false` | Controls the backdrop state of the sidebar container. This should be two-way bound. | | allowSidebarBackdropControl | boolean | `true` | Determines if the container component respects the sidebar's `showBackdrop` input option. | diff --git a/demo/src/demo/demo.component.ts b/demo/src/demo/demo.component.ts index a5b037a..97e4991 100644 --- a/demo/src/demo/demo.component.ts +++ b/demo/src/demo/demo.component.ts @@ -41,73 +41,66 @@ import { Component, AnimationTransitionEvent } from '@angular/core';

Steal the warm chair right after you get up.

-
- - ng-sidebar -
+
+
+ + ng-sidebar +
-
-

Options

+
+

Options

-

Sidebar

+

Sidebar

-
- - - - -
+
+ + + + +
-
- - -
+
+ + +
-
- - - - -
+
+ + + + +
-
- - - -
+
+ + + +
-

Container

+

Documentation

-
- - - -
+

See the README on GitHub for more options and info.

-

Documentation

+

Download

-

See the README on GitHub.

+

Download from NPM.

+

Source code available on GitHub.

+

Source code for this demo is also on GitHub.

-

Download

+

Some filler content

-

Download from NPM.

-

Source code available on GitHub.

-

Source code for this demo is also on GitHub.

+

Lie on your belly and purr when you are asleep attack feet spit up on light gray carpet instead of adjacent linoleum but scream at teh bath. Throwup on your pillow steal the warm chair right after you get up for cat slap dog in face. Scratch leg; meow for can opener to feed me. Jump off balcony, onto stranger's head sleep on dog bed, force dog to sleep on floor so jump around on couch, meow constantly until given food, . Use lap as chair hide head under blanket so no one can see sleep on keyboard, for lick plastic bags intently sniff hand burrow under covers. Lick butt and make a weird face. Purr for no reason kitty loves pigs but intrigued by the shower, but scratch the furniture. Lay on arms while you're using the keyboard hate dog get video posted to internet for chasing red dot. If it smells like fish eat as much as you wish chase ball of string and favor packaging over toy. Hide head under blanket so no one can see. Kitty power! purr while eating yet lick the other cats behind the couch. Walk on car leaving trail of paw prints on hood and windshield you call this cat food? ears back wide eyed poop on grasses. Scratch the furniture flop over russian blue or eat grass, throw it back up for hide at bottom of staircase to trip human. Tuxedo cats always looking dapper scratch leg; meow for can opener to feed me. Under the bed need to chase tail claws in your leg, and loves cheeseburgers and intently stare at the same spot chase dog then run away. Nap all day lick sellotape pooping rainbow while flying in a toasted bread costume in space ignore the squirrels, you'll never catch them anyway but destroy couch. Lick yarn hanging out of own butt knock dish off table head butt cant eat out of my own dish lick plastic bags pee in the shoe. Hopped up on catnip chirp at birds kitty power! sleep nap. Climb leg damn that dog . Flee in terror at cucumber discovered on floor. Stare at ceiling light sun bathe. Dream about hunting birds when in doubt, wash or intently stare at the same spot, yet shove bum in owner's face like camera lens. Cat slap dog in face. Need to chase tail meowwww.

+

Brown cats with pink ears stares at human while pushing stuff off a table i like big cats and i can not lie or chase laser scamper have secret plans, but fall asleep on the washing machine. Stare at ceiling destroy couch as revenge russian blue for leave fur on owners clothes slap owner's face at 5am until human fills food dish for claws in your leg stare at wall turn and meow stare at wall some more meow again continue staring . Steal the warm chair right after you get up use lap as chair howl uncontrollably for no reason for kitty scratches couch bad kitty so poop in the plant pot, wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again. Paw at beetle and eat it before it gets away chase dog then run away. Sleep on dog bed, force dog to sleep on floor i am the best refuse to leave cardboard box yet lounge in doorway but Gate keepers of hell. My left donut is missing, as is my right destroy the blinds refuse to leave cardboard box. Ears back wide eyed shake treat bag. Lick butt present belly, scratch hand when stroked, eat the fat cats food, why must they do that favor packaging over toy. Scratch leg; meow for can opener to feed me shove bum in owner's face like camera lens. Missing until dinner time meow. Attack the dog then pretend like nothing happened run in circles, and steal the warm chair right after you get up and inspect anything brought into the house, yet poop in litter box, scratch the walls. Sit in window and stare ooo, a bird! yum hide when guests come over rub face on everything, so knock dish off table head butt cant eat out of my own dish pee in the shoe sit in box. Pelt around the house and up and down stairs chasing phantoms bleghbleghvomit my furball really tie the room together yet all of a sudden cat goes crazy, and get video posted to internet for chasing red dot. Inspect anything brought into the house scratch leg; meow for can opener to feed me but bathe private parts with tongue then lick owner's face kitty power! . Hola te quiero use lap as chair. Intently sniff hand eat a plant, kill a hand or lick the other cats but climb a tree, wait for a fireman jump to fireman then scratch his face yet meowing non stop for food. Thug cat immediately regret falling into bathtub so sit on human kitty scratches couch bad kitty. Please stop looking at your phone and pet me. Lounge in doorway destroy couch, and if it fits, i sits wake up human for food at 4am. Instantly break out into full speed gallop across the house for no reason chew on cable leave fur on owners clothes yet chase mice, so gnaw the corn cob so throwup on your pillow. Intrigued by the shower scratch the furniture but shove bum in owner's face like camera lens so wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again yet sit on the laptop. Love to play with owner's hair tie thug cat drink water out of the faucet. I am the best kick up litter yet hide from vacuum cleaner and behind the couch, attack feet gnaw the corn cob. Howl uncontrollably for no reason human give me attention meow for hola te quiero.

-

Some filler content

+

Sit on human gnaw the corn cob but lounge in doorway yet ears back wide eyed. Hide when guests come over rub face on everything, fall asleep on the washing machine you call this cat food? for wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again for spread kitty litter all over house. If it fits, i sits eat grass, throw it back up stick butt in face. Peer out window, chatter at birds, lure them to mouth. Put toy mouse in food bowl run out of litter box at full speed inspect anything brought into the house, for eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then retire to the warmest spot on the couch to claw at the fabric before taking a catnap chase laser. Human give me attention meow spit up on light gray carpet instead of adjacent linoleum for hunt by meowing loudly at 5am next to human slave food dispenser thinking longingly about tuna brine. Asdflkjaertvlkjasntvkjn (sits on keyboard) stare at the wall, play with food and get confused by dust flop over need to chase tail damn that dog so mew get video posted to internet for chasing red dot. Groom yourself 4 hours - checked, have your beauty sleep 18 hours - checked, be fabulous for the rest of the day - checked! cats go for world domination for stare at ceiling, or purr while eating yet kitty loves pigs.

-

Lie on your belly and purr when you are asleep attack feet spit up on light gray carpet instead of adjacent linoleum but scream at teh bath. Throwup on your pillow steal the warm chair right after you get up for cat slap dog in face. Scratch leg; meow for can opener to feed me. Jump off balcony, onto stranger's head sleep on dog bed, force dog to sleep on floor so jump around on couch, meow constantly until given food, . Use lap as chair hide head under blanket so no one can see sleep on keyboard, for lick plastic bags intently sniff hand burrow under covers. Lick butt and make a weird face. Purr for no reason kitty loves pigs but intrigued by the shower, but scratch the furniture. Lay on arms while you're using the keyboard hate dog get video posted to internet for chasing red dot. If it smells like fish eat as much as you wish chase ball of string and favor packaging over toy. Hide head under blanket so no one can see. Kitty power! purr while eating yet lick the other cats behind the couch. Walk on car leaving trail of paw prints on hood and windshield you call this cat food? ears back wide eyed poop on grasses. Scratch the furniture flop over russian blue or eat grass, throw it back up for hide at bottom of staircase to trip human. Tuxedo cats always looking dapper scratch leg; meow for can opener to feed me. Under the bed need to chase tail claws in your leg, and loves cheeseburgers and intently stare at the same spot chase dog then run away. Nap all day lick sellotape pooping rainbow while flying in a toasted bread costume in space ignore the squirrels, you'll never catch them anyway but destroy couch. Lick yarn hanging out of own butt knock dish off table head butt cant eat out of my own dish lick plastic bags pee in the shoe. Hopped up on catnip chirp at birds kitty power! sleep nap. Climb leg damn that dog . Flee in terror at cucumber discovered on floor. Stare at ceiling light sun bathe. Dream about hunting birds when in doubt, wash or intently stare at the same spot, yet shove bum in owner's face like camera lens. Cat slap dog in face. Need to chase tail meowwww.

- -

Brown cats with pink ears stares at human while pushing stuff off a table i like big cats and i can not lie or chase laser scamper have secret plans, but fall asleep on the washing machine. Stare at ceiling destroy couch as revenge russian blue for leave fur on owners clothes slap owner's face at 5am until human fills food dish for claws in your leg stare at wall turn and meow stare at wall some more meow again continue staring . Steal the warm chair right after you get up use lap as chair howl uncontrollably for no reason for kitty scratches couch bad kitty so poop in the plant pot, wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again. Paw at beetle and eat it before it gets away chase dog then run away. Sleep on dog bed, force dog to sleep on floor i am the best refuse to leave cardboard box yet lounge in doorway but Gate keepers of hell. My left donut is missing, as is my right destroy the blinds refuse to leave cardboard box. Ears back wide eyed shake treat bag. Lick butt present belly, scratch hand when stroked, eat the fat cats food, why must they do that favor packaging over toy. Scratch leg; meow for can opener to feed me shove bum in owner's face like camera lens. Missing until dinner time meow. Attack the dog then pretend like nothing happened run in circles, and steal the warm chair right after you get up and inspect anything brought into the house, yet poop in litter box, scratch the walls. Sit in window and stare ooo, a bird! yum hide when guests come over rub face on everything, so knock dish off table head butt cant eat out of my own dish pee in the shoe sit in box. Pelt around the house and up and down stairs chasing phantoms bleghbleghvomit my furball really tie the room together yet all of a sudden cat goes crazy, and get video posted to internet for chasing red dot. Inspect anything brought into the house scratch leg; meow for can opener to feed me but bathe private parts with tongue then lick owner's face kitty power! . Hola te quiero use lap as chair. Intently sniff hand eat a plant, kill a hand or lick the other cats but climb a tree, wait for a fireman jump to fireman then scratch his face yet meowing non stop for food. Thug cat immediately regret falling into bathtub so sit on human kitty scratches couch bad kitty. Please stop looking at your phone and pet me. Lounge in doorway destroy couch, and if it fits, i sits wake up human for food at 4am. Instantly break out into full speed gallop across the house for no reason chew on cable leave fur on owners clothes yet chase mice, so gnaw the corn cob so throwup on your pillow. Intrigued by the shower scratch the furniture but shove bum in owner's face like camera lens so wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again yet sit on the laptop. Love to play with owner's hair tie thug cat drink water out of the faucet. I am the best kick up litter yet hide from vacuum cleaner and behind the couch, attack feet gnaw the corn cob. Howl uncontrollably for no reason human give me attention meow for hola te quiero.

- -

Sit on human gnaw the corn cob but lounge in doorway yet ears back wide eyed. Hide when guests come over rub face on everything, fall asleep on the washing machine you call this cat food? for wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again for spread kitty litter all over house. If it fits, i sits eat grass, throw it back up stick butt in face. Peer out window, chatter at birds, lure them to mouth. Put toy mouse in food bowl run out of litter box at full speed inspect anything brought into the house, for eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then retire to the warmest spot on the couch to claw at the fabric before taking a catnap chase laser. Human give me attention meow spit up on light gray carpet instead of adjacent linoleum for hunt by meowing loudly at 5am next to human slave food dispenser thinking longingly about tuna brine. Asdflkjaertvlkjasntvkjn (sits on keyboard) stare at the wall, play with food and get confused by dust flop over need to chase tail damn that dog so mew get video posted to internet for chasing red dot. Groom yourself 4 hours - checked, have your beauty sleep 18 hours - checked, be fabulous for the rest of the day - checked! cats go for world domination for stare at ceiling, or purr while eating yet kitty loves pigs.

- -

Text from Cat Ipsum.

-
+

Text from Cat Ipsum.

+
+
` }) diff --git a/src/sidebar-container.component.ts b/src/sidebar-container.component.ts index 8756ff9..61604fd 100644 --- a/src/sidebar-container.component.ts +++ b/src/sidebar-container.component.ts @@ -24,11 +24,13 @@ import { isBrowser } from './utils'; [ngClass]="backdropClass" (click)="_onBackdropClicked()"> + +
- +
`, styles: [ @@ -36,25 +38,31 @@ import { isBrowser } from './utils'; :host { box-sizing: border-box; display: block; - overflow: hidden; position: relative; + height: 100%; + width: 100%; + overflow: hidden; } .ng-sidebar__backdrop { - background: #000; - height: 100%; + position: absolute; + top: 0; + bottom: 0; left: 0; + right: 0; + background: #000; opacity: 0.75; pointer-events: auto; - position: fixed; - top: 0; - width: 100%; z-index: 99999998; } .ng-sidebar__content { - display: block; - height: 100%; + overflow: auto; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; } .ng-sidebar__content--animate { @@ -72,7 +80,7 @@ export class SidebarContainer implements AfterContentInit, OnChanges, OnDestroy @Input() showBackdrop: boolean = false; @Output() showBackdropChange = new EventEmitter(); - @Input() sidebarContentClass: string; + @Input() contentClass: string; @Input() backdropClass: string; private _sidebars: Array = []; diff --git a/src/sidebar.component.ts b/src/sidebar.component.ts index 989aee9..72493bb 100644 --- a/src/sidebar.component.ts +++ b/src/sidebar.component.ts @@ -38,35 +38,35 @@ import { upperCaseFirst, isLTR, isIOS, isBrowser } from './utils'; .ng-sidebar { overflow: auto; pointer-events: auto; - position: fixed; + position: absolute; touch-action: auto; will-change: initial; z-index: 99999999; } - .ng-sidebar--left { - bottom: 0; - left: 0; - top: 0; - } + .ng-sidebar--left { + bottom: 0; + left: 0; + top: 0; + } - .ng-sidebar--right { - bottom: 0; - right: 0; - top: 0; - } + .ng-sidebar--right { + bottom: 0; + right: 0; + top: 0; + } - .ng-sidebar--top { - left: 0; - right: 0; - top: 0; - } + .ng-sidebar--top { + left: 0; + right: 0; + top: 0; + } - .ng-sidebar--bottom { - bottom: 0; - left: 0; - right: 0; - } + .ng-sidebar--bottom { + bottom: 0; + left: 0; + right: 0; + } .ng-sidebar--inert { pointer-events: none; @@ -74,7 +74,7 @@ import { upperCaseFirst, isLTR, isIOS, isBrowser } from './utils'; will-change: transform; } - .ng-sidebar--animate.ng-sidebar { + .ng-sidebar--animate { -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.3, 1); transition: transform 0.3s cubic-bezier(0, 0, 0.3, 1); } @@ -317,7 +317,7 @@ export class Sidebar implements OnInit, OnChanges, OnDestroy { let marginStyle = {}; // Hides sidebar off screen - if (!this.opened || this._isModeSlide) { + if (!this.opened) { const isLeftOrTop: boolean = this.position === 'left' || this.position === 'top'; const isLeftOrRight: boolean = this.position === 'left' || this.position === 'right';