summaryrefslogtreecommitdiffstats
path: root/module/web/static
diff options
context:
space:
mode:
Diffstat (limited to 'module/web/static')
-rw-r--r--module/web/static/css/default/dashboard.less5
-rw-r--r--module/web/static/css/default/style.less11
-rw-r--r--module/web/static/js/default.js10
-rw-r--r--module/web/static/js/models/Package.js1
-rw-r--r--module/web/static/js/utils/animations.js36
-rw-r--r--module/web/static/js/views/abstract/itemView.js3
-rw-r--r--module/web/static/js/views/actionbarView.js28
-rw-r--r--module/web/static/js/views/dashboardView.js (renamed from module/web/static/js/views/packageTreeView.js)246
-rw-r--r--module/web/static/js/views/packageView.js21
-rw-r--r--module/web/static/js/views/selectionView.js59
10 files changed, 246 insertions, 174 deletions
diff --git a/module/web/static/css/default/dashboard.less b/module/web/static/css/default/dashboard.less
index a582e7326..4d504fdc3 100644
--- a/module/web/static/css/default/dashboard.less
+++ b/module/web/static/css/default/dashboard.less
@@ -58,6 +58,8 @@
position: absolute;
height: @frame-bottom;
line-height: @frame-bottom;
+ font-size: 12px;
+ text-align: center;
border-radius: 0;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
@@ -66,6 +68,7 @@
right: 0;
margin-bottom: 0;
background-image: none;
+ color: @light;
background-color: @yellow;
}
@@ -176,7 +179,7 @@
width: 50%;
font-weight: bold;
- i {
+ .icon-file {
cursor: move;
}
diff --git a/module/web/static/css/default/style.less b/module/web/static/css/default/style.less
index 7db464c92..3e2a42abf 100644
--- a/module/web/static/css/default/style.less
+++ b/module/web/static/css/default/style.less
@@ -333,8 +333,15 @@ header .logo {
left: 50%;
bottom: -28px;
min-width: 15%;
-// color: @dark;
-// background-color: @light;
+
+ i {
+ cursor: pointer;
+
+ &:hover {
+ color: @yellow;
+ }
+ }
+
}
/*
diff --git a/module/web/static/js/default.js b/module/web/static/js/default.js
index bb9701935..afe624ff9 100644
--- a/module/web/static/js/default.js
+++ b/module/web/static/js/default.js
@@ -1,15 +1,15 @@
-define('default', ['require', 'jquery', 'app', 'views/headerView', 'views/packageTreeView'],
- function(require, $, App, HeaderView, TreeView) {
+define('default', ['require', 'jquery', 'app', 'views/headerView', 'views/dashboardView'],
+ function(require, $, App, HeaderView, DashboardView) {
App.init = function() {
App.header = new HeaderView();
App.header.render();
};
- App.initPackageTree = function() {
+ App.initDashboard = function() {
$(function() {
- App.treeView = new TreeView();
- App.treeView.init();
+ App.dashboard = new DashboardView();
+ App.dashboard.init();
});
};
diff --git a/module/web/static/js/models/Package.js b/module/web/static/js/models/Package.js
index 7539b0673..24f04519e 100644
--- a/module/web/static/js/models/Package.js
+++ b/module/web/static/js/models/Package.js
@@ -17,6 +17,7 @@ define(['jquery', 'backbone', 'underscore', 'collections/FileList', 'require'],
added: -1,
tags: null,
status: -1,
+ shared: false,
packageorder: -1,
stats: null,
fids: null,
diff --git a/module/web/static/js/utils/animations.js b/module/web/static/js/utils/animations.js
index 245614ea7..798f69358 100644
--- a/module/web/static/js/utils/animations.js
+++ b/module/web/static/js/utils/animations.js
@@ -28,13 +28,17 @@ define(['jquery', 'underscore', 'transit'], function(jQuery, _) {
// Shortcut to have a animation when element is added
jQuery.fn.appendWithAnimation = function(element, animation) {
var o = jQuery(this[0]);
+ element = jQuery(element);
+
if (animation === true)
- o.hide();
+ element.hide();
o.append(element);
if (animation === true)
- o.fadeIn();
+ element.fadeIn();
+
+ element.calculateHeight();
return this;
};
@@ -69,34 +73,6 @@ define(['jquery', 'underscore', 'transit'], function(jQuery, _) {
return this;
};
- // 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._transit = jQuery.fn.transit;
// Overriding transit plugin to support hide and show
diff --git a/module/web/static/js/views/abstract/itemView.js b/module/web/static/js/views/abstract/itemView.js
index 7740abe5e..1c14e7dc3 100644
--- a/module/web/static/js/views/abstract/itemView.js
+++ b/module/web/static/js/views/abstract/itemView.js
@@ -24,8 +24,7 @@ define(['jquery', 'backbone', 'underscore'], function($, Backbone, _) {
this.$el.slideDown();
},
-
- delete: function(e) {
+ deleteItem: function(e) {
if(e)
e.stopPropagation();
this.model.destroy();
diff --git a/module/web/static/js/views/actionbarView.js b/module/web/static/js/views/actionbarView.js
new file mode 100644
index 000000000..bdfb9ef7b
--- /dev/null
+++ b/module/web/static/js/views/actionbarView.js
@@ -0,0 +1,28 @@
+define(['jquery', 'backbone', 'underscore', 'app'],
+ function($, Backbone, _, App) {
+
+ // Renders the actionbar for the dashboard
+ return Backbone.View.extend({
+ el: 'ul.actionbar',
+
+ events: {
+ },
+
+ initialize: function() {
+
+ this.$('.search-query').typeahead({
+ minLength: 2,
+ source: this.getAutocompletion
+ });
+
+ },
+
+ render: function() {
+ },
+
+ getAutocompletion: function() {
+ return ["static", "autocompletion", "demo", "with", "some", "keywords",
+ "a very long proposal for autocompletion"];
+ }
+ });
+ }); \ No newline at end of file
diff --git a/module/web/static/js/views/packageTreeView.js b/module/web/static/js/views/dashboardView.js
index 41db0dc2c..7f2b9809a 100644
--- a/module/web/static/js/views/packageTreeView.js
+++ b/module/web/static/js/views/dashboardView.js
@@ -1,115 +1,133 @@
-define(['jquery', 'backbone', 'underscore', 'app', 'models/TreeCollection',
- 'views/packageView', 'views/fileView', 'views/selectionView'],
- function($, Backbone, _, App, TreeCollection, packageView, fileView, selectionView) {
-
- // Renders whole PackageView
- return Backbone.View.extend({
-
- el: '#content',
-
- events: {
- 'click #show_active': 'filter'
- },
-
- // <ul> holding the packages
- packageUL: null,
- // <ul> displaying the files
- fileUL: null,
- // current open model
- opened: null,
- // Current open files
- files: null,
-
- initialize: function() {
- var self = this;
- this.tree = new TreeCollection();
-
- var view = new selectionView(this.tree);
-
- // When package is added we reload the data
- App.vent.on('package:added', function() {
- console.log('Package tree caught, package:added event');
- self.tree.fetch();
- });
-
- App.vent.on('dashboard:loading', _.bind(this.loading, this));
- App.vent.on('dashboard:show', _.bind(this.show, this));
- },
-
- init: function() {
- var self = this;
-
- // TODO: put in separated function
- // TODO: order of elements?
- // Init the tree and callback for package added
- this.tree.fetch({success: function() {
- self.render();
- self.tree.get('packages').on('add', function(pack) {
- console.log('Package ' + pack.get('pid') + ' added to tree');
- self.appendPackage(pack, 0, true);
-
- });
- }});
- },
-
- render: function() {
- var packs = this.tree.get('packages');
- this.files = this.tree.get('files');
-
- this.packageUL = this.$('.package-list');
- packs.each(_.bind(this.appendPackage, this));
-
- this.fileUL = this.$('.file-list');
- this.files.each(_.bind(this.appendFile, this));
-
- return this;
- },
-
- // TODO sorting ?!
- // Append a package to the list, index, animate it
- appendPackage: function(pack, i, animation) {
- var el = new packageView({model: pack}).render().el;
- this.packageUL.appendWithAnimation(el, animation);
- },
-
- appendFile: function(file, i, animation) {
- var el = new fileView({model: file}).render().el;
- this.fileUL.appendWithAnimation(el, animation);
- },
-
- loading: function(model) {
- // nothing to load when it is already open
-// if (this.opened === model)
-// return;
- // TODO: do not rerender already opened
- this.opened = model;
- this.files = null;
-// this.fileUL.fadeOut();
- this.fileUL.empty();
- },
-
- failure: function() {
- // TODO
- },
-
- show: function(files) {
- this.files = files;
- files.each(_.bind(this.appendFile, this));
- this.fileUL.fadeIn();
- },
-
- // TODO: remove this debug stuff
- 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;
- }
- });
+define(['jquery', 'backbone', 'underscore', 'app', 'models/TreeCollection',
+ 'views/packageView', 'views/fileView', 'views/selectionView', 'views/actionbarView'],
+ function($, Backbone, _, App, TreeCollection, packageView, fileView, selectionView, actionbarView) {
+
+ // Renders whole dashboard
+ return Backbone.View.extend({
+
+ el: '#content',
+
+ events: {
+ 'click #show_active': 'filter'
+ },
+
+ // <ul> holding the packages
+ packageUL: null,
+ // <ul> displaying the files
+ fileUL: null,
+ // Current open files
+ files: null,
+ // True when loading animation is running
+ isLoading: false,
+
+ initialize: function() {
+ var self = this;
+ this.tree = new TreeCollection();
+
+ var view = new selectionView(this.tree);
+ view = new actionbarView();
+
+ // When package is added we reload the data
+ App.vent.on('package:added', function() {
+ console.log('Package tree caught, package:added event');
+ self.tree.fetch();
+ });
+
+ // TODO file:added
+
+ App.vent.on('dashboard:loading', _.bind(this.loading, this));
+ App.vent.on('dashboard:contentReady', _.bind(this.contentReady, this));
+ },
+
+ init: function() {
+ var self = this;
+
+ // TODO: put in separated function
+ // TODO: order of elements?
+ // Init the tree and callback for package added
+ this.tree.fetch({success: function() {
+ self.render();
+ self.tree.get('packages').on('add', function(pack) {
+ console.log('Package ' + pack.get('pid') + ' added to tree');
+ self.appendPackage(pack, 0, true);
+
+ });
+ }});
+ },
+
+ render: function() {
+ console.log('Render package list');
+ var packs = this.tree.get('packages');
+ this.files = this.tree.get('files');
+
+ this.packageUL = this.$('.package-list');
+ packs.each(_.bind(this.appendPackage, this));
+
+ this.fileUL = this.$('.file-list');
+ this.files.each(_.bind(this.appendFile, this));
+
+ return this;
+ },
+
+ // TODO sorting ?!
+ // Append a package to the list, index, animate it
+ appendPackage: function(pack, i, animation) {
+ var el = new packageView({model: pack}).render().el;
+ this.packageUL.appendWithAnimation(el, animation);
+ },
+
+ appendFile: function(file, i, animation) {
+ var el = new fileView({model: file}).render().el;
+ this.fileUL.appendWithAnimation(el, animation);
+ },
+
+ contentReady: function(files) {
+ this.files = files;
+ // show the files when no loading animation is running
+ if (!this.isLoading && this.files !== files)
+ this.show();
+ },
+
+ loading: function(model) {
+ // nothing to load when it is already open
+ if (model && this.files === model.get('files'))
+ return;
+
+ this.isLoading = true;
+ this.files = null;
+ var self = this;
+ // Render when the files are already set
+ this.fileUL.fadeOut({complete: function() {
+ if (self.files)
+ self.show();
+
+ self.isLoading = false;
+ }});
+ },
+
+ failure: function() {
+ // TODO
+ },
+
+ show: function() {
+ this.fileUL.empty();
+ this.files.each(_.bind(this.appendFile, this));
+ this.fileUL.fadeIn();
+ App.vent.trigger('dashboard:show', this.files);
+ },
+
+ // TODO: remove this debug stuff
+ 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 38b335dc9..eb3edccd8 100644
--- a/module/web/static/js/views/packageView.js
+++ b/module/web/static/js/views/packageView.js
@@ -9,7 +9,7 @@ define(['jquery', 'app', 'views/abstract/itemView', 'underscore'],
template: _.compile($("#template-package").html()),
events: {
'click .package-name': 'open',
- 'click .iconf-trash': 'delete',
+ 'click .iconf-trash': 'deleteItem',
'click .select': 'select'
},
@@ -38,11 +38,12 @@ define(['jquery', 'app', 'views/abstract/itemView', 'underscore'],
unrender: function() {
var self = this;
- this.$el.zapOut(function() {
+ this.$el.slideUp(function() {
self.destroy();
});
// TODO: display other package
+ App.vent.trigger('dashboard:loading', null);
},
@@ -50,27 +51,15 @@ define(['jquery', 'app', 'views/abstract/itemView', 'underscore'],
// Toggle expanding of packages
expand: function(e) {
e.preventDefault();
- var self = this;
-
- // this assumes the ul was created after item was rendered
- if (!this.expanded) {
- this.model.fetch({silent: true, success: function() {
- self.render(true);
- self.ul.animate({height: self.ul.data('height'), opacity: 'show'});
- self.expanded = true;
- }});
- } else {
- this.expanded = false;
- this.ul.animate({height: 0, opacity: 'hide'});
- }
},
open: function(e) {
+ e.preventDefault();
var self = this;
App.vent.trigger('dashboard:loading', this.model);
this.model.fetch({silent: true, success: function() {
console.log('Package ' + self.model.get('pid') + ' loaded');
- App.vent.trigger('dashboard:show', self.model.get('files'));
+ App.vent.trigger('dashboard:contentReady', self.model.get('files'));
}});
},
diff --git a/module/web/static/js/views/selectionView.js b/module/web/static/js/views/selectionView.js
index 5cb22b776..673753cba 100644
--- a/module/web/static/js/views/selectionView.js
+++ b/module/web/static/js/views/selectionView.js
@@ -6,6 +6,13 @@ define(['jquery', 'backbone', 'underscore', 'app'],
el: '#selection-area',
template: _.compile($("#template-select").html()),
+ events: {
+ 'click .iconf-check': 'deselect',
+ 'click .iconf-pause': 'pause',
+ 'click .iconf-trash': 'trash',
+ 'click .iconf-refresh': 'refresh'
+ },
+
// available packages
tree: null,
// selected files
@@ -20,14 +27,26 @@ define(['jquery', 'backbone', 'underscore', 'app'],
App.vent.on('dashboard:show', _.bind(this.set_files, this));
App.vent.on('package:selection', _.bind(this.render, this));
App.vent.on('file:selection', _.bind(this.render, this));
+
+ // TODO
+// this.tree.get('packages').on('delete', _.bind(this.render, this));
},
- render: function() {
- var files = 0;
+ get_files: function() {
+ var files = [];
if (this.files)
- files = this.files.where({selected: true}).length;
+ files = this.files.where({selected: true});
+
+ return files;
+ },
- var packs = this.tree.get('packages').where({selected: true}).length;
+ get_packs: function() {
+ return this.tree.get('packages').where({selected: true});
+ },
+
+ render: function() {
+ var files = this.get_files().length;
+ var packs = this.get_packs().length;
if (files + packs > 0)
this.$el.html(this.template({files: files, packs: packs}));
@@ -44,6 +63,38 @@ define(['jquery', 'backbone', 'underscore', 'app'],
set_files: function(files) {
this.files = files;
this.render();
+ },
+
+ deselect: function() {
+ this.get_files().map(function(file) {
+ file.set('selected', false);
+ });
+
+ this.get_packs().map(function(pack) {
+ pack.set('selected', false);
+ });
+
+ this.render();
+ },
+
+ pause: function() {
+ // TODO
+ },
+
+ trash: function() {
+ this.get_files().map(function(file) {
+ file.destroy();
+ });
+
+ this.get_packs().map(function(pack) {
+ pack.destroy();
+ });
+
+ this.render();
+ },
+
+ refresh: function() {
+ // TODO
}
});
}); \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2025-10-31 22:46:44 +0100