added new DI ContentRef and also dom codes

packages/common/src/filter/size-unit-conversion.js

@@ -0,0 +1,10 @@
+Pipe({
+    name: 'sizeToUnit'
+})
+export function SizeToUnitPipe(){
+    this.compile = function(size){
+        var t = Math.floor(Math.log(size, 1024));
+        var unit = ['b', 'kb', 'mb', 'gb', 'tb', 'pb'];
+        return Math.round(size / Math.pow(1024, t), 2) + ' ' + unit[t];
+    }
+}

packages/common/src/module.js

@@ -13,6 +13,7 @@ import { whereFilterFn } from './filter/where.filter';
 import { QueryFactory } from './services/query.service';
 import { FilterPipe } from './filter/filter';
 import { ReversePipe } from './filter/reverse';
+import { SizeToUnitPipe } from './filter/size-unit-conversion';
 /**
  * set up common Module
  * that other Module could inject
@@ -30,7 +31,8 @@ jModule({
         CurrencyFilter,
         QueryFactory,
         FilterPipe,
-        ReversePipe
+        ReversePipe,
+        SizeToUnitPipe
     ],
     selectors: [
         ForDirective,

packages/core/src/component/injectors.js

@@ -10,7 +10,34 @@ export var staticInjectionToken = {
     QueryList: 'QueryList',
     Function: 'Function',
     HostRef: 'HostRef',
-    HTMLElement: 'HTMLElement'
+    HTMLElement: 'HTMLElement',
+    ContentHostRef: 'ContentHostRef'
+};
+
+/**
+     * generate local injectors
+     * Getter for Dependencies that are set in runTime
+     * see example from jSwitch Directive
+     * Dependencies can also be optional
+     * "provider:TYPE=?Value_To_Map"
+     * ? symbol represents optional Dependency
+     * @param {*} idx 
+     */
+var staticInjectionTokenHandlers = {
+    TemplateRef: (context) => TemplateRef.factory(context.injectors.ElementRef, context.get({ tokenName: 'Selector' })),
+    changeDetector: (context) => context.injectors.ElementRef.changeDetector,
+    ViewRef: (context) => new ViewRef(context.injectors.ElementRef),
+    ParentRef: (context, dep) => {
+        if (dep.value) {
+            return findParentRef(context.injectors.ElementRef.parent, dep);
+        }
+        return context.injectors.ElementRef.parent.componentInstance;
+    },
+    VALIDATORS: (context) => getValidators(context.injectors.ElementRef),
+    ContentHostRef: (context) => {
+        var componentRef = ComponentRef.get(context.injectors.ElementRef.contentHostRefId);
+       return componentRef.componentInstance
+    }
 };
 
 /**
@@ -38,42 +65,7 @@ ComponentInjectors.prototype.get = function(dep) {
     if (this.injectors.hasOwnProperty(dep.tokenName))
         return this.injectors[dep.tokenName];
     else if (staticInjectionToken[dep.tokenName])
-        return _ComponentInjectionToken(dep, this);
-}
-
-/**
- * 
- * @param {*} dep 
- * @param {*} context 
- * @returns 
- */
-function _ComponentInjectionToken(dep, context) {
-    /**
-     * generate local injectors
-     * Getter for Dependencies that are set in runTime
-     * see example from jSwitch Directive
-     * Dependencies can also be optional
-     * "provider:TYPE=?Value_To_Map"
-     * ? symbol represents optional Dependency
-     * @param {*} idx 
-     */
-    switch (dep.tokenName) {
-        case (staticInjectionToken.TemplateRef):
-            return TemplateRef.factory(context.injectors.ElementRef, context.get({ tokenName: 'Selector' }));
-        case (staticInjectionToken.changeDetector):
-            return context.injectors.ElementRef.changeDetector;
-        case (staticInjectionToken.ViewRef):
-            return new ViewRef(context.injectors.ElementRef);
-        case (staticInjectionToken.ParentRef):
-            {
-                if (dep.value) {
-                    return findParentRef(context.injectors.ElementRef.parent, dep);
-                }
-                return context.injectors.ElementRef.parent.componentInstance;
-            }
-        case (staticInjectionToken.VALIDATORS):
-            return getValidators(context.injectors.ElementRef);
-    }
+        return staticInjectionTokenHandlers[dep.tokenName](this, dep);
 }
 
 /**

packages/core/src/dom/attribute.js

@@ -75,7 +75,9 @@ AttributeAppender.helpers = {
     },
     readonly: function(nativeElement, value) {
         AttributeAppender.setValue(nativeElement, 'readonly', value, true);
-    }
+    },
+    aria: () => singleOrMultipeUpdate.apply(null, arguments),
+    data: () => singleOrMultipeUpdate.apply(null, arguments)
 };
 
 /**
@@ -97,4 +99,20 @@ AttributeAppender.setProp = function(nativeElement, propName, propValue, templat
     } else {
         AttributeAppender.setValue(nativeElement, propName, propValue);
     }
-};
+};
+
+/**
+ * 
+ * @param {*} nativeElement 
+ * @param {*} prop 
+ * @param {*} value 
+ */
+function singleOrMultipeUpdate(nativeElement, prop, value){
+    if (isobject(prop)) {
+        for(var name of prop) {
+            nativeElement[name] =  value;   
+        }
+    } else {
+        nativeElement[prop] =  value;
+    }
+}

