qcobjects-sdk 2.4.66 → 2.5.105

package/src/ts/org.qcobjects.controllers.list.ts

@@ -0,0 +1,256 @@
+/**
+ * QCObjects SDK 2.5
+ * ________________
+ *
+ * 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.
+ */
+"use strict";
+import { Package, Controller, logger, CONFIG, _DataStringify, _DOMCreateElement, New, ClassFactory, ComponentURI, serviceLoader } from "qcobjects";
+import { ListComponent } from "./org.qcobjects.components.list";
+export type ListControllerParams = {
+  component: ListComponent;
+  valueField: string | undefined;
+  labelField: string | undefined;
+  dependencies: any[];
+};
+
+export class ListController extends Controller {
+  __instanceID!: number;
+  component: ListComponent;
+  valueField: string | undefined;
+  labelField: string | undefined;
+  rows: number | string | null;
+  cols: number;
+  _componentRoot: HTMLElement | undefined;
+
+  constructor({ component, dependencies = [], valueField = undefined, labelField = undefined }: ListControllerParams) {
+    super({ component, dependencies, valueField, labelField } as ListControllerParams);
+    this.component = component;
+    this._componentRoot = (this.component.shadowed) ? (this.component.shadowRoot) : (this.component.body);
+
+    this.labelField = this.component.body.getAttribute("label-field") as string;
+    this.valueField = this.component.body.getAttribute("value-field") as string;
+    this.rows = this.component.body.getAttribute("rows");
+    this.rows = (this.rows !== null) ? (this.rows) : (this.component.rows);
+    this.cols = 1;
+    logger.debug("ListController INIT");
+
+  }
+
+  getPageIndex(page: number, totalPage: number, totalElements: number) {
+    page = (page > 0) ? (page - 1) : (0);
+    return [totalElements * page / totalPage, (totalElements * page / totalPage) + totalElements / totalPage];
+  }
+
+  addSubcomponents() {
+    this.component.subcomponents = [];
+    const layout = this.component.body.getAttribute("layout");
+    const basePath = CONFIG.get("listBasePath", CONFIG.get("remoteSDKPath", ""));
+    let cssLayout = "";
+    this.labelField = this.component.body.getAttribute("label-field");
+    this.valueField = this.component.body.getAttribute("value-field");
+
+    if (layout === "horizontal") {
+      cssLayout = `@import url("${basePath}css/components/horizontal-list.css");`;
+    } else {
+      cssLayout = `@import url("${basePath}css/components/list.css");`;
+    }
+    if (typeof this._componentRoot !== "undefined") {
+      this._componentRoot.innerHTML = `<style>${cssLayout}</style><ul></ul>`;
+    }
+    logger.debug(_DataStringify(this.component.data));
+    try {
+      const subcomponentClass = this.component.body.getAttribute("subcomponentClass");
+      if (subcomponentClass != null) {
+        let offset: number;
+        let limit: number;
+        let pagesNumber: number;
+        let list = [...this.component.data];
+        let paginateIn = this.component.body.getAttribute("paginate-in");
+        paginateIn = (paginateIn !== null) ? (paginateIn) : ("client");
+        let page: number;
+        if (paginateIn === "client") {
+          page = this.component.body.getAttribute("page-number");
+          page = (isNaN(page) || page === null) ? (-1) : (page);
+          if (page !== -1) {
+            pagesNumber = this.component.body.getAttribute("total-pages");
+            pagesNumber = (isNaN(pagesNumber)) ? (1) : (pagesNumber);
+            offset = this.getPageIndex(page, pagesNumber, list.length)[0];
+            limit = this.getPageIndex(page, pagesNumber, list.length)[1];
+          } else {
+            offset = 0;
+            limit = list.length;
+            pagesNumber = 1;
+          }
+          list = list.slice(offset, limit);
+        } else {
+          offset = 0;
+          limit = list.length;
+          pagesNumber = 1;
+        }
+        list.map(
+          (record, dataIndex) => {
+            const _ret_ = undefined;
+            try {
+              const _body = _DOMCreateElement("li");
+              record.label = record[this.labelField as string];
+              record.value = record[this.valueField as string];
+              const subcomponent = New(ClassFactory(subcomponentClass), {
+                name: "list-item",
+                data: {
+                  label: record[this.labelField as string],
+                  value: record[this.valueField as string],
+                  __dataIndex: dataIndex,
+                  __page: page,
+                  __totalPages: pagesNumber,
+                  __limit: limit,
+                  __offset: offset
+                },
+                templateURI: ComponentURI({
+                  "COMPONENTS_BASE_PATH": CONFIG.get("componentsBasePath", ""),
+                  "COMPONENT_NAME": ClassFactory(subcomponentClass).name,
+                  "TPLEXTENSION": CONFIG.get("tplextension", ""),
+                  "TPL_SOURCE": ClassFactory(subcomponentClass).tplsource
+                }),
+                body: _body,
+                template: ClassFactory(subcomponentClass).template
+              });
+              subcomponent.done = this.component.done.bind(subcomponent);
+              try {
+                if (subcomponent) {
+                  subcomponent.data.__dataIndex = dataIndex;
+                  if (Object.hasOwnProperty.call(this.component.data, "length")) {
+                    subcomponent.data.__dataLength = this.component.data.length;
+                  }
+                  logger.debug("adding subcomponent to body");
+
+                  (this._componentRoot as any).subelements("ul").map((ul: HTMLElement) => ul.append(subcomponent));
+                  try {
+                    this.component.subcomponents.push(subcomponent as never);
+                  } catch (e: any) {
+                    logger.debug(`ERROR LOADING SUBCOMPONENT IN DATAGRID: ${e}`);
+                  }
+                } else {
+                  logger.debug("ERROR LOADING SUBCOMPONENT IN DATAGRID");
+                }
+              } catch (e: any) {
+                logger.debug(`ERROR LOADING SUBCOMPONENT IN DATAGRID: ${e}`);
+              }
+
+            } catch (e: any) {
+              logger.debug(`ERROR LOADING SUBCOMPONENT IN DATAGRID: ${e}`);
+            }
+            return _ret_;
+          }
+        );
+      } else {
+        logger.debug("NO SUBCOMPONENT CLASS IN COMPONENT");
+      }
+
+    } catch (e: any) {
+      logger.debug(`No data for component: ${e}`);
+    }
+  }
+
+  cssGrid() {
+    const component = this.component;
+    const _componentRoot = (component.shadowed) ? (component.shadowRoot) : (component.body);
+    if (typeof this.rows !== "undefined" && typeof this.cols !== "undefined") {
+      const s = _DOMCreateElement("style");
+      const templateRows = "auto ".repeat(this.rows as number);
+      const templateCols = "auto ".repeat(this.cols);
+      const className = "grid" + this.__instanceID.toString();
+      s.innerHTML = `.${className}{
+          display: grid; \
+          grid-template-rows: ${templateRows}; \
+          grid-template-columns: ${templateCols}; \
+          margin:0 auto; \
+        }`;
+      _componentRoot.append(s);
+      _componentRoot.classList.add(className);
+    }
+  }
+
+  done() {
+    this.cssGrid();
+
+    const componentInstance = this.component;
+    logger.debug("ListController DONE");
+    const serviceClass = this.component.body.getAttribute("serviceClass");
+    if (serviceClass != null) {
+      let offset;
+      let limit;
+      let paginateIn = componentInstance.body.getAttribute("paginate-in");
+      paginateIn = (paginateIn !== null) ? (paginateIn) : ("client");
+      if (paginateIn === "server") {
+        let page = componentInstance.body.getAttribute("page-number");
+        page = (isNaN(page) || page === null) ? (-1) : (page);
+        let pagesNumber;
+        if (page !== -1) {
+          const serverDataCount = (this.component.body.getAttribute("server-data-count") !== null) ? (this.component.body.getAttribute("server-data-count")) : (1);
+          pagesNumber = this.component.body.getAttribute("total-pages");
+          pagesNumber = (isNaN(pagesNumber)) ? (1) : (pagesNumber);
+          offset = this.getPageIndex(page, pagesNumber, serverDataCount)[0];
+          limit = this.getPageIndex(page, pagesNumber, serverDataCount)[1];
+          // send params in jsonrpc 2.0 style
+          componentInstance.serviceData = (typeof componentInstance.serviceData !== "undefined") ? (componentInstance.serviceData) : ({});
+          componentInstance.serviceData.params = (typeof componentInstance.serviceData.params !== "undefined") ? (componentInstance.serviceData.params) : ({});
+          componentInstance.serviceData.params.offset = offset;
+          componentInstance.serviceData.params.limit = limit;
+        }
+      }
+
+      serviceLoader(New(ClassFactory(serviceClass), {
+        data: componentInstance.serviceData
+      }), false).then(
+        (successfulResponse: { service: any }) => {
+          // This will show the service response as a plain text
+          logger.debug("DONE SERVICE COMPONENT");
+          successfulResponse.service.JSONresponse = JSON.parse(successfulResponse.service.template);
+          if (typeof successfulResponse.service.JSONresponse.result !== "undefined") {
+            logger.debug(_DataStringify(successfulResponse.service.JSONresponse.result));
+            componentInstance.data = successfulResponse.service.JSONresponse.result;
+          } else {
+            componentInstance.data = successfulResponse.service.JSONresponse;
+          }
+          this.addSubcomponents();
+
+        },
+        (failedResponse: string) => {
+          logger.debug(failedResponse);
+        }).catch((e: any) => {
+          logger.debug("Something went wrong when calling the service from: " + serviceClass);
+          logger.debug(e.message);
+        });
+
+    }
+
+  }
+
+
+}
+
+
+Package("org.qcobjects.controllers.list", [
+  ListController
+
+]);
+

