Add menu toggle to show/hide the controls. Ref webgoat/webgoat#93

This commit is contained in:
Daniel Kvist 2016-03-30 22:38:18 +02:00
parent e6fb74fa55
commit 2be4248ea3
3 changed files with 31 additions and 9 deletions

View File

@ -72,9 +72,9 @@
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">User: ${user}</a></li> <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">User: ${user}</a></li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Role: ${role}</a></li> <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Role: ${role}</a></li>
<li role="presentation" class="divider"></li> <li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#developer-controls">Show developer controls</a></li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">${version}</a></li> <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">${version}</a></li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Build: ${build}</a></li> <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Build: ${build}</a></li>
</ul> </ul>
</div> </div>
<button type="button" id="about-button" class="btn btn-default right_nav_button" title="About WebGoat" data-toggle="modal" data-target="#about-modal"> <button type="button" id="about-button" class="btn btn-default right_nav_button" title="About WebGoat" data-toggle="modal" data-target="#about-modal">
@ -142,12 +142,14 @@
<h4>Params</h4> <h4>Params</h4>
</div> </div>
</div> </div>
<div align="left"> <div id="developer-control-container">
<h3>Developer controls</h3> <div align="left">
</div> <h3>Developer controls</h3>
<hr /> </div>
<div id="developer-controls"> <hr />
<div id="developer-controls">
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -777,6 +777,9 @@ cookie-container {
color: #e84c3d color: #e84c3d
} }
#developer-control-container {
display: none;
}
#menu-container a, #menu-container a,
.developer-controls-table a { .developer-controls-table a {

View File

@ -28,12 +28,29 @@ function(
}, },
initialize: function(options) { initialize: function(options) {
this.addMenuListener();
this.models = [new PluginReloadModel(), new LabelDebugModel()]; this.models = [new PluginReloadModel(), new LabelDebugModel()];
this.listenTo(this.models[0], 'plugins:loaded', this.onPluginsLoaded); this.listenTo(this.models[0], 'plugins:loaded', this.onPluginsLoaded);
this.listenTo(this.models[1], 'plugins:loaded', this.onLabelsLoaded); this.listenTo(this.models[1], 'plugins:loaded', this.onLabelsLoaded);
this.render(); this.render();
}, },
addMenuListener: function() {
var showHandler = function(e) {
e.preventDefault();
$('#developer-control-container').show();
$(this).text('Hide developer controls').off().on('click', hideHandler);
};
var hideHandler = function(e) {
e.preventDefault();
$('#developer-control-container').hide();
$(this).text('Show developer controls').off().on('click', showHandler);
};
$('a[href="#developer-controls"]').click(showHandler);
},
render: function() { render: function() {
this.$el.html(''); this.$el.html('');
var table = $('<table>',{'class':'developer-controls-table table-nonfluid'}); var table = $('<table>',{'class':'developer-controls-table table-nonfluid'});