Documentation | Adiptal Studio

Default Template Design

Implement code provided below to use default template design whilst displaying article to end user.

<!-- INSIDE HEAD TAG -->
<link rel="stylesheet" href="[npm-folder]/ui/assets/css/default.min.css">

<article class="adiptal-ui">
    <!-- CONTENT SAVED FROM ADIPTAL STUDIO -->
</article>

<!-- BEFORE THE END OF BODY TAG  -->
<script src="[npm-folder]/assets/js/apt_query.min.js"></script>
<script src="[npm-folder]/ui/assets/js/default.min.js"></script>

Install

Customize & Install

Install Multiple Instances

To create multiple instances that can have different features, change value ofnameattribute and key ofadiptal.studio.settingsobject, as shown in example below.

<script src="[npm-folder]/assets/js/apt_query.min.js"></script>
<script src="[npm-folder]/assets/js/iframe.min.js"></script>
<style>
[name*="studio-iframe"].fullscreen{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
}
</style>


<!-- INSTANCE -->
<iframe data-src="[npm-folder]/index.html" name="studio-iframe"></iframe>
<script>
adiptal.studio.settings[ "studio-iframe" ] = {
	"relative_url": "https://demo.com/",
	"metadata": {
		"categories": {
			"demo-1": "Demo 1",
			"demo-2": "Demo 2",
			"demo-3": "Demo 3",
			"demo-4": "Demo 4",
			"demo-5": "Demo 5"
		},
		"coverimage": true,
		"tags": 5
	}
};
adiptal.studio.init( document.querySelector( '[name="studio-iframe"]' ) );
</script>
<!-- END INSTANCE -->

Functions

These are predefined functions inadiptal.studioobject.

1. init()

This function takes iframe node as parameter and initializes that instance of editor.

init( iframe_node )

Example:

<iframe data-src="[npm-folder]/index.html" name="studio-iframe"></iframe>
<script src="[npm-folder]/assets/js/apt_query.min.js"></script>
<script src="[npm-folder]/assets/js/iframe.min.js"></script>
<script>
adiptal.studio.settings[ "studio-iframe" ] = {
	"relative_url": false,
	"metadata": false
};
adiptal.studio.init( document.querySelector( '[name="studio-iframe"]' ) );
</script>

Customize & Install

2. toggleTheme()

This function takes iframe node as parameter and toggles theme of that instance of editor.

toggleTheme( iframe_node )
//or
toggleTheme( iframe_node , mode )

Example:

<script>
adiptal.studio.toggleTheme( document.querySelector( '[name="studio-iframe"]' ) );
</script>

<script>
adiptal.studio.toggleTheme( document.querySelector( '[name="studio-iframe"]' ) , 'light' );
</script>

<script>
adiptal.studio.toggleTheme( document.querySelector( '[name="studio-iframe"]' ) , 'dark' );
</script>

3. disable()

This function takes iframe node as parameter and disables editing of that instance of editor.

disable( iframe_node )
//or
disable( iframe_node , user_name_currently_editing )

Example:

<script>
adiptal.studio.disable( document.querySelector( '[name="studio-iframe"]' ) );
// output as 'File is being edited by Anonymous user'.
</script>

<script>
adiptal.studio.disable( document.querySelector( '[name="studio-iframe"]' ) , 'Jane Doe' );
// output as 'File is being edited by Jane Doe'.
</script>

4. enable()

This function takes iframe node as parameter and enables that instance of editor if it is disabled.

enable( iframe_node )

Example:

<script>
adiptal.studio.enable( document.querySelector( '[name="studio-iframe"]' ) );
</script>

5. reset()

This function takes iframe node as parameter. It can be used to re-customize editor features or re-initializes an instance of editor. If this function gets called, unsaved changes will be deleted.

reset()andenable()do same action, butenable()only works when instance of editor is disabled.

reset( iframe_node )

Example:

<script>
adiptal.studio.reset( document.querySelector( '[name="studio-iframe"]' ) );
</script>

<!-- INITIALIZE INSTANCE -->
<iframe data-src="[npm-folder]/index.html" name="studio-iframe"></iframe>
<script src="[npm-folder]/assets/js/apt_query.min.js"></script>
<script src="[npm-folder]/assets/js/iframe.min.js"></script>
<script>
adiptal.studio.settings[ "studio-iframe" ] = {
	"relative_url": false,
	"metadata": false
};
adiptal.studio.init( document.querySelector( '[name="studio-iframe"]' ) );
</script>

<!-- RE-CUSTOMIZE EDITOR FEATURES AND CALL RESET FUNCTION TO RE-INITIALIZE EDITOR WITH UPDATED FEATURES -->
<script>
adiptal.studio.settings[ "studio-iframe" ] = {
	"relative_url": "https://demo.com/",
	"metadata": {
		"categories": {
			"demo-1": "Demo 1",
			"demo-2": "Demo 2",
			"demo-3": "Demo 3",
			"demo-4": "Demo 4",
			"demo-5": "Demo 5"
		},
		"coverimage": true,
		"tags": 5
	}
};
adiptal.studio.reset( document.querySelector( '[name="studio-iframe"]' ) );
</script>