package/src/ts/org.qcobjects.controllers.slider.ts

@@ -0,0 +1,153 @@
+/**
+ * QCObjects SDK 2.5
+ * ________________
+ *
+ * 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.
+ */
+"use strict";
+import { ClassFactory, Controller, New, Package, logger, Component } from "qcobjects";
+
+type SliderParams = {
+  dependencies: any[];
+  component: Component;
+  duration: number;
+  slideIndex: number;
+  interval: number | null;
+  sliderHandlerName: string | null;
+};
+
+export class SliderController extends Controller {
+  slideIndex = 0;
+  duration = 7100;
+  interval: any = null;
+  sliderHandlerName = "";
+  _componentRoot: HTMLElement | ShadowRoot | undefined;
+  component: Component;
+
+  constructor({ component, dependencies = [], duration = 7100, slideIndex = 0, interval = null, sliderHandlerName = null }: SliderParams) {
+    super({ component, dependencies, duration, slideIndex, interval, sliderHandlerName } as SliderParams);
+    this.component = component;
+    this._componentRoot = (component.shadowed) ? (component.shadowRoot) : (component.body);
+    this.sliderHandlerName = "slider_" + this.component.__instanceID.toString();
+    (global as any).set(this.sliderHandlerName, this);
+
+  }
+
+
+  stop() {
+    if (this.interval != null) {
+      clearInterval(this.interval);
+    }
+  }
+
+  plusSlidesAndStop(n: number) {
+    this.stop();
+    this.plusSlides(n);
+  }
+
+  plusSlides(n: number) {
+    this.showSlides(this.slideIndex += n);
+  }
+
+  currentSlide(n: number) {
+    this.stop();
+    this.showSlides(this.slideIndex = n);
+  }
+
+  automate() {
+    this.interval = setInterval(() => {
+      this.plusSlides(1);
+    }, this.duration);
+  }
+
+  showSlides(n: number) {
+    const slides = (this._componentRoot as any)?.subelements(".qcoSlides");
+    const dots = (this._componentRoot as any)?.subelements(".qcoSlider__dots--dot");
+
+    if (n > (slides.length - 1)) {
+      this.slideIndex = 0;
+    }
+    if (n < 0) {
+      this.slideIndex = 0;
+    }
+    slides.filter((slide: any, index: number) => { return index !== this.slideIndex; }).map((slide: any) => {
+
+      return (New(ClassFactory("Fade"), {})).apply(slide, 1, 0);
+    });
+    // eslint-disable-next-line no-unused-vars
+    dots.filter((dot: any, index: number) => { return index !== this.slideIndex; }).map((dot: { classList: { remove: (arg0: string) => any; }; }) => {
+
+      return dot.classList.remove("active");
+    });
+    try {
+      dots[this.slideIndex].classList.add("active");
+    } catch (e: any) {
+      logger.debug(`Something went wrong when trying to activate a slide: ${this.slideIndex} - ${e.message}`);
+    }
+    setTimeout(() => {
+      slides.filter((slide: any, index: number) => { return index !== this.slideIndex; }).map((slide: { style: { display: string; }; }) => {
+        slide.style.display = "none";
+        return slide.style.display;
+      });
+      try {
+        slides[this.slideIndex].style.display = "block";
+        (New(ClassFactory("Fade"), {})).apply(slides[this.slideIndex], 0, 1);
+
+      } catch (e: any) {
+        logger.debug(`Something went wrong when trying to show a slide: ${this.slideIndex} - ${e.message}`);
+      }
+    }, 700);
+  }
+
+  fillDots() {
+    const slides = (this._componentRoot as any)?.subelements(".qcoSlides");
+    slides.map((slide: HTMLElement, index: number) => {
+      const dotHTML = document.createElement("span");
+      const dotContent = `<span class="qcoSlider__dots--dot" onclick="global.get('${this.sliderHandlerName}').currentSlide(${index})"></span>`;
+      dotHTML.innerHTML = dotContent;
+
+      return (this._componentRoot as any)?.subelements(".qcoSlider__dots")[0].append(dotHTML);
+    });
+
+  }
+
+  done() {
+    const slides = (this._componentRoot as any)?.subelements(".qcoSlides");
+    slides.filter((slide: HTMLElement, index: number) => { return index !== this.slideIndex; }).map((slide: { style: { display: string; }; }) => {
+      slide.style.display = "none";
+      return slide.style.display;
+    });
+    setTimeout(() => {
+      this.fillDots();
+      this.slideIndex = 0;
+      this.showSlides(this.slideIndex);
+      this.automate();
+    }, 3000);
+
+  }
+
+}
+
+
+Package("org.qcobjects.controllers.slider", [
+
+  SliderController
+]);

