qcobjects-sdk 0.0.1 → 0.0.3

package/VERSION

@@ -0,0 +1 @@
+2.4.24

package/css/base-modal.css

@@ -0,0 +1,43 @@
+/* The Modal (background) */
+.modal {
+  display: none; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 1; /* Sit on top */
+  padding-top: 100px; /* Location of the box */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgb(0,0,0); /* Fallback color */
+  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  border-radius: 12px !important;
+  border: none !important;
+}
+
+/* Modal Content */
+.modal-content {
+  background-color: #111;
+  background-image: radial-gradient( #edeeef,#dee3de,#fcfcfc);
+  margin: auto;
+  padding: 20px;
+  border-radius: 12px !important;
+  border: 1px solid #909090;
+  width: 80%;
+  height:auto;
+}
+/* The Close Button */
+.close {
+  color: #aaaaaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+  color: #000;
+  text-decoration: none;
+  cursor: pointer;
+}
+.modal * {color:black}

package/css/basic-layout-embedded-nav.css

@@ -0,0 +1,14 @@
+/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
+@media (max-width: 600px),
+@media (max-width:460px),
+@media (aspect-ratio: 9/16),
+@media (aspect-ratio: 10/16),
+@media (aspect-ratio: 5/8),
+@media (aspect-ratio: 3/4),
+@media (aspect-ratio: 2/3){
+ nav, article {
+   width: 100%;
+   height: auto;
+   position: relative;
+ }
+}

package/css/basic-layout.css

@@ -0,0 +1,76 @@
+/**
+ * QCObjects SDK 1.0
+ * ________________
+ *
+ * Author: Jean Machuca <correojean@gmail.com>
+ *
+ * Cross Browser Javascript Framework for MVC Patterns
+ * QuickCorp/QCObjects is licensed under the
+ * GNU Lesser General Public License v3.0
+ * [LICENSE] (https://github.com/QuickCorp/QCObjects/blob/master/LICENSE.txt)
+ *
+ * Permissions of this copyleft license are conditioned on making available
+ * complete source code of licensed works and modifications under the same
+ * license or the GNU GPLv3. Copyright and license notices must be preserved.
+ * Contributors provide an express grant of patent rights. However, a larger
+ * work using the licensed work through interfaces provided by the licensed
+ * work may be distributed under different terms and without source code for
+ * the larger work.
+ *
+ * Copyright (C) 2015 Jean Machuca,<correojean@gmail.com>
+ *
+ * Everyone is permitted to copy and distribute verbatim copies of this
+ * license document, but changing it is not allowed.
+*/
+
+@charset "UTF-8";
+/* CSS Document */
+
+* {
+    box-sizing: border-box;
+  }
+
+  body {
+    font-family: Arial, Helvetica, sans-serif;
+  }
+
+  /* Style the header */
+  header {
+    padding: 30px;
+    text-align: center;
+    font-size: 20px;
+  }
+
+  /* Create two columns/boxes that floats next to each other */
+  nav {
+    float: left;
+    width: 30%;
+    height: 1080px;
+    padding: 20px;
+  }
+
+  /* Style the list inside the menu */
+  nav ul {
+    list-style-type: none;
+    padding: 0;
+  }
+
+  article {
+    float: left;
+    padding: 20px;
+    width: 70%;
+  }
+
+  /* Clear floats after the columns */
+  section:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+
+
+  /* Style the footer */
+  footer {
+    padding: 10px;
+    text-align: center;
+  }

package/css/components/horizontal-list.css

@@ -0,0 +1,64 @@
+ul {
+  display: flex;
+}
+
+li {
+  display: inline;
+}
+
+ul {
+  padding: 15px 0 15px 0;
+  background-color: #f7f6f6 !important;
+  border-radius: 13px;
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px 0px !important;
+}
+
+ul li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  padding-top: 7px;
+  padding-bottom: 7px;
+  padding-left: 10px;
+  border-bottom: 1px solid white;
+}
+
+ul {
+  list-style-type: none;
+}
+
+
+li:hover {
+  background: white;
+  cursor: pointer;
+}
+
+ul li ul {
+  background: white;
+  visibility: hidden;
+  opacity: 0;
+  min-width: 5rem;
+  position: relative;
+  transition: all 0.5s ease;
+  margin-top: 1rem;
+  left: 0;
+  display: none;
+}
+
+ul li:hover > ul,
+ul li ul:hover {
+  visibility: visible;
+  opacity: 1;
+  display: inline-block;
+  margin: 0 auto;
+  width: 95%;
+}
+
+ul li ul li {
+  clear: both;
+  width: 100%;
+  padding: 1%;
+}
+ ul li {
+  overflow-x: hidden;
+}

package/css/components/list.css

@@ -0,0 +1,57 @@
+ul {
+  padding: 15px 0 15px 0;
+  background-color: #f7f6f6 !important;
+  border-radius: 13px;
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px 0px !important;
+}
+
+ul li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  padding-top: 7px;
+  padding-bottom: 7px;
+  padding-left: 10px;
+  border-bottom: 1px solid white;
+}
+
+ul {
+  list-style-type: none;
+}
+
+
+ul, li {display: block;}
+li:hover {
+  background: white;
+  cursor: pointer;
+}
+
+ul li ul {
+  background: white;
+  visibility: hidden;
+  opacity: 0;
+  min-width: 5rem;
+  position: relative;
+  transition: all 0.5s ease;
+  margin-top: 1rem;
+  left: 0;
+  display: none;
+}
+
+ul li:hover > ul,
+ul li ul:hover {
+  visibility: visible;
+  opacity: 1;
+  display: inline-block;
+  margin: 0 auto;
+  width: 95%;
+}
+
+ul li ul li {
+  clear: both;
+  width: 100%;
+  padding: 1%;
+}
+ ul li {
+  overflow-x: hidden;
+}

