zoxon
11/11/2015 - 11:21 AM

mixin__bem-forms.jade

//-//////////////////////////////////////////////////////////
//- BEM FORMS
//-//////////////////////////////////////////////////////////

//- Universal interface for all form elements
//- Example of use
//- +input(type="select", value=["value 1", "value 2", value="n..."], name="sample-select", errors=["error 1", "error 2"])

- var _attributes = {};

mixin input()
	- _attributes = attributes;
	- _attributes.type          = attributes.type           || "text"
	- _attributes.image         = attributes.image          || "img/content/captcha.png"
	- _attributes.checked       = attributes.checked        || false
	- _attributes.disabled      = attributes.disabled       || false
	- _attributes.required      = attributes.required       || false
	- _attributes.errorclass    = attributes.errorclass     || "error"
	- _attributes.requiredclass = attributes.requiredclass  || "required"
	- _attributes.errors        = attributes.errors         || false
	- _attributes.hint          = attributes.hint           || false
	- _attributes.name          = attributes.name           || "input-name"
	- _attributes.id            = attributes.id             || attributes.name
	- _attributes.cols          = attributes.cols           || 80
	- _attributes.rows          = attributes.rows           || 24
	- _attributes.multiple      = attributes.multiple       || true
	- _attributes.size          = attributes.size           || 5
	- _attributes.style         = attributes.style          || "default"
	- _attributes.baseClass     = attributes.baseClass      || "b-form-item"
	- _attributes.pattern       = attributes.pattern
	- _attributes.mod           = attributes.mod
	- _attributes.title         = attributes.title
	- _attributes.value         = attributes.value
	
	- _attributes.classes       = [_attributes.baseClass]

	- if (_attributes.type)
		- _attributes.classes.push(_attributes.baseClass + "_type_" + _attributes.type)

	- if (_attributes.mod)
		- if (Array.isArray(_attributes.mod))
			- if (_attributes.mod.length > 1)
				each ent, num in _attributes.mod
					- _attributes.classes.push(_attributes.baseClass + "_" + ent)
		- else
			- _attributes.classes.push(_attributes.baseClass + "_" + _attributes.mod)

	- if (_attributes.errors)
		- _attributes.classes.push(_attributes.baseClass + "_status_" + _attributes.errorclass)

	- if (_attributes.required)
		- _attributes.classes.push(_attributes.baseClass + "_" + _attributes.requiredclass)

	- if (_attributes.style)
		- _attributes.classes.push(_attributes.baseClass + "_style_" + _attributes.style)


	- if (_attributes.checked)
		-_attributes.checked = "checked"
	- else
		-_attributes.checked = false

	- if (_attributes.disabled)
		-_attributes.disabled = "disabled"
	- else
		-_attributes.disabled = false



	- if (_attributes.type === "checkbox" || _attributes.type === "radio")
		div(class=_attributes.classes)
			input(type = _attributes.type, name = _attributes.name, id = _attributes.id, value = _attributes.value, checked = _attributes.checked, disabled = _attributes.disabled)

			if (_attributes.label)
				label(for="#{_attributes.id}", class=_attributes.baseClass + "__label")!= _attributes.label
			.clear
	
	- else if (_attributes.type === "captcha")
		div(class=_attributes.classes)
			if (_attributes.label)
				label(for="#{_attributes.name}", class=_attributes.baseClass + "__label")!= _attributes.label
					span  *
			div(class=_attributes.baseClass + "__input-image")
				img(src=_attributes.image, alt="Captcha")
			
			div(class=_attributes.baseClass + "__reload-image")
				a(href="#", title="Reload image").b-icon.b-icon_reload

			div(class=_attributes.baseClass + "__input")
				input(type="text", name=_attributes.name, id=_attributes.id, value=_attributes.value, placeholder=_attributes.placeholder)

			+__helpers()

			.clear

	- else
		+__wrapper()
			- if (_attributes.type === "text" || _attributes.type === "password" || _attributes.type === "email" || _attributes.type === "tel" || _attributes.type === "url" || _attributes.type === "number")
				input(type=_attributes.type, value=_attributes.value, name=_attributes.name, placeholder=_attributes.placeholder, id=_attributes.name, pattern=_attributes.pattern, title=_attributes.title)
				- if (_attributes.type === "input-date")
					div(class=_attributes.baseClass + "__input-icon js-datepicker-trigger " + _attributes.icon)

			- else if (_attributes.type === "file")
				input(type=_attributes.type, name=_attributes.name, placeholder=_attributes.placeholder, id=_attributes.name)

			- else if (_attributes.type === "textarea")
				textarea(name = _attributes.name, cols = _attributes.cols, rows = _attributes.rows, placeholder = _attributes.placeholder, id = _attributes.id)= _attributes.value
			
			- else if (_attributes.type === "select")
				select(name = _attributes.name, id = _attributes.id, data-placeholder = _attributes.placeholder)
					- if (_attributes.placeholder)
						option
					each ent, num  in _attributes.value
						option(value=num, label=ent)= ent

			- else if (_attributes.type === "multiselect")
				select(name = _attributes.name, id = _attributes.id, multiple, size = _attributes.size)
					each ent, num  in _attributes.value
						option(value=num, label=ent)= ent



mixin __wrapper()
	div(class=_attributes.classes)
		+__label()

		div(class=_attributes.baseClass + "__input")
			block

		+__helpers()

		.clear



mixin __label()
	if (_attributes.label)
		label(for=_attributes.name, class=_attributes.baseClass + "__label")!= _attributes.label
			if (_attributes.required)
				span  *



mixin __helpers()
	if (_attributes.errors || _attributes.hint)
		div(class=_attributes.baseClass + "__helpers")
			if (_attributes.hint)
				div(class=_attributes.baseClass + "__hint")= _attributes.hint

			if (_attributes.errors)
				ul(class=_attributes.baseClass + "__errors")
					each ent, num in _attributes.errors
						li= ent