diff options
Diffstat (limited to 'module/web/static')
| -rw-r--r-- | module/web/static/css/default/settings.less | 5 | ||||
| -rw-r--r-- | module/web/static/js/models/ConfigHolder.js | 10 | ||||
| -rw-r--r-- | module/web/static/js/models/ConfigItem.js | 4 | ||||
| -rw-r--r-- | module/web/static/js/views/configSectionView.js | 75 | ||||
| -rw-r--r-- | module/web/static/js/views/input/inputView.js | 4 | ||||
| -rw-r--r-- | module/web/static/js/views/input/textInput.js | 2 | ||||
| -rw-r--r-- | module/web/static/js/views/settingsView.js | 40 |
7 files changed, 118 insertions, 22 deletions
diff --git a/module/web/static/css/default/settings.less b/module/web/static/css/default/settings.less index d7012f17a..2501e2d0d 100644 --- a/module/web/static/css/default/settings.less +++ b/module/web/static/css/default/settings.less @@ -34,6 +34,7 @@ .setting-box {
border: 10px solid @blueDark;
box-shadow: 0 0 5px @dark; // .gradient(bottom, @yellowLightest, @light);
+ overflow: hidden;
.page-header {
margin: 0;
@@ -43,6 +44,10 @@ margin-top: 5px;
}
+ .popover {
+ font-size: medium;
+ }
+
}
// Bit wider control labels
diff --git a/module/web/static/js/models/ConfigHolder.js b/module/web/static/js/models/ConfigHolder.js index 8beb31fb8..abd1b9f0a 100644 --- a/module/web/static/js/models/ConfigHolder.js +++ b/module/web/static/js/models/ConfigHolder.js @@ -39,6 +39,16 @@ define(['jquery', 'backbone', 'underscore', 'app', './ConfigItem'], isLoaded: function() { return this.has('items') || this.has('long_description'); + }, + + // check if any of the items has changes + hasChanges: function() { + var items = this.get('items'); + if (!items) return false; + return _.reduce(items, function(a, b) { + return a || b.isChanged(); + }, false); } + }); });
\ No newline at end of file diff --git a/module/web/static/js/models/ConfigItem.js b/module/web/static/js/models/ConfigItem.js index f55bb2b9e..636c28851 100644 --- a/module/web/static/js/models/ConfigItem.js +++ b/module/web/static/js/models/ConfigItem.js @@ -17,6 +17,10 @@ define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes'], // Model Constructor initialize: function() { + }, + + isChanged: function() { + return this.get('inputView') && this.get('inputView').getVal() !== this.get('value'); } }); });
\ No newline at end of file diff --git a/module/web/static/js/views/configSectionView.js b/module/web/static/js/views/configSectionView.js new file mode 100644 index 000000000..0bbe61653 --- /dev/null +++ b/module/web/static/js/views/configSectionView.js @@ -0,0 +1,75 @@ +define(['jquery', 'underscore', 'backbone', 'app', './input/inputLoader'], + function($, _, Backbone, App, load_input) { + + // Renders settings over view page + return Backbone.View.extend({ + + tagName: 'div', + + template: _.compile($("#template-config").html()), + templateItem: _.compile($("#template-config-item").html()), + + // Will only render one time with further attribute updates + rendered: false, + + events: { + 'click .btn-primary': 'submit' + // TODO cancel + }, + + initialize: function() { + }, + + // TODO: correct cleanup after building up so many views and models + render: function() { + if (!this.rendered) { + this.$el.html(this.template(this.model.toJSON())); + + // TODO: only render one time, rest of the attributes set manually + + // initialize the popover + this.$('.page-header a').popover({ + placement: 'left', + trigger: 'hover' + }); + + var container = this.$('.control-content'); + var self = this; + _.each(this.model.get('items'), function(item) { + var el = $('<div>').html(self.templateItem(item.toJSON())); + var inputView = load_input("todo"); + var input = new inputView(item.get('input'), item.get('value'), + item.get('default_value'), item.get('description')).render(); + item.set('inputView', input); + + self.listenTo(input, 'change', _.bind(self.render, self)); + el.find('.controls').append(input.el); + container.append(el); + }); + this.rendered = true; + } + // Enable button if something is changed + if (this.model.hasChanges()) + this.$('.btn-primary').removeClass('disabled'); + else + this.$('.btn-primary').addClass('disabled'); + + // Mark all inputs that are modified + _.each(this.model.get('items'), function(item) { + var input = item.get('inputView'); + var el = input.$el.parent().parent(); + if (item.isChanged()) + el.addClass('info'); + else + el.removeClass('info'); + }); + + return this; + }, + + submit: function() { + + } + + }); + });
\ No newline at end of file diff --git a/module/web/static/js/views/input/inputView.js b/module/web/static/js/views/input/inputView.js index 56087c516..ed78d2d30 100644 --- a/module/web/static/js/views/input/inputView.js +++ b/module/web/static/js/views/input/inputView.js @@ -22,15 +22,15 @@ define(['jquery', 'backbone', 'underscore'], function($, Backbone, _) { render: function() { this.renderInput(); - // data for tooltips if (this.description && this.tooltip) { this.$el.data('content', this.description); + // TODO: render default value in popup? // this.$el.data('title', "TODO: title"); this.$el.popover({ placement: 'right', trigger: 'hover', - delay: { show: 500, hide: 100 } +// delay: { show: 500, hide: 100 } }); } diff --git a/module/web/static/js/views/input/textInput.js b/module/web/static/js/views/input/textInput.js index 36cdf9f06..3a6631a0b 100644 --- a/module/web/static/js/views/input/textInput.js +++ b/module/web/static/js/views/input/textInput.js @@ -5,7 +5,7 @@ define(['jquery', 'backbone', 'underscore', './inputView'], function($, Backbone // TODO tagName: 'input', events: { - 'keypress': 'onChange', + 'keyup': 'onChange', 'focus': 'showTooltip', 'focusout': 'hideTooltip' }, diff --git a/module/web/static/js/views/settingsView.js b/module/web/static/js/views/settingsView.js index 00c4b3739..5350f5a94 100644 --- a/module/web/static/js/views/settingsView.js +++ b/module/web/static/js/views/settingsView.js @@ -1,13 +1,11 @@ -define(['jquery', 'underscore', 'backbone', 'app', './input/inputLoader', 'models/ConfigHolder'], - function($, _, Backbone, App, load_input, ConfigHolder) { +define(['jquery', 'underscore', 'backbone', 'app', 'models/ConfigHolder', './configSectionView'], + function($, _, Backbone, App, ConfigHolder, configSectionView) { // Renders settings over view page return Backbone.View.extend({ el: "#content", templateMenu: _.compile($("#template-menu").html()), - templateConfig: _.compile($("#template-config").html()), - templateConfigItem: _.compile($("#template-config-item").html()), events: { 'click .settings-menu li > a': 'change_section' @@ -23,9 +21,12 @@ define(['jquery', 'underscore', 'backbone', 'app', './input/inputLoader', 'model config: null, isLoading: false, + initialize: function() { this.menu = this.$('.settings-menu'); - this.content = this.$('#settings-form'); + this.content = this.$('.setting-box > form'); + // set a height with css so animations will work + this.content.height(this.content.height()); this.refresh(); console.log("Settings initialized"); @@ -80,21 +81,22 @@ define(['jquery', 'underscore', 'backbone', 'app', './input/inputLoader', 'model }, show: function() { - // TODO: better refactor in separate views - this.content.html(this.templateConfig(this.config.toJSON())); - var container = this.content.find('.control-content'); - var items = this.config.get('items'); - var self = this; - _.each(items, function(item) { - var el = $('<div>').html(self.templateConfigItem(item.toJSON())); - var inputView = load_input("todo"); - el.find('.controls').append( - new inputView(item.get('input'), item.get('value'), - item.get('default_value'), item.get('description')).render().el); - container.append(el); + // TODO: better cleaning of old views + var oldHeight = this.content.height(); + this.content.empty(); + this.content.css('display', 'block'); + // reset the height + this.content.css('height', ''); + // append the new element + this.content.append(new configSectionView({model: this.config}).render().el); + // get the new height + var height = this.content.height(); + // set the old height again + this.content.height(oldHeight); + this.content.animate({ + opacity: 'show', + height: height }); - - this.content.fadeIn(); }, failure: function() { |