4.form.html(その1)
<!-- Copyright © 2020 symphonic-mpd Research and Development Club -->
<div id="mpd_database_form" class="form-horizontal">
<h4>Store tag_cache and playlists in the NAS</h4>
<div class="form-group">
<div class="col-sm-6">
<button type="button" id="plugin_run_backup" class="btn btn-default">BACKUP</button>
<button type="button" id="plugin_run_restore" class="btn btn-default">RESTORE</button>
</div>
<div class="col-sm-6">
<div class="select-wrap">
<select id="mpdnasno2" class="form-control">
<option value="">NAS0</option>
<option value="1">NAS1</option>
<option value="2">NAS2</option>
<option value="3">NAS3</option>
<option value="4">NAS4</option>
<option value="5">NAS5</option>
<option value="6">NAS6</option>
<option value="7">NAS7</option>
<option value="8">NAS8</option>
<option value="9">NAS9</option>
</select>
</div>
</div>
</div>
<hr />
<h4>Scan music directory</h4>
<div class="form-group">
<div class="col-xs-12">
<input type="text" class="run" />
<div class="checkbox-inline">
<input type="checkbox" id="rescan-flg"/> rescan this directory
</div>
</div>
</div>
</div>
<script>
$(function(){
if (config.browsepath.trim() == "") {
$("input.run").val("/");
} else {
$("input.run").val(config.browsepath.trim());
}
});
$('#plugin-form').on('shown.bs.modal', function() {
socket.send('YMPD_GET_MPDHOST');
});
$("#mpd_database_form button").on('click', function() {
$(this).off('click');
var v = 'cmd:' + $(this).attr('id') + (($('#mpdnasno2').val() === '') ? '' : $('#mpdnasno2').val());
$('input.run').val(v);
plugin_form_ok();
$('#plugin-form').modal('hide');
});
$('#rescan-flg').on('click', function() {
var v = $('input.run').val().replace('rescan-', '');
if ($('#rescan-flg').prop('checked')) v = 'rescan-' + v;
$('input.run').val(v);
});
</script>
上記に比較的ファイル量が少なく構造がわかりやすい例として「11-update_library」の form.html で説明します。
form.html ファイルは名前の通りHTMLファイルですが、通常のブラウザ上で直接表示するHTMLファイルと異なり、HTML・HEADER・BODYタグは含まれていません。
これは本ファイルはWebui で プラグインのメニュークリック時にindex.html(ツインビューの場合はindex2.html)body タグ内部の<div class="modal-body" id="plugin-form-body">
(plugin-form-bodyというIDを持つdivタグ)に読み込みされる前提で設計されているためです(正確には jquery の load() で読み込みされます)。
↑
当該タグはプラグイン専用のダイアログ部分の本体として提供されているものです。
(1)プラグインの外観の流儀
原則「PC・タブレット・スマートフォンを問わず入出力画面を提供出来ること」が必要です。
プラグイン専用ダイアログは「PC・タブレット向け」には横幅600px、これより画面の狭い場合(スマートフォン等)は画面解像度に合わせて自動で幅が設定されます。
高さは内部のHTMLパーツ数に応じて自動的に拡張されます。
また、WebuiではBootstrap3のグリッドレイアウト
を採用し、プラグイン内部のテキストボックス・ボタンの配置が行なわれているため、本設計を準拠することを推奨します。