added dialog window

4 files changed, 303 insertions, 46 deletions

diff --git a/module/web/static/css/default/style.css b/module/web/static/css/default/style.css
index f882e4a43..87cd60831 100644
--- a/module/web/static/css/default/style.css
+++ b/module/web/static/css/default/style.css
@@ -157,7 +157,11 @@ header .logo {
 

 #globalprogress {

     height: 8px;

-    margin: 8px 5px;

+    margin: 8px 5px 0;

+}

+

+#globalprogress .ui-widget-header {

+    background: #fee247;

 }

 

 #speedgraph {

diff --git a/module/web/static/css/omniwindow.css b/module/web/static/css/omniwindow.css
new file mode 100644
index 000000000..12f4d451c
--- /dev/null
+++ b/module/web/static/css/omniwindow.css
@@ -0,0 +1,72 @@
+/* Default class for an overlay */
+.ow-overlay {
+     content: " ";
+     height: 100%;
+     width: 100%;
+     position: absolute;
+     left: 0;
+     top: 0;
+     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;
+    margin: 8em auto;
+    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/libs/jquery.omniwindow.js b/module/web/static/js/libs/jquery.omniwindow.js
new file mode 100644
index 000000000..e1f0b8f77
--- /dev/null
+++ b/module/web/static/js/libs/jquery.omniwindow.js
@@ -0,0 +1,141 @@
+// jQuery OmniWindow plugin
+// @version:  0.7.0
+// @author:   Rudenka Alexander (mur.mailbox@gmail.com)
+// @license:  MIT
+
+;(function($) {
+  "use strict";
+  $.fn.extend({
+    omniWindow: function(options) {
+
+      options = $.extend(true, {
+        animationsPriority: {
+          show: ['overlay', 'modal'],
+          hide: ['modal', 'overlay']
+        },
+        overlay: {
+          selector: '.ow-overlay',
+          hideClass: 'ow-closed',
+          animations: {
+            show: function(subjects, internalCallback) { return internalCallback(subjects); },
+            hide: function(subjects, internalCallback) { return internalCallback(subjects); },
+            internal: {
+              show: function(subjects){ subjects.overlay.removeClass(options.overlay.hideClass); },
+              hide: function(subjects){ subjects.overlay.addClass(options.overlay.hideClass); }
+            }
+          }
+        },
+        modal:   {
+          hideClass: 'ow-closed',
+          animations: {
+            show: function(subjects, internalCallback) { return internalCallback(subjects); },
+            hide: function(subjects, internalCallback) { return internalCallback(subjects); },
+            internal: {
+              show: function(subjects){ subjects.modal.removeClass(options.modal.hideClass); },
+              hide: function(subjects){ subjects.modal.addClass(options.modal.hideClass); }
+            }
+          },
+          internal: {
+            stateAttribute: 'ow-active'
+          }
+        },
+        eventsNames: {
+          show: 'show.ow',
+          hide: 'hide.ow',
+          internal: {
+            overlayClick:  'click.ow',
+            keyboardKeyUp: 'keyup.ow'
+          }
+        },
+        callbacks: {                                                                                  // Callbacks execution chain
+          beforeShow:  function(subjects, internalCallback) { return internalCallback(subjects); },   // 1 (stop if retruns false)
+          positioning: function(subjects, internalCallback) { return internalCallback(subjects); },   // 2
+          afterShow:   function(subjects, internalCallback) { return internalCallback(subjects); },   // 3
+          beforeHide:  function(subjects, internalCallback) { return internalCallback(subjects); },   // 4 (stop if retruns false)
+          afterHide:   function(subjects, internalCallback) { return internalCallback(subjects); },   // 5
+          internal: {
+            beforeShow: function(subjects) {
+              if (subjects.modal.data(options.modal.internal.stateAttribute)) {
+                return false;
+              } else {
+                subjects.modal.data(options.modal.internal.stateAttribute, true);
+                return true;
+              }
+            },
+            afterShow: function(subjects) {
+              $(document).on(options.eventsNames.internal.keyboardKeyUp, function(e) {
+                if (e.keyCode === 27) {                                              // if the key pressed is the ESC key
+                  subjects.modal.trigger(options.eventsNames.hide);
+                }
+              });
+
+              subjects.overlay.on(options.eventsNames.internal.overlayClick, function(){
+                subjects.modal.trigger(options.eventsNames.hide);
+              });
+            },
+            positioning: function(subjects) {
+              subjects.modal.css('margin-left', Math.round(subjects.modal.outerWidth() / -2));
+            },
+            beforeHide: function(subjects) {
+              if (subjects.modal.data(options.modal.internal.stateAttribute)) {
+                subjects.modal.data(options.modal.internal.stateAttribute, false);
+                return true;
+              } else {
+                return false;
+              }
+            },
+            afterHide: function(subjects) {
+              subjects.overlay.off(options.eventsNames.internal.overlayClick);
+              $(document).off(options.eventsNames.internal.keyboardKeyUp);
+
+              subjects.overlay.css('display', ''); // clear inline styles after jQ animations
+              subjects.modal.css('display', '');
+            }
+          }
+        }
+      }, options);
+
+      var animate = function(process, subjects, callbackName) {
+        var first  = options.animationsPriority[process][0],
+            second = options.animationsPriority[process][1];
+
+        options[first].animations[process](subjects, function(subjs) {        // call USER's    FIRST animation (depends on priority)
+          options[first].animations.internal[process](subjs);                 // call internal  FIRST animation
+
+          options[second].animations[process](subjects, function(subjs) {     // call USER's    SECOND animation
+            options[second].animations.internal[process](subjs);              // call internal  SECOND animation
+
+                                                                              // then we need to call USER's
+                                                                              // afterShow of afterHide callback
+            options.callbacks[callbackName](subjects, options.callbacks.internal[callbackName]);
+          });
+        });
+      };
+
+      var showModal = function(subjects) {
+        if (!options.callbacks.beforeShow(subjects, options.callbacks.internal.beforeShow)) { return; } // cancel showing if beforeShow callback return false
+
+        options.callbacks.positioning(subjects, options.callbacks.internal.positioning);
+
+        animate('show', subjects, 'afterShow');
+      };
+
+      var hideModal = function(subjects) {
+        if (!options.callbacks.beforeHide(subjects, options.callbacks.internal.beforeHide)) { return; } // cancel hiding if beforeHide callback return false
+
+        animate('hide', subjects, 'afterHide');
+      };
+
+
+      var $overlay = $(options.overlay.selector);
+
+      return this.each(function() {
+        var $modal  = $(this);
+        var subjects = {modal: $modal, overlay: $overlay};
+
+        $modal.bind(options.eventsNames.show, function(){ showModal(subjects); })
+              .bind(options.eventsNames.hide, function(){ hideModal(subjects); });
+      });
+    }
+  });
+})(jQuery);
\ No newline at end of file
diff --git a/module/web/templates/default/base.html b/module/web/templates/default/base.html
index d5d51d989..5e1b2089a 100644
--- a/module/web/templates/default/base.html
+++ b/module/web/templates/default/base.html
@@ -9,11 +9,13 @@
     <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" src="static/js/libs/jquery-1.8.0.min.js"></script>

     <script type="text/javascript" src="static/js/libs/jquery.flot.min.js"></script>

     <script type="text/javascript" src="static/js/libs/jquery-ui-1.8.22.custom.min.js"></script>

     <script type="text/javascript" src="static/js/libs/jquery.qtip.min.js"></script>

+    <script type="text/javascript" src="static/js/libs/jquery.omniwindow.js"></script>

 

     <script type="text/javascript" src="static/js/libs/underscore-min.js"></script>

     <script type="text/javascript" src="static/js/libs/backbone-min.js"></script>

@@ -32,57 +34,50 @@
             <span class="title">pyLoad</span>

 

             {% if user %}

-            <div id="notification_div">

-                No runnings tasks

-                <div id="globalprogress"></div>

-            </div>

-            <script>

-                $(document).ready(function() {

-                    $("#globalprogress").progressbar({ value: 37 });

-                });

-            </script>

-

-            <div class="header_block">

-                <div class="header_icon" id="header_user">

-                    <span>{{ user.name }}</span>

+                <div id="notification_div">

+                    No runnings tasks

+                    <div id="globalprogress"></div>

                 </div>

-                <div class="header_text">

-                    <a href="logout" id="header_logout">{{ _("Logout")}}</a>

+                <script>

+                    $(document).ready(function () {

+                        $("#globalprogress").progressbar({ value:37 });

+                    });

+                </script>

+

+                <div class="header_block">

+                    <div class="header_icon" id="header_user">

+                        <span>{{ user.name }}</span>

+                    </div>

+                    <div class="header_text">

+                        <a href="logout" id="header_logout">{{ _("Logout") }}</a>

+                    </div>

                 </div>

-            </div>

-            <div id="speedgraph"></div>

-            <div class="header_block">

-                <div class="header_icon" id="header_speed">

-                    <span class="header_text">500 kb/s</span>

+                <div id="speedgraph"></div>

+                <div class="header_block">

+                    <div class="header_icon" id="header_speed">

+                        <span class="header_text">500 kb/s</span>

+                    </div>

+                    <div class="header_icon" id="header_qeuue">

+                        <span class="header_text">5 / 125</span>

+                    </div>

                 </div>

-                <div class="header_icon" id="header_qeuue">

-                    <span class="header_text">5 / 125</span>

-                </div>

-            </div>

             {% endif %}

         </div>

     </header>

     <div id="push"></div>

     <div id="content">

-        <a href="#test" class="nyroModal">DOM Element (hidden div)</a>

-        <div id="test" style="display: none; width: 600px;">

-            <a href="demoSent.php" class="nyroModal">Open a new modal</a><br />

-            Test

+        <div class="modal window-container zoomout ow-closed">

+            <h1>Close me!</h1>

+            <a class='close-button' href='#'>X</a>

         </div>

-        <script type="text/javascript">

-            var dialog;

-            $(function() {

-//                dialog = $('.nyroModal').nyroModal();

-            });

-        </script>

+        <a id="dialog_open" href="#">Show Dialog</a>

         {% block content %}

         {% endblock content %}

     </div>

 </div>

 <footer>

     <div class="center">

-        <div class="logo" src="static/img/default/logo_grey.png"></div>

-

+        <div class="logo"></div>

         <div class="block copyright">

             © 2008-2012<br>

             The pyLoad Team<br>

@@ -178,22 +173,67 @@
     });

 </script>

 <script type="text/javascript">

-    $(function(){

+    $(function () {

         $("#header_speed").qtip({

-            content : {

-                text: "Download speed"

+            content:{

+                text:"Download speed"

             },

-            position : {

-                my: 'top center',

-                at: 'bottom center'

+            position:{

+                my:'top center',

+                at:'bottom center'

             },

-            show: { delay : 1000},

-            style : {

-                classes: 'ui-tooltip-dark ui-tooltip-shadow'

+            show:{ delay:1000},

+            style:{

+                classes:'ui-tooltip-dark ui-tooltip-shadow'

             }

         })

     });

 </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(function () {

+                            internalCallback(subjects); // call internal callback

+                        });

+                    },

+

+                    show:function (subjects, internalCallback) {

+                        subjects.modal.fadeIn(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>

 {% block deferred %}

 {% endblock deferred %}

 </body>