qcobjects-sdk 2.4.66 → 2.5.105-beta

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

@@ -1,7 +1,5 @@
-import { ClassFactory, Controller, ControllerParams, New, Package, QCObjectsElement, QCObjectsShadowedElement, logger } from "qcobjects";
-
 /**
- * QCObjects SDK 2.4
+ * QCObjects SDK 2.5
  * ________________
  *
  * Author: Jean Machuca <correojean@gmail.com>
@@ -24,135 +22,132 @@ import { ClassFactory, Controller, ControllerParams, New, Package, QCObjectsElem
  * Everyone is permitted to copy and distribute verbatim copies of this
  * license document, but changing it is not allowed.
  */
-(function (global) {
-  "use strict";
-  type SliderParams = ControllerParams & { 
-    duration:number;
-    slideIndex:number;
-    interval:number | null;
-    sliderHandlerName:string | null;
-  };
-  Package("org.qcobjects.controllers.slider", [
-
-    class SliderController extends Controller {
-      slideIndex = 0;
-      duration = 7100;
-      interval:any = null;
-      sliderHandlerName = "";
-      _componentRoot: QCObjectsElement | QCObjectsShadowedElement | HTMLElement | ShadowRoot | undefined;
-
-      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);
+"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);
+  }
 
-      currentSlide(n:number) {
-        this.stop();
-        this.showSlides(this.slideIndex = n);
-      }
+  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;
 
-      automate() {
-        this.interval = setInterval(() => {
-          this.plusSlides(1);
-        }, this.duration);
-      }
+      return (this._componentRoot as any)?.subelements(".qcoSlider__dots")[0].append(dotHTML);
+    });
 
-      showSlides(n:number) {
-        const slides = (this._componentRoot as QCObjectsElement)?.subelements(".qcoSlides");
-        const dots = (this._componentRoot as QCObjectsElement)?.subelements(".qcoSlider__dots--dot");
-
-        if (n > (slides.length - 1)) {
-          this.slideIndex = 0;
-        }
-        if (n < 0) {
-          this.slideIndex = 0;
-        }
-        slides.filter((slide, index)=> {return index!== this.slideIndex;}).map((slide) => {
-          return (New(ClassFactory("Fade"),{})).apply(slide, 1, 0);
-        });
-        dots.filter((dot, index)=> {return index!== this.slideIndex;}).map((dot) => {
-          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, index)=> {return index!== this.slideIndex;}).map((slide) => {
-            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 QCObjectsElement)?.subelements(".qcoSlides");
-        slides.map((slide:QCObjectsElement | 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 QCObjectsElement)?.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);
 
-      }
+  }
 
-      done() {
-        const slides = (this._componentRoot as QCObjectsElement)?.subelements(".qcoSlides");
-        slides.filter((slide:QCObjectsElement | HTMLElement, index)=> {return index!== this.slideIndex;}).map((slide) => {
-          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", [
 
-  ]);
-
-})((typeof module === "object" && typeof module.exports === "object") ? (
-  module.exports = (typeof globalThis !== "undefined"
-  ? globalThis
-  : typeof self !== "undefined"
-  ? self
-  : typeof window !== "undefined"
-  ? window
-  : typeof global !== "undefined"
-  ? global
-  : {})
-) : ((typeof global === "object") ? (global) : (
-  (typeof window === "object") ? (window) : ({})
-)));
+  SliderController
+]);

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

@@ -1,7 +1,5 @@
-import { CONFIG, Controller, New, Package, SourceCSS, SourceJS } from "qcobjects";
-
 /**
- * QCObjects SDK 2.4
+ * QCObjects SDK 2.5
  * ________________
  *
  * Author: Jean Machuca <correojean@gmail.com>
@@ -24,60 +22,62 @@ import { CONFIG, Controller, New, Package, SourceCSS, SourceJS } from "qcobjects
  * Everyone is permitted to copy and distribute verbatim copies of this
  * license document, but changing it is not allowed.
  */
-declare let SwaggerUIBundle:any;
-declare let SwaggerUIStandalonePreset:any;
-(function () {
-  "use strict";
-  Package("org.qcobjects.controllers.swagger", [
+"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;
 
-    class SwaggerUIController extends Controller {
+  startSwaggerUI() {
+    // Begin Swagger UI call region
+    if (typeof SwaggerUIBundle !== "undefined") {
 
-      startSwaggerUI() {
-        // Begin Swagger UI call region
-        if (typeof SwaggerUIBundle !== "undefined") {
-          /* eslint-disable no-undef */
-          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;
-        }
+      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/");
+  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();
-          }
-        }));
+    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/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/js/org.qcobjects.effects.base.ts

@@ -0,0 +1,97 @@
+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;
+      this.animate({
+        duration: this.duration,
+        timing(timeFraction) {
+           
+          return timeFraction;
+        },
+        draw(progress) {
+          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;
+      this.animate({
+        duration: this.duration,
+        timing(timeFraction) {
+           
+          return timeFraction;
+        },
+        draw(progress) {
+          logger.debug("animation progress: " + progress.toString());
+          const alpha = alphaFrom + (progress * da / 100);
+          logger.debug("alpha: " + alpha.toString());
+          element.style.opacity = alpha.toString();
+        }
+      });
+    }
+    // eslint-disable-next-line no-unused-vars
+    static animate(arg0: { duration: any; timing(timeFraction: any): any; draw(progress: any): void; }) {
+      throw new Error("Method not implemented.");
+    }
+    // eslint-disable-next-line no-unused-vars
+    animate(arg0: { duration: number; timing(timeFraction: any): any; draw(progress: any): void; }) {
+      throw new Error("Method not implemented.");
+    }
+  }
+
+  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)";
+      this.animate({
+        duration: this.duration,
+        timing(timeFraction) {
+           
+          return timeFraction;
+        },
+        draw(progress) {
+          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)";
+        }
+      });
+    }
+    // eslint-disable-next-line no-unused-vars
+    static animate(arg0: { duration: any; timing(timeFraction: any): any; draw(progress: any): void; }) {
+      throw new Error("Method not implemented.");
+    }
+    // eslint-disable-next-line no-unused-vars
+    animate(arg0: { duration: number; timing(timeFraction: any): any; draw(progress: any): void; }) {
+      throw new Error("Method not implemented.");
+    }
+
+  }
+
+  Package("org.qcobjects.effects.base", [
+    Fade,
+    Move
+  ]);