QCObjects SDK

Copyright (c) Jean Machuca and QuickCorp info@quickcorp.cl

Please fork this project or make a link to this project into your README.md file. Read the LICENSE.txt file before you use this code.

If you like this code please DONATE !

Cross Browser Javascript Framework for MVC Patterns

QCObjects is a javascript framework designed to make easier everything about the MVC patterns implementation into the pure javascript scope.

QCObjects SDK is a set of Controllers, Views and Components that are elementary and useful to assist developers to build applications under MVC patterns using QCObjects.

Checkout the QCObjects SDK 2.4 beta version

If you like more code samples feel free to write your questions to info@quickcorp.cl

Installing with NPM:

1> npm install qcobjects-sdk@v2.4

Using the code in the straight way into HTML5:

1<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/qcobjects/2.4.20/QCObjects.js"></script>

NOTE: SDK dependence is included by default in the QCObjects runtime execution. You only need to install it if your having issues with default paths

SDK

SDK Components

org.qcobjects.components.ShadowedComponent

ShadowedComponent Class is a custom component class designed to allow you to create a component using the Shadow DOM of browsers. Read more about Shadowed Components on [this article on Hackernoon] (https://www.hackernoon.com/shadowed-components-and-qcobjects-kd703yld).

Usage:

1<component componentClass="ShadowedComponent"></component>
2
3<my-custom-widget componentClass="ShadowedComponent"></my-custom-widget>

org.qcobjects.components.FormField

FormField is a Class for QCObjects custom components that allows you to inject a Form Field generic behavior to your components. It has a reverse data-binding feature to detect the values of the DOM fields inside your form and assign them to the data values of your component. By this way, you don't loose performance making an old-fashioned two-way data binding based on observables. To implement this advanced behavior. You only need to do the following:

1.- Assign a data-field attribute to the DOM tag inside the component body, with the corresponding field name in your data object.

2.- To your component tag, assign FormField in the componentClass attribute.

3.- To recover the data of the form inside your component, just use the componentInstance.data object. Every property of the componentInstance.data object will be linked by the binding events with the value properties on every DOM object of the form that has a data-field assigned.

Usage:

1<!-- Where you place the component -->
2<component name="myform" componentClass="FormField"></component>

1<!-- usage using smart widgets -->
2
3<my-custom-widget name="myform" componentClass="FormField"></my-custom-widget>
4

1<!-- template: myform.tpl.html -->
2<label for="email"><b>Email</b></label>
3<input data-field="email" type="email" placeholder="Enter Email" name="email" required>
4
5<label for="psw"><b>Password</b></label>
6<input data-field="name" type="text" placeholder="Enter Your Name" name="name" required>

data-field="name" will be matched with this.data.name inside the component class and will be updated everytime a data binding event is triggered. The same will happen to data-field="email" and so on.

FormField.executeBindings():

The method executeBindings of FormField component will find the data-field attribute values and match them with the corresponding data fields in the component instance.

Data Binding Event Change:

Inside of the body of your component, when it is a FormField component, every time the DOM dispatches a "change" event, it will trigger the executeBindings method of your component.

Data Binding Event Blur:

Inside of the body of your component, when it is a FormField component, every time the DOM dispatches a "Blur" event, it will trigger the executeBindings method of your component.

Data Binding Event Focus:

Inside of the body of your component, when it is a FormField component, every time the DOM dispatches a "Focus" event, it will trigger the executeBindings method of your component.

Data Binding Event Keydown:

Inside of the body of your component, when it is a FormField component, every time the DOM dispatches a "Keydown" event, it will trigger the executeBindings method of your component.

org.qcobjects.components.ButtonField

ButtonField is a sub-definition of FormField, that is commonly used for almost the same purpose of FormField. The main difference between ButtonField and FormField is that ButtonField has a <button> DOM element as the body of the component by default. And FormField hasn't a pre-defined body.

Usage:

1<component name="name_of_component" componentClass="ButtonField"></component>

1<!-- using smart widgets -->
2<name-of-widget componentClass="ButtonField"></name-of-widget>

org.qcobjects.components.InputField

InputField is a sub-definition of FormField, that is commonly used for almost the same purpose of FormField. The main difference between InputField and FormField is that InputField has a DOM element as the body of the component by default. And FormField hasn't a pre-defined body.

Usage:

1<component name="name_of_component" componentClass="InputField"></component>

1<!-- using smart widgets -->
2<name-of-widget componentClass="InputField"></name-of-widget>

org.qcobjects.components.TextField

ButtonField is a sub-definition of FormField, that is commonly used for almost the same purpose of FormField. The main difference between InputField and FormField is that ButtonField has a <textarea> DOM element as the body of the component by default. And FormField hasn't a pre-defined body.

Usage:

1<component name="name_of_component" componentClass="TextField"></component>

1<!-- using smart widgets -->
2<name-of-widget componentClass="TextField"></name-of-widget>

org.qcobjects.components.EmailField

EmailField is a sub-definition of FormField, that is commonly used for almost the same purpose of FormField. The main difference between ButtonField and FormField is that ButtonField has a <input> DOM element as the body of the component by default. And FormField hasn't a pre-defined body.

Usage:

1<component name="name_of_component" componentClass="EmailField"></component>

1<!-- smart widget syntax -->
2<name-of-widget componentClass="EmailField"></name-of-widget>
3

org.qcobjects.components.GridComponent

GridComponent has a predefined name assigned to the value "grid", so be aware of it when you use this component class. Also, GridComponent is intended to be used in conjunction with GridController to expand its behavior to a CSS Grid.

Usage:

1<component componentClass="GridComponent" ...></component>
2
3<name-of-widget componentClass="GridComponent" ...></name-of-widget>

Example:

1<component rows="2" cols="2" componentClass="GridComponent" controllerClass="GridController">
2  <!-- It is recommended to use subcomponents as the Grid elements-->
3	<component name="name_of_subcomponent1"></component>
4	<component name="name_of_subcomponent2"></component>
5	<component name="name_of_subcomponent3"></component>
6	<component name="name_of_subcomponent4"></component>
7</controller>

1<!-- syntax using smart widgets -->
2<name-of-widget rows="2" cols="2" componentClass="GridComponent" controllerClass="GridController">
3	<name-of-subwidget1></name-of-widget>
4	<name-of-subwidget2></name-of-widget>
5	<name-of-subwidget3></name-of-widget>
6	<name-of-subwidget4></name-of-widget>
7</name-of-widget>

The above example will draw a css grid of two columns and two rows and place the subcomponents into it.

Don't forget this file:

1<!-- file: grid.tpl.html, you can use the grid template either to draw the grid itself or to draw a loading information -->
2<p>Loading grid...</p>

org.qcobjects.components.ModalEnclosureComponent

org.qcobjects.components.ModalComponent

org.qcobjects.components.SwaggerUIComponent

It is used to inject a swagger-ui DOM needed to the Swagger UI API. Learn more in this article of QCObjects DevBlog called Working with Swagger UI as a QCObjects Component

Usage:

1<component componentClass="SwaggerUIComponent" controllerClass="SwaggerUIController" ></component>

1<!-- syntax using smart widgets -->
2<my-custom-widget componentClass="SwaggerUIComponent" controllerClass="SwaggerUIController" ></my-custom-widget>

org.qcobjects.components.splashscreen.VideoSplashScreenComponent

A powerful component definition to allow you create an awesome Video Splash Screen for your progressive web app.

Example:

1<!-- Add the splash screen component tag as the first component in your HTML document -->
2<component componentClass="VideoSplashScreenComponent"
3	data-background="./img/splash/splashscreen-aqua.png"
4	data-video_mp4="./img/splash/splashscreen-aqua.mp4"
5	data-video_webm="./img/splash/splashscreen-aqua.webm"
6	data-video_ogg="./img/splash/splashscreen-aqua.ogv" duration="5000">
7	<img slot="logo" alt="logo" src="./img/logo-qcobjects-white.svg"></div>
8</component>
9<!-- Then you can put your main component as always -->
10<component splashscreen name="main" cached=true controllerClass="MainController">
11</component>

1<!-- using smart widgets -->
2<!-- Add the splash screen component tag as the first component in your HTML document -->
3<splash-screen componentClass="VideoSplashScreenComponent"
4	data-background="./img/splash/splashscreen-aqua.png"
5	data-video_mp4="./img/splash/splashscreen-aqua.mp4"
6	data-video_webm="./img/splash/splashscreen-aqua.webm"
7	data-video_ogg="./img/splash/splashscreen-aqua.ogv" duration="5000">
8	<img slot="logo" alt="logo" src="./img/logo-qcobjects-white.svg"></div>
9</splash-screen>
10<!-- Then you can put your main layout as always -->
11<layout-basic splashscreen name="main" cached=true controllerClass="MainController">
12</layout-basic>

SDK Controllers

org.qcobjects.controllers.GridController

GridController is intended to be used in conjunction with GridComponent to allow you to create a CSS grid to place subcomponents. More info in org.qcobjects.components.GridComponent

org.qcobjects.controllers.DataGridController

DataGridController will take the data of your component and map a set of subcomponents to fill it up. This is commonly used to render a dynamic list of components. It used a subcomponentClass attribute value in the component tag to determine what component definition to use to build and render every sub-component. The data on every sub-component will be filled up with the value of the element mapped to the sub-component.

Usage:

1<component name="name_of_component" controllerClass="DataGridController" subcomponentClass="SubComponentClass">
2</component>

1<!-- Using smart widgets -->
2<my-custom-grid controllerClass="DataGridController" subcomponentClass="SubComponentClass">
3</my-custom-grid>

Example:

Suppose you have to render a list of profiles. Every profile has a profile picture, a name and an email. You want to use a card to represent every profile in the list.

So you define a CardComponent to render the picture, the name and email of an element in the list.

1class CardComponent extends Component {
2	constructor () {
3		super();
4		this.name = "card"; // this will point to templates/components/card.tpl.html
5		this.data = { // the value of this object will be overriden by DataGridController
6			name:"<name of contact>",
7			email:"email@example.com",
8			profilePicture:"img/photo.png"
9		};
10
11		
12	}
13}

1<!-- template: card.tpl.html -->
2<img src="{{profilePicture}}"/>
3<h3>{{name}}</h3>
4<p>{{email}}</p>

Then, you have to place a component to generate the list of cards.

1<component name="loading_list" componentClass="MyListComponent" controllerClass="DataGridController"
2subcomponentClass="CardComponent">
3</component>

1<loading-list componentClass="MyListComponent" controllerClass="DataGridController"
2subcomponentClass="CardComponent">
3</loading-list>

1<!-- template: loading_list.tpl.html -->
2<p>Loading list...</p>

Last, you have to define MyListComponent to assign the dynamic data of the list.

1
2class MyListComponent extends Component {
3	constructor () {
4		super();
5		this.data=[
6			{ // the value of this object will be mapped to a subcomponent by DataGridController
7				name:"<name of contact>",
8				email:"email@example.com",
9				profilePicture:"img/photo.png"
10			},
11			{ // the value of this object will be mapped to a subcomponent by DataGridController
12				name:"<name of contact>",
13				email:"email@example.com",
14				profilePicture:"img/photo.png"
15			},
16			{ // the value of this object will be mapped to a subcomponent by DataGridController
17				name:"<name of contact>",
18				email:"email@example.com",
19				profilePicture:"img/photo.png"
20			}
21		]
22
23	}
24
25}

The resulting component will be a list of CardComponent with the data of every profile mapped into them by DataGridController.

org.qcobjects.controllers.ModalController

org.qcobjects.controllers.FormValidations

FormValidations is used to handle default validations for the FormController

Usage:

1FormValidations.getDefault(validationName)

Where validationName is the name of the validation present in the validations property of the FormController

org.qcobjects.controllers.FormController

The FormController definition is intended to help you to handle dynamic forms. By using the normalised syntax of the FormController definition, you don't have to code the complexity of the logic of a submit form, as it is atomised here in three steps.

• Assign a serviceClass
• Define the formSettings
• Asign or code the field validations

[FormController].serviceClass

It is the string name of the Class definition. FormController will load this class using the ClassFactory helper function, so the name can be a complete package name plus definition.

[FormController].formSettings

It is an object with the special properties of the form. The default settings are: backRouting:'#', loadingRouting:'#loading', nextRouting:'#signupsuccessful'. These settings are meant to handle the flow behavior of the form.

loadingRouting is the name of the routing that will be triggered while the serviceClass is beign called until the service loader returns a response.

backRouting is the name of the routing that will be triggered if the call for the serviceClass fails.

nextRouting is the name of the routing that will be triggered when the call for the serviceClass finishes OK.

[FormController].validations

It is an object with the helper functions that you want to define to validate every form field. When you define a validation function for a field, FormController will ask if the execution of that function returns true before to submit the form.

To define validations for the fields of the form, you just need to add them as a part of the validations property.

Usage:

1	// Let's say you have a form field called "name"
2	validations: {
3		name (){
4			return (fieldName, dataValue, element)=> {
5				return [true ... or false condition];
6			}
7		}, //... add a validation for every form field that you want to be validated
8	}

You can also use FormValidations.getDefault for simplicity.

1	// Let's say you have a form field called "name"
2	validations: {
3		name (){
4			return FormValidations.getDefault('name')
5		}, //... add a validation for every form field that you want to be validated
6	}

[FormController].formSaveTouchHandler

This method is internally used by FormController to call the serviceClass as a submit action. It will be binded to any click or touch event of any element inside the form that has a CSS ".submit" class assigned.

Example:

1<button class="submit"><p>Send</p></button>

When the click or touch event of the above button is triggered, FormController will call the service defined in serviceClass, this action will be done by formSaveTouchHandler. If you like to change this behavior just override this method in your custom controller.

A complete example of FormController

Below is a complete example of a definition for a Signup Form using FormController.

1// First, define a service class that will be called on submit.
2class SignupClientService extends JSONService {
3	constructor (){
4		this.name='signup';
5		this.external=true;
6		this.cached=false;
7		this.method='POST';
8		this.url=Service.basePath+'createaccount';
9		this.withCredentials=false;
10
11	}
12
13	done (successfulResponse) {
14		// service loaded
15		super.done(successfulResponse.service, successfulResponse);
16		console.log(successfulResponse.service.JSONresponse);
17	}
18
19}

1// To safe extend FormController, we extend first from Controller, then
2// we use a defaultController to instance a new FormController
3
4class SignupFormController extends Controller {
5	constructor () {
6		this.serviceClass= 'SignupClientService';
7		this.formSettings={ /* routings that will be triggered once the serviceClass is called*/
8			backRouting:'#'
9			loadingRouting:'#loading'
10			nextRouting:'#signupsuccessful'
11		};
12		this.validations: { /* validation definitions for every field in the form to be validated before submit */
13			name (){
14				return FormValidations.getDefault('name')
15			},
16			email (){
17				return FormValidations.getDefault('email')
18			},
19			comment (){
20				return function (fieldName, dataValue, element){
21					return (dataValue !== '')?(true):(false);
22				}
23			}
24		};
25		this.defaulController=null;
26
27	}
28
29	_new_ (o){
30		super._new_(o);
31		o.serviceClass = this.serviceClass;
32		o.formSettings = this.formSettings;
33		o.validations = this.validations;
34		// here we instance a defaultController with a New FormController
35		// passing the o object declaration coming from the components stack building process.
36		this.defaulController = new FormController (o);
37	}
38
39	done (){
40		super.done();
41		// we define a custom done callback function to inject a custom behavior as well as calling the defaultController behavior
42		logger.debugEnabled=true;
43		var controller = this.defaulController;
44		try {
45			controller.done.call(controller);
46		}catch (e){
47			logger.debug('Unable to execute default behavior');
48		}
49	}
50}

1<!-- A Shadowed Component to render the signup forms -->
2<!-- template: signup-form.tpl.html -->
3
4<form action="#" style="border:1px solid #ccc;border-radius:20px">
5	<div class="container">
6		<slot name="title">
7			<h1>Signup Form</h1>
8		</slot>
9		<slot name="subtitle">
10			<p>Please fill up this form to ask for a quote.</p>
11		</slot>
12		<hr />
13		<slot id="field_control" name="field-control">
14		</slot>
15		<hr />
16		<slot name="submit_button"></slot>
17	</div>
18</form>

1<!-- A signup form using the shadowed component signup-form -->
2<!-- template: signup.tpl.html -->
3<signup-form shadowed="true" controllerClass="SignupFormController">
4  <h1 slot="title">Signup Form</h1>
5  <p slot="subtitle">Please fill up this form to ask for a quote.</p>
6  <label slot="field-control" id="name_label" for="name"><b>&#x1F9D1; Full Name</b></label>
7  <input slot="field-control" type="text" pattern="^[a-zA-Z]+(([',. -][a-zA-Z ])?[a-zA-Z]*)*$" title="Please write your full name" placeholder="Full Name" name="name" data-field="name" aria-labelledby="name_label" required>
8  <label slot="field-control" id="email_label" for="email"><b>&#x1F4E7; Email</b></label>
9  <input slot="field-control" type="email" pattern="^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$" title="Please write a right email address" placeholder="Enter Email" name="email" data-field="email" aria-labelledby="email_label" required>
10  <label slot="field-control" for="comment" id="comment_label"><b>&#x1F4DD; Comment</b></label>
11  <textarea slot="field-control" name="comment" title="Please write a comment" rows="10" cols="100" data-field="comment" aria-labelledby="comment_label"></textarea>
12  <p slot="field-control">By submitting this form you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p>
13	<div class="clearfix">
14	    <button aria-label="Cancel" onclick="location.href='/#'" role="button" tabindex="-1" type="button" class="cancelbtn"><p>Cancel</p></button>
15	    <button  aria-label="Send" role="button" tabindex="-1" type="button" class="signupbtn submit"><p>Send</p></button>
16	</div>
17</signup-form>

1RegisterWidget("signup-form");

org.qcobjects.controllers.SwaggerUIController

It is used to inject a swagger-ui DOM needed to the Swagger UI API. Learn more in this article of QCObjects DevBlog called Working with Swagger UI as a QCObjects Component

Usage:

1<component componentClass="SwaggerUIComponent" controllerClass="SwaggerUIController" ></component>

1<!-- using a smart widget -->
2<swagger-ui componentClass="SwaggerUIComponent" controllerClass="SwaggerUIController"></swagger-ui>

SDK Effects

QCObjects has an Effect definition to handle and produce new effects and transitions for the components. Below are some custom effect definitions that will help you to build amazing visual features to your components. To improve the performance, effects are changing CSS internally to apply the effect in a smart way. And all the effects engine is based on the requestAnimationFrame definition, read more here

org.qcobjects.tools.effects.Move

Moves a DOM object from one position to another.

Usage:

1let move = new Move();
2move.apply(element, xfrom, yfrom, xto, yto);

Example:

1// The next line will move all the images from (0,0) to (10,10)
2Tag('img').map(img => (new Move()).apply(img,0,0,10,10))

org.qcobjects.tools.effects.MoveXInFromRight

Moves an element from the right side in X axis to the original position of the object.

Usage:

1let moveXInFromRight = new MoveXInFromRight();
2moveXInFromRight.apply(element)

Example:

1// the next line will move every canvas on the document from right side to its original position
2Tag('canvas').map(canvas => (new MoveXInFromRight()).apply(canvas));

org.qcobjects.tools.effects.MoveXInFromLeft

Moves an element from the left side in X axis to the original position of the object.

Usage:

1let moveXInFromLeft = new MoveXInFromLeft();
2moveXInFromLeft.apply(element);

Example:

1// the next line will move every canvas on the document from left side to its original position
2Tag('canvas').map(canvas => (new MoveXInFromLeft()).apply(canvas));

org.qcobjects.tools.effects.MoveYInFromBottom

Moves an object of the DOM from bottom to its original position using Y axis.

Usage:

1let moveYInFromBottom = new MoveYInFromBottom();
2moveYInFromBottom.apply(element);

Example:

1// the next line will move the body of every component named "comp1" from bottom to its original position
2Tag('component[name=comp1]').map(componentBody => (new MoveYInFromBottom()).apply(componentBody));

org.qcobjects.tools.effects.MoveYInFromTop

Moves an object of the DOM from top to its original position using Y axis.

Usage:

1let moveYInFromTop = new MoveYInFromTop();
2moveYInFromTop.apply(element)

Example:

1// the next line will move the body of every component named "comp1" from top to its original position
2Tag('component[name=comp1]').map(componentBody => (new MoveYInFromTop()).apply(componentBody));

org.qcobjects.tools.effects.RotateX

Rotates an object in X axis.

Usage:

1let rotateX = new RotateX();
2RotateX.apply(element, angleFrom, angleTo);

angleFrom and angleTo represent an angle value expressed in degrees, starting from 0 (zero) to 360.

Example:

1// the next line will rotate in X axis the div called #id from 180 degrees to 240 degrees
2Tag('div#id').map(div => (new RotateX()).apply(div, 180, 240));

org.qcobjects.tools.effects.RotateY

Rotates an object in Y axis.

Usage:

1let rotateY = new RotateY();
2rotateY.apply(element, angleFrom, angleTo)

angleFrom and angleTo represent an angle value expressed in degrees, starting from 0 (zero) to 360.

Example:

1// the next line will rotate in Y axis the div called #id from 0 degrees to 270 degrees
2Tag('div#id').map(div => (new RotateY()).apply(div, 0, 270));

org.qcobjects.tools.effects.RotateZ

Rotates an object in Z axis.

Usage:

1let rotateZ = new RotateZ();
2RotateZ.apply(element, angleFrom, angleTo);

angleFrom and angleTo represent an angle value expressed in degrees, starting from 0 (zero) to 360.

Example:

1// the next line will rotate in Z axis the div called #id from 0 degrees to 60 degrees
2Tag('div#id').map(div => (new RotateZ()).apply(div, 0, 60));

org.qcobjects.tools.effects.Rotate

Rotates an object in X, Y, Z axes. All axes will rotate in paralell at the same time producing a 3d visual effect perception.

Usage:

1let rotate = new Rotate ();
2Rotate.apply(element, angleFrom, angleTo);

angleFrom and angleTo represent an angle value expressed in degrees, starting from 0 (zero) to 360.

Example:

1// the next line will rotate in X, Y and Z axes the div called #id form 0 to 270 degrees
2Tag('div#id').map(div => (new Rotate()).apply(div, 0, 270));

org.qcobjects.tools.effects.Fade

Produces a fade effect by lowering the opacity of the element.

Usage:

1let fade = new Fade();
2Fade.apply(element, alphaFrom, alphaTo);

alphaFrom and alphaTo are numbers between 0 (zero) and 1.

1// the following line will fade a <b class="header"> element from 0.5 (mid visibility) to 1 (full visibility)
2Tag('b.header').map(header=>(new Fade()).apply(header, 0.5, 1))

org.qcobjects.tools.effects.Radius

Rounds the corner of an element

Usage:

1let radius = new Radius();
2radius.apply(element, radiusFrom, radiusTo)

radiusFrom and radiusTo are numeric values.

Example:

1// the next line will round the corners of every image in the document
2Tag('img').map(element => (new Radius()).apply(element, 0, 100))

org.qcobjects.tools.effects.Resize

Usage:

1let resize = new Resize ();
2resize.apply(element, scaleFrom, scaleTo)

scaleFrom and scaleTo are numeric values. A value of 1 is regular size, a value of 2 is double size, a value between 0 and 1 is a small scale.

Example:

1// the next line will make a zoom-out effect on every image in the document
2Tag('img').map(element => (new Resize()).apply(element, 2,0))
3
4// the next line will make a zoom-in effect on every image in the document
5Tag('img').map(element => (new Resize()).apply(element, 0,1))
6
7// the next line will make a zoom-in-out effect on every image in the document
8Tag('img').map(element => (new Resize()).apply(element, 2,1))

org.qcobjects.tools.effects.WipeLeft

Makes a Wipe effect from Left side to the origin of the element.

Usage:

1let wipeLeft = new WipeLeft();
2wipeLeft.apply(element, scaleFrom, scaleTo)

scaleFrom and scaleTo are numeric values. A value of 1 is regular size, a value of 2 is double size, a value between 0 and 1 is a small scale.

Example

1Tag('img').map(element => (new WipeLeft()).apply(element,0,1))

org.qcobjects.tools.effects.WipeRight

Makes a Wipe effect from right side to the origin of the element.

Usage:

1let wipeRight = new WipeRight();
2wipeRight.apply(element, scaleFrom, scaleTo)

scaleFrom and scaleTo are numeric values. A value of 1 is regular size, a value of 2 is double size, a value between 0 and 1 is a small scale.

Example

1Tag('img').map(element => (new WipeRight()).apply(element,0,1))

org.qcobjects.tools.effects.WipeUp

Makes a Wipe effect from down to up the origin of the element.

Usage:

1let wipeUp = new WipeUp();
2wipeUp.apply(element, scaleFrom, scaleTo);

scaleFrom and scaleTo are numeric values. A value of 1 is regular size, a value of 2 is double size, a value between 0 and 1 is a small scale.

Example

1Tag('img').map(element => (new WipeUp()).apply(element,0,1))

org.qcobjects.tools.effects.WipeDown

Makes a Wipe effect from up to down the origin of the element.

Usage:

1let wipeDown = new WipeDown();
2wipeDown.apply(element, scaleFrom, scaleTo);

scaleFrom and scaleTo are numeric values. A value of 1 is regular size, a value of 2 is double size, a value between 0 and 1 is a small scale.

Example

1Tag('img').map(element => (new WipeDown()).apply(element,0,1))

SDK Misc Tools

org.qcobjects.tools.canvas.CanvasTool

org.qcobjects.tools.layouts.BasicLayout

SDK Views

Below are a set of pre-defined views for common use.

org.qcobjects.views.GridView

A generic GridView definition for use with grids.

SDK i18n messages

The QCObjects i18n engine allows you to define custom messages . Learn more in this article in the DevBlog called i18n Internationalisation for your Progressive Web Apps

org.qcobjects.i18n_messages.i18n_messages

Used to call the i18n engine.

Usage:

1	class i18n_messages_<custom lang> extends i18n_messages {
2		...
3	}

Example

1'use strict';
2// file: js/packages/org.qcobjects.i18n_messages.es.js
3Package('org.qcobjects.i18n_messages.es', [
4	class i18n_messages_es extends i18n_messages {
5		constructor () {
6			this.messages= [
7			// ... your custom language dictionary is here
8			{
9				"en":"This is a paragraph",
10				"es":"Esto es un párrafo"
11			},
12			{
13				"en":"Welcome to my new app",
14				"es":"Bienvenido a mi nueva app"
15			}
16			];
17		}
18	},
19	{
20		// the next line generates an instance of the i18n engine and attaches it automatically in the package
21		_i18n_messages_es: new i18n_messages_es()
22	}
23]);

License