Component
{#
/** dockter eval
namespace: components
name: [{[Component name]}]
description: [{[Description]}]
file: [{[Component name]}].twig
globalparams:
- type: string
name: id
- type: string
name: id
description: The html id given to this instance
- type: string
name: classes
description: The html classes given to this instance.
- type: object
name: object
description: Contains data used to render the structure of the component and its output. See Object Params
objectparams:
- type: string
name: var
description: Some var
required: false
snippet: |
{% embed "components/[{[Component name]}].twig"
with {
classes: '$1'
id: '$2'
object: $3
} %}
{% block content %}
{% endblock %}
{% endembed %}
endeval */
#}
{# Convert passed options to private variables #}
{% set _body = block('body')|trim %}
{{ set_component_vars() }}
{% embed 'components/_base.twig' with {classes: 'c-[{[Component name]}] ' ~ _classes, id: _id, element: 'div', attributes: _attributes} %}
{% block content %}
{# Delete public variables so they dont get passed down the line #}
{{ clear_component_vars() }}
{% set required = {
var: ''
} %}
{% set _object = required|merge(_object) %}
{% endblock %}
{% endembed %}
/* dockter eval
namespace: components
name: [{[Component name]}]
description: [{[Description]}]
file: [{[Component name]}].less
endeval */
.c-[{[Component Name]}] {
@media only screen and (min-width: 0) {
}
@media only screen and (min-width: @screen-sm-min) {
}
@media only screen and (min-width: @screen-md-min) {
}
@media only screen and (min-width: @screen-lg-min) {
}
}
/* dockter eval
namespace: components
name: [{[Component name]}]
description: [{[Description]}]
file: [{[Component name]}].less
require:
- jquery
endeval */
var [{[Component name]}] = function(element, properties) {
var self = this
self.element = element
self.$element = $(element)
self.props = $.extend({}, [{[Component name]}].DEFAULTS, properties)
self.assets = {
}
self.cache = self.$element.clone()
self._bindEvents()
self._init()
}
[{[Component name]}].SELECTOR = '.c-[{[Component name]}]'
[{[Component name]}].DEFAULTS = {
classes: {
active: 'js-active'
}
}
[{[Component name]}].INSTANCES = []
[{[Component name]}].prototype._init = function() {
var self = this
// do initialization stuff here.
self.$element.trigger('init.[{[Component name]}]')
}
[{[Component name]}].prototype._bindEvents = function() {
var self = this
// when stuff happens, do this other stuff.
self.$element.on('init.[{[Component name]}].zion', function() {
self.method()
})
}
/* dockter eval
namespace: components.[{[Component name]}]
name: [{[Component name]}]
type: method
description: Does some stuff
snippet: |
$('.c-[{[Component name]}]').data('component.[{[Component name]}]').method()
hooks:
- name: beforemethod.[{[Component name]}]
description: Triggers just before method is run
- name: aftermethod.[{[Component name]}]
description: Triggers just after method is run
endeval */
[{[Component name]}].prototype.method = function() {
var self = this;
// do prepwork here...
self.$element.trigger('beforemethod.[{[Component name]}]')
// take action here...
self.$element.trigger('aftermethod.[{[Component name]}]')
}
/* dockter eval
namespace: components.[{[Component name]}]
name: [{[Component name]}]
type: method
description: Destroys the instance, resetting the html to how it wsa on page load
snippet: |
$('.c-[{[Component name]}]').data('component.[{[Component name]}]').destroy()
hooks:
- name: beforedestroy.[{[Component name]}]
description: Triggers just before html replace is initiated
- name: afterdestroy.[{[Component name]}]
description: Triggers when the replacement html is inserted into the dom
extraparams:
- name: replacement
type: Node
description: The DOM node that will replace this instance
endeval */
[{[Component name]}].prototype.destroy = function() {
var self = this
self.$element.trigger('beforedestroy.[{[Component name]}]')
self.cache.insertAfter(self.$element)
self.$element.detach()
self.$element.trigger('destroy.[{[Component name]}]', self.cach.get())
self.$element.remove()
}
////////////////////////////////////////////////////////////////////////////////
// Instatiate
$(document).ready(function() {
function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('component.[{[Component name]}]')
var options = $.extend({}, [{[Component name]}].DEFAULTS, $this.data(), typeof option == 'object' && option)
var component = new [{[Component name]}](this, options)
[{[Component name]}].INSTANCES.push(component)
if (!data) {
$this.data('component.[{[Component name]}]', (data = component))
}
if (typeof option == 'string') data[option]()
});
}
var old = $.fn.[{[Component name]}];
$.fn.[{[Component name]}] = Plugin;
$.fn.[{[Component name]}].Constructor = [{[Component name]}];
$.fn.[{[Component name]}].noConflict = function () {
$.fn.[{[Component name]}] = old
return this
}
$([{[Component name]}].SELECTOR).each(function() {
var $this = $(this)
var data = $this.data('[{[Component name]}]')
var option = data && $this.data()
Plugin.call($this, option)
});
});