Commit d27e3c39 authored by Prakhar Agarwal's avatar Prakhar Agarwal 🎯
Browse files

Added dialog for preferences

parent b447f9a2
......@@ -30,6 +30,22 @@
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="dialog-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="dialog-title"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body" id="dialog-body">
</div>
</div>
</div>
</div>
<div id="container-app" class="container-fluid">
<!-- Menu -->
<nav id="menu"></nav>
......
......@@ -58,9 +58,14 @@ function create_window(cid, type, width, height, xpos, ypos, attr_array) {
// cleaning dialog div
dialog_div.innerHTML = "";
$("#sidebar-body-dialog").prepend(dialog_div.outerHTML)
$("#dialog-body").prepend(dialog_div.outerHTML)
$("#dialog-div").prepend(data)
if (f === "dialog_canvas.html") {
$("#dialog-title").text("Canvas Properties");
} else if (f === "dialog_prefs.html") {
$("#dialog-title").text("Pd-L2Ork Properties");
}
$("#dialog-modal").modal("show");
// initialize the dialog window
register_dialog(cid,attr_array);
});
......
<!DOCTYPE html>
<html id="prefs_html_element">
<html>
<head>
<meta charset="UTF-8">
<link id="page_style" rel="stylesheet" type="text/css" href="css/default.css">
<title>Canvas Dialog</title>
</head>
<body class="dialog_body prefs_body">
<div class="container noselect prefs_container">
<div class="prefs_tab_group">
<input type="radio"
name="prefs_radio_group"
id="audio_tab_radio"
class="tab1 prefs_tab"
checked="checked" />
<label for="audio_tab_radio" data-i18n="[title]prefs.heading.audio_tt">
<span data-i18n="prefs.heading.audio"></span>
</label>
<body class="dialog_body">
<div class="container noselect">
<form>
<fieldset class="canvas">
<legend data-i18n="canvas.prop.heading.gop"></legend>
<table class="pairs">
<tr class="prop no_scroll hidden" data-i18n="[title]canvas.prop.no_scroll_tt">
<td colspan="2">
<label>
<input type="checkbox" name="no_scroll" value="off">
<span data-i18n="canvas.prop.no_scroll"></span>
</label>
</td>
</tr>
<tr class="prop no_menu hidden" data-i18n="[title]canvas.prop.no_menu_tt">
<td colspan="2">
<label>
<input type="checkbox" name="no_menu" value="off">
<span data-i18n="canvas.prop.no_menu"></span>
</label>
</td>
</tr>
<tr class="display_flags prop hidden" data-i18n="[title]canvas.prop.gop_tt">
<td colspan="2">
<label>
<input type="checkbox" name="gop" value="on">
<span data-i18n="canvas.prop.gop"></span>
</label>
</td>
</tr>
<tr class="x_pix prop hidden">
<td>
</td>
<td>
<table>
<tr>
<td>
<label class="gop_opt" data-i18n="[title]canvas.prop.x_pix_tt">
<span data-i18n="canvas.prop.x_pix"></span>
</label>
</td>
<td data-i18n="[title]canvas.prop.x_pix_tt">
<input class="gop_opt" type="text" name="x_pix">
</td>
<td>
<label class="gop_opt" data-i18n="[title]canvas.prop.y_pix_tt">
<span data-i18n="canvas.prop.y_pix"></span>
</label>
</td>
<td data-i18n="[title]canvas.prop.y_pix_tt">
<input class="gop_opt" type="text" name="y_pix">
</td>
</tr>
<tr class="x_margin prop hidden">
<td>
<label class="gop_opt" data-i18n="[title]canvas.prop.x_margin_tt">
<span data-i18n="canvas.prop.x_margin"></span>
</label>
</td>
<td data-i18n="[title]canvas.prop.x_margin_tt">
<input class="gop_opt" type="text" name="x_margin">
</td>
<td>
<label class="gop_opt" data-i18n="[title]canvas.prop.y_margin_tt">
<span data-i18n="canvas.prop.y_margin"></span>
</label>
</td>
<td data-i18n="[title]canvas.prop.y_margin_tt">
<input class="gop_opt" type="text" name="y_margin">
</td>
</tr>
</table>
</td>
</tr>
<tr class="display_flags prop hide_name_row">
<td>
</td>
<td>
<label class="gop_opt" data-i18n="[title]canvas.prop.hide_name_tt">
<input class="gop_opt" type="checkbox" name="hide_name" value="on">
<span data-i18n="canvas.prop.hide_name"></span>
</label>
</td>
</tr>
</table>
</fieldset>
<fieldset class="canvas">
<legend data-i18n="canvas.prop.heading.data_scaling"></legend>
<div style="display: inline-block; align: left;">
<div class="x_scale prop hidden">
<nobr>
<label class="no_gop_opt" data-i18n="[title]canvas.prop.x_scale_tt">
<span data-i18n="canvas.prop.x_scale"></span>
<input class="no_gop_opt" type="text" name="x_scale">
</label>
<label class="no_gop_opt" data-i18n="[title]canvas.prop.y_scale_tt">
<span data-i18n="canvas.prop.y_scale"></span>
<input class="no_gop_opt" type="text" name="y_scale">
</label>
</nobr>
</div>
<input type="radio"
name="prefs_radio_group"
id="midi_tab_radio"
class="tab2 prefs_tab"/>
<label for="midi_tab_radio" data-i18n="[title]prefs.heading.midi_tt">
<span data-i18n="prefs.heading.midi"></span>
</label>
<div class="gop-range">
<div class="y1 prop hidden">
<label class="gop_opt" data-i18n="[title]canvas.prop.y1_tt">
<span data-i18n="canvas.prop.y1"></span>
<br>
<input class="gop_opt" type="text" name="y1">
</label>
<br>
</div>
<input type="radio"
name="prefs_radio_group"
id="gui_tab_radio"
class="tab3 prefs_tab"/>
<label for="gui_tab_radio" data-i18n="[title]prefs.heading.gui_tt">
<span data-i18n="prefs.heading.gui"></span>
</label>
<div class="x1 prop hidden">
<label class="gop_opt" data-i18n="[title]canvas.prop.x1_tt">
<span data-i18n="canvas.prop.x1"></span>
<input class="gop_opt" type="text" name="x1">
</label>
<label class="gop_opt" data-i18n="[title]canvas.prop.x2_tt">
<input class="gop_opt" type="text" name="x2">
<span data-i18n="canvas.prop.x2"></span>
</label>
<br>
</div>
<div class="y2">
<label class="gop_opt" data-i18n="[title]canvas.prop.y2_tt">
<input class="gop_opt" type="text" name="y2">
<br>
<span data-i18n="canvas.prop.y2"></span>
</label>
</div>
</div>
</div>
</fieldset>
<input type="radio"
name="prefs_radio_group"
id="startup_tab_radio"
class="tab4 prefs_tab"/>
<label for="startup_tab_radio" data-i18n="[title]prefs.heading.startup_tt">
<span data-i18n="prefs.heading.startup"></span>
</label>
<div class="tab1">
<table class="tab_settings">
<tr data-i18n="[title]prefs.audio.api_tt">
<td>
<span data-i18n="prefs.audio.api"></span>
</td>
<td>
<select id="audio_api" onchange="change_api(this);">
</select>
</td>
</tr>
<tr data-i18n="[title]prefs.audio.sr_tt">
<td>
<span data-i18n="prefs.audio.sr"></span>
</td>
<td>
<input type="text"
id="rate"
name="rate"
onchange="attr_change(this);">
</td>
</tr>
<tr data-i18n="[title]prefs.audio.blocksize_tt">
<td>
<span data-i18n="prefs.audio.blocksize"></span>
</td>
<td>
<select id="blocksize"
onchange="attr_change(this);">
<option value="64">64</option>
<option value="128">128</option>
<option value="256">256</option>
<option value="512">512</option>
<option value="1024">1024</option>
<option value="2048">2048</option>
</select>
</td>
<tr data-i18n="[title]prefs.audio.advance_tt">
<td>
<span data-i18n="prefs.audio.advance"></span>
</td>
<td>
<input type="text"
id="advance"
name="advance"
onchange="attr_change(this);">
</td>
</tr>
<tr id="callback_container" class="hidden"
data-i18n="[title]prefs.audio.callback_tt">
<td>
<span data-i18n="prefs.audio.callback"></span>
</td>
<td>
<input type="checkbox" id="callback" name="callback">
</td>
</tr>
<tr id="multi_dev_container" class="hidden"
data-i18n="[title]prefs.audio.callback_tt">
<td>
<span data-i18n="prefs.audio.callback"></span>
</td>
<td>
<input type="checkbox" id="multi-dev" name="multi-dev">
</td>
</tr>
</table>
<table class="tab_settings">
<tr>
<td data-i18n="[title]prefs.audio.input_title_tt">
<span data-i18n="prefs.audio.input_title"></span>
</td>
<td>
<span data-i18n="prefs.audio.channels"></span>
</td>
</tr>
<tr>
<td>
<select id="in1" onchange="dev_change(this);"></select>
</td>
<td>
<label data-i18n="[title]prefs.audio.channels_tt">
<input type="text"
id="inchans1"
name="inchans1"
onchange="dev_change(this);">
</label>
</td>
</tr>
<tr>
<td>
<select id="in2" onchange="dev_change(this);"></select>
</td>
<td>
<label data-i18n="[title]prefs.audio.channels_tt">
<input type="text"
id="inchans2"
name="inchans2"
onchange="dev_change(this);">
</label>
</td>
</tr>
<tr>
<td>
<select id="in3" onchange="dev_change(this);"></select>
</td>
<td>
<label data-i18n="[title]prefs.audio.channels_tt">
<input type="text"
id="inchans3"
name="inchans3"
onchange="dev_change(this);">
</label>
</td>
</tr>
<tr>
<td>
<select id="in4" onchange="dev_change(this);"></select>
</td>
<td>
<label data-i18n="[title]prefs.audio.channels_tt">
<input type="text"
id="inchans4"
name="inchans4"
onchange="dev_change(this);">
</label>
</td>
</tr>
<tr>
<td data-i18n="[title]prefs.audio.output_title_tt">
<span data-i18n="prefs.audio.output_title"></span>
</td>
<td>
<span data-i18n="prefs.audio.channels"></span>
</td>
</tr>
<tr>
<td>
<select id="out1" onchange="dev_change(this);"></select>
</td>
<td>
<label data-i18n="[title]prefs.audio.channels_tt">
<input type="text"
id="outchans1"
name="outchans1"
onchange="dev_change(this);">
</label>
</td>
</tr>
<tr>
<td>
<select id="out2" onchange="dev_change(this);"></select>
</td>
<td>
<label data-i18n="[title]prefs.audio.channels_tt">
<input type="text"
id="outchans2"
name="outchans2"
onchange="dev_change(this);">
</label>
</td>
</tr>
<tr>
<td>
<select id="out3" onchange="dev_change(this);"></select>
</td>
<td>
<label data-i18n="[title]prefs.audio.channels_tt">
<input type="text"
id="outchans3"
name="outchans3"
onchange="dev_change(this);">
</label>
</td>
</tr>
<tr>
<td>
<select id="out4" onchange="dev_change(this);"></select>
</td>
<td>
<label data-i18n="[title]prefs.audio.channels_tt">
<input type="text"
id="outchans4"
name="outchans4"
onchange="dev_change(this);">
</label>
</td>
</tr>
</table>
</div>
<fieldset id="arrays" class="hidden">
<legend data-i18n="canvas.prop.heading.arrays"></legend>
<label class="arrays" data-i18n="[title]canvas.prop.array_name">
<select id="arrays_select" class="hidden"></select>
</label>
<div class="tab2">
<div class="tab_settings midi_api_container">
<label data-i18n="[title]prefs.midi.api_tt">
<span data-i18n="prefs.midi.api"></span>
<select id="midi_api" onchange="change_api(this);">
</select>
<div class="array-name prop">
<label class="array-name"
data-i18n="[title]canvas.prop.array_name_tt">
<span data-i18n="canvas.prop.array_name"></span>
<input onchange="update_array_attr(this);"
class="array-name"
type="text"
name="array_name"
id="array_name_input">
</label>
</div>
<div class="tab_settings alsa_midi">
<label data-i18n="[title]prefs.midi.alsa_in_ports_tt">
<span data-i18n="prefs.midi.alsa_in_ports"></span>
<input type="text"
id="alsa_in_ports"
name="alsa_in_ports"
onchange="alsa_in_ports_change(this);">
<label class="array-size"
data-i18n="[title]canvas.prop.array_size_tt">
<span data-i18n="canvas.prop.array_size"></span>
<input onchange="update_array_attr(this);"
class="array-size"
type="text"
name="array_size">
</label>
<label data-i18n="[title]prefs.midi.alsa_out_ports_tt">
<span data-i18n="prefs.midi.alsa_out_ports"></span>
<input type="text"
id="alsa_out_ports"
name="alsa_out_ports"
onchange="alsa_out_ports_change(this);">
<br/>
<label class="array-save"
data-i18n="[title]canvas.prop.array_save_tt">
<input onchange="flag_change(this);"
type="checkbox"
name="array_save"
value="on">
<span data-i18n="canvas.prop.array_save"></span>
</label>
</div>
<br/>
<label class="array-jump"
data-i18n="[title]canvas.prop.array_jump_tt">
<input onchange="flag_change(this);"
type="checkbox" name="array_jump" value="on">
<span data-i18n="canvas.prop.array_jump"></span>
</label>
<br/>
<div class="tab_settings midi_devices">
<span data-i18n="[title]prefs.midi.input_title_tt">
<span data-i18n="prefs.midi.input_title"></span>
</span>
<table class="tab_settings">
<tr>
<td>1</td><td>
<select id="midi_in1" onchange="dev_change(this);"></select>
</td>
<td align="right">6</td><td>
<select id="midi_in6" onchange="dev_change(this);"></select>
</td>
</tr>
<tr>
<td>2</td><td>
<select id="midi_in2" onchange="dev_change(this);"></select>
</td>
<td align="right">7</td><td>
<select id="midi_in7" onchange="dev_change(this);"></select>
</td>
</tr>
<tr>
<td>3</td><td>
<select id="midi_in3" onchange="dev_change(this);"></select>
</td>
<td align="right">8</td><td>
<select id="midi_in8" onchange="dev_change(this);"></select>
</td>
</tr>
<tr>
<td>4</td><td>
<select id="midi_in4" onchange="dev_change(this);"></select>
</td>
<td align="right">9</td><td>
<select id="midi_in9" onchange="dev_change(this);"></select>
</td>
</tr>
<tr>
<td>5</td><td>
<select id="midi_in5" onchange="dev_change(this);"></select>
</td>
<td align="right">10</td><td>
<select id="midi_in10" onchange="dev_change(this);"></select>
</td>
</tr>
</table>
<span data-i18n="canvas.prop.array_style"></span>
<br/>
<span data-i18n="[title]prefs.midi.output_title_tt">
<span data-i18n="prefs.midi.output_title"></span>
</span>
<table class="tab_settings">
<tr>
<td>1</td><td>
<select id="midi_out1" onchange="dev_change(this);"></select>
</td>
<td align="right">6</td><td>
<select id="midi_out6" onchange="dev_change(this);"></select>
</td>
</tr>
<tr>
<td>2</td><td>
<select id="midi_out2" onchange="dev_change(this);"></select>
</td>
<td align="right">7</td><td>
<select id="midi_out7" onchange="dev_change(this);"></select>
</td>
</tr>
<table class="array_style">
<tr>
<td>3</td><td>
<select id="midi_out3" onchange="dev_change(this);"></select>
<td>
<label class="polygon"
data-i18n="[title]canvas.prop.array_polygon_tt">
<input class="array-style"
type="radio"
id="polygon"
value="0"
name="array_style"
onchange="flag_change(this);">
<span data-i18n="canvas.prop.array_polygon"></span>
</label>
</td>
<td align="right">8</td><td>
<select id="midi_out8" onchange="dev_change(this);"></select>
<td>
<label class="points"
data-i18n="[title]canvas.prop.array_points_tt">
<input class="array-style"
type="radio"
id="points"
value="1"
name="array_style"
onchange="flag_change(this);">
<span data-i18n="canvas.prop.array_points"></span>
</label>
</td>
</tr>
<tr>
<td>4</td><td>
<select id="midi_out4" onchange="dev_change(this);"></select>
<td>
<label class="bezier-curve"
data-i18n="[title]canvas.prop.array_bezier_tt">
<input class="array-style"
type="radio"
id="bezier"
value="2"
name="array_style"
onchange="flag_change(this);">
<span data-i18n="canvas.prop.array_bezier"></span>
</label>
</td>
<td align="right">9</td><td>
<select id="midi_out9" onchange="dev_change(this);"></select>
</td>
</tr>
<tr>
<td>5</td><td>
<select id="midi_out5" onchange="dev_change(this);"></select>
</td>
<td align="right">10</td><td>
<select id="midi_out10" onchange="dev_change(this);"></select>
<td>
<label class="bar-graph"
data-i18n="[title]canvas.prop.array_bars_tt">
<input class="array-style"
type="radio"
id="bar-graph"
value="3"
name="array_style"
onchange="flag_change(this);">
<span data-i18n="canvas.prop.array_bars"></span>
</label>
</td>
</tr>
</table>
</div>
</div>
<div class="tab3">
<div class="tab_settings">
<label data-i18n="[title]prefs.gui.presets.gui_preset_tt">
<span data-i18n="prefs.gui.presets.gui_preset"></span>
</label>
<select id="gui_preset" onchange="gui_preset_change(this);">
<option data-i18n="prefs.gui.presets.default" value="default">