UIZE JavaScript Framework

TO DO - Uize.Widget.Page

This is a TO DO document for the Uize.Widget.Page module.

right now, the implementation of useDialog has support for component loading that is a functionality specific to zazzle.com and that is dependent on the loadComponentIntoNode method implemented in Zazzle.Page. Either find a way to make this generic and configurable, or provide some hooks so that this code can migrate back into Zazzle.Page.
there is an ugly reference to productType that is Zazzle-specific. Find a way to migrate this out.

1. New Mechanism For Widget Adoption

With the declarative syntax for widget adoption, devise a way to have code that executes as part of the adoption process (possibly allow value of $ variable to be a function?).

CONSIDERATIONS

must cater to cases where HTML is to be a template module
must cater to case where data needed by widget instance is defined in separate module, or needs to be somehow computed

1.1. Existing Syntax

EXAMPLE

<script type="text/javascript">
  window.$page_menu4HoverFader = {
    widgetClass:'Uize.Widget.HoverFader',
    nodes:{root:'menu4',className:/\bmenuLink\b/},
    defaultStyle:{color:'bbb',borderColor:'555'},
    hoverStyle:{color:'ffa200',borderColor:'ffa200'},
    fadeIn:{duration:500,deceleration:1},
    fadeOut:{duration:750,acceleration:1}
  };
</script>

A major problem with this approach is that it does not allow such declarations to declare dependencies on other modules.

1.2. Dedicated pageWiring Script Type

EXAMPLE

<script type="text/pageWiring">
  Uize.module ({
    required:'Uize.Fade',
    builder:function () {
      continueWiring (
        'page_menu4HoverFader',
        {
          widgetClass:'Uize.Widget.HoverFader',
          nodes:{root:'menu4',className:/\bmenuLink\b/},
          defaultStyle:{color:'bbb',borderColor:'555'},
          hoverStyle:{color:'ffa200',borderColor:'ffa200'},
          fadeIn:{duration:500,curve:Uize.Fade.celeration (0,1)},
          fadeOut:{duration:750,curve:Uize.Fade.celeration (1,0)}
        }
      );
    }
  });
</script>

1.3. Widget To Adopt is a Function

EXAMPLE

<script type="text/javascript">
  window.$page_menu4HoverFader = function (_returnWidgetData) {
    Uize.module ({
      required:'Uize.Fade',
      builder:function () {
        _returnWidgetData ({
          widgetClass:'Uize.Widget.HoverFader',
          nodes:{root:'menu4',className:/\bmenuLink\b/},
          defaultStyle:{color:'bbb',borderColor:'555'},
          hoverStyle:{color:'ffa200',borderColor:'ffa200'},
          fadeIn:{duration:500,curve:Uize.Fade.celeration (0,1)},
          fadeOut:{duration:750,curve:Uize.Fade.celeration (1,0)}
        });
      }
    })
  };
</script>

1.4. Dedicated widgetToAdopt Script Type

1.4.1. JSON Object's Properties As Per Current Syntax

EXAMPLE

<script type="text/widgetToAdopt" required="Uize.Fade">
  {
    idPrefix:'page_menu4HoverFader',
    widgetClass:'Uize.Widget.HoverFader',
    nodes:{root:'menu4',className:/\bmenuLink\b/},
    defaultStyle:{color:'bbb',borderColor:'555'},
    hoverStyle:{color:'ffa200',borderColor:'ffa200'},
    fadeIn:{duration:500,curve:Uize.Fade.celeration (0,1)},
    fadeOut:{duration:750,curve:Uize.Fade.celeration (1,0)}
  }
</script>

1.4.2. JSON Object's Properties Has New Structure

EXAMPLE

<script type="text/widgetToAdopt" required="Uize.Fade">
  {
    idPrefix:'',
    widgetClass:'Uize.Widget.HoverFader',
    widgetProperties:{
      nodes:{root:'menu4',className:/\bmenuLink\b/},
      defaultStyle:{color:'bbb',borderColor:'555'},
      hoverStyle:{color:'ffa200',borderColor:'ffa200'},
      fadeIn:{duration:500,curve:Uize.Fade.celeration (0,1)},
      fadeOut:{duration:750,curve:Uize.Fade.celeration (1,0)}
    }
  }
</script>
simple / elegant
understandable / readable 
<script type="text/widgetToAdopt" required="">
  adoptWidget (
    'page_someWidget',
    'Uize.Widget.SomeWidgetClass',
    {
      // widget properties
    }
  );
</script>

<script type="text/widgetToAdopt" widgetClass="" idPrefix="" required="">
  (function () {
    return {
    }
  }) ()
</script>

<script type="text/javascript">
  window.$page_menu4HoverFader = function (_returnWidgetData) {
    Uize.module ({
      required:'Uize.Fade',
      builder:function () {
        _returnWidgetData ({
          widgetClass:'Uize.Widget.HoverFader',
          nodes:{root:'menu4',className:/\bmenuLink\b/},
          defaultStyle:{color:'bbb',borderColor:'555'},
          hoverStyle:{color:'ffa200',borderColor:'ffa200'},
          fadeIn:{duration:500,curve:Uize.Fade.celeration (0,1)},
          fadeOut:{duration:750,curve:Uize.Fade.celeration (1,0)}
        });
      }
    })
  };
</script>