AngularDartを利用して Inputタグで画像を読み込むダイアログ

AngularDart を利用して、Inputタグで画像を読み込むダイアログを作ってみた。



#xxxx で、domを紐づけたりできるのを知った。

https://github.com/firefirestyle/ebook_windstyle_markdown/tree/master/angular/image-input-dialog/app


===
main.dart

import 'package:angular2/platform/browser.dart';
import 'package:angular2/core.dart';
import 'input_img_dialog.dart';

void main() {
  bootstrap(AppComponent);
}

@Component(
    selector: "my-app",
    directives: const [InputImageDialog],
    template: """
    <div>
    <h1>Dialog Test</h1>
    <div>
    <button (click)='onClick(myDialoga)'>open</button>
    </div>

    <input-image-dialog #myDialoga>
    </input-image-dialog>

    </div>
  """
)
class AppComponent implements OnInit {
  AppComponent();
  ngOnInit() {
  }
  onClick(InputImageDialog _dialog) async {
    _dialog.open();
  }
}

===

input_image_dialog.dart

import 'package:angular2/core.dart';
import 'package:angular2_components/angular2_components.dart';
import 'dart:html' as html;
import 'imageutil.dart' as imgutil;
import 'dart:async';

@Component(
  selector: 'input-image-dialog',
  template: """
<modal #wrappingModal>
  <material-dialog style='width:80%'>
    <h3 header> File </h3>
    <material-spinner *ngIf='isloading'></material-spinner>
    <div #imgc></div>
    <div footer>
      <input #in type="file" id="upload" (change)='onInput(in,imgc)'>
      <material-button autoFocus clear-size (click)="onCancel(wrappingModal)">
        Cancel
      </material-button>
      <material-button *ngIf='currentImage!=null' autoFocus clear-size (click)="onFile(wrappingModal)">
        File
      </material-button>
    </div>
  </material-dialog>
</modal>
  """,
  directives: const [materialDirectives],
  providers: const [materialProviders],
)
class InputImageDialog {

  @ViewChild('wrappingModal')
  ModalComponent wrappingModal;

  bool isloading = false;
  html.ImageElement currentImage = null;

  void open() {
    wrappingModal.open();
  }

  onCancel(ModalComponent comp) {
    wrappingModal.close();
  }
  onFile(ModalComponent comp) {
    wrappingModal.close();
  }

  onInput(html.InputElement i,html.DivElement c) async {
    isloading = true;
    try {
      if(i.value.length <= 0) {
        return;
      }
      var img = await imgutil.ImageUtil.loadImage(i.files.first);
      var img1 = await imgutil.ImageUtil.resizeImage(img);
      c.children.add(img1);
      currentImage = img1;
    } catch(e){
    } finally{
      isloading = false;
    }
  }
}

===