Umbrella JS

Sandbox for Umbrella JS

by Gwyn Milcote

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/umbrella.min.js"></script>
umbrella test. <button class="click">c</button><button class="click">c</button><button class="click">c</button> aaaaaa<br>

<br><button id='show'>show</button> <button id='hide'>hide</button> 
<button id='fadein'>fadein</button> <button id='fadeout'>fadeout</button>
<button id='css1'>css1</button> <button id='css2'>css2</button><button id='css3'>css3</button>
<br><button id='animate1'>animate1</button><button id='animate2'>animate2</button>
<br>
<button class='move' data-x='0' data-y='-1'>North</button>
<button class='move' data-x='0' data-y='1'>South</button>
<button class='move' data-x='1' data-y='0'>East</button>
<button class='move' data-x='-1' data-y='0'>West</button>
<button class='move' data-x='1' data-y='-1'>N East</button>
<button class='move' data-x='-1' data-y='-1'>N West</button>
<button class='move' data-x='1' data-y='1'>S East</button>
<button class='move' data-x='-1' data-y='1'>S West</button>

<hr>

<div id='move-container'>
    <div id='movable'></div>
</div>


<form method="POST" action="/echo/json/">
  <input name="name" placeholder="Your Name">
  <select>
    <option>Cheese</option>
    <option>Ham</option>
    <option>Tomato</option>
  </select>
  <label>
    <input id="checkable" type="checkbox">
    <span class="checkable">Check me out (;</span>
  </label><br>
  <input type="submit" value="Send it!">
</form>

<pre>
_________
log
</pre>

CSS

#move-container {
    position: relative;
    border: 1px solid grey;
    background-color: silver;
    width: 300px;
    height: 300px;
}
#movable {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 150px;
    left: 150px;
    background-color: green;
}

JavaScript

/*
* Some extra functions added to UmbrellaJS.
* Use them just like in jQuery.
* u("#some_id, .some_class").fadeOut(200);
* u(".class").css({"color": "#ffcc33", "font-size": "20px"});
*/

u.prototype.fadeIn = function(speed){
  return this.each(function(node){
    if(node.style.display != "none"){
        return;
    }
	node.style.opacity = 0;
    node.style.display = "block";
	let interval = setInterval(function(){
		node.style.opacity = Number(node.style.opacity)+0.04;
		if(node.style.opacity >= 1){
			clearInterval(interval);
        }
	}, speed/50);
  });
};
u.prototype.fadeOut = function(speed){
  return this.each(function(node){
    if(node.style.display == "none"){
        return;
    }
	if(!node.style.opacity){
		node.style.opacity = 1;
	}
	let interval = setInterval(function(){
		node.style.opacity -= 0.04;
		if(node.style.opacity <= 0){
			clearInterval(interval);
            node.style.display = "none";
            node.style.opacity = 1;
		}
	}, speed/50);
  });
};
u.prototype.show = function(){
  return this.each(function(node){
    node.style.display = 'block';
  });
};
u.prototype.hide = function(){
  return this.each(function(node){
    node.style.display = 'none';
  });
};
u.prototype.css = function(name, value){
  return this.pairs(name, value, function(node, name){
    return node.style[name];
  }, function(node, name, value){
    node.style[name] = value;
  });
};

u.prototype.animate = function(style,time){
  return this.each(function(node){
    node.animate(style, {duration: time, easing: "ease-in-out"})
    .onfinish = function(){
        for(let key in style){
            node.style[key] = style[key];
        }
     };
  });
};



/*
* A new u() is always created, even if an
* element doesn't exist on the page (yet).
* I'd rather it returned false if not found.
*
* So use exists("#id") or exists(".class")
* to get 'false' or a new u().
*/
function getU(selector){
  let element = document.querySelector(selector);
  if(element){
      return...