Component

[{[Component name]}].js

/* 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)
    });
});

[{[Component name]}].less

/* 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) {
  }
}

[{[Component name]}].twig

{#
/** 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 %}