docs(cookbook - jquery plugins)

tweak

ignore

fix array

core shim

e2e

Jesus' edits

s

s

Author: thelgevold

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

@@ -0,0 +1,34 @@
+'use strict';
+
+import { browser, element, by } from 'protractor';
+
+/* tslint:disable:quotemark */
+describe('Drag and Drop', function () {
+
+  beforeAll(function () {
+    browser.get('');
+  });
+
+  it('should drag hero to assignment', function () {
+
+    let assignment1 = element.all(by.css('.assignment')).get(0);
+
+    let hero1 = element.all(by.css('.hero')).get(0);
+
+    browser.actions()
+           .dragAndDrop(hero1 as any as webdriver.WebElement,
+                        assignment1 as any as webdriver.WebElement)
+           .perform();
+
+    let heroAssignment = element.all(by.xpath('//div[text()="Help Granny cross the street"]/following-sibling::ul/li[text()="Mr. Nice"]'));
+    expect(heroAssignment.count()).toBe(1);
+
+    let doneButton = element(by.xpath('//div[@data-hero="Mr. Nice"]/div/button'));
+
+    // Remove Mr. Nice
+    doneButton.click().then(function(){
+      let remainingHeroes = element.all(by.css('.hero'));
+      expect(remainingHeroes.count()).toBe(3);
+    });
+  });
+});

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

@@ -0,0 +1 @@
+**/*.js

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

@@ -0,0 +1,33 @@
+// #docregion
+import { Component } from  '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  template: `
+    <div id="hero-wrapper">
+      <h2>Hero Assignments</h2>
+      <div *ngFor="let assignment of assignments">
+        <cb-assignment [title]="assignment"></cb-assignment>
+      </div>
+      <div class="heroList">
+        <div *ngFor="let hero of heroes">
+          <cb-hero (remove)="removeHero($event)" [name]="hero"></cb-hero>
+        </div>
+      </div>
+    </div>
+  `
+})
+export class AppComponent {
+  heroes = ['Mr. Nice',
+            'Bombasto',
+            'Celeritas',
+            'Tornado'];
+
+  assignments = ['Help Granny cross the street',
+                 'Rescue village from dragon(s)',
+                 'Rescue princess from tower'];
+
+  removeHero(heroToRemove: string): void {
+    this.heroes = this.heroes.filter(hero => hero !== heroToRemove);
+  }
+}

public/docs/_examples/cb-jquery-plugin/ts/app/app.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { HeroAssignmentComponent } from './hero-assignment.component';
+import { HeroComponent } from './hero.component';
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [ AppComponent, HeroAssignmentComponent, HeroComponent ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule {}

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

@@ -0,0 +1,7 @@
+<!-- #docregion -->
+<div #assignment class="assignment" [ngClass]="{selected: heroDropped}">
+    <div>{{title}}</div>
+    <ul>
+      <li *ngFor="let hero of assignedHeroes">{{hero}}</li>
+    </ul>
+</div>

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

@@ -0,0 +1,26 @@
+// #docregion
+import { Component, Input, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
+
+declare var jQuery: any;
+
+@Component({
+  selector: 'cb-assignment',
+  templateUrl: 'app/hero-assignment.component.html'
+})
+export class HeroAssignmentComponent implements AfterViewInit {
+  @Input() title: string;
+  @ViewChild('assignment') assignment: ElementRef;
+
+  assignedHeroes: string[] = [];
+
+  // #docregion add-plugin
+  ngAfterViewInit(): void {
+    jQuery(this.assignment.nativeElement).droppable({drop : (event: any, ui: any) => {
+      let heroName = ui.draggable.data('hero');
+      if (this.assignedHeroes.indexOf(heroName) === -1) {
+        this.assignedHeroes = [...this.assignedHeroes, heroName];
+      }
+    }});
+  }
+  // #enddocregion add-plugin
+}

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

@@ -0,0 +1,5 @@
+<!-- #docregion -->
+<div #hero class="hero" [attr.data-hero]="name">
+  {{name}}
+  <div><button (click)="done()">Done</button></div>
+</div>

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

@@ -0,0 +1,25 @@
+// #docregion
+import { Component, Input, Output, AfterViewInit, ViewChild, ElementRef, EventEmitter } from '@angular/core';
+
+// #docregion declare-jquery
+declare var jQuery: any;
+// #enddocregion declare-jquery
+@Component({
+  selector: 'cb-hero',
+  templateUrl: 'app/hero.component.html'
+})
+export class HeroComponent implements AfterViewInit {
+  @Input() name: string;
+  @Output() remove = new EventEmitter<string>();
+  @ViewChild('hero') hero: ElementRef;
+
+  // #docregion add-plugin
+  ngAfterViewInit(): void {
+    jQuery(this.hero.nativeElement).draggable({revert: 'invalid'});
+  }
+  // #enddocregion add-plugin
+
+  done(): void {
+    this.remove.emit(this.name);
+  }
+}

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

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic }    from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);