From 332caf0bbaf582ce484eeedd586335fad000434c Mon Sep 17 00:00:00 2001
From: RaNaN <Mast3rRaNaN@hotmail.de>
Date: Tue, 14 Aug 2012 22:34:45 +0200
Subject: added dialog window
---
module/web/static/css/default/style.css | 6 +-
module/web/static/css/omniwindow.css | 72 +++++++++++++
module/web/static/js/libs/jquery.omniwindow.js | 141 +++++++++++++++++++++++++
module/web/templates/default/base.html | 130 +++++++++++++++--------
4 files changed, 303 insertions(+), 46 deletions(-)
create mode 100644 module/web/static/css/omniwindow.css
create mode 100644 module/web/static/js/libs/jquery.omniwindow.js
(limited to 'module/web')
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>
--
cgit v1.2.3