Resolves #2395 and #2389 - Capture child views

src/core/js/adapt.js

@@ -238,6 +238,33 @@ define([
 
     };
 
+    Adapt.findViewByModelId = function(id) {
+        var model = Adapt.findById(id);
+        if (!model) {
+            return;
+        }
+
+        if (model === Adapt.parentView.model) return Adapt.parentView;
+
+        var idPathToView = [id];
+        var currentLocationId = Adapt.location._currentId;
+        var currentLocationModel = _.find(model.getAncestorModels(), function(model) {
+            var modelId = model.get('_id');
+            if (modelId === currentLocationId) return true;
+            idPathToView.unshift(modelId);
+        });
+
+        if (!currentLocationModel) {
+            return console.warn('Adapt.findViewByModelId() unable to find view for model id: ' + id);
+        }
+
+        var foundView = _.reduce(idPathToView, function(view, currentId) {
+            return view && view.childViews && view.childViews[currentId];
+        }, Adapt.parentView);
+
+        return foundView;
+    };
+
     // Relative strings describe the number and type of hops in the model hierarchy
     //
     // "@component +1" means to move one component forward from the current model

src/core/js/views/adaptView.js

@@ -22,6 +22,11 @@ define([
                 '_isReady': false
             });
             this._isRemoved = false;
+
+            if (Adapt.location._currentId === this.model.get('_id')) {
+                Adapt.parentView = this;
+            }
+
             this.preRender();
             this.render();
             this.setupOnScreenHandler();
@@ -76,36 +81,43 @@ define([
             var nthChild = 0;
             var children = this.model.getChildren();
             var models = children.models;
+            this.childViews = {};
             for (var i = 0, len = models.length; i < len; i++) {
                 var model = models[i];
-                if (model.get('_isAvailable')) {
-                    nthChild ++;
-
-                    var ChildView;
-                    var ViewModelObject = this.constructor.childView || Adapt.componentStore[model.get("_component")];
-
-                    //use view+model object
-                    if (ViewModelObject.view) ChildView = ViewModelObject.view;
-                    //use view only object
-                    else ChildView = ViewModelObject;
-
-                    if (ChildView) {
-                        var $parentContainer = this.$(this.constructor.childContainer);
-                        model.set("_nthChild", nthChild);
-                        if (Adapt.config.get("_defaultDirection") == 'rtl' && model.get("_type") == 'component') {
-                            $parentContainer.prepend(new ChildView({model:model}).$el);
-                        } else {
-                            $parentContainer.append(new ChildView({model:model}).$el);
-                        }
-                    } else {
-                        throw 'The component \'' + models[i].attributes._id + '\'' +
-                              ' (\'' + models[i].attributes._component + '\')' +
-                              ' has not been installed, and so is not available in your project.';
-                    }
+                if (!model.get('_isAvailable')) continue;
+
+                nthChild++;
+                model.set("_nthChild", nthChild);
+
+                var ViewModelObject = this.constructor.childView || Adapt.componentStore[model.get("_component")];
+                var ChildView = ViewModelObject.view || ViewModelObject;
+
+                if (!ChildView) {
+                    throw 'The component \'' + models[i].attributes._id + '\'' +
+                    ' (\'' + models[i].attributes._component + '\')' +
+                    ' has not been installed, and so is not available in your project.';
                 }
+
+                var $parentContainer = this.$(this.constructor.childContainer);
+                var childView = new ChildView({ model: model });
+
+                this.childViews[model.get('_id')] = childView;
+
+                $parentContainer.append(childView.$el);
             }
         },
 
+        findDescendantViews: function(isParentFirst) {
+            var descendants = [];
+            this.childViews && _.each(this.childViews, function(view) {
+                if (isParentFirst) descendants.push(view);
+                var children = view.findDescendantViews && view.findDescendantViews(isParentFirst);
+                if (children) descendants.push.apply(descendants, children);
+                if (!isParentFirst) descendants.push(view);
+            });
+            return descendants;
+        },
+
         setReadyStatus: function() {
             this.model.set('_isReady', true);
         },
@@ -182,9 +194,14 @@ define([
             this.$el.addClass('display-none');
         },
 
-        onIsCompleteChange:function(model, isComplete){
+        onIsCompleteChange: function(model, isComplete){
             this.$el.toggleClass('completed', isComplete);
+        },
+
+        getChildViews: function() {
+            return this.childViews;
         }
+
     });
 
     return AdaptView;

src/core/less/base.less

@@ -225,6 +225,32 @@
     }
 }
 
+.component-left {
+    @media all and (min-width:(@device-width-medium + 1px)) {
+      .dir-rtl & {
+        float: right;
+
+        .component-inner {
+          margin-right: inherit;
+          margin-left: 5%;
+        }
+      }
+    }
+}
+
+.component-right {
+    @media all and (min-width:(@device-width-medium + 1px)) {
+      .dir-rtl & {
+        float: left;
+
+        .component-inner {
+          margin-left: inherit;
+          margin-right: 5%;
+        }
+      }
+    }
+}
+
 /*TO ALLOW CHILDREN ELEMENTS TO BE POSITIONED ABSOLUTELY*/
 .component { position:relative; }
 .block { position: relative; }