Skip to content
This repository has been archived by the owner on Sep 4, 2020. It is now read-only.

Commit

Permalink
1.8.0 make toggle elemnts position absolute inside. add storys for co…
Browse files Browse the repository at this point in the history
…mponent doc.
  • Loading branch information
clouless committed Mar 27, 2018
1 parent d89e53a commit 2340289
Show file tree
Hide file tree
Showing 13 changed files with 8,259 additions and 92 deletions.
1 change: 0 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,5 @@ documentation
src/*.js
src/components/*.js
tsconfig-*.json
yarn.lock
_dist_demo_node_modules
dist-demo
1 change: 1 addition & 0 deletions .npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
registry=https://registry.yarnpkg.com/
5 changes: 3 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"COMMENT": "THIS FILE WILL BE PARSED DURING BUILD. IT IS NOT THE ACTUAL PACKAGE FILE PUSHE TO NPMJS!",
"name": "@cloukit/toggle",
"moduleId": "toggle",
"version": "1.7.0",
"version": "1.8.0",
"description": "A toggle component that can be used in an Angular Reactive Form for a boolean.",
"license": "MIT",
"author": "codelcou.io",
Expand All @@ -21,7 +21,8 @@
"@cloukit/theme": ">=1.6.1"
},
"devDependencies": {
"@cloukit/library-build-chain": "1.6.0"
"@cloukit/library-build-chain": "1.17.1",
"@cloukit/story": "1.3.0"
},
"peerDependencies": {
"@angular/common": ">=4.0.0",
Expand Down
16 changes: 7 additions & 9 deletions src/components/toggle.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,23 +23,21 @@ export const CLOUKIT_TOGGLE_VALUE_ACCESSOR: any = {
* Just use this inside your templates:
*
* ```html
* <cloukit-pagination
* [total]="totalPages"
* [current]="currentPage"
* (onPageSelect)="selectPage($event)"
* ></cloukit-pagination>
* <cloukit-toggle
* formControlName="myBoolean"
* ></cloukit-toggle>
* ```
*/
@Component({
selector: 'cloukit-toggle',
template: `
<span
<div
(click)="toggleValue()"
[ngStyle]="getStyle('wrapper').style"
>
<span
<div
[ngStyle]="getStyle('circle').style"
></span>
></div>
<svg
viewBox="0 0 512 512"
[ngStyle]="getStyle('iconLeft').style"
Expand All @@ -58,7 +56,7 @@ export const CLOUKIT_TOGGLE_VALUE_ACCESSOR: any = {
[attr.d]="getStyle('iconRight').icon.svgPathD"
></path>
</svg>
</span>`,
</div>`,
styles: [ ],
providers: [ CLOUKIT_TOGGLE_VALUE_ACCESSOR ],
})
Expand Down
11 changes: 7 additions & 4 deletions src/components/toggle.theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -62,9 +62,11 @@ export class CloukitToggleComponentThemeDefault extends CloukitComponentTheme {

this.createStyle('iconLeft', 'untoggled', 'base', {
style: {
position: 'absolute',
left: '2px',
top: '1px',
width: '20px',
display: 'none',
marginTop: '-1px',
},
icon: {
svgPathD: CloukitIcons.success,
Expand All @@ -90,8 +92,9 @@ export class CloukitToggleComponentThemeDefault extends CloukitComponentTheme {
this.createStyle('iconRight', 'untoggled', 'base', {
style: {
width: '20px',
paddingLeft: '20px',
marginTop: '-1px',
position: 'absolute',
right: '2px',
top: '1px',
},
icon: {
svgPathD: CloukitIcons.failure,
Expand Down Expand Up @@ -144,7 +147,7 @@ export class CloukitToggleComponentThemeDefault extends CloukitComponentTheme {
this.createStyle('iconLeft', 'toggled', 'base',
this.merge(this.getStyle('iconLeft', 'untoggled', 'base'), {
style: {
display: 'inline-block',
display: 'block',
}
} as CloukitStatefulAndModifierAwareElementThemeStyleDefinition));

Expand Down
58 changes: 8 additions & 50 deletions src/demo/demo.component.html
Original file line number Diff line number Diff line change
@@ -1,55 +1,13 @@
<div
class="demo"
[formGroup]="form"
>
<h3>Toggle</h3>
<table class="demotable">
<tr>
<td>Is Schrödingers cat dead?</td>
<td>
<cloukit-toggle
formControlName="isCatDead"
></cloukit-toggle>
</td>
</tr>
<tr>
<td>Are you sure? (different theme)</td>
<td>
<cloukit-toggle
formControlName="areYouSure"
theme="toggle--cornered"
></cloukit-toggle>
</td>
</tr>
<tr>
<td>Disabled states:</td>
<td>
<cloukit-toggle
formControlName="youCantTouchThisOff"
></cloukit-toggle>
<div style="padding:10px;">

<cloukit-toggle
formControlName="youCantTouchThisOn"
></cloukit-toggle>
<cloukit-story title="Basic Usage" story="story-00-basic">
<story-00-basic></story-00-basic>
</cloukit-story>

<br><br>
<br><br>

<cloukit-toggle
formControlName="youCantTouchThisOffAlt"
theme="toggle--cornered"
></cloukit-toggle>

<cloukit-toggle
formControlName="youCantTouchThisOnAlt"
theme="toggle--cornered"
></cloukit-toggle>
</td>
</tr>
</table>

<hr><br>

Reactive Form Result:
<pre>{{getFormResult()}}</pre>
<cloukit-story title="Using Custom Theme" story="story-01-themed">
<story-01-themed></story-01-themed>
</cloukit-story>

</div>
30 changes: 8 additions & 22 deletions src/demo/demo.component.ts
Original file line number Diff line number Diff line change
@@ -1,30 +1,16 @@
import { Component } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
selector: 'demo',
templateUrl: './demo.component.html',
styles: [
'.demo { font-family: sans-serif; }',
'.demotable td { vertical-align:top; padding:10px; }',
],
styles: [],
})
export class DemoComponent {
styles = { };
form: FormGroup;

constructor(fb: FormBuilder) {
this.form = fb.group({
isCatDead: false,
areYouSure: true,
youCantTouchThisOn: { value: true, disabled: true },
youCantTouchThisOff: { value: false, disabled: true },
youCantTouchThisOnAlt: { value: true, disabled: true },
youCantTouchThisOffAlt: { value: false, disabled: true },
});
}

getFormResult() {
return JSON.stringify(this.form.value, null, 2);
}
public static sharedStyles = [
'.row { display: flex; align-items:center; }',
'.row span { margin-right:10px; }',
'.row button { margin-left:50px; }',
'.superButton, .superButtonSecondary { border:2px solid #710ECC; outline:0; background-color:#710ECC; color:#fff; border-radius:0px; padding:4px 8px 4px 8px; color:#fff; cursor:pointer; font-size:1rem; }',
'.superButton:hover, .superButtonSecondary:hover { border:2px solid #710ECC; background-color:#fff; color:#710ECC; }',
]
}
30 changes: 26 additions & 4 deletions src/demo/demo.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,36 @@ import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { CloukitThemeModule } from '@cloukit/theme';
import { CloukitStoryModule, CloukitStoryService } from '@cloukit/story';
import { DemoComponent } from './demo.component';
import { CloukitToggleModule } from '../index';
import { Story00Component } from './stories/story-00-basic';
import { Story01Component } from './stories/story-01-themed';

@NgModule({
declarations: [ DemoComponent ],
declarations: [
DemoComponent,
Story00Component,
Story01Component,
],
exports: [ DemoComponent ],
imports: [ CommonModule, ReactiveFormsModule, CloukitThemeModule, CloukitToggleModule ],
imports: [
CommonModule,
ReactiveFormsModule,
CloukitThemeModule,
CloukitToggleModule,
CloukitStoryModule,
],
providers: [ ],
bootstrap: [ ]
bootstrap: [ ],
})
export class DemoModule {}
export class DemoModule {
constructor(private cloukitStoryService: CloukitStoryService) {
//
// INITIALIZE STORY SOURCES
//
const baseUrl = document.getElementsByTagName('base')[0].href;
const storySourceJsonUrl = `${baseUrl}assets/demoStoriesSource.json`; // File is auto generated by build chain!
this.cloukitStoryService.loadStoryJson(storySourceJsonUrl);
}
}
23 changes: 23 additions & 0 deletions src/demo/stories/story-00-basic.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<div class="demo" [formGroup]="form">

<div class="row">
<span>Is Schrödingers cat dead?</span>

<cloukit-toggle
formControlName="isCatDead"
></cloukit-toggle>

<button
type="button"
(click)="toggleFormDisabled()"
class="superButton"
>{{ isFormDisabled ? 'enable' : 'disable' }} form</button>
</div>


<br><br>

Reactive Form Result:
<pre *ngIf="form?.value">{{form.value | json}}</pre>

</div>
27 changes: 27 additions & 0 deletions src/demo/stories/story-00-basic.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { DemoComponent } from '../demo.component';

@Component({
selector: 'story-00-basic',
templateUrl: './story-00-basic.html',
styles: [ ].concat(DemoComponent.sharedStyles),
})
export class Story00Component {

public isFormDisabled = false;

public form = new FormGroup({
isCatDead: new FormControl(false)
});

public toggleFormDisabled() {
if (this.isFormDisabled) {
this.form.enable();
this.isFormDisabled = false;
} else {
this.form.disable();
this.isFormDisabled = true;
}
}
}
27 changes: 27 additions & 0 deletions src/demo/stories/story-01-themed.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<div class="demo" [formGroup]="form">

<div class="row">

<span>Theme: toggle--cornered</span>

<cloukit-toggle
formControlName="myBool"
theme="toggle--cornered"
></cloukit-toggle>

</div>

<br><br>

<div class="row">

<span>Theme: toggle--awesome</span>

<cloukit-toggle
formControlName="myBoolTwo"
theme="toggle--awesome"
></cloukit-toggle>

</div>

</div>
31 changes: 31 additions & 0 deletions src/demo/stories/story-01-themed.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { DemoComponent } from '../demo.component';
import { CloukitThemeService } from '@cloukit/theme';
import { CloukitToggleComponentThemeDefault } from '../../index';

export class AwesomeToggleTheme extends CloukitToggleComponentThemeDefault {
constructor() {
super();
const wrapperUntoggledBase = this.getElementTheme('wrapper', 'toggled', 'base');
wrapperUntoggledBase.styleDef.style.backgroundColor = 'blue';
}
}

@Component({
selector: 'story-01-themed',
templateUrl: './story-01-themed.html',
styles: [ '.row span { width:200px; }' ].concat(DemoComponent.sharedStyles),
})
export class Story01Component {

public form = new FormGroup({
myBool: new FormControl(false),
myBoolTwo: new FormControl(true),
});

constructor(private cloukitThemeService: CloukitThemeService) {
this.cloukitThemeService.registerComponentTheme('toggle--awesome', new AwesomeToggleTheme());
}

}
Loading

0 comments on commit 2340289

Please sign in to comment.