package/css/components/splashscreen.css

@@ -0,0 +1,111 @@
+:host * {
+  box-sizing: border-box;
+}
+
+:host {
+  zoom: 1.0;
+  width: device-width;
+  margin: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  position: absolute;
+  padding: 0;
+  min-width: 100vw;
+  min-height: 100vh;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background-color: black;
+}
+#slot-logo::slotted(img) {
+  vertical-align: middle;
+  display: block;
+  width: 100vw;
+  left: 0;
+  margin: 0;
+  padding: 0;
+  top: 20vh;
+  bottom: 20vh;
+  position: absolute;
+  z-index: 9999999999;
+  transform-origin: center;
+  transform-style: preserve-3d;
+  filter: blur(0em);
+  transition: filter 0.5s;
+}
+
+:host * {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-touch-callout: none;
+  /* prevent callout to copy image, etc when tap to hold */
+  -webkit-text-size-adjust: none;
+  /* prevent webkit from resizing text to fit */
+  -webkit-user-select: none;
+  /* prevent copy paste, to allow, change 'none' to 'text' */
+}
+
+/* FOCUS */
+:host summary:focus,
+:host a:focus,
+:host button:focus {
+  outline: none;
+}
+
+.splashscreen,
+.fullscreen-bg {
+  padding: 0;
+  margin: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 0;
+  background-attachment: fixed;
+  background-position: center;
+  background-clip: content-box;
+  background-size: cover;
+  position: absolute;
+  min-width: 100vw;
+  min-height: 100vh;
+  width: 100vw;
+  height: 100vh;
+  z-index: 0;
+  overflow: hidden;
+}
+
+.splashscreen .splashcontent {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0 auto;
+  width: 100vw;
+  height: 100vh;
+  padding: 0;
+  overflow: hidden;
+  z-index: 1;
+}
+
+.splashscreen .splashcontent p {
+  color: white;
+}
+
+video.fullscreen-bg__video {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  min-width: 100vw;
+  min-height: 100vh;
+  overflow: hidden;
+  z-index: 0;
+  object-fit: cover;
+}

package/css/modal.css

@@ -0,0 +1,46 @@
+@import url("./base-modal.css");
+
+.modal details {
+    border: 1px 0 0 1px solid #aaa;
+    border-radius: 4px;
+    padding: .5em .5em 0;
+}
+
+.modal summary {
+    font-weight: bold;
+    margin: -.5em -.5em 0;
+    padding: .5em;
+}
+
+.modal details[open] {
+    padding: .5em;
+}
+
+.modal details[open] summary {
+    border-bottom: 1px solid #aaa;
+    margin-bottom: .5em;
+}
+
+.modal summary::-webkit-details-marker {
+  display: none
+}
+
+.modal summary:after {
+  border-radius: 5px;
+  content: "+";
+  color: #111111;
+  float: left;
+  font-size: 1.5em;
+  font-weight: bold;
+  margin: -5px 10px 0 0;
+  padding: 0;
+  text-align: center;
+  width: 20px;
+}
+.modal details[open] summary:after {
+  content: "-";
+}
+
+.modal ul {
+  list-style-type: none;
+}

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

@@ -0,0 +1,63 @@
+<!doctype html>
+<html class="no-js" lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <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://cdnjs.cloudflare.com/ajax/libs/qcobjects/2.4.20/QCObjects.js"></script>
+</head>
+
+<body>
+
+
+  <my-grid cols=4 componentClass="org.qcobjects.components.grid.GridComponent" serviceClass="MyTestService">
+  </my-grid>
+
+  <script>
+    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)}`
+            };
+          })
+        });
+      }
+
+
+    }
+
+    RegisterWidgets ("my-grid")
+  </script>
+</body>
+
+</html>

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

@@ -0,0 +1,53 @@
+<!doctype html>
+<html class="no-js" lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <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://raw.githubusercontent.com/QuickCorp/QCObjects/v2.4-beta/QCObjects.js"></script>
+</head>
+
+<body>
+
+  <my-list componentClass="ListComponent" serviceClass="MyTestService" label-field="name" value-field="html_url">
+
+  </my-list>
+
+  <script>
+    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 (standardResponse){
+        console.log(standardResponse);
+      }
+    }
+
+    RegisterWidgets("my-list");
+
+  </script>
+</body>
+
+</html>

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

@@ -0,0 +1,49 @@
+<!doctype html>
+<html class="no-js" lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <!-- 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://cdnjs.cloudflare.com/ajax/libs/qcobjects/2.4.20/QCObjects.js"></script>
+</head>
+
+<body>
+
+
+  <custom-notification template-source="inline" componentClass="CustomNotificationComponent"></custom-notification>
+
+  <script>
+
+    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>

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

@@ -0,0 +1,68 @@
+<!doctype html>
+<html class="no-js" lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <!-- 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://cdnjs.cloudflare.com/ajax/libs/qcobjects/2.4.20/QCObjects.js"></script>
+</head>
+
+<body>
+
+
+  <my-slider componentClass="org.qcobjects.components.slider.SliderComponent" serviceClass="MyTestService"></my-slider>
+
+  <script>
+    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);
+
+        /* 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>