Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit 7168fe2

Browse files
thelgevoldthelgevold
committed
docs(cookbook - jquery plugins)
tweak ignore fix array core shim
1 parent b669e30 commit 7168fe2

File tree

15 files changed

+323
-0
lines changed

15 files changed

+323
-0
lines changed

‎public/docs/_examples/cb-jquery-plugin/e2e-spec.ts

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/// <reference path='../_protractor/e2e.d.ts' />
2+
'use strict';
3+
/* tslint:disable:quotemark */
4+
describe('Drag and Drop', function () {
5+
6+
beforeAll(function () {
7+
browser.get('');
8+
});
9+
10+
it('should drag hero to assignment', function () {
11+
12+
let allHeroes = element.all(by.css('.hero'));
13+
expect(allHeroes.count()).toBe(4);
14+
15+
let allAssignments = element.all(by.css('.assignment'));
16+
expect(allAssignments.count()).toBe(3);
17+
18+
let hero1 = allHeroes.get(0); // Mr. Nice
19+
let assignment1 = allAssignments.get(0);
20+
21+
browser.actions()
22+
.dragAndDrop(hero1, assignment1)
23+
.perform();
24+
25+
let assignment = element.all(by.xpath('//div[text()="Help Granny cross the street"]/following-sibling::ul/li[text()="Mr. Nice"]'));
26+
expect(assignment.count()).toBe(1);
27+
28+
let doneButton = element(by.xpath('//div[@data-hero="Mr. Nice"]/div/button'));
29+
30+
// Remove Mr. Nice
31+
doneButton.click().then(function(){
32+
allHeroes = element.all(by.css('.hero'));
33+
expect(allHeroes.count()).toBe(3);
34+
});
35+
});
36+
});

‎public/docs/_examples/cb-jquery-plugin/ts/.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
**/*.js

‎public/docs/_examples/cb-jquery-plugin/ts/app/app.component.ts

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
// #docregion
2+
import { Component } from '@angular/core';
3+
import { HeroAssignmentComponent } from './hero-assignment.component';
4+
import { HeroComponent } from './hero.component';
5+
6+
@Component({
7+
selector: 'my-app',
8+
template: `
9+
<div id="hero-wrapper">
10+
<h2>Hero Assignments</h2>
11+
<div *ngFor="let assignment of assignments">
12+
<cb-assignment [title]="assignment"></cb-assignment>
13+
</div>
14+
<div class="heroList">
15+
<div *ngFor="let hero of heroes">
16+
<cb-hero (remove)="removeHero($event)" [name]="hero"></cb-hero>
17+
</div>
18+
</div>
19+
</div>
20+
`,
21+
directives: [HeroAssignmentComponent, HeroComponent]
22+
})
23+
export class AppComponent {
24+
heroes = ['Mr. Nice',
25+
'Bombasto',
26+
'Celeritas',
27+
'Tornado'];
28+
29+
assignments = ['Help Granny cross the street',
30+
'Rescue village from dragon(s)',
31+
'Rescue princess from tower'];
32+
33+
removeHero(heroToRemove: string) {
34+
this.heroes = this.heroes.filter(hero => hero !== heroToRemove);
35+
}
36+
}

‎public/docs/_examples/cb-jquery-plugin/ts/app/hero-assignment.component.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<!-- #docregion -->
2+
<div #assignment class="assignment" [ngClass]="{selected: heroDropped}">
3+
<div>{{title}}</div>
4+
<ul>
5+
<li *ngFor="let hero of assignedHeroes">{{hero}}</li>
6+
</ul>
7+
</div>

‎public/docs/_examples/cb-jquery-plugin/ts/app/hero-assignment.component.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// #docregion
2+
import { Component, Input, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
3+
4+
declare var jQuery: any;
5+
6+
@Component({
7+
selector: 'cb-assignment',
8+
templateUrl: 'app/hero-assignment.component.html'
9+
})
10+
export class HeroAssignmentComponent implements AfterViewInit {
11+
@Input() title: string;
12+
@ViewChild('assignment') assignment: ElementRef;
13+
14+
assignedHeroes: string[] = [];
15+
16+
// #docregion add-plugin
17+
ngAfterViewInit() {
18+
jQuery(this.assignment.nativeElement).droppable({drop : (event: any, ui: any) => {
19+
let heroName = ui.draggable.data('hero');
20+
if (this.assignedHeroes.indexOf(heroName) === -1) {
21+
this.assignedHeroes = [...this.assignedHeroes, heroName];
22+
}
23+
}});
24+
}
25+
// #enddocregion add-plugin
26+
}

‎public/docs/_examples/cb-jquery-plugin/ts/app/hero.component.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<!-- #docregion -->
2+
<div #hero class="hero" [attr.data-hero]="name">{{name}}
3+
<div><button (click)="done()">Done</button></div>
4+
</div>

‎public/docs/_examples/cb-jquery-plugin/ts/app/hero.component.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// #docregion
2+
import { Component, Input, Output, AfterViewInit, ViewChild, ElementRef, EventEmitter } from '@angular/core';
3+
4+
// #docregion declare-jquery
5+
declare var jQuery: any;
6+
// #enddocregion declare-jquery
7+
@Component({
8+
selector: 'cb-hero',
9+
templateUrl: 'app/hero.component.html'
10+
})
11+
export class HeroComponent implements AfterViewInit {
12+
@Input() name: string;
13+
@Output() remove: EventEmitter<string> = new EventEmitter<string>();
14+
@ViewChild('hero') hero: ElementRef;
15+
16+
// #docregion add-plugin
17+
ngAfterViewInit() {
18+
jQuery(this.hero.nativeElement).draggable({revert: 'invalid'});
19+
}
20+
// #enddocregion add-plugin
21+
22+
done() {
23+
this.remove.emit(this.name);
24+
}
25+
}

‎public/docs/_examples/cb-jquery-plugin/ts/app/main.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { bootstrap } from '@angular/platform-browser-dynamic';
2+
3+
import { AppComponent } from './app.component';
4+
5+
bootstrap(AppComponent, [])
6+
.catch((err: any) => console.error(err));

‎public/docs/_examples/cb-jquery-plugin/ts/example-config.json

Whitespace-only changes.

‎public/docs/_examples/cb-jquery-plugin/ts/index.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<base href="/">
5+
<title>JQuery Plugin</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<!-- #docregion style -->
8+
<link rel="stylesheet" href="styles.css">
9+
<link rel="stylesheet" href="sample.css">
10+
<!-- #enddocregion style -->
11+
12+
<!-- Polyfill(s) for older browsers -->
13+
<script src="node_modules/core-js/client/shim.min.js"></script>
14+
15+
<script src="node_modules/zone.js/dist/zone.js"></script>
16+
<script src="node_modules/reflect-metadata/Reflect.js"></script>
17+
<script src="node_modules/systemjs/dist/system.src.js"></script>
18+
19+
<script src="systemjs.config.js"></script>
20+
<script>
21+
System.import('app').catch(function(err){ console.error(err); });
22+
</script>
23+
24+
<!-- #docregion jquery -->
25+
<script src="https://npmcdn.com/[email protected]"></script>
26+
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
27+
<!-- #enddocregion jquery -->
28+
29+
</head>
30+
31+
<body>
32+
<my-app>Loading app...</my-app>
33+
</body>
34+
35+
</html>

0 commit comments

Comments
 (0)