0.3.1 • Published 5 years ago
@dinoreic/widget v0.3.1
HTML Widgets
Micro Widget/Component lib
Super simple component lib for use with server side rendered templates
if you need someting similar but more widely adopted, use https://stimulusjs.org/
Init interface
// to register a widget
Widget(name, { init: ..., render: ... })
// to bind widget to DOM node
Widget(name, HTMLElement)
// to get reference to binded node
Widget('#id' || HTMLElement)
instance public interface
methdods
// called only once on widget register
this.once()
// called on wiget init
this.init()
// will add css to document head if present
this.css()
// if it returns string, renders data to container
this.render()
// generate HTML tag
this.h(name, otps, innerHTML)
// set @state[k]=v to v and call render() if render
this.set(key, value)defined
// set innerHTML to current node, auto call helpers. replaces $$ with current node reference
this.html(data, node?)
// binded DOM HTML Element
this.node -
// this pointer as a string
this.refstring
// data-json="{...}" -> @state + all data-attributes are translated to state
this.state
Example code
Coffee script
Widget 'yes_no',
css: """
.w.yes_no button { margin: 0; }
"""
init: ->
@state.yes ||= 'yes'
@state.no ||= 'no'
render: ->
data = @render_button(@state.yes, 1)
data += @render_button(@state.no, 0)
tag 'div.btn-group', data
render_button: (name, state) ->
klass = if parseInt(@state.state) == state then 'primary' else 'defaut'
tag 'button.btn.btn-sm', name,
class: "btn-#{klass}"
onclick: => @update_state(state)
update_state: (state) ->
url = "#{@state.object}/#{@state.id}/update?#{@state.field}="+state
Api(url).done =>
@state.state = state
@render()
Pjax.refresh()
<w-yes_no data-filed="yes" data-object="pools" data-id="3"></w-yes_no>