Implement basic ImagePropertyEditor (fixes #32).

vargin · Aug 26, 2015 · b932425 · b932425
1 parent d782032
commit b932425
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 4 deletions.
diff --git a/app/style/vargin.scss b/app/style/vargin.scss
@@ -182,3 +182,7 @@ vargin-action-editor {
   margin: 0.5rem 0;
   list-style: none;
 }
+
+image-property-editor input[type=file] {
+  display: none;
+}
diff --git a/app/ts/editor/properties/properties.ts b/app/ts/editor/properties/properties.ts
@@ -78,6 +78,7 @@ import { IExpandableGroup } from 'editor/expandable-groups/expandable-groups';
       <div class="vargin-properties_empty" *ng-if="!activeControl">
         (Select control...)
       </div>
+      <div><strong>{{getControlId()}}</strong></div>
     </section>
   `,
   directives: [NgFor, NgIf, PropertyEditor]
@@ -113,19 +114,19 @@ class VarginProperties {
     );
 
     this.groups.properties = {
-      name: 'Properties',
+      name: 'Common Properties',
       expanded: false,
       items: []
     };
 
     this.groups.styles = {
-      name: 'Styles',
+      name: 'Appearance',
       expanded: false,
       items: []
     };
 
     this.groups.events = {
-      name: 'Events',
+      name: 'Action',
       expanded: false,
       items: []
     };
@@ -174,6 +175,10 @@ class VarginProperties {
     });
   }
 
+  private getControlId() {
+    return this.activeControl && this.activeControl.id;
+  }
+
   private removeControl() {
     if (!this.activeControl) {
       return;

diff --git a/app/ts/editor/properties/property-editors/image-property-editor.ts b/app/ts/editor/properties/property-editors/image-property-editor.ts
@@ -0,0 +1,36 @@
+/// <reference path="../../../../../typings/tsd.d.ts" />
+import { Component, Inject, Optional, View } from 'angular2/angular2';
+
+import { IProperty, Property } from 'core/property';
+
+@Component({
+  selector: 'image-property-editor',
+  properties: ['property']
+})
+@View({
+  template: `
+    <label class="vargin-property-editor">
+      <span class="vargin-property-editor__label">{{property.getName()}}</span>
+      <input #picker type="file" accept="image/*"
+             (change)="onChange($event.target.files[0])"/>
+      <button class="vargin-property-editor__input"
+              (click)="picker.click()">
+        Browse...
+      </button>
+    </label>`
+})
+class ImagePropertyEditor {
+  private property: IProperty<string>;
+
+  constructor(@Inject(Property) property: IProperty<string>) {
+    this.property = property;
+  }
+
+  onChange(value: Blob) {
+    var reader  = new FileReader();
+    reader.onloadend = () => this.property.setValue(`url(${reader.result})`);
+    reader.readAsDataURL(value);
+  }
+}
+
+export default ImagePropertyEditor;
diff --git a/app/ts/editor/properties/property-editors/property-editor.ts b/app/ts/editor/properties/property-editors/property-editor.ts
@@ -17,7 +17,8 @@ import ColorPropertyEditor from 'editor/properties/property-editors/color-proper
 import NumberPropertyEditor from 'editor/properties/property-editors/number-property-editor';
 import StringPropertyEditor from 'editor/properties/property-editors/string-property-editor';
 import PropertyWithOptionsEditor from 'editor/properties/property-editors/property-with-options-editor';
-import EventPropertyEditor from 'editor/properties/property-editors/event-property-editor'
+import EventPropertyEditor from 'editor/properties/property-editors/event-property-editor';
+import ImagePropertyEditor from 'editor/properties/property-editors/image-property-editor';
 
 @Component({
   selector: 'property-editor',
@@ -71,6 +72,8 @@ class PropertyEditor {
       case 'hover':
       case 'change':
         return EventPropertyEditor;
+      case 'image':
+        return ImagePropertyEditor;
       default:
         return StringPropertyEditor;
     }