improved modal dialogs, added one for link grabber

15 files changed, 103 insertions, 537 deletions

diff --git a/module/web/pyload_app.py b/module/web/pyload_app.py
index 147c31a92..e6c8300a2 100644
--- a/module/web/pyload_app.py
+++ b/module/web/pyload_app.py
@@ -20,6 +20,7 @@ import time
 from os.path import join
 
 from bottle import route, static_file, request, response, redirect, HTTPError, error
+from jinja2 import TemplateNotFound
 
 from webinterface import PYLOAD, PROJECT_DIR, SETUP, env
 
@@ -89,7 +90,11 @@ def serve_template(path):
     """ Serve backbone templates """
     args = path.split("/")
     args.insert(1, "backbone")
-    return static_file("/".join(args), root=join(PROJECT_DIR, "templates"))
+    try:
+        return render_to_response("/".join(args))
+    except TemplateNotFound, e:
+        print e
+        return HTTPError(404, "Not Found")
 
 @route('/favicon.ico')
 def favicon():
diff --git a/module/web/static/css/default/style.less b/module/web/static/css/default/style.less
index 79fbbe1e8..8fe9aeb0e 100644
--- a/module/web/static/css/default/style.less
+++ b/module/web/static/css/default/style.less
@@ -253,8 +253,6 @@ header .logo {
 }

 

 #notification_div {

-/*position: absolute;*/

-/* left: 50%;*/

   float: right;

   width: 26%;

   margin-right: 15px;

