qcobjects-sdk 2.4.59 → 2.4.61

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

@@ -0,0 +1,158 @@
+import { ClassFactory, Controller, ControllerParams, New, Package, QCObjectsElement, QCObjectsShadowedElement, logger } from "qcobjects";
+
+/**
+ * QCObjects SDK 2.4
+ * ________________
+ *
+ * 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.
+ */
+(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);
+      }
+
+      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 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 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);
+
+      }
+
+    }
+
+  ]);
+
+})((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) : ({})
+)));

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

@@ -0,0 +1 @@
+export {};

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

@@ -1,3 +1,5 @@
+import { CONFIG, Controller, New, Package, SourceCSS, SourceJS } from "qcobjects";
+
 /**
  * QCObjects SDK 2.4
  * ________________
@@ -22,15 +24,13 @@
  * 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", [
 
     class SwaggerUIController extends Controller {
-      constructor({component, dependencies = []}) {
-        super({component, dependencies});
-
-      }
 
       startSwaggerUI() {
         // Begin Swagger UI call region
@@ -50,29 +50,28 @@
             layout: "StandaloneLayout"
           });
           // End Swagger UI call region
-          window.ui = ui;
+          (window as any).ui = ui;
         }
 
       }
 
       done() {
-        var controller = this;
-        controller.component.body.innerHTML = "<div id=\"" + CONFIG.get("swagger-ui-dom_id", "swagger-ui") + "\"></div>";
-        var swaggerUIPackagePath = CONFIG.get("swagger-ui-package-path", "node_modules/swagger-ui-dist/");
+        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, {
+        this.dependencies?.push(New(SourceJS, {
           url: swaggerUIPackagePath + "swagger-ui-standalone-preset.js",
           external: CONFIG.get("swagger-ui-external", false)
         }));
-        this.dependencies.push(New(SourceCSS, {
+        this.dependencies?.push(New(SourceCSS, {
           url: swaggerUIPackagePath + "swagger-ui.css",
           external: CONFIG.get("swagger-ui-external", false)
         }));
-        this.dependencies.push(New(SourceJS, {
+        this.dependencies?.push(New(SourceJS, {
           url: swaggerUIPackagePath + "swagger-ui-bundle.js",
           external: CONFIG.get("swagger-ui-external", false),
-          done: function () {
-            controller.startSwaggerUI();
+          done: () => {
+            this.startSwaggerUI();
           }
         }));
       }
@@ -81,4 +80,4 @@
 
   ]);
 
-}).call(null);
+})();

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

@@ -1,3 +1,5 @@
+import { Controller, Package } from "qcobjects";
+
 /**
  * QCObjects SDK 2.4
  * ________________
@@ -27,14 +29,9 @@
 Package("org.qcobjects.controllers",[
 
   class GenericController extends Controller {
-    constructor ({component, dependencies = []}) {
-      super({component, dependencies});
-  
-    }
-
 
   }
 
 ]);
 
-}).call(null);
+})();

package/src/js/org.qcobjects.effects.d.ts

@@ -0,0 +1,20 @@
+declare const Fade: any;
+declare const Move: any;
+declare const MoveXInFromRight: any;
+declare const MoveXInFromLeft: any;
+declare const MoveYInFromBottom: any;
+declare const MoveYInFromTop: any;
+declare const RotateX: any;
+declare const RotateY: any;
+declare const RotateZ: any;
+declare const Rotate: any;
+declare const Radius: any;
+declare const Resize: any;
+declare const WipeLeft: any;
+declare const WipeRight: any;
+declare const WipeUp: any;
+declare const WipeDown: any;
+declare const ModalFade: any;
+declare const ModalMoveDown: any;
+declare const ModalMoveUp: any;
+export { Fade, Move, MoveXInFromRight, MoveXInFromLeft, MoveYInFromBottom, MoveYInFromTop, RotateX, RotateY, RotateZ, Rotate, Radius, Resize, WipeLeft, WipeRight, WipeUp, WipeDown, ModalFade, ModalMoveDown, ModalMoveUp };

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

@@ -0,0 +1,430 @@
+import { Effect, Package, QCObjectsElement, logger } from "qcobjects";
+
+/**
+ * QCObjects SDK 2.4
+ * ________________
+ *
+ * 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.
+ */
+const _top:any = (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) : ({})
+));
+
+(function () {
+  "use strict";
+
+  type MoveElement = HTMLElement & {
+    width:number;
+    height:number;
+  };
+
+  class Fade extends Effect {
+    duration = 1000;
+
+    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();
+        }
+      });
+    }
+  }
+
+  class Move extends Effect {
+    duration = 1000;
+
+    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)";
+        }
+      });
+    }
+
+  }
+
+  Package("org.qcobjects.effects.base", [
+    Fade,
+    Move
+  ]);
+
+
+
+  class MoveXInFromRight extends Move {
+    duration = 1000;
+
+    apply(element:MoveElement) {
+      super.apply.call(this, element, element.width, 0, 0, 0);
+    }
+  }
+
+  class MoveXInFromLeft extends Move {
+    duration = 1000;
+
+    apply(element:MoveElement) {
+      super.apply.call(this, element, -element.width, 0, 0, 0);
+    }
+  }
+
+  class MoveYInFromBottom extends Move {
+    duration = 1000;
+
+    apply(element:MoveElement) {
+      super.apply.call(this, element, 0, element.height, 0, 0);
+    }
+
+  }
+
+  class MoveYInFromTop extends Move {
+    duration = 1000;
+
+    apply(element:MoveElement ) {
+      super.apply.call(this, element, 0, -element.height, 0, 0);
+    }
+  }
+
+  class RotateX extends Effect {
+    duration = 1000;
+
+    apply(element:HTMLElement, angleFrom:number, angleTo:number) {
+      const da = angleTo - angleFrom;
+      this.animate({
+        duration: this.duration,
+        timing(timeFraction) {
+          return timeFraction;
+        },
+        draw(progress) {
+          logger.debug("animation progress: " + progress.toString());
+          const angle = Math.round(angleFrom + (progress * da / 100));
+          logger.debug("angle: " + angle.toString());
+          element.style.transform = "rotate3d(1,0,0," + angle.toString() + "deg)";
+        }
+      });
+    }
+
+  }
+
+  class RotateY extends Effect {
+    duration = 1000;
+
+    apply(element:HTMLElement, angleFrom:number, angleTo:number) {
+      const da = angleTo - angleFrom;
+      this.animate({
+        duration: this.duration,
+        timing(timeFraction) {
+          return timeFraction;
+        },
+        draw(progress) {
+          logger.debug("animation progress: " + progress.toString());
+          const angle = Math.round(angleFrom + (progress * da / 100));
+          logger.debug("angle: " + angle.toString());
+          element.style.transform = "rotate3d(0,1,0," + angle.toString() + "deg)";
+        }
+      });
+    }
+  }
+
+  class RotateZ extends Effect {
+    duration = 1000;
+
+    apply(element:HTMLElement, angleFrom:number, angleTo:number) {
+      const da = angleTo - angleFrom;
+      this.animate({
+        duration: this.duration,
+        timing(timeFraction) {
+          return timeFraction;
+        },
+        draw(progress) {
+          logger.debug("animation progress: " + progress.toString());
+          const angle = Math.round(angleFrom + (progress * da / 100));
+          logger.debug("angle: " + angle.toString());
+          element.style.transform = "rotate3d(0,0,1," + angle.toString() + "deg)";
+        }
+      });
+    }
+
+  }
+
+  class Rotate extends Effect {
+    duration = 1000;
+
+    apply(element:HTMLElement, angleFrom:number, angleTo:number) {
+      const da = angleTo - angleFrom;
+      this.animate({
+        duration: this.duration,
+        timing(timeFraction) {
+          return timeFraction;
+        },
+        draw(progress) {
+          logger.debug("animation progress: " + progress.toString());
+          const angle = Math.round(angleFrom + (progress * da / 100));
+          logger.debug("angle: " + angle.toString());
+          element.style.transform = "rotate3d(1,1,1," + angle.toString() + "deg)";
+        }
+      });
+    }
+  }
+
+  class Radius extends Effect {
+    duration = 1000;
+
+    apply(element:HTMLElement, radiusFrom:number, radiusTo:number) {
+      const dr = radiusTo - radiusFrom;
+      this.animate({
+        duration: this.duration,
+        timing(timeFraction) {
+          return timeFraction;
+        },
+        draw(progress) {
+          logger.debug("animation progress: " + progress.toString());
+          const radius = radiusFrom + (progress * dr / 100);
+          logger.debug("radius: " + radius.toString());
+          element.style.borderRadius = radius.toString() + "px";
+        }
+      });
+    }
+
+  }
+
+  class Resize extends Effect {
+    duration = 1000;
+
+    apply(element:HTMLElement, scaleFrom:number, scaleTo:number) {
+      const ds = scaleTo - scaleFrom;
+      this.animate({
+        duration: this.duration,
+        timing(timeFraction) {
+          return timeFraction;
+        },
+        draw(progress) {
+          logger.debug("animation progress: " + progress.toString());
+          const scale = scaleFrom + (progress * ds / 100);
+          logger.debug("resize: " + scale.toString());
+          element.style.transformOrigin = "center";
+          element.style.transform = "scale(" + scale + "," + scale + ")";
+        }
+      });
+    }
+
+  }
+
+  class WipeLeft extends Effect {
+    duration = 1000;
+
+    apply(element:HTMLElement, scaleFrom:number, scaleTo:number) {
+      const ds = scaleTo - scaleFrom;
+      this.animate({
+        duration: this.duration,
+        timing(timeFraction) {
+          return timeFraction;
+        },
+        draw(progress) {
+          logger.debug("animation progress: " + progress.toString());
+          const scale = scaleFrom + (progress * ds / 100);
+          logger.debug("wipe: " + scale.toString());
+          element.style.transformOrigin = "right";
+          element.style.transform = "scaleX(" + scale + ")";
+        }
+      });
+    }
+
+  }
+
+  class WipeRight extends Effect {
+    duration = 1000;
+
+    apply(element:HTMLElement, scaleFrom:number, scaleTo:number) {
+      const ds = scaleTo - scaleFrom;
+      this.animate({
+        duration: this.duration,
+        timing(timeFraction) {
+          return timeFraction;
+        },
+        draw(progress) {
+          logger.debug("animation progress: " + progress.toString());
+          const scale = scaleFrom + (progress * ds / 100);
+          logger.debug("wipe: " + scale.toString());
+          element.style.transformOrigin = "left";
+          element.style.transform = "scaleX(" + scale + ")";
+        }
+      });
+    }
+
+  }
+
+  class WipeUp extends Effect {
+
+    duration = 1000;
+
+    apply(element:HTMLElement, scaleFrom:number, scaleTo:number) {
+      const ds = scaleTo - scaleFrom;
+      this.animate({
+        duration: this.duration,
+        timing(timeFraction) {
+          return timeFraction;
+        },
+        draw(progress) {
+          logger.debug("animation progress: " + progress.toString());
+          const scale = scaleFrom + (progress * ds / 100);
+          logger.debug("wipe: " + scale.toString());
+          element.style.transformOrigin = "bottom";
+          element.style.transform = "scaleY(" + scale + ")";
+        }
+      });
+    }
+
+  }
+
+  class WipeDown extends Effect {
+    duration = 1000;
+
+    apply(element:HTMLElement, scaleFrom:number, scaleTo:number) {
+      const ds = scaleTo - scaleFrom;
+      this.animate({
+        duration: this.duration,
+        timing(timeFraction) {
+          return timeFraction;
+        },
+        draw(progress) {
+          logger.debug("animation progress: " + progress.toString());
+          const scale = scaleFrom + (progress * ds / 100);
+          logger.debug("wipe: " + scale.toString());
+          element.style.transformOrigin = "top";
+          element.style.transform = "scaleY(" + scale + ")";
+        }
+      });
+    }
+  }
+
+  Package("org.qcobjects.effects.extended", [
+    MoveXInFromRight,
+    MoveXInFromLeft,
+    MoveYInFromBottom,
+    MoveYInFromTop,
+    RotateX,
+    RotateY,
+    RotateZ,
+    Rotate,
+    Radius,
+    Resize,
+    WipeLeft,
+    WipeRight,
+    WipeUp,
+    WipeDown
+
+  ]);
+
+  class ModalFade extends Fade {
+    duration = 500;
+
+  }
+
+  class ModalMoveDown extends Move {
+    duration = 300;
+
+  }
+
+  class ModalMoveUp extends Move {
+
+    duration = 800;
+
+  }
+
+
+  Package("org.qcobjects.modal.effects", [
+    ModalFade,
+    ModalMoveDown,
+    ModalMoveUp
+
+  ]);
+
+})();
+
+const Fade = _top.Fade;
+const Move = _top.Fade;
+const MoveXInFromRight = _top.MoveXInFromRight;
+const MoveXInFromLeft = _top.MoveXInFromLeft;
+const MoveYInFromBottom = _top.MoveYInFromBottom;
+const MoveYInFromTop = _top.MoveYInFromTop;
+const RotateX = _top.RotateX;
+const RotateY = _top.RotateY;
+const RotateZ = _top.RotateZ;
+const Rotate = _top.Rotate;
+const Radius = _top.Radius;
+const Resize = _top.Resize;
+const WipeLeft = _top.WipeLeft;
+const WipeRight = _top.WipeRight;
+const WipeUp = _top.WipeUp;
+const WipeDown = _top.WipeDown;
+const ModalFade = _top.ModalFade;
+const ModalMoveDown = _top.ModalMoveDown;
+const ModalMoveUp = _top.ModalMoveUp;
+
+export {
+  Fade,
+  Move,
+  MoveXInFromRight,
+  MoveXInFromLeft,
+  MoveYInFromBottom,
+  MoveYInFromTop,
+  RotateX,
+  RotateY,
+  RotateZ,
+  Rotate,
+  Radius,
+  Resize,
+  WipeLeft,
+  WipeRight,
+  WipeUp,
+  WipeDown,
+  ModalFade,
+  ModalMoveDown,
+  ModalMoveUp
+};

package/src/js/org.qcobjects.i18n_messages.d.ts

@@ -0,0 +1 @@
+export {};