chore(frontend-docs): fix warnings & update

docs/frontend_api/widgets_basic_widget.js.html

@@ -27,7 +27,9 @@
     <section>
         <article>
             <pre class="prettyprint source linenums"><code>import Component from "../components/component.js";
-
+import froca from "../services/froca.js";
+import { t } from "../services/i18n.js";
+import toastService from "../services/toast.js";
 
 /**
  * This is the base widget for all other widgets.
@@ -66,6 +68,21 @@ class BasicWidget extends Component {
         return this;
     }
 
+    /**
+     * Conditionally adds the given components as children to this component.
+     * 
+     * @param {boolean} condition whether to add the components.
+     * @param  {...any} components the components to be added as children to this component provided the condition is truthy. 
+     * @returns self for chaining.
+     */
+    optChild(condition, ...components) {
+        if (condition) {
+            return this.child(...components);
+        } else {
+            return this;
+        }
+    }
+
     id(id) {
         this.attrs.id = id;
         return this;
@@ -76,11 +93,34 @@ class BasicWidget extends Component {
         return this;
     }
 
+    /**
+     * Sets the CSS attribute of the given name to the given value.
+     * 
+     * @param {string} name the name of the CSS attribute to set (e.g. `padding-left`).
+     * @param {string} value the value of the CSS attribute to set (e.g. `12px`).
+     * @returns self for chaining.
+     */
     css(name, value) {
         this.attrs.style += `${name}: ${value};`;
         return this;
     }
 
+    /**
+     * Sets the CSS attribute of the given name to the given value, but only if the condition provided is truthy.
+     * 
+     * @param {boolean} condition `true` in order to apply the CSS, `false` to ignore it.
+     * @param {string} name the name of the CSS attribute to set (e.g. `padding-left`).
+     * @param {string} value the value of the CSS attribute to set (e.g. `12px`).
+     * @returns self for chaining.
+     */
+    optCss(condition, name, value) {
+        if (condition) {
+            return this.css(name, value);
+        }
+
+        return this;
+    }
+
     contentSized() {
         this.css("contain", "none");
 
@@ -109,7 +149,11 @@ class BasicWidget extends Component {
     }
 
     render() {
-        this.doRender();
+        try {
+            this.doRender();
+        } catch (e) {                        
+            this.logRenderingError(e);
+        }
 
         this.$widget.attr('data-component-id', this.componentId);
         this.$widget
@@ -147,6 +191,39 @@ class BasicWidget extends Component {
         return this.$widget;
     }
 
+    logRenderingError(e) {
+        console.log("Got issue in widget ", this);
+        console.error(e);
+
+        let noteId = this._noteId;
+        if (this._noteId) {
+            froca.getNote(noteId, true).then((note) => {
+                toastService.showPersistent({
+                    title: t("toast.widget-error.title"),
+                    icon: "alert",
+                    message: t("toast.widget-error.message-custom", {
+                        id: noteId,
+                        title: note.title,
+                        message: e.message
+                    })
+                });
+            });
+            return;
+        }
+
+        toastService.showPersistent({
+            title: t("toast.widget-error.title"),
+            icon: "alert",
+            message: t("toast.widget-error.message-unknown", {
+                message: e.message
+            })
+        });
+    }
+
+    /**
+     * Indicates if the widget is enabled. Widgets are enabled by default. Generally setting this to `false` will cause the widget not to be displayed, however it will still be available on the DOM but hidden.
+     * @returns whether the widget is enabled.
+     */
     isEnabled() {
         return true;
     }
@@ -222,7 +299,7 @@ export default BasicWidget;
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.2</a>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.3</a>
 </footer>
 
 <script> prettyPrint(); </script>