Thursday, May 5, 2016

Metawidget: associating EventListeners with widgets

I was recently asked how to "associate further rules with widgets, depending on the populated data [when using the pure JavaScript Metawidget]". The answer is to use a WidgetProcessor. Here's a complete example:

<!DOCTYPE html>
<html>
   <head>
      <script src="lib/metawidget/core/metawidget-core.min.js" type="text/javascript"></script>
   </head>
   <body>
      <div id="metawidget">
      </div>
      <script type="text/javascript">

         var mw = new metawidget.Metawidget( document.getElementById( 'metawidget' ), {
            inspector: new metawidget.inspector.CompositeInspector( [
               new metawidget.inspector.PropertyTypeInspector(),
               new metawidget.inspector.JsonSchemaInspector( {

                  // Insert custom attribute into the metadata

                  properties: {
                     surname: {
                        disabledUnless: 'firstname'
                     }
                  }
               } ) ] ),
            appendWidgetProcessors: function( widget, elementName, attributes, mw ) {

               // Watch for custom attribute, and add an EventListener

               if ( attributes.disabledUnless !== undefined ) {
                  var triggerWidgetId = metawidget.util.getId( 'property', { name: attributes.disabledUnless }, mw );
                  var triggerWidget = document.getElementById( triggerWidgetId );
                  triggerWidget.addEventListener( 'keyup', function() {
                     widget.disabled = ( triggerWidget.value === '' );
                  } );
                  widget.disabled = true;
               }
               return widget;
            }
         } );

         mw.toInspect = {
            firstname: '',
            surname: ''
         };

         mw.buildWidgets();
      </script>
   </body>
</html>