old.API

Plugin's package.json

List of used properties:

Property	Type	Description	Plugin / Theme
name	string	Must the same name as the folder.	both
version	string	See Semver	both
author	string	Author name	both
description	string	A brief description.	both
main	string	Relative path to the main JavaScript file	Plugin
highlight	string	Codemirror theme to use	Theme
colors	object	List of CSS variables with it's values	Theme
css	array	Array of relative paths to CSS files	Both
type	string	Indicate if the theme has custom CSS	Theme

Plugin instance

Our plugin instance will allow us to save,load,remove data locally in a easy way.

Creating it:

const my_plugin = new Plugin({
  name:'myPlugin'
})

We can also access directly to some basic info:

my_plugin.name;
my_plugin.description;
my_plugin.author;
my_plugin.version;

createData()

This should be on top of code since it create the initial data. If already exists some data this will not overwrite it.

my_plugin.createData({
'Something':true
})

saveData()

This will always overwrite the existing data.

my_plugin.saveData({
'Something':false
})

setData()

This will only change a property value

my_plugin.setData('Something','wow')

getData()

This will return you the data.

my_plugin.getData(function(data){

// {'Something':'wow'}

})

deleteData()

This will delete the data. Deleting all data:

my_plugin.deleteData()

Deleting only a property

my_plugin.deleteData('Something')

screens [object]

add()

Create a new splitted screen:

screens.add()

remove()

Delete by id an splitted screen:

screens.remove('screen_id')

commander [object]

Create a new commander

const my_commander = new commander({
   id:'my_commander',
   content:'Something!'
},function(err){
   if(!err) console.log("created!")
})
my_commander.close(); //Delete it

commanders [object]

Commanders aims to bring some default commanders:

terminal()

How to create or delete a terminal on the focused screen

commanders.terminal(); //Will open on the opened directory

commanders.terminal({
   path:'absolute_path'
}); //Will open on the passed directory

commanders.closeTerminal(); //Close the current focused terminal

remove()

Delete by id an splitted screen:

screens.remove('screen_id')

graviton [object]

getCurrentTheme()

Returns the name of the current applied theme.

Example:

graviton.getCurrentTheme();
//Dark

setTheme()

Set's the theme by to the passed name

Example:

graviton.setTheme("Artic");

getSelectedText()

Returns the current selected text as string, if there is no selected it will return null

getCurrentFile()

Returns an object which contains info about the current filepath, it there is any file opened, it will return an empty string.

getCurrentEditor()

Returns an object of the current editor focused, if there is editor focused it will return "empty"

graviton.getCurrentEditor();
/*
{
   editor:<codemirror_instace|undefined>,
   id:'its_id',
   object:html_object,
   path:<'file_path_if_exists'|null>,
   screen:'the_screen_id',
   type:<text|image|free>
}
*/

getCurrentDirectory()

Returns the absolute path of the current opened folder. if there isn't a folder opened, then it will return "not_selected".

currentOS()

Returns an object with info about the host's operative system.

graviton.CurrentOS()
/*
{
   codename:'darwin',
   name:'MacOS'
}

*/

Codename	Name
win32	Windows
darwin	MacOS
linux	Linux

openDevTools()

Toggles the Developer tools.

editorMode()

Returns "zen" if Zen mode is ON, or "normal" if it's normal.

throwError()

A short way to throw a notification error.

addContextMenu()

Add buttons to the default context menu by passing an object.

Example:

graviton.addContextMenu({
	"Button1":"console.log('Hello Gravitoners!')"
})

toggleFullScreen()

Maximize or no by passing a value

Example:

graviton.toggleFullScreen(false)

toggleZenMode()

Toggle the editor mode.

Example:

graviton.toggleZenMode();

//Mode = zen

graviton.toggleZenMode();

//Mode = normal

deleteLog()

Delete the recents projects history

Example:

graviton.deleteLog()

toggleAutoCompletation()

Invert the current status:

Example:

graviton.toggleAutoCompletation()
//ON

