More customization

Configuration files can be used to customize the menus used to insert nodes, but it is also possible to define menus with custom functions, and only a Daxe extension can implement these. It is also easy to customize the toolbar, the left panel, and the function used to save documents.

Function menus in configuration files are defined with a FUNCTION_MENU element, and these have a function_name attribute with the function name. This function can be added to Daxe in an extension with the addCustomFunction() function in the daxe package.

More customization can be done by passing named parameters to the initDaxe() function:

• left: should be a LeftPanel or a class deriving from it, representing the left panel
• saveFunction: a function called when the document should be saved (by default, doc.save())
• customizeToolbar: a function called at the right time to customize the toolbar (after page.toolbar is created but before the HTML is generated)

On top of that, more code can be executed after initialization, by using the fact that initDaxe() returns a Future. Here is an example combining different customizations:

(Daxe's DOM package is included with import 'package:daxe/src/xmldom/xmldom.dart' as x; in this example)

        // use a custom insert panel, MyOwnInsertPanel, implemented elsewhere
        InsertPanel insertP = new MyOwnInsertPanel();
        LeftPanel left = new LeftPanel(insert:insertP);
        ActionFunction saveFunction= () {
          // display an alert after a save
          doc.save().then((_) {
            h.window.alert(Strings.get('save.success'));
          }, onError: (DaxeException ex) {
            h.window.alert(Strings.get('save.error') + ': ' + ex.message);
          });
        };
        ActionFunction customizeToolbar = () {
          // add a button to insert a mydn node
          Toolbar toolbar = page.toolbar;
          List<x.Element> refs = doc.cfg.elementsWithType('mydn');
          if (refs != null && refs.length > 0) {
            ToolbarBox myBox = new ToolbarBox();
            toolbar.addInsertButton(doc.cfg, myBox, refs, 'my_dn.png');
            toolbar.add(myBox);
          }
        };
        Strings.load().then((bool b) {
          initDaxe(left:left, saveFunction:saveFunction,
              customizeToolbar:customizeToolbar).then((v) {
            // more customizations can be added here
          }).catchError((e) {
            String msg = 'Initialization error: ' + (e is String ? e : e.toString());
            print(msg);
            h.document.body.appendText(msg);
          });
        }).catchError((e) {
          String msg = 'Initialization error: ' + (e is String ? e : e.toString());
          print(msg);
          h.document.body.appendText(msg);
        });
    

A large example of an extension is LON-CAPA Daxe, which lets LON-CAPA users edit documents using the LON-CAPA language, featuring a mix of HTML and custom elements for online problems. The source code is currently (as of 2017) available here.