coding davinci toolboxes

overview


the davinci-blog community toolbox library is a collection of toolboxes that are accessible from the davinci blog workspace. Toolboxes help users to create blogs by providing various types of functionality, typically in the form of web components.

Toolbox javascript


Technically, a Toolbox is just javascript code that is loaded into the blog editor when a user launches it. As such, there is really nothing to understand. You can put any code in a Toolbox,and it will be loaded and run when the user opens the blog editor.

control box


Most Toolboxes are designed to accessible as a drag and drop icon in the control box. The control box can be opened through the context menu that is activated by a right mouse click. The following code adds the media item to the context menu, which as a child menu item name audio. There is a function associated with the key click which specifies what happens when the audio item is clicked. 

(function () {
  $context([{
    name: 'media',
      children: [{
        name: 'audio',
        click: function () {

        }
      }]
  }])
})();
When the menu item is clicked, we want to open the control box. The following adds an item to the control box. If the box is not open, it will open it. 

$controlBox.addItem({
  html: '<img id="' + id + '" class="" style="width:30px;display:block;margin:auto;" src="'+ICON_ROOT+'1059132 - bar note single.png" /><br/>',
  id:'davinci.audio'
});
$controlBox.open();
The next step is to open the control window. When the user clicks the audio icon in the control box, we want to open the control window. The control window may already be open. Next we clear the content in the window. We put a header in the control window (here listed as title, but we havent shown the html we set title to.)

Next we are goint to a section of the control window that we want to be draggable. We add a dragComponent to the control window by calling the dragComponent method. The inputs are the html content, the id of the draggable section, and a callback. Here the callback inports a javascript module and calls a method on the module. This method adds the audio component. 

$('#' + id).click(function () {
	$controlWindow.open();
	$controlWindow.content('');
	$controlWindow.header(title);

	let audioId = $util.guid();
	let helpId = $util.guid();
	let content = `<div draggable="true" id="` + audioId + `-parent"><div class="control-widget" id="` + googleMapId + `" ><div style="display:flex;flex-direction:row;"><div style="width:50px;"><img  class="" style="width:30px;display:block;margin:auto;" src="`+ICON_ROOT+`1059132 - bar note single.png" /></div><div style="flex:1">audio</br><a class="link" id="` + helpId + `" href="#headerPopup-` + helpId +`" style="font-size:12px;margin-right:5px;" href="#">tutorial</a><a class="link" style="font-size:12px;margin-right:5px;" target="_audiohelp" href="/home/documentation/template.html?url=/library/ctrls/davinci/audio/v1.0.0/site/doc.js">help</a></div></div></div></div>`
	
	let callback = async function () {
		(await import('/lib/components/v1.0.0/audio.js')).addAudio()
	};
	$controlWindow.dragComponent(content, audioId + '-parent', callback);
}

components


As a matter of course, the requirements listed above are the only requirements you need to implement a Toolbox, however, Most Toolboxes will add a component to the workspace or the blog when the user indicates. For example, when the above code calls the addAudio method, this method will mostly likely add an audio component to the workspace or the blog. Components are sections of code that the user can copy, paste and delete or such actions. In order to expose these capabilities, the component must comply with the davinci component spec.

components

Contents