graviton.toggleAutoCompletation()
//OFF

toggleLineWrapping()

Invert the current status:

Example:

graviton.toggleLineWrapping()
//ON

graviton.toggleLineWrapping()
//OFF

toggleHighlighting()

Invert the current status:

Example:

graviton.toggleHighlighting()
//OFF

graviton.toggleHighlighting()
//ON

useSystemAccent()

Use the system's accent color if is available.

Example:

graviton.useSystemAccent()
//ON

graviton.useSystemAccent()
//OFF

toggleAnimations()

Invert the current status:

Example:

graviton.toggleAnimations()
//OFF

graviton.toggleAnimations()
//ON

Events Listeners

File saved

Returns the HTML object:

document.addEventListener("file_saved",function(e){
	console.log(e.detail.object)
})

File modified

Through the Codemirror API:

editor.on("change",function(){
	console.log("Editor modified ID's:"+graviton.getCurrentEditor().id)
})

Tab created

Returns the new Tab HTML element created:

document.addEventListener("tab_created",function(e){
	console.log("New tab's ID:"+e.detail.tab.id)
})

Tab loaded

Returns the loaded Tab HTML element created:

document.addEventListener("tab_loaded",function(e){
	console.log("Loaded tab's ID:"+e.detail.tab.id)
})

Tab closed

Returns the closed Tab HTML element created:

document.addEventListener("tab_closed",function(e){
	console.log("Closed tab's ID:"+e.detail.tab.id)
})

Splitted screen

Returns the splitted screen element:

document.addEventListener("split_screen",function(e){
	console.log("Splitted screen id:"+e.detail.screen.id)
})

Closed screen

Returns the closed screen element:

document.addEventListener("closed_screen",function(e){
	console.log("Closed screen id:"+e.detail.screen.id)
})

Loaded project

Returns loaded project:

document.addEventListener("loaded_project",function(e){
	console.log(e.detail)
	/*
	
	path:"something/something",
	name:"Directory name"
	
	*/
})

Creating elements

Dialogs

new Dialog({
  id: "my_dialog",
  title: "Hello user",
  content: "This is my dialog",
  buttons: {
    "Cool!": "console.log("cool!"); closeDialog(this);",
    "close": "closeDialog(this);"
  }
})

Notifications

Create a simple notifcation by passing the title and content as 2 different arguments:

new Notification({
  title:'This is a title!',
  content:'And this is a content 🚀',
});

You can also pass an object as third argument which represents the buttons:

const my_noti = new Notification({
  title:'Custom notification!',
  content:'This is a content',
  delay:10000, // 10 seconds of life
  buttons:{
     "Click":{
      click:function(){
        console.log("Do something")
      }
    },
    "Close":{} //Do nothing
  }
});

my_noti.close(); //Force it's close

Tabs

Creating a tab

const my_tab = new Tab({
    id:'my_tab1',
    type:'free',
    name:'Hello World',
    data:'<h2>Initial content</h2>'
}) 

my_tab.setData('A new content') //Setting a new content

closeTab('my_tab1_freeTab') //Closing the tab by passing it's ID + '_freeTab'

loadTab(document.getElementById('my_tab1_freeTab')) //Load the tab by passing it's HTML element

Windows

Creating a window:

const my_window = new Window({
    id:'my_window1',
    content:'This is a very big window! '
})

my_window.launch(); //Open the window

my_window.close(); //Close the window

closeWindow('my_window1'); //Close the window by passing the id

Controls

Creating Control (which refers to a button on the bottom of a screen):

new Control({
  text:"Some text",
  hint:"Something"
})

Dropmenus

Initializing a dropmenu:

const myDropMenu = new dropMenu({
	id:"my_dropmenu"
});

Defining a buttons list:

myDropMenu.setList({
  "button": "Button",
  "list":{
     "Click me!":{
        click:()=> console.log("Clicked!")
      }
  }
})

Defining a custom list which you can use to display HTML content:

myDropMenu.setList({
  "button": "Button",
  "custom":"<p>Hello world</p>"
})