4 files changed, 152 insertions, 0 deletions
diff --git a/pyload/web/app/scripts/views/input/inputLoader.js b/pyload/web/app/scripts/views/input/inputLoader.js
new file mode 100644
index 000000000..04d591d30
--- /dev/null
+++ b/pyload/web/app/scripts/views/input/inputLoader.js
@@ -0,0 +1,8 @@
+define(['./textInput'], function(textInput) {
+    'use strict';
+
+    // selects appropriate input element
+    return function(input) {
+        return textInput;
+    };
+});
+\ No newline at end of file
diff --git a/pyload/web/app/scripts/views/input/inputRenderer.js b/pyload/web/app/scripts/views/input/inputRenderer.js
new file mode 100644
index 000000000..c20f15708
--- /dev/null
+++ b/pyload/web/app/scripts/views/input/inputRenderer.js
@@ -0,0 +1,22 @@
+define(['jquery', 'underscore', './inputLoader'], function($, _, load_input) {
+    'use strict';
+
+    // Renders list of ConfigItems to an container
+    // Optionally binds change event to view
+    return function(container, items, template, onChange, view) {
+        _.each(items, function(item) {
+            var json = item.toJSON();
+            var el = $('<div>').html(template(json));
+            var InputView = load_input(item.get('input'));
+            var input = new InputView(json).render();
+            item.set('inputView', input);
+
+            if (_.isFunction(onChange) && view) {
+                view.listenTo(input, 'change', onChange);
+            }
+
+            el.find('.controls').append(input.el);
+            container.append(el);
+        });
+    };
+});
+\ No newline at end of file
diff --git a/pyload/web/app/scripts/views/input/inputView.js b/pyload/web/app/scripts/views/input/inputView.js
new file mode 100644
index 000000000..1860fcaf1
--- /dev/null
+++ b/pyload/web/app/scripts/views/input/inputView.js
@@ -0,0 +1,86 @@
+define(['jquery', 'backbone', 'underscore'], function($, Backbone, _) {
+    'use strict';
+
+    // Renders input elements
+    return Backbone.View.extend({
+
+        tagName: 'input',
+
+        input: null,
+        value: null,
+        description: null,
+        default_value: null,
+
+        // enables tooltips
+        tooltip: true,
+
+        initialize: function(options) {
+            this.input = options.input;
+            this.default_value = this.input.default_value;
+            this.value = options.value;
+            this.description = options.description;
+        },
+
+        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 }
+                });
+            }
+
+            return this;
+        },
+
+        renderInput: function() {
+            // Overwrite this
+        },
+
+        showTooltip: function() {
+            if (this.description && this.tooltip)
+                this.$el.popover('show');
+        },
+
+        hideTooltip: function() {
+            if (this.description && this.tooltip)
+                this.$el.popover('hide');
+        },
+
+        destroy: function() {
+            this.undelegateEvents();
+            this.unbind();
+            if (this.onDestroy) {
+                this.onDestroy();
+            }
+            this.$el.removeData().unbind();
+            this.remove();
+        },
+
+        // focus the input element
+        focus: function() {
+            this.$el.focus();
+        },
+
+        // Clear the input
+        clear: function() {
+
+        },
+
+        // retrieve value of the input
+        getVal: function() {
+            return this.value;
+        },
+
+        // the child class must call this when the value changed
+        setVal: function(value) {
+            this.value = value;
+            this.trigger('change', value);
+        }
+    });
+});
+\ No newline at end of file
diff --git a/pyload/web/app/scripts/views/input/textInput.js b/pyload/web/app/scripts/views/input/textInput.js
new file mode 100644
index 000000000..0eebbf91e
--- /dev/null
+++ b/pyload/web/app/scripts/views/input/textInput.js
@@ -0,0 +1,36 @@
+define(['jquery', 'backbone', 'underscore', './inputView'], function($, Backbone, _, inputView) {
+    'use strict';
+
+    return inputView.extend({
+
+        // TODO
+        tagName: 'input',
+        events: {
+            'keyup': 'onChange',
+            'focus': 'showTooltip',
+            'focusout': 'hideTooltip'
+        },
+
+        renderInput: function() {
+            this.$el.attr('type', 'text');
+            this.$el.attr('name', 'textInput');
+
+            if (this.default_value)
+                this.$el.attr('placeholder', this.default_value);
+
+            if (this.value)
+                this.$el.val(this.value);
+
+            return this;
+        },
+
+        clear: function() {
+            this.$el.val('');
+        },
+
+        onChange: function(e) {
+            this.setVal(this.$el.val());
+        }
+
+    });
+});
+\ No newline at end of file