new jetpack/capability creation from window

flightdeck/base/templates/base.html

@@ -14,11 +14,13 @@
 	{% block roar_css %}<link href="/media/roar/Roar.css" rel="stylesheet" type="text/css">{% endblock %}
 	<script src="/media/js/FlightDeck.js"></script>
 	<script src="/media/js/FlightDeck.Roar.js"></script>
+	<script src="/media/js/FlightDeck.Modal.js"></script>
 	<script type='text/javascript'>
 		var fd;
 		window.addEvent('domready', function() {
 			fd = new FlightDeck();
-			{% block domready %}{% endblock %}
+			{% block app_domready %}{% endblock %}
+			{% block page_domready %}{% endblock %}
 		});
 	</script>
 </head>

flightdeck/jetpack/media/css/UI.Modal.css

@@ -21,6 +21,7 @@ authors:
    overflow: hidden;
    position: relative;
    padding-bottom: 15px;
+   z-index: 100;
 }
 
 .UI_Modal {
@@ -73,4 +74,4 @@ authors:
          background: -moz-linear-gradient(270deg, #BEC5CC, #D9DDE0);
          border-top: solid 1px transparent;
          color: #6D7880;
-      }
+      }

flightdeck/jetpack/media/js/Create.js

@@ -0,0 +1,40 @@
+/*
+ * File: jetpack/Create.js
+ */
+/*
+ * Class Create
+ * Create new Jetpack/Capability
+ */
+
+var create = {
+	init: function(create_id, wrapper_id) {
+		$(create_id).addEvent('click', function(e) {
+			e.stop();
+			var modal = fd.displayModal(settings.create_modal_template, wrapper_id);
+			$('create_form').addEvent('submit', this.submit.bind(this));
+			$('create_form_cancel').addEvent('click', function(e) {
+				e.stop();
+				this.destroy();
+			}.bind(modal));
+		}.bind(this))
+	},
+	submit: function(e) { 
+		e.stop();
+		var prefix = $$('input[name=choice]:checked')[0].get('value');
+		var data = {}
+		data[prefix+'_name'] = $('create-name').get('value');
+		data[prefix+'_description'] = $('create-description').get('value');
+		new Request.JSON({
+			url: settings['jp_' + prefix + '_create_url'],
+			data: data,
+			method: 'post',
+			onSuccess: function(response) {
+				window.location.href=response.absolute_url
+			}
+		}).send();
+		return false;
+	}
+};
+
+
+

flightdeck/jetpack/media/js/Editor.js