package/src/ts/org.qcobjects.controllers.swagger.ts

@@ -0,0 +1,83 @@
+/**
+ * QCObjects SDK 2.5
+ * ________________
+ *
+ * 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.
+ */
+"use strict";
+import { CONFIG, Controller, New, Package, SourceCSS, SourceJS } from "qcobjects";
+declare let SwaggerUIBundle: any;
+declare let SwaggerUIStandalonePreset: any;
+export class SwaggerUIController extends Controller {
+  component: any;
+  dependencies: any;
+
+  startSwaggerUI() {
+    // Begin Swagger UI call region
+    if (typeof SwaggerUIBundle !== "undefined") {
+
+      const ui = SwaggerUIBundle({
+        url: CONFIG.get("swagger-ui-url", "https://petstore.swagger.io/v2/swagger.json"),
+        dom_id: "#" + CONFIG.get("swagger-ui-dom_id", "swagger-ui"),
+        deepLinking: true,
+        presets: [
+          SwaggerUIBundle.presets.apis,
+          SwaggerUIStandalonePreset
+        ],
+        plugins: [
+          SwaggerUIBundle.plugins.DownloadUrl
+        ],
+        layout: "StandaloneLayout"
+      });
+      // End Swagger UI call region
+      (window as any).ui = ui;
+    }
+
+  }
+
+  done() {
+    this.component.body.innerHTML = "<div id=\"" + CONFIG.get("swagger-ui-dom_id", "swagger-ui") + "\"></div>";
+    const swaggerUIPackagePath = CONFIG.get("swagger-ui-package-path", "node_modules/swagger-ui-dist/");
+
+    this.dependencies?.push(New(SourceJS, {
+      url: swaggerUIPackagePath + "swagger-ui-standalone-preset.js",
+      external: CONFIG.get("swagger-ui-external", false)
+    }));
+    this.dependencies?.push(New(SourceCSS, {
+      url: swaggerUIPackagePath + "swagger-ui.css",
+      external: CONFIG.get("swagger-ui-external", false)
+    }));
+    this.dependencies?.push(New(SourceJS, {
+      url: swaggerUIPackagePath + "swagger-ui-bundle.js",
+      external: CONFIG.get("swagger-ui-external", false),
+      done: () => {
+        this.startSwaggerUI();
+      }
+    }));
+  }
+
+}
+
+Package("org.qcobjects.controllers.swagger", [
+  SwaggerUIController
+
+]);
+

