koco-multimedia-container

Container for different types of multimedia content for use in a context like a picker in a form or that type of thing. Provides a 'media present' state and a 'nothing has been selected state.'

installation

bower install koco-multimedia-container

Usage with KOCO

This is a shared module that is used in many other modules. Register it in your components.js:

        Components.prototype.registerComponents = function() {
            ...
            koUtilities.registerComponent('multimedia-container', {
                basePath: 'bower_components/koco-multimedia-container/src/multimedia-container'
            });
            ...
        };

Also add the container's styles to your less file:

@import "../bower_components/koco-multimedia-container/src/multimedia-container.less";

And then you can use it like this:

<multimedia-container params="click: selectImage, multimedia: image, remove: unselectImage, removeTitle: 'remove this image', defaultImageUrl: settings.defaultImageUrl">
    <img data-bind="image: image" />
</multimedia-container>

Pass a removeTitle (which will be used as the alt for the X button to remove the image), and a defaultImageUrl for use when we don't have an image (for example if you remove it!). defaultImageUrl can be a full url or path.