6. addFileOptions()

This function takes iframe node and json config as parameters and it add or update customizable file options of that instance of editor.

addFileOptions( iframe_node , json_config = {} )

Json config:

Config	Feature	Value
allow_comments	Toggle for user to allow comment on file.	0/1
is_draft	Toggle for user to flag file as draft.	0/1
is_featured	Toggle for user to flag file as featured/special.	0/1
approveFile	Button for administrative users to approve file.	Boolean
deleteFile	Button to delete file.	Boolean
scheduled_at	Lets user to schedule when file will get published.	JSON Object

Schedule config:

*Bothmin_dateandmax_dateconfigs are required to enable date selection range feature.

Config	Feature	Value
readonly	Disable updating schedule. Once file is published user must not update schedule.	Boolean
min_date	Set date selection range.	Date Object
max_date	Set date selection range.	Date Object
value	Set schedule date saved on server.	Date Object

Examples:

<script>
var fileOptions = {
    allow_comments : 1
    ,is_draft : 0
    ,scheduled_at : {
        value : new Date()
        ,readonly : true
    }
    ,approveFile : true
    ,deleteFile : true
};
adiptal.studio.addFileOptions( document.querySelector( '[name="studio-iframe"]' ) , fileOptions );
</script>

<script>
var fileOptions = {
    allow_comments : 1
    ,is_draft : 0
    ,scheduled_at : {
        value : new Date()
        ,readonly : true
    }
    ,approveFile : true
    ,deleteFile : true
};
adiptal.studio.addFileOptions( document.querySelector( '[name="studio-iframe"]' ) , fileOptions );

// update file options
var updateFileOptions = {
    allow_comments : 0
    ,is_draft : 0
    ,scheduled_at : {
        min_date : new Date()
        ,max_date : new Date( (new Date()).setDate( ( new Date() ).getDate() + 10 ) )
    }
    ,deleteFile : true
};
adiptal.studio.addFileOptions( document.querySelector( '[name="studio-iframe"]' ) , updateFileOptions );
</script>

7. showMetadata()

This function takes iframe node as parameter and shows metadata modal of that instance of editor.

showMetadata( iframe_node )

Example:

<script>
adiptal.studio.showMetadata( document.querySelector( '[name="studio-iframe"]' ) );
</script>

8. manageImages()

This function takes iframe node and array config as parameters and manage images of that instance of editor. It can also be used to manage updated list of images. If you have enabledrelative_urlfeature ininit(), you can use relative url of those images accordingly.

manageImages( iframe_node , array_config = [] )

Example:

<script>
adiptal.studio.manageImages(
    document.querySelector( '[name="studio-iframe"]' ) ,
    [
        'https://demo.com/img-1.jpg',
        'https://demo.com/img-2.jpg',
        'https://demo.com/img-3.jpg',
        'https://demo.com/img-4.jpg',
        'https://demo.com/img-5.jpg'
 ]
);
</script>

<script>
// if 'relative_url' feature is enabled in init()
adiptal.studio.manageImages(
    document.querySelector( '[name="studio-iframe"]' ) ,
    [
        'img-1.jpg',
        'img-2.jpg',
        'img-3.jpg',
        'img-4.jpg',
        'img-5.jpg'
   ]
);
</script>

<script>
adiptal.studio.manageImages(
    document.querySelector( '[name="studio-iframe"]' ) ,
    [
        'https://demo.com/img-1.jpg',
        'https://demo.com/img-2.jpg',
        'https://demo.com/img-3.jpg',
        'https://demo.com/img-4.jpg',
        'https://demo.com/img-5.jpg'
 ]
);

// updated list of images
adiptal.studio.manageImages(
    document.querySelector( '[name="studio-iframe"]' ) ,
    [
        'https://demo.com/img-1.jpg',
        'https://demo.com/img-4.jpg',
        'https://demo.com/img-5.jpg'
 ]
);
</script>

9. saveFile()

This function takes iframe node as parameter and programatically triggers save function of that instance of editor.

saveFile( iframe_node )

Example:

<script>
adiptal.studio.saveFile( document.querySelector( '[name="studio-iframe"]' ) );
</script>

10. loadFile()

This function takes iframe node and json config as parameters and loads file on that instance of editor.

loadFile( iframe_node , json_config = {} )

Json config:

