var WidgetFactory = (function ($) { const DEFAULT_CONFIG = { "height": 212, "width": 130, "canvas_height": 80, "canvas_width": 120, "r": 5, "canvas": { "style": { position: "absolute", margin: "40px auto auto auto", top: "20px", right: "0", bottom: "0", left: "0" }, "text_style": "bold 11px Poppins", "O_color": "#0000ff", "X_color": "#0000ff", "frets_index_color": "#000", "fretboard_color": "#000" }, "coord": { "first_string_start": [12, 7], "last_string_start": [12, 67], "first_string_end": [102, 7], "symbols": [0, 11], "first_dot": [21, 7], "fret_name": [19, 80], "barre": [19, 7], "barre_dim": [4, 12], "s_name_X": 107, "fret_gap": 18, "string_gap": 12 } }; var widgets = 0; var closeAllWidgets = function () { $("div.widget").remove(); }; function variate($widget, amount) { var note = $widget.note; var variations = CanvasArtist.checkNote(note); if (variations){ var varID = circularIndex($widget.varID, amount, variations.length); var $canvas = $("canvas", $widget); $widget.varID = varID; CanvasArtist.paint($canvas, note, varID, $widget.mode); } } var setupWidget = function (note) { var widget_n = widgets; var widgetID = "widget_" + String(widget_n); var $widget = $("
", { "id": widgetID, "class": "widget" }) .css({ height: WidgetFactory.config["height"], width: WidgetFactory.config["width"] }).draggabilly(); var $canvas = $("") .attr({"height": WidgetFactory.config["canvas_height"], "width": WidgetFactory.config["canvas_width"]}) .css(WidgetFactory.config["canvas"]["style"]); var $piano = ''; var $note_name = $("", { "text": note, "class": "note_name" }); var $line = $("
").css({ "color": "#d5d5d5", "margin": "0 4px 16px" }); var $close_btn = $("