created a nice UI for making new methods: split new method dialog up a bit to make resource selection easier to manage

Author: pospi

css/apimenu.css

@@ -288,3 +288,26 @@ height: 16px;
 display: inline-block;
 overflow: hidden;
   }
+
+
+/*
+New Method popup dialog
+ */
+.method-content {
+	position: absolute;
+	background: #FFF;
+	left: 100%;
+	width: 550px;
+	padding: 50px;
+	border-top: 1px solid #EBEBEB;
+	border-right: 1px solid #EBEBEB;
+	border-bottom: 1px solid #EBEBEB;
+	margin-left: -50px;
+
+	transition: top 0.3s;
+	-moz-transition: top 0.3s;
+	-o-transition: top 0.3s;
+	-webkit-transition: top 0.3s;
+}
+
+.method-content.form label { display: inline; }

js/views/apis/documentation.js

@@ -21,7 +21,8 @@ define([
   'views/apis/overview',
   'models/method',
   'views/modals/newresource',
-], function($, _, Backbone, Router, Vm,  Mustache, Qtip, Session, docsTemplate, ApiModel, MethodsCollection, ResourceListView, MethodDetailView, ResourceDetailView, ResourceModel, MethodModel, hljs, ResourceForm, Modal, OverView, Method, NewResource){
+  'text!templates/modals/newmethod.html'
+], function($, _, Backbone, Router, Vm,  Mustache, Qtip, Session, docsTemplate, ApiModel, MethodsCollection, ResourceListView, MethodDetailView, ResourceDetailView, ResourceModel, MethodModel, hljs, ResourceForm, Modal, OverView, Method, NewResource, newMethodDialog){
   var NewApiPage = Backbone.View.extend({
     el: '.api-page-container',
     initialize: function () {
@@ -50,11 +51,53 @@ define([
 
       this.modal = Modal.create({
         inline : {
+        	title : "Choose Resource",
+        	savetext : "Create method",
         	from : $('.resource-list-container'),
         	cloneDOM : true
         }
       });
 
+      var modalEl = this.modal.el,
+      	modalForm = $('form.inline-edit', modalEl),
+      	modalResourceAs = $('a[data-resource-id]', modalEl),
+      	resourceInput = $('<input type="hidden" name="resource" />');
+
+      // hide stuff from the resource list we don't want to see
+      $('.notification', modalEl).remove();
+      $('.modal-form-errors', modalEl).remove();
+
+      // slide method rows up to hide them
+      $('.resource-list-container', modalEl).css('height', 'auto');
+      $('.resource-submenu', modalEl).slideUp('fast');
+
+      // add a hidden input for the resource ID and rebind resource row click events to it
+      modalForm.append(resourceInput);
+      modalResourceAs.removeClass('active').on('click', function() {
+      	// store value for form submission
+      	resourceInput.val($(this).data('resource-id'));
+
+      	// indicate current selection
+      	modalResourceAs.removeClass('active');
+      	$(this).addClass('active');
+
+      	$('.modal-confirm', modalEl).show();			// OK to show submit button now
+      	$('.modal-title', modalEl).html("New Method");	// and change the title hint
+
+      	// show and position the secondary dialog element we've injected below
+      	var topOffset = $(this).closest('li').position().top - parseInt($('.method-content', modalEl).css('padding-top'));
+      	$('.method-content', modalEl).css('top', topOffset).show();
+
+      	return false;
+      });
+
+      // inject the secondary dialog element for entering the method details
+      // :TODO: errordef
+      modalForm.append(Mustache.render(newMethodDialog, {}, {errorDef : ''}));
+
+      // hide confirm button until we've picked a resource
+      $('.modal-confirm', modalEl).hide();
+
       return false;
     },
     saveMethod: function (ev) {

templates/modals/newmethod.html

@@ -1,11 +1,7 @@
-<form class="form new-method-form">
-
-<div class="modal-header"><span class="icon modal-close-icon js-close-modal">&#88;</span></div>
-<div class="modal-content">
-    <h3 class="modal-title">New method</h3>
-
-    <ul class="modal-form-errors">
-    </ul>
+<div class="method-content form" style="display: none;">
+    <div class="modal-form-errors">
+    	{{>errordef}}
+    </div>
 
     <input placeholder="Enter the name of your method" name="label" value="" type="text" required autofocus />
     <label for="method">Select method type:</label>
@@ -17,10 +13,3 @@ <h3 class="modal-title">New method</h3>
     </select>
 
 </div>
-<div class="modal-footer">
-    <div class="modal-buttons">
-        <button type="submit" class="btn btn-blue">Create method</button>
-    </div>
-</div>
-
-</form>