package/src/{js → ts}/org.qcobjects.controllers.ts

@@ -1,7 +1,5 @@
-import { Controller, Package } from "qcobjects";
-
 /**
- * QCObjects SDK 2.4
+ * QCObjects SDK 2.5
  * ________________
  *
  * Author: Jean Machuca <correojean@gmail.com>
@@ -24,14 +22,14 @@ import { Controller, Package } from "qcobjects";
  * Everyone is permitted to copy and distribute verbatim copies of this
  * license document, but changing it is not allowed.
 */
-(function() {
 "use strict";
-Package("org.qcobjects.controllers",[
+import { Controller, Package } from "qcobjects";
 
-  class GenericController extends Controller {
+export class GenericController extends Controller {
 
-  }
+}
 
-]);
+Package("org.qcobjects.controllers", [
+  GenericController
 
-})();
+]);

package/src/ts/org.qcobjects.effects.base.ts

@@ -0,0 +1,81 @@
+import { Package, Effect, logger } from "qcobjects";
+
+export type MoveElement = HTMLElement & {
+    width?:number;
+    height?:number;
+  };
+
+  export class Fade extends Effect {
+    duration = 1000;
+    static duration: any;
+
+    constructor(o?:{duration:number}){
+      super(o);
+      this.duration = o?.duration as number;
+    }
+    apply(element:HTMLElement, alphaFrom:number, alphaTo:number) {
+      const da = alphaTo - alphaFrom;
+      super.animate({
+        duration: this.duration,
+        timing(timeFraction: number) {
+           
+          return timeFraction;
+        },
+        draw(progress: number) {
+          logger.debug("animation progress: " + progress.toString());
+          const alpha = alphaFrom + (progress * da / 100);
+          logger.debug("alpha: " + alpha.toString());
+          element.style.opacity = alpha.toString();
+        }
+      });
+
+    }
+
+    static apply(element:HTMLElement, alphaFrom:number, alphaTo:number) {
+      const da = alphaTo - alphaFrom;
+      super.animate({
+        duration: this.duration,
+        timing(timeFraction: number) {
+           
+          return timeFraction;
+        },
+        draw(progress: number) {
+          logger.debug("animation progress: " + progress.toString());
+          const alpha = alphaFrom + (progress * da / 100);
+          logger.debug("alpha: " + alpha.toString());
+          element.style.opacity = alpha.toString();
+        }
+      });
+    }
+  }
+
+  export class Move extends Effect {
+    duration = 1000;
+    static duration: any;
+
+    static apply(element:MoveElement, xfrom:number, yfrom:number, xto:number, yto:number) {
+      const dx = xto - xfrom;
+      const dy = yto - yfrom;
+      element.style.transform = "translate(" + xfrom + "px," + yfrom + "px)";
+      super.animate({
+        duration: this.duration,
+        timing(timeFraction: number) {
+           
+          return timeFraction;
+        },
+        draw(progress: number) {
+          logger.debug("animation progress: " + progress.toString());
+          const y = yfrom + (progress * dy / 100);
+          const x = xfrom + (progress * dx / 100);
+          logger.debug("x: " + x.toString() + " y:" + y.toString());
+          element.style.transform = "translate(" + x + "px," + y + "px)";
+        }
+      });
+    }
+
+  }
+
+  Package("org.qcobjects.effects.base", [
+    Fade,
+    Move
+  ]);