@@ -1,3 +1,7 @@
+/*
+ * File: jetpack/Editor.js
+ * Provides functionality for the Jetpack/Capability Editor
+ */
 /*
  * Class which provides basic wrapper.
  * Its functionalities should be overwritten in specific classes (Bespin.js, etc.)

flightdeck/jetpack/templates/_create.html

@@ -0,0 +1,34 @@
+<form class="UI_Forms" id="create_form" method="post" accept-charset="utf-8">
+	<fieldset>
+		<legend>Create new Jetpack/Capability</legend>
+
+		<ul class="UI_Choice">
+			<li>
+				<input id="create-jetpack" type="radio" name="choice" value="jetpack" checked="checked" />
+				<label for="create-jetpack">Jetpack</label>
+			</li>
+			<li>
+				<input id="create-capability" type="radio" name="choice" value="capability" />
+				<label for="create-capability">Capability</label>
+			</li>
+		</ul> <!-- /UI_Choice -->
+
+		<p class="UI_Field">
+			<label for="create-name">Name</label>
+			<input id="create-name" type="text" name="name" value="" />
+		</p> <!-- /UI_Field -->
+
+		<p class="UI_Field">
+			<label for="create-description">Description</label>
+			<textarea id="create-description" name="description" rows="8" cols="40"></textarea>
+		</p> <!-- /UI_Field -->
+	</fieldset>
+
+	<div class="UI_Modal_Actions">
+		<ul>
+			<li><input type="submit" name="save" value="Create" /></li>
+			<li><input type="reset" name="cancel" value="Cancel" id="create_form_cancel" /></li>
+		</ul>
+	</div> <!-- /UI_Modal_Actions -->
+</form> <!-- /UI_Forms -->
+

flightdeck/jetpack/templates/_editor_menu.html

@@ -29,12 +29,14 @@
 					<span class="UI_Editor_Icon"></span>
 				</a>
 			</li>
+			{% comment %}
 			<li class="UI_Editor_Menu_Button Icon_lock">
 				<a title="" href="#">Lock <span class="UI_Editor_Icon"></span></a>
 			</li>
 			<li class="UI_Editor_Menu_Button Icon_delete">
 				<a title="" href="#">Delete <span class="UI_Editor_Icon"></span></a>
 			</li>
+			{% endcomment %}
 		</ul>
 	</div> <!-- /editor-menu-wrapper -->
 

flightdeck/jetpack/templates/capability_edit.html

@@ -3,18 +3,12 @@
 
 {% block app_head %}
 	<title>{{ version }} - {{ settings.SITE_TITLE }}</title>
-	<script type='text/javascript'>
-		var settings = {
-			user: "{{ request.user }}",
-			jp_capability_create_url: "{{ capability_create_url }}"
-		};
-		var capability;
-	</script>
 {% endblock %}
 
 {# everything which is outside of the block will not be used #}
 {# <script></script> is there for syntax highlighting #}
-<script>{% block domready %}
+<script>{% block javascript %}var capability;{% endblock %}</script>
+<script>{% block app_domready %}
 	capability = new Capability({
 		slug: '{{ capability.slug }}',
 		name: '{{ capability.name }}',
@@ -46,11 +40,9 @@
 			<a title="{{ capability.name }}" href="#">{{ capability.name }} <span></span></a>
 		</h3>
 		<ul class="UI_File_Listing">
-			{% if version %}
-				<li class="UI_File_Selected">
-					<a title="" href="#" id="{{ capability|tab_link_id:"content" }}">Content <span></span></a>
-				</li>
-			{% endif %}
+			<li class="UI_File_Selected">
+				<a title="" href="#" id="{{ version|tab_link_id:"content" }}">Content <span></span></a>
+			</li>
 			<li class="UI_File_Normal">
 				<a title="" href="#" id="{{ capability|tab_link_id:"description" }}">Description <span></span></a>
 			</li>

flightdeck/jetpack/templates/editor.html

@@ -1,14 +1,27 @@
 {% extends "base.html" %}
+{% load jetpack_extras %}
 {% block head %}
 	<link rel="stylesheet" href="/media/jetpack/css/UI.Editor.css" type="text/css" media="screen" />
 	{# <link rel="stylesheet" href="/media/bespin/BespinEmbedded.css" type="text/css" media="screen" /> #}
 	{# <script src="/media/bespin/BespinEmbedded.js"></script> #}
+	<script src="/media/jetpack/js/Create.js"></script>
 	<script src="/media/jetpack/js/Editor.js"></script>
 	<script src="/media/jetpack/js/Capability.js"></script>
 	{# <script src="/media/jetpack/js/Bespin.js"></script>#}
+	<script type="text/javascript">
+		var settings = {
+			user: "{{ request.user }}",
+			jp_jetpack_create_url: "{% url jp_jetpack_create %}",
+			jp_capability_create_url: "{% url jp_capability_create %}",
+			create_modal_template: '{% escape_template "_create.html" %}'
+		};
+		{% block javascript %}{% endblock %}
+	</script>
 	{% block app_head %}{% endblock %}
 {% endblock %}
 
+{% block page_domready %}create.init('create','editor-wrapper');{% endblock %}
+
 {% block app_body %}
 	{# here sidebar #}
 	<aside id="app-sidebar" class="UI_Sidebar">

flightdeck/jetpack/templates/jetpack_edit.html

@@ -3,20 +3,12 @@
 {% block app_head %}
 	<title>{{ version }} - {{ settings.SITE_TITLE }}</title>
 	<script src="/media/jetpack/js/Jetpack.js"></script>
-	<script type="text/javascript">
-		var settings = {
-			user: "{{ request.user }}",
-			jp_jetpack_create_url: "{{ jetpack_create_url }}",
-			jp_capability_create_url: "{{ capability_create_url }}"
-		};
-		var jetpack;
-		
-	</script>
 {% endblock %}
 
 {# everything which is outside of the block will not be used #}
 {# <script></script> is there for syntax highlighting #}
-<script>{% block domready %}
+<script>{% block javascript %}var jetpack;{% endblock %}</script>
+<script>{% block app_domready %}
 	jetpack = new Jetpack({
 		slug: '{{ jetpack.slug }}',
 		name: '{{ jetpack.name }}',
@@ -36,9 +28,9 @@
 			edit_url: '{{ version.get_absolute_url }}',
 			update_url: '{{ version.get_update_url }}',
 			set_as_base_url: '{{ version.get_set_as_base_url }}',
-			switch_content_id: '{{ jetpack|tab_link_id:"content" }}',
-			switch_description_id: '{{ jetpack|tab_link_id:"version_description" }}',
-			switch_manifest_id: '{{ jetpack|tab_link_id:"manifest" }}'
+			switch_content_id: '{{ version|tab_link_id:"content" }}',
+			switch_description_id: '{{ version|tab_link_id:"version_description" }}',
+			switch_manifest_id: '{{ version|tab_link_id:"manifest" }}'
 		}
 	});
 {% endblock %}</script>
@@ -52,10 +44,10 @@
 		</h3>
 		<ul class="UI_File_Listing">
 			<li class="UI_File_Selected">
-				<a title="" href="#" id="{{ jetpack|tab_link_id:"content" }}">Content <span></span></a>
+				<a title="" href="#" id="{{ version|tab_link_id:"content" }}">Content <span></span></a>
 			</li>
 			<li class="UI_File_Normal">
-				<a title="" href="#" id="{{ jetpack|tab_link_id:"manifest" }}">Manifest <span></span></a>
+				<a title="" href="#" id="{{ version|tab_link_id:"manifest" }}">Manifest <span></span></a>
 			</li>
 			<li class="UI_File_Normal">
 				<a title="" href="#" id="{{ jetpack|tab_link_id:"description" }}">Description <span></span></a>
@@ -96,9 +88,11 @@
 		<p class='cretor'>Origin by: <a href="{% url person_public_profile jetpack.creator.username %}">{{ jetpack.creator }}</a></p>
 		{% ifequal jetpack.creator.username version.author.username %}
 		{% else %}
-			<p class="author">{{ version.fullname }} by: 
-				<a href="{% url person_public_profile version.author.username %}">{{ version.author }}</a>
-			</p>
+			{% if version %}
+				<p class="author">{{ version.fullname }} by: 
+					<a href="{% url person_public_profile version.author.username %}">{{ version.author }}</a>
+				</p>
+			{% endif %}
 		{% endifequal %}
 	</section>
 

flightdeck/jetpack/templatetags/jetpack_extras.py

@@ -1,11 +1,14 @@
-from django import template
+from django.template import Template, Library, loader, Context
 from django.utils.safestring import mark_safe
+from django.utils import simplejson
+from django.template.defaultfilters import escapejs
 
-register = template.Library()
+register = Library()
 
 @register.filter
 def tab_link_id(item, value):
-	return "%s_%s" % (item.slug, value)
+	slug = item.slug if item else ''
+	return "%s_%s" % (slug, value)
 
 @register.filter
 def dependency_link_id(item):
@@ -21,3 +24,8 @@ def recently_modified_link_id(item):
 def render_fullname(item):
 	return mark_safe("%s <em>%s</em>" % (item.listname, item.fullname))
 
+
+@register.simple_tag
+def escape_template(template_name):
+	t = loader.get_template(template_name)
+	return escapejs(t.render(Context()))

flightdeck/media/js/FlightDeck.Modal.js

@@ -0,0 +1,47 @@
+/*
+ * Extending Flightdeck with Modal 
+ */
+
+FlightDeck = Class.refactor(FlightDeck,{
+	options: {
+		modalWrap: {
+			start: '<div class="UI_Modal_Wrapper"><div class="UI_Modal">',
+			end: '</div></div>'
+		}
+	},
+	initialize: function(options) {
+		this.setOptions(options);
+		this.previous(options);
+		this.modals = {};
+	},
+	/*
+	 * Method: displayModal
+	 * Pretty dummy function which just wraps the content with divs and shows on the screen
+	 */
+	makeModal: function(content) {
+		// copy options
+		var data = $H(this.options.modalWrap).getClean();
+		data['content'] = content;
+		var modal_el = Elements.from('{start}{content}{end}'.substitute(data));
+		var key = new Date().getTime()
+		modal_el.store('modalKey', key);
+		this.modals[key] = modal_el
+		return modal_el;
+	},
+	/*
+	 * Method: displayModal
+	 * Pretty dummy function which just wraps the content with divs and shows on the screen
+	 */
+	displayModal: function(content, inside_el) {
+		return this.makeModal(content).inject(inside_el, 'top');
+	},
+	// these two are not really used atm
+	hideModal: function(key) {
+		this.modals[key].hide();
+	},
+	destroyModal: function(key) {
+		this.modals[key].destroy();
+	}
+	
+
+});