feat(portal): render context

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2017 Vildan Softic
+Copyright (c) 2017 Binh Vo
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package.json

@@ -120,4 +120,4 @@
   "release": {
     "verifyConditions": "condition-circle"
   }
-}
+}

src/portal.ts

@@ -11,14 +11,25 @@ import { PLATFORM } from 'aurelia-pal';
 
 const document: Document = PLATFORM.global.document;
 
+type PortalTarget = string | Element | null | undefined
+
 @templateController()
 @customAttribute('portal')
 export class Portal {
 
-  private static getTarget(target: string | Element | null | undefined): Element | null {
+  private static getTarget(target: PortalTarget, context?: PortalTarget): Element | null {
     if (target) {
       if (typeof target === 'string') {
-        target = document.querySelector(target);
+        let queryContext: Element | Document = document;
+        if (context) {
+          if (typeof context === 'string') {
+            context = document.querySelector(context);
+          }
+          if (context !== null && (context instanceof Element)) {
+            queryContext = context;
+          }
+        }
+        target = queryContext.querySelector(target);
       }
       if (target && (target instanceof Element)) {
         return target;
@@ -41,6 +52,7 @@ export class Portal {
   })
   public target: string | Element | null | undefined;
 
+  @bindable({ changeHandler: 'targetChanged' }) public renderContext: string | Element | null | undefined;
   @bindable() public strict: boolean = false;
   @bindable() public initialRender: boolean = false;
 
@@ -83,7 +95,7 @@ export class Portal {
   }
 
   private getTarget(): Element | null {
-    let target = Portal.getTarget(this.target);
+    let target = Portal.getTarget(this.target, this.renderContext);
     if (target === null) {
       if (this.strict) {
         throw new Error('Render target not found.');

test/unit/portal.spec.ts

@@ -36,6 +36,9 @@ describe('Portal attribute', () => {
         h('div', { class: 'square1' }),
         h('div', { class: 'square2' }),
         h('div', { class: 'square3' }),
+        h('div', { class: 'round' },
+          h('div', { id: 'square1', class: 'square1' })
+        ),
         h('div', { id: 'portal-container-element' },
           viewSlotAnchor = document.createComment('anchor')
         )
@@ -107,6 +110,27 @@ describe('Portal attribute', () => {
       expect(document.querySelector('.square3 form')).not.toBeFalsy();
     });
 
+    it('renders with renderContext', () => {
+      portal.target = '.square1';
+      portal.renderContext = '.round';
+
+      portal.bind(bindingContext, overrideContext);
+      portal.attached();
+
+      expect(document.querySelector('.round form')).not.toBeFalsy();
+    });
+
+    it('renders to first square with renderContext selector query with no result', () => {
+      portal.target = '.square1';
+      portal.renderContext = '.super-round';
+
+      portal.bind(bindingContext, overrideContext);
+      portal.attached();
+
+      expect(document.querySelector('.round form')).toBe(null);
+      expect(document.querySelector('.square1 form')).not.toBeFalsy();
+    });
+
     it('re-renders after target has changed', () => {
       portal.target = '.square2';
       portal.bind(bindingContext, overrideContext);