beat_dd

by levchenko_d

HTML

<link rel="stylesheet" href="https://beat.today/stylesheets/style.css">
<button class="button blue medium" onclick="return window.App.Dropdown(this, '.dropdown');">
  Toggle Dropdown
</button>

<div class="dropdown arrow-top arrow-left __hide">
  <ul class="no-style list dropdown-list">
    <li class="item item-dropdown">
      <a class="link">Some text</a>
    </li>
    <li class="item item-dropdown dropdown-prevent-toggle">
      <a class="link">Nothing will happen</a>
    </li>
  </ul>
</div>

<br>
<hr>
<br>

<div class="dropdown-wrapper">
  <button class="button blue medium" onclick="return window.App.Dropdown(this, '.dd-2');">
    Toggle Dropdown
  </button>
  <br>
  <div class="dd-2 dropdown arrow-top arrow-left __hide">
    <ul class="no-style list dropdown-list">
      <li class="item item-dropdown active">
        <a class="item-content link no-decorations">
          <span class="icon-wrapper"><i class="icon bubble icon-tune bg-blue-g text-white"></i></span>
          <span class="text">Some text</span>
        </a>
      </li>
      <li class="item item-dropdown dropdown-prevent-toggle">
        <a class="item-content link no-decorations">Nothing will happen</a>
      </li>
    </ul>
  </div>
</div>

CSS

body {
  padding: 50px;
}

JavaScript

/*

q(selector);
isElement(obj);
viewportHeight();
toggleCls(elemSelector, classToToggle);
toggleClassArr(elemSelector, classToToggle);
toggleWrapperCrop();
toggleNavigation(); *mobile only*
*/

//test internet connection
// function updateIndicator() {
//   console.log(navigator.onLine)
// }

// window.addEventListener('online',  updateIndicator);
// window.addEventListener('offline', updateIndicator);




var App = (function(){

var notificationSound = new Audio('/sounds/notification.mp3');
notificationSound.volume = 0.2;

Event.prototype.kill = function(){
  var e = this;

  e.stopPropagation();
  e.preventDefault();
};

function q(selector){
  return document.querySelector(selector);
};

function elQ(selector){
  return this.querySelector(selector)
}

Element.prototype.q = elQ;

function qa(selector){
  return document.querySelectorAll(selector);
}

function elQa(selector){
  return this.querySelectorAll(selector)
}

Element.prototype.qa = elQa;


function unwrap(){
  var _this = this,
      parent = _this.parentNode;

  while(_this.firstChild){
    parent.insertBefore(_this.firstChild, _this);
  };

  parent.removeChild(_this);
};

Element.prototype.unwrap = unwrap;


function prepend(object, unwrap){
  if(!isElement(object)){
    var div = document.createElement('div');

    div.innerHTML = object;
    this.insertBefore(div, this.childNodes[0]);

    if(unwrap){
      object = div.childNodes;
      div.unwrap();
    } else {
      object = div;
    }

  } else {
    this.insertBefore(object, this.childNodes[0]);
  }

  return object;
};

Element.prototype.prepend = prepend;

function isFn(fn){
  if(fn && typeof(fn) === 'function'){
    return fn
  } else {
    return function(){
      return false
    };
  }
}

function isElement(obj){
  return (
    typeof HTMLElement === "object" ? obj instanceof HTMLElement : //DOM2
    obj && typeof obj === "object" && obj !== null && obj.nodeType === 1 && typeof obj.nodeName==="string"
  );
};

function isHover(id){
 ...