From 288b6190121618090107b3c0bb4f9e3539608d3b Mon Sep 17 00:00:00 2001
From: RaNaN <Mast3rRaNaN@hotmail.de>
Date: Sun, 2 Sep 2012 19:22:48 +0200
Subject: modal dialog

---
 module/web/static/js/views/modal/modalView.js | 76 +++++++++++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 module/web/static/js/views/modal/modalView.js

(limited to 'module/web/static/js/views/modal/modalView.js')

diff --git a/module/web/static/js/views/modal/modalView.js b/module/web/static/js/views/modal/modalView.js
new file mode 100644
index 000000000..efc0cc3cb
--- /dev/null
+++ b/module/web/static/js/views/modal/modalView.js
@@ -0,0 +1,76 @@
+define(['jquery', 'backbone', 'underscore', 'omniwindow'], function($, Backbone, _) {
+
+    return Backbone.View.extend({
+
+        events: {
+
+        },
+
+        dialog: null,
+
+        initialize: function() {
+
+        },
+
+        render: function() {
+            this.$el.addClass('modal');
+            this.$el.addClass('modal-closed');
+            this.$el.append(this.renderContent());
+            this.$el.css({opacity: 0, scale: 0.7});
+            $("body").append(this.el);
+
+            this.dialog = this.$el.omniWindow({
+                overlay: {
+                    selector: '#modal-overlay',
+                    hideClass: 'modal-closed',
+                    animations: {
+                        hide: function(subjects, internalCallback) {
+                            subjects.overlay.fadeOut(400, function() {
+                                internalCallback(subjects);
+                            });
+                        },
+                        show: function(subjects, internalCallback) {
+                            subjects.overlay.fadeIn(250, function() {
+                                internalCallback(subjects);
+                            });
+                        }}},
+                modal: {
+                    hideClass: 'modal-closed',
+                    animations: {
+                        hide: function(subjects, internalCallback) {
+                            subjects.modal.transition({opacity: 'hide', scale: 0.7}, 250, function() {
+                                internalCallback(subjects);
+                            });
+                        },
+
+                        show: function(subjects, internalCallback) {
+                            subjects.modal.transition({opacity: 'show', scale: 1}, 250, function() {
+                                internalCallback(subjects);
+                            });
+                        }}
+                }});
+
+            return this;
+        },
+        renderContent: function() {
+            return $('<h1>Dialog</h1>');
+        },
+
+        show: function() {
+            if (this.dialog === null)
+                this.render();
+
+            this.dialog.trigger('show');
+        },
+
+        hide: function() {
+            this.dialog.trigger('hide');
+        },
+
+        destroy: function() {
+            this.$el.remove();
+            this.dialog = null;
+        }
+
+    });
+});
\ No newline at end of file
-- 
cgit v1.2.3


From 6a8303b004e1976739371431aa7358c672ad7313 Mon Sep 17 00:00:00 2001
From: RaNaN <Mast3rRaNaN@hotmail.de>
Date: Sun, 16 Sep 2012 21:45:10 +0200
Subject: added bootstrap

---
 module/web/static/js/views/modal/modalView.js | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

(limited to 'module/web/static/js/views/modal/modalView.js')

diff --git a/module/web/static/js/views/modal/modalView.js b/module/web/static/js/views/modal/modalView.js
index efc0cc3cb..b20aab57d 100644
--- a/module/web/static/js/views/modal/modalView.js
+++ b/module/web/static/js/views/modal/modalView.js
@@ -1,11 +1,14 @@
-define(['jquery', 'backbone', 'underscore', 'omniwindow'], function($, Backbone, _) {
+define(['jquery', 'backbone', 'underscore', 'text!tpl/default/modal.html', 'omniwindow'], function($, Backbone, _, template) {
 
     return Backbone.View.extend({
 
         events: {
-
+            'click .btn-close': 'hide',
+            'click .close': 'hide'
         },
 
+        template: _.template(template),
+
         dialog: null,
 
         initialize: function() {
@@ -13,16 +16,15 @@ define(['jquery', 'backbone', 'underscore', 'omniwindow'], function($, Backbone,
         },
 
         render: function() {
-            this.$el.addClass('modal');
-            this.$el.addClass('modal-closed');
-            this.$el.append(this.renderContent());
+            this.$el.html(this.template({ content: this.renderContent().html(), header: this.getHeader()}));
+            this.$el.addClass('modal hide');
             this.$el.css({opacity: 0, scale: 0.7});
             $("body").append(this.el);
 
             this.dialog = this.$el.omniWindow({
                 overlay: {
                     selector: '#modal-overlay',
-                    hideClass: 'modal-closed',
+                    hideClass: 'hide',
                     animations: {
                         hide: function(subjects, internalCallback) {
                             subjects.overlay.fadeOut(400, function() {
@@ -35,7 +37,7 @@ define(['jquery', 'backbone', 'underscore', 'omniwindow'], function($, Backbone,
                             });
                         }}},
                 modal: {
-                    hideClass: 'modal-closed',
+                    hideClass: 'hide',
                     animations: {
                         hide: function(subjects, internalCallback) {
                             subjects.modal.transition({opacity: 'hide', scale: 0.7}, 250, function() {
@@ -53,7 +55,11 @@ define(['jquery', 'backbone', 'underscore', 'omniwindow'], function($, Backbone,
             return this;
         },
         renderContent: function() {
-            return $('<h1>Dialog</h1>');
+            return $('<h1>Content!</h1>');
+        },
+
+        getHeader: function() {
+            return 'Dialog';
         },
 
         show: function() {
@@ -61,6 +67,8 @@ define(['jquery', 'backbone', 'underscore', 'omniwindow'], function($, Backbone,
                 this.render();
 
             this.dialog.trigger('show');
+
+            // TODO: set focus on first element
         },
 
         hide: function() {
-- 
cgit v1.2.3