Config	Feature	Value
title	Sets title. *if metadata feature enabled in`init()`.	String
description	Sets description. *if metadata feature enabled in`init()`.	String
cover_image_url	Sets cover image. *if metadata and coverimage feature enabled in`init()`.	String
category_index	Selects category. *if metadata and categories feature enabled in`init()`.	Int/String
tags	Sets tags. *if metadata and tags feature enabled in`init()`.	Array of String
content	Sets file content. *Exact`content`you got from`adiptal_studio_saveFile`event.	String

<script>
var data = {
    title : 'Hello World'
    ,description : 'Hello World. Beginning of something amazing.'
    ,cover_image_url : 'https://demo.com/img-1.jpg'
    ,category_index : 'demo-3'
    ,tags : [ 'hello-world' , 'demo' , 'oh-yeah' ]
    ,content : '<section><header><h2>Hello World</h2></header><p>Hello World. Beginning of something amazing.</p></section>'
};
adiptal.studio.loadFile( document.querySelector( '[name="studio-iframe"]' ) , data );
</script>

11. showToast()

This function takes iframe node and json config as parameters and shows toast on that instance of editor.

showToast( iframe_node , json_config = {} )

Json config:

Config	Feature	Value
heading	Sets heading.	String
body	Sets body.	String
name	Sets toast name to update toast information. *If multiple toast has same name, it will hide all previous toast and only show latest.	String
type	Type of toast. 1. default ( not required to set type ) 2. danger 3. warning 4. success 5. info 6. progress ( timeout infinite by default )	String
infinite	Timeout infinite or 5000 ms.	Boolean

<script>
var data = {
    heading : 'Hello World'
    ,body : 'Hello World. Beginning of something amazing.'
    ,name : 'demo-1'
    ,type : 'success'
    ,infinite : true
};
adiptal.studio.showToast( document.querySelector( '[name="studio-iframe"]' ) , data );
</script>

12. hideToast()

This function takes iframe node and toast name as parameters and hide toast of that name if any on that instance of editor.

hideToast( iframe_node , toast_name )

Example:

<script>
adiptal.studio.hideToast( document.querySelector( '[name="studio-iframe"]' ) , 'demo-1' );
</script>

13. progressToast()

This function takes iframe node, toast name, and percent progress as parameters and update toast's progress of that name if any on that instance of editor. If progress value is 100 it will automatically hide toast in 5000 ms.

progressToast( iframe_node , toast_name , percent_value )

Example:

<script>
adiptal.studio.progressToast( document.querySelector( '[name="studio-iframe"]' ) , 'demo-1' , 25 );
</script>

Events

These are predefined events inadiptal.studioobject.

1. adiptal_studio_live

This event is triggered when editor instance is loaded.

document.addEventListener( 'adiptal_studio_live' , function( event ){
    // iframe 'name' attribute
    var iframeName = event.detail[0][0];

/*  ----- manage functionalities after iframe is loaded -----

    adiptal.studio.loadFile();
    adiptal.studio.addFileOptions();
    adiptal.studio.manageImages();
    adiptal.studio.disable();
*/
});

// adiptal.studio.init();

2. adiptal_studio_lastActive

This event is triggered when editor instance is active.

document.addEventListener( 'adiptal_studio_lastActive' , function( event ){
    // iframe 'name' attribute
    var iframeName = event.detail[0][0];
});

3. adiptal_studio_uploadImages

This event is triggered when images are uploaded through editor instance.

document.addEventListener( 'adiptal_studio_uploadImages' , function( event ){
    // iframe 'name' attribute
    var iframeName = event.detail[0][0];
    var images = event.detail[0][1];

    // upload images to server
    console.log( images );
    images.forEach(function(i){
    });
});

4. adiptal_studio_deleteImages

This event is triggered when images are deleted through editor instance.

document.addEventListener( 'adiptal_studio_deleteImages' , function( event ){
    // iframe 'name' attribute
    var iframeName = event.detail[0][0];
    var images = event.detail[0][1];

    // delete images from server
    console.log( images );
    images.forEach(function(i){
    });
});

5. adiptal_studio_approveFile

This event is trigger when user wants to approve file through editor instance.

document.addEventListener( 'adiptal_studio_approveFile' , function( event ){
    // iframe 'name' attribute
    var iframeName = event.detail[0][0];

    // file needs admin approval, when triggered, update approval status by checking user role conditions.
});

6. adiptal_studio_deleteFile

This event is trigger when user wants to delete file through editor instance.

document.addEventListener( 'adiptal_studio_deleteFile' , function( event ){
    // iframe 'name' attribute
    var iframeName = event.detail[0][0];

    // delete file from server
});

7. adiptal_studio_saveFile

This event is triggered when user wants to save file through editor instance or when programatically callssaveFile().

document.addEventListener( 'adiptal_studio_saveFile' , function( event ){
    // iframe 'name' attribute
    var iframeName = event.detail[0][0];
    var output = event.detail[0][1];

    // process server data and store it in server accordingly
    console.log( output );
});