Developer Center

JavaScript Libraries

Saber uses the Datasilk Core JS library used for UI functionality along with Selector, a jQuery replacement library that weighs in at 5kb (gzipped). This documentation is focused on giving developers information on core features of Saber's JavaScript libraries as well as information on loading your own JavaScript libraries.

Vendor JavaScript Files

You are able to include JavaScript libraries within your Vendor plugin. All JavaScript files located within the root of your plugin folder will be copied to /wwwroot/editor/vendors/ when your plugin is first installed into the user's Saber website, or when the user updates your plugin to a newer version. Saber will not copy over gulpfile.js or any JavaScript files from within the node_modules folder.

Gzip Compression

All JavaScript files located within /wwwroot/editor/ are gzip compressed so when they are served through a web server, the user's web browser will receive the compressed JavaScript files. This saves around 2 MB of bandwidth when loading the Saber Editor and allows Saber's JavaScript libraries to load at 1/5th the size.

This means that all JavaScript files copied from your plugin folder to the /wwwroot/editor/vendors/ folder will be gzip compressed before being saved to disk.

Loading Script Files

When building your vendor plugin for Saber, there are various ways to load your JavaScript files into the web browser. In all cases, you should use the relative path /editor/vendors/ when referencing your JavaScript files.

Both the Controller and Service classes contain the AddScript(string url, string id = "", string callback = "") method which is a part of the inherited IRequest interface. You can learn more about loading script files from the Saber.Core.IRequest documentation.
You can load script files for your HTML components from the HtmlComponentModel.Render method since one of the arguments for the Render method references the current IRequest instance. Similar to how the Controller class uses the AddScript(string url, string id = "", string callback = "") method to include a <script> tag at the bottom of the web page, Saber will render a <script> tag at the bottom of the web page when calling the AddScript() method from your HtmlComponentModel.Render method. You can learn more about the HtmlComponentModel class from the IVendorHtmlComponents documentation.
You can load script files from the IVendorViewRenderer interface since it contains an argument reference for the current IRequest instance. The View Renderer is rendered any time a specified View is being rendered, so if you execute the AddScript() method, it could belong to either a Controller or Service class.
You can load script files from the IVendorWebsiteSettings interface since it contains an argument reference for the current IRequest instance. From there, you can execute the IRequest.AddScript() method. IVendorWebsiteSettings is executed when the user visits the Website Settings tab within the Saber Editor.

vendors-editor.js

If you'd like to execute a script when the Saber Editor loads, include the file editor.js in your vendor plugin folder. Saber will automatically compile all editor.js files from all vendors into /wwwroot/editor/js/vendors-editor.js, which is loaded when the user loads Saber's Editor.

S.ajax.post

This function is used to call web APIs (IVendorService) and includes both OnComplete and OnError callback arguments.

S.ajax.post('ShoppingCart/AddToCart', {productId: id}, (response) => { //process response }, (err) => {//process error});

For the URL, use your IVendorService class name & method name. For example, 'ShoppingCart/AddToCart' references the AddToCart method located within the ShoppingCart class that inherits IVendorService.
The second argument takes an object with properties that will be mapped to your IVendorService method arguments.
The third argument is the OnComplete callback function which contains the responseText as an argument. If you sent a serialized JSON string, set the fifth argument for S.ajax.post to true to make the OnComplete callback function use a JSON object as an argument instead of responseText.
The fourth argument is the OnError callback function which contains the XMLHttpRequest object as an argument. This callback is executed if there was a response with a status code less than 200 or greater than or equal to 400, or if the XHR object raised an error when trying to connect to the remote server.
The fifth argument is optional and if set to true, will deserialize the responseText as a JSON object in the OnComplete callback function.

Events

When developing your plugin for Saber, you can listen to global events that take place from within JavaScript.

Listeners

Add a global listener that can be utilized by other plugins and features

S.editor.events.add('my-plugin-event')

The following listeners are used by Saber

Event Name	Event Arguments	Description
Data Sources
data-source-added		Users may regularly create new data sources, so an event will be triggered whenever this occurs.
data-source-updated	key, label, id	Users may regularly update existing data sources, so an event will be triggered whenever this occurs.

Data Sources

S.editor.events.listen('data-source-added', () => { /* do stuff */ })