Split logic of NoiseModule into different files

.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

CHANGELOG.md

@@ -0,0 +1,16 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
+and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
+
+## 2.0.0
+### Changed
+- `NoiseModule` class to not use at all `jQuery`
+- `NoiseModule` to seperate UI from class implementation
+### Added
+- Different node classes for each one of the different module node that `NoiseModule` uses
+
+## 1.0.0
+### Added
+- Initial version

README.md

@@ -1,6 +1,4 @@
 # NoiseModule
-A JQuery library for playing with Web Audio API
+A JavaScript library for playing with Web Audio API
 
-you can view a demo [here](https://stolosapo.github.io/NoiseModule/)
-
-or in fileMode demo [here](https://stolosapo.github.io/NoiseModule/index.html?fileMode=true)
+you can view a demo [here](https://stolosapo.github.io/NoiseModule/)

css/noise-module.css

@@ -1,101 +1,81 @@
+body {
+    background-image: url("../img/blueprint-dark.png");
+}
+
+
 .noise-module-container {
 	font-family: 'ProximaNovaRgRegular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 	color: #4c4c4c;
 }
 
-.noise-module {
+.noise-module-node {
 	border-radius: 5px;
 	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
 	margin: 10px;
 	display: inline-block;
-	/*position: absolute;*/
-	position: relative;
+	/* position: absolute; */
+	/* position: relative; */
+    z-index: 9;
 }
 
-.noise-module img.nm-bypass {
-	background: url("../img/bypass_16.png") 0 0 no-repeat;
-	height: 16px;
-	width: 16px;
-	text-indent: -999em;
-	position: absolute;
-	left: 8px;
-	top: 8px;
-	cursor: pointer;
+.noise-module-node header {
+    background-color: #F8F8F8;
+    border-bottom: 1px solid #DBDBDB;
+    /* font-size: 9px; */
+    overflow: hidden;
+    padding: 0em 0.4em 0.1em;
+    cursor: move;
+    z-index: 10;
 }
 
-.noise-module img.nm-reset {
-	background: url("../img/reset_16.png") 0 0 no-repeat;
-	height: 16px;
-	width: 16px;
-	text-indent: -999em;
-	position: absolute;
-	right: 8px;
-	top: 8px;
-	cursor: pointer;
+.noise-module-node header h6 {
+	text-decoration: none;
+	border-radius: 5px 5px 0 0;
+	padding-bottom: 5px;
+	font-size: 11px;
+	margin-top: 8px;
+	margin-bottom: 8px;
+	text-align: center;
+	text-transform: uppercase;
 }
 
-.noise-module .nm-content {
+.noise-module-node section {
 	background: #fff;
 	width: 162px;
 	overflow: hidden;
 	padding: 16px 20px 20px 20px;
 	position: relative;
 }
 
-.noise-module .nm-content-title {
-	text-decoration: none;
-	border-bottom: 1px solid #dbdbdb;
-	border-radius: 5px 5px 0 0;
-	padding-bottom: 5px;
-	font-size: 11px;
-	margin: 0 0 11px;
-	text-align: center;
-	text-transform: uppercase;
-}
-
-.noise-module .nm-content.bypassed .nm-content-title {
-	text-decoration: line-through;
+.noise-module-node section input[type="range"] {
+    -webkit-appearance: none;
+    background-color: #303030;
+    height: 2px;
+    display: block;
+    margin-left: 0px;
+	margin-right: 0px;
+    margin-top: 5px;
+    margin-bottom: 15px;
+    width: 100%;
 }
 
-.nm-slider-info {
+.noise-module-node div.nm-slider-info {
 	font-size: 10px;
 	margin-bottom: 1px;
 	overflow: hidden;
 	padding-bottom: 3.4px;
 	position: relative;
 }
 
-.nm-label {
+.noise-module-node .nm-slider-info span.nm-label {
 	font-size: 10px;
 	display: inline;
 	float: left;
 	text-transform: uppercase;
 	width: 49%;
 }
 
-.nm-label.info {
-	width: 98%;
-}
-
-.nm-label.info.link {
-	cursor: pointer;
-}
-
-.nm-label.nm-list {
-	list-style-type: none;
-	padding: 0px;
-	margin-top: 0px; 
-	margin-bottom: 0px;
-}
-
-.nm-slider-info .nm-label {
-	display: inline;
-	float: left;
-	text-transform: uppercase;
-	width: 49%;
-}
-
-.nm-slider-info .nm-value {
+.noise-module-node .nm-slider-info span.nm-value {
 	display: inline;
 	float: right;
 	font-weight: bold;
@@ -104,51 +84,49 @@
 	width: 49%;
 }
 
-.noise-module .nm-content input[type="range"] {
-    -webkit-appearance: none;
-    background-color: #303030;
-    height: 2px;
-    display: block;
-    margin-left: 0px;
-	margin-right: 0px;
-    margin-top: 5px;
-    margin-bottom: 15px;
-    width: 100%;
-}
-
-.noise-module .nm-content img.nm-play-button {
+.noise-module-node section img.nm-play-button {
 	display: block;
 	margin: 0 auto;
 	height: 48px;
 	width: 48px;
 	cursor: pointer;
 }
 
-.noise-module .nm-content img.nm-play-button.play {
+.noise-module-node section img.nm-play-button.play {
     background-image: url("../img/play_48.png");
 }
 
-.noise-module .nm-content img.nm-play-button.stop {
+.noise-module-node section img.nm-play-button.stop {
     background-image: url("../img/stop_48.png");
 }
 
-.noise-module .nm-content img.nm-play-button.pause {
+.noise-module-node section img.nm-play-button.pause {
     background-image: url("../img/pause_48.png");
 }
 
-.noise-module .nm-content canvas {
+.noise-module-node header img.nm-bypass-button {
+	background: url("../img/bypass_16.png") 0 0 no-repeat;
+	height: 16px;
+	width: 16px;
+	position: relative;
+	left: 8px;
+	top: 8px;
+	cursor: pointer;
+}
+
+.noise-module-node section canvas {
 	background-image: url("../img/blueprint-dark.png");
 	display: inline-block;
 	width: 100%;
 }
 
 
-.noise-module .nm-content .pre-amp input[type="range"],
-.noise-module .nm-content .eq-band input[type="range"] {
+.noise-module-node section .pre-amp input[type="range"],
+.noise-module-node section .eq-band input[type="range"] {
 	/*transform: rotate(90deg);*/
 }
 
-.noise-module footer.nm-footer {
+.noise-module-node footer {
     background-color: #F8F8F8;
     border-top: 1px solid #DBDBDB;
     font-size: 9px;
@@ -157,46 +135,3 @@
     overflow: hidden;
     padding: 0em 0.4em 0.1em;
 }
-
-.noise-module .nm-footer .nm-direction {
-	display: inline;
-	text-transform: lowercase;
-	height: 100%
-}
-
-.noise-module .nm-footer .direction-from {
-	float: left;
-	width: 49%;
-}
-
-.noise-module .nm-footer .direction-to {
-	float: right;
-	text-align: right;
-	width: 49%;
-}
-
-.noise-module .nm-footer img {
-	background-image: url("../img/right_16.png");
-	height: 16px;
-	width: 16px;
-	text-indent: -999em;
-	position: relative;
-	display: inline-block;
-	cursor: pointer;
-} 
-
-.noise-module.begin-out-connection .nm-footer img.icon-to {
-	background-color: red;
-}
-
-.noise-module.begin-in-connection .nm-footer img.icon-from {
-	background-color: green;
-}
-
-.noise-module .nm-footer .nm-direction .nm-list {
-	list-style-type: none;
-	padding: 0px;
-	margin-top: 0px; 
-	margin-bottom: 0px;
-	position: relative;
-}