Description

AngularJS custom element module provides functionality to wrap directive/component with custom element.
Internally in Conta we use the service to reuse existing AngularJS directives/components in Elm.

The service has accompany Elm module.

Dependencies

The service uses ES5 syntax to create custom elements.
You'll need to include two pollyfils before you include a code with your custom elements:

- @webcomponents/webcomponentsjs/custom-elements-es5-adapter.js - this is for new browsers in order to understand ES5 syntax.
- @webcomponents/custom-elements/custom-elements.min.js - this is for old browsers without customElements support.

You can add them to your index.html file in the following way. Make sure to add it before adding you app scripts.

``html



`

Install

Include the file in HTML

`html



`

or require the file

`js
require('@contasystemer/angularjs-custom-element');
`

Use

In JavaScript

`javascript
csCustomElement.create('cs-component', {
// Can be used to specify special element for AngularJS directive which will be used as attribute.
attributeDirective: {
element: 'div',
attributeValue: '{{ vm.csExtraData }}',
},
attributes: ['cs-required', 'cs-change-year'],
interpolations: ['csApiUrl', 'csMainAddressLabel'],
scope: {
csExtraData: csCustomElement.decode.string,
},
bindings: {
csIntegerBinding: csCustomElement.decode.integer,
csBooleanBinding: csCustomElement.decode.boolean,
},
customBindings: {
csCustomBinding: {
attribute: 'custom-attribute',
attributeValue: '{{ vm.someCustomValue }}',
decode: {
set: function (value) {
this.$scope.vm.someCustomValue = value;
}
}
}
},
events: {
csOnChange: {
model: function (value) {
return value === 'my string' : 'Yes, I have got what I wanted' : 'Oops, failed';
},
data: {
argumentName: 'vm.someScopeValue',
encode: csCustomElement.encode.identity,
},
init: csCustomElement.encode.identity
}
}
});
`

In Elm:

`elm
viewContaComponent : Html Msg
viewContaComponent =
AngularCustomElement.viewWithTransclusion
{ componentName = "cs-component-element"
, attributes =
[ Attrs.attribute "cs-required" ""
, Attrs.attribute "cs-change-year" ""
, Attrs.property "csApiUrl" (Encode.string "some/url")
, Attrs.property "csMainAddressLabel" (Encode.string "My address in Oslo")
, Attrs.property "csExtraData" (Encode.string "Some extra data")
, Attrs.property "csIntegerBinding" (Encode.int 42)
, Attrs.property "csBooleanBinding" (Encode.bool True)
, Attrs.property "csCustomBinding" (Encode.string "My custom string")
, Decode.decode MyMessage
|> Decode.requiredAt [ "detail", "model" ] Decode.string
|> Decode.requiredAt [ "detail", "data" ] Decoder.int
|> Decode.requiredAt [ "detail", "init" ] Decode.bool
|> Events.on "csOnChange"
]
-- transclude takes one parameter with type List (Html Never).
-- Which means any content which does not produce any messages.
, transclude = [ Html.text "Add some extra content here." ]
}
`

From cs-component a custom element will be created with name cs-component-element.

For more details/examples please read the source code.

Extend

The service exposes helper functions for decoding and encoding common types.
The service exposes helper.decode function to construct custom decoding functions.
Use module.decorator to augment decoders and encoders.
E.g. at Conta we have decoders for moment values, etc..

To augment scope's vm for each custom element use module.decorator to override extendVm method.
E.g. at Conta we use extendVm method to augment each custom element scope's vm with sendToElm method.
sendToElm` method allows us to send messages from AngularJS to Elm directly (depends on internal implementation).