Tone.js/examples/scripts/Notone.GUI.js

!function(n,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("jQuery")):"function"==typeof define&&define.amd?define(["jQuery"],e):"object"==typeof exports?exports.Notone=e(require("jQuery")):n.Notone=e(n.jQuery)}(this,function(__WEBPACK_EXTERNAL_MODULE_2__){return function(n){function e(i){if(t[i])return t[i].exports;var o=t[i]={exports:{},id:i,loaded:!1};return n[i].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var t={};return e.m=n,e.c=t,e.p="",e(0)}([function(module,exports,__webpack_require__){eval('var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(2), __webpack_require__(7), __webpack_require__(1), __webpack_require__(13), __webpack_require__(12), __webpack_require__(14)], __WEBPACK_AMD_DEFINE_RESULT__ = function ($, Core, Util, GUI, Drawer, Meter) {\n\n	var Notone = {};\n\n	/**\n	 *  the drawer if it exists\n	 */\n	Notone.drawer = null;\n\n	/**\n	 *  all of the GUIs\n	 *  @type  {Object}\n	 */\n	Notone.guis = {};\n\n	/**\n	 *  the default configutation \n	 *  @type  {Object}\n	 *  @private\n	 */\n	Notone._defaultConfig = {\n		"expandInDrawer" : false,\n		"expandChildren" : false,\n		"hideDrawer" : false,\n		"search" : false,\n		"drawer" : true,\n		"container" : "body",\n	};\n\n	/**\n	 *  the configured options\n	 *  @private\n	 */\n	Notone._options = {};\n\n	/**\n	 *  configuration\n	 *  @param  {Object}  obj \n	 */\n	Notone.config = function(obj){\n		Core.config(obj);\n		Notone._options = Util.defaultArg(obj, Notone._defaultConfig);\n	};\n\n	/**\n	 *  Create a new Tone object of the Constructor type\n	 *  automatically adds it to the tracked objects\n	 *  with the given name (or the class\' name)\n	 *  if no name is given.\n	 *  @param  {function}  Constr\n	 *  @param  {string=}  name\n	 *  @return  {Object}  an instance of the constructor\n	 */\n	Notone.create = function(Constr, name, parameters){\n		var tone = new Constr();\n		Notone.add(tone, name, parameters);\n		return tone;\n	};\n\n	/**\n	 *  Adds an insteance of a tone object to the list of tracked\n	 *  objects\n	 *  @param  {Tone}  tone  the tone object to track\n	 *  @param  {string=}  name  the name the object should be remembered as.\n	 */\n	Notone.add = function(tone, name, parameters){\n		Core.add(tone, name, parameters);\n\n		//get the description\n		var GUIConstr = GUI;\n		if (tone.toString() === "Meter"){\n			GUIConstr = Meter;\n		} \n		var gui = new GUIConstr(tone, {\n			"name" : name,\n			"container" : Notone._options.container,\n			"parameters" : parameters,\n			"expanded" : Notone._options.expandChildren,\n		});\n\n		if (Notone._options.drawer){\n			if (Notone.drawer === null){\n				Notone.drawer = new Drawer(Notone._options);\n			}\n			Notone.drawer.add(gui);\n		}\n		Notone.guis[name] = gui;\n		return gui;\n	};\n\n	/**\n	 *  set the attributes from a JSON object\n	 *  @param  {JSON}  json  \n	 */\n	Notone.load = function(json){\n		Core.load(json);\n	};\n\n	/**\n	 *  Save the current configuration to local storage\n	 *  or a file.\n	 */\n	Notone.save = function(){\n		Core.save();\n	};\n\n	/**\n	 *  get the GUI object from the name\n	 *  @param {string} name\n	 */\n	Notone.get = function(name){\n		return Notone.guis[name];\n	};\n\n	return Notone;\n}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));\n\n/*****************\n ** WEBPACK FOOTER\n ** ./GUI/Main.js\n ** module id = 0\n ** module chunks = 0\n **/\n//# sourceURL=webpack:///./GUI/Main.js?')},function(module,exports,__webpack_require__){eval('var __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_RESULT__ = function () {\n\n	var Util = {};\n\n	//borrowed from underscore.js\n	Util.isUndef = function(val){\n		return val === void 0;\n	};\n\n	Util.isFunction = function(val){\n		return typeof val === "function";\n	};\n\n	Util.isObject = function(val){\n		return typeof val === "object";\n	};\n\n	Util.isArray = function(val){\n		return Array.isArray(val);\n	};\n\n	Util.isString = function(val){\n		
},function(module,exports,__webpack_require__){eval('var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(2), __webpack_require__(27)], __WEBPACK_AMD_DEFINE_RESULT__ = function ($) {\n	\n	var Drawer = function(options){\n\n		this.element = $("<div>", {\n			"id" : "NotoneDrawer"\n		}).appendTo(options.container);\n\n		/**\n		 *  the search bar\n		 */\n		this.search = $("<div>", {\n			"id" : "Search"\n		}).appendTo(this.element);\n\n		this.searchText = $("<input>", {\n			"type" : "text"\n		}).appendTo(this.search)\n			.on("input", this.filter.bind(this));\n\n		this.clearButton = $("<div>", {\n			"id" : "Clear"\n		}).appendTo(this.search).text("\\u2715")\n			.on("click touchstart", this.clearSearch.bind(this));\n\n		/**\n		 *  little indicator to open the drawer\n		 *  @type  {[type]}\n		 */\n		this.openText = $("<div>", {\n			"id" : "OpenText",\n		}).appendTo(this.element)\n			.on("click", this.toggleOpen.bind(this));\n\n		/**\n		 *  the container of all the tones\n		 */\n		this.tonesContainer = $("<div>", {\n			"id" : "Tones"\n		}).appendTo(this.element);\n\n		/**\n		 *  the tone objects in the drawer\n		 */\n		this.tones = {};\n\n		/**\n		 *  if the added elements are expanded\n		 */\n		this.expanded = options.expandInDrawer;\n\n		/**\n		 *  the search box config\n		 */\n		if (!options.hideDrawer){\n			this.element.addClass("Expanded");\n		} \n		/**\n		 *  the search box config\n		 */\n		if (options.search){\n			this.search.addClass("Visible");\n		}\n	};\n\n	Drawer.prototype.add = function(gui){\n		if (this.expanded){\n			this.tonesContainer.append(gui.element);\n		} else {\n			this.tonesContainer.append(gui.openButton);\n			gui.draggable();\n			gui.close();\n		}\n		this.tones[gui.name] = gui;\n	};\n\n	Drawer.prototype.toggleOpen = function(e){\n		e.preventDefault();\n		this.element.toggleClass("Expanded");\n	};\n\n	Drawer.prototype.filter = function(){\n		var find = this.searchText.val().toLowerCase();\n		for (var name in this.tones){\n			var gui = this.tones[name];\n			var element = gui.element;\n			if (!this.expanded){\n				element = gui.openButton;\n			}\n			if (name.toLowerCase().indexOf(find) !== -1){\n				element.css("display", "inherit");\n			} else {\n				element.css("display", "none");\n			}\n		}\n	};\n\n	Drawer.prototype.clearSearch = function(e){\n		e.preventDefault();\n		this.searchText.val("");\n		this.filter();\n	};\n\n	return Drawer;\n}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));\n\n/*****************\n ** WEBPACK FOOTER\n ** ./GUI/Drawer.js\n ** module id = 12\n ** module chunks = 0\n **/\n//# sourceURL=webpack:///./GUI/Drawer.js?')},function(module,exports,__webpack_require__){eval('var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(10), __webpack_require__(1), __webpack_require__(16), __webpack_require__(20), \n	__webpack_require__(28), __webpack_require__(25), __webpack_require__(11)], __WEBPACK_AMD_DEFINE_RESULT__ = function (MicroEvent, Util, Parameter, Draggable, mainStyle, members, requestAnimationFrame) {\n\n	var zIndex = 1;\n\n	var GUI = function(tone, options){\n\n		this.givenParameters = options.parameters;\n\n		//defaults\n		options = Util.defaultArg(options, {\n			"container" : $("body"),\n			"parameters" : Object.keys(tone.get()),\n			"name" : tone.toString(),\n		});\n\n		/**\n		 *  the name\n		 */\n		this.name = options.name;\n\n		/**\n		 *  the tone object\n		 *  @type  {Tone}\n		 *  @private\n		 */\n		this._tone = tone;\n\n		/**\n		 *  the parameters\n		 *  @type  {Object}\n		 */\n		this.params = {};\n\n		/**\n		 *  this element\n		 */\n		this.element = $("<div>").addClass("Notone").appendTo(options.container)\n			.prop("id", options.name);\n\n		/**\n		 *  the container\n		 */\n		this.container = $(options.container);\n\n		/**\n		 *  the title\n		 */\n		this.title = $("<div>").prop("id", "Title").text(this.name)\n			.appendTo(this.element);\n\n		/**\n		 *  th
},function(module,exports,__webpack_require__){eval('exports = module.exports = __webpack_require__(4)();\nexports.push([module.id, "#NotoneDrawer{top:0;left:0;position:absolute;width:2px;height:auto;background-color:#fff;border-color:#000;border-style:solid;border-width:0 25px 2px 0;-webkit-transition:width .15s;transition:width .15s}#NotoneDrawer #OpenButton,#NotoneDrawer #Search{width:calc(100% - 4px);border-style:solid;border-color:#000;margin-bottom:2px;margin-left:2px}#NotoneDrawer #OpenButton,#NotoneDrawer #Search,#NotoneDrawer .Notone{opacity:0;-webkit-transition:opacity .15s;transition:opacity .15s}#NotoneDrawer .Notone{position:relative}#NotoneDrawer #OpenButton{cursor:pointer;height:25px;line-height:25px;background-color:#fff;border-width:2px 0 0 2px;font-family:monospace;text-align:center}#NotoneDrawer #OpenButton:hover{border-width:0 2px 2px 0}#NotoneDrawer #Search{display:none;overflow:hidden;border-width:2px 0 2px 2px;height:21px}#NotoneDrawer #Search input{font-family:inherit;width:calc(100% - 10px);padding-left:10px;height:calc(100% - 2px);-webkit-appearance:none;-moz-appearance:none;appearance:none;border-width:0}#NotoneDrawer #Search #Clear{width:16.8px;height:16.8px;position:absolute;right:2.2px;top:4.2px;background-color:#000;color:#fff;text-align:center;cursor:pointer;line-height:16.8px}#NotoneDrawer #Search #Clear:hover{background-color:#ECECEC;color:#000}#NotoneDrawer #Search #Clear:hover:active{background-color:#fff;color:#000}#NotoneDrawer #Search.Visible{display:inherit}#NotoneDrawer #OpenText{position:absolute;right:-25px;width:25px;top:0;height:100%;line-height:25px;cursor:pointer}#NotoneDrawer #OpenText:before{color:#ECECEC;text-align:center;-webkit-transform:translate(0,-50%)rotate(-90deg);-ms-transform:translate(0,-50%)rotate(-90deg);transform:translate(0,-50%)rotate(-90deg);top:50%;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%;content:\\"OPEN\\";font-family:monospace;right:-2px;position:absolute;height:25px;line-height:25px;-webkit-transition:opacity .15s;transition:opacity .15s}#NotoneDrawer #Tones{overflow:hidden}#NotoneDrawer.Expanded{width:244px;padding-left:2px;padding-right:2px}#NotoneDrawer.Expanded #OpenText:before{opacity:0}#NotoneDrawer.Expanded #OpenButton,#NotoneDrawer.Expanded #Search,#NotoneDrawer.Expanded .Notone{opacity:1}#OpenButton.Expanded{color:#aaa!important}#OpenButton:hover:active{border-color:#aaa!important}", ""]);\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/css-loader!./~/autoprefixer-loader!./~/sass-loader!./style/drawer.scss\n ** module id = 21\n ** module chunks = 0\n **/\n//# sourceURL=webpack:///./style/drawer.scss?./~/css-loader!./~/autoprefixer-loader!./~/sass-loader')},function(module,exports,__webpack_require__){eval('exports = module.exports = __webpack_require__(4)();\nexports.push([module.id, ".Notone,.Notone #OpenButton{border-style:solid;font-family:monospace}.Notone #OpenButton,.Notone .Notone{margin-left:2px;border-color:#000;box-sizing:border-box}.Notone{margin-bottom:2px;width:240px;background-color:#fff;border-color:#000;border-width:2px 0 0 10px;font-size:11px;position:absolute}.Notone #Title{position:relative;width:100%;text-align:center;height:25px;line-height:25px;font-size:1.2em}.Notone #Title #Listen{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;position:absolute;height:25px;width:12px;right:0;top:0;border-width:0}.Notone #Title #Listen:active{background-color:#00f}.Notone #Title #Close{width:23px;height:23px;position:absolute;left:2px;top:2px;background-color:#000;color:#fff;text-align:center;cursor:pointer;line-height:23px}.Notone #Title #Close:hover{background-color:#3833ED;color:#fff}.Notone #Title #Close:hover:active{background-color:#ED33CF;color:#22DBC0}.Notone #OpenButton,.Notone .Notone #Title{color:#000;margin-top:2px;height:25px;line-height:25px}.Notone #OpenButton{cursor:pointer;width:calc(100% - $innerOffset);text-align:center;border-width:4px 0 0 4px}.Notone #OpenButton:hover{border-width:0 4px 4px 0}.Notone .Notone{width:calc(100% - 2px);margin-top:2px;border-wi
},function(module,exports,__webpack_require__){eval('module.exports = {\n	"Time": {\n		"description": "Time can be described in a number of ways. Read more <a href=\\"https://github.com/TONEnoTONE/Tone.js/wiki/Time\\">here</a>.\\n\\n <ul>\\n <li>Numbers, which will be taken literally as the time (in seconds).</li>\\n <li>Notation, (\\"4n\\", \\"8t\\") describes time in BPM and time signature relative values.</li>\\n <li>TransportTime, (\\"4:3:2\\") will also provide tempo and time signature relative times \\n in the form BARS:QUARTERS:SIXTEENTHS.</li>\\n <li>Frequency, (\\"8hz\\") is converted to the length of the cycle in seconds.</li>\\n <li>Now-Relative, (\\"+1\\") prefix any of the above with \\"+\\" and it will be interpreted as \\n \\"the current time plus whatever expression follows\\".</li>\\n <li>Expressions, (\\"3:0 + 2 - (1m / 7)\\") any of the above can also be combined \\n into a mathematical expression which will be evaluated to compute the desired time.</li>\\n <li>No Argument, for methods which accept time, no argument will be interpreted as \\n \\"now\\" (i.e. the currentTime).</li>\\n </ul>",\n		"name": "Time",\n		"value": "time"\n	},\n	"Frequency": {\n		"description": "Frequency can be described similar to time, except ultimately the\\n values are converted to frequency instead of seconds. A number\\n is taken literally as the value in hertz. Additionally any of the \\n Time encodings can be used. Note names in the form\\n of NOTE OCTAVE (i.e. C4) are also accepted and converted to their\\n frequency value.",\n		"name": "Frequency",\n		"value": "frequency"\n	},\n	"Gain": {\n		"description": "Gain is the ratio between the input and the output value of a signal.",\n		"name": "Gain",\n		"value": "gain"\n	},\n	"NormalRange": {\n		"description": "Normal values are within the range [0, 1].",\n		"name": "NormalRange",\n		"value": "normalrange"\n	},\n	"AudioRange": {\n		"description": "AudioRange values are between [-1, 1].",\n		"name": "AudioRange",\n		"value": "audiorange"\n	},\n	"Decibels": {\n		"description": "Decibels are a logarithmic unit of measurement which is useful for volume\\n because of the logarithmic way that we perceive loudness. 0 decibels \\n means no change in volume. -10db is approximately half as loud and 10db \\n is twice is loud.",\n		"name": "Decibels",\n		"value": "db"\n	},\n	"Interval": {\n		"description": "Half-step note increments, i.e. 12 is an octave above the root. and 1 is a half-step up.",\n		"name": "Interval",\n		"value": "interval"\n	},\n	"BPM": {\n		"description": "Beats per minute.",\n		"name": "BPM",\n		"value": "bpm"\n	},\n	"Positive": {\n		"description": "The value must be greater than 0.",\n		"name": "Positive",\n		"value": "positive"\n	},\n	"Cents": {\n		"description": "A cent is a hundredth of a semitone.",\n		"name": "Cents",\n		"value": "cents"\n	},\n	"Degrees": {\n		"description": "Angle between 0 and 360.",\n		"name": "Degrees",\n		"value": "degrees"\n	},\n	"MIDI": {\n		"description": "A number representing a midi note.",\n		"name": "MIDI",\n		"value": "midi"\n	},\n	"TransportTime": {\n		"description": "A colon-separated representation of time in the form of\\n BARS:QUARTERS:SIXTEENTHS.",\n		"name": "TransportTime",\n		"value": "transporttime"\n	}\n}\n\n/*****************\n ** WEBPACK FOOTER\n ** ../Tonejs.org/docgen/description/types.json\n ** module id = 26\n ** module chunks = 0\n **/\n//# sourceURL=webpack:///../Tonejs.org/docgen/description/types.json?')},function(module,exports,__webpack_require__){eval("// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = __webpack_require__(21);\nif(typeof content === 'string') content = [[module.id, content, '']];\n// add the styles to the DOM\nvar update = __webpack_require__(5)(content, {});\nif(content.locals) module.exports = content.locals;\n// Hot Module Replacement\nif(false) {\n	// When the styles change, update the <style> tags\n	if(!content.locals) {\n		module.hot.accept(\"!!./../node_modules/css-loader/index.js!./../node_modules/autoprefixer-loader/index.js!.
adding Notone.GUI to examples 2015-07-04 18:43:17 +00:00			!function(n,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("jQuery")):"function"==typeof define&&define.amd?define(["jQuery"],e):"object"==typeof exports?exports.Notone=e(require("jQuery")):n.Notone=e(n.jQuery)}(this,function(__WEBPACK_EXTERNAL_MODULE_2__){return function(n){function e(i){if(t[i])return t[i].exports;var o=t[i]={exports:{},id:i,loaded:!1};return n[i].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var t={};return e.m=n,e.c=t,e.p="",e(0)}([function(module,exports,__webpack_require__){eval('var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(2), __webpack_require__(7), __webpack_require__(1), __webpack_require__(13), __webpack_require__(12), __webpack_require__(14)], __WEBPACK_AMD_DEFINE_RESULT__ = function ($, Core, Util, GUI, Drawer, Meter) {\n\n var Notone = {};\n\n /*\n the drawer if it exists\n /\n Notone.drawer = null;\n\n /\n all of the GUIs\n * @type {Object}\n /\n Notone.guis = {};\n\n /\n the default configutation \n * @type {Object}\n * @private\n /\n Notone._defaultConfig = {\n "expandInDrawer" : false,\n "expandChildren" : false,\n "hideDrawer" : false,\n "search" : false,\n "drawer" : true,\n "container" : "body",\n };\n\n /\n the configured options\n * @private\n /\n Notone._options = {};\n\n /\n configuration\n * @param {Object} obj \n /\n Notone.config = function(obj){\n Core.config(obj);\n Notone._options = Util.defaultArg(obj, Notone._defaultConfig);\n };\n\n /\n Create a new Tone object of the Constructor type\n * automatically adds it to the tracked objects\n * with the given name (or the class\' name)\n * if no name is given.\n * @param {function} Constr\n * @param {string=} name\n * @return {Object} an instance of the constructor\n /\n Notone.create = function(Constr, name, parameters){\n var tone = new Constr();\n Notone.add(tone, name, parameters);\n return tone;\n };\n\n /\n Adds an insteance of a tone object to the list of tracked\n * objects\n * @param {Tone} tone the tone object to track\n * @param {string=} name the name the object should be remembered as.\n /\n Notone.add = function(tone, name, parameters){\n Core.add(tone, name, parameters);\n\n //get the description\n var GUIConstr = GUI;\n if (tone.toString() === "Meter"){\n GUIConstr = Meter;\n } \n var gui = new GUIConstr(tone, {\n "name" : name,\n "container" : Notone._options.container,\n "parameters" : parameters,\n "expanded" : Notone._options.expandChildren,\n });\n\n if (Notone._options.drawer){\n if (Notone.drawer === null){\n Notone.drawer = new Drawer(Notone._options);\n }\n Notone.drawer.add(gui);\n }\n Notone.guis[name] = gui;\n return gui;\n };\n\n /\n set the attributes from a JSON object\n * @param {JSON} json \n /\n Notone.load = function(json){\n Core.load(json);\n };\n\n /\n Save the current configuration to local storage\n * or a file.\n /\n Notone.save = function(){\n Core.save();\n };\n\n /\n get the GUI object from the name\n * @param {string} name\n /\n Notone.get = function(name){\n return Notone.guis[name];\n };\n\n return Notone;\n}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));\n\n/**************\n WEBPACK FOOTER\n ./GUI/Main.js\n module id = 0\n module chunks = 0\n /\n//# sourceURL=webpack:///./GUI/Main.js?')},function(module,exports,__webpack_require__){eval('var __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_RESULT__ = function () {\n\n var Util = {};\n\n //borrowed from underscore.js\n Util.isUndef = function(val){\n return val === void 0;\n };\n\n Util.isFunction = function(val){\n return typeof val === "function";\n };\n\n Util.isObject = function(val){\n return typeof val === "object";\n };\n\n Util.isArray = function(val){\n return Array.isArray(val);\n };\n\n Util.isString = function(val){\n
			},function(module,exports,__webpack_require__){eval('var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(2), __webpack_require__(27)], __WEBPACK_AMD_DEFINE_RESULT__ = function ($) {\n \n var Drawer = function(options){\n\n this.element = $("<div>", {\n "id" : "NotoneDrawer"\n }).appendTo(options.container);\n\n /*\n the search bar\n /\n this.search = $("<div>", {\n "id" : "Search"\n }).appendTo(this.element);\n\n this.searchText = $("<input>", {\n "type" : "text"\n }).appendTo(this.search)\n .on("input", this.filter.bind(this));\n\n this.clearButton = $("<div>", {\n "id" : "Clear"\n }).appendTo(this.search).text("\\u2715")\n .on("click touchstart", this.clearSearch.bind(this));\n\n /\n little indicator to open the drawer\n * @type {[type]}\n /\n this.openText = $("<div>", {\n "id" : "OpenText",\n }).appendTo(this.element)\n .on("click", this.toggleOpen.bind(this));\n\n /\n the container of all the tones\n /\n this.tonesContainer = $("<div>", {\n "id" : "Tones"\n }).appendTo(this.element);\n\n /\n the tone objects in the drawer\n /\n this.tones = {};\n\n /\n if the added elements are expanded\n /\n this.expanded = options.expandInDrawer;\n\n /\n the search box config\n /\n if (!options.hideDrawer){\n this.element.addClass("Expanded");\n } \n /\n the search box config\n /\n if (options.search){\n this.search.addClass("Visible");\n }\n };\n\n Drawer.prototype.add = function(gui){\n if (this.expanded){\n this.tonesContainer.append(gui.element);\n } else {\n this.tonesContainer.append(gui.openButton);\n gui.draggable();\n gui.close();\n }\n this.tones[gui.name] = gui;\n };\n\n Drawer.prototype.toggleOpen = function(e){\n e.preventDefault();\n this.element.toggleClass("Expanded");\n };\n\n Drawer.prototype.filter = function(){\n var find = this.searchText.val().toLowerCase();\n for (var name in this.tones){\n var gui = this.tones[name];\n var element = gui.element;\n if (!this.expanded){\n element = gui.openButton;\n }\n if (name.toLowerCase().indexOf(find) !== -1){\n element.css("display", "inherit");\n } else {\n element.css("display", "none");\n }\n }\n };\n\n Drawer.prototype.clearSearch = function(e){\n e.preventDefault();\n this.searchText.val("");\n this.filter();\n };\n\n return Drawer;\n}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));\n\n/**************\n WEBPACK FOOTER\n ./GUI/Drawer.js\n module id = 12\n module chunks = 0\n /\n//# sourceURL=webpack:///./GUI/Drawer.js?')},function(module,exports,__webpack_require__){eval('var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(10), __webpack_require__(1), __webpack_require__(16), __webpack_require__(20), \n __webpack_require__(28), __webpack_require__(25), __webpack_require__(11)], __WEBPACK_AMD_DEFINE_RESULT__ = function (MicroEvent, Util, Parameter, Draggable, mainStyle, members, requestAnimationFrame) {\n\n var zIndex = 1;\n\n var GUI = function(tone, options){\n\n this.givenParameters = options.parameters;\n\n //defaults\n options = Util.defaultArg(options, {\n "container" : $("body"),\n "parameters" : Object.keys(tone.get()),\n "name" : tone.toString(),\n });\n\n /*\n the name\n /\n this.name = options.name;\n\n /\n the tone object\n * @type {Tone}\n * @private\n /\n this._tone = tone;\n\n /\n the parameters\n * @type {Object}\n /\n this.params = {};\n\n /\n this element\n /\n this.element = $("<div>").addClass("Notone").appendTo(options.container)\n .prop("id", options.name);\n\n /\n the container\n /\n this.container = $(options.container);\n\n /\n the title\n /\n this.title = $("<div>").prop("id", "Title").text(this.name)\n .appendTo(this.element);\n\n /\n th
			},function(module,exports,__webpack_require__){eval('exports = module.exports = __webpack_require__(4)();\nexports.push([module.id, "#NotoneDrawer{top:0;left:0;position:absolute;width:2px;height:auto;background-color:#fff;border-color:#000;border-style:solid;border-width:0 25px 2px 0;-webkit-transition:width .15s;transition:width .15s}#NotoneDrawer #OpenButton,#NotoneDrawer #Search{width:calc(100% - 4px);border-style:solid;border-color:#000;margin-bottom:2px;margin-left:2px}#NotoneDrawer #OpenButton,#NotoneDrawer #Search,#NotoneDrawer .Notone{opacity:0;-webkit-transition:opacity .15s;transition:opacity .15s}#NotoneDrawer .Notone{position:relative}#NotoneDrawer #OpenButton{cursor:pointer;height:25px;line-height:25px;background-color:#fff;border-width:2px 0 0 2px;font-family:monospace;text-align:center}#NotoneDrawer #OpenButton:hover{border-width:0 2px 2px 0}#NotoneDrawer #Search{display:none;overflow:hidden;border-width:2px 0 2px 2px;height:21px}#NotoneDrawer #Search input{font-family:inherit;width:calc(100% - 10px);padding-left:10px;height:calc(100% - 2px);-webkit-appearance:none;-moz-appearance:none;appearance:none;border-width:0}#NotoneDrawer #Search #Clear{width:16.8px;height:16.8px;position:absolute;right:2.2px;top:4.2px;background-color:#000;color:#fff;text-align:center;cursor:pointer;line-height:16.8px}#NotoneDrawer #Search #Clear:hover{background-color:#ECECEC;color:#000}#NotoneDrawer #Search #Clear:hover:active{background-color:#fff;color:#000}#NotoneDrawer #Search.Visible{display:inherit}#NotoneDrawer #OpenText{position:absolute;right:-25px;width:25px;top:0;height:100%;line-height:25px;cursor:pointer}#NotoneDrawer #OpenText:before{color:#ECECEC;text-align:center;-webkit-transform:translate(0,-50%)rotate(-90deg);-ms-transform:translate(0,-50%)rotate(-90deg);transform:translate(0,-50%)rotate(-90deg);top:50%;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%;content:\\"OPEN\\";font-family:monospace;right:-2px;position:absolute;height:25px;line-height:25px;-webkit-transition:opacity .15s;transition:opacity .15s}#NotoneDrawer #Tones{overflow:hidden}#NotoneDrawer.Expanded{width:244px;padding-left:2px;padding-right:2px}#NotoneDrawer.Expanded #OpenText:before{opacity:0}#NotoneDrawer.Expanded #OpenButton,#NotoneDrawer.Expanded #Search,#NotoneDrawer.Expanded .Notone{opacity:1}#OpenButton.Expanded{color:#aaa!important}#OpenButton:hover:active{border-color:#aaa!important}", ""]);\n\n/***************\n WEBPACK FOOTER\n ./~/css-loader!./~/autoprefixer-loader!./~/sass-loader!./style/drawer.scss\n module id = 21\n module chunks = 0\n /\n//# sourceURL=webpack:///./style/drawer.scss?./~/css-loader!./~/autoprefixer-loader!./~/sass-loader')},function(module,exports,__webpack_require__){eval('exports = module.exports = __webpack_require__(4)();\nexports.push([module.id, ".Notone,.Notone #OpenButton{border-style:solid;font-family:monospace}.Notone #OpenButton,.Notone .Notone{margin-left:2px;border-color:#000;box-sizing:border-box}.Notone{margin-bottom:2px;width:240px;background-color:#fff;border-color:#000;border-width:2px 0 0 10px;font-size:11px;position:absolute}.Notone #Title{position:relative;width:100%;text-align:center;height:25px;line-height:25px;font-size:1.2em}.Notone #Title #Listen{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;position:absolute;height:25px;width:12px;right:0;top:0;border-width:0}.Notone #Title #Listen:active{background-color:#00f}.Notone #Title #Close{width:23px;height:23px;position:absolute;left:2px;top:2px;background-color:#000;color:#fff;text-align:center;cursor:pointer;line-height:23px}.Notone #Title #Close:hover{background-color:#3833ED;color:#fff}.Notone #Title #Close:hover:active{background-color:#ED33CF;color:#22DBC0}.Notone #OpenButton,.Notone .Notone #Title{color:#000;margin-top:2px;height:25px;line-height:25px}.Notone #OpenButton{cursor:pointer;width:calc(100% - $innerOffset);text-align:center;border-width:4px 0 0 4px}.Notone #OpenButton:hover{border-width:0 4px 4px 0}.Notone .Notone{width:calc(100% - 2px);margin-top:2px;border-wi
			},function(module,exports,__webpack_require__){eval('module.exports = {\n "Time": {\n "description": "Time can be described in a number of ways. Read more <a href=\\"https://github.com/TONEnoTONE/Tone.js/wiki/Time\\">here</a>.\\n\\n <ul>\\n <li>Numbers, which will be taken literally as the time (in seconds).</li>\\n <li>Notation, (\\"4n\\", \\"8t\\") describes time in BPM and time signature relative values.</li>\\n <li>TransportTime, (\\"4:3:2\\") will also provide tempo and time signature relative times \\n in the form BARS:QUARTERS:SIXTEENTHS.</li>\\n <li>Frequency, (\\"8hz\\") is converted to the length of the cycle in seconds.</li>\\n <li>Now-Relative, (\\"+1\\") prefix any of the above with \\"+\\" and it will be interpreted as \\n \\"the current time plus whatever expression follows\\".</li>\\n <li>Expressions, (\\"3:0 + 2 - (1m / 7)\\") any of the above can also be combined \\n into a mathematical expression which will be evaluated to compute the desired time.</li>\\n <li>No Argument, for methods which accept time, no argument will be interpreted as \\n \\"now\\" (i.e. the currentTime).</li>\\n </ul>",\n "name": "Time",\n "value": "time"\n },\n "Frequency": {\n "description": "Frequency can be described similar to time, except ultimately the\\n values are converted to frequency instead of seconds. A number\\n is taken literally as the value in hertz. Additionally any of the \\n Time encodings can be used. Note names in the form\\n of NOTE OCTAVE (i.e. C4) are also accepted and converted to their\\n frequency value.",\n "name": "Frequency",\n "value": "frequency"\n },\n "Gain": {\n "description": "Gain is the ratio between the input and the output value of a signal.",\n "name": "Gain",\n "value": "gain"\n },\n "NormalRange": {\n "description": "Normal values are within the range [0, 1].",\n "name": "NormalRange",\n "value": "normalrange"\n },\n "AudioRange": {\n "description": "AudioRange values are between [-1, 1].",\n "name": "AudioRange",\n "value": "audiorange"\n },\n "Decibels": {\n "description": "Decibels are a logarithmic unit of measurement which is useful for volume\\n because of the logarithmic way that we perceive loudness. 0 decibels \\n means no change in volume. -10db is approximately half as loud and 10db \\n is twice is loud.",\n "name": "Decibels",\n "value": "db"\n },\n "Interval": {\n "description": "Half-step note increments, i.e. 12 is an octave above the root. and 1 is a half-step up.",\n "name": "Interval",\n "value": "interval"\n },\n "BPM": {\n "description": "Beats per minute.",\n "name": "BPM",\n "value": "bpm"\n },\n "Positive": {\n "description": "The value must be greater than 0.",\n "name": "Positive",\n "value": "positive"\n },\n "Cents": {\n "description": "A cent is a hundredth of a semitone.",\n "name": "Cents",\n "value": "cents"\n },\n "Degrees": {\n "description": "Angle between 0 and 360.",\n "name": "Degrees",\n "value": "degrees"\n },\n "MIDI": {\n "description": "A number representing a midi note.",\n "name": "MIDI",\n "value": "midi"\n },\n "TransportTime": {\n "description": "A colon-separated representation of time in the form of\\n BARS:QUARTERS:SIXTEENTHS.",\n "name": "TransportTime",\n "value": "transporttime"\n }\n}\n\n/***************\n WEBPACK FOOTER\n ../Tonejs.org/docgen/description/types.json\n module id = 26\n module chunks = 0\n /\n//# sourceURL=webpack:///../Tonejs.org/docgen/description/types.json?')},function(module,exports,__webpack_require__){eval("// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = __webpack_require__(21);\nif(typeof content === 'string') content = [[module.id, content, '']];\n// add the styles to the DOM\nvar update = __webpack_require__(5)(content, {});\nif(content.locals) module.exports = content.locals;\n// Hot Module Replacement\nif(false) {\n // When the styles change, update the <style> tags\n if(!content.locals) {\n module.hot.accept(\"!!./../node_modules/css-loader/index.js!./../node_modules/autoprefixer-loader/index.js!.