packages/core/src/dom/event.handler.js

@@ -208,16 +208,13 @@ function getFnFromContext(eventInstance, componentInstance, context) {
     }
 
     var fn = instance[eventInstance.fn];
-    /**
-     * Array instance
-     */
-    if (fn)
-        fn.context = ((instance instanceof Array || !componentInstance[eventInstance.fn]) ? instance : componentInstance);
+    // check FN and array instace
+    if (!fn) return null;
 
+    fn.context = ((instance instanceof Array || !componentInstance[eventInstance.fn]) ? instance : componentInstance);
     instance = null;
-
     return fn;
-};
+}
 
 /**
  * 
@@ -262,7 +259,7 @@ function handleEvent(element, event, eventName) {
         } else if (registeredEvent.target) {
             var mainElement = getClosest(registeredEvent.target);
             if (!mainElement) return;
-            context = (mainElement[$elementContext] || element).context;
+            context = mainElement[$elementContext];
             // overwrite the event target to return the right element
             _event = ProxyEvent(event, mainElement);
         }

packages/core/src/dom/renderer/abstract.element.ref.js

@@ -4,22 +4,31 @@
  */
 var $eUID = 1;
 var $elementContext = '__jContext__';
+// holds a set of elements based of their refs
+var $elementContainer = new Map();
+
 /**
  * Abstract element ref for generating components
  * @param {*} definition 
  * @param {*} parentRef 
  */
 function AbstractElementRef(definition, parentRef) {
-    /**
-     * extend the definition
-     */
-    var locaVariables = null;
+    var localVariables = null;
     this.nativeElement = createElementByType(definition.name, definition.text, definition.fromDOM);
+    // all registered observers goes in here
     this.$observers = [];
+    // Element referenceId
     this.refId = $eUID++;
+    // Hold list of Element children, this can also be queried
     this.children = new QueryList();
+    // element ParentRef
     this.parent = parentRef;
+    // holds id to parentRefContext
+    // holds the referenceId to a parentRef
     this.hostRefId = (parentRef ? (parentRef.isc ? parentRef.refId : (parentRef.hostRefId || this.refId)) : this.refId);
+    // hold the refId for actuall element where this content will be injected
+    // this is only set by content injection using <j-place/>
+    this.contentHostRefId = parentRef ? parentRef.contentHostRefId : null; 
     this.type = definition.type;
     this.tagName = definition.name.toLowerCase();
     this.index = definition.index;
@@ -34,20 +43,20 @@ function AbstractElementRef(definition, parentRef) {
 
     /**
      * compile local vairables if defined
+     * <j-template />
      */
     if (definition.ctx$) {
-        locaVariables = createLocalVariables(definition.ctx$, parentRef.context, parentRef.componentInstance);
+        localVariables = createLocalVariables(definition.ctx$, parentRef.context, parentRef.componentInstance);
     }
 
     Object.defineProperties(this, {
         context: {
             get: function() {
                 // template context
-                if (locaVariables) return locaVariables;
+                if (localVariables) return localVariables;
                 // component context or custom context
-                if (componentDebugContext.has(this.refId)) {
+                if (componentDebugContext.has(this.refId)) 
                     return componentDebugContext.get(this.refId).context;
-                }
                 // parent context
                 return this.parent && this.parent.context;
             }
@@ -97,9 +106,7 @@ function AbstractElementRef(definition, parentRef) {
 
     if (11 !== this.nativeElement.nodeType) {
         Object.defineProperty(this.nativeElement, $elementContext, {
-            get: () => {
-                return this;
-            }
+            get: () => this.context
         });
     }
 };

packages/core/src/dom/renderer/element.ref.js

@@ -2,26 +2,20 @@
  * 
  * @param {*} definition 
  * @param {*} parent 
- * @param {*} _lazyCompiled
+ * @param {*} _lcmp
  */
-export function ElementRef(definition, parent, _lazyCompiled) {
+export function ElementRef(definition, parent, lcmp) {
     AbstractElementRef.call(this, definition, parent);
     this.events = new EventHandler((definition.events || []).slice());
-    this._lazyCompiled = _lazyCompiled;
-
-    /**
-     * check if element is custom element
-     */
+    // holds value for lazyCompiled element
+    this._lcmp = lcmp;
+    // check if element is custom element
     if (definition.isc) {
-        /**
-         * create the element Observer
-         */
+        // create the element Observer
         ComponentRef.create(this.refId, parent && parent.hostRef.refId);
     }
 
-    /**
-     * definition.attrObservers
-     */
+    // definition.attrObservers
     if (definition.attr$) {
         setupAttributeObservers(this, definition.attr$);
     }

packages/core/src/dom/renderer/index.js

@@ -126,7 +126,7 @@ export var ViewParser = function () {
         var placeElement = (createPlaceElement) ? new AbstractElementRef({
             name: "#",
             type: 11
-        }, hostRef) : null
+        }, hostRef) : null;
 
         /**
          * 
@@ -135,8 +135,9 @@ export var ViewParser = function () {
         function createAndAppend(elementDefinition) {
             var child = ViewParser.builder[elementDefinition.type](elementDefinition, hostRef.parent, viewContainer, context);
              // Attach the child element to the origin, used for getting the right componentRef
-             // TODO: uncomment this line if <j-place> starts breaking
-            // child.hostRefId = hostRef.refId;
+            // actual hostRefId where content is appended
+            // ContentHostRef? should reolve the component instance
+            child.contentHostRefId = hostRef.refId;
             if (appendToParent || createPlaceElement) {
                 pushToParent(child, placeElement || parent);
             } else {
@@ -228,7 +229,9 @@ export var ViewParser = function () {
             11: place,
             13: outlet,
             8: comment
-        }
+        },
+        // holds a set of elements based of their refs
+        $elementContextContainer: new Map()
     };
 }();
 
@@ -237,7 +240,7 @@ export var ViewParser = function () {
  * @param {*} node
  */
 function transverse(node) {
-    if (node._lazyCompiled) return;
+    if (node._lcmp) return;
     if (node instanceof AbstractElementRef) {
         if (node.providers && node.providers.length) {
             ElementCompiler.resolve(node, proceedWithCompilation);

packages/core/src/dom/renderer/utils.js

@@ -369,6 +369,22 @@ export function createLocalVariables(localVariables, localContext, parentContext
     return context;
 }
 
+/**
+ * 
+ * @param {*} targetContext 
+ * @param {*} targetElement 
+ * return element context
+ */
+export function getElementContext(targetContext, targetElement){
+    if (!targetContext) return targetElement.context;
+
+    if (targetContext.locaVariables){
+        return targetContext.locaVariables;
+    }
+    var componentRef = ComponentRef.get(targetContext.refId, targetContext.parentRefId);
+    return componentRef.context;
+}
+
 /**
  * methods exposed to public
  */

packages/router/src/components/open.directive.js

@@ -1,38 +1,20 @@
 import { ViewIntentService } from '../services/intent.service';
 Directive({
-    selector: 'open',
-    DI: ['ElementRef?', ViewIntentService],
-    props: ['open', "params"],
-    events: ['event:click=clickHandler()']
+    selector: 'openIntent',
+    DI: [ViewIntentService],
+    props: ['open=openIntent', "params"],
+    events: ['click:event=clickHandler()']
 })
 
 /**
  * 
- * @param {*} ElementRef 
  * @param {*} viewIntent 
  */
-export function OpenIntent(elementRef, viewIntent) {
+export function OpenIntent( viewIntent) {
     this.params = {};
-    this._open = null;
+    this.open = null;
 
     this.clickHandler = function() {
-        // state has changed
-        //where attr contains a parameter
-        if (this.splitWhere.length) {
-            //convert the required string to OBJECT
-            this.params = elementRef.context.evaluate(this.splitWhere.join(':'));
-        }
-        viewIntent.openIntent(this.pathName, this.params);
+        viewIntent.openIntent(this.open, this.params);
     };
-
-    Object.defineProperty(this, 'open', {
-        set: function(value) {
-            this.splitWhere = (value || '').split(':');
-            this.pathName = this.splitWhere.shift();
-            this._open = value;
-        },
-        get: function() {
-            return this._open;
-        }
-    });
 }