slashui-image-cntr v1.0.7

#slashui-image-cntr

The slashui-image-cntr is a Node.js UI Component that centers an image in a container by using Marko Templates

##How it works

Using slashui-image-cntr in Node.js

• Load module: npm install slashui-image-cntr --save
• Insert the following code in your Marko template.

  • You would need to provide view model.

    <slashui-image-cntr viewModel= $data.imageCntr.viewModel  />

  • Sample View Model

    var imageCntrViewModel = {
            imageUrl: 'http://i3.ebayimg.com/images/g/~esAAOSw2XFUahOW/s-w225.webp', // Required
            link: false, // Optional
            imageText: 'this is image test', // Optional
            alias: 'slashui-image-cntr' // Required
    };

###Parameters

• viewModel - this parameter is required and if you fail to provide this paramter you will fail rendering the UI Component.

{
    **imageUrl: 'http://i3.ebayimg.com/images/g/~esAAOSw2XFUahOW/s-w225.webp',
    **alias: 'slashui-image-cntr' // alias should match the name of the UI Component.
    link: false,  // if you want your image to become linkable assign a link here.
    imageText: 'this is image test', // we will use this text for the alt attribute
}
// ** = Required.

• config this parameter is optional if you would like to add some attributes to some of the html tags you can use the config option.

  var config = {
      attrs:{
          imgAttrs:{
              id:'img-id'
          },
          figureAttrs:{
              id:'figure-id',
              'data-test': 'data attribute on figure'
          }
      }
  }
  //Marko Template
   <slashui-image-cntr config= $data.config  />

  There is also config helper.

      var config = {
          imgAttrs:{
              id:'img-id'
          },
          figureAttrs:{
              id:'figure-id',
              'data-test': 'data attribute on figure'
          }
      }
      var viewConfig = require('slashui-image-cntr').buildViewConfig(config);
      // Marko template
      <slashui-image-cntr config= $data.viewConfig  />

###Client Side Use:

        var imageCntr  = require(slashui-image-cntr');

        
        var imageCntrViewModel = {
                imageUrl: 'http://i3.ebayimg.com/images/g/~esAAOSw2XFUahOW/s-w225.webp',
                link: false,
                imageText: 'this is image test',
                alias: 'slashui-image-cntr'
        };
        var input = imageCntr.getModel(imageCntrViewModel);
        
        imageCntr.render(input, function(error, result){ 
            console.log(result.html); 
        });

Methods

• buildViewConfig: function(viewConfig)
  • Validates configuration and will return the UI Friendly Config.
• getModel: function(viewModel, config)
  • Will return an Object that has both viewModel and viewConfig and will internally convert config to view config

        {
            viewModel: //View Model
            config: //UI Config
        }

• render: function(data, callback)

• this method is called in the client side to render data. callback function will return the html and error
• data is generated from getModel method.

         var callback = function(error, result){ 
             console.log(result.html); 
         }