Commit 476bec5f authored by Cesar Flores's avatar Cesar Flores

arriba abajo y configuracion

parent 692c68d5
# hammerAngular
# Hammerangular
eventos tactiles usando hammer en angular
\ No newline at end of file
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.3.0.
## Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
## Code scaffolding
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
## Build
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
## Running unit tests
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
## Running end-to-end tests
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
## Further help
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"hammerangular": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/hammerangular",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": [],
"es5BrowserSupport": true
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "hammerangular:build"
},
"configurations": {
"production": {
"browserTarget": "hammerangular:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "hammerangular:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"src/styles.css"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"hammerangular-e2e": {
"root": "e2e/",
"projectType": "application",
"prefix": "",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "hammerangular:serve"
},
"configurations": {
"production": {
"devServerTarget": "hammerangular:serve:production"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "hammerangular"
}
\ No newline at end of file
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts
const { SpecReporter } = require('jasmine-spec-reporter');
exports.config = {
allScriptsTimeout: 11000,
specs: [
'./src/**/*.e2e-spec.ts'
],
capabilities: {
'browserName': 'chrome'
},
directConnect: true,
baseUrl: 'http://localhost:4200/',
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {}
},
onPrepare() {
require('ts-node').register({
project: require('path').join(__dirname, './tsconfig.e2e.json')
});
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
}
};
\ No newline at end of file
import { AppPage } from './app.po';
import { browser, logging } from 'protractor';
describe('workspace-project App', () => {
let page: AppPage;
beforeEach(() => {
page = new AppPage();
});
it('should display welcome message', () => {
page.navigateTo();
expect(page.getTitleText()).toEqual('Welcome to hammerangular!');
});
afterEach(async () => {
// Assert that there are no errors emitted from the browser
const logs = await browser.manage().logs().get(logging.Type.BROWSER);
expect(logs).not.toContain(jasmine.objectContaining({
level: logging.Level.SEVERE,
}));
});
});
import { browser, by, element } from 'protractor';
export class AppPage {
navigateTo() {
return browser.get(browser.baseUrl) as Promise<any>;
}
getTitleText() {
return element(by.css('app-root h1')).getText() as Promise<string>;
}
}
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"module": "commonjs",
"target": "es5",
"types": [
"jasmine",
"jasminewd2",
"node"
]
}
}
\ No newline at end of file
This diff is collapsed.
{
"name": "hammerangular",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~7.2.0",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/forms": "~7.2.0",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"core-js": "^2.5.4",
"hammerjs": "^2.0.8",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.13.0",
"@angular/cli": "~7.3.0",
"@angular/compiler-cli": "~7.2.0",
"@angular/language-service": "~7.2.0",
"@types/node": "~8.9.4",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.2.2"
}
}
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SliderComponent } from './slider/slider.component';
import { ArribaabajoComponent } from './arribaabajo/arribaabajo.component';
const routes: Routes = [
{ path: '', component: SliderComponent},
{ path: 'arriba', component: ArribaabajoComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
<header>
<ul>
<li routerLink="/">slider</li>
<li routerLink="/rotar">rotar</li>
<li routerLink="/arriba">arriba abajo</li>
</ul>
<div style="text-align: center;">
<h1>un programador</h1>
<a href="https://unprogramador.com"><img src="https://unprogramador.com/wp-content/uploads/2018/05/Captura-de-pantalla-2017-10-24-a-las-00.31.36.png" width="200px" /></a>
</div>
</header>
<router-outlet></router-outlet>
\ No newline at end of file
import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule
],
declarations: [
AppComponent
],
}).compileComponents();
}));
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
});
it(`should have as title 'hammerangular'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('hammerangular');
});
it('should render title in a h1 tag', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('Welcome to hammerangular!');
});
});
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'hammerangular';
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SliderComponent } from './slider/slider.component';
import { RotarComponent } from './rotar/rotar.component';
import { ArribaabajoComponent } from './arribaabajo/arribaabajo.component';
import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import * as Hammer from 'hammerjs';
export class HammerConfig extends HammerGestureConfig {
overrides = <any>{
'swipe': { direction: Hammer.DIRECTION_ALL }
};
}
@NgModule({
declarations: [
AppComponent,
SliderComponent,
RotarComponent,
ArribaabajoComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [
{
provide: HAMMER_GESTURE_CONFIG,
useClass: HammerConfig
}
],
bootstrap: [AppComponent]
})
export class AppModule { }
.swipe {
width: 100%;
height: 100%;
overflow-y: hidden;
}
.superlarge {
width: 100%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
transition-duration: 0.4s;
transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.horizontal {
width: 100vw;
margin: 0;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
height: 100vh;
justify-content: center;
align-items: center;
}
.horizontal h3 {
font-size: 50px;
}
.entradav {
transform: scale(0);
animation-fill-mode: forwards;
animation-name: aparecet;
animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
animation-duration: 0.6s;
}
@keyframes aparecet {
to {
transform: scale(1);
}
}
\ No newline at end of file
<div class="swipe" (swipeup)="swipeup($event)" (swipedown)="swipedown($event)">
<div class="superlarge" [style.marginTop]="spacefn">
<div class="horizontal entradav" *ngFor="let card of cards" [style.backgroundColor]="card.color">
<h3>{{card.name}} </h3>
</div>
</div>
</div>
\ No newline at end of file
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ArribaabajoComponent } from './arribaabajo.component';
describe('ArribaabajoComponent', () => {
let component: ArribaabajoComponent;
let fixture: ComponentFixture<ArribaabajoComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ArribaabajoComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ArribaabajoComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-arribaabajo',
templateUrl: './arribaabajo.component.html',
styleUrls: ['./arribaabajo.component.css']
})
export class ArribaabajoComponent implements OnInit {
cards = [{
color: '#6657FF',
name: '1'
}, {
color: '#4A9BFF',
name: '2'
}, {
color: '#4361E8',
name: '3'
}, {
color: '#7E43E8',
name: '4'
}, {
color: '#BC4AFF',
name: '5'
}, {
color: '#FF42B6',
name: '6'
}];
spacecrr = 0;
spacefn = '';
constructor() { }
ngOnInit() {
}
swipeup(event) {
if (this.spacecrr < ((this.cards.length - 1) * 100)) {
this.spacecrr += 100;
this.spacefn = '-' + this.spacecrr + 'vh';
} else {
this.spacecrr = 0;
this.spacefn = '0vh';
}
}
swipedown(event) {
if (this.spacecrr > 0 && this.spacecrr <= ((this.cards.length - 1) * 100)) {
this.spacecrr -= 100;
this.spacefn = '-' + this.spacecrr + 'vh';
} else {
this.spacecrr = 0;
this.spacefn = '0vh';
}
}
onRotateMove(event) {
console.log(event);
}
}
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RotarComponent } from './rotar.component';
describe('RotarComponent', () => {
let component: RotarComponent;
let fixture: ComponentFixture<RotarComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ RotarComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(RotarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-rotar',
templateUrl: './rotar.component.html',
styleUrls: ['./rotar.component.css']
})
export class RotarComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
.swipe {
width: 100%;
overflow-x: hidden;
padding-top: 16vh;
}
.superlarge {
width: max-content;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
transition-duration: 0.4s;
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.horizontal {
width: 100vw;
margin: 0;
padding-top: 3vh;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
height: 80vh;
justify-content: center;
align-items: center;
}
.horizontal h3 {
font-size: 50px;
}
.entradav {
opacity: 0;
animation-fill-mode: forwards;
animation-name: aparecev;
animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
animation-duration: 0.6s;
}
@keyframes aparecev {
to {
opacity: 1;
}
}
\ No newline at end of file
<div class="swipe" (swipeleft)="swipeleft($event)" (swiperight)="swiperight($event)">
<div class="superlarge" [style.marginLeft]="spacefn">
<div class="horizontal entradav" *ngFor="let card of cards" [style.backgroundColor]="card.color">
<h3>{{card.name}} </h3>
</div>
</div>
</div>
\ No newline at end of file
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SliderComponent } from './slider.component';
describe('SliderComponent', () => {
let component: SliderComponent;
let fixture: ComponentFixture<SliderComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SliderComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SliderComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-slider',
templateUrl: './slider.component.html',
styleUrls: ['./slider.component.css']
})
export class SliderComponent implements OnInit {
cards = [{
color: '#6657FF',
name: '1'
}, {
color: '#4A9BFF',
name: '2'
}, {