Chi Chi Ng

Fancy pants UI components for Angular

chichi - frilly or elaborate ornamentation

Notes

In projects/chichi-ng/package.json tslib is defined as a peerDependency, but in the built library it gets moved to dependencies. See https://angular.io/guide/migration-update-libraries-tslib

Bypass Panel

Like a closet with bypass doors where a panel (door) can be slid back and forth to show content behind. The panels also have content and buttons for sliding them.

I didn't concieve of this design, I watched a video by Traversy Media that put this together based on the article DOUBLE SLIDER - SIGN IN/UP FORM by Florin Pop who was inspired by the Diprella Login posted by Selecto on dribbble. I took the basic concept and created an Angular component that generalized the sliding panel.

Gif by OnlineConverter.com

Using

the library is now published to npm, so install it

For Angular 8 use version 1.1.1, for Angular 13.1 use version 2.0.0

npm i [email protected]

import the module into your app.module.ts

...
import { ChichiNgModule } from 'chichi-ng';
...
@NgModule({
  ...
  imports: [
  ...
  ChichiNgModule
...

Use the cc-bypass-panel component in your own component. create a variable in your component to hold the state of which side the bypass overlay is located, for example:

 rightPanelActive: boolean = false;

Use the element in your template. You need to have 4 containers with classes left-panel-content, right-panel-content, overlay-left-content, and overlay-right-content:

<cc-bypass-panel [rightPanelActive]="rightPanelActive">
  <div class="left-panel-content">
      ...
  </div>

   <div class="right-panel-content">
    ...
  </div>

  <div class="overlay-left-content">
  ...
		<button class="ghost" id="signUp" (click)="rightPanelActive=false">Left Panel Active</button>
	</div>

  <div class="overlay-right-content">
    ...
    <button class="ghost" id="signIn" (click)="rightPanelActive=true">Right Panel Active</button>
  </div>

  </cc-bypass-panel>

You can style the overlay with css like:

:host ::ng-deep .overlay {
  background: #1565C0;
	background: -webkit-linear-gradient(to right, #b92b27, #1565C0);
	background: linear-gradient(to right, #b92b27, #1565C0);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 0 0;
}

Spinning Globe

This simulates a spinning globe by animating a surface map in the background of a div. The div sides are rounded to make it a circle and then optionally shadowing is applied to give a 3d effect. The original idea for this is from Rahul Arora's article which I used as a basis and converted to angular with help from various sources like Jeff Delaney's article about animation in Angular, Eliyas Hossain's answer for the stack overflow question to make the animation infinite, and Jette's answer to the stack overflow question on parameterizing the animation so I could pass in the time for speeding or slowing the animtaion. Finally I'd like to thank the team at Inove for making texture maps freely availabe under the creative commons license on this site

Using

See the top of the bypass panel using notes for adding the module to your project.

Add a cc-turning-globe element. Add an id so that you can style the element directly for size and spacing.

• globeImage - This is the url to the image to use for the globe. The image should be a surface image.
• secondsPerRotation - this controls how fast the animation "spins", higher numbers spin slower. The actual time will depend on the size of the image.
• withShadow - This controls if there will be a shadow. For planets you want this to make them look round. it doesn't make sense for the sun and maybe non-planets.

In the html add the element:

      <cc-turning-globe id="earth"  secondsPerRotation="30s" withShadow="true"
        globeImage="https://cdn.pixabay.com/photo/2013/07/12/12/54/world-map-146505_960_720.png">
      </cc-turning-globe>

In the css set the size:

#earth {
  height: 200px;
  width: 200px;
}

Running Tests

I've setup ng test to run headless chrome and firefox, single run and exit. To have karma open chrome, watch files and rerun tests as files are change, use the alternative karma config file via ng test -c debug

to generate test code coverage report use ng test --code-coverage in the workspace root look for the coverage folder

This library was generated with Angular CLI version 13.1.0.

Code scaffolding

Run ng generate component component-name --project chichi-ng to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project chichi-ng.

Note: Don't forget to add --project chichi-ng or else it will be added to the default project in your angular.json file.

Build

Run ng build chichi-ng to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build chichi-ng, go to the dist folder cd dist/chichi-ng and run npm publish.

Running unit tests

Run ng test chichi-ng to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.