Installation

Once you have obtained the zip file from the CodeCanyon site, all you have to do is load the various files necessary for the plugin to work.

<!-- The main CSS file -->
<link rel="stylesheet" href="url/to/your/file/asukadesigner.min.css">

<!-- The main JS file -->
<script src="url/to/your/file/asukadesigner.min.js"></script>

<!-- The jspdf file - mandatory if you need PDF export -->
<script src="url/to/your/file/vendors~jspdf.addon.js"></script>

Create Asuka Designer HTML Layout

Now, we need to add Asuka Designer layout to our app :

<div id="myId">
</div>

Designer size

You can optionally set the size of the designer using a CSS rule. Otherwise the size of the designer will automatically adapt according to its content.

#myId {
    width: your width;
    height: your height;
}

Initialize Asuka Designer

We just have to initialize the designer :

var options = {
    mode: 'frontend',
    pagination: 'thumbnails'
};

var instance = new AsukaDesigner('#myId', options); // Create an instance of the main plugin class

instance.designer.addView('myView', /* height */ 500, /* width */  500); // Access the subclasses from the main class

instance.on('ready', function(){
    console.log('The plugin is ready');
})

Was this article helpful to you? Yes No 1

How can we help?