Manipulating drop-down based on data

Question

I like to create scripts that are clear as to what they do, I like comment, and use data- * in HTML to define what each component is.

I created a script that creates a dropdown, that I can open and close. The result:

/*!
 * Script needed to control the dropdown with the heading options in the new e-mail page
 *
 */
'use strict';
var EmailToggle = {
	init: function() {
		this.dropdown 			= $('[data-dropdown]');
		this.dropdownChildren	= $('[data-dropdown]').children();
		this.dropdownStatus 	= $('[data-dropdown]').data('status');
		this.dropdownButton		= $('[data-dropdown-to]');
		this.activeClass = 'email__dropdown--active';
		/*!
		 * Checks if the value of data-dropdown is true, if it is, the script can continue.
		 *
		 */
		if (this.dropdown.data('dropdown')) {
			this.dropdownButton.bind('click', this._filter.bind(this));
			this.dropdownChildren.bind('click', this._filter.bind(this));
		}
	},
	/*!
	 * Key point to decide whether the dropdown will appear or hide depending on your own value. 
	 * If the vaue of data-status is not open, then the {Function} _showDropdown will be called, 
	 * otherwise the {Function} _hideDropdown will be called.
	 *
	 */
	_filter: function() {
		if (this.dropdownStatus !== 'open') {
			this._showDropdown();
			return;
		} 
		this._hideDropdown();
	},
	/*!
	 * More than show or hide the sidebar, these two {Function} will be required to make changes in nested variables 
	 * and data-* available, to switch between them.
	 *
	 */
	_showDropdown: function() {
		this.dropdownButton
			.attr('data-dropdown-to', this.dropdownStatus);
		this.dropdownStatus = 'open';
		this.dropdown
			.attr('data-status', this.dropdownStatus)
			.addClass(this.activeClass)
			.show();
	},
	_hideDropdown: function() {
		this.dropdownButton
			.attr('data-dropdown-to', this.dropdownStatus);
		this.dropdownStatus = 'close';
		this.dropdown
			.attr('data-status', 'close')
			.removeClass(this.activeClass)
			.hide();
	}
};
EmailToggle.init();

 .email__option {
 -moz-user-select: none;
 -ms-user-select: none;
 -o-user-select: none;
 -webkit-user-select: none;
 background-color: #FFFFFF;
 border-color: #E5E6E7;
 border-radius: 4px;
 border: 1px solid transparent;
 color: #333333;
 cursor: pointer;
 display: inline-block;
 font-size: 14px;
 font-weight: normal;
 line-height: 1.428571429;
 margin-bottom: 0;
 padding: 6px 12px;
 transition: ease 0.5s;
 text-align: center;
 text-decoration: none;
 text-transform: uppercase;
 user-select: none; }
 .email__option:hover {
 border-color: #E97228; }
 .email__option--bold {
 font-weight: bold; }
 .email__option--italic {
 font-style: italic; }
 .email__option--underline {
 padding-bottom: 3px;
 text-decoration: underline; }
 .email__option--underline:hover {
 text-decoration: underline; }
 .email__option.wysihtml5-command-active {
 border-color: #E97228; }
 .email__dropdown {
 background-color: white;
 border: 1px solid #E97228;
 display: none;
 padding: 10px;
 position: absolute; }
 .email__dropdown-option {
 color: #333333;
 display: block;
 padding-bottom: 2px;
 padding-top: 2px;
 text-decoration: none; }
 .email__dropdown--active {
 display: inline-block; }
 .email__upload {
 cursor: pointer;
 float: right;
 position: relative; }
 .email__attachment--file {
 cursor: pointer;
 filter: alpha(opacity=0);
 font-size: 20px;
 margin: 0;
 opacity: 0;
 padding: 0;
 position: absolute;
 right: 0;
 top: 0;
 width: 100%; }
 .email__editor {
 border: none;
 color: #000000;
 height: 250px;
 outline: none;
 padding-bottom: 15px;
 padding-left: 15px;
 padding-right: 15px;
 padding-top: 15px;
 width: 100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="email__option email__option--dropdown" data-dropdown-to="open">
 <span>Tamanho</span>
 </div>
 <div class="email__dropdown" data-dropdown="dropdown" data-status="close" aria-hidden="true">
 <a class="email__dropdown-option">Tamanho h1</a>
 <a class="email__dropdown-option">Tamanho h2</a>
 <a class="email__dropdown-option">Tamanho h3</a>
 <a class="email__dropdown-option">Tamanho h4</a>
 <a class="email__dropdown-option">Tamanho h5</a>
 <a class="email__dropdown-option">Tamanho h6</a>
 </div>

What do you think of the script and how I'm doing things? Can I improve it?

How I can improve this script?

• depperm: it looks nice, however with this being a select, shouldn't it be possible to actually select something, mark one/multiple as selected, then when shown have them highlighted/circled?
• Toni Leigh: is that compiled Sass?
• Toni Leigh: email__attachment--file suggests file is a state that attachment can be in, whereas it's probably a type of attachment, email__attachment-file would be closer to correct BEM, I think

Answer 1

The code looks pretty clean for me. Is easy to follow and the actions and responsibilities are correctly splitter.

You can make some more related to a constructor-object, instead of use a literal object.check here.

Also, you are using a weird looking nomenclature with _. I guessing you are try to make some kind of private function. Winch have sense,you can make something more near to private with scope functions.

Your code comments, doesn't look like a jsdoc, please, consider use a common standard: http://usejsdoc.org/

You are using a weird class name mixed _ and -- try to use something unified, the more common standard is - btw spaces.

the last one, and less anoying, please use:

 .email__upload {
 cursor: pointer;
 float: right;
 } //<-- same as functions.

instead of:

 .email__upload {
 cursor: pointer;
 position: relative; } //<--plz don't