Wrapped applicationSettings in FORM

This commit is contained in:
jdescottes
2015-02-23 00:32:34 +01:00
parent 8592cd2e53
commit 4f2f01ea36
2 changed files with 58 additions and 45 deletions

View File

@@ -38,6 +38,10 @@
var maxFpsInput = document.querySelector('.max-fps-input'); var maxFpsInput = document.querySelector('.max-fps-input');
maxFpsInput.value = pskl.UserSettings.get(pskl.UserSettings.MAX_FPS); maxFpsInput.value = pskl.UserSettings.get(pskl.UserSettings.MAX_FPS);
this.addEventListener(maxFpsInput, 'change', this.onMaxFpsChange_); this.addEventListener(maxFpsInput, 'change', this.onMaxFpsChange_);
// Form
this.applicationSettingsForm = document.querySelector('[name="application-settings-form"]');
this.addEventListener(this.applicationSettingsForm, 'submit', this.onFormSubmit_);
}; };
ns.ApplicationSettingsController.prototype.onGridWidthChange_ = function (evt) { ns.ApplicationSettingsController.prototype.onGridWidthChange_ = function (evt) {
@@ -72,4 +76,9 @@
} }
}; };
ns.ApplicationSettingsController.prototype.onFormSubmit_ = function (evt) {
evt.preventDefault();
$.publish(Events.CLOSE_SETTINGS_DRAWER);
};
})(); })();

View File

@@ -1,51 +1,55 @@
<div class="settings-section"> <form action="" method="POST" name="application-settings-form">
<div class="settings-title"> <div class="settings-section">
General <div class="settings-title">
</div> General
<div class="settings-item"> </div>
<label>Background:</label> <div class="settings-item">
<div class="background-picker-wrapper"> <label>Background:</label>
<div class="background-picker light-picker-background" data-background="light-canvas-background" <div class="background-picker-wrapper">
rel="tooltip" data-placement="bottom" title="light / high contrast"> <div class="background-picker light-picker-background" data-background="light-canvas-background"
</div> rel="tooltip" data-placement="bottom" title="light / high contrast">
<div class="background-picker medium-picker-background" data-background="medium-canvas-background" </div>
rel="tooltip" data-placement="bottom" title="medium / high contrast"> <div class="background-picker medium-picker-background" data-background="medium-canvas-background"
</div> rel="tooltip" data-placement="bottom" title="medium / high contrast">
<div class="background-picker lowcont-medium-picker-background" data-background="lowcont-medium-canvas-background" </div>
rel="tooltip" data-placement="bottom" title="medium / low contrast"> <div class="background-picker lowcont-medium-picker-background" data-background="lowcont-medium-canvas-background"
</div> rel="tooltip" data-placement="bottom" title="medium / low contrast">
<div class="background-picker lowcont-dark-picker-background" data-background="lowcont-dark-canvas-background" </div>
rel="tooltip" data-placement="bottom" title="dark / low contrast"> <div class="background-picker lowcont-dark-picker-background" data-background="lowcont-dark-canvas-background"
rel="tooltip" data-placement="bottom" title="dark / low contrast">
</div>
</div> </div>
</div> </div>
</div> <div class="settings-item">
<div class="settings-item"> <label for="grid-width">Grid :</label>
<label for="grid-width">Grid :</label> <select id="grid-width" class="grid-width-select">
<select id="grid-width" class="grid-width-select"> <option value="0">Disabled</option>
<option value="0">Disabled</option> <option value="1">1px</option>
<option value="1">1px</option> <option value="2">2px</option>
<option value="2">2px</option> <option value="3">3px</option>
<option value="3">3px</option> <option value="4">4px</option>
<option value="4">4px</option> </select>
</select> </div>
</div>
</div>
<div class="settings-section">
<div class="settings-title">
Preview
</div> </div>
<div class="settings-item"> <div class="settings-section">
<label> <div class="settings-title">
<input type="checkbox" value="1" class="tiled-preview-checkbox" name="tiled-preview-checkbox"/> Preview
Repeated preview </div>
</label>
</div>
<div class="settings-item"> <div class="settings-item">
<label for="tiled-preview">Maximum FPS </label> <label>
<input type="text" class="textfield textfield-small max-fps-input" name="max-fps"/> <input type="checkbox" value="1" class="tiled-preview-checkbox" name="tiled-preview-checkbox"/>
</div> Repeated preview
</div> </label>
</div>
<div class="settings-item">
<label for="tiled-preview">Maximum FPS </label>
<input type="text" class="textfield textfield-small max-fps-input" name="max-fps"/>
</div>
<input type="submit" class="button button-primary" value="Save" />
</div>
</form>