qcobjects-sdk 2.3.24

package/js/org.qcobjects.components.js

@@ -0,0 +1,226 @@
+/**
+ * QCObjects SDK 2.3
+ * ________________
+ *
+ * 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";
+(function() {
+  Package("org.qcobjects.components",[
+    Class("ShadowedComponent",Component,{
+      container:null,
+      body:null,
+      shadowed:true,
+      cached:false,
+      controller:null,
+      view:null,
+      data:{},
+      _new_:function (o){
+        o.body = _DOMCreateElement("div");
+        _super_("Component","_new_").call(this,o);
+      }
+    }),
+    Class("FormField",Component,{
+      cached:false,
+      reload:true,
+      createBindingEvents:function (){
+        var thisobj = this;
+        var _objList;
+        if (typeof this.fieldType =="undefined" || this.fieldType == null ){
+          _objList = this.body.subelements("*[data-field]"); // every child with data-field set
+        } else {
+          _objList = this.body.subelements(this.fieldType+"[data-field]"); // every child with data-field set and tagname is equal to fieldType property
+        }
+        for (var _datak=0;_datak<_objList.length;_datak++){
+          var _obj = _objList[_datak];
+          _obj.addEventListener("change",function(e){
+            logger.debug("Executing change event binding");
+            thisobj.executeBindings(e);
+          });
+          _obj.addEventListener("blur",function(e){
+            logger.debug("Executing change event binding");
+            thisobj.executeBindings(e);
+          });
+          _obj.addEventListener("focus",function(e){
+            logger.debug("Executing change event binding");
+            thisobj.executeBindings(e);
+          });
+          _obj.addEventListener("keydown",function(e){
+            logger.debug("Executing keydown event binding");
+              thisobj.executeBindings(e);
+          });
+        }
+      },
+      executeBinding:function (_obj){
+        var _datamodel = _obj.getAttribute("data-field");
+        logger.debug("Binding "+_datamodel+" for "+this.name);
+        this.data[_datamodel]=_obj.value;
+      },
+      executeBindings:function (){
+        var _objList;
+        if (typeof this.fieldType =="undefined" || this.fieldType == null ){
+          _objList = this.body.subelements("*[data-field]"); // every child with data-field set
+        } else {
+          _objList = this.body.subelements(this.fieldType+"[data-field]"); // every child with data-field set and tagname is equal to fieldType property
+        }
+        for (var _datak=0;_datak<_objList.length;_datak++){
+          var _obj = _objList[_datak];
+          var _datamodel = _obj.getAttribute("data-field");
+          logger.debug("Binding "+_datamodel+" for "+this.name);
+          this.data[_datamodel]=_obj.value;
+        }
+      },
+      done:function (){
+        var thisobj = this;
+        thisobj.executeBindings();
+        thisobj.createBindingEvents();
+        logger.debug("Field loaded: "+thisobj.fieldType+"[name="+thisobj.name+"]");
+      }
+    }),
+    Class("ButtonField",FormField,{
+      fieldType:"button"
+    }),
+    Class("InputField",FormField,{
+      fieldType:"input"
+    }),
+    Class("TextField",FormField,{
+      fieldType:"textarea"
+    }),
+    Class("EmailField",FormField,{
+      fieldType:"input"
+    }),
+    Class("ModalEnclosureComponent",Component,{
+      name:"modal",
+      tplsource:"inline",
+      cached:false,
+      basePath:CONFIG.get("modalBasePath",CONFIG.get("remoteSDKPath")),
+      data:{},
+      _new_:function (o){
+        o.body = _DOMCreateElement("div");
+        _super_("Component","_new_").call(this,o);
+      },
+      template:`
+<!-- The Modal -->
+<style>
+  @import url('https://sdk.qcobjects.dev/css/modal.css');
+</style>
+<div id="modalInstance_{{modalId}}" class="modal">
+
+<!-- Modal content -->
+<div class="modal-content">
+  <span class="close">&times;</span>
+  {{content}}
+</div>
+
+</div>
+`
+    }),
+    Class("ModalComponent",Component,{
+      name:"modal",
+      cached:false,
+      modalEnclosureComponentClass:"ModalEnclosureComponent",
+      basePath: CONFIG.get("modalBasePath",CONFIG.get("remoteSDKPath")),
+      controller:null,
+      view:null,
+      tplsource:"none",
+      closeOnClickOutside:false,
+      data:{
+        content:"",
+        modalId:0
+      },
+      submodal:null,
+      modal: function (){
+        var modalId = this.data.modalId;
+        var modalComponent = this;
+
+        Tag("#modalInstance_"+parseInt(modalId)+".modal").map(function (modal){
+          modal.style.display="block";
+          ModalFade.apply(modal,0,1);
+        });
+        Tag("#modalInstance_"+parseInt(modalId)+".modal .modal-content").map(function (modalcontent){
+          ModalMoveDown.apply(modalcontent,0,-document.body.clientHeight,0,0);
+        });
+        Tag("#modalInstance_"+parseInt(modalId)+".modal .modal-content .close").map(function (closebtn){
+          closebtn.addEventListener("click",function (){
+            modalComponent.close();
+          },false);
+        });
+        if (modalComponent.closeOnClickOutside){
+          window.addEventListener("click",function (){
+            modalComponent.close();
+          },false);
+        }
+      },
+      close: function (){
+        var modalId = this.data.modalId;
+        Tag("#modalInstance_"+parseInt(modalId)+".modal").map(function (modal){
+          modal.style.display="block";
+          ModalFade.apply(modal,1,0);
+        });
+        Tag("#modalInstance_"+parseInt(modalId)+".modal .modal-content").map(function (modalcontent){
+          ModalMoveUp.apply(modalcontent,0,0,0,-document.body.clientHeight);
+        });
+        setTimeout(function (){
+          Tag("#modalInstance_"+parseInt(modalId)+".modal").map(function (modal){
+            modal.style.display="none";
+          });
+        },900);
+      },
+      _new_:function (o){
+        var component = this;
+        component.data.modalId = component.__instanceID;
+        var submodal = New(ClassFactory(component.modalEnclosureComponentClass),{
+          name:component.name,
+          basePath:component.basePath,
+          data:component.data
+        });
+        component.subcomponents.push(submodal);
+        component.submodal = submodal;
+        if (submodal.tplsource == "none"){
+          component.body.innerHTML = submodal.parsedAssignmentText;
+        } else {
+          component.body.append(submodal.body);
+        }
+        _super_("Component","_new_").call(this,o); // parent call
+      },
+      done: function ({request,component}){
+        _super_("Component","done").call(this,{request:request,component:component}); // parent call
+      },
+      rebuild:function (){
+        this.templateURI = ComponentURI({
+          "COMPONENTS_BASE_PATH":CONFIG.get("componentsBasePath"),
+          "COMPONENT_NAME":"modal",
+          "TPLEXTENSION":CONFIG.get("tplextension"),
+          "TPL_SOURCE":"default" //here is always default in order to get the right uri
+        });
+        return _super_("Component","rebuild").call(this); // parent call
+      }
+    }),
+    Class("SwaggerUIComponent",Component,{
+      name:"swagger-ui",
+      cached:false,
+      basePath: CONFIG.get("remoteSDKPath"),
+      tplextension:"tpl.html"
+    })
+
+  ]);
+
+}).call(null);

package/js/org.qcobjects.components.list.js

@@ -0,0 +1,48 @@
+/**
+ * QCObjects SDK 2.3
+ * ________________
+ *
+ * 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() {
+"use strict";
+Package("org.qcobjects.components.list",[
+  Class("ListItemComponent",Component,{
+    name:"list-item",
+    shadowed: false,
+    tplsource: "inline",
+    template:"<a href=\"{{value}}\">{{label}}</a>",
+    cached: false
+  }),
+  Class("ListComponent",Component,{
+    name:"list",
+    shadowed: true,
+    tplsource: "inline",
+    template: "<p>Loading...</p>",
+    _new_ (o){
+      o.body.setAttribute("controllerClass","ListController");
+      o.body.setAttribute("subcomponentClass","ListItemComponent");
+      _super_("Component","_new_").call(this,o);
+    }
+  })
+]);
+
+}).call(null);

package/js/org.qcobjects.components.notifications.js

@@ -0,0 +1,168 @@
+/**
+ * QCObjects SDK 2.3
+ * ________________
+ *
+ * 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() {
+"use strict";
+Package("org.quickcorp.components.notifications", [
+  Class("NotificationComponent", Component, {
+    name: "notification",
+    cached: false,
+    tplsource: "inline",
+    shadowed: false,
+    body: _DOMCreateElement("div"),
+    template: `
+    <style>
+    div.notification_background {
+      display: block; /* 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;
+      bottom:0;
+      right: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: none !important;
+    }
+    div.notification {
+      border-radius: 12px !important;
+      margin-bottom: 15px;
+      padding: 4px 12px;
+    }
+    .notification.danger {
+      background-color: #ffdddd;
+      border-left: 6px solid #f44336;
+    }
+    .notification.success {
+      background-color: #ddffdd;
+      border-left: 6px solid #4CAF50;
+    }
+    .notification.info {
+      background-color: #e7f3fe;
+      border-left: 6px solid #2196F3;
+    }
+    .notification.warning {
+      background-color: #ffffcc;
+      border-left: 6px solid #ffeb3b;
+    }
+    </style>
+    <div class="notification_background">
+    <div class="notification {{kind}}">
+      <p><strong>{{title}}</strong> {{message}}</p>
+    </div>
+    </div>
+    `,
+    kinds: ["danger", "success", "info", "warning"],
+    display(element) {
+      var _display_ = function (element){
+        element.style.display="block";
+        var appearEffect = New(Move,{
+          duration:900,
+          apply (element){
+            _super_("Fade","apply").call(this,element,0,1);
+            _super_("Move","apply").call(this,element,0,-document.body.clientHeight,0,0);
+          }
+        });
+        var disappearEffect = New(Move,{
+          duration:650,
+          apply (element){
+            _super_("Fade","apply").call(this,element,1,0);
+            _super_("Move","apply").call(this,element,0,0,0,-document.body.clientHeight);
+          }
+        });
+        appearEffect.apply(element);
+        setTimeout(function (){
+          disappearEffect.apply(element);
+        },2000);
+      };
+      element.subelements("div.notification_background").map(element=>New(Fade,{duration:500}).apply(element,0,1));
+      element.subelements("div.notification").map(element=>_display_(element));
+      setTimeout(function (){
+        element.remove();
+      },2200);
+    },
+    success(message) {
+      var c = New(NotificationComponent, {
+        shadowed: this.shadowed,
+        body: _DOMCreateElement("div"),
+        data: {
+          kind: "success",
+          title: "Success!",
+          message: `${message}...`
+        }
+      });
+      document.body.append(c);
+      var _componentRoot = (c.shadowed)?(c.shadowRoot.host):(c.body);
+      c.display(_componentRoot);
+    },
+    danger(message) {
+      var c = New(NotificationComponent, {
+        shadowed: this.shadowed,
+        body: _DOMCreateElement("div"),
+        data: {
+          kind: "danger",
+          title: "Danger!",
+          message: `${message}...`
+        }
+      });
+      document.body.append(c);
+      var _componentRoot = (c.shadowed)?(c.shadowRoot.host):(c.body);
+      c.display(_componentRoot);
+    },
+    info(message) {
+      var c = New(NotificationComponent, {
+        shadowed: this.shadowed,
+        body: _DOMCreateElement("div"),
+        data: {
+          kind: "info",
+          title: "Info!",
+          message: `${message}...`
+        }
+      });
+      document.body.append(c);
+      var _componentRoot = (c.shadowed)?(c.shadowRoot.host):(c.body);
+      c.display(_componentRoot);
+    },
+    warning(message) {
+      var c = New(NotificationComponent, {
+        shadowed: this.shadowed,
+        body: _DOMCreateElement("div"),
+        data: {
+          kind: "warning",
+          title: "Warning!",
+          message: `${message}...`
+        }
+      });
+      document.body.append(c);
+      var _componentRoot = (c.shadowed)?(c.shadowRoot.host):(c.body);
+      c.display(_componentRoot);
+    }
+  })
+]);
+
+}).call(null);

package/js/org.qcobjects.components.slider.js

@@ -0,0 +1,194 @@
+/**
+ * QCObjects SDK 2.3
+ * ________________
+ *
+ * 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() {
+"use strict";
+Package("org.qcobjects.components.slider",[
+  Class("SlideListComponent",Component,{
+    name:"slidelist",
+    tplsource: "inline",
+    template: "<p>Loading...</p>",
+    _new_ (o){
+      o.body.setAttribute("controllerClass","DataGridController");
+      var subcomponentClass = (o.body.getAttribute("subcomponentClass") !== null)?(o.body.getAttribute("subcomponentClass")):("GridItemComponent");
+      o.body.setAttribute("subcomponentClass",subcomponentClass);
+      _super_("Component","_new_").call(this,o);
+    }
+  }),
+  Class("SlideItemComponent",Component,{
+    name:"slider_item",
+    template: `
+    <div class="qcoSlides" style="display:none">
+      <div class="qco-slider__numbertext">{{slideNumber}} / {{__dataLength}}</div>
+      <img src="{{image}}" alt="{{name}}"/>
+      <div class="qco-slider__text">
+        <p>{{label}} <a href="{{link}}">{{category}}</a></p>
+      </div>
+    </div>
+    `,
+    tplsource: "inline",
+    _new_:function (o){
+
+      o.data.slideNumber = o.data.__dataIndex + 1;
+
+      _super_("Component","_new_").call(this,o);
+    }
+  }),
+
+  Class("SliderComponent",Component,{
+    name:"slider",
+    template: `
+    <style>
+    /* Slideshow container */
+
+    :host a:hover,
+    :host a:active,
+    :host a:visited {
+      color: #ffffff;
+    }
+
+     {
+      color: #ffffff;
+    }
+
+    :host .prev {left:0;}
+    .qco-slider__container {
+      max-width: 100%;
+      position: relative;
+      margin: auto;
+      height: 300px;
+    }
+    :host .qco-slider__container .qcoSlides img {
+      object-fit: cover;
+      width: 100%;
+      height: 300px;
+    }
+
+    /* Next & previous buttons */
+    :host .prev,
+    :host .next {
+      cursor: pointer;
+      position: absolute;
+      top: 50%;
+      width: auto;
+      margin-top: -22px;
+      padding: 16px;
+      color: white;
+      font-weight: bold;
+      font-size: 18px;
+      transition: 0.6s ease;
+      border-radius: 0 3px 3px 0;
+      background-color: rgba(1, 1, 1, 0.1);
+    }
+
+    /* Position the "next button" to the right */
+    :host .next {
+      right: 0;
+      border-radius: 3px 0 0 3px;
+    }
+
+    /* On hover, add a black background color with a little bit see-through */
+    :host .prev:hover,
+    :host .next:hover {
+      background-color: rgba(0, 0, 0, 0.8);
+    }
+
+    /* Caption text */
+    :host .qco-slider__text {
+      color: #f2f2f2;
+      font-size: 15px;
+/*      padding: 8px 12px;*/
+      position: absolute;
+      bottom: 8px;
+      width: 100%;
+      text-align: center;
+      text-shadow: -1px 1px 3px #111111;
+      background-color: rgba(1,1,1,0.7);
+    }
+
+    /* Number text (1/3 etc) */
+    :host .qco-slider__numbertext {
+      color: #f2f2f2;
+      text-shadow: 0px 2px 3px #111111;
+      font-size: 12px;
+      padding: 8px 12px;
+      position: absolute;
+      top: 0;
+      padding-top: 0;
+      margin-top: 10px;
+    }
+
+    /* The dots/bullets/indicators */
+    :host .qcoSlider__dots {
+      text-align: center;
+      margin: 0 auto;
+      padding: 0;
+    }
+    :host .qcoSlider__dots--dot {
+      cursor: pointer;
+      height: 10px;
+      width: 10px;
+      margin: 0 2px;
+      background-color: #bbb;
+      border-radius: 50%;
+      display: inline-block;
+      transition: background-color 0.6s ease;
+    }
+
+    :host .active,
+    :host .qcoSlider__dots--dot:hover {
+      background-color: #717171;
+    }
+
+    :host .qco-slider__container .qcoSlides img {
+      border-radius: 30px 30px 0px 0px;
+    }
+
+    </style>
+
+    <div class="qco-slider__container">
+      <component name="slidelist" componentClass="SlideListComponent" subcomponentClass="SlideItemComponent" serviceClass="{{SERVICE_CLASS}}" ></component>
+
+      <a class="prev" onclick="global.get('{{sliderHandler}}').plusSlidesAndStop(-1)">&#10094;</a>
+      <a class="next" onclick="global.get('{{sliderHandler}}').plusSlidesAndStop(1)">&#10095;</a>
+    </div>
+    <br>
+
+    <div class="qcoSlider__dots" style="text-align:center">
+    </div>
+
+    `,
+    tplsource: "inline",
+    shadowed: true,
+    _new_(o){
+      o.data.SERVICE_CLASS = o.body.getAttribute("serviceClass");
+      o.data.sliderHandler = "slider_"+this.__instanceID.toString();
+      o.body.setAttribute("controllerClass","SliderController");
+      _super_("Component","_new_").call(this,o);
+    }
+
+  })
+]);
+
+}).call(null);