6
\$\begingroup\$

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?

\$\endgroup\$
  • \$\begingroup\$ 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? \$\endgroup\$ – depperm Jul 21 '15 at 15:06
  • \$\begingroup\$ is that compiled Sass? \$\endgroup\$ – Toni Leigh Dec 10 '15 at 0:04
  • \$\begingroup\$ 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 \$\endgroup\$ – Toni Leigh Dec 10 '15 at 0:07
1
\$\begingroup\$

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
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.