diff --git a/module/web/static/js/default.js b/module/web/static/js/default.js
index b3d126b8d..782c97ac2 100644
--- a/module/web/static/js/default.js
+++ b/module/web/static/js/default.js
@@ -17,7 +17,6 @@ require.config({
         handlebars: "libs/Handlebars-1.0rc1",
 
         // Plugins
-        hbs: "libs/hbs-0.4.0",
         text: "libs/text-2.0.3",
         tpl: "../../templates"
 
@@ -35,18 +34,11 @@ require.config({
         "omniwindow": ["jquery"],
         "bootstrap": ["jquery"]
     }, // end Shim Configuration
-
-    // Handlebar Configuration
-    hbs: {
-        helperDirectory: 'helpers/',
-        templateExtension: 'html',
-        disableI18n: true
-    }
 });
 
 define('default', ['jquery', 'backbone', 'utils/initHB',
     'routers/defaultRouter', 'views/headerView', 'views/packageTreeView',
-    'utils/animations', 'bootstrap'],
+    'utils/animations', 'utils/lazyRequire', 'bootstrap'],
     function($, Backbone, Handlebars, DefaultRouter, HeaderView, TreeView) {
 
         var init = function() {
diff --git a/module/web/static/js/libs/hbs-0.4.0.js b/module/web/static/js/libs/hbs-0.4.0.js
deleted file mode 100644
index 69141e8d2..000000000
--- a/module/web/static/js/libs/hbs-0.4.0.js
+++ /dev/null
@@ -1,466 +0,0 @@
-/**
- * @license handlebars hbs 0.4.0 - Alex Sexton, but Handlebars has it's own licensing junk
- *
- * Available via the MIT or new BSD license.
- * see: http://github.com/jrburke/require-cs for details on the plugin this was based off of
- */
-
-/* Yes, deliciously evil. */
-/*jslint evil: true, strict: false, plusplus: false, regexp: false */
-/*global require: false, XMLHttpRequest: false, ActiveXObject: false,
-define: false, process: false, window: false */
-define([
-//>>excludeStart('excludeHbs', pragmas.excludeHbs)
-'handlebars', 'underscore', 'i18nprecompile', 'json2'
-//>>excludeEnd('excludeHbs')
-], function (
-//>>excludeStart('excludeHbs', pragmas.excludeHbs)
- Handlebars, _, precompile, JSON
-//>>excludeEnd('excludeHbs')
-) {
-//>>excludeStart('excludeHbs', pragmas.excludeHbs)
-  var fs, getXhr,
-        progIds = ['Msxml2.XMLHTTP', 'Microsoft.XMLHTTP', 'Msxml2.XMLHTTP.4.0'],
-        fetchText = function () {
-            throw new Error('Environment unsupported.');
-        },
-        buildMap = [],
-        filecode = "w+",
-        templateExtension = "hbs",
-        customNameExtension = "@hbs",
-        devStyleDirectory = "/styles/",
-        buildStyleDirectory = "/demo-build/styles/",
-        helperDirectory = "template/helpers/",
-        i18nDirectory = "template/i18n/",
-        buildCSSFileName = "screen.build.css";
-
-    if (typeof window !== "undefined" && window.navigator && window.document && !window.navigator.userAgent.match(/Node.js/)) {
-        // Browser action
-        getXhr = function () {
-            //Would love to dump the ActiveX crap in here. Need IE 6 to die first.
-            var xhr, i, progId;
-            if (typeof XMLHttpRequest !== "undefined") {
-                return new XMLHttpRequest();
-            } else {
-                for (i = 0; i < 3; i++) {
-                    progId = progIds[i];
-                    try {
-                        xhr = new ActiveXObject(progId);
-                    } catch (e) {}
-
-                    if (xhr) {
-                        progIds = [progId];  // so faster next time
-                        break;
-                    }
-                }
-            }
-
-            if (!xhr) {
-                throw new Error("getXhr(): XMLHttpRequest not available");
-            }
-
-            return xhr;
-        };
-
-        fetchText = function (url, callback) {
-            var xhr = getXhr();
-            xhr.open('GET', url, true);
-            xhr.onreadystatechange = function (evt) {
-                //Do not explicitly handle errors, those should be
-                //visible via console output in the browser.
-                if (xhr.readyState === 4) {
-                    callback(xhr.responseText);
-                }
-            };
-            xhr.send(null);
-        };
-
-    } else if (typeof process !== "undefined" &&
-               process.versions &&
-               !!process.versions.node) {
-        //Using special require.nodeRequire, something added by r.js.
-        fs = require.nodeRequire('fs');
-        fetchText = function ( path, callback ) {
-            var body = fs.readFileSync(path, 'utf8') || "";
-            // we need to remove BOM stuff from the file content
-            body = body.replace(/^\uFEFF/, '');
-            callback(body);
-        };
-    } else if (typeof java !== "undefined" && typeof java.io !== "undefined") {
-        fetchText = function(path, callback) {
-            var f = new java.io.File(path);
-            var is = new java.io.FileReader(f);
-            var reader = new java.io.BufferedReader(is);
-            var line;
-            var text = "";
-            while ((line = reader.readLine()) !== null) {
-                text += new String(line) + "\n";
-            }
-            reader.close();
-            callback(text);
-        };
-    }
-
-    var cache = {};
-    var fetchOrGetCached = function ( path, callback ){
-      if ( cache[path] ){
-        callback(cache[path]);
-      }
-      else {
-        fetchText(path, function(data){
-          cache[path] = data;
-          callback.call(this, data);
-        });
-      }
-    };
-    var styleList = [], styleMap = {};
-//>>excludeEnd('excludeHbs')
-
-      return {
-
-        get: function () {
-            return Handlebars;
-        },
-
-        write: function (pluginName, name, write) {
-
-            if ( (name + customNameExtension ) in buildMap) {
-                var text = buildMap[name + customNameExtension];
-                write.asModule(pluginName + "!" + name, text);
-            }
-        },
-
-        version: '0.4.0',
-
-        load: function (name, parentRequire, load, config) {
-          //>>excludeStart('excludeHbs', pragmas.excludeHbs)
-
-            var compiledName = name + customNameExtension,
-                disableI18n = (config.hbs && config.hbs.disableI18n),
-                partialDeps = [];
-
-            function recursiveNodeSearch( statements, res ) {
-              _(statements).forEach(function ( statement ) {
-                if ( statement && statement.type && statement.type === 'partial' ) {
-                    res.push(statement.id.string);
-                }
-                if ( statement && statement.program && statement.program.statements ) {
-                  recursiveNodeSearch( statement.program.statements, res );
-                }
-                if ( statement && statement.program && statement.program.inverse && statement.program.inverse.statements ) {
-                  recursiveNodeSearch( statement.program.inverse.statements, res );
-                }
-              });
-              return res;
-            }
-
-            // TODO :: use the parser to do this!
-            function findPartialDeps( nodes ) {
-              var res   = [];
-              if ( nodes && nodes.statements ) {
-                res = recursiveNodeSearch( nodes.statements, [] );
-              }
-              return _(res).unique();
-            }
-
-            // See if the first item is a comment that's json
-            function getMetaData( nodes ) {
-              var statement, res, test;
-              if ( nodes && nodes.statements ) {
-                statement = nodes.statements[0];
-                if ( statement && statement.type === "comment" ) {
-                  try {
-                    res = ( statement.comment ).replace(new RegExp('^[\\s]+|[\\s]+$', 'g'), '');
-                    test = JSON.parse(res);
-                    return res;
-                  }
-                  catch (e) {
-                    return "{}";
-                  }
-                }
-              }
-              return "{}";
-            }
-            function composeParts ( parts ) {
-              if ( !parts ) {
-                return [];
-              }
-              var res = [parts[0]],
-                  cur = parts[0],
-                  i;
-
-              for (i = 1; i < parts.length; ++i) {
-                if ( parts.hasOwnProperty(i) ) {
-                  cur += "." + parts[i];
-                  res.push( cur );
-                }
-              }
-              return res;
-            }
-
-            function recursiveVarSearch( statements, res, prefix, helpersres ) {
-              prefix = prefix ? prefix+"." : "";
-
-              var  newprefix = "", flag = false;
-
-              // loop through each statement
-              _(statements).forEach(function ( statement ) {
-                var parts, part, sideways;
-
-                // if it's a mustache block
-                if ( statement && statement.type && statement.type === 'mustache' ) {
-
-                  // If it has params, the first part is a helper or something
-                  if ( !statement.params || ! statement.params.length ) {
-                    parts = composeParts( statement.id.parts );
-                    for( part in parts ) {
-                      if ( parts[ part ] ) {
-                        newprefix = parts[ part ] || newprefix;
-                        res.push( prefix + parts[ part ] );
-                      }
-                    }
-                    res.push(prefix + statement.id.string);
-                  }
-
-                  var paramsWithoutParts = ['this', '.', '..', './..', '../..', '../../..'];
-
-                  // grab the params
-                  if ( statement.params ) {
-                    _(statement.params).forEach(function(param) {
-                      if ( _(paramsWithoutParts).contains(param.original) ) {
-                        helpersres.push(statement.id.string);
-                      }
-
-                      parts = composeParts( param.parts );
-
-                      for(var part in parts ) {
-                        if ( parts[ part ] ) {
-                          newprefix = parts[part] || newprefix;
-                          helpersres.push(statement.id.string);
-                          res.push( prefix + parts[ part ] );
-                        }
-                      }
-                    });
-                  }
-                }
-
-                // If it's a meta block
-                if ( statement && statement.mustache  ) {
-                  recursiveVarSearch( [statement.mustache], res, prefix + newprefix, helpersres );
-                }
-
-                // if it's a whole new program
-                if ( statement && statement.program && statement.program.statements ) {
-                  sideways = recursiveVarSearch([statement.mustache],[], "", helpersres)[0] || "";
-                  if ( statement.program.inverse && statement.program.inverse.statements ) {
-                    recursiveVarSearch( statement.program.inverse.statements, res, prefix + newprefix + (sideways ? (prefix+newprefix) ? "."+sideways : sideways : ""), helpersres);
-                  }
-                  recursiveVarSearch( statement.program.statements, res, prefix + newprefix + (sideways ? (prefix+newprefix) ? "."+sideways : sideways : ""), helpersres);
-                }
-              });
-              return res;
-            }
-
-            // This finds the Helper dependencies since it's soooo similar
-            function getExternalDeps( nodes ) {
-              var res   = [];
-              var helpersres = [];
-
-              if ( nodes && nodes.statements ) {
-                res = recursiveVarSearch( nodes.statements, [], undefined, helpersres );
-              }
-
-              var defaultHelpers = ["helperMissing", "blockHelperMissing", "each", "if", "unless", "with"];
-
-              return {
-                vars : _(res).chain().unique().map(function(e){
-                  if ( e === "" ) {
-                    return '.';
-                  }
-                  if ( e.length && e[e.length-1] === '.' ) {
-                    return e.substr(0,e.length-1) + '[]';
-                  }
-                  return e;
-                }).value(),
-                helpers : _(helpersres).chain().unique().map(function(e){
-                  if ( _(defaultHelpers).contains(e) ) {
-                    return undefined;
-                  }
-                  return e;
-                }).compact().value()
-              };
-            }
-
-            function fetchAndRegister(langMap){
-              fetchText(path, function (text) {
-                  // for some reason it doesn't include hbs _first_ when i don't add it here...
-                  var nodes = Handlebars.parse(text),
-                      deps = findPartialDeps( nodes ),
-                      meta = getMetaData( nodes ),
-                      extDeps = getExternalDeps( nodes ),
-                      vars = extDeps.vars,
-                      helps = extDeps.helpers || [],
-                      depStr = deps.join("', 'hbs!").replace(/_/g, '/'),
-                      helpDepStr = config.hbs && config.hbs.disableHelpers ?
-                      "" : (function (){
-                        var i, paths = [],
-                            pathGetter = config.hbs && config.hbs.helperPathCallback
-                              ? config.hbs.helperPathCallback
-                              : function (name){return (config.hbs && config.hbs.helperDirectory ? config.hbs.helperDirectory : helperDirectory) + name;};
-
-                        for ( i = 0; i < helps.length; i++ ) {
-                          paths[i] = "'" + pathGetter(helps[i]) + "'"
-                        }
-                        return paths;
-                      })().join(','),
-                      debugOutputStart = "",
-                      debugOutputEnd   = "",
-                      debugProperties = "",
-                      metaObj, head, linkElem;
-
-                  if ( depStr ) {
-                    depStr = ",'hbs!" + depStr + "'";
-                  }
-                  if ( helpDepStr ) {
-                    helpDepStr = "," + helpDepStr;
-                  }
-
-                  if ( meta !== "{}" ) {
-                    try {
-                      metaObj = JSON.parse(meta);
-                      if ( metaObj && metaObj.styles ) {
-                        styleList = _.union(styleList, metaObj.styles);
-
-                        // In dev mode in the browser
-                        if ( require.isBrowser && ! config.isBuild ) {
-                          head = document.head || document.getElementsByTagName('head')[0];
-                          _(metaObj.styles).forEach(function (style) {
-                            if ( !styleMap[style] ) {
-                              linkElem = document.createElement('link');
-                              linkElem.href = config.baseUrl + devStyleDirectory + style + '.css';
-                              linkElem.media = 'all';
-                              linkElem.rel = 'stylesheet';
-                              linkElem.type = 'text/css';
-                              head.appendChild(linkElem);
-                              styleMap[style] = linkElem;
-                            }
-                          });
-                        }
-                        else if ( config.isBuild ) {
-                          (function(){
-                            var fs  = require.nodeRequire('fs'),
-                                str = _(metaObj.styles).map(function (style) {
-                                  if (!styleMap[style]) {
-                                    styleMap[style] = true;
-                                    return "@import url("+style+".css);\n";
-                                  }
-                                  return "";
-                                }).join("\n");
-
-                            // I write out my import statements to a file in order to help me build stuff.
-                            // Then I use a tool to inline my import statements afterwards. (you can run r.js on it too)
-                            fs.open(__dirname + buildStyleDirectory + buildCSSFileName, filecode, '0666', function( e, id ) {
-                              fs.writeSync(id, str, null, encoding='utf8');
-                              fs.close(id);
-                            });
-                            filecode = "a";
-                          })();
-                        }
-                      }
-                    }
-                    catch(e){
-                      console.log('error injecting styles');
-                    }
-                  }
-
-                  if ( ! config.isBuild && ! config.serverRender ) {
-                    debugOutputStart = "<!-- START - " + name + " -->";
-                    debugOutputEnd = "<!-- END - " + name + " -->";
-                    debugProperties = "t.meta = " + meta + ";\n" +
-                                      "t.helpers = " + JSON.stringify(helps) + ";\n" +
-                                      "t.deps = " + JSON.stringify(deps) + ";\n" +
-                                      "t.vars = " + JSON.stringify(vars) + ";\n";
-                  }
-
-                  var mapping = disableI18n? false : _.extend( langMap, config.localeMapping ),
-                      configHbs = config.hbs || {},
-                      options = _.extend(configHbs.compileOptions || {}, { originalKeyFallback: configHbs.originalKeyFallback }),
-                      prec = precompile( text, mapping, options);
-
-                  text = "/* START_TEMPLATE */\n" +
-                         "define(['hbs','handlebars'"+depStr+helpDepStr+"], function( hbs, Handlebars ){ \n" +
-                           "var t = Handlebars.template(" + prec + ");\n" +
-                           "Handlebars.registerPartial('" + name.replace( /\//g , '_') + "', t);\n" +
-                           debugProperties +
-                           "return t;\n" +
-                         "});\n" +
-                         "/* END_TEMPLATE */\n";
-
-                  //Hold on to the transformed text if a build.
-                  if (config.isBuild) {
-                      buildMap[compiledName] = text;
-                  }
-
-                  //IE with conditional comments on cannot handle the
-                  //sourceURL trick, so skip it if enabled.
-                  /*@if (@_jscript) @else @*/
-                  if (!config.isBuild) {
-                      text += "\r\n//@ sourceURL=" + path;
-                  }
-                  /*@end@*/
-
-                  for ( var i in deps ) {
-                    if ( deps.hasOwnProperty(i) ) {
-                      deps[ i ] = 'hbs!' + deps[ i ].replace(/_/g, '/');
-                    }
-                  }
-
-                  if ( !config.isBuild ) {
-                    require( deps, function (){
-                      load.fromText(text);
-
-                      //Give result to load. Need to wait until the module
-                      //is fully parse, which will happen after this
-                      //execution.
-                      parentRequire([name], function (value) {
-                        load(value);
-                      });
-                    });
-                  }
-                  else {
-                    load.fromText(name, text);
-
-                    //Give result to load. Need to wait until the module
-                    //is fully parse, which will happen after this
-                    //execution.
-                    parentRequire([name], function (value) {
-                      load(value);
-                    });
-                  }
-
-                  if ( config.removeCombined ) {
-                    fs.unlinkSync(path);
-                  }
-              });
-            }
-
-            var path,
-                omitExtension = config.hbs && config.hbs.templateExtension === false;
-            if(omitExtension) {
-              path = parentRequire.toUrl(name);
-            } else {
-              path = parentRequire.toUrl(name +'.'+ (config.hbs && config.hbs.templateExtension ? config.hbs.templateExtension : templateExtension));
-            }
-
-            if (disableI18n){
-                fetchAndRegister(false);
-            } else {
-                fetchOrGetCached(parentRequire.toUrl((config.hbs && config.hbs.i18nDirectory ? config.hbs.i18nDirectory : i18nDirectory) + (config.locale || "en_us") + '.json'), function (langMap) {
-                  fetchAndRegister(JSON.parse(langMap));
-                });
-            }
-          //>>excludeEnd('excludeHbs')
-        }
-      };
-});
-/* END_hbs_PLUGIN */
diff --git a/module/web/static/js/utils/initHB.js b/module/web/static/js/utils/initHB.js
index d3264e4bc..6d9436835 100644
--- a/module/web/static/js/utils/initHB.js
+++ b/module/web/static/js/utils/initHB.js
@@ -1,7 +1,9 @@
 // Loads all helper and set own handlebars rules
-define(['handlebars', 'helpers/formatSize'],
-    function(Handlebars) {
+define(['underscore', 'handlebars', 'helpers/formatSize'],
+    function(_, Handlebars) {
         // TODO: create better lexer rules, these are just hacked
         Handlebars.Parser.lexer.rules = [/^(?:[^\x00]*?(?=(<%)))/, /^(?:[^\x00]+)/, /^(?:[^\x00]{2,}?(?=(<%|$)))/, /^(?:<%>)/, /^(?:<%#)/, /^(?:<%\/)/, /^(?:<%\^)/, /^(?:<%\s*else\b)/, /^(?:<%=)/, /^(?:<%&)/, /^(?:<%![\s\S]*?\}\})/, /^(?:<%)/, /^(?:=)/, /^(?:\.(?=[%> ]))/, /^(?:\.\.)/, /^(?:[\/.])/, /^(?:\s+)/, /^(?:=%>)/, /^(?:%>)/, /^(?:"(\\["]|[^"])*")/, /^(?:'(\\[']|[^'])*')/, /^(?:@[a-zA-Z]+)/, /^(?:true(?=[%>\s]))/, /^(?:false(?=[%>\s]))/, /^(?:[0-9]+(?=[%>\s]))/, /^(?:[a-zA-Z0-9_$-]+(?=[%>=}\s\/.]))/, /^(?:\[[^\]]*\])/, /^(?:.)/, /^(?:$)/];
+        _.compile = Handlebars.compile;
+
         return Handlebars
     });
\ No newline at end of file
diff --git a/module/web/static/js/utils/lazyRequire.js b/module/web/static/js/utils/lazyRequire.js
index d20d78610..b381e0ce6 100644
--- a/module/web/static/js/utils/lazyRequire.js
+++ b/module/web/static/js/utils/lazyRequire.js
@@ -1,9 +1,9 @@
 // Define the module.
 define(
 	[
-		"require"
+		"require", "underscore"
 	],
-	function( require ){
+	function( require, _ ){
 
 
 		// Define the states of loading for a given set of modules
@@ -31,7 +31,7 @@ define(
 			var state = states.unloaded;
             var args;
 
-			var requireOnce = function( dependencies, loadCallback ){
+			var requireOnce = function(dependencies, loadCallback ){
 
 				// Use the module state to determine which method to
 				// invoke (or just to ignore the invocation).
@@ -80,10 +80,17 @@ define(
 		// -------------------------------------------------- //
 		// -------------------------------------------------- //
 
+        // Set up holder for underscore
+        var instances = {};
+        _.requireOnce = function(dependencies, loadCallback) {
+            if (!_.has(instances, dependencies))
+                instances[dependencies] = lazyRequire.once();
 
-		// Return the module definition.
-		return( lazyRequire );
+            return instances[dependencies](dependencies, loadCallback)
+        };
 
 
+		// Return the module definition.
+		return( lazyRequire );
 	}
 );
\ No newline at end of file
diff --git a/module/web/static/js/views/modal/modalView.js b/module/web/static/js/views/abstract/modalView.js
index 1de32668d..56c060a42 100644
--- a/module/web/static/js/views/modal/modalView.js
+++ b/module/web/static/js/views/abstract/modalView.js
@@ -1,4 +1,4 @@
-define(['jquery', 'backbone', 'underscore', 'text!tpl/default/modal.html', 'omniwindow'], function($, Backbone, _, template) {
+define(['jquery', 'backbone', 'underscore', 'omniwindow'], function($, Backbone, _) {
 
     return Backbone.View.extend({
 
@@ -7,16 +7,21 @@ define(['jquery', 'backbone', 'underscore', 'text!tpl/default/modal.html', 'omni
             'click .close': 'hide'
         },
 
-        template: _.template(template),
-
+        template: null,
         dialog: null,
 
         initialize: function() {
+            var self = this;
+            if (this.template === null) {
+                require(['text!tpl/default/modal.html'], function(template) {
+                    self.template = template;
+                });
+            }
 
         },
 
         render: function() {
-            this.$el.html(this.template({ content: this.renderContent().html(), header: this.getHeader()}));
+            this.$el.html(this.template({ content: this.renderContent().html()}));
             this.$el.addClass('modal hide');
             this.$el.css({opacity: 0, scale: 0.7});
             $("body").append(this.el);
@@ -56,10 +61,6 @@ define(['jquery', 'backbone', 'underscore', 'text!tpl/default/modal.html', 'omni
             return $('<h1>Content!</h1>');
         },
 
-        getHeader: function() {
-            return 'Dialog';
-        },
-
         show: function() {
             if (this.dialog === null)
                 this.render();
diff --git a/module/web/static/js/views/fileView.js b/module/web/static/js/views/fileView.js
index 85b40a413..b37d4aefa 100644
--- a/module/web/static/js/views/fileView.js
+++ b/module/web/static/js/views/fileView.js
@@ -1,4 +1,4 @@
-define(['jquery', 'backbone', 'underscore', 'handlebars'], function($, Backbone, _, HB) {
+define(['jquery', 'backbone', 'underscore'], function($, Backbone, _) {
 
     // Renders single file item
     return Backbone.View.extend({
@@ -6,7 +6,7 @@ define(['jquery', 'backbone', 'underscore', 'handlebars'], function($, Backbone,
         tagName: 'li',
         className: 'file-view',
 //        template: _.template($("#template-file").html()),
-        template: HB.compile($("#template-file").html()),
+        template: _.compile($("#template-file").html()),
         events: {
 
         },
diff --git a/module/web/static/js/views/headerView.js b/module/web/static/js/views/headerView.js
index 6a4ac270d..9f7dda044 100644
--- a/module/web/static/js/views/headerView.js
+++ b/module/web/static/js/views/headerView.js
@@ -1,13 +1,16 @@
-define(['jquery', 'backbone', 'flot'], function($, Backbone){
+define(['jquery', 'backbone', 'flot'], function($, Backbone) {
     // Renders the header with all information
     return Backbone.View.extend({
 
         el: 'header',
 
         events: {
-
+            'click .btn-grabber': 'open_grabber'
         },
 
+        // Will hold the link grabber
+        grabber: null,
+
         initialize: function() {
 
             var totalPoints = 100;
@@ -38,21 +41,21 @@ define(['jquery', 'backbone', 'flot'], function($, Backbone){
             var updateInterval = 1500;
 
             var speedgraph = $.plot(this.$el.find("#speedgraph"), [getRandomData()], {
-                series:{
-                    lines:{ show:true, lineWidth:2 },
-                    shadowSize:0,
-                    color:"#fee247"
+                series: {
+                    lines: { show: true, lineWidth: 2 },
+                    shadowSize: 0,
+                    color: "#fee247"
                 },
-                xaxis:{ ticks:[], mode:"time" },
-                yaxis:{ ticks:[], min:0, autoscaleMargin:0.1 },
-                grid:{
-                    show:true,
+                xaxis: { ticks: [], mode: "time" },
+                yaxis: { ticks: [], min: 0, autoscaleMargin: 0.1 },
+                grid: {
+                    show: true,
 //            borderColor: "#757575",
-                    borderColor:"white",
-                    borderWidth:1,
-                    labelMargin:0,
-                    axisMargin:0,
-                    minBorderMargin:0
+                    borderColor: "white",
+                    borderWidth: 1,
+                    labelMargin: 0,
+                    axisMargin: 0,
+                    minBorderMargin: 0
                 }
             });
 
@@ -68,8 +71,17 @@ define(['jquery', 'backbone', 'flot'], function($, Backbone){
 
         },
 
-
         render: function() {
+        },
+
+        open_grabber: function() {
+            var self = this;
+            _.requireOnce(['views/linkGrabberModal'], function(modalView) {
+                if (self.grabber === null)
+                    self.grabber = new modalView();
+
+                self.grabber.show();
+            });
         }
     });
 });
\ No newline at end of file
diff --git a/module/web/static/js/views/linkGrabberModal.js b/module/web/static/js/views/linkGrabberModal.js
new file mode 100644
index 000000000..b5c91baa6
--- /dev/null
+++ b/module/web/static/js/views/linkGrabberModal.js
@@ -0,0 +1,21 @@
+define(['jquery', 'underscore', 'views/abstract/modalView', 'text!tpl/default/linkgrabber.html'],
+    function($, _, modalView, template) {
+
+    return modalView.extend({
+
+        events: {
+        },
+
+        template: _.compile(template),
+
+        initialize: function() {
+            // Inherit parent events
+            this.events = _.extend({}, modalView.prototype.events,this.events);
+        },
+
+        renderContent: function() {
+            return $('<h1>Content!</h1>');
+        }
+
+    });
+});
\ 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 7cccc9bf4..efbf6b76e 100644
--- a/module/web/static/js/views/packageView.js
+++ b/module/web/static/js/views/packageView.js
@@ -1,22 +1,17 @@
-define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView', 'utils/lazyRequire', 'handlebars'],
-    function($, itemView, _, fileView, lazyLoader, HB) {
+define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView'],
+    function($, itemView, _, fileView) {
 
     // Renders a single package item
     return itemView.extend({
 
         tagName: 'li',
         className: 'package-view',
-//        template: _.template($("#template-package").html()),
-        template: HB.compile($("#template-package").html()),
+        template: _.compile($("#template-package").html()),
         events: {
             'click .package-header': 'load',
-            'click .delete': 'delete',
-            'click .show-dialog': 'show_dialog'
+            'click .delete': 'delete'
         },
 
-        modal: null,
-        requireOnce: lazyLoader.once(),
-
         initialize: function() {
             this.model.on('filter:added', this.hide, this);
             this.model.on('filter:removed', this.show, this);
@@ -48,18 +43,6 @@ define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView', 'ut
             this.$el.zapOut(function() {
                 self.destroy();
             });
-        },
-
-        show_dialog: function(e) {
-            console.log(e);
-            e.stopPropagation();
-            var self = this;
-            this.requireOnce(['views/modal/modalView'], function(modalView){
-                if (self.modal === null)
-                    self.modal = new modalView();
-
-                self.modal.show();
-            });
-         }
+        }
     });
 });
\ No newline at end of file
diff --git a/module/web/templates/default/backbone/linkgrabber.html b/module/web/templates/default/backbone/linkgrabber.html
new file mode 100644
index 000000000..1a9bea925
--- /dev/null
+++ b/module/web/templates/default/backbone/linkgrabber.html
@@ -0,0 +1,7 @@
+{% extends 'default/backbone/modal.html' %}
+{% block header %}
+    Add Package
+{% endblock %}
+{% block content %}
+    Place Content here
+{% endblock %}
\ No newline at end of file
diff --git a/module/web/templates/default/backbone/modal.html b/module/web/templates/default/backbone/modal.html
index afc5d7b58..467c85437 100644
--- a/module/web/templates/default/backbone/modal.html
+++ b/module/web/templates/default/backbone/modal.html
@@ -1,11 +1,15 @@
 <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-    <h3><%- header %></h3>
+    <h3>{% block header%}Dialog{% endblock %}</h3>
 </div>
 <div class="modal-body">
-    <%- content %>
+    {% block content %}
+    <%= content %>
+    {% endblock %}
 </div>
 <div class="modal-footer">
+    {% block buttons %}
     <a href="#" class="btn btn-close">Close</a>
     <a href="#" class="btn btn-primary">Save</a>
+    {% endblock %}
 </div>
\ No newline at end of file
diff --git a/module/web/templates/default/base.html b/module/web/templates/default/base.html
index e93eb52f8..1ae95b127 100644
--- a/module/web/templates/default/base.html
+++ b/module/web/templates/default/base.html
@@ -42,7 +42,7 @@
                     <a class="header-link" href="#"><i class="icon-list-alt icon-white"></i> Accounts</a>

                     <br/>

 

-                    <a class="btn btn-success" href="#"><i class="icon-plus icon-white"></i> Add</a>

+                    <a class="btn btn-success btn-grabber" href="#"><i class="icon-plus icon-white"></i> Add</a>

 

                     <div class="btn-group">

                         <a class="btn btn-blue" href="#"><i class="icon-user icon-white"></i> User</a>

diff --git a/module/web/utils.py b/module/web/utils.py
index 236a9244e..0b8c8f9df 100644
--- a/module/web/utils.py
+++ b/module/web/utils.py
@@ -28,7 +28,7 @@ def render_to_response(name, args={}, proc=[]):
     if is_mobile():
         t = env.get_or_select_template(("mobile/" + name,))
     else:
-        t = env.get_or_select_template((TEMPLATE + "/" + name, "default/" + name))
+        t = env.get_or_select_template((TEMPLATE + "/" + name, "default/" + name, name))
     return t.render(**args)