Spectacle Action Prototypes

Action forms for various boards

by Nicholas Poole

HTML

<div style="text-align:center;">
  <hr>
  <h2>button actions</h2>
  <hr>

  <!--button action: trigger on press-->
  <div class="action">
    <h3 style="background-color: black; color: white;">
action: trigger on press <a href="javascript:void(0);" class="deleteaction" style="position: relative; top: -2px; text-decoration: none; color: white;">&#10005;</a>
</h3>
    <strong style="font-size: 110%;">when button number</strong>
    <input class="number max-eight" type="number" value="0">
    <strong style="font-size: 110%;">is pressed</strong>
    <br/>
    <strong style="font-size: 110%;">trigger channel number</strong>
    <input class="number max-ninety-nine" type="number" value="0">
  </div>

  <!--button action: trigger on release-->
  <div class="action">
    <h3 style="background-color: black; color: white;">
action: trigger on release<a href="javascript:void(0);" class="deleteaction" style="position: relative; top: -2px; text-decoration: none; color: white; float:right;">&#10005;</a>
</h3>
    <strong style="font-size: 110%;">when button number</strong>
    <input class="number" type="number" value="0">
    <strong style="font-size: 110%;">is released</strong>
    <br/>
    <strong style="font-size: 110%;">trigger channel number</strong>
    <input class="number" type="number" value="0">
  </div>

  <!--button action: trigger on press + release-->
  <div class="action">
    <h3 style="background-color: black; color: white;">
action: trigger on press + release<a href="javascript:void(0);" class="deleteaction" style="position: relative; top: -2px; text-decoration: none; color: white; float:right;">&#10005;</a>
</h3>
    <strong style="font-size: 110%;">when button number</strong>
    <input class="number" type="number" value="0">
    <strong style="font-size: 110%;">is either</strong>
    <br/>
    <div style="position: block; height: 20px;">
      <strong style="font-size: 110%; position: relative; top: 0px;"> pressed or released</strong>
    </div>
   ...

CSS

body {
  font-family: 'Noto Sans', sans-serif;
  margin: 0;
  width: 100%;
  height: 100vh;
  color: #1c2727;
  background-color: #ffe680;
}

.project-text {
  width: 80%;
  border: 0px;
  background-color: rgba(255, 255, 255, 0);
  resize: none;
  overflow: hidden;
}

header {
  width: 100%;
  position: fixed;
  background: #1c2727;
  height: 50px;
  line-height: 60px;
  z-index: 100000;
}

.logo {
  position: relative;
}

.hamburger {
  background: none;
  position: absolute;
  top: 0px;
  right: 100;
  line-height: 45px;
  padding: 5px 15px 0px 15px;
  color: #fff;
  border: 0;
  font-size: 1.4em;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  z-index: 10000000000000;
}

.cross {
  background: none;
  position: absolute;
  top: 0px;
  right: 100;
  padding: 13px 15px 0px 15px;
  color: #fff;
  border: 0;
  font-size: 3em;
  line-height: 65px;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  z-index: 10000000000000;
}

.menu {
  z-index: 1000000;
  font-weight: bold;
  font-size: 0.8em;
  top: 50px;
  width: 100%;
  background: #131313;
  position: fixed;
  text-align: center;
}

.menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  list-style-image: none;
}

.menu li {
  display: block;
  padding: 15px 0 15px 0;
  border-bottom: #1d1f20 1px solid;
}

.menu li:hover {
  display: block;
  background: #181818;
  padding: 15px 0 15px 0;
  border-bottom: #1d1f20 1px solid;
}

.menu ul li a {
  text-decoration: none;
  margin: 0px;
  color: #fff;
}

.menu ul li a:hover {
  color: #fff;
  text-decoration: none;
}

.menu a {
  text-decoration: none;
  color: white;
}

.menu a:hover {
  text-decoration: none;
  color: white;
}

.module-list {
  position: fixed;
  z-index: 10000;
  font-weight: bold;
  font-size: 0.8em;
  top: 50px;
  width: 100%;
  height: 85%;
  background: #ffffff;
  text-align: center;
}

.glyphicon-home {
  color: white;
  font-size: 1.5em;
  margin-top: 5px;
  margin: 0 auto;
}

.project-name-block {
  cursor:...

JavaScript

$(document).on("click", ".deleteaction", function() {
$(this).closest(".action").remove();
});

$(document).on("change", ".range", function() {
  $(this).attr("value", $(this).val());
});

$(document).on("change", ".number", function() {
  $(this).attr("value", $(this).val());
});

$(document).on("change", ".color", function() {
  console.log($(this).val());
  $(this).parent().css("background-color", $(this).val());
});

$(".number").val(null);

$(document).on("keyup", ".max-eight", function() {
  if (parseInt($(this).val(), 10) > 8) {
    $(this).val(null);
  }
  console.log($(this).val());
});

$(document).on("keyup", ".max-ninety-nine", function() {
  if (parseInt($(this).val(), 10) > 99) {
    $(this).val(null);
  }
  console.log($(this).val());
});

// Disable scroll when focused on a number input.
$('form').on('focus', 'input[type=number]', function(e) {
  $(this).on('wheel', function(e) {
    e.preventDefault();
  });
});

// Restore scroll on number inputs.
$('form').on('blur', 'input[type=number]', function(e) {
  $(this).off('wheel');
});

// Disable up and down keys.
$('form').on('keydown', 'input[type=number]', function(e) {
  if (e.which == 38 || e.which == 40) {
    e.preventDefault();
  }
});

$(document).on("click", ".checkbox", function() {
  if ($(this).parent().css("text-indent") == "-9999px") {
    $(this).parent().css("text-indent", "-8888px");
    $(this).parent().css("background-image", "none");
    $(this).prop('checked', false);
  } else {
    $(this).parent().css("text-indent", "-9999px");
    $(this).parent().css("background-image",...