From f370ef06ad9db2e47edba02b99271137324997cf Mon Sep 17 00:00:00 2001 From: RaNaN Date: Sun, 23 Sep 2012 21:04:47 +0200 Subject: added some animations, code for show/hiding items --- module/web/setup_app.py | 13 ++++++ module/web/static/css/default/style.less | 7 +++- module/web/static/js/utils/animations.js | 55 ++++++++++++++++++++++++- module/web/static/js/views/abstract/itemView.js | 36 ++++++++++++++++ module/web/static/js/views/modal/modalView.js | 2 +- module/web/static/js/views/packageTreeView.js | 39 +++++++++++++----- module/web/static/js/views/packageView.js | 29 ++++++------- module/web/templates/default/dashboard.html | 6 +-- module/web/templates/default/setup.html | 16 +++++++ module/web/webinterface.py | 1 + 10 files changed, 172 insertions(+), 32 deletions(-) create mode 100644 module/web/setup_app.py create mode 100644 module/web/static/js/views/abstract/itemView.js create mode 100644 module/web/templates/default/setup.html (limited to 'module/web') diff --git a/module/web/setup_app.py b/module/web/setup_app.py new file mode 100644 index 000000000..adbd361a7 --- /dev/null +++ b/module/web/setup_app.py @@ -0,0 +1,13 @@ +#!/usr/bin/env python +# -*- coding: utf-8 -*- + +from bottle import route, request, response, HTTPError + +from webinterface import PYLOAD, PROJECT_DIR, SETUP, env +from utils import render_to_response + + +@route("/setup") +def setup(): + + return render_to_response('setup.html') \ No newline at end of file diff --git a/module/web/static/css/default/style.less b/module/web/static/css/default/style.less index 203135e97..a22f29999 100644 --- a/module/web/static/css/default/style.less +++ b/module/web/static/css/default/style.less @@ -292,7 +292,7 @@ footer h2 { margin-bottom: 5px; } -#dash-nav li > a { +#dash-nav > li > a { margin-top: 5px; } @@ -315,4 +315,9 @@ footer h2 { #dash-nav input, #dash-nav button { padding-top: 2px; padding-bottom: 2px; +} + +#dash-nav .dropdown-menu i { + margin-top: 4px; + padding-right: 5px; } \ No newline at end of file diff --git a/module/web/static/js/utils/animations.js b/module/web/static/js/utils/animations.js index 9b1448f61..18360c526 100644 --- a/module/web/static/js/utils/animations.js +++ b/module/web/static/js/utils/animations.js @@ -10,9 +10,58 @@ define(['jquery', 'underscore', 'transit'], function(jQuery, _) { }; }); + // TODO: sloppy chaining + // in functions not possible without previous out + + jQuery.fn.zapIn = function(speed, easing, callback) { + var height = this.data('height') || '100%'; + this.transition({ + height: height, + scale: [1, 1], + opacity: 'show' + }, speed, easing, callback); + + }; + + jQuery.fn.zapOut = function(speed, easing, callback) { + if (!this.data('height')) { + var height = this.height(); + this.css({height: height}); + this.data('height', height) + } + this.transition({ + height: '0px', + scale: [1, 0], + opacity: 'hide' + }, speed, easing, callback); + + }; + + jQuery.fn.slideIn = function(speed, easing, callback) { + var height = this.data('height') || '100%'; + this.transition({ + height: height, + opacity: 'show' + }, speed, easing, callback); + + }; + + jQuery.fn.slideOut = function(speed, easing, callback) { + if (!this.data('height')) { + var height = this.height(); + this.css({height: height, overflow: 'hidden'}); + this.data('height', height) + } + this.transition({ + height: '0px', + opacity: 'hide' + }, speed, easing, callback); + + }; + jQuery.fn._transit = jQuery.fn.transit; - // Over riding transit plugin to support hide and show + // Overriding 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; @@ -23,7 +72,9 @@ define(['jquery', 'underscore', 'transit'], function(jQuery, _) { callback = function() { self.css({display: 'none'}); - if (typeof cb === 'function') { cb.apply(self); } + if (typeof cb === 'function') { + cb.apply(self); + } }; } else if (props && (props.opacity === 'show' || (props.opacity === 1 && props.show === true))) { props.opacity = 1; diff --git a/module/web/static/js/views/abstract/itemView.js b/module/web/static/js/views/abstract/itemView.js new file mode 100644 index 000000000..993764d3e --- /dev/null +++ b/module/web/static/js/views/abstract/itemView.js @@ -0,0 +1,36 @@ +define(['jquery', 'backbone', 'underscore'], function($, Backbone, _) { + + // A view that is meant for temporary displaying + // All events must be unbound in onDestroy + return Backbone.View.extend({ + + tagName: 'li', + destroy: function() { + this.undelegateEvents(); + this.unbind(); + if (this.onDestroy){ + this.onDestroy(); + } + this.$el.removeData().unbind(); + this.remove(); + }, + + + hide: function() { + this.$el.zapOut(); + }, + + show: function() { + this.$el.zapIn(); + }, + + load: function() { + this.model.fetch(); + }, + + delete: function() { + this.model.destroy(); + } + + }); +}); \ 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 index 297808ead..05cb39c33 100644 --- a/module/web/static/js/views/modal/modalView.js +++ b/module/web/static/js/views/modal/modalView.js @@ -44,7 +44,7 @@ define(['jquery', 'backbone', 'underscore', 'text!tpl/default/modal.html', 'omni }, show: function(subjects, internalCallback) { - subjects.modal.transition({opacity: 'show', scale: 1}, 400, function() { + subjects.modal.transition({opacity: 'show', scale: 1, delay: 100}, 300, function() { internalCallback(subjects); }); }} diff --git a/module/web/static/js/views/packageTreeView.js b/module/web/static/js/views/packageTreeView.js index 3cef27601..3329c9582 100644 --- a/module/web/static/js/views/packageTreeView.js +++ b/module/web/static/js/views/packageTreeView.js @@ -4,11 +4,12 @@ define(['jquery', 'backbone', 'underscore', 'models/TreeCollection', 'views/pack // Renders whole PackageView return Backbone.View.extend({ - el: '#dashboard', + el: '#content', events: { 'click #add': 'addPackage', - 'keypress #name': 'addOnEnter' + 'keypress #name': 'addOnEnter', + 'click #show_active': 'filter' }, initialize: function() { @@ -25,27 +26,29 @@ define(['jquery', 'backbone', 'underscore', 'models/TreeCollection', 'views/pack render: function() { var packs = this.tree.get('packages'), - files = this.tree.get('files'); + files = this.tree.get('files'), + el = this.$('#dashboard'); - this.$el.empty() - this.$el.append($('Root: ' + this.tree.get('root').get('name') + ' ')); - this.$el.append($('')); - this.$el.append($(' Add
')); + el.empty(); + el.append($('Root: ' + this.tree.get('root').get('name') + ' ')); + el.append($('')); + el.append($(' Add
')); var ul = $(''); packs.each(function(pack) { ul.append(new packageView({model: pack}).render().el); }); - this.$el.append(ul); - this.$el.append($('
Files: ' + files.size() + '
')); + el.append(ul); + el.append($('
Files: ' + files.size() + '
')); ul = $(''); files.each(function(file) { ul.append(new fileView({model: file}).render().el); }); - this.$el.append(ul); + el.append(ul); + $('#name').focus(); return this; }, @@ -55,7 +58,7 @@ define(['jquery', 'backbone', 'underscore', 'models/TreeCollection', 'views/pack this.addPackage(e); }, - addPackage: function() { + addPackage: function(e) { var self = this; var settings = { type: 'POST', @@ -72,6 +75,20 @@ define(['jquery', 'backbone', 'underscore', 'models/TreeCollection', 'views/pack $.ajax('api/addPackage', settings); $('#name').val(''); + }, + + toggle: false, + + filter: function(e) { + var self = this; + this.tree.get('packages').each(function(item){ + if(!self.toggle) + item.trigger('filter:added'); + else + item.trigger('filter:removed'); + + }); + self.toggle ^= true; } }); }); \ No newline at end of file diff --git a/module/web/static/js/views/packageView.js b/module/web/static/js/views/packageView.js index 171325d1f..1fbcd0613 100644 --- a/module/web/static/js/views/packageView.js +++ b/module/web/static/js/views/packageView.js @@ -1,24 +1,30 @@ -define(['jquery', 'backbone', 'underscore', 'views/fileView', 'utils/lazyRequire'], - function($, Backbone, _, fileView, lazyLoader) { +define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView', 'utils/lazyRequire'], + function($, itemView, _, fileView, lazyLoader) { // Renders a single package item - return Backbone.View.extend({ + return itemView.extend({ tagName: 'li', events: { 'click .load': 'load', 'click .delete': 'delete', - 'click .show-dialog': 'show' + 'click .show-dialog': 'show_dialog' }, modal: null, requireOnce: lazyLoader.once(), initialize: function() { + this.model.on('filter:added', this.hide, this); + this.model.on('filter:removed', this.show, this); this.model.on('change', this.render, this); this.model.on('remove', this.unrender, this); }, + onDestroy: function() { + this.modal.off('filter:added', this.hide); // TODO + }, + render: function() { this.$el.html('Package ' + this.model.get('pid') + ': ' + this.model.get('name')); this.$el.append($(' Load')); @@ -36,18 +42,13 @@ define(['jquery', 'backbone', 'underscore', 'views/fileView', 'utils/lazyRequire }, unrender: function() { - this.$el.remove(); - }, - - load: function() { - this.model.fetch(); - }, - - delete: function() { - this.model.destroy(); + var self = this; + this.$el.zapOut(function() { + self.destroy(); + }); }, - show: function() { + show_dialog: function() { var self = this; this.requireOnce(['views/modal/modalView'], function(modalView){ if (self.modal === null) diff --git a/module/web/templates/default/dashboard.html b/module/web/templates/default/dashboard.html index adcc6dc71..f6c6513aa 100644 --- a/module/web/templates/default/dashboard.html +++ b/module/web/templates/default/dashboard.html @@ -33,8 +33,8 @@ @@ -58,7 +58,7 @@ Unfinished
  • - All + All
    • diff --git a/module/web/templates/default/setup.html b/module/web/templates/default/setup.html new file mode 100644 index 000000000..e5c9f4b8c --- /dev/null +++ b/module/web/templates/default/setup.html @@ -0,0 +1,16 @@ +{% extends 'default/base.html' %} +{% block title %} + {{_("Setup")}} - {{ super()}} +{% endblock %} + +{% block content %} +
    +

    You did it!

    +

    pyLoad is running and ready for configuration.

    +

    + + Go on + +

    +
    +{% endblock %} \ No newline at end of file diff --git a/module/web/webinterface.py b/module/web/webinterface.py index 196825bfb..4438c36bb 100644 --- a/module/web/webinterface.py +++ b/module/web/webinterface.py @@ -120,6 +120,7 @@ if PREFIX: web = PrefixMiddleware(web, prefix=PREFIX) import pyload_app +import setup_app import cnl_app import api_app -- cgit v1.2.3