summaryrefslogtreecommitdiffstats
path: root/module/web
diff options
context:
space:
mode:
Diffstat (limited to 'module/web')
-rw-r--r--module/web/static/css/default/style.css40
-rw-r--r--module/web/static/css/omniwindow.css72
-rw-r--r--module/web/static/js/default.js4
-rw-r--r--module/web/static/js/utils/animations.js36
-rw-r--r--module/web/static/js/views/modal/modalView.js76
-rw-r--r--module/web/static/js/views/packageTreeView.js3
-rw-r--r--module/web/static/js/views/packageView.js16
-rw-r--r--module/web/templates/default/base.html50
8 files changed, 170 insertions, 127 deletions
diff --git a/module/web/static/css/default/style.css b/module/web/static/css/default/style.css
index fb33875a7..b871c1d3d 100644
--- a/module/web/static/css/default/style.css
+++ b/module/web/static/css/default/style.css
@@ -279,4 +279,44 @@ footer h2 {
line-height: 16px;
margin: 0;
padding-bottom: 6px;
+}
+
+
+/*
+ Modal Dialogs
+*/
+.modal {
+ top: 100px;
+ left: 50%;
+ position: fixed;
+ width: 300px;
+ height: 300px;
+ margin-left: -150px;
+ z-index: 100;
+ background: #fcfcfc;
+ padding: 10px 20px 20px;
+ box-shadow: 0 0 30px rgba(0,0,0,0.2);
+}
+
+#modal-overlay {
+ content: " ";
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ left: 0;
+ top: 0; /* TODO change gradient at all browser */
+ background: -moz-radial-gradient(center, ellipse cover, rgba(236,208,66,0) 0%, rgba(40,119,171,0.9) 100%);
+ /*background: -moz-radial-gradient(center, ellipse cover, rgba(127,127,0,0) 0%, rgba(127,127,127,0.9) 100%);*/
+ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(127,127,127,0)), color-stop(100%,rgba(127,127,127,0.9)));
+ background: -webkit-radial-gradient(center, ellipse cover, rgba(127,127,127,0) 0%,rgba(127,127,127,0.9) 100%);
+ background: -o-radial-gradient(center, ellipse cover, rgba(127,127,127,0) 0%,rgba(127,127,127,0.9) 100%);
+ background: -ms-radial-gradient(center, ellipse cover, rgba(127,127,127,0) 0%,rgba(127,127,127,0.9) 100%);
+ background: radial-gradient(center, ellipse cover, rgba(127,127,127,0) 0%,rgba(127,127,127,0.9) 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007f7f7f', endColorstr='#e67f7f7f',GradientType=1 );
+ z-index: 50;
+ opacity: 0;
+}
+
+.modal-closed {
+ display: none;
} \ No newline at end of file
diff --git a/module/web/static/css/omniwindow.css b/module/web/static/css/omniwindow.css
deleted file mode 100644
index 4947ea3c7..000000000
--- a/module/web/static/css/omniwindow.css
+++ /dev/null
@@ -1,72 +0,0 @@
-/* Default class for an overlay */
-.ow-overlay {
- content: " ";
- height: 100%;
- width: 100%;
- position: absolute;
- left: 0;
- top: 0; /* TODO change gradient at all browser */
- background: -moz-radial-gradient(center, ellipse cover, rgba(236,208,66,0) 0%, rgba(40,119,171,0.9) 100%);
- /*background: -moz-radial-gradient(center, ellipse cover, rgba(127,127,0,0) 0%, rgba(127,127,127,0.9) 100%);*/
- background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(127,127,127,0)), color-stop(100%,rgba(127,127,127,0.9)));
- background: -webkit-radial-gradient(center, ellipse cover, rgba(127,127,127,0) 0%,rgba(127,127,127,0.9) 100%);
- background: -o-radial-gradient(center, ellipse cover, rgba(127,127,127,0) 0%,rgba(127,127,127,0.9) 100%);
- background: -ms-radial-gradient(center, ellipse cover, rgba(127,127,127,0) 0%,rgba(127,127,127,0.9) 100%);
- background: radial-gradient(center, ellipse cover, rgba(127,127,127,0) 0%,rgba(127,127,127,0.9) 100%);
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007f7f7f', endColorstr='#e67f7f7f',GradientType=1 );
- z-index: 50;
- }
-
-/* Default class for both hidden overlay and modal window */
-.ow-closed {
- display: none;
-}
-
-/* Default class for modal window */
-.modal {
- left: 50%;
- position: fixed;
- width: 300px;
- height: 300px;
- z-index: 100;
- background-color: #ffffff;
-}
-
-/* Animations */
-.window-container {
- background: #fcfcfc;
- opacity: 0;
- width: 500px;
- padding: 10px 20px 20px;
- text-align: left;
- border-radius: 3px;
- box-shadow: 0px 0px 30px rgba(0,0,0,0.2);
- -webkit-transition: 0.4s ease-out;
- -moz-transition: 0.4s ease-out;
- -ms-transition: 0.4s ease-out;
- -o-transition: 0.4s ease-out;
- transition: 0.4s ease-out;
-}
-
-.zoomin {
- -webkit-transform: scale(1.2);
- -moz-transform: scale(1.2);
- -ms-transform: scale(1.2);
- transform: scale(1.2);
-}
-
-.zoomout {
- -webkit-transform: scale(0.7);
- -moz-transform: scale(0.7);
- -ms-transform: scale(0.7);
- transform: scale(0.7);
-}
-
-.window-container-visible {
- -webkit-transform: scale(1);
- -moz-transform: scale(1);
- -ms-transform: scale(1);
- transform: scale(1);
- opacity: 1;
-}
-
diff --git a/module/web/static/js/default.js b/module/web/static/js/default.js
index bed397712..d4330da81 100644
--- a/module/web/static/js/default.js
+++ b/module/web/static/js/default.js
@@ -8,6 +8,7 @@ require.config({
jquery:"libs/jquery-1.8.0",
jqueryui:"libs/jqueryui",
flot:"libs/jquery.flot.min",
+ transit:"libs/jquery.transit-0.1.3",
omniwindow: "libs/jquery.omniwindow",
underscore:"libs/lodash-0.5.2",
@@ -26,12 +27,13 @@ require.config({
exports:"Backbone" //attaches "Backbone" to the window object
},
"flot" : ["jquery"],
+ "transit" : ["jquery"],
"omniwindow" : ["jquery"]
} // end Shim Configuration
});
-define('default', ['jquery', 'backbone', 'routers/defaultRouter', 'views/headerView', 'views/packageTreeView'],
+define('default', ['jquery', 'backbone', 'routers/defaultRouter', 'views/headerView', 'views/packageTreeView', 'utils/animations'],
function ($, Backbone, DefaultRouter, HeaderView, TreeView) {
diff --git a/module/web/static/js/utils/animations.js b/module/web/static/js/utils/animations.js
new file mode 100644
index 000000000..9b1448f61
--- /dev/null
+++ b/module/web/static/js/utils/animations.js
@@ -0,0 +1,36 @@
+define(['jquery', 'underscore', 'transit'], function(jQuery, _) {
+
+ // Overwrite common animations with transitions
+ jQuery.each({
+ fadeIn: { opacity: "show" },
+ fadeOut: { opacity: "hide" }
+ }, function(name, props) {
+ jQuery.fn[ name ] = function(speed, easing, callback) {
+ return this.transition(props, speed, easing, callback);
+ };
+ });
+
+ jQuery.fn._transit = jQuery.fn.transit;
+
+ // Over riding transit plugin to support hide and show
+ // Props retains it properties across multiple calls, therefore props.show value is introduced
+ jQuery.fn.transit = jQuery.fn.transition = function(props, duration, easing, callback) {
+ var self = this;
+ var cb = callback;
+ if (props && (props.opacity === 'hide' || (props.opacity === 0 && props.show === true))) {
+ props.opacity = 0;
+ props.show = true;
+
+ callback = function() {
+ self.css({display: 'none'});
+ if (typeof cb === 'function') { cb.apply(self); }
+ };
+ } else if (props && (props.opacity === 'show' || (props.opacity === 1 && props.show === true))) {
+ props.opacity = 1;
+ props.show = true;
+ this.css({display: 'block'});
+ }
+
+ return this._transit(props, duration, easing, callback);
+ };
+}); \ No newline at end of file
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
diff --git a/module/web/static/js/views/packageTreeView.js b/module/web/static/js/views/packageTreeView.js
index 91768ec04..e26924db2 100644
--- a/module/web/static/js/views/packageTreeView.js
+++ b/module/web/static/js/views/packageTreeView.js
@@ -12,8 +12,6 @@ define(['jquery', 'backbone', 'underscore', 'models/TreeCollection', 'views/pack
},
initialize: function() {
- _.bindAll(this, 'render');
-
this.tree = new TreeCollection();
},
@@ -26,7 +24,6 @@ define(['jquery', 'backbone', 'underscore', 'models/TreeCollection', 'views/pack
},
render: function() {
-
this.$el.html("<br>");
var packs = this.tree.get('packages'),
diff --git a/module/web/static/js/views/packageView.js b/module/web/static/js/views/packageView.js
index a2e0abf31..b820b9ba8 100644
--- a/module/web/static/js/views/packageView.js
+++ b/module/web/static/js/views/packageView.js
@@ -1,4 +1,5 @@
-define(['jquery', 'backbone', 'underscore', 'views/fileView'], function($, Backbone, _, fileView) {
+define(['jquery', 'backbone', 'underscore', 'views/fileView', 'views/modal/modalView'],
+ function($, Backbone, _, fileView, modalView) {
// Renders a single package item
return Backbone.View.extend({
@@ -6,9 +7,12 @@ define(['jquery', 'backbone', 'underscore', 'views/fileView'], function($, Backb
tagName: 'li',
events: {
'click .load': 'load',
- 'click .delete': 'delete'
+ 'click .delete': 'delete',
+ 'click .show': 'show'
},
+ modal: null,
+
initialize: function() {
this.model.on('change', this.render, this);
this.model.on('remove', this.unrender, this);
@@ -18,6 +22,7 @@ define(['jquery', 'backbone', 'underscore', 'views/fileView'], function($, Backb
this.$el.html('Package ' + this.model.get('pid') + ': ' + this.model.get('name'));
this.$el.append($('<a class="load" href="#"> Load</a>'));
this.$el.append($('<a class="delete" href="#"> Delete</a>'));
+ this.$el.append($('<a class="show" href="#"> Show</a>'));
if (this.model.isLoaded()) {
var ul = $('<ul></ul>');
@@ -39,6 +44,13 @@ define(['jquery', 'backbone', 'underscore', 'views/fileView'], function($, Backb
delete: function() {
this.model.destroy();
+ },
+
+ show: function() {
+ if (this.modal === null)
+ this.modal = new modalView();
+
+ this.modal.show();
}
});
diff --git a/module/web/templates/default/base.html b/module/web/templates/default/base.html
index f1f779760..e4c606efa 100644
--- a/module/web/templates/default/base.html
+++ b/module/web/templates/default/base.html
@@ -13,7 +13,6 @@
<link href="static/css/default/style.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="static/css/black-tie/jquery-ui-1.8.22.custom.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="static/css/jquery.qtip.min.css" rel="stylesheet" type="text/css" media="screen"/>
- <link href="static/css/omniwindow.css" rel="stylesheet" type="text/css" media="screen"/>
<script type="text/javascript" data-main="static/js/default" src="static/js/libs/require-2.0.6.js"></script>
<script>
@@ -69,10 +68,6 @@
<p>{{ msg }}</p>
{% endfor %}
- <div class="modal window-container zoomout ow-closed">
- <h1>Close me!</h1>
- <a class='close-button' href='#'>X</a>
- </div>
{% block content %}
{% endblock content %}
</div>
@@ -211,50 +206,7 @@
});
});
</script>
-<script type="text/javascript">
- $(function () {
- var dialog = $('div.modal').omniWindow({
- overlay:{
- animations:{
- hide:function (subjects, internalCallback) {
- subjects.overlay.fadeOut(400, function () {
- internalCallback(subjects); // call internal callback
- })
- },
- show:function (subjects, internalCallback) {
- subjects.overlay.fadeIn(250, function () {
- internalCallback(subjects); // call internal callback
- });
- }}},
- modal:{
- animations:{
- hide:function (subjects, internalCallback) {
- subjects.modal.removeClass('window-container-visible');
- subjects.modal.fadeOut(250, function () {
- internalCallback(subjects); // call internal callback
- });
- },
-
- show:function (subjects, internalCallback) {
- subjects.modal.fadeIn(0, function () {
- subjects.modal.addClass('window-container-visible');
- internalCallback(subjects); // call internal callback
- });
- }}
- }});
-
- $('#dialog_open').click(function (e) {
- e.preventDefault();
- dialog.trigger('show');
- });
-
- $('.close-button').click(function (e) {
- e.preventDefault();
- dialog.trigger('hide');
- });
- });
-</script>
-<div class="ow-overlay ow-closed"></div>
+<div id="modal-overlay" class="modal-closed"></div>
{% block deferred %}
{% endblock deferred %}
</body>
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-31 02:32:32 +0100