qcobjects-sdk 2.4.5 → 2.4.8

package/.eslintrc.json

@@ -1,23 +1,28 @@
 {
-    "root": true,
-    "env": {
-        "browser": true,
-        "es6": true,
-        "node": true
-    },
-    "extends": [
-      "qcobjects",
-      "eslint:recommended"
-    ],
-    "globals": {
-      "Atomics": "readonly",
-      "SharedArrayBuffer": "readonly"
-    },
-    "parserOptions": {
-        "ecmaVersion": 2018
-    },
-    "rules": {
-      "semi": ["error", "always"],
-      "quotes": ["error", "double"]
-    }
+  "root": true,
+  "env": {
+      "browser": true,
+      "node": true,
+      "es2021": true,
+      "es2020": true,
+      "es2017": true,
+      "es6": true
+  },
+  "extends": [
+    "eslint:recommended"
+  ],
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "parserOptions": {
+      "ecmaVersion": "latest",
+      "ecmaFeatures": {}
+  },
+  "rules": {
+    "semi": ["error", "always"],
+    "quotes": ["error", "double"],
+    "no-unused-vars": 1,
+    "no-undef": 0
+  }
 }

package/QCObjects-SDK.js

@@ -1,5 +1,5 @@
 /**
- * QCObjects SDK 2.3
+ * QCObjects SDK 2.4
  * ________________
  *
  * Author: Jean Machuca <correojean@gmail.com>
@@ -21,19 +21,19 @@
  *
  * Everyone is permitted to copy and distribute verbatim copies of this
  * license document, but changing it is not allowed.
-*/
-(function(_top) {
+ */
+(function (_top) {
   "use strict";
   var isBrowser = typeof window !== "undefined" && typeof window.self !== "undefined" && window === window.self;
   var remoteImportsPath = CONFIG.get("remoteImportsPath");
   var relativeImportPath = CONFIG.get("relativeImportPath");
-  var external = (!CONFIG.get("useLocalSDK"))?(true):(false);
-  if (external){
-    CONFIG.set("remoteImportsPath","https://sdk.qcobjects.dev/js/");
+  var external = (!CONFIG.get("useLocalSDK")) ? (true) : (false);
+  if (external) {
+    CONFIG.set("remoteImportsPath", "https://sdk.qcobjects.dev/js/");
   } else {
-    CONFIG.set("relativeImportPath","qcobjects-sdk/js/");
+    CONFIG.set("relativeImportPath", "qcobjects-sdk/js/");
   }
-  if (typeof _top._DOMCreateElement === "undefined"){
+  if (typeof _top._DOMCreateElement === "undefined") {
     _top._DOMCreateElement = function (elementName) {
       var _ret_;
       if (isBrowser) {
@@ -45,56 +45,56 @@
     };
   }
   var _imports_;
-  if (isBrowser){
+  if (isBrowser) {
     _imports_ = [
-      Import("org.qcobjects.i18n_messages",function (){},external),
-      Import("org.qcobjects.models",function (){},external),
-      Import("org.qcobjects.components",function (){},external),
-      Import("org.qcobjects.components.grid",function (){},external),
-      Import("org.qcobjects.components.list",function (){},external),
-      Import("org.qcobjects.components.slider",function (){},external),
-      Import("org.qcobjects.components.notifications",function (){},external),
-      Import("org.qcobjects.components.splashscreen",function (){},external),
-      Import("org.qcobjects.controllers",function (){},external),
-      Import("org.qcobjects.controllers.grid",function (){},external),
-      Import("org.qcobjects.controllers.list",function (){},external),
-      Import("org.qcobjects.controllers.slider",function (){},external),
-      Import("org.qcobjects.controllers.form",function (){},external),
-      Import("org.qcobjects.controllers.swagger",function (){},external),
-      Import("org.qcobjects.modal.controllers",function (){},external),
-      Import("org.qcobjects.modal.effects",function (){},external),
-      Import("org.qcobjects.views",function (){},external),
-      Import("org.qcobjects.effects",function (){},external),
-      Import("org.qcobjects.tools.canvas",function (){},external),
-      Import("org.qcobjects.tools.layouts",function (){},external),
-      Import("org.qcobjects.cloud.auth.session.usertoken",function (){},external),
-      Import("org.qcobjects.cloud.auth.session.data",function (){},external)      
+      Import("org.qcobjects.i18n_messages", function () {}, external),
+      Import("org.qcobjects.models", function () {}, external),
+      Import("org.qcobjects.components", function () {}, external),
+      Import("org.qcobjects.components.grid", function () {}, external),
+      Import("org.qcobjects.components.list", function () {}, external),
+      Import("org.qcobjects.components.slider", function () {}, external),
+      Import("org.qcobjects.components.notifications", function () {}, external),
+      Import("org.qcobjects.components.splashscreen", function () {}, external),
+      Import("org.qcobjects.controllers", function () {}, external),
+      Import("org.qcobjects.controllers.grid", function () {}, external),
+      Import("org.qcobjects.controllers.list", function () {}, external),
+      Import("org.qcobjects.controllers.slider", function () {}, external),
+      Import("org.qcobjects.controllers.form", function () {}, external),
+      Import("org.qcobjects.controllers.swagger", function () {}, external),
+      Import("org.qcobjects.modal.controllers", function () {}, external),
+      Import("org.qcobjects.modal.effects", function () {}, external),
+      Import("org.qcobjects.views", function () {}, external),
+      Import("org.qcobjects.effects", function () {}, external),
+      Import("org.qcobjects.tools.canvas", function () {}, external),
+      Import("org.qcobjects.tools.layouts", function () {}, external),
+      Import("org.qcobjects.cloud.auth.session.usertoken", function () {}, external),
+      Import("org.qcobjects.cloud.auth.session.data", function () {}, external)
     ];
   } else {
     // non-browsers environment
     var _relative_path_ = "qcobjects-sdk/js/";
     _imports_ = [
-      Import(_relative_path_+"org.qcobjects.models",function (){},external),
-      Import(_relative_path_+"org.qcobjects.components",function (){},external),
-      Import(_relative_path_+"org.qcobjects.controllers",function (){},external),
-      Import(_relative_path_+"org.qcobjects.views",function (){},external),
-      Import(_relative_path_+"org.qcobjects.effects",function (){},external),
-      Import(_relative_path_+"org.qcobjects.modal.effects",function (){},external),
-      Import(_relative_path_+"org.qcobjects.tools.canvas",function (){},external),
-      Import(_relative_path_+"org.qcobjects.tools.layouts",function (){},external),
-      Import(_relative_path_+"org.qcobjects.cloud.auth.session.usertoken",function (){},external),
-      Import(_relative_path_+"org.qcobjects.cloud.auth.session.data",function (){},external)
+      Import(_relative_path_ + "org.qcobjects.models", function () {}, external),
+      Import(_relative_path_ + "org.qcobjects.components", function () {}, external),
+      Import(_relative_path_ + "org.qcobjects.controllers", function () {}, external),
+      Import(_relative_path_ + "org.qcobjects.views", function () {}, external),
+      Import(_relative_path_ + "org.qcobjects.effects", function () {}, external),
+      Import(_relative_path_ + "org.qcobjects.modal.effects", function () {}, external),
+      Import(_relative_path_ + "org.qcobjects.tools.canvas", function () {}, external),
+      Import(_relative_path_ + "org.qcobjects.tools.layouts", function () {}, external),
+      Import(_relative_path_ + "org.qcobjects.cloud.auth.session.usertoken", function () {}, external),
+      Import(_relative_path_ + "org.qcobjects.cloud.auth.session.data", function () {}, external)
     ];
   }
-  _top._sdk_ = Promise.all(_imports_).then(function (){
-    CONFIG.set("useSDK",true);
-    CONFIG.set("remoteImportsPath",remoteImportsPath);
-    CONFIG.set("relativeImportPath",relativeImportPath);
+  _top._sdk_ = Promise.all(_imports_).then(function () {
+    CONFIG.set("useSDK", true);
+    CONFIG.set("remoteImportsPath", remoteImportsPath);
+    CONFIG.set("relativeImportPath", relativeImportPath);
     _top.__start__();
 
   });
 
 
-}).call(null,(typeof module === "object" && typeof module.exports === "object")?(module.exports = global):((typeof global === "object")?(global):(
-  (typeof window === "object")?(window):({})
+}).call(null, (typeof module === "object" && typeof module.exports === "object") ? (module.exports = global) : ((typeof global === "object") ? (global) : (
+  (typeof window === "object") ? (window) : ({})
 )));

package/VERSION

@@ -1 +1 @@
-2.4.5
+2.4.8

package/demo-tests/test-component-grid.html

@@ -3,47 +3,60 @@
 
 <head>
   <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
-   <!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
-   <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: https://ssl.gstatic.com; img-src * 'self' data:; child-src *; style-src * 'self' 'unsafe-inline' 'unsafe-eval'; script-src * 'self' 'unsafe-inline' 'unsafe-eval'; connect-src * 'self' 'unsafe-inline' 'unsafe-eval';media-src *">
+  <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+  <!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
+  <meta http-equiv="Content-Security-Policy"
+    content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: https://ssl.gstatic.com; img-src * 'self' data:; child-src *; style-src * 'self' 'unsafe-inline' 'unsafe-eval'; script-src * 'self' 'unsafe-inline' 'unsafe-eval'; connect-src * 'self' 'unsafe-inline' 'unsafe-eval';media-src *">
   <title>QCObjects Demo</title>
-  <script type="text/javascript" src="https://cdn.qcobjects.dev/QCObjects.js"></script>
+  <script type="text/javascript"
+    src="https://cdnjs.cloudflare.com/ajax/libs/qcobjects/2.4.20/QCObjects.min.js"></script>
 </head>
 
 <body>
 
 
-  <component name="grid" cols=4 componentClass="org.qcobjects.components.grid.GridComponent" serviceClass="MyTestService" ></component>
+  <my-grid cols=4 componentClass="org.qcobjects.components.grid.GridComponent" serviceClass="MyTestService">
+  </my-grid>
 
   <script>
-    logger.debugEnabled= true;
-
-    Class('MyTestService',Service,{
-      name:'myservice',
-      external:true,
-      cached:false,
-      method:'GET',
-      headers:{'Content-Type':'application/json'},
-      url:'https://api.github.com/orgs/QuickCorp/repos',
-      withCredentials:false,
-      _new_:()=>{
-        // service instantiated
-      },
-      done({request, service}){
+    logger.debugEnabled = true;
+
+    class MyTestService extends Service {
+
+      /**
+       * Creates the instance for MyTestService
+       */
+      constructor() {
+        super();
+        this.name = 'myservice';
+        this.external = true;
+        this.cached = false;
+        this.method = 'GET';
+        this.headers = { 'Content-Type': 'application/json' };
+        this.url = 'https://api.github.com/orgs/QuickCorp/repos';
+        this.withCredentials = false;
+
+      }
+
+      done({ request, service }) {
         logger.debug(request);
-        service.template = JSON.stringify({result:JSON.parse(service.template).reverse().map(function (project){
-          return {
-            id:project.id,
-            description:project.description,
-            title:project.name,
-            url:project.html_url,
-            image:`https://via.placeholder.com/150/FFFF00/000000?text=${encodeURI(project.name)}`
-          };
-        })});
+        service.template = JSON.stringify({
+          result: JSON.parse(service.template).reverse().map(function (project) {
+            return {
+              id: project.id,
+              description: project.description,
+              title: project.name,
+              url: project.html_url,
+              image: `https://via.placeholder.com/150/FFFF00/000000?text=${encodeURI(project.name)}`
+            };
+          })
+        });
       }
 
-  });
+
+    }
+
+    RegisterWidgets ("my-grid")
   </script>
 </body>
 

package/demo-tests/test-component-list.html

@@ -3,38 +3,46 @@
 
 <head>
   <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
-   <!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
-   <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: https://ssl.gstatic.com; img-src * 'self' data:; child-src *; style-src * 'self' 'unsafe-inline' 'unsafe-eval'; script-src * 'self' 'unsafe-inline' 'unsafe-eval'; connect-src * 'self' 'unsafe-inline' 'unsafe-eval';media-src *">
+  <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+  <!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
+  <meta http-equiv="Content-Security-Policy"
+    content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: https://ssl.gstatic.com; img-src * 'self' data:; child-src *; style-src * 'self' 'unsafe-inline' 'unsafe-eval'; script-src * 'self' 'unsafe-inline' 'unsafe-eval'; connect-src * 'self' 'unsafe-inline' 'unsafe-eval';media-src *">
   <title>QCObjects Demo</title>
-  <script type="text/javascript" src="https://cdn.qcobjects.dev/QCObjects.js"></script>
+  <script type="text/javascript"
+    src="https://cdnjs.cloudflare.com/ajax/libs/qcobjects/2.4.20/QCObjects.min.js"></script>
 </head>
 
 <body>
 
+  <my-list componentClass="ListComponent" serviceClass="MyTestService" label-field="name" value-field="html_url">
 
-  <component name="list" componentClass="ListComponent" serviceClass="MyTestService" label-field="name" value-field="html_url"></component>
+  </my-list>
 
   <script>
-  logger.debugEnabled= true;
-
-    Class('MyTestService',Service,{
-      name:'myservice',
-      external:true,
-      cached:false,
-      method:'GET',
-      headers:{'Content-Type':'application/json'},
-      url:'https://api.github.com/orgs/QuickCorp/repos',
-      withCredentials:false,
-      _new_:()=>{
-        // service instantiated
-      },
-      done:()=>{
-        // service loaded
+    logger.debugEnabled = true;
+
+
+    class MyTestService extends Service {
+
+      /**
+       * Creates the instance for MyTestService
+       */
+      constructor() {
+
+        this.name = 'myservice';
+        this.external = true;
+        this.cached = false;
+        this.method = 'GET';
+        this.headers = { 'Content-Type': 'application/json' };
+        this.url = 'https://api.github.com/orgs/QuickCorp/repos';
+        this.withCredentials = false;
+
       }
-  });
+    }
+
+    RegisterWidgets("my-list");
+
   </script>
 </body>
 
-</html>
+</html>

package/demo-tests/test-component-notifications.html

@@ -4,9 +4,9 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
-   <!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
-   <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: https://ssl.gstatic.com; img-src * 'self' data:; child-src *; style-src * 'self' 'unsafe-inline' 'unsafe-eval'; script-src * 'self' 'unsafe-inline' 'unsafe-eval'; connect-src * 'self' 'unsafe-inline' 'unsafe-eval';media-src *">
+  <!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
+  <meta http-equiv="Content-Security-Policy"
+    content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: https://ssl.gstatic.com; img-src * 'self' data:; child-src *; style-src * 'self' 'unsafe-inline' 'unsafe-eval'; script-src * 'self' 'unsafe-inline' 'unsafe-eval'; connect-src * 'self' 'unsafe-inline' 'unsafe-eval';media-src *">
   <title>QCObjects Demo</title>
   <script type="text/javascript" src="https://cdn.qcobjects.dev/QCObjects.js"></script>
 </head>
@@ -14,17 +14,36 @@
 <body>
 
 
-  <component name="customnotification" template-source="inline" componentClass="CustomNotificationComponent" ></component>
+  <custom-notification template-source="inline" componentClass="CustomNotificationComponent"></custom-notification>
 
   <script>
-      Class ("CustomNotificationComponent", Component, {
-        message: "Page was loaded successfully!",
-        done (standardResponse) {
-          NotificationComponent.success(this.message);
-          _super_("NotificationComponent", "done").call(this, standardResponse);
-        }
-      });
+
+    class CustomNotificationComponent extends Component {
+
+      /**
+       * Creates the instance for CustomNotificationComponent
+       */
+      constructor () {
+        this.message= "Page was loaded successfully!";
+
+      }
+
+      /**
+       * What is inside this function is executed after the component loading is done
+       * 
+       * @param {*} standardResponse it brings all information of the component
+       */
+      done(standardResponse) {
+        super.done(standardResponse);
+
+        /* in this case we will call a notification after the component is loaded*/
+        NotificationComponent.success(this.message);
+      }
+
+    }
+
+    RegisterWidgets ("custom-notification")
   </script>
 </body>
 
-</html>
+</html>

package/demo-tests/test-component-slider.html

@@ -4,9 +4,9 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
-   <!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
-   <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: https://ssl.gstatic.com; img-src * 'self' data:; child-src *; style-src * 'self' 'unsafe-inline' 'unsafe-eval'; script-src * 'self' 'unsafe-inline' 'unsafe-eval'; connect-src * 'self' 'unsafe-inline' 'unsafe-eval';media-src *">
+  <!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
+  <meta http-equiv="Content-Security-Policy"
+    content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: https://ssl.gstatic.com; img-src * 'self' data:; child-src *; style-src * 'self' 'unsafe-inline' 'unsafe-eval'; script-src * 'self' 'unsafe-inline' 'unsafe-eval'; connect-src * 'self' 'unsafe-inline' 'unsafe-eval';media-src *">
   <title>QCObjects Demo</title>
   <script type="text/javascript" src="https://cdn.qcobjects.dev/QCObjects.js"></script>
 </head>
@@ -14,39 +14,55 @@
 <body>
 
 
-  <component name="slider" componentClass="org.qcobjects.components.slider.SliderComponent" serviceClass="MyTestService" ></component>
+  <my-slider componentClass="org.qcobjects.components.slider.SliderComponent" serviceClass="MyTestService"></my-slider>
 
   <script>
-    logger.debugEnabled= true;
-
-    Class('MyTestService',Service,{
-      name:'myservice',
-      external:true,
-      cached:false,
-      method:'GET',
-      headers:{'Content-Type':'application/json'},
-      url:'https://api.github.com/orgs/QuickCorp/repos',
-      withCredentials:false,
-      _new_:()=>{
-        // service instantiated
-      },
-      done({request, service}){
+    logger.debugEnabled = true;
+
+    class MyTestService extends Service {
+
+      /**
+       * Creates the instance for MyTestService
+       */
+      constructor() {
+        this.name = 'myservice';
+        this.external = true;
+        this.cached = false;
+        this.method = 'GET';
+        this.headers = { 'Content-Type': 'application/json' };
+        this.url = 'https://api.github.com/orgs/QuickCorp/repos';
+        this.withCredentials = false;
+      }
+
+      /**
+       * What is inside this function is executed after the component loading is done
+       * 
+       * @param {*} standardResponse it brings all information of the component
+       */
+       done({ request, service }) {
         logger.debug(request);
-        service.template = JSON.stringify({result:JSON.parse(service.template).reverse().map(function (project){
-          return {
-            id:project.id,
-            description:project.description,
-            title:project.name,
-            link:project.html_url,
-            image:`https://via.placeholder.com/150/FFFF00/000000?text=${encodeURI(project.name)}`,
-            label: "Go to repo",
-            category: project.name
-          };
-        })});
+
+        /* in this case we will parse response and use only the fields we need */
+        service.template = JSON.stringify({
+          result: JSON.parse(service.template).reverse().map(function (project) {
+            return {
+              id: project.id,
+              description: project.description,
+              title: project.name,
+              link: project.html_url,
+              image: `https://via.placeholder.com/150/FFFF00/000000?text=${encodeURI(project.name)}`,
+              label: "Go to repo",
+              category: project.name
+            };
+          })
+        });
       }
 
-  });
+
+    }
+
+    RegisterWidgets("my-slider")
   </script>
 </body>
 
-</html>
+</html>