V2.0.8 (#69)

* Add get module helper. (#68) Only initialize modules once. Add isElementInViewport detector * Update version numbers
Houston-Inc · Sep 13, 2017 · 5d6d527 · 5d6d527
1 parent 00360d3
commit 5d6d527
Show file tree

Hide file tree

Showing 8 changed files with 149 additions and 38 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -19,7 +19,8 @@
     "import/no-extraneous-dependencies": "off",
     "import/no-unresolved": "off",
     "import/extensions": "off",
-    "class-methods-use-this": "off"
+    "class-methods-use-this": "off",
+    "max-len": "off"
   },
 
   "parser": "babel-eslint",

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "ppr-js",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "authors": [
     "Janne Savolainen"
   ],

diff --git a/dist/ppr.js b/dist/ppr.js
@@ -966,6 +966,26 @@
     },
 
 
+    /**
+     * Check whether given element is in viewport
+     * @param {object} element HTML node
+     * @return {Boolean} is in viewport
+     */
+    isElementInViewport: function isElementInViewport(element) {
+      var el = element;
+
+      // Support for jQuery node
+      if (el instanceof $) {
+        el = el[0];
+      }
+
+      var rect = el.getBoundingClientRect();
+      var viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+
+      return rect.top >= -100 && rect.bottom <= viewportHeight + 100;
+    },
+
+
     /**
      * Check whether current window matches to mobile breakpoint
      * @returns {Boolean}
@@ -1446,6 +1466,7 @@
       this.data = null;
       this.eventBus = new _pprLibrary2.default();
       this.components = {};
+      this.modulePromises = {};
       this.cacheComponentReady = [];
 
       // Set page data
@@ -1527,36 +1548,32 @@
           _this.components[params.id] = instance;
 
           // Map required modules to namespaces
-          var requiredModuleNames = instance.getRequiredModules();
-          var requiredModules = _lodash2.default.map(requiredModuleNames, function (ns) {
-            return 'ppr.module.' + ns;
+          var modulePromises = instance.getRequiredModules().map(function (moduleName) {
+            return _this.getModule(moduleName);
           });
 
-          // Load modules
-          _pprLibraryUtils4.default.load(requiredModules, function () {
-            for (var _len = arguments.length, modules = Array(_len), _key = 0; _key < _len; _key++) {
-              modules[_key] = arguments[_key];
-            }
-
+          Promise.all(modulePromises).then(function (modules) {
             var messages = {};
 
             // Initialize modules
-            _lodash2.default.each(modules, function (module, index) {
-              module.initialize({}, _this.eventBus);
-              messages[requiredModuleNames[index]] = module.getMessages();
+            _lodash2.default.each(modules, function (module) {
+              var moduleName = module.name.toLowerCase();
+              messages[moduleName] = module.getMessages();
             });
 
             instance.setModuleMessages(messages);
 
             // Wait until instance is buildable
             instance.isBuildable().then(function (data) {
               if (instance.build(data) === false) {
-                delete _this.components[params.id];
-                node.remove();
+                _this.removeComponent(params.id);
                 return;
               }
 
               instance.afterBuild();
+
+              // Build child components
+              _this.buildComponents(node);
             });
           });
         });
@@ -1568,21 +1585,25 @@
       value: function buildComponents(node) {
         var _this2 = this;
 
-        node.find('[data-component]').each(function (index, element) {
+        var componentNodes = node.find('[data-component]');
+        var childNodes = node.find('[data-component] [data-component]');
+        componentNodes.not(childNodes).each(function (index, element) {
           return _this2.eventBus.publish('build_component', (0, _jquery2.default)(element));
         });
       }
     }, {
       key: 'buildUIExtensions',
       value: function buildUIExtensions() {
+        var _this3 = this;
+
         // eslint-disable-line
         _pprLibraryUtils4.default.load(_ppr2.default.get('ui.builders', []), function () {
-          for (var _len2 = arguments.length, builders = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-            builders[_key2] = arguments[_key2];
+          for (var _len = arguments.length, builders = Array(_len), _key = 0; _key < _len; _key++) {
+            builders[_key] = arguments[_key];
           }
 
           _lodash2.default.each(builders, function (builder) {
-            builder.initialize();
+            builder.initialize(_this3);
           });
         });
       }
@@ -1591,6 +1612,31 @@
       value: function getComponent(id) {
         return typeof this.components[id] !== 'undefined' ? this.components[id] : null;
       }
+    }, {
+      key: 'getModule',
+      value: function getModule(name) {
+        var _this4 = this;
+
+        if (Object.prototype.hasOwnProperty.call(this.modulePromises, name)) {
+          return this.modulePromises[name];
+        }
+
+        var modulePromise = new Promise(function (resolve) {
+          // eslint-disable-line
+          var requireName = 'ppr.module.' + name;
+
+          // Load module
+          _pprLibraryUtils4.default.load(requireName, function (module) {
+            module.initialize({}, _this4.eventBus);
+
+            return resolve(module);
+          });
+        });
+
+        this.modulePromises[name] = modulePromise;
+
+        return modulePromise;
+      }
     }, {
       key: 'onComponentBuildFinished',
       value: function onComponentBuildFinished(componentId) {
@@ -1604,7 +1650,7 @@
     }, {
       key: 'removeComponent',
       value: function removeComponent(ids) {
-        var _this3 = this;
+        var _this5 = this;
 
         var targetIds = ids;
 
@@ -1613,13 +1659,13 @@
         }
 
         _lodash2.default.each(targetIds, function (id) {
-          var componentInstance = _this3.components[id];
+          var componentInstance = _this5.components[id];
 
           // Remove references
           if (typeof componentInstance !== 'undefined') {
             componentInstance.reset();
             componentInstance.node.remove();
-            delete _this3.components[id];
+            delete _this5.components[id];
           }
         });
       }
@@ -2009,6 +2055,15 @@
 
         this.reset();
 
+        var childIds = this.node.find('[data-component-id]').map(function (index, element) {
+          return (0, _jquery2.default)(element).attr('data-component-id');
+        });
+
+        // Remove child components
+        if (childIds.length > 0) {
+          this.eventBus.publish('remove_component', childIds);
+        }
+
         // Replace nodes
         this.node.replaceWith(targetNode);
         this.node = targetNode;
@@ -2261,14 +2316,17 @@
       }
     }], [{
       key: 'initialize',
-      value: function initialize() {
+      value: function initialize(page) {
         if (!this.shouldBuild()) {
           return false;
         }
 
         var targetDependencies = this.getDependencies();
         var instance = new this();
 
+        // Remember page
+        instance.page = page;
+
         _pprLibraryUtils2.default.load(targetDependencies, function () {
           instance.build.apply(instance, arguments);
         });

diff --git a/dist/ppr.min.js b/dist/ppr.min.js
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ppr-js",
   "description": "Lightweight javascript library for component functionality",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "repository": {
     "type": "git",
     "url": "https://github.com/Houston-Inc/ppr.js"

diff --git a/src/library/utils/window.js b/src/library/utils/window.js
@@ -1,6 +1,8 @@
 import _ from 'lodash';
 import Config from 'ppr.config';
 
+/* globals $ */
+
 export default {
 
   configList: {
@@ -33,6 +35,28 @@ export default {
     return typeof this.configList.breakpoints[breakpoint] !== 'undefined';
   },
 
+  /**
+   * Check whether given element is in viewport
+   * @param {object} element HTML node
+   * @return {Boolean} is in viewport
+   */
+  isElementInViewport(element) {
+    let el = element;
+
+    // Support for jQuery node
+    if (el instanceof $) {
+      el = el[0];
+    }
+
+    const rect = el.getBoundingClientRect();
+    const viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+
+    return (
+        rect.top >= -100 &&
+        rect.bottom <= viewportHeight + 100
+    );
+  },
+
   /**
    * Check whether current window matches to mobile breakpoint
    * @returns {Boolean}

diff --git a/src/page/baseprototype.js b/src/page/baseprototype.js
@@ -13,6 +13,7 @@ export default class BasePrototype {
     this.data = null;
     this.eventBus = new EventBusPrototype();
     this.components = {};
+    this.modulePromises = {};
     this.cacheComponentReady = [];
 
     // Set page data
@@ -91,17 +92,15 @@ export default class BasePrototype {
       this.components[params.id] = instance;
 
       // Map required modules to namespaces
-      const requiredModuleNames = instance.getRequiredModules();
-      const requiredModules = _.map(requiredModuleNames, ns => `ppr.module.${ns}`);
+      const modulePromises = instance.getRequiredModules().map(moduleName => this.getModule(moduleName));
 
-      // Load modules
-      UniversalLoader.load(requiredModules, (...modules) => {
+      Promise.all(modulePromises).then((modules) => {
         const messages = {};
 
         // Initialize modules
-        _.each(modules, (module, index) => {
-          module.initialize({}, this.eventBus);
-          messages[requiredModuleNames[index]] = module.getMessages();
+        _.each(modules, (module) => {
+          const moduleName = module.name.toLowerCase();
+          messages[moduleName] = module.getMessages();
         });
 
         instance.setModuleMessages(messages);
@@ -139,7 +138,7 @@ export default class BasePrototype {
   buildUIExtensions() { // eslint-disable-line
     UniversalLoader.load(Config.get('ui.builders', []), (...builders) => {
       _.each(builders, (builder) => {
-        builder.initialize();
+        builder.initialize(this);
       });
     });
   }
@@ -154,6 +153,32 @@ export default class BasePrototype {
       this.components[id] : null;
   }
 
+  /**
+   * Get module by name
+   * @param {string} name name of module
+   * @returns {Object}
+   */
+  getModule(name) {
+    if (Object.prototype.hasOwnProperty.call(this.modulePromises, name)) {
+      return this.modulePromises[name];
+    }
+
+    const modulePromise = new Promise((resolve) => { // eslint-disable-line
+      const requireName = `ppr.module.${name}`;
+
+      // Load module
+      UniversalLoader.load(requireName, (module) => {
+        module.initialize({}, this.eventBus);
+
+        return resolve(module);
+      });
+    });
+
+    this.modulePromises[name] = modulePromise;
+
+    return modulePromise;
+  }
+
   /**
    * Function to be called when each component is ready
    * @param {string} componentId

diff --git a/src/ui/builderprototype.js b/src/ui/builderprototype.js
@@ -10,14 +10,17 @@ export default class BuilderPrototype {
    * Initialize builder
    * @returns {Boolean}
    */
-  static initialize() {
+  static initialize(page) {
     if (!this.shouldBuild()) {
       return false;
     }
 
     const targetDependencies = this.getDependencies();
     const instance = new this();
 
+    // Remember page
+    instance.page = page;
+
     UniversalLoader.load(targetDependencies, (...dependencies) => {
       instance.build(...